掌握基本的设计规范才能让设计师拥有更多话语权！

硬核设计师･2021年 第 6 篇原创文字

相信很多小伙伴和我一样，需要从0到1的去做一个项目，如果是小公司没有人帮忙的话，

需要自己一步一步建立起设计规范，碰巧最近项目快结束，小核儿分享自己的一些心得，希

望小伙伴们少走一些弯路，收获一些知识。

（详细的规范很多，具体内容需要根据特定场景项目而定，仅整理部分常见内容

进行参考，文末给大家一些大厂组件规范等供大家深入学习，建议小伙伴着重学

习10如何落地，感谢大家的支持～）

01配色

1. 品牌色：根据用户画像使用场景等定好品牌色，确保各场景下营销推广品牌效应，确定好品牌色后，定好其他色阶辅色延展，6：3：1原则，饱和度不低于70避免识别度不高。

2. 文本色：根据所传达信息重要性不同，可将文本色变为中性色、品牌色、警示色等，或可采用调节透明度方式区分。

3. 界面色：背景色为中性色规定数值，例：#F5F5F5，文本背景色#F0F0F0，一般可添加主色增添画面活泼性。

4. 线框色：分割线的颜色也为倍数区分来强调信息层级，例：#333333-20%

5. 状态色：状态色根据常态、点击态、不可点击等，一般用主色叠加白/黑倍数的层来显示，例：常态层加#FFFFFF-20%

6. 透明度：一些图片的黑色蒙层、投影、运营固定插画组件、卡片等。

02字体

1. 字体选择：字体控制在3种之内，注意中文、英文、数字的不同。

2. 字号/字重：主副标题层级的表达，字体粗细大小。

3. 行号/字距：多段落的文字体现信息的层级性，注意呼吸感，控制在1.2-1.5倍之间。

03图标

1. 大小粗细圆角：保持一致性。

2. 风格：根据使用场景，区分线性面性等风格使用注意挖空比例一致，注意常态选中态点击态。

3. 重心：注意视觉重心，可用图标盒子进行调整。

4.正确性：注意图标在使用场景下的识别性，做好可用性测试。

04图片、留白

1. 图片比例：按照比例规范、使用场景以及用户体验更改图片比例例：16:9 4:3等。

2. 图片使用规范：图片质量高不模糊，背景干净，主体物突出

3. 留白：固定图片与文字、图片与图片之间的留白间距，确保文本图片的可阅读性。

05信息层级、布局

1. 元素、模块间距：所有设计元素的间距，包含文字、分割线、按钮、组件等，模块间距也需要检查，可能会出现偏差。

2. 信息层级：页面功能表达明确，布局符合操作斐波那契比例，等分原则相同功能模块接近原则。

3. 投影：注意投影数值色值，是否需要切图，投影范围，大小。

4. 列表式布局：直观，节省空间，展示内容丰富，易视觉疲劳需加入图文混合。

5. 卡片式布局：图文混排，把文字图片图标放在一个容器内，合理布局，视觉上一致，注意水槽宽度。

6. 瀑布流布局：沉浸式浏览内容，注意图片比例，页面承载量。

06状态、标签

1. 空状态：显示对应的页面空状态的图标，增加相应的引导按钮。

2. 加载状态：根据不同场景会有差异，保证效果的统一性。

3. 界面色：背景色为中性色规定数值，例：#F5F5F5，文本背景色#F0F0F0，一般可添加主色增添画面活泼性。

4.标签：凸显卖点，标签文字，标签内水槽宽高比，标签颜色，形状。

07控件

1. 按钮：按钮有 5 个状态：正常、点击、悬停、加载、禁用。按钮填充色、边框色、圆角值、按钮宽度和高度，按钮文本大小、颜色值。

2. 输入框：用于单行信息录入文字上下居中显示，支持键盘录入和剪切板输入文本，对特定格式的文本进行处理：密码隐藏显示、身份证、卡号分段显示，标注宽高。

