如果将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）全局导航

① 顶部导航

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

优点：