相信很多人对设计规范这个词已经到听倦了的地步，虽然大家都知道它很重要，但是却因为各种各样的原因没有着手整理自己的设计规范。比如我之前就一直嫌整理起来麻烦，迟迟没有开始，后来整理好用起来了才发现，真香！

前两年看过一篇文章，将设计师要经历的阶段分成4个，分别是：组件化、数据化、用户体验和商业平衡。第一个阶段的组件化指的便是设计规范的一部分，建议每个设计师都可以建立自己的组件库（视觉设计师可以建立sketch组件库，交互设计师可以建立axure元件库），整理的过程也是自己设计专业能力的提升过程。

设计规范分为电脑端和移动端。电脑端以Web为主，PC和Mac的应用程序设计师相对接触的不多；移动端以手机的iOS、Android系统为主，还有Pad、车载系统、智能手表或其他界面相对也比较少。另外Web还涉及一些特殊的产品，比如B端产品、SaaS、运营管理后台等。

WHY WHO WHEN

首先老生常谈的来一个灵魂三连问：为什么要做设计规范？设计规范做给谁用？设计规范什么时候做？

1、为什么要做设计规范？

设计统一性、提升工作效率、打磨细节

2、设计规范做给谁用？

设计规范按目标用户主要可分为三类：团队的设计师和开发人员、第三方的工作人员、公开给所有人。大部分的使用场景为第一种情况，也有部分情况如外包公司需要把规范给到第三方，很多大厂也会将规范公开给所有人查看。

3、设计规范什么时候做？

建议在主要页面都确认下来后开始着手整理设计规范，并在设计剩余页面的过程中不断地完善。过早的设计规范可能导致利用率不高、修改频繁等问题。

接下来进入正题，设计规范分为四个部分：设计准则、设计风格、框架布局和组件。

一、设计准则 Design Principle

1、掌控感

对于一个产品，掌控任务的是用户，而不是系统。产品对用户的行为提供建议，或对可能造成严重后果的行为发出警告，但绝不应该替用户做决定。为了让用户感觉到是他们在控制，可通过提示等方式及时地给用户反馈，通过弹框等方式让用户二次确定其有破坏性的行为，用户应当可以随时撤销、回退和终止当前操作。

2、轻量感

轻量感可以让用户在处理严肃复杂数据任务时仍有适当的轻松愉悦感受。如去除繁杂的样式、减少大面积的深色色块、使用更轻盈的转场效果等。 让用户在较长时间的使用过程中更易聚焦在数据管理本身而不是使用环境上，适当降低疲劳感。

3、专注感

帮助用户适当减少处理任务时的干扰，提供更加沉浸式的体验，营造专注聚焦的感受。流程逻辑清晰、较少层级，或将复杂的内容拆分为多个步骤，都能帮助用户清除不必要的干扰。有助于用户更加聚焦于待处理的任务。

4、一致性

使用遵从用户习惯的设计语言和概念；所有的元素和结构保持一致，以便用户在不同的产品中切换也不会迷失。

5、可靠性

通过文案、操作、流程等方面的一致性，和在颜色等的视觉表现上带给用户稳定、专业和可靠的感受。

6、指引性

人性化的指引能帮助用户更加明确和深入地处理任务。

二、设计风格 Design Style

1、颜色 Color

（1）主色 Main Color

（2）辅助色 Assistant Color（不要超过三种颜色）

（3）状态色 Status Color（Success、Warning、Danger）

（4）数据色 Data Color（用于数据可视化）

（5）中性色 Neutral Color（文字颜色 Text Color、线条颜色 Line Color、背景颜色 Background Color）

（6）渐变色 Gradient

2、文字 Typography

（1）字体 Typeface（中文、英文、数字）

（2）字号-行高 font-size / line-height

3、图标 Icon

（1）风格：线性、面性、线面、拟物插画风格等

（2）类型：Nav Bar、Tab Bar、金刚区、通用类等

（3）尺寸：尺寸不宜过多，可以约定好主要图标尺寸，如：XS、S、M、L、XL等

三、框架布局 Layout

（本文以Web端为例，下同）

1、整体布局

整体布局一般有通栏、两栏、三栏的布局方式，内容展示一般有全屏和中间部分区域展示两种，还涉及到响应式布局。

2、栅格

一般采用24栅格体系

3、间距

和图标一样，可以约定好间距尺寸，如：XS、S、M、L、XL等

四、组件 Controls

1、数据录入

数据录入是Web端出现频率很高的部分，常见于各种表单录入、登录注册、条件查询搜索等。

2、数据展示

常见的数据展示类型：

3、按钮 Button

按钮常见的三种状态：默认、选中、禁用。除此之外，有时会有加载中的样式需求，Web端还涉及hover和clicked的样式。

4、消息与反馈 feedback

常见的消息反馈方式：

5、其他

还有一些不属于上述分类的常见组件：

加载 Loading

进度条 Progress

分页 Pagination

步骤条 Steps

标签页 Tabs

面包屑 Breadcrumb

评分 Rate

角标 Badge

小结

设计规范和个人组件库，虽然整理起来确实有点费时且杂碎，但整理过程对设计师来讲是一个很好地思考和提升。

最后推荐一下开发也在用的Web端设计框架：

阿里巴巴 ant design：https://ant.design/index-cn 

饿了么 Element UI：https://element.eleme.cn/#/zh-CN 

下一期继续完善移动端的设计规范

参考资料：

《在整理设计规范中变强》

最后，欢迎关注我的微信公众号“兔宅菌”

Powered by Froala Editor