Swift UI Component Library - by Mengzhen

简介

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。

在Sketch中，用page分类整理不同的元素

Colors

Swift是B2B产品，其关键字是智能、高效、可靠，所以我们选用了低明度的颜色作为品牌色。在建立color palette时，不仅要考虑到完整性，如successful、warning、error等状态色，渐变色，和阴影状态，还需要正确的在Sketch中给颜色命名。

用功能引导式的命名方法，即名称显示其作用，如“Primary color”、“Secondary color”，而不是“purple”、“blue"。转换成layer style时，用“/"分割，Sketch会自动生成文件夹。

For example:

 Color/Primary/Primary-01

Swift - Color Palette 便于生成layer style的命名方式

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.

Swift - Typography 用CSS格式，便于开发者应用

在为每个字体格式做批注时，采用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网站提供正确的字体大小参考，非常好用。

font-weight to numerical weight

Grid System

Grid system为保持界面的一致性和加快设计速度都很有帮助。这里我采用的grid system为12 Columns / 20px Gutters / 5% Margins。

Swift - Grid System

Atomic UI Components

Atomic design system通常包含Buttons, Inputs/Text Fields, Tabs, Dropdowns等，列出每个元素可能存在的不同状态，如unclicked, mouse hover, clicked, disabled, success, error，loading等。

将每个元素转化为symbols，并正确命名它们。

Swift - Components

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绘制了三幅插画展现不同的用户使用场景。

Swift - Icons & Illustrations

应用UI Component Library完成的界面设计方案+商业化应用

Swift - Webpage Swift - Dashboard Swift - UI

心得

“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也会继续迭代、不断完善下去。

我这个设计小辈的这些分享，希望能带给你一些灵感。；）

欢迎分享文章，期待通过留言与大家交流讨论！