3. 选择：选择可分为单选与多选，并且也有五种不同状态：未选择、已选中、未选悬停、已选失效、未选失效项。规范中需展示出所有效果状态。

4. 进度条：用于向用户展示步骤的步数以及当前所处的进程。

5. 弹窗：核对弹窗的样式、颜色、文字、按钮、内容等保证样式一致。

6. 列表：列表的标题、内容、分割线、背景等。

08组件

1. 常见组件：

表格、对话框、提示条、气泡提示、日期选择器、多级选择器、标签输入框、组合框、上传等，跟开发对接，不必要的内容可协调使用已有组件高效使用。

2. 统一性：

提升产品的视觉交互统一性，提升开发效率，避免设计师自由发挥，减少用户操作的迷惑感，提升产品的体验。

3. 高效性：

节约时间，提升工作效率，减少制作组件控件的时间，可将更多时间放在流程体验和设计推动上。在做更新迭代时可一键修改全部，大大提升效率。

4. 延展性：

在以后更新中可以迭代，团队即使有成员离开或者加入，通过设计规范和组件库可以快速的接手和进行正常工作。

09适配、标注、切图

1. 适配：根据机型进行适配需找到固定元素定尺寸，自适应需要通过文字字数图片比例等调整。

2. 标注：蓝湖、zeplin、Pxcooker可帮助设计师进行标注，但一些复杂场景需要手动标注内容，如运营页面、字符、模块间距、水槽宽度、蒙层不透明度等。

3. 切图：切图之前应跟开发确定好输出的格式和尺寸，确定应该用 SVG，一倍图或是两倍图，SVG体量小渲染质量好，单色使时还能替换颜色，PNG则通常用在实景图，一倍图和二倍图则根据实际需要进行输出。

10如何落地

1. 搜集整理：搜集 首先找好用户群体、用户目标和设计目标，齐全的使用场景，简单清晰的语言定义，清晰的分门别类，让成员方便查找，当你不清楚该如何定义规范时，去参考ios、material design的内容，再根据实际情况进行删减，比如产品中频繁出现对话框、toast等，我们则需要进行规范进行统一化，可提前做一个脑图风暴，这样内容就比较清晰了。

整理 当你确定好规范都需要整理些什么的时候，下面就需要整理出规范文档了。

怎么写？ 首先我们需要对内容进行一个优先级的排序，选出在应用中频繁出现的内容，以及作出统一对应用影响的比较，把可复用性高的，日后变化较少的内容整理成组件。之后对规范进行统一，整理出同类特点内容，最后将使用场景、交互说明、图示、组件例子、间距数值、文字说明等进行书写，方便迭代时组件进行统一化修改。

2. 组内讨论：整理好文档之后，我们需要跟组内成员、产品进行讨论，宣讲设计规范的概念进行说明。这一步的目的是为了检验规范的合理性，看看其他人的角度进行补充修改，以及需要看文档的易懂性，落地可行性，在校验完毕之后才可开始执行。

3. 推动执行：做规范时需安排好成员的分工表，包含时间节点，内容，人员，完成说明等。将讨论过后的规范文档发布在蓝湖，方便组内成员进行查看、修改、同步。

4. 复盘审验：不要以为做好设计规范就结束了，后续产品版本迭代或出现什么问题需要及时更新设计规范，并非为了规范而规范，而是需要高效协作而制定。

总结通过设计规范来推动项目执行，可以更加高效统一的去帮助设计落地和还原，需要各部门之间的配合完成，过程中考验设计师对设计的专业基础能力，也考验设计师的协作沟通能力以及对项目完成的把控能力，掌握基本的设计规范才能让设计师拥有更多话语权！

本期小核儿给各位看官准备了一些大厂的设计规范和组件，助你更快深入学习设计规范的使用～

公众号「硬核设计师」后台回复「设计规范」领取～

记得给原创打call！赞～☟☟

Powered by Froala Editor