1、设计师眼中的设计系统是什么？

为了给用户带来良好的用户体验，设计系统是一个重要的环节。一个基本的设计系统大致包括五个部分：风格、内容、基础、组件和模式。基础和组件是我们作为设计师、老师最常接触的两个部分。

1. 风格

说到风格，相信大家都不陌生。就像设计语言一样，设计原则也与风格有关。在很多设计系统网站上，你都可以看到公司对设计系统风格的描述。

在创建界面或其他设计交付成果时，风格将品牌风格指导应用于视觉参考和设计原则。 style部分主要承担两个主要任务：

对内：对于设计师来说，需要理清产品应该具有什么风格、个性，以及为什么产品外观要设计成这种风格（风格）。对外：对于外部用户来说，如何有效地将企业品牌形象传达给用户是风格的使命。

总之，好的品牌风格可以对内辐射产品定位，对外促进企业宣传。许多设计系统都会有风格的定义。例如，国外Apple设计体系的风格语言被定义为“完整、一致、简洁”，国内Shell设计体系的风格语言被定义为“生长、触感、联想”。

有些企业会在产品手册中强调“一致性”的设计原则。例如，美团外卖产品无论是线下物料宣传还是线上产品都大量使用“黄色”，为团队设计提供清晰的设计指导，让用户有一致的感官标准，感受到“一致性”的设计理念。

2. 内容

内容是指我们在产品界面中使用的文案，也就是人们常说的“微文”。有些音像产品也会注重其文案的语气和语调，根据用户的属性为设计人员编写词汇使用列表。设计文案时避免给用户造成焦虑。

很多产品在内容设计上都花了不少心思，比如 APP的弹窗设计。新版本的弹窗使用了更有趣、更容易理解的“保存并继续”文案来代替枯燥的“下一步”文案。 ，并附有“请按照提示完成后续操作”的简短提示，清晰引导用户进行操作。

另一个例子是哔哩哔哩的产品。在密码输入场景中，根据用户输入密码的场景选择合适的表达方式。当用户输入登录密码时，产品吉祥物会遮住他的眼睛。这样的设计不仅能很好地表达产品的个性，还能传达产品的温度。

如果你认为内容的修改只是为了提升体验，那你就错了。这样的典型案例将为企业带来巨大的效益。

例如，在酒店搜索中，“预订房间”这个词最初是为了吸引用户点击。在后续的修改中，“预订房间”改为“入住”。 ，成功将该功能的互动点击率提升了17%。因此，内容（微文案）改版不仅可以提升用户体验，还可以给产品带来数据的提升，从而带动企业营收的增长。

3. 基础知识

基础可以理解为设计表现层中最小粒度的集合。简单理解，就是不断拆解一个页面上的元素。被拆解到无法拆解的状态后，剩下的元素就是“基础”，比如字体、颜色、图标、布局（间距）、声音、动画等。

“地基”的建设不能马虎，因为它是最小的组成部分，应该用最科学的方法来设计。例如，在匹配颜色的元素时，我们可以使用扩展的公式计算方法、手动叠加、公式计算、颜色曲线工具等来设置准确的颜色值。

4. 组件

组件也称为组件库。组件库是设计人员接触最多的东西，也是设计系统的灵魂。它可以分为两部分：设计组件库和代码组件库。

设计组件库相信大家都很熟悉。这里我推荐两个工具网站——ui。和figma。特别是包含了figma的组件，使用起来非常方便。

代码组件库主要供前端开发人员使用，会有一些代码规范说明。这里我推荐两个工具，QMUI工具和Bit.dev。

我们强烈推荐 Bit.dev，它是一个由第三方组件构建的平台。它有一个功能叫组件共享，即当鼠标悬停在某个组件上时，会产生高亮状态，提示该组件的名称。 、版本和父区域。

假设当鼠标点击按钮组件时，也会跳转到相关页面来显示这些按钮组件的范围。有兴趣的同学可以体验一下。

一个完整的设计组件库一般由公共组件和业务组件组成。与设计系统一样，它仅用作参考规范。组件库也需要根据业务进行微调，需要不断优化，所以并不是一成不变的。

随着业务和产品数量的增加，公共组件库的数量也会增加。因此，构建组件库时有两个问题特别值得注意：

注1：构建组件库时，要特别注意公共组件库的使用效率。如果总是出现使用率低的组件，公共组件库就会变得臃肿，所以要及时移除不可用的组件，保留常用的组件。成分。注2：公共和业务成分越多越好，一味追求“大而全”是绝对不可取的。你必须时刻提醒自己“一个合适的组件库比一个全面的组件库更重要”。

5. 图案（规格）

模式这个词，大家第一次听到的时候可能会觉得陌生。事实上，图案的概念最早是在《1975年NASA》手册中引入的。如今，它通常被称为感知模式或设计规范。

