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

扣子原先的设计风格特别商务、正式，少了几分趣味性和个性。此外，我们希望可以适当加强一些 geeky（极客）的感觉。

其次，扣⼦项目没有一套完整的设计系统，设计师需要魔改其他项目的稿件或自己从零制作。因此设计效率低下且最终设计稿标准不统一。

我加入扣子项目后的主要工作之一是搭建和维护扣子专属的设计系统（包括样式、资源、组件、范式等），以及作为组件对接人协助各方同学的工作。

颜色

考虑到扣子的主要用户群体是开发者，有很多代码场景，所以我们想在之前浅色模式的基础上增加深色模式。采用颜色变量，支持 “一键切换” 深浅模式。

目前所有设计稿已实现 100% 颜色变量覆盖。

其次，根据使用场景不同，还提供了 “高反差色” 和 “低反差色”。

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

文字

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

尺寸和排版

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

系统图标

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

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

品牌标识

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

插图

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

范式

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

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

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

新增图标

我在 Figma 文档中画了一个大大的 “购物车”。当业务设计师需要新增图标时，会将新图标放在 “购物车” 中。如有需要，我会将图标按照扣子图标绘制规范调整一下，重新命名，纳入到扣子资源库中。然后将新图标上传到 IconBox 平台，并发布一个新版本。最后将新版本号同步给业务同学，同时更新在我的飞书签名中。研发同学只需要更新一下版本号，就能使用到新增的图标了。

移动端组件库

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

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

研发组件库落地问题

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

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

同步工作

由于组件库的工作内容又多又细碎，涉及到的同学有非常多，为了协助各方同学的工作，组件库的同步工作就变得非常重要。

飞书文档或表格
当组件库有任何修改时，我会记录在组件库更新日志文档中。同时维护组件库进度对齐表格，汇总目前所有组件在 UI 和研发侧的就绪情况，供业务同学查阅。

开会或私聊
每周我会组织 UI 同学参加组件库进展同步会，把这一周组件库新增的地方同步给业务设计师，同时如果大家需要组件库新增功能或者改进问题时，也可以在会上提出，或者直接找我私聊。

飞书消息
在每周的交互评审会后，我会提前预判这周有没有新增的组件功能，并知会组件库研发，让他们有所准备。在 UI 组件库同步会后，我会将确定下来的点同步给组件库研发同学。最后，随着研发对组件库的更新，我每周将新增和已就绪的组件同步到业务研发群中，方便业务方使用最新版功能。

组件库原则

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