设计语言

最近大半年，随着字节跳动、腾讯相继开源了自己的设计语言，又让“Design Language”这个词在业界火了一把。

有的厂商也用"Design System"这个词，都是一个意思，我个人认为"Language"比"System"更好。

关于设计语言的鼻祖，应该就是 Apple 的 Human Interface Guidelines。我查了一下资料发现，早在 1987 年，Apple 发布 "Macintosh II" 型号个人电脑的时候，Human Interface Guidelines 就诞生了。

现在的业界老二是 Google 的 Material Design ， 2014 年才发布，纯纯的后生。

为什么需要设计语言？

很多开发团队会遇到这样的情况，一个按钮很多尺寸，颜色，大小，阴影，每个都要定制，不胜其烦。作为开发人员来说，就很希望设计人员有自己的一套规范，规定好按钮在不同状态下的特性，免得总是做冗余操作。但有时候我们已经有了规范，却遇到各种业务方要求个性化，要不一样，导致整个 APP 设计变的很混乱，这是我们工作中经常遇见的。

我们从内外两个方面来阐述为什么需要设计语言：

对内

很多 APP 因为缺少基础原则，导致 APP 界面每个页面都不一样，风格层次不齐，缺乏统一性，所以对内，设计语言是为了解决统一性和效率为前提下，避免开发工程师重复开发一些组件。

对外

统一的品牌符号，品牌特征，有助于加深产品在用户心中的印象，统一的颜色和交互形式能帮助用户加深对产品的熟悉感和信任感，一个好的设计语言本身可以在体验上为产品加分，也能够更好创造一致性的体验。

设计语言解决了什么问题？

一致性

我说设计语言是为了解决“一致性”问题，应该没人会反对吧。UI 的一致性似乎就是大多数设计师所要追求的品质之一，也是为什么我们需要花大量时间去创建品牌方案、风格指南、组件库的主要原因之一。

那你有没有想过为什么“一致性”如此重要呢？苹果在 1987 年发布第一版《Human Interface Guidelines》的开头就给了我们答案：

“The purpose of visual consistency is to construct a believable environment for users… The transfer of skills is one of the most important benefits of a consistent interface, especially for beginning users.” pg. 10

“…consistency makes it easier for a user to learn new applications; it also makes it less likely that a user who follows habits learned from one application will make a disastrous mistake when using a different one.” pg. xi

效率

对于一些经常用到的组件，颜色，分割线，按钮，图标，字体，tab，表单等组件，如果提前设计统一好，能大大减少重复性设计，能让设计师更加专注在设计品质上加强，也可提升研发效率，对于基础的颜色，字体，间距可以提前开发好，减少重复性开发。

比如各大厂商的组件库，对开发者来说就节省很多人力和时间。

设计语言包含什么内容？

我们主要以 Apple 的 “Human Interface Guidelines”为范本来分析，因为它是最规范、最全面的。

一般来说设计语言包括以下几个方面：

• 设计价值观
• 设计原则
• 样式指南

设计价值观

设计价值观为设计者提供评价设计好坏的内在标准，启示并激发了设计原则和设计模式，进而为具体设计问题提供向导和一般解决方案。

我们先看看最新的 Apple iOS 的设计主题(Design Themes)：

• 清晰（Clarity）

  纵观整个 iOS 系统，清晰意味着，每种尺寸下的文本都应该是易读的，所有图标都应该是精确易懂的，每一个装饰都应该是精心恰当的，而且应该本着功能驱动设计的原则。利用留白，颜色，字体，图像以及其它界面元素来共同巧妙的突出重点内容且表达其不同的可交互性。

• 遵从（Deference）

  干净美观的界面和清晰流畅的动态效果有助于用户去理解界面内容并与之进行交互，从而避免给用户带来干扰。而如果当前的内容占据了整个屏幕时，可以利用半透明以及模糊处理等方式来暗示用户其更多内容的存在。尽可能少的使用边框，渐变以及阴影可以让界面更轻，从而突出更多的内容。

• 深度（Depth）

  鲜明的视觉层级以及生动的动态效果可以对界面有更深层次的表达，赋予了界面活力也更有助于用户去理解。易于发现且易于触发的界面元素能够提升用户的体验愉悦感，而用户在成功触发相应功能或获得更多内容的同时也掌握了当前所在位置的由始至终（可以理解为 PC 端的面包屑）。因此当用户在浏览内容的同时，流畅的过渡其实便体现出了一种纵深感。

Apple 对每个平台都有自己的设计主题，会结合平台独有的特性做出改变：

• macOS：Flexible，Expansive，Capable，Focused。
• tvOS：Connected，Clear，Immersive。

再来看看其他大厂的设计价值观：

Ant Design 阿里巴巴的 Ant Design 应该算是国内最早的设计语言了吧，它的设计价值观包括：自然，确定性，意义感，生长性。

Arco Design

