如何着手做好ui的设计系统？

随着数字产品逐渐成熟，许多知名企业为了加速开发流程，导入设计系统的观念，让产品团队目标一致。

1. 检视目前开发流程

在了解设计系统(Design System)前，可以运用这三大问题检视目前流程。不论你是开发者或是设计师，是否曾经遇过以下情况：

a. 没有效率的开发流程

设计团队里的资源不透明，一而再，再而三重复设计相同的元素，增加设计投入成本(人力及时间)。

图1. 重复设计界面浪费设计师/开发者的时间跟精力

b. 不一致的界面元素/互动体验

由于快速的开发过程，或是时间紧凑，导致在设计时没有考虑规模化、或者没有时间测试就将产品推入市场。不一致的元素会让用户产生困惑，花更多时间上手，可能因此放弃使用你的产品。

图2. 不一致的界面导致使用者无限困惑

c. 对设计产出没有信心

由于没有设计规范，对于自己设计的互动界面，抱持着怀疑的心态。

图3. 因为没有规范，对于自己的解决方法没有信心

如果你曾遇到以上三种情境困扰着，或是正想着：

“如何扩展团队和增长产品，同时提升开发团队效率及提供一致的使用者经验？”

也许，设计系统Design System是解决办法之一。

2. 设计系统（Design System）是什么？

设计系统并不是一个新观念，可以回溯于早期2013年Brad Forst提出的Atomic Design。Google Material Design在2014年大放异彩，2016年Airbnb开始进行创建设计系统。陆陆续续，许多知名公司包含Salesforce , Atlasssian , Shopify对外公布产品的设计系统，让大众认识设计系统的概要及推广设计规模化(scalability)。

市面上有许多解释，我个人比较喜欢Karri的说法：

“ Set of shared and integrated patterns and principles that define the overall design of a product ”

— Karri Saarinen, Principle Designer at Airbnb

设计系统是定义产品整体的设计，由一组共享、整合的元素及原则所组成。

如果以实体产品形容的话，你可以把它想像成乐高(Lego)。每个元件都是可以合成的模组，拥有千变万化的样式。由一个产品中心管控每个元件的品质，更改版本时也能够一并更新，让设计跟开发可以规模化。

图4. 可以设想Design System是乐高中心，每个人可以自由组合

3. 为什么需要设计系统?

3.1市场/平台逐趋成熟

由于数字产品的市场越来越饱和，大众对产品的品质要求更高

3.2建立产品一致性

不但是在单一产品之内，包含在不同平台及装置间的转换(iOS, Andriod, Saas, Mobile Web, iPad, or TV, etc)，都希望能建立产品的连贯性

3.2加速开发过程

由于有中央控管的设计系统，成员可以随时领取元素、同步更新，减少设计与开发反覆确认的过程

3.4扩张产品团队

设计系统是由有清楚规范、一系列可重复利用的元素所组成，当产品模组化，可延展性就增加了

3.5专注于解决真正的问题

还记得烦恼下拉选单的样式一整个下午吗？或是与开发者讨论要多几个pixel的间隔、反覆确认的过程吗？设计系统让团队的每个人可以加速构思到生产的过程，专注于大方向的用户体验。

但设计系统并不是适合每个团队的，如果你现在身处一个小型、快速发展的公司，也许为了加速扩张、争取市占率，那么拥有设计系统可能会绑手绑脚的，不过能将设计系统的观念放在心上，对于未来发展十分重要。

图5. 市场成熟，用户对产品的门槛更高，更需要设计系统来维系产品品质

4. 设计系统团队组成

由于设计系统是持续更新的系统，定义产品的基石，组成成员可能包含：

用户体验设计师UX Designer

视觉设计师Visual Designer

动效设计师Motion Designer

内容写手Content Copy

前端开发者Front-end Dev

产品经理Product Manger

当然，非常重要的是要取得各方共识，及说服管理者投入资源，在这里不多做说明，有兴趣的朋友可以观看Design systems — Zero to one。

