如何打造一个设计规范

- 这是 交互设计 的第 48 篇文章 -

- 读完本文，大概需要您 8 分钟的时间 -

本文作者：Lisa Kas，原文标题：《Creating a UX design style guide for your team》，由黄方闻翻译，转载请注明出处。

原文地址https://uxplanet.org/creating-a-ux-design-style-guide-for-your-team-e756210865a4

设计规范是一份列出了团队所选择和遵循的约定的文档，其目的是让设计风格以及与开发团队保持一致。例如，通过设计规范，我们可以快速的设计出原型而无需经过复杂的探讨。

下面是我指定的一份设计规范的示例：

1、基础单元

基础单元是一个8*8像素的矩形，当基础单元缩放2x时，可以用来创建间距。

2、网格

网格通过对基础单元乘以或处以2来创建，对于弹性网格采用百分比，而对于固定网格则按基础单元比例进行缩放。一般来说，建议使用2x，但3x也是可行的。

3、间距

间距是基于内容决定的。对于组内的元素应使用较小的间距（如标签和输入字段），而对于页面上的元素之间应使用更大一些的间距（如两组之间、标题与标题之间、内容与内容之间等）。

4、断点

定义断点可以让设计人员和开发人员在不同尺寸的屏幕上保持设计的一致性。随着移动设备的普及和多样化，作为设计师，我们需要兼容各种屏幕尺寸，这是每位互联网设计师当前所面临的挑战（自适应与响应式设计）。

5、配色方案

通常，配色方案分成以下几组：

    · 主体色/次级色

    · 阴影

    · 状态（成功、警告等）

需要注意的是：

    · 慎重选择颜色

    · 对照WCAG验证颜色确保具有对比度

    · 不要将颜色当成状态的唯一指示器

6、字体

字体涉及的三个主要内容是：字体样式、外观和结构。字体起到的作用不仅仅只是视觉效果，通过字体可以在网站上创建视觉层次结构，还可以让网站上的图片有更好的视觉平衡。你需要确保字体的清晰易读。

我强烈建议你阅读《重构UI（Refactoring UI）》中的“字体”部分。

https://refactoringui.com/

7、字体大小

选择字体大小时你需要考虑三件事：字体样式大小、行距和用户年龄。因为年纪越大，可能视力也会变差，因此对于很多用户来说，过小的字体会难以阅读。

8、文本值

注意字母的大小写，除非有明确的视觉规范定义，否则：

    · 仅首字母大写，其余小写。

    · 常见用法：标题、表头、按钮、表单字段标签

避免全部大写字母，某些标题除外。

示例：

    · EN：应使用“Date of claim”，而不是“Date of Claim”

    · FR：应使用“Date du sinistre”，而不是“Date du Sinistre”

指南：

    · 日语样式指南（http://download.microsoft.com/download/b/3/4/b34f7185-afca-4846-8fbf-672a1b9afce2/jpn-jpn-styleguide.pdf）

    · 美国/国际Wiki样式指南（https://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style）

9、数值

· 优先使用当前地区标准规范

· 如有歧义，请使用以下样式指南：

· 欧盟标准（http://publications.europa.eu/code/en/en-4100500en.htm）

· 美国/国际标准（https://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style/Dates_and_numbers#Numbers）

· 日期格式（按国家/地区）（https://en.wikipedia.org/wiki/Date_format_by_country#Listing）

10、按钮规范

· 按钮文本应清晰明确

· 按钮应具有默认、悬停、激活、焦点、按下和禁用状态

· 确保一个屏幕或界面上只有一个主要的按钮，其余是次要按钮

· 在我们公司，我们对于“确定”和“取消”有明确的顺序规定，如同主按钮和次按钮一样

· 多个位于底部的模态按钮使用右对齐

· 在适当时候确保内容与按钮的对齐

11、按钮和行为规范

· 避免一次执行多个主要操作行为，可以有多个视觉重点偏弱的次要行为。

· 用户应始终可以通过UI样式的变化或其他视觉提示来获取其行为反馈。

12、按钮规范和建议

· 按钮上的标签应清晰明确，并能告知用户按下按钮后会发生什么。如应使用“应用”、“保存”、“发送”等，而不是“确定”。

· 按钮应具备多个状态，例如禁用、悬停和按下等。

13、表单规范

· 在输入框顶部的标签；对于内联标签和输入字段，将标签与输入字段右对齐

· 标签应始终存在（而不是放在输入框中）

· 根据内容长短相应地调整输入框的宽度/高度，以提供更好的视觉提示（例如，较短的输入框用于邮政编码，较高的输入框用于段落文本）

· 输入框应具有激活、禁用和错误等状态提示

· 错误的提示文案应与输入框保持一致的距离

· 在可能的情况下——我们一直希望如此——在输入框中添加提示来增强可用性（例如分隔电话号码，并自动添加分割符）。

14、表格规范

· 文本左对齐

· 数字右对齐

· 表头与内容对齐

· 除了按钮和图标外，没有中心对齐

15、雅各布定律（Jakob’s law）

遵守定律的规范和模式，用户会将大部分时间花在其他网站上，这意味着他们希望你的网站跟竞品的有相似的操作方法和使用模式。

16、希克定律（Hick’s law）

决策所需的时间随着选择的数量和复杂性的增加而增加。

17、米勒定律（Miller’s law）

一般人最多只能同时处理7（正负2）个项目。所以应该避免：

1、给用户过多选择

2、需要让用户思考过多

3、缺乏清晰度

18、相似定律（Law of similarity）

人眼往往将设计中的相似元素视为完整的图片、形状或组，即使这些元素是分开的。

总结

制定设计规范将帮助你和你的团队在界面中保持一致和结构化。

我的建议是，遵循的原则不要太复杂。选择最重要的一个，并让你的团队遵循他们。

通过我的经验，该规范帮我在设计和实施阶段中赢得了时间。为什么？因为我们在基本的UX / UI设计选择中犯了更少的错误，所以它帮助开发人员在实现过程中变得更加自主。

http://hfw.design

你点的每个，我都认真当成了喜欢