前端开发者需要了解的「设计体系」

引言

如果你是一个React技术栈，PC中后台的前端开发工程师，一定知道 Ant Design，并且熟练使用Antd的组件进行前端开发。但是你阅读过 Ant Design 的设计体系，并且知道其是如何帮助产品和设计师进行产品设计工作的吗？

假如碰到以下 2 个问题：

你是否经常和设计师、产品就页面交互和展示不合理进行讨论，但是无法有效达成一致？
你是否可以在没有设计师的情况下，实现一个交互体验、UI 界面都还"不错"的后台页面吗？

从上述2个问题的思考延展出一个话题：作为一名前端开发者，需要了解下什么是设计体系

以下知识点都出自于《设计体系：数字产品设计的系统化方法》

设计体系是什么

设计体系为了实现数字产品的目的而组织起来的一套相互关联的模式和共享实践。使用对象是产品经理和设计师。

产品目的决定了要采用的设计模式。
模式指的是界面中那些重复的要素：用户流程、交互方式、按钮、文本框、图标、配色、排版、文案，等等。
共享实践则是我们如何创建、捕获、共享和使用这些模式，尤其是在团队协作时做这些事情的方法。PS：第三点内容不在这期分享范围内，后续有机会，可以结合古茗前端和UE的协同模式和产出结果再分享。

1.1 设计模式

设计模式是一种用于解决特定设计问题的可复现、可复用的方案。

在数字产品设计过程中，设计模式受三部分内容影响。

首先，产品所属的领域及其核心功能影响了功能性模式（functional pattern）
其次，产品的精神（或者品牌------取决于对品牌的定义）也形成了塑造产品调性的模式，也叫做感知性模式（perceptual pattern）
模式还会受平台的惯例影响，例如PC web，IOS, Android

产品与众不同的原因并不在于它所使用的模式的新颖性，而在于这些模式的运用方式，以及它们如何相互配合以实现特定的设计目的。

设计体系的一个主要目标就是"扩展创意方向"。需要将模式明确地阐述并且分享出来。才可以让团队持续可靠地遵循创意方向。

一套相互关联的模式构成了产品界面的设计语言。设计语言在被阐述时，需要确保它可操作、可重现，以一种系统性的方式进行阐述。

1.2 共享设计语言

在一个团队中工作，设计语言就需要在所有参与产品创建的人之间共享。如果不共享语言，团队成员就无法有效地进行共同创造------每个人都对他们想要实现的目标有着不同的心智模型。

不仅要对语言形成共识，还要对语言的用法形成共识，假如仅仅对按钮这个词的含义达成共识是不够的，还需要对不同背景、不同目的下使用按钮的原因和方法形成共识。

随着设计语言变得更加丰富、更加复杂，需要一种高效的方式来对其进行捕获和共享。

在如今的互联网领域，模式库已经成为良好设计体系实践的重要组成部分。

1.3 模式库及其局限性

模式库不仅包含收集、存储和共享设计模式的工具，还包含相应的使用原则和操作指南。

模式库的局限性

模式库只是有助于设计体系变得更加有效的一种工具，它不等价于设计体系。仅凭工具是无法对用户体验产生重大影响的。模式库是对其背后设计体系的反映。如果没有一套连贯的、集成了模式和实践的设计体系作为基础，这样的组件库的影响将十分有限。

只有将模式库作为构建坚实的设计语言的基础，它才会成为强大的设计工具和协作工具。

1.4 构建有效的设计体系

如何衡量设计体系的有效性？可以看它的不同部分一起发挥作用以帮助实现产品目的的程度。

只有当设计体系围绕产品目的，综合了设计过程中的成本效益及用户体验的效率和满意度时，它才是有效的。

在高效的设计体系中，不同的子体系为了同样的目的而相互连接，并协调一致：

设计方法在前端架构中得到反映；
设计模式遵循设计原则；
模式语言在设计、代码和模式库中得到一致的应用。
不符合设计体系的裂缝总是很容易被发现。割裂的设计体系导致了割裂的用户体验，以及充满矛盾的界面。

产品设计的工作流程更高效，用它们创造出的用户体验更有意义，也更连贯。

1.5 案例："十分钟食谱"网站

背景：有这样一群人，他们喜欢健康的食品，但又不想花太多的时间做饭。想象一下我们正在开发一个为这类人提供食谱的网站

1.5.1 产品目的和价值观

第一件事就是弄清楚用户是谁，他们的目标、需求和动机是什么。这个目的是产品的核心，它应该支撑设计和开发决策。

用一句话来表述这个网站的目的：让人们在十分钟内就能烹饪出美味又健康的膳食。

1.5.2 设计原则

为确保我们所做的所有事情都清晰地体现了产品目的，我们需要建立一些基本原则和价值观。最重要的是参与产品创建的人都认同这些价值观，并承诺实践它们。

