深度解析——设计系统的重要性

深度解析——设计系统的重要性

编辑导语：你觉得设计系统重要吗？那目前手里的设计系统是在灵活运用？还是落灰、摆设？你对设计系统理解有多深？它在你的设计中有多大的用处？节省时间、减少出错率、视觉一致性还是仅仅觉得就应该有个规范？那怎么避免设计系统带来了统一和便利，但同时失去了变化和新鲜感？

设计系统是今年来热门的话题之一，想要带来良好的用户体验，设计系统就是其中重要的一环，那它和设计规范、设计模式、设计语言、设计原则有什么关系？

设计系统：

设计系统用一套连贯组织、相互关联的模式和共享实践以达到数字产品的目的。简单的说就是一系列可重用的组件和它们的使用指导文档，在制作这些组件的过程中会考虑到公司的设计理论和品牌化（颜色，文案，字体等等），所以它们也通常包括在设计系统里。设计系统为公司的各种产品提供了基石和指导，是一种动态的，是需要维护与改进的。

设计模式：

设计模式是一种经常性，可重复使用的解决方案，可用于解决设计问题，我们经常会说解决整个方案我们要运用什么样的设计模式。

设计语言：

设计语言是把设计作为一种“沟通的方式”，用于在特定的场景中进行内容与信息的传递。设计语言可以理解为由品牌基因+设计规范+多场景应用三大要素组成的一套设计应用规范系统。

设计原则：

设计原则可以理解为设计语言中的语法，是构建设计语言系统的起点，用于传达品牌主张或设计理念，它将指引业务设计执行的方向。

比如Airbnb的设计原则可以简单归纳为几点：

设计规范：

设计规范对于设计师来说并不陌生，日常工作中也经常使用。围绕在某种风格或者大型设计项目下形成可视化、数据化的标准，针对相对独立的体系建立的统一遵守条款。统一的设计规范不仅有利于设计师提升效率，同样可以帮助产品、开发、运营、测试等相关人员对产品的体验有更好的认知。

那是不是只要制作一套设计系统，在团队进行扩散就可以了？那平台的统一性就解决了？

我曾经加入一个设计团队，看到平台风格不统一，当时很自豪很坚定的制定了一套平台设计规范，从色彩体系、文字体系、icon体系、botton体系以及其他的一些UIKIT体系，还有交互方面。当时一心想着有这个规范宝典在手，平台统一性指日可待，没想到这个规范就成了我自己的规范，仅仅是我在自嗨。

为什么已经建立设计规范了，还是没能解决平台统一的问题？这里延伸出另一个问题，为什么其他设计成员不用？协作不起来？是它不够好？我严格按照标准来，为什么推不起来？

那要追溯到设计体系的目的是什么？它的意义何在？

• 建立统一的设计文化体系
• 保证多团队成员共同参与的项目视觉一致性
• 提升品牌调性
• 节省与研发人员的沟通成本
• 将元素组件化，提升设计师和程序员的工作效率
• 可以帮助设计人员有针对性地对视觉元素进行优化和迭代。
• 在用户层方面，对某产品的体验一致性得到落实
• 减少设计出错率

整体可以归纳为：

• 对内统一，对外区分
• 管理与协作变得方便
• 建立设计文化体系，建立品牌感
• 减少、优化错误出现

一、对内统一，对外区分

规范定义的基础是围绕某种风格或者设计文化。对内统一，一个品牌的设计风格，是要有别于同类竞品的，比如阿里云、腾讯云，他们各自都有自己的品牌调性。在对外上两个品牌是做到了对外区分，一眼可以识别出来。他们有各自规定的一套设计语言、设计规范，这样才能在协作上达到对内统一。

我们都不希望在阿里云的网站，各个页面的设计差异明显，像跳转到其他平台，而这些针对用户层一致性都是非常重要的体验。

二、管理与协作变得方便

1. for Designer

多个设计成员协同一个产品，迭代与更改规范都能更快的同步。可以试着想象一下一个几十人的设计团队，如果没有统一设计规范，那网站会变成什么样子。

2. for Developer

