关于B端后台产品设计规范的制定 jesseliu

去年终于能抽出些时间对于开发者后台从UI、交互和一些表层功能模块进行优化改版，虽然最终在我离开公司的一段时间里停止了开发，但对于后台规范的理解还是保留了下来。

规范应该在什么时候建立？

在了解项目背景，并且完成了原型，我们不应该直接照着原型一个个的去设计页面，而是先完全的理解整个产品的功能，然后可以挑选一些基本页面、表单页面、表格页面、含有大量内容的页面分别出几张设计稿，等设计稿大致敲定之后，就可以先完成一些按钮、表单控件等基本控件的建立，然后在整个UI设计过程中边制作页面边增加控件，一般来说建立了10个页面之后，大部分的控件就已经随之完成。在整个过程中，页面和控件其实是相辅相成，如果一开始就想去搭建完整的控件，那么可以会发现制作页面过程中有些控件并不通用，如果在页面设计完成之后再构造控件，不仅会浪费大量的时间在页面设计上，而且还有可能一些疏忽导致控件的不统一，最后还得重新调整页面。

规范制作的目的是什么？

随着公司产品的增多，在整个产品设计过程中，UI视觉与交互不仅仅只是完成界面美观度上的设计，对UI设计人员的逻辑和页面样式的统一性处理上要求也非常高，作为完成、优化产品功能重要的一环，需要一套规范来辅助设计人员和开发人员，这样不仅可以使公司的后台产品在体验上、视觉上具有统一的体验感，简化设计人员的设计成本和前端人员的开发成本，同时能在后续迭代时更便于增加功能以及更重复的利用资源。

1、团队协作：同一时间可能很多项目在进行，或者同一个项目可能有多个设计师参与不同时段的设计，为了避免出现控件上的不统一，规范化的设计语言可以把控视觉语言统一性。

2、设计效率：规范可以帮助设计师快速的拆解产品结构，通过视觉规范可以快速的使用控件生成产品，不需要每一个项目每一个页面都去考虑美观层面的问题。

3、辅助产品和开发理解设计：设计规范同样适用于产品和开发人员，在明确了设计规范之后，产品可以把重心更集中在产品功能上，开发人员也可以快速了解设计的意图，从而建立对应的控件以及把通用功能的模块化。

4、方便产品迭代：产品迭代过程中可能会有一些功能的增加和改进，通过对控件的修改可以更快的应用到引用控件的页面。

5、方便用户对新产品的接受：作为产品人员更希望客户能捆绑在自己的所有产品上，因为规范设计上的统一性，用户在使用了同一套设计规范的产品A再去使用产品B的情况时就可以快速的上手，对新产品能更快的建立熟悉感。

规范制作的考量点有哪些？

1、模块化：把具有相同功能的结构模块化，比如条件筛选模块、表单填写模块等。

2、控件化：把页面内所有内容都拆分成单独的控件，比如输入框控件、表格控件、上传控件等。

3、层级化：包含功能结构层级和页面层级，功能结构层级通过一级导航栏、侧边栏、TAB、内容区、块级等进行划分，页面层级通过背景、区块、弹出菜单、弹出框进行划分。

规范设计详解

统一设计尺寸：

目前屏幕分辨率大概有1024px*768px（iPad是这个分辨率）、1366px*768px、和1920*1680，但考虑到设计师多是使用1920px*1680px分辨率的屏幕，为了使预览时可以最大化的显示页面样式，可统一采用1920px的宽度，高度根据内容的多少分为600px、900px、1200px、1500px等，每一个高度以300px的数值增加，这样可以让整个设计稿很规整，页便于我们自己找到页面。

注意事项：在设计时需要考虑宽度在1024px的情况下也不影响内容展示，毕竟即便我们可能不会去开发移动端App，但iPad还是要考虑到。

统一框架：

大多数后台都是主要采用T型布局，部分页面比如概况页可以采用国字型布局，基本布局分为顶栏（一级导航）、侧边栏（二级导航）和内容区，顶栏和侧边栏的高宽固定，内容区根据屏幕宽度进行自适应，内容区又包含多个块级内容，块级内容包含多个段落级内容，段落级内容包含多个行级内容，行级内容包含多个字段级内容。

注意事项：框架布局参加哪种布局可自行定义，但一定要把层级结构想的全面，不然很可能做着做着发现某个功能的层级太多找不到对应可以使用的布局。

颜色：

为了增加用户的感官面积，在设计时可以尽量不要使用彩色或暗色调作为页面的顶栏和侧边栏。整体可以中性色为主，以主色作为用户操作指引，以辅助色应用于一些提示等场景，整体分布建议中性色占70%，主色占25%，辅助色占5%.

字体：

中文使用系统字体，Windows系统使用微软雅黑，Mac系统使用苹黑或兰亭黑，英文字体使用内嵌Nexa字体，常用字体大小分为24px、20px、16px、14px、12px，行高分为32px、28px、24px、22px、20px。

注意事项：中文可选字体只能使用微软雅黑或者苹黑，但英文字体可以使用内嵌字体丰富样式，字体规范一旦建立就要保证每个文字都使用对应的规范，文字在后台占比较大，如果有些地方没有使用规范，到最后需要调整的时候会非常麻烦。

图标：

不建议太多的使用图标，一些常见的操作比如保存、删除等可以使用图标，但更多还是要以文字按钮为主，便于用户理解，在这里图标尺寸要统一成16px*16px和30px*30px这样几种，虽然每个图标可能大小不一，但为了方便开发制作，切图统一切成固定的尺寸，通常做法是为图标编组增加一个16px*16px或30px*30px的底，切图时以底的尺寸来切。

