设计笔记：关于设计规范的思考

说到设计规范，苹果和谷歌各有自己的iOS系列和Material Design；再看国内比较大的互联网公司，阿里巴巴因其蚂蚁金服的ant design因为早早建立从而许多小产品直接拿它的规范来践行到自己的设计，到现在已经成为了国内极具影响力的规范，让大家都来遵守你的规范，让阿里又扩大了对中国互联网产品的影响；有同事曾经和我讨论过：如果大家都遵守了设计规范，那设计岂不是了无生趣？这样说竟是不懂设计规范的真正意义了。因为工作的项目接近尾声，最近在整理规范，又有了一些新的见解，想分享给大家：

一、设计规范的意义和用处？

前面说到了苹果和谷歌两大公司，苹果因其智能手机的高普及率，在市场上占有很大的份额，同时它也经历了从iOS4的拟物化到iOS6的扁平化变革历程；但是为什么我们在开发苹果app需要参考其设计规范呢？其一：遵守“用户习惯”，减少认知成本：习惯是一个很可怕的东西，能影响用户的选择和体验（），当用户在使用苹果手机时，潜移默化形成了苹果手机的交互习惯和视觉认知，如果擅自改变操作和样式，则大大影响用户操作效率，这也是为什么要遵循苹果设计规范的原因；其二，设计规范，规范的是一种骨骼，之前看书看到一个很好的比喻：就像拿黑色的橡皮泥捏东西，不拘着捏什么，不是用沙子，不是用红色的橡皮泥，这就让捏出来的东西有一个基本的统一：这对于较大的互联网公司是很重要的；例如网易的产品给人统一的气质是：“匠心、打磨”（也就有了“阿里系产品”这样的名词）；有了设计规范，让产品更能体现企业文化。

上面说的是设计规范对企业宏观长远上的意义，让我们回到日常工作，设计规范又的意义又在于此：

1、让新人快速上手；新晋设计师，或项目交接，设计规范的作用可谓是很大，它能让设计师快速上手了解项目设计风格，提高作图效率。

2、提高开发效率；设计规范同样也需要给到开发人员，一份良好的设计规范定制了各种UI组件的大小，例如按钮，有且仅有三种大小，开发同学在制作时也不用检查尺寸；

3、保证庞大产品的每个页面都保持统一；大项目一般会有好几个设计师同时工作，如何保持设计风格的统一，设计规范就起了很大作用了。

4、设计规范也和产品一样，在不断迭代和更新，一旦有更好的设计组件，或者项目的设计风格大改，那么设计规范也会跟随时代和产品一样更替。

二、设计规范的组成

1.组件

这里说的设计规范组成，仅仅是我自己归纳的一些web上时常用到的组件，如果有纰漏请谅解。

1.font 文本（字体大小、行高）

2.color 颜色（主色、辅助色、中性色、警告颜色、信息颜色、提醒颜色、成功颜色）

3.button 按钮（主按钮、次按钮、危险按钮、菜单按钮、图标+文字按钮、）

4.tag 标签

5.tab 标签（可根据样式分类，比如：线型，块状，卡片型）

6.form 表单

7.table 表格（可根据可操作和样式分类，比如：多行内容，批量操作，拖拽）

8.steps 步骤条（可根据样式分类，比如：基础（简单）步骤，复杂步骤，纵向步骤）

9.modal 弹窗（又叫对话框），一般会设计三种样式：大、中、小；除此之外还有输入型对话框

10.toast 提示：成功提示，错误提示，警告提示，消息类提示（可根据提示的复杂程度分为：基础（简单）提示，连接提示，复杂提示;）

11.pager 分页器（可根据复杂程度分为基础（简单），完整，迷你）

12.progress 加载进度（可根据加载的性质和时间分为：网页加载、全屏加载、容器加载）

13.breadcrumb 面包屑导航

14.datepicker 日期选择器 这个较为复杂，本文暂不讨论

15.timepicker 时间选择器 这个较为复杂，本文不讨论

16.input 输入框

17.tree 树形结构

18.search 搜索框 

19.select 下拉选择 

20. check box 单选框

...

注：以上这些名词，在给开发同学切图时最好以英文命名，另外也请大家掌握这些词语的英文解释哦！

2.交互

一般来说，一个组件都有三种状态：正常 normal；鼠标悬停 hover；点击 click （有时也叫press）；不可点击（disable），输入的组件还多了一个输入状态inputing；

说了这么多，总结一下：设计规范的目的其实就是为了“统一”，统一风格，统一组件，统一交互，即使是抽出某个及其“偏僻”的页面，都能让人知道这是什么产品。新人设计师最好自己动手做一套设计规范，能检查出很多问题。设计规范就像用设计的语言总结项目一样，在做设计规范时，你会深入思考每个组件的设计是否得体，检查每个组件是否做到统一，迭代说明也可以一起写在规范中以供其他项目组的人员进行参考。