字节跳动的 Arco Design 基于「清晰」、「一致」、「韵律」和「开放」的设计价值观，试图建立务实而浪漫的工作方式。

TDesign 腾讯的 TDesign 为了在开源体系的基础上打造具有自身品牌特色且好⽤的产品，秉承包容、多元、进化、连接的设计价值观。

设计原则

有一个叫"Design Principles"的网站，里面收集了 1448 个设计原则，195 个案例。这个网站的首页有个问题：What are Design Principles?

它的答案是：

Design Principles are a set of considerations that form the basis of any good product.

什么是设计原则？每个人都有自己的理解，但大家的目标都是一致的，那就是为了最大化产品的影响力及达到以上设计价值观的目标。

有了设计原则，还可以帮助团队进行决策，一些简单的原则性或建设性的问题将引导你的团队做出适当的决定。

下面看具体的案例。

Apple 我们依然是先看 Apple 的设计原则，完全照搬过来，一句话都不想删掉，因为写的太好了：

• 美学完整性（Aesthetic Integrity）

  美学完整性代表了一款应用的视觉表现和交互行为与其功能整合的优良程度。例如，如果一款应用的目的是帮助用户去完成一项非常重要的任务，那么我们就应该使用不易察觉且不会太引人注目的图形，或使用一些标准化的控件以及可预知的交互行为来保持用户的专注性。反而言之，对于一款沉浸式体验应用（如游戏），我们就需要利用更加吸引人的视觉表现，去鼓励用户深入探索的同时为其带来无穷的乐趣和刺激。

• 一致性（Consistency）

  一致性代表了一款应用需要贯彻相同标准和规范的原则。使用系统提供的界面元素，风格统一的图标，标准的字体样式以及一致的措辞。同时应用所包含的特征和交互行为应该是符合用户心理预期的。

• 直接操作性（Direct Manipulation）

  直接对屏幕上的对象（而非通过一堆控件）进行交互有助于用户理解从而提升用户的参与度。这里的直接操作指的是包括旋转屏幕或手势控制等操作，通过此类交互用户的交互行为能够得到及时可视的反馈。

• 反馈性（Feedback）

  反馈可以认证交互行为，呈现结果，通知用户。iOS 系统自带的应该对用户的每个行为都提供了明确的反馈。如可交互的元素被点击时的临时高亮，进度指示器（进度条，缓冲条等）显示任务需要进展的时间及当前的进度，声音和动态效果则更是加强了对行为结果的提示。

• 隐喻性（Metaphors）

  当一款应用的虚拟对象和交互行为能够与用户所熟悉的体验相似时（无论这种体验是来源于现实生活亦或是数字世界），用户就更够更快的学会使用这款应用。隐喻能够在 iOS 中起到作用的原因是用户可以与屏幕进行物理上的交互。如用户可以通过将视图引出屏幕来显示下方的内容，通过拖拽（drag），滑动（swipe）对象，拨动（toggle）开关，移动（move）滑块，滚动（scroll）选择器，甚至通过轻扫（flick）来翻阅书籍和杂志。

• 用户控制性（User Control）

  在 iOS 内部，应该是用户（而非应用）在控制。应用可以对一系列的用户行为提供建议，或对可能造成的严重后果的行为发出警告，但绝不应该替用户做决定。而好的应用会在用户主导和避免不想要的结果中找到平衡。为了让用户感觉到是他们在控制应用，应该使用用户熟悉且可预知的交互元素，让用户二次确定其有破坏性的行为，并且允许即使在运行中的操作也能够被轻易取消。

Ant Design

在企业级业务中使用设计模式，可以显着增加研发团队的确定性，节省不必要的设计，保持系统一致性，让设计师专注于创意最需要的地方。

设计模式遵循 Ant Design 设计价值观，并为企业产品中反复出现的设计问题提供通用解决方案。设计者可以直接使用设计模式来完成界面设计，也可以以设计模式为出发点，衍生出更加针对业务的解决方案，以满足个性化的设计需求。

Ant Design 的设计原则包含很多项：

• 亲密性：如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
• 对齐：在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息
• 对比：增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息
• 重复：相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性
• 直截了当
• 足不出户：能在这个页面解决的问题，就不要去其它页面解决
• 简化交互
• 提供邀请：邀请就是引导用户进入下一个交互层次的提醒和暗示
• 巧用过渡：在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。
• 即时反应

Arco Design

务实的浪漫主义是对设计语言的形容,它也代表着 ArcoDesign 试图建立的工作模式。

浪漫与务实并非矛盾对立, 它们相辅相成，引导设计方向。通过对务实与浪漫的定义得出设计语言的价值观, 这贯穿着整个设计系统。

清晰与一致的价值观意味着务实的方向, 清晰的效率提升是务实的基础, 品牌的一致性是务实的目的。 韵律与开放的价值观意味着浪漫的方向, 推敲设计的韵律是 Bytedancer 的浪漫, 包容开放的体系才能浪漫的解决问题。