按钮：

常见的按钮类型分为重要按钮、次级按钮、危险按钮、不可点击按钮、虚线按钮、重要图标按钮、次级图标按钮和文字按钮，根据使用位置按钮高度包括24px、32px、38px，圆角角度依次为2px、4px、6px，按钮内文字不易过长。重要按钮用于流程内的主要操作，次级按钮常用于取消等，通常一个功能块只包含一个重要按钮，其他均为次级按钮，文字按钮通常用于表格内或一些行级的操作，按钮尺寸中38px可用于页面级操作，32px用于块级操作，24px用于行级操作。按钮位置根据用户浏览习惯应该固定居于右上或右下，方便用户找到。一个页面内应避免包含太多按钮，提交类按钮一个页面应该只存在一个，如果有多个模块对应不同的提交应该做的是把模块拆分到不同页面。

表单：

表单控件包含输入框、下拉框、日期选择框、时间选择框、单选、多选以及一些复合控件等，通常是由多个label和表单控件和提交按钮组成。与按钮一样表单控件的尺寸也分为24px、32px、38px，但基本常用是32px。通常表单模块中的内容为左对齐，label宽度固定，表单控件自适应，但考虑到现在屏幕越来越大，太长的表单控件不利于填写，所以在制作时把表单限制在一个固定宽度中再去居中或居左。

表单每项之间的间隔为20px（以控件为准，不是以label的间距）。

label和表单控件的排列分为label居上或者居左，可根据实际情况来使用，通常情况下，label居左适用于大量填写内容的表单，居上用于少量填写内容的表单。

表格：

表格作为展示数据用，是后台设计中使用最多的控件，规范中的四种布局可以依情况使用，要注意以下几个点。

对齐方式：通常情况下表格内容需要左对齐，但如果列的内容是固定的字数要使用居中对齐。

列宽：根据内容可能的长度划分宽度，如遇内容过多可以用鼠标悬停显示全部内容

行数：表格行数最多为20，超出20行分页显示

行高：表格行高可采用36、40、48、60固定行高等，内容尽量不要多行，内容过多时可以通过隐藏内容+鼠标指向显示全部内容或增加显示全部内容的文字按钮来显示。

弹框：

通知类提示：出现于网页右上角，5秒消失，也可以点击叉号关闭，适用于系统主动推送的通知。

页面内静态提示：通常用于提醒网页内一些操作的注意事项或向用户显示警告信息的提醒，可点击叉号关闭，或点击查看详情打开弹出框显示详细内容，

结果反馈类提示：通常用于前端与后端交互过程中出现的问题。

操作反馈类提示：通常用于用户点击某项操作按钮或者鼠标放置于某些具有隐藏内容或介绍的情况下使用。

其他控件：

包含页码、弹出框、日期选择、时间选择、上传、进度条、标签控件等。

交互规范：

文案统一、简练直白、直达其意

易懂：站在用户的理解角度，而不是产品人员的角度使用词句，避免过于书面化的语言和名词

亲和：不要太过强硬，但也不宜使用带有“卡通”感觉的词汇，比如“哟”“哦”等

简洁：有些大众已经明白的信息不需要一再的出现，比如同样是发送信息的按钮，因为用户已经在发送信息的场景下，那么按钮可以使用“发送”而不是“发送信息”

功能统一：避免出现同一功能使用不同的文案，比如“发送短信”和“信息发送”出现在同一平台里，我们应该定义一种规则，比如统一使用“动作”+“属性”的结合来定义所有功能文字。

上下文统一：比如通过“发送短信”按钮出现信息填写框，提交按钮应该使用“发送”而不是“提交”或“确认”

直达其意：文字只需要精确的表达出功能即可，不要添加任何带有附加描述性文字

层级划分

不要让用户对于页面的层级结构产生迷惑，一定要让用户不需要通过思考就知道我要实现什么功能应该通过什么方式进入，尽可能减少页面级别的跳转。这需要我们在一开始就把整个功能结构到页面结构都划分清楚，我们可以事先通过用户的角度走一遍流程，规划好每一个功能的路线，然后根据这些路线上的功能点来定义功能层级，每一个层级有一个明确的标题。比如开发者的后台，对于开发来说如果有多个App，每个App包含多个SDK，那么App应该是高于SDK的一个层级，而不是直接进入SDK页面，这是我在调整后台时比较在意的一块。

模块清晰

尽量保证一个块级元素只实现一项功能，多个相同的功能通过tab切换的方式进行切换。同时要以目标定义模块而不是以功能定义模块，比如有发送信息和A/BTest同样都有发送信息的功能，但这两个其实要实现的目标是不一样的。

即时编辑、即时反馈

比如如果用户需要在表格内更改一项内容，我们应该要做到增加用户鼠标指向提示，点击即可在当前区域把文本变成输入框控件，如果在填写过程中出现错误，应该即时提示，而不是等到用户做提交动作后再反馈错误。

少用弹出、多用浮动

弹出框的重量感是仅次于页面跳转的，弹出框不仅仅是让用户从视觉上出现了不连贯性，比如遮罩的出现会让页面颜色从明到暗以及视线的位置也要移动，同时也是影响操作的流畅性，应该尽量使用在当前操作区域的浮动框来代替出现在页面中心的弹出框。

流程化处理

当用户在一个表单包含太多输入项时候，很容易产生挫败感，我们应该做的是尽量按内容类型做出拆分，可以是块级拆分或者步骤拆分等。

增强对比

同一个页面每个层级之间的文字大小对比、明暗对比等都要比较明显的做出区分