如果将B端产品看作房子，如何理解B端设计的视觉通用规范？

如何有效地搭建B端产品？在搭建设计策略时，也许你可以将产品看作一个“房子”，并从房屋打造的视角，来理解产品的整体设计思路。本篇文章里，作者用相对具象化的方式，讲述了他对B端产品设计的思考，一起来看看吧。

前言

前面几篇文章主要讲了关于产品知识的部分，从这篇开始就是回顾B端设计本身的设计知识。

如果说一个B端产品相当于是一个房子，每个1级页面相当于一个小的房间。那接下来我就以产品具象化为房子进行讲解，方便读者理解。

一、设计图纸——如何学习设计规范

1. 作用

设计规范常见的作用主要体现在3个部分。

1）保证设计的一致性

主要是从2个角度进行拆解。

1. 对内角度：多设计师合作，依然能保证设计风格的统一。
2. 对用户：提高用户体验，加深对产品的记忆，提升操作效率。

2）提升开发效率

对于前端同学沟通的有效的工具，能够提高设计的还原度，降低对接的成本。在开发侧可以建立公共组件库，可以有效地提高开发效率。在开发完成4分之3的时候，走查小组进行还原度测试的时候，能减少问题的发生。

3）方便产品迭代

随着产品在不同的阶段和业务的变化，能够发现一些问题，或者优化用户体验的时候，可以一键修改，十分便捷与高效。

建立之后，设计规范的协作流程：先判断是否需要进行设计？需要的话组件搭建页面，新增组件交给开发，最后是有页面开发。不需要的话可以直接进行到开发的流程，设计师不用参与。

这样的话就会带来一个问题：这样的设计师会不会没有存在感？

在组件库完善的团队里确实是会出现这种情况，这就是我前面为什么优先写的是关于产品的知识、以及用户调研之类的知识，要知道我们服务的是谁，来保证设计师的竞争力，这个才是成为体验设计师的的根本。

笔者认为设计师比到最后一定不是设计，而是对于用户和业务的理解深度。

2. 原则

常见的4个设计原则是：清晰，高效，友好，可控。

1）清晰：亲密，对比，对齐，重复。

2）高效：通常会有的特征是一致性，便捷性。高效性要求B端设计尽可能的较少跳转（原位>展开>气泡展示>抽屉>新建）。

3）友好：友好原则涉及到了操作的前中后。

• 操作前：给到适时的帮助与引导，减轻用户迷茫（例子：新手帮助、探照灯、帮助中心）。
• 操作中：通过界面样式和交互动效让用户可以清晰地感知到自己的操作（例子：拖拽特效）。
• 操作后：通过页面元素的清晰变化，展现当前流转状态（例子：跳转详情页，轻提示）。

4）可控：就是在时间和空间可以随时进行控制。

• 时间上就是自由——用户可以进行操作，包括：撤销，回退和终止当前合作等等。
• 空间上说的是导航——让用户时刻了解到自己当前的位置并，可以通过导航轻松回到上一级，下一级。

3. 学习方法

学习方法有很多种，我就分享下我自己的学习方法：小到大，搭建顺序与使用场景分类。

• 小到大（原子理论）：原子，分子，组件，模块，页面。
• 搭建顺序与使用场景：基础元件，展示组件，录入组建，反馈组建，反馈组建，页面模式库。

好了现在设计图纸出来了，要进行施工了。那我们要完成通用组件（砖和水泥）以及布局栅格导航（房梁和柱子）的搭建了。

二、房梁与柱子——布局与栅格

1. 布局分层

我们将整体布局分为4层：

1. 背景层：最底部的背景，通常指的是背景层。
2. 全局控制层：导航，也是就是能够支撑整个产品的柱子。
3. 内容层：承载内容的部分，栅格栏主要是用于这一层。
4. 临时层：弹窗，气泡，文字提示轻提示等等。

有的后台内容少，还采用版心布局方式。这个时候应该怎么处理？

在设计上，分为最小的页边距和自适应边距，当屏幕开始缩小的时候，自适应页面边距的最小值。临界值达到断点之后，内容区发生变化，间距保持一致，水槽不变。另外说一点，设计师可以灵活定义式栅格范围。

2. 房梁——栅格组成

栅格的组成：页边距，水槽，栏。

• 页面距：左右2边的边距表示出内容区的范围与其他（比如：擦边导航栏），方便内容进行填充。
• 水槽：栏之间间距，主要是用于模块之间进行划分。
• 栏：由水槽进行分割，基本数量=水槽数量+1。在进行高保真还原的场景，是按照相关的比例进行分割。

计算的栏的宽度：若页面距取20，水槽取16.那每一栏的宽度=「内容区宽度-23*16-2*20」

栅格栏的好处：

栅格栏可以避免设计师凭着自己的感觉进行设计，设计团队中多位设计师能够做得更加的整齐规划。

3. 柱子——导航组件

广义定义/狭义定义：只要能够跳转的都是导航（例如：link）——狭义和广义分类。

这里我们使用的是广义分类：全局导航，局部导航。主要是以控制范围的大小来进行判断。

1）全局导航

① 顶部导航

常见的使用场景是：导航数量比较少，内容比较简单，可以追求沉浸式的阅读体验。

优点：

• 占用屏幕空间小，为内容留出更多的更大的空间；
• 对视觉的干扰小，符合上到下的阅读习惯。

缺点也很明显：

• 随着业务的发展，拓展性变差；
• 二三级点击后隐藏，不方便用户记忆。

② 侧边导航

常见的使用场景是：更加适用于更专注功能和快速操作的系统，大多数用于复杂的系统。

优点：

• 拓展性比较强；
• 层级清晰，1级2级3级导航可以按照流程展示；
• 操作效率高，用户在操作和浏览中可以快速的进行定位，和切换当前的定位。

