扣⼦ (coze) 是新一代 AI 应⽤开发平台。支持零基础搭建、调试和发布为应用或社交媒体小程序。主要面向公司或者个人开发者。

扣⼦项目初期没有一套完整的设计系统 (Design System)，设计师需要魔改其他项目的稿件或自己从零制作。因此设计效率低下且无法保证最终设计稿标准统一。

我加入扣子项目后的主要工作是搭建和维护扣子专属的、统一、灵活好用的设计系统。包括样式 (Style)、资源 (Resource)、组件 (Component)、范式 (Pattern) 等。

扣子设计系统包含

以及更多

颜色

由于使用场景不同，准备了 “高反差色” 和 “低反差色”。

目前所有设计稿已实现 100% 颜色变量覆盖，可实现 “一键切换” 深浅模式。

.

“高反差色” 在深色模式下很浅，在浅色模式下很深；用于系统中性文字、主题色元素、AI 等场景，主要保障易读性。















“低反差色” 深浅模式下的颜色接近；用于警示/提示/完成等功能按钮、头像、图表等场景，主要保障颜色一致性。

文字

文字大小配置了多个梯度。还根据语言、币种、历法的不同，规范了文案撰写格式及用词习惯。

尺寸和排版

由于扣子中有大量集成式开发环境（IDE）页面，尺寸和排版均较为紧凑，采用便当 (Bento) 布局风格。提供固定和自适应等多种排版形式。

.

系统图标

采用统一标准绘制，并按照线性、面性、划线、圆圈、多色等进行整理。

目前全部图标已实现统一在服务中台托管，由设计师维护，可以随时热替换。










品牌标识

汇总了扣子及常见的第三方品牌标识，方便业务同学取用。

插图

汇总了扣子系统中出现的各类插图、动画等图片素材，后期会逐步汇总归纳绘制风格规范。

.

组件

将系统组件分为了按钮与菜单、状态、选择与输入、内容、容器、导航与结构，六大模块。目前包含按钮、标签、选择器、输入框、头像、弹窗、导航栏等 66 个组件。

目前大多数页面中，有超过半数的元素可以用组件搭建完成，有些页面甚至做到了 100% 覆盖。随着组件库的不断完善，业务设计师的作图效率将进一步提高。

除了组件本身，为了方便业务同学查阅，组件库中还整理了各个组件的使用说明和注意事项。这些内容随着项目的发展，逐渐积累完善。

组合起来怎么样？

除了做好单个组件，还针对系统中出现的一些场景，反复推敲每个组件的细节，让他们和谐共生。

.

范式

有些样式不是组件，但又多次出现，横跨不同元素，且有规律可循，需要被规范。这些样式都整理到了范式中。

例如收起/展开场景、树状结构、选中样式、筛选场景、AI 生成场景、信息 (info) 图标，还有和图表搭配使用的数字块等。

随着项目的进一步发展，有些范式可以考虑加入到组件中去。

移动端组件库

一个完善的设计系统远不止这些内容，还有很多的细节没有展示出来。比如目前在考虑打通移动端的组件库。扣子有少量的移动端页面，目前没有统一的组件库。后面会逐步按照由原子组件到复杂组件的顺序，部署移动端的组件库。

除了组件本身，移动端和桌面端还有很多区别也需要考虑。比如移动端使用手指交互，操作精度更低，元素的热区需要更大；没有 hovered 态，很多 Tooltip 里的信息需要直接显示出来；还有移动端一般屏幕较小，信息排版更多采用跳页的形式，而不是直接平铺，等等。

研发组件库落地问题

除了要保证设计组件库的高标准交付以外，研发组件库的落地问题也很关键。由于项目的研发资源非常紧缺，在实际的落地过程中遇到了很多问题。经过这一年多的时间，我们摸索出了几种方案。

对于紧急问题，如果组件库研发不能立即支持，需要业务研发先行处理，之后再由组件库研发检查后合入组件库。对于常规问题或新功能改进，会按照使用量和重要程度分出优先级，分批次处理。对于优先级不高，样式特征又不明显的，如果确实没有人力支持，可以先使用现有的老式组件，等后期新组件就绪了，再替换。

组件库原则

组件库是手段，不是目的。组件库对于设计团队的意义是保证设计的一致性和设计效率；对于研发团队的意义是高开发效率。在项目初期，如果业务功能仍存在诸多不确定性，此时开发详细的组件库是不明智的。相反，应注重灵活性，直至产品趋于稳定。