设计原则相当于整个语言体系中的修辞手法, 在实际的词语组成中给我们提供模式化的思考结构。它让整个语言体系更丰满。

Arco Design 设计原则包括：

• 及时反馈

  系统应该让用户知道目前的状态, 并及时给予相对应的反馈。

• 贴近现实

  系统应该用用户的语言，用词，短语和用户熟悉的概念，而不是系统术语。遵循现实世界的惯例，让信息符合自然思考逻辑。

• 系统一致性

  同一用语、功能、操作保持一致。

• 防止错误发生

  比出现错误信息提示更好的是更用心的设计防止这类问题发生。在用户选择动作发生之前，就要防止用户容易混淆或者错误的选择。

• 遵从习惯

  尽量减少用户对操作目标的记忆负荷，动作和选项都应该是可见的。比如填完表单，下一步应该生成表单，而不是下一步就是完成。

• 突出重点

  用户的浏览动作不是读，不是看，而是扫。设计中应该突出重点，弱化和剔除无关信息。重要对话中不应该包含无关紧要的信息。

• 错误帮助

  错误信息应该用语言表达而不是比如 404 的代码。需要准确地反应问题所在并提出建设性的解决方案, 帮助用户从错误中恢复将损失降到最低, 提供详尽的说明文字和指导方向。

• 人性化帮助

  如果系统不需要使用帮助文档是最好的，但是有必要提供帮助和文档。帮助性提示最好的方式是：1、无需提示；2、一次性提示；3、常驻提示；4；帮助文档

Facebook

在 Facebook(虽然改名叫 Meta 了，但习惯了) 的设计原则语言里面，也首先强调了它们的设计价值观：

• 通用(Universal)
• 人性(Human)
• 干净(Clean)
• 统一(Consistent)
• 有用(Useful)
• 快速(Fast)
• 透明(Transparent)

在 Facebook 所有设计中，都围绕这几个点作为设计指导准则。

样式指南

从形色质构字全方面深入页面细节，构建全局样式规范。

下面列出一些需要注意的模块：

• 色彩：主题色、中性色、功能色、遮罩色，构建自己的主题色板
• 布局：上下布局、左右布局、Grid 布局、响应式
• 字体：主字体、字号、行高、字重
• 阴影：高度、光源、阴影值
• 图标：线条、辅助线、栅格、圆角、弧线
• 动画：功能性、趣味性、流畅性
• 文案：国际化日期和时间、标点符号
• 用语：词汇统一、语法正确、文案精炼、通俗易懂、语言友好
• 暗黑模式：色彩、内容优先、阅读舒适度、信息层级

总结

设计语言的建立是一个系统的、很复杂的过程，前期一般需要比较高阶的设计来完成。设计语言完成后，对于基础的颜色，色彩，字体不要随意去改动，成本会比较高，至少需要保证这些字体颜色，一两年不要大的变化。

设计语言完善之后带来的收益也是很可观的，不仅仅是设计、产品人员有的放矢，对效率提升也是显而易见的。特别是对 Web、App 的研发人员来说，有了设计语言必然需要自己的组件库，而组件库对研发效率来说就是一把宝剑。

附录：国内外各大厂商的设计语言

• 国内厂商

名称	厂商	开源组件库	支持平台
Arco Design	字节跳动	React、Vue	PC
Semi Design	字节跳动抖音团队	React	PC
TDesign	腾讯	React、Vue	PC、Mobile、小程序、Flutter
Q 语言	腾讯 QQ 团队
Ant Design	阿里巴巴	React、Vue	PC、Mobile
Element Plus	阿里巴巴饿了么	Vue	PC
ZarmDesign	众安科技	React、Vue	Mobile、React Native
Taro	京东	React、Vue	Mobile、小程序、React Native
NutUI	京东	Vue	Mobile、小程序
NutUI-JDL	京东物流	Vue	Mobile、小程序
Ke.Design	链家
Zan Design System	有赞	React、Vue	Mobile、小程序

• 国外厂商

名称	厂商	开源组件库	组件库支持平台
iOS HIG (中文版翻译)	Apple
Atlassian Design System	Atlassian
IBM Design System	IBM
Material Design	Google
MongoDB	MongoDB	React	PC
Fluent UI	Microsoft	React/Web/Swift/Java	All
Primer	Github	React	PC
Pajamas	Gitlab
Spectrum	Adobe
Meta	Meta (Facebook)
Polaris	shopify	React	PC
Vercel	Vercel
Patternfly	Redhat	React	PC
orbit	Kiwi.com	React	PC
Elastic UI	Elastic	React	PC
Airbnb Design	airbnb
Audi	奥迪	React	PC
Base web	Uber	React	PC
Finastra		React	PC，Mobile
Bolt	Pega	React	PC，Mobile