规范讲解依旧分为上下两篇，此文为上篇，努力撸文中。

以下是常见的步骤条展示方式本文受有赞设计师@美芳的指导，将我日常工作通过统一设计规范来提效的思路整理成文章。

为什么要建立设计规范？

建立设计规范有三大优点：1、保证设计一致性 2、提升开发效率 3、方便产品迭代。

保证设计一致性：对公司来说，多名设计师合作，依然可以保证设计风格的统一。对于用户来说，提高了用户体验，提升操作效率，加深对产品的记忆。

提升开发效率：与前端有效沟通的工具，提高设计还原度，降低对接成本。并且开发可以根据设计组件库建立开发组件库，极大的提高开发效率。

方便产品迭代：随着产品的业务变化，发现一些问题或者需要优化用户体验时候，针对单个控件进行调整，就可以影响全局，十分便捷。

设计原则包括哪几点?

好的设计规范需要的拥有的设计原则：1、一致性 2、及时反馈 3、效率 4、可控。

一致性：从现实生活角度，与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；从界面角度，所有的元素和结构需保持一致，比如设计样式、图标和文本、元素的位置等。

及时反馈：包括控制反馈和页面反馈，通过界面样式和交互动效让用户可以清晰的感知自己的操作，操作后通过页面元素的变化清晰地展现当前状态。即操作中、操作后都能让用户有个心理预期。

效率：包括简化操作流程、语言表达清晰且明确、界面简单直白，让用户快速识别而非回忆。

可控：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策。用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

什么是设计规范？

从两个角度去分析，从搭建方式我们应遵循由小到大，可分为原子-分子-组件-模块-页面。就像盖楼房一样，一块块砖叠起。从使用场景来说，不管是做C端还是B端都遵循通用-导航-数据录入-数据展示-反馈-业务组件。

国内比较值得参考的组件库有哪些？

Zan Design、Ant Design、Element都是国内比较值得参考的组件库，如果我们想做一款B端产品，可以从这几个组件库中参考，并设计延展出一套有以自己品牌基因的组件库，这几大组件库可以当做字典参考，而非零到一去创建一套组件库。（网页链接放在文章末尾）

由于篇幅较长，本文先描述设计规范中包含的通用、导航以及数据录入。

通用组件有哪些？

01.色彩-主色

色彩中最重要的是主色，尽量选择冷色系，避免和错误、告警色冲突，产生歧义。比如红色就会和错误色冲突，这样错误警示色就不容易被发觉。并且避免高亮颜色，类似与荧光色。

比如我们的主色是一个蓝色，以下就是主色应用到组件。

01.色彩-功能色

功能色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。

01.色彩-中性色

用文艺一点的说法来描述中性色可以称它为“50度灰”，最深的颜色一般用于标题，正文文字。较浅的颜色用于边框，分割线，背景色。当然，我们也可以定义更多业务色，形成业务组件规范，用于banner，插画，业务标签等。

02.文字

不同系统的字体是不同的，字重表现形式也不同，字号大小不建议设置太多种，一个页面字号层级越多，页面会显得越乱，所以也要保持克制。正文字体一般采用14号字号，如果有些系统页面不多-“地广人稀”，正文字号用16也是可以的。

03.边框和圆角

边框加圆角就可以组合成一个组件。边框一般用1像素，小组件例如按钮，输入框圆角定于为2，大卡片为4。B端设计一般偏理性简约，不会用一些大圆角，儿童活泼风格的除外。

04.按钮

按钮分为小按钮，中按钮，大按钮。小按钮一般是气泡提示，中按钮大部分用在弹窗组件，大按钮用于全局性的页面里。定义三种按钮尺寸就足够用了。按钮长度最好不超过6个字，边距长度也需要定义，例如16px。

05.间距

一般是选用8的倍数，例如8、16、24、32、40、48、56、64、72…（也有选用十的倍数的），一些特殊情况可以定义为八的二分之一或八的三分之二，例如4、12。

06.栅格

栅格由栏、水槽、页边距组成。一般由24栅格组成（24栏+23水槽+2页边距），使用栅格会使页面看起来更加整洁也有利于前端开发响应式（关于自适应和响应式区别讲解链接在文章末尾）

栅格用于约束动态模块的模块比例，用在内容层。

栅格是配合响应式的产物，栅格规范的是内容层的模块比例而非宽度。

