越来越多的公司注意到了企业服务市场的潜力，设计师能接触到各种类型的平台级页面设计，我这两年工作中涉及到了crm、oa页面的设计，写下这篇文章记录了一些设计心得，希望对即将接触B端产品设计的设计师有所帮助，避开不必要的坑。

产品设计差异

可能很多人对B端产品的刻板印象就是简单的增删改查的后台系统，事实上这些纯工具类的后台系统只需设计好固定的模板复用即可，不需要专门的设计师跟踪，但是对一些复杂业务的产品就不适合。

to B的产品主要是一些平台型产品，常见的类型CRM，OA，SAAS，ERP等，涉及到很多业务性的内容，和to c产品的设计思路有所差异：

1. 产品面向的是企业，业务逻辑复杂，流程性强，专业名词较多，信息量巨大；

2. 业务和技术推进需求，产品效率为王，注重界面的实用性和操作效率；

3. 用户群体计算机水平层次不齐，部分产品较难直接接触到终端用户；

4. 大型产品的业务复杂从立项到正式发布上线往往会长达4~8个月甚至更久，持续跟踪时间长。

产品设计要点

后台产品重量级的几个组件：导航、表单、表格、图表、icon、颜色，设计时要注意后期的延展性、易用性、信息连贯性，接下来就从这几个组件的内容展开描述。

导航系统

后台产品的导航架构从网页布局演变而来，常用的网页布局有：

1. F式布局：用户通常会沿着左侧垂直浏览而下，先去寻找感兴趣的内容，将重点的内容放在左侧，遵循用户浏览轨迹，适合信息量丰富、菜单分支较多且具有逻辑顺序的产品。

2. Z式布局：用户首先关注的页头水平方向上的内容，再自上而下的浏览内容，适合信息量不多，且各个内容模块关系不大、平级的产品

 

从以上两种布局后台产品的导航主要演变为一下三种：通栏式、左中右式、F式布局，根据产品的功能丰富度、内容复杂度、拓展性选择合理的导航定义好产品的信息架构

表单易用性

B端产品中会涉及到大量的表单内容，表单常见运用场景：数据编辑表单、向导、弹窗、侧边栏等；表单的基本组成元素：标签、输入框、操作动作、帮助文字、输入反馈。

设计原则：

1. 表单内容的合理分类，按照一定的逻辑和关联度对表单进行分组，用分割线或者色块进行区分，保证信息层级清晰；

2. 合理展示较长表单内容，对于较长的表单内容可分步或者拆解成几个页面让用户按照逻辑顺序一一填写；

3. 简化表单，突出重点，隐藏低频或者只有专家级用户才使用的功能；

4. 表单浏览路径清晰，合理选择标签对齐方式、输入框布局方式，标签字段不宜超过5个字；

5. 合理考虑用户使用场景，避免用户主流程被迫中断脱离当前页面进行其他操作后又折回到原操作；

6. 用户在操作时，提供即时反馈，比如输入是否符合填写要求、密码的安全程度、展示搜索联想词、填写建议帮助等等；

7. 表单内容智能默认和预填写，减少输入次数和修改成本，设置符合大多数用户需要的默认选择和数值，或者根据具体某个用户信息智能关联相关内容；

8. 对于表单填写有主、次级分支时，可结合选项卡、折叠面板的方式展示，既能保证主操作流程的清晰和流畅性，又能保证页面的简洁性；

9. 直接展示基本的帮助文本，对于内容信息量巨大的帮助文本，可放在靠近标签或者输入框的地方，光标悬停时展示；

10. 正确区分必填字段和选填字段，常用*标记必填表单；

11. 让内容长度和输入框长度对应；

11. 表单也可以有趣，可加入一些输入动效，但是避免太花哨，毕竟高效填写才是重点。

 

表单标签的对齐方式会影响页面的美感，标签对齐方式和输入框的对齐方式有左对齐、右对齐、顶对齐，前两种布局方式更为紧凑，表单占用的垂直空间较少，但是标签和输入框之间的间距不可控，标签较长时，输入框相隔太远不利于阅读，后者用户在浏览和操作的时候，上下眼动就可，无需左右扫视，标签和字段的匹配会让整个界面在视觉上更加易用清晰，层次结构更优秀，同时确保了整体的可读性，标签长短不影响布局，但在纵向方向上占用更多的空间。