图6. 设计系统的核心成员

5. 如何着手？

万事起头难，根据每个团队会有不同的方法，本文分享个人在公司里推广设计系统的过程。大致上有六个阶段：

Seed种子期：心中有设计系统的概念

Collect搜集：搜集现有产品UI元素

Categorize分类：将现有UI元素分类

Discovery探索：设计探索所有可能性

Framing定义：收敛定义设计系统基本架构

Solution & Collaboration开发＆合作：与开发者进行开发

现况说明：产品的设计规范Style Guide是由两年前的另位设计师所制定，自从产品上市后用户持续增长、在短时间开发更多的功能，过去的设计规范大多已不适用。

图7. 设计系统开发的六个阶段

5.1 Collect 搜集

截图、截图、再截图Screenshot all the components across products

首先，请不留情面地对你的产品截图，包含整个页面跟单一元件，目的是找出用户体验不同的元件。不论是花一个小时、一个早上、或是一整天，你会发现原来不一致的界面比你想像的还要多（总共24个页面及100个元件）。

产生原因包含：不同界面由不同的设计师经手、在开发过程为了方便快速，使用现成的线上元件等。

图8. 光是下拉选单，目前产品内就有不同的形式?

5.2 Categorize 分类

寻找相同的界面元素Pattern hunting

将截图的各元素分类，试着从小处着手，以下是简略的归纳：

图9. 归纳过后的元件清单

5.3 Discovery 探索

a. 搜集现有设计(外部& 内部) Gather current design (external & internal)

这部分可以分成向外寻找、向内探索：

向外寻找External：寻找市面上类似的产品，搜集喜欢的界面元素。由于这次的产品为SAAS，主要的参考对象为：Dropbox , Shopify , Typeform , etc.

向内探索Internal：试着搜集过往的设计，找寻潜在的可能性。这些设计可能是已开发、待开发，甚至是归档的都有成为设计系统的蓝图。

图10. 以上是曾经设计过的prototype，可以做为设计系统的蓝图

b. 选一个界面进行思考Hijack a project

你可以选择一个正在进行的专案着手，或是最让你讨厌的画面、最有感觉的都可以。这阶段发散越广越好，可以先回顾先前整理的元件以及灵感来源，尽可能的创作。

而我选择用户使用时间最长的活动页面，重新构思设计系统的可能性。

图11. 选择一界面进行设计，发想的越广越好

5.4 Framing 定义

提炼设计Refine Design

考量到桌面版及行动装置呈现，选择使用卡片式的UI，并减少图片的面积，让活动主题和相关资讯更突出。

定义架构Define Guideline

有了以上的大方向后，这阶段是一个关键的精密制作过程。你可以定义一个元素、元件，或是模组，考虑到不同的使用情境、在不同页面的呈现，除了在Sketch设定Symbol之外，可以使用Google Doc做详细的叙述，以下是一部分的文件：

图12. 定义的设计规范

5.5 Solution & Collaboration 开发＆合作

最后的大步骤就是和前端工程师一起定义设计系统，由于我们产品是SAAS平台，主要使用React。

图13. 反覆沟通的过程是为了确保Design System可以走得长远、易维系

6. 结论Conclusion

恭喜你看完这篇落落长的文章，希望能用轻松的方式让大家认识设计系统Design System，了解设计系统的使用时机、优点，及设计过程。

“ Design systems are always evolving , and the way you share and encourage adoption of new iterations will evolve along the way as well.”

– Diana Mounter, Design Systems Manager at GitHub

设计系统是持续演变的，不断分享、鼓励采纳，有助于新的迭代。

每一个公司都是独特的，不只是产品，还有团队跟环境，设计系统必须综合考虑所有的因素。Airbnb的设计系统不代表是适合你的。如果你还在烦恼如何开始着手Design system的话，希望这篇文章对你有帮助！