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. 设计系统的真正价值
很多人以为设计系统的价值是「效率」——减少重复劳动、开发调用快。这是表面的。
设计系统真正的价值是——释放设计师的创造力。
当按钮、输入框、导航栏这些基础元素,不需要每次重新设计和争论的时候,设计师的精力就可以用在真正重要的事情上:这个页面的信息架构合理吗?这个流程用户能走通吗?这个品牌的视觉表达有灵魂吗?
设计系统处理「一致性的问题」。设计师处理「创造性的问题」。各司其职。
下一部,我们把视角从「设计本身」,拉到「设计对商业的价值」——讲设计怎么驱动增长。