在UI还原中，设计需要经常与前端进行沟通“这里这里这样做，那里那里这样做”，对于每一块的设计，前端都会询问你，这样大大增加了沟通的成本，把时间花在了无效的事情上。

设计规范统一后，减少了无效沟通，可以更专注创新方向，比如：要改变预先设定的一个辅助色，无论是设计还是开发，修改组件的颜色，全局使用到这个组件的地方都会改动，大大节省了设计时间。

三、建立设计文化体系，突出品牌感

做品牌的时候需要制定一整套VI规范手册，那平台同样也需要统一的品牌感。建立统一的文化体系可以让用户无论处在哪个页面都会有熟悉感、掌握感。

统一的元素、视觉风格、交互方式，更加突出该品牌应有的调性；无论你在听网易云音乐还是QQ音乐，看到界面都可以立马识别出这是哪个app。

你能分出哪个是网易云播放界面，哪个是QQ音乐播放界面吗？

四、减少、优化错误出现

设计经常碰到设计完后需要修改一个点，然后就要找出设计稿中所有相同的地方进行修改，这样很容易漏，统一规范后只需要修改组件即可，尽可能的避免错误的出现。

设计规范的意义这么强大，对网站及品牌有至关重要的作用，那为什么还会出现没有应用起来的情况呢？

很多设计师会说：“设计不就应该是变化多端的吗？就是要表现创新力呀？制定了设计规范是不是就失去了变化和新鲜感？那设计还有什么意义？开发都可以做设计的事情了。”

这里就要看对设计规范理解的深度—设计规范是分层次的，平台规范归根结底是为了确保产品的易用性，是为了减少用户的学习成本

1. 对无法拆分的底层基础元素做严格规定

底层基础元素也可以说是全局样式，比如色彩规定、文字大小、icon线/面、botton体系等一些基础的元素，给用户一种统一的视觉形象，在跨界面、跨端、跨系统间有熟悉感，从而潜移默化地进行品牌的渗透。

2. 增强界面设计的灵活性和可维护性

对组合自由度较低的基础组件做精简的样式变化限定，对组合自由度较高的复合组件减少过于局限的限定条件，考虑各种拓展的可能性。组件在制定过程中要考虑多种状态，多种可能。

3. 设计规范随着业务的发展或技术的变革终究是会过时的，是需要迭代的。

设计规范是需要迭代的，而不是我只要制作出来就放那了，就像女生买衣服，去年的衣服已经配不上今年的我，（嘻嘻~~希望我每天都有新衣服穿，做梦中～）

4. 对设计体系的误解

设计体系最大的重要性毋庸置疑就是规范节省人力，设计师可以更多的时间去发挥创造性。

误解1-设计系统限制了设计师的创造力

很多设计师觉得统一了规范，那我的创造性从哪发挥，界面都长的差不多。在设计中，设计目的是解决商业或用户的问题，并不仅仅是为了有创意而引入新的样式或交互方式。

有了设计体系，统一了整体品牌风格，不用把精力花费在比如调整间距、对齐元素等琐碎的事情上，更多的回去关注更全局的设计策略。

误解2-设计系统只关乎设计，可由设计师独立完成

它仅仅是设计软件上可复用的组件，所以可由设计师独立完成，这种想法是错误的，是需要来自不同角色支持和参与的，这里包括前端、品牌、动态设计、 用户研究等。

误解3-设计系统是一劳永逸的

有时候会想只要完成了规范就大功告成了，其实不然，对待设计规范就像对待产品一样，是需要维护和改进的，包括两个方面：一种是对内部使用的开发以及同事，一种是对用户的，应该定期收集用户以及同事的反馈，确保及时更新迭代。

误解4-设计系统的重要性

1）提高设计开发效率，最显而易见的好处就是，组件库的可复用性。

比如像表格、弹窗、颜色等。一些基础的组件只需要做一次。

2）确保设计一致性，为用户提供连贯一致的用户体验，设计的一致性让用户能缩短的学习使用产品的周期，让他们能够预见他们的操作所带来的改变。

网站统一的视觉规范、交互体验，会让用户产生一种掌控感。