缺点也很明显：

• 视觉分隔较为明显，内容区沉浸感不是很强；
• 视觉动线左右来回移动，比顶部导航还要疲惫；
• 内容区的排版空间更小，需要考虑适配的问题。

③ 混合导航

常见的使用场景是：适用于功能架构特别复杂的，结构复杂的产品。

优点：

拓展性比较强。

缺点也很明显：

• 操作难度上升，操作动线更加的复杂；
• 内容区的展现收到了更大的影响。

④ 总结

从顶部导航栏到混合导航栏之间的设计，发生了3个变化：

1. 复杂度变高；
2. 沉浸式体验逐件变差；
3. 内容区的适配性逐件变差。

2）局部导航

① 面包屑导航

常见的使用场景是：2级以上的层级，最好不要超过5级。

常见的位置：

• 导航；
• 内容；
• 背景。

面包屑导航注意点：

• 面包屑导航优先级高于标签栏导航；
• 面包屑导航的中的每一次点击都必须有相应的页面承载；
• 面包屑导航层级过于复杂时候，中间层级显示可以用“……”呈现。

② 标签

标签页可以帮助用户在同一个页面快速地切换不同的类型内容，提高单个页面的拓展性。一般和时间状态扭转相关。

常见的样式：

• 基础样式；
• 卡片样式；
• 胶囊样式。

③ 分页

分页器常用的场景是为了避免表格数据加载压力以及减少用户等待加载的焦虑，从而将表格按照每一页固定地进行展示，当用户查看下一页或者是选择特定的页数时选择的交互方式。

• 优点：可以降低系统的数据加载压力，可以让用户等待的时间减少。
• 缺点：用户无法一眼看到全部信息，需要翻页操作，而且在需要定向选择操作时，也是比较复杂的。

④ 步骤条

主要场景是用于复杂并存在先后关系，将其拆分为一系列的步骤，从而减轻用户侧的操作负担。通常用于新增商品以及修改密码等场景。

三、砖头与水泥——通用组件

在B端常见的“砖头水泥”包含色彩，字体，字号，行高，间距，圆角，分割线以及按钮。

1. 色彩

常规分类是：主色板，功能色板，中性色板。主色使用场景：选中态，可点击，可交互，logo变化，可视化，情感插画等场景。

主色板的使用主要是两点：

尽量不要选择红色：一方面避免错误，与警告色冲突，会产生歧义。同时冷色系包含了理性、商务、科技等语义。更符合B端产品的调性。

如果实在是红色主色改不动，那么在按钮的处理上可以用灰色进行处理。

避免高亮色：高亮和荧光色，用户长时间使用容易产生视觉疲劳。灰调对的颜色容易显脏，视觉品质感差。作为按钮的字，辨识度会降低。即使是作为文字链接也会不清晰。

1）功能色板

• 成功色：常规是绿色，因为绿色在人们的印象是——生命清新，畅通安全。
• 警告色：常规是橙色，因为橙色在人们的印象中是——危险，警告，焦虑，不安全。
• 错误色：常规是红色，因为红色在人们的印象中的是——错误，暴力，停止，失败。

2）中性色板

常用与文字、背景分割线等颜色。常规分类N1-N9：

• N1：标题文字，1级正文文字
• N2：二级正文文字
• N3：辅助，说明文字
• N4：disable，提示文字等
• N6：输入线，按钮线框
• N7：分组边框，分割线
• N8：背景色（内容色块）
• N9：背景色（底层背景，输入框灰色背景）

如何保证文字的可读性？

推荐一个查看颜色对比的网址：http://color.review/

2. 字体

1）常见的字体

• IOS：中文——pingfang，英文——san franciso
• WIN：中文——microsoft，英文——arial
• 数字：din（商业需要购买正本）

2）常见字重：如何与前端沟通

• 苹果：regular mesium semibold
• win：400 500 600

3. 字号

在B端和C端不一样，在用字上面要讲究极度的克制，尽可能的“颜色>字重>字号”。正文字体为14号字，整体的阅读效率最佳。

在日常的办公场景，人眼测距得到的结果是人眼距离是50cm，14号字阅读效果最佳。

4. 行高

行高主要是用于计算多行文字高度时候使用，常规的计算是字号的1.5倍的偶数（例如：14号字的推荐行高是22）。

5. 间距

我是SaaS出身，我们常适配的是1440。有的自研CRM的话有的配的是1024，针对OA办公人群的话1920能够更适合于办公人群。

间距最好选择8的倍数，常见的补充数值：4，12。

6. 圆角

1）分场景

• 按钮/输入框推荐值：2px
• 用于卡片推荐值：4px

2）思考：为什么不用圆角？

• 不利于下拉场景；
• 与输入框风格格格不入；
• 连续排列里面的一致性。

6. 按钮

常见的分类方式：

• 大小：通常分为大——用于页面内，中——用于弹唱，小——用于小气泡；
• 长度：大于最小宽度设置padding值；
• 状态：主按钮，文字按钮，功能按钮。

按钮怎么放呢？

一般的：分为右上角，左右相随，上下相随，右下角。

阅读顺序：根据位置不同讲述顺序不同。

• 右上角、右下角：右往左；
• 左下角：左往右；
• 跟随：左往右；
• 居中：右往左（右手操作习惯）.

什么是好的规范——约束且规则。

四、总结

B端产品设计一般是比较枯燥的，如果是以具象化的思路理解整个产品的设计思路会比较轻松，理解成本也会比较低。

上面讲了房梁，柱子和水泥桩头，之后会将里面的箱子衣柜逐步拆解开来，方便给大家去理解。

本文由 @一只鸡腿 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

给作者打赏，鼓励TA抓紧创作！