例如，十分钟食谱网站团队的每个人都需要了解时间的价值。

1.5.3 行为和功能性模式

我们确定了希望用户实现或让用户有能力实现的主要行为，这会帮助用户实现他们的目标。设计的细节固然会随着网站的改版而变化，但上述关键行为将始终保持不变。这些行为足以体现网站的核心功能模块和交互方式

1、我们希望人们在十分钟之内就能做出好菜。这意味着我们的食谱只需要简单几步就能完成。这些步骤应该简短、清晰且重点突出。兴许我们还可以为每一步标注时间，确保总时长在十分钟以内。

2、我们希望人们的烹饪行为是自发的，仿佛随时都可以开始。他们可以利用现有的材料，而不必准备什么------他们不需要购买不常见的食材。在用户界面层面，这意味着需要使用带有清晰标注的食材缩略图。

1.5.4 审美和感知性模式

我们需要弄清楚，我们希望人们在使用我们的产品有什么感受。

从思考品牌入手。
我们可以将一些情绪和感觉写下来，并开始尝试一些视觉效果，直到品牌的感觉符合预期。
我们便可以开始定义核心视觉品牌元素，例如排版、配色、说话的语气语调以及任何表现品牌独特性的元素。如插图、图片样式、特定形状、独特交互等，这些都能体现我们服务的本质，并能以最佳方式呈现内容。

1、我们对健康的食品充满热情，所以希望整个网站都能体现这一点。或许网站要有一种有机、温暖、有益健康的感觉。我们也相信烹饪不需要进行大量的规划和准备，它应该是自发的、有趣的，可以在十分钟内进行试验和创新。

2、最终，我们有了温暖又朴实的配色、手绘的图标、可读性极强的排版、高质量的健康饮食照片，以及一些简单的界面元素和控件。这些风格样式便构成了我们的感知性模式。

设计原则

设计原则指的是包含团队如何理解好设计之精髓，以及如何体现这一精髓之建议的共享指南。 换句话说，就是团队或产品，对于什么是好的设计，有一致的标准。

2.1 有效设计原则的特性

2.1.1 设计原则是真实而贴切的

弄明白"设计原则"对团队和产品究竟意味着什么，才是对做设计决策有帮助的。

创新究竟需要什么？什么情况下设计会被认为是有用的？如何判定设计是否真的令人愉快？

好的设计原则所定义的特性能以不同方式解读，但需要将其放在特定的产品背景之下。

2.1.2 设计原则是实用的、可操作的

设计原则应该就如何帮产品解决设计问题提供实用的指导。只有将原则与应用原则的真实案例结合起来，才是最为实际的做法。

bad case：简化，让产品尽可能简单，简单到几乎感觉不到它的存在！我们应该努力消除平台上的摩擦，为用户创造一种可自由地获取内容的体验。如果我们的平台让人很容易理解，那么人们就会更多地使用它。
good case: 消除无用的部分。每一个设计元素，无论大小，都必须有一个目的，并遵循它所属元素的目的。如果你无法解释一个元素为什么要在那里，那么它便很可能不应该在那里。

2.1.3 设计原则是有观点的

设计体系应该有态度、有观点，能让每一个使用它的人都得到创意上的指导。

设计是由我们所做的选择所塑造的。即使需要考虑一些相互冲突的因素，好的设计原则，会承认价值观的冲突，也能帮助确定优先级和平衡点，并给出平衡它们的建议。

2.1.4 设计原则是能产生共鸣、容易让人记住的

团队成员都将它们作为日常工作的基础，用于制定设计决策。持续使用的原则才容易让人记住。

它们应当在日常对话中经常被提及，在演示文档和设计批评中经常出现，在一切能用到它们的地方显示出来。

2.2 定义原则

2.2.1 从目的开始

设计原则必须遵循产品的目的，传递产品的精神。

2.2.2 寻找共识

团队需要形成产品设计的原则共识。

2.2.3 面向正确的受众

首先为设计自身和同事而写，尤其是设计师、开发人员、内容编辑、营销专家、领域专家，也就是与产品的创建直接相关的人员。

设计原则的目标应该是就"什么样的设计对产品来说是好设计"这一问题达成粗略的共识，并提供如何实现共识内容的实操指南。

2.2.4 对原则进行测试和修订

随着产品不断演进，设计原则也会不断发展。有可能设计原则在一开始非常宽泛和抽象，但随着时间的推移逐渐变得清晰和具体。也有可能它们一开始是明确的且重点突出，但随着时间的推移逐渐变得空泛并失真。

为了持续改进设计原则，就需要不断地对其进行测试、评估和改进。只有在日常工作中使用它们，并有意识地这样做，设计原则才得以持续改进。

2.3 从原则到模式

以下问题影响着模式的选择与运用。