你不需要深入了解这一点。可以用一句话来概括：“为了避免重复发明轮子，我们开发了几种通用流程，以保证产品开发过程的效率。”这里的模型可以简单理解为一种习惯。使用的解决方案是设计团队给用户在我们的产品中完成一系列操作的指令。它可以是模型或用户习惯。

例如，当发送语音时，我们必须按住按钮来录制语音。如果我们的产品有类似的语音对话功能，我们可以直接使用微信的交互逻辑，而不必自己发明新的交互逻辑。这样做的好处是降低了用户的学习成本。如果你看一下华为的鸿蒙设计系统，就会有关于交互手势规范的注释。

#h4-14

当然，模式实际上还包括组件的交互描述。例如，如果我创建一个按钮组件，我会将按钮的大小、交互状态等信息编辑到一个文档中来描述设计组件库。

2. 关于设计系统的五个误区

很多新手以为设计系统就像一本新华字典，万能的，其实不然。我认为有5个常见的误解需要讨论一下。

1. 设计系统不是设计规范或组件库

那些声称自己完成了设计系统开发的人，是那些将设计规范或开发组件库理解为设计系统的人。

80%的人会将设计系统简单地理解为模式（设计规范）或组件（开发组件库）。这种认识是片面的。设计系统并不简单地指某一类内容。准确地说，它不仅仅包括设计规范和开发组件库。

比如像这样开发组件库的开源网站就不是一个设计系统，因为它缺乏产品风格、内容、模式的定义。准确的说，设计系统包括模式（设计规范）和组件（开发组件库），如图所示。

为什么会发生这种情况？主要原因是模式（设计规范）、组件（开发组件库）和设计系统的目标是相同的，都可以解决提高设计产品一致性、提高设计效率、降低沟通成本这三个问题。前端开发。问题，所以很容易混淆。

如果从功能的角度来比较三者，只有设计系统具有实施计划的性质，而设计规范具有指导性，而组件则是构建其规范的元素。

2.设计系统不缺乏创造力

有人可能会建议设计系统提供规范性的解释，以提高效率。这是否意味着设计系统一旦实施，就会抹杀产品的创造力？这可以从两个角度来看。

角度一：糟糕的设计系统只会抄袭猫和老虎，而不会从产品业务和用户体验的角度考虑设计“设计系统”。当然，这会扼杀创造力。

角度2：然而，好的设计系统往往会促进产品的创造力，因为好的设计系统是以解决问题为中心的。随着时间的推移，产品问题会层出不穷，那么为什么缺乏能够解决产品问题的设计系统呢？创造力又如何呢？因此，必须严格执行设计体系的内容，这样企业构建的设计体系才不会缺乏创意。

3、设计系统不是设计师独立完成的

设计系统是一个庞大的关系网络，需要不同角色的支持和参与，包括前端、UI设计、品牌设计、动态设计、用户研究等，它不是一个人或几个人独立完成的。设计团队成员应积极参与。

大家参与设计体系建设最重要的意义就是帮助提高对设计体系的理解，从而帮助设计体系的实施。

有一次我自己在设计系统中制定了规格，然后简单地将规格发送给其他设计师。可想而知，其他设计师自然没有使用规范sketch用户手册，也没有对里面的设计元素有更深入的了解。最终的项目提出来并不理想sketch用户手册，所以设计系统不是一个人能完成的，也不是一个人能完成的。

4. 并非每个企业都需要设计系统

设计系统需要迭代优化，这是一个非常繁琐且耗时的项目。设计系统专家（2015）和Jina Anne（2015）提出了三种模式：独裁模式、中心化模式和联盟模式，以适应不同规模的企业。

对于规模较小的公司：比如只有几个人的公司，团队可能根本不需要设计系统。如果强行使用设计系统，只会让开发模式变得不那么敏捷，影响产品的上市时间。

对于规模较大的公司：一开始设计系统只需要少数人投入部分时间兼职维护（专制模式）；后期需要专门的人专职维护（集中模式），直到最后组建一个设计团队。庞大的工程师和产品经理团队不断改进和维护（联盟模式）。

因此，并不是每个公司都需要设计系统。无论是大公司还是小公司，在构建设计系统时，选择适合自己的方法才是最重要的。

5.设计系统不是静态的

在2018年发表的《为什么我们的模式库不再使用原子设计》一文中，他也提到了原子设计在实现时的局限性。他提到，过度依赖递进关系会导致整个系统会变得极其复杂且难以维护。一旦使用，后续的迭代和重构成本将会非常高。

设计系统随着团队和用户的需求而不断变化，因此设计系统是动态的，需要不断更新和升级。它的存在是为了解决更多的产品问题。我们需要花时间维护和更新它，让它越来越高效。越完美，效率就越高。例如，大型设计系统有更新日志来记录该阶段所做的更新。

#专栏作家#

斜线7湿哥，公众号：斜线7湿哥，人人都是产品经理专栏作家。星光并不关心那些在路上的人，时间会给那些愿意这样做的人带来回报。激励成为知识的分享者。

如有侵权请联系删除！