全局导航有哪些？

01.顶部导航

只存在于顶部的导航，不占用左右边位置，适用于一级导航数量较少的系统，优点是让用户使用的时候有沉浸感。

以下是常见的顶部导航样式。

02.侧边导航

便于快速操作，多用于较为复杂的系统。

以下是常见的侧边导航样式。

03.混合导航

混合导航是既有顶部导航又有侧边导航，一级导航是顶部导航，侧边导航为二级。以下是常见的混合导航样式。

总结：从顶部导航到侧边导航，再到混合导航，虽然复杂程度越来越高，沉浸体验越来越差，但产品可用性大于体验性是B端产品的特点，所以我们根据产品实际去抉择。

04.面包屑

面包屑就是页面内的导航，是我们跳转多个页面后也不会迷路的组件。每一级导航点击后，都必须要有页面承载。

以下是常见的面包屑展示位置

05.分页器

采用分页的形式分隔长列表，每次只加载一个页面。

06.步骤条

步骤条能让用户清晰知道自己进行到哪一步。当任务复杂或者存在先后顺序，将其分解成一系列步骤，从而简化任务。

以下是常见的步骤条展示方式

07.标签页

标签页可以帮助用户在一个页面内快速切换不同类型内容，提升单个页面整体扩展性。

数据录入有哪些？

01.输入框

PC端和移动端的输入框不同的点是PC端有五个输入状态，体现出及时反馈原则。

当输入长文本框时候会限制字数；有些输入框一输入就会出现关联词提示下拉框（带搜索属性），有些输入框会固定单位。

02.单选框

单选框可以分为横排样式和竖排样式，当文案较少时候可以使用横排，节约展示空间。胶囊样式点击面积更大，同时更强调选项。

03.多选框

多选框相比单选多了一个部分选中的状态。多选框的应用非常广泛，例如表单、表格、下拉框。

04.选择器

样式有点像输入框，不过多了一个三角下拉框，建议选项最好在8个以内，超出用滚动条展示，用户体验会比较好。

选择器还有一个拓展的样式，多选样式。这里要考虑一种情况，多选内容会在选择框里成为标签，当多选款选择到一行无法展示时，我们要考虑加高多选框，而不是用省略号代替。

05.级联选择

用于选项很多且有分组的情况。以下展示的二级选择器，当然我们也可以加到三级和四级，级联越多用户体验越差，所以我们要考虑业务需要去抉择。

06.树选择

如果每个组的内容并不多，可是能分类的小组较多，那我们可以改变展示样式-树选择。

07.日期选择

日期选择组件最好加上图标示意，根据用户习惯，可以一眼就看出这个组件的功能

不同功能的日期组件样式

08.时间选择器

以时分秒会单位的组件

我们也可以把时间日期组件结合起来

09.开关

滑动开关其实也是单选组件。开关适合用于具有对立意义的选项，开关的作用是即可生效，准确易懂。

10.步进器

步进器本质就是一个输入框，只不过输入同时也支持上下按钮加减。

11.滑动输入条

滑动输入条经常用到调节音量，价格区间等。

12.穿梭框

穿梭框是两个框之间列表数据交换，优势是可视化明显。

13.文件上传

文件上传主要考虑上传过程会出现的各种状态。

14.表单

表单是一个模块化组件。表单域就是数据录入组件。

表现形式需要注意的点

以上是对设计规范的详细讲解，规范只是产品的基础，需要去充分了解并灵活使用它，才能发挥出它的价值，很多大厂已经开源组件库，我们可以站在巨人肩膀上结合公司自身产品属性去使用它们，让开发和设计有更多时间在打磨产品细节上，为设计体验助力。

最后再次感谢有赞设计师@美芳在CCtalk的分享，我们是一群本着提升B端体验汇聚在一起的团队，欢迎关注公众号【且曼B端产品设计】交流探讨。

参考文献：

1.《CCtalk B端产品设计课》by 美芳

2.《我对栅格系统、自适应、响应式的理解》马爷不吃肥肉

3.《超全面总结！如何利用栅格系统做响应式设计？》 UXBoy

参考组件库网站：

1.  https://design.youzan.com/by  有赞

2.  https://ant.design/index-cn  蚂蚁

3.  https://element.eleme.cn/#/zh-CN  饿了么

Powered by Froala Editor