如何将高层次的概念，如设计原则和品牌价值，物化为具体的用户界面元素。
这些概念究竟是如何体现在我们所创造的模式之中的呢？

原则和模式始终不断地相互影响，相互完善。

设计模式由产品运作方式的核心理念所决定。
模式的选择与运用以及对模式的独特组合，都受产品的目的、精神和设计原则的影响。
可以将设计原则视为创建模式并以具有内在意义的方式组合它们的语法规则。
同样，随着品牌和功能性模式的发展和完善，它们反过来也影响了设计原则。

3、功能性模式

功能性模式是界面中有形的构件。它们的目的是让用户能够完成某种行为，或者激励用户完成某种行为。

3.1 功能性模式演变，行为不变

它们在很大程度上是由产品所属的领域决定的 。随着产品的发展，模式也在不断发展。它们的执行、内容、交互方式和显示效果可能会变，但它们所鼓励的核心行为保持相对稳定，因为这是植根于产品目的及其工作原理的。

牢记关键功能性模式的目的，有助于了解设计体系的运转方式，防止设计体系在发展过程中碎片化。

3.2 定义功能性模式

3.2.1 创建模式映射

为了确定客户的需求、目标和动机

可能做了客户体验映射、JTBD或其他一些类似的围绕客户旅程展开的实践。这些做法的产出物则成了早期设计探索和原型设计的基础。
专注于界面，有时就会陷入细节之中。我们花费大量时间设计令人印象深刻的页眉，却忘了它的作用，忘了它在用户轨迹的不同阶段是如何影响用户的。换句话说，我们没有将用户行为与鼓励或支持这些行为的确切的功能性模式关联起来。
每个部分的作用及其所鼓励的行为, 要放眼全局：了解系统的各个部分以及它们是如何相互协作的。

将功能性模式理解为具有相同目的的多个系列，而非单个页面。哪些行为是在用户轨迹的当前阶段需要去鼓励的？哪些模式可以支持这些行为？网站上还有哪些地方有这些模式，以及它们在那些地方是如何运转的？一个新的模式如何服务于整个设计体系？思考上述这些问题，是系统性地开展设计工作的一部分。

3.2.2 打造界面清单

Brad Frost提出的界面清单流程已经成为一种流行的界面模块化方法。

首先，可以把界面打印到纸上，或者将它们放入Keynote或PowerPoint。
然后，便可以将各种不同的组件剪下来，或者在Keynote或PowerPoint中通过剪切、粘贴的方式将不同的组件区分开来
最终，这些组件形成了不同的分类------导航、表单、标签页、按钮、列表等。

通过这一过程，能看出哪些模式是重复的，并发现需要留意的问题区域。当发现有几十个页眉或弹出菜单，便会开始思考如何构建规范。

界面清单不一定包含所有的内容（尽管所做的第一个清单应当是全面的）。它可以一次仅关注一组模式，如促销模块、页眉或者所有产品展示模块，也可以专门针对排版、配色或动画等制作界面清单。

为了保持最佳效果，应该定期维护界面清单。即便团队已经维护了一个模式库，新的模式也会出现，需要放入整个设计体系。如果每隔几个月就维护一次界面清单，每次做这项工作就只需要花几个小时而已。而且，每次这样做的时候，都会让团队更好地理解设计体系并改进它。

3.2.3 将功能性模式视为操作

要理解一个功能性模式的目的，需要关注它的作用是什么，而不是你认为它是什么。

要试着找到最能描述其行为的操作。用动词而非名词来描述模式，有助于扩展模式的潜在用例，并更准确地定义其用途。
当你试着描述它是什么的时候，就过于局限于其呈现和内容了，最终容易将模式的使用范围限制在特定的上下文中。
如果根据操作------从用户角度及你自身的角度------来定义模式，便可以发现它的目的。通过关注操作，可以将模式与行为联系起来，并兼容各种不同的用例

3.2.4 描绘模式的内容结构

要对功能性模式的工作方式达到共识，请描绘其结构：让功能性模块能够有效运行的核心内容。内容结构与模式的目的是密切相关的。

列出让模块能够有效运行的核心内容元素
试着确定元素的层次结构，并决定如何对它们进行分组。
对功能性模式的结构有了共识，形成产品功能性设计原型
设计师负责视觉上的探索，而开发人员则开始整理原型（或者两者都可以做原型，这取决于具体的工作方式）。设计师知道在模式的不同阶段，他们可以将视觉设计推进到什么程度。开发人员了解设计选择的原因，并且不会让意料之外的设计被扔到墙上。

3.2.5 按某个维度排列模式

可以试着将相似的模式按照某个维度排在一起, 进行模式库的设计和提炼。

在某个维度上排列模式有助于确保对它们的使用是恰当的，不会在整个系统中争夺注意力。

