简介
Swift是我担任co-founder和design director的一个创业项目，隶属于NYC Media Lab中RLab。Swift主要利用machine learning技术、以voice interaction为主要交互方式，为企业或团队提供更高效、智能、友好的会议解决方案。
本文主要讲述Swift建立Design System的过程，重点会放在如何用Sketch建立UI Component Library部分。
Why design system?
Swift是一个合作性质的创业项目。在项目初期，我就开始着手建立一个统一的design system，其目的是为了确保产品保持风格的一致性，提高产品开发和实现的效率。
Swift是一个创业项目，我们会面对很多pitch day和demo day等社交宣传活动，一个统一的design system不仅可以用到各种slides和demo的制作中，还有助于我们在众多初创团队中稳固自身的品牌印象。Consistency sends a mostly subconscious message to our audience that we know what we’re doing.
同时，考虑到随着产品的不断完善，后期我们会雇佣part-time设计师或程序员加入团队，所以建立一个完善可共享的design system能优化合作效率，减少不必要的麻烦。
想了解更多关于design system的内容，欢迎阅读我的另一篇文章：“为何要从Design Guidelines开始？Why to start with Design Guidelines?”
用Sketch建立UI Component Library
很多设计团队都会用到sketch library。Design system不仅仅是一个sketch library，它还需包含交互动效规范、内容规范、应用组件等。所以建好一个sketch library不等同于建好了整个design system，但用它有助于我们完善整个design system。
我的sketch工作流程：
Create UI Component Sketch File -> Make Text Style & Layer Style -> Add to Library
建立UI Component Library的结构
UI library的作用之一是便于团队协同合作，所以一个清晰的library导航架构十分重要。这和我们在做UX中需要建立清晰的information architecture同理。（身为UX设计师，就应该把好的用户体验做到每一件事情中）
UI Component Library是由一些基本的元素（Particles）组成的，将这些元素分类，就可以做好一个简单清晰的结构。
Swift的UI Component Library主要由style (color & typography), grid system, components, data visualization, Icons & Illustrations组成。这里借鉴了Atomic Design Methodology中“将元素原子化，组件化，模块化，原子更新联动整个系统响应组件更新”的思想，将color转成layer style，typography转成text style，其他元素转成symbols。
Colors
Swift是B2B产品，其关键字是智能、高效、可靠，所以我们选用了低明度的颜色作为品牌色。在建立color palette时，不仅要考虑到完整性，如successful、warning、error等状态色，渐变色，和阴影状态，还需要正确的在Sketch中给颜色命名。
用功能引导式的命名方法，即名称显示其作用，如“Primary color”、“Secondary color”，而不是“purple”、“blue"。转换成layer style时，用“/"分割，Sketch会自动生成文件夹。
For example:
Color/Primary/Primary-01
Typography
虽然Swift选用Apple提供的San Francisco，但建立字体这部分依然花了我很多时间。
在为网页端界面设计时，要遵循Human Interface Guidelines里指出的：Use SF Pro Text for text 19 points or smaller, and SF Pro Display for text 20 points or larger.
在为每个字体格式做批注时，采用CSS格式，便于快速开发。（笔者心得：多做一小步，便利你我他）
关于line height，通常是120% - 150%的font size，Swift这里采用140%。字号越小时，采用更大的行高能优化阅读体验。
关于font weight，CSS中采用的是数值，但在Sketch中采用的是文字命名。我这里参考了下图中的转换规范。
转换成text style时的命名格式：
[Size Name]/[Font Family]/[Aligment]/[Color]/[Style]
For example:
Title/SF Pro/Center/Primary/Left
Tip：Jeremy Church开发的Type Scale网站提供正确的字体大小参考，非常好用。
Grid System
Grid system为保持界面的一致性和加快设计速度都很有帮助。这里我采用的grid system为12 Columns / 20px Gutters / 5% Margins。
Atomic UI Components
Atomic design system通常包含Buttons, Inputs/Text Fields, Tabs, Dropdowns等，列出每个元素可能存在的不同状态，如unclicked, mouse hover, clicked, disabled, success, error，loading等。
将每个元素转化为symbols，并正确命名它们。
Icons & Illustrations
Icons 通常包含四个尺寸：64px, 48px, 24px, 16px。这里我选48px作为menu Icon，24px作为主体Icons。16px尺寸的Icons通常存在于其他元素中，如buttons和text fields。
在建立UI Component Library时，绘制界面设计时用的illustrations十分必要。现在的网页设计趋势中，有大量的illustration运用案例。这里我针对Swift产品的三个主要value propositions绘制了三幅插画展现不同的用户使用场景。
应用UI Component Library完成的界面设计方案+商业化应用
心得
“Style guides are a lot of work. Great job seeing this through to completion.”
Dribbble上的Paul Sylling老兄给了我这样的留言。
就像他说的一样，style guides是一个“大工程”。一些团队或公司拥有几年的产品历史，却仍然没有一个较完善（或真正起到作用）的设计系统。
Swift项目经历3个月的调研和2个月的设计开发，让我深刻的体会到design system的重要性。这也是我第一次参与完整的UI Component Library建立，有很多做的不足的地方，当然也学到了很多。
Design system永远不会是一个定型了的完成品，Swift的design system也会继续迭代、不断完善下去。
我这个设计小辈的这些分享，希望能带给你一些灵感。；）
欢迎分享文章，期待通过留言与大家交流讨论！