Matteo Penzo的眼动实验发现，左对齐标签方式标签移动到输入框需500毫秒，右对齐标签方式240毫秒，顶部标签方式50毫秒；表单完成速度顶对齐最快，左对齐最慢；顶对齐最占用纵向空间，适用标签长度多变需要较快填写表单的场景，右对齐适合纵向空间有限需要较快填写表单的场景，左对齐适合表达复杂需要仔细浏览标签的场景

表格易用性

1.  行高间距直接影响着阅读的体验，单行显示数据内容的表格行高约为字体高度的2.5倍到3倍；多行显示数据内容的表格，行中内容的最高点与最低点到行框的上下边距略小于文字高度。

2.  斑马线（分割线）引导阅读，斑马线会使得行与行的界限更为分明，斑马线的颜色悬停时变化方便用户区分鼠标所在的行。

      a. 强调行：强调每一行内信息的连续性，加强横向数据的引导，阅读时不容易错行，可强化横向分割线

      b. 强调列：配合表格列排序功能，强调数据的对比，可强化纵向分割线

      c. 不强调数据之间的关系，仅纯粹的数据展示，不同特别强化横向与纵向分割线；

      d. 数据较少的表格只用横向分割线

 3.  表格内的信息对齐能够形成视觉引导线，便于数据对比和阅读

      a. 文本信息左对齐

      b. 数据右对齐，便于数据的对比，同时数据的单位及小数点后位数要保持一致

      c. 每列均有多条数据的单元格顶对齐，有单行或多行则居中对齐；

      d. 固定内容居中对齐（节省表格空间）；

      e. 数据不存在的单元格划线“-”，数据为零的单元格，要填上“0”，避免留出空白单元格

 4.  操作项可放在行首、行中、行尾，根据具体需要选择，行首一般对应的是批量操作的场景；

      a. 含义明确，且常用的用icon来表示，也可用icon+文字表示；不明确的直接用纯文字表示

      b. 操作项超过3个操作动作，可折叠起来，点击下拉出现具体操作项

      c. 操作项较多时区分按钮主次，高频率操作按钮强化，低频操作弱化或者隐藏

      d. 隐性操作，当鼠标悬停时或勾选才显示操作选项，或者在表格顶部的表头，勾选所选条目以后点击操作按钮可用，适用于没有足够空间展示操作项

 5.  表格数据较多出现横向滚动条时，用户需要查看详细数据才能做判断时

      a. 表头固定：方便用户根据表格中的数据分辨出数据类型，避免用户迷失

      b. 表尾固定（操作列）：可快速判断操作，不用费时寻找操作区域提升使用效率

      c. 表格列固定：需要横向滚动表格，且需要对比数据时，固定需要对比列的字段

      d. 表格数据较多出现横向滚动条时，按数据的重要程度依次从左至右排列放置

 6.  高亮重点信息，提高阅读速度，使用icon、背景色等帮助读者更快定位重点信息

 7.  去除所有非必要的视觉元素，让用户将所有的注意力集中在数据信息上，除非该视觉元素能帮助用户更直观的展示数据，如数据升降icon

  9.   尽量不要堆砌太多数据，需要滚动条拖动才能看到数据时不能直观快速的获取数据还增加操作难度

 

后台产品的表格使用场景非常多，设计形式类似、复用性较强，因此设计时注意表格的通用性，对于特殊业务场景的表格可以在基础表格上再进行个性化设计；总之表格每行的数据不宜过多，对于产品经理给予的字段可适当删减，条件允许的话可以定制化，让用户自主配置需要的字段，出现滚动条会增加用户的擦做成本和记忆负担，降低了产品易用性。可通过字体大小、颜色、表格背景色，状态标识 icon 等帮助用户快速区分表格信息，定位重点信息，提升用户体验

 

关于Icon

后台型产品主要以字体图标为主，svg图标、png图标为辅，图标的大小和字体大小一致，使用png的会糊成一片，使用字体图标的优势很多：

1. 字体图标是矢量图标，无限缩放不失真