3）设计系统促进了公司内部的合作和交流，一个成功的设计系统是需要跨功能团队参与，设计系统因此促进了公司内部不同职位的合作和交流，这种文化的建立也会帮助公司更有效地推出新的产品或服务。

5. 那我们要如何去执行呢？

已经了解了规范的目的/意义，那该怎么去着手呢？

对于设计规范的意义要同步给设计人员，提高认知，这是一件提高效率的规范，规范必须落地。

在制定规范前期，不应该是一个人规定这个规范，设计团队的成员应积极参与，前期先把规范的基调定好，人人都参与进来了，规范也就能更好的运营，当时我就是一个人定了规范，只是单纯把规范发给其他设计人员，他们没有参与，自然不会使用规范，对里面的设计元素没有加深理解。

6. 主导人

这个主导人建议让全队专业能力最强的人辅助产品战略分析进行。有全局把控能力，这样能把纰漏降到最低。

7. 应用规范里的界面、交互规范必须得遵循

大家一般说的设计规范是界面的视觉规范，从UI的定义，User Interface—用户界面，用户与界面之间的交互关系，可以归纳规范其实可以包含两大类，一类是视觉规范，一类是交互规范。

视觉规范可以给用户传达统一的品牌形象，确保视觉一致性。后期的设计元素须复合规范的原则。

交互规范可以减少用户的学习成本，让用户有归属感。交互规范在制定的过程中，需要写好交互规则与条件，不然后期维护会混乱；像盖房子一样，地基都没打稳的话，整个楼都是偏的。

那在使用规范时，一定要遵循规范里的要求进行应用，否则会乱套，不仅起不到统一的品牌风格，反倒会给人一种一团糟、完全不专业的感觉。体验好是一个产品的竞争力。

8. 设计规范的节点

节点和公司的进度搭边，看当前的产品是应该先独立风格还是先统一基础规范。

1）固定的设计风格规范，比如：google的“扁平”，微软的“磁贴”，可以全局使用，并且时间保持的相对长久，这些设计风格在前期就完成了独立与其他风格的区分；后期再进行拓展，这种比较适规模比较大的团队，定好基调，不会走偏。

2）不断优化的设计规范，根据公司的节奏，有些产品目前比较迫切的是需要界面统一性、交互统一性，基础做完以后，进而考虑产品固定风格；这种比较适合小团队协作，可以随时调整。

9. 建立规范

制作原理—利用粒子构成的原理与三维解构：

利用粒子构成的原理与三维解构，一个组件被科学的三维解析后由粒子再构成，理论上几乎能够满足所有的UI样式需求；这样所有组件构成元素都可变，高度灵活。

具体过程：

建立单个元素——设立简单组件——构成复杂组件——形成模板——最后组成页面。

元素是工具库的必要部分：

并不是每个时刻都能够直接使用完整的组件，元素是我们工具库必不可少的部分，它可以更大的方便你修改组件，再造组件以及特殊的排版，方便拖拉拽。

组件的命名规范化：

规范组件命名，方便查找、方便协作。

一键导出/同步最新组件到Sketch模板。

标注方面，目前我们团队使用的是蓝湖私有化。

那是不是所有的公司都需要创建设计系统？

一般情况下，公司有不同的产品线，且都需要长期的开发与迭代。

公司中，越来越多的设计师加入，设计风格需要统一。

那建立一套设计体系会面临什么挑战？

设计体系里面包含了设计语言、设计规范，需要与前端、品牌、动态设计、 用户研究等沟通，还是需要迭代优化的，这是非常繁琐耗时的项目，初期会非常的艰难，当设计师开始做组件时，也是非常耗时的工作，需要考虑不同场景下的使用情况以及设计的延展性，都需要投入大量的设计人力。

聊了这么多，大家对设计系统有了一定了解，建立好设计系统可以事半功倍，以此提升效率才能提升UED价值。

• 对于设计团队只有一两个人的时候，是否需要建立设计系统？
• 你是否愿意把时间花费在前期建立设计系统，后期更多时间用于创造性地东西？
• 建立设计系统前很枯燥，你会怎么坚持，怎么让设计体系价值更大化？

本文由 @玛丽的设计笔记 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unsplash，基于 CC0 协议