如何选择设计系统

[byewind]

选择设计系统不是一件容易的事. 设计系统如同地基, 造的楼越高, 地基越难调整. 更换设计系统的难度和工作量会随着业务的发展而增加.

一: 设计系统要满足哪些条件

1. 通用性

我相信产品开发者们都希望能将产品发布在多个操作系统上, 且希望用最少的工作量来达到这一目的. 所以, 设计系统要能在各大操作系统上通用. 比如 MacOS, Windows, Linux, iPad, iOS, 安卓, 汽车端, (手表), (Apple Vision).

为了以下原因, 使用同一套设计系统是很有必要的.

1. 减轻设计和开发工作量.
2. 降低后期维护的成本. 产品升级了, 不代表用户也跟着升级, 因此开发者需要同时维护多个大版本.

2. 一致性

各个操作系统拥有一致的 UI 和交互, 各个类型的产品拥有一致的 UI 和交互. 保持 UI 和交互的一致性是推动设计系统运用的重要动力. 这有助于减少用户的学习成本. 用户的学习成本越高, 用户使用产品的意愿度就越低. 也就是说越简单的产品越容易获得用户的试用.

3. 扩展性

产品从开发到完成并不会一层不变. 每一个优秀的产品都经历过长期的迭代. 所以如果设计系统不具备扩展性, 调整产品花费的工作量就会很大. 比如最初我们设计了一个拥有 4 个一级导航的产品. 随着产品的发展, 产品的功能越来越多, 这时候我们就需要 5 个, 6 个一级导航, 再后来, 我们需要二级导航甚至三级导航. 这时候考验扩展性的时候就到了.

4. 易用性

设计系统也是一个产品, 越简单的产品越容易获得用户的试用.

二: 满足以上条件的设计系统有哪些

首先, 没有一个设计系统能在以上这些方面都做到完美, 但我们总能选出优秀的设计系统.

Apple Design System

苹果公司的设计系统 在苹果生态中, 苹果的设计系统有着良好的通用性, 一致性, 扩展性和易用性. 但在桌面端苹果的设计系统会和 Windows 有一些差别, 同样在移动端苹果的设计系统也会和安卓有一些差别.

Material Design

谷歌公司的设计系统 该设计系统多应用在安卓上. 桌面端的特征并不明显, 和其他设计系统接近. 在移动端, Material Design 和 iOS 会有一些差别.

Fluent Design System

微软的设计系统 该设计系统多应用在桌面端. 使用此设计系统的非微软产品比较少.

SnowUI

我做的设计系统 设计初衷是打造一个满足通用性, 一致性, 扩展性, 易用性的设计系统, 能运用于不同操作系统, 不同终端和不同类型的产品上.

苹果, 谷歌和微软对产品设计都有自己不同的理解. 他们不太愿意为了符合不同操作系统的设计逻辑而更改自己的设计逻辑. SnowUI 则在这方面相对开放, 尊重并遵循他们的设计逻辑.

其他设计系统

除此之外还有其他公司的一些设计系统, 比如 Atlassian Design System, Lightning Design System, LINE Design System, Ant Design 等, 这些设计系统通常只支持同一类型的产品. 比如 Ant Design 只支持中后台产品.

三: 如何选择设计系统

首先, 自然是要选择能满足通用性, 一致性, 扩展性, 易用性的设计系统. 其次, 新产品看起来新很重要, 尤其在 IT 行业. 因为人们总是青睐于更新的技术. 所以设计系统的 UI 要让产品看起来是新产品, UI 要简洁能让用户有意愿去体验.

四: 最后, 多问自己几个问题

1. 当你看到一个设计系统时

这个设计系统完整吗, 有交互指导吗? 这个设计系统还在维护吗? 桌面端, 移动端, 不同的终端都能使用这个设计系统吗? 不同类型的产品都能使用这个设计系统吗?

2. 当你看到炫酷的设计时

这些设计能在不同的操作系统, 不同类型的产品上使用吗? 这些动效会影响用户理解此功能吗? 这些交互和其他功能的交互是否一致?

3. 当你看到一个拥有几十种颜色的设计系统时

这些颜色该怎么用, 有使用规范吗? 颜色的使用规范需要学习多久? 如果我将设计稿交给其他设计师, 他们是否明白我使用颜色的逻辑和规则?

关于我

UI/UX 设计师, 16 年设计经验, 先后工作于腾讯\阿里, 现在创造 SnowUI.

SnowUI ✦ http://snow.byewind.com 

Works ✦ http://figma.com/@byewind

关注我: Twitter / Instagram / Dribbble / Figma