设计全息 · 第12章

1. 设计系统 ≠ 组件库

2016 年,我入职一加的时候,官网的交互设计,国内和国外是不一样的。

不同市场,导航位置不一样、购物车逻辑不一样、页面结构不一样。用户从美国市场跳到印度市场(打个比方),打开印度官网——就懵了。操作习惯全变了。

当时所有人都觉得,这很正常。「不同市场嘛,本来就应该不一样。」

我不这么觉得。

从 2017 年开始,我带着交互团队一点一点推。改一个组件、统一一个流程、对齐一个页面。三年。到 2019 年,全球一加官网的交互体验,终于一致了。

习惯问题的存在,才是最可悲、最可怕的。

这一章,讲设计系统——它不是什么、它应该是什么、以及怎么在一个大团队里,让它活下来。

1. 设计系统 ≠ 组件库

很多人以为,设计系统(Design System)就是一个 Figma 组件库加一个前端代码库。把按钮、输入框、卡片都做成组件,开发直接调用,就完事了。

那是组件库。不是设计系统。

组件库管的是「一致性」——让同样的按钮长得一样。

设计系统管的是「品牌在所有触点上的表达」——让用户不管在哪个页面、哪个市场、哪个设备上,都觉得「这是同一个品牌」。

组件库是设计系统的子集。设计系统还包括:设计原则、品牌规范、内容语调、动效规律、无障碍标准。它是一个活的文档,不是一个静态的资产库。

2. 百人团队的 DSM 治理

我在绿联管一百多人的设计团队。品类从充电器到耳机到智能设备——跨度很大。怎么保证一百个人做出来的东西,看起来像同一个品牌?

靠的不是「大家自觉」。是靠系统

我们做了几件事:

第一,全部门从 Photoshop 迁移到 Figma。这不是工具升级——是工作方式的改变。Figma 的组件、样式、共享库,让「一致」变得可能。一个设计师改了主按钮的颜色,全部门所有项目的所有文件自动同步。没有 Figma 之前,改一个颜色需要通知所有人、每个人手动改——永远做不到真正的一致。

第二,建立设计 Token。Token 是什么?是把设计决策翻译成变量。比如「品牌色=#00DC64」「主标题字号=24px」「圆角=8px」。设计师不直接使用颜色值或字号值——他们使用 Token 名。当品牌色需要调整的时候,改一个 Token 值,全部门所有文件自动更新。

第三,设计稿的结构标准化。每个项目的 Figma 文件,有统一的页面结构、统一的命名规范、统一的版本标记。任何一个设计师打开别人的文件,能在五分钟内搞清楚在哪里找到什么东西。

我们的教训

DSM 最难的不是建立——是维护

建一个组件库,一个月就够了。但让一百个人持续使用它、持续更新它、不绕开它——是一个永无止境的工作。
我们的经验:1. 得有专人维护设计系统。不是兼职——是有一个人,他的核心工作就是维护它。
2. 组件「好用」比「全面」优先。一个组件如果不好用,设计师会绕开它。每绕开一次,一致性就碎一次。

3. 设计系统的真正价值

很多人以为设计系统的价值是「效率」——减少重复劳动、开发调用快。这是表面的。

设计系统真正的价值是——释放设计师的创造力

当按钮、输入框、导航栏这些基础元素,不需要每次重新设计和争论的时候,设计师的精力就可以用在真正重要的事情上:这个页面的信息架构合理吗?这个流程用户能走通吗?这个品牌的视觉表达有灵魂吗?

设计系统处理「一致性的问题」。设计师处理「创造性的问题」。各司其职。

好的设计系统,让你不用再讨论「按钮应该多大」——而去讨论「用户需要什么」。

下一部,我们把视角从「设计本身」,拉到「设计对商业的价值」——讲设计怎么驱动增长。

↑ 返回《设计全息》方法论