想进阶高级设计师，先了解设计系统基础知识！

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

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

设计系统

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

设计模式

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

设i ( Z | f V计语言

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

设计原则

设计原则可以理解为设计语0 Z m c V 5 G s C言中的语法，是构建设计语言系统` * S的起点，用于传达品牌主张或设计理念，它将指引业务设计执行U ( ^ y ~的方向。

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

设计规范

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

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

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

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

那要追溯到设计体系的Q $ j S J t s目的是什么？它的意义何在？

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

整体可以归纳为

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

1. 对内统X v m T K一，对外区分

规~ } m l A范定义的基础W / J ) v D w y /是围绕2 v , ;某种风格或者设计文化@ ! k。对内统一，一个品牌的设计风格，是要有别于同类竞品的，比如阿里云、腾讯云，他们各自都有自己的品牌调性。在对外上两个品牌是做到了对外区分，一眼可以识别出来。他们有各自规定的一套设计语言、设计规范。这样才能在协作上达到对内统一。我们都不希望在阿里云的网站，各个页面的设计差异明显，像跳转到其他平台。而这些针对用户层一致性都是非常重要, A 3 J _ ~ f的体验。

2. 管理与协作变得方便

对于设计师：

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

对于开发者:

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

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

3. 建立设计文化体系，突出品牌感

做品牌的时候需要制定一整套VI规范手册，那平台同样也需要统一的品牌感。建立统一的文化体系可以让用户无论处在哪个页面都会有熟悉感、掌握感。统一的元素、视觉风格、交互方式，更加突出该品牌应有的调性。无论你在听网& 2 K ; y易云音乐还是QQ音y 4 5乐，看到界面都可以立马识别出这是哪个app。

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

4.q & N h B C D 减少、优化错误出现

设计经常碰到设计完后需要修改一个点，然后就要找出设e P ] #计稿中所有相同的地方进行修改，这样^ H 7 A Q F #很容易漏，统一规范后只需要修改组件即可。尽可能的避免错误d . S ) ~ t的出现。

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

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

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

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

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

增X U ~ = 7 = 2 u (强界面设计的灵活性和可维护性

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

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

设计规范是需要迭代的，而不是我只要制作出来就放那了，就像女生买衣服，去年的衣服已经配不上今年的我，嘻嘻

~~希望我每天都有新衣服穿，做梦中～

对设计体系的误解

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

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

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

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

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

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

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

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

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

提高设计开发效率，最显而易见的. 9 % g好处就是，5 . 0 y 3组件库的可复用性。比如像表格、弹窗、颜色等。一些基础的组件只需要做一次。

确保设计一致性，为用户提供连贯一致的用户体验，设计J t ~ x % x C ?的一致性让用户能缩短的学习使用产品的周期，让他们能够预见他们的操作所带来的改变。网站统一的视觉规_ 9 G P 2 f V U k范、交互体验，会让用户产生一种掌控感j q s ; L @ S t。

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

那我们要如何去执行呢？

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

1. 对于设计规范的意义要同步给设/ 6 } , p . q L计人员，提高认知，这是一件提高效率的规范，规范必B U g ! ` – W须落地。

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

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

2. 应用规范里的界面、& S : i x % 5交互规范必须得遵循

大家一般O K 4 Q T 0说的设计规范是界面l f % ^ I的视觉规范，从UI的定义，User Interfa` y 2 g C * l a ,ce—用户界面，用户与界面之间的交互关系，可以归纳规范其实可以包含两大类，一类是视觉规范，一类是交互规范。

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

交互规范可以减少用户的学习成本，让用户有归属感。交互规范在制定的过程中，需要写好交F ~ = e 5 b ,互规则与条件，不然后期维护` u 7 + | @ s G [会混4 d 5 r c A ~ & I乱。像盖房子一样，地基都没打稳的话，整个楼都是偏的。

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

设计规范的节点

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

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

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

1h P P = & 8 # o. 建立规范

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

利用粒子构成的原理与三维解构，一个组件被科学的三维解D P P析后由粒子再构成，理论上几乎能够满足所有的U c % 8 ; 8Il _ q u a样式需求。这样所有组件构成元素都可变，高度灵活

2. 具体过程

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

3. 元素是工具库的必要= N K N ( 2 ] } &部分

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

4. 组件的命名规范化

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

协作

• 一键导出/同步最新组件# ; n H到Sketch模板。
• 标注方b B A N o S * [面，目前我们团队使用的是蓝湖私有化。

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

一般情况下，公司有不同的产品线，且都需要长期的开发与迭代。公司中，越来Z . _ H * f _越多的设计师加入，设计风格需要X $ c ! I统一。

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

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

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

思考点：

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

微信公众号：会飞的喵喵