2. 字体图标比png格式更加轻量，加载时无需http请求，加载速度更快

3. 可通过CSS灵活控制样式，修改大小、颜色，便于复用

但是字体图标只能是单色icon，不适合渐变色或者双色，要用双色的话可以考虑使用svg格式的，对于较大像素的装饰性图标，颜色、样式丰富的可采用png格式的

 

设计师用AI或sketch设计好icon导出svg格式，再导入到相关网站转换为字体图标下载发给开发即可，开发直接调用，以下方第一个图标为例，命名“office”方便开发知道每个icon的作用，前端调用的是“e903”，具体的命名模式和前端沟通好，如home_menu_office

这里推荐两个网站,大家属熟悉的iconfont，还有一个就是iconmoon：https://icomoon.io/app/#/select，操作比较简单，稍微研究一下就会

关于颜色

用户初次使用就产品时就通过颜色就能产生直观感受，潜意识里会影响他们的思维，需要根据产品的特性和用户使用场景合理的选择颜色，传递产品价值。确定产品的主色一般有以下几种方式：

1. 品牌色延展，从企业logo中获取

2. 产品定位，了解产品属性，深入挖掘该属性中产品常用的颜色，如工具类产品常用蓝色、绿色

3. 情绪版分析，根据用户画像分析用户特征、使用场景等确定主色

4. 精神寓意，根据产品目标或者用户目标分析确定主色

定制好设计组件

B端产品相对C端来说比较庞大，组件的复用既能保证系统界面的统一性，又能提高开发效率，减少设计师的工作量，还具有很强的延展性。定制好组件，视觉表达模块化，通过标准的规范组合方式来构建整个设计方案，从而提升设计效率

 

定义好组件集合起来形成设计规范，完整的设计规范包含：

1. 界面设计中常用的组件

2. 单个组件内元素的不同形态，如按钮的norma、hover、click、disabled等，

3. 定义好组件的使用场景、使用规范，或者给出使用范例

设计师遇到类似页面的时候直接调用组件即可快速设计，或者和前端沟通直接按照组件来布局，省时省力，他人接手这个项目时，前端样式也基本可以一目了然

设计前准备工作

1. 了解业务逻辑，理解需求，不要被动的接收产品经理的需求，最好能直接面对终端用户，和用户对话

2. 定义好清晰的用户画像，了解用户电脑技能、使用场景、工作环境、心情状态等

3. 竞品分析，取长补短

 

基本的设计流程如下，业务和用户了解的越清晰，设计师就能适当修正产品经理的需求，后期和业务方或其他领导对接的时候改稿的次数就越少

设计原则

1.使用栅格系统布局，做好响应式适配

2.简洁的信息架构，便于用户快速理解产品

3.清晰的信息层级，统一的设计元素，视觉上简洁易读，避免无意义的装饰

4.保证Icon和功能的识别性

5.效率为王，简单易用，降低学习成本

6.及时反馈

7.一般采用系统默认字体，最小字号12px

8.标准化设计组件定制好设计规范，保证系统统一性，提升开发和设计效率

9.允许用户犯错，对于操作失误会引起严重后果的需要二次确认，如删除操作

10.表单填写注意一下极端值

11.具有新功能引导、使用帮助等

 

后台系统往往是由业务或者技术主导项目进度，以功能为主，尤其是项目周期紧时，UI和交互往往不被重视，导致UI还原度较低。这点设计师尤其要注意发布前的验收，想通过后期迭代优化的可能性很低，前端会以“我还有很多需求和bug要修复呢，下次再改吧”为由拒绝，这个时候设计师可能会有挫败感，但这是很正常的，项目阶段性目标随着项目进度变化而变化，我们要做的就是把需要优化的页面整理好提好需求，按照优先级排好，及时优化一些有重大设计缺陷的，优先级较低不影响正常使用的择期再优化。

后台系统中还有一个重要的模块就是图表，图表的重要性就不在此说明了，这两天在看一个准备优化的含有较多数据统计的后台系统，图表使用不合理不能直观展示数据信息，影响数据展示的同时用户也不能快速直观获取数据，这块的内容因为篇幅原因就留着下次再写