本文适合想提升产品开发效率的你，含设计师、产品经理、前端开发者，随着数位产品逐渐成熟，许多知名企业为了加速开发流程，导入设计系统的观念，让产品团队目标一致。
1. 检视目前开发流程Review current development process
在了解设计系统(Design System)前，可以运用这三大问题检视目前流程。
不论你是开发者或是设计师，是否曾经遇过以下情况：
1a. Inefficiency 没有效率的开发流程
设计团队里的资源不透明，一而再，再而三重复设计相同的元素，增加设计投入成本(人力及时间)。
图1. 重复设计介面浪费设计师/开发者的时间跟精力
1b. Inconsistent 不一致的介面元素/互动体验
由于快速的开发过程，或是紧凑的时间，导致在设计时没有考量规模化、或者没有时间QA就将产品推入市场。不一致的元素会让用户产生困惑，花更多时间上手，可能因此放弃使用你的产品。
图2. 不一致的介面导致使用者无限困惑
1c. Insecurity 对设计产出没有信心
由于没有设计规范，对于自己设计的互动介面，抱持着怀疑的心态。
图3. 因为没有规范，对于自己的解决方法没有信心
如果你曾遇被以上三种情境困扰着，或是正想着：“如何扩展团队和增长产品，同时ㄧ提升开发团队效率及提供一致的使用者经验？”
也许，设计系统Design System是解决办法之一。
2. 设计系统是什么What is 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. 为什么需要设计系统Why do we care?
3.1市场/平台逐趋成熟Maturing of the market/platforms
由于数位产品的市场越来越饱和，大众对产品的品质要求更高
3.2建立产品一致性Create product consistency
不但是在单一产品之内，包含在不同平台及装置间的转换(iOS, Andriod, Saas, Mobile Web, iPad, or TV, etc)，都希望能建立产品的连贯性
3.2加速开发过程Faster development cycles
由于有中央控管的设计系统，成员可以随时领取元素、同步更新，减少设计与开发反覆确认的过程
3.4扩张产品团队Scale of the digital products and teams
设计系统是由有清楚规范、一系列可重复利用的元素所组成，当产品模组化，可延展性就增加了
3.5专注于解决真正的问题Focus on solving the real problem
还记得烦恼下拉选单的样式一整个下午吗？或是与开发者讨论要多几个pixel的间隔、反覆确认的过程吗？设计系统让团队的每个人可以加速构思到生产的过程，专注于大方向的用户体验。
但设计系统并不是适合每个团队的，如果你现在身处一个小型、快速发展的公司，也许为了加速扩张、争取市占率，那么拥有设计系统可能会绑手绑脚的，不过能将设计系统的观念放在心上，对于未来发展十分重要。
图5. 市场成熟，用户对产品的门槛更高，更需要设计系统来维系产品品质
4. 设计系统团队组成Who should be included
由于设计系统是持续更新的系统，定义产品的基石，组成成员可能包含：
1、用户体验设计师UX Designer
2、视觉设计师Visual Designer
3、动效设计师Motion Designer
4、内容写手Content Copy
5、前端开发者Front-end Dev
6、产品经理Product Manger
当然，非常重要的是要取得各方共识，及说服管理者投入资源，在这里不多做说明，有兴趣的朋友可以观看Design systems — Zero to one。
图6. 设计系统的核心成员
5. 如何着手How to begin
万事起头难，根据每个团队会有不同的方法，于本文分享个人在公司里推广设计系统的过程。大致上有六个阶段：
Seed种子期：心中有设计系统的概念
Collect搜集：搜集现有产品UI elements
Categorize分类：将现有UI elements分类
Discovery发想：设计发想所有可能性
Framing定义：收敛定义设计系统基本架构
Solution & Collaboration开发＆合作：与Developers进行开发
现况说明：产品的设计规范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. 定义的设计规范
最后的大步骤就是和前端工程师一起定义设计系统，由于我们产品是SAAS平台，主要使用React。
有兴趣的朋友可以阅读：
Bringing Design System Components from Production into Framer X
Monica Lent — The tech behind a design system that scales
图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的话，希望这篇文章对你有帮助！
7. 参考资料References
Thinking in Symbols for Universal Design — Benjamin Wilkins, Airbnb
Karri Saarinen — Scaling design with systems
The Imposter's Design System — Ed Chao, Product Designer, Dropbox
The heartache of design at scale — Invision
发表评论 取消回复