这样做还有助于防止不必要地重复创建模块。

3.2.6 将内容视为假设

从目的开始，而不是从内容开始。这样，我们便不会将内容视为已知的资源，而是视为一种假设（hypothesis）。这样做能检测出我们是否已经定义好了模块的目的，以及我们的设计是否符合这一目的。

如果内容总是不能匹配此功能性模式，通常是由以下三个原因中的一个或多个引起的。

我们没有正确地定义模式的目的。请试着重新去理解模式是用于支持哪些行为的。
我们设计模式的方式并不是最能反映其目的的方式。请为此模式尝试其他的设计。
我们试图将内容强行放入不合适它们的模式。请考虑修改内容，或尝试其他模式。

3.3 总结

产品目的决定了其他的一切：模式的结构、内容及呈现。

了解模式的目的（也即了解需要达成或激励的行为），可以帮助我们设计和构建更加稳健的模块。

这样做可以帮助我们知道一个模式在应用之前有多少可以修改。这样做为整个团队提供了一个共同的参考点，并将模式与原始的设计意图联系在一起，从而减少了重复的情形。牢记目的还会让检测模式的有效性变得更加容易。

4、感知性模式

如果说功能性模块反映的是用户需要且想要的内容，那么感知性模式关注的则是他们直观的感受或行为。感知性模式并非来自用户的行为和操作，而是产品尽力打造的个性和营造的氛围带来的产物。

数字产品感知性模式的例子包括语气、排版、配色、布局、插图与图标样式、形状与纹理、间距、意象、交互或动画，以及这些要素在界面中的组合和使用的具体方式。

4.1 感知性模式的作用

4.1.1 感知性模式有助于传递品牌形象

感知性模式通过界面传递品牌，并让品牌被人记住。

4.1.2 感知性模式让系统更为连贯

在模块化的系统中，想要做到视觉上的连贯统一可能是一件很棘手的事情。

模块是由不同的人根据不同的目的创建的。而由于感知性模式是渗透到系统中各个部分的，因此它们可以将系统的不同部分连接起来。如果这种连接是有效的，那么用户就会感受到模块之间的统一性。

4.2 探索感知性模式

举例一些模式

4.2.1 情绪板

情绪板是探索不同视觉主题的绝佳工具，定义大致的品牌方向。

4.2.2 样式叠片

定义好了大致的品牌方向之后，便可以使用样式叠片来更加细致地探究多种可能性。

样式叠片其定义为 "由字体、颜色等界面元素组成的能传递Web视觉品牌精髓的设计交付物。"

4.3 迭代与改进

将样式集成到产品的过程中，样式的演变还将持续。在更为真实的界面设置中，使用模块和交互，进行品牌上的尝试，对感知性模式和功能性模式的改进都是有益的。

这是典型的迭代过程，不同的模式相互影响，直到最终设计语言得以成形。

4.3.1 平衡品牌性与一致性

产生太多的例外会削弱品牌性，同样，过分关注一致性也会扼杀品牌性。矛盾在于，让设计达到完美的一致性无法确保它依然具有很强的品牌性。有时，这样做反而会削弱品牌性------在一致性和统一性之间存在着细微的差别。

发展感知性模式需要为设计师赋予打破常规的权力，鼓励设计师积极地探索更多的可能性。好的设计体系能在品牌的一致性和创造性表达之间取得平衡。

4.3.2 标志性时刻

小的细节可以为用户体验增加深度和意义。当我们为设计的系统化和结构化努力的时候，需要留意那些能让产品与众不同的细节。在构建设计体系的时候，一定要为创造和发展这些时刻而留足空间。

4.3.3 小规模试验

探索新样式的时候，请先在网站的一小块区域进行试验。打破常规的时候要格外小心，留意那些设计体系之外的模式，以及尝试这些模式的原因。如果它们起作用，就将它们应用到网站的其他区域，逐渐将它们融入设计体系。

4.3.4 平衡品牌和业务需求

无论我们如何保护品牌，这些事情都会发生------新的需求需要定制化的模式以及一次性的调整。如果我们没有意识到这些，那么这些例外之处就有可能削弱品牌性。

总结

目的：设计体系的目的是帮助实现产品的目的，设计体系中的所有内容------大到团队运作方式，小到最小的模式------都应该为了实现这些目标进行优化。
原则：团队在设计时需要判断如何实现产品的目的。其设计方法和优先级的选择应当基于一系列原则，团队对原则的认识越一致，他们创造的模式就越有凝聚力。
模式：我们打造的界面旨在帮助人们实现某种目标并创造某种感受。我们的设计意图是通过设计模式表现出来的。功能性模式支持用户的行为和操作，感知性模式关注的是产品给人的直观感受。

最后

📚 小茗文章推荐：

关注公众号「Goodme前端团队」，获取更多干货实践，欢迎交流分享~