维格表设计系统
为维格表搭建设计系统，整理颜色与双主题规则、300+ 产品原生图标和业务组件，形成团队可复用的设计资产。
同一个字段，从配置到反馈
组件在真实表单里演示，不陈列在画板上。
关键设计判断
怎样让不同页面与主题复用同一套产品语义？
- 设计依据
- 字段、导航、反馈与主题需要一致的状态含义；通用控件和图标不能覆盖全部业务语义。已有组件库、Token 与原生图标是本案依据。
- 关键取舍
- 围绕产品语义建立 Token、主题映射和组件变体，业务操作保留原生图标，让通用结构与产品语义各有明确的复用方式。
- 交付与验证
- 用 Figma Community 公开组件库对照主题、状态和业务图标，展示语义命名如何落实到组件变体与界面样式。
设计系统讲解
让层级与颜色各自表达含义
我用同一组产品 Token 组织表面、文字与反馈，让组件在 Light 和 Dark 主题下保持相同的含义。
#F0F2F5#FFFFFF辅助说明与元数据
Primary · #333333Secondary · #696969#FFFFFF#7B67EE#18CC90#EE5347层级示意 · 使用产品原有主题 Token
表面区分层级
底层、默认面板与高层表面分别映射到产品背景 Token。
文字表达主次
主要信息与辅助说明使用不同文字角色，保持阅读顺序。
语义色表达状态
品牌、成功与危险分别承担含义，色值随主题映射。
2021 / DESIGN INFRASTRUCTURE
看得见的是界面，看不见的是系统。
移动光束，查看维格表背后的语义颜色、原生图标与双主题资产。同一套语义，适配不同主题
先对照同一组件在明暗主题中的层级，再查看文字、背景与反馈颜色如何映射到语义角色。
同一角色，适配双主题
语义颜色
- Brand
#7B67EE主操作与选中- Success
#18CC90完成与成功- Danger
#EE5347错误与风险- Warn
#FFA62A提醒与警告
文字、背景与边界
- Text · Primary
#333333主要文字- Text · Secondary
#696969次要文字- Bg · Lower
#F0F2F5底层背景- Bg · Default
#FFFFFF页面与面板- Bg · High
#FFFFFF高层背景- Border
#E1E4EA边界与分隔
用语义层级替代重复挑选色值
文字层级先定义为主要、次要与禁用等角色，再由主题提供具体颜色。我将这些角色整理为可复用资产，减少页面独立定义视觉层级的情况。
背景层级解释组件之间的关系
页面、面板与浮层需要不同的空间层级。我将背景按使用角色组织，让组件在双主题下仍保持相近的前后关系。
查看各组颜色梯度
系统字体与文字层级
维格表开源实现采用系统字体栈，默认正文为 14px。通过字号、字重和行高区分标题、正文与辅助文字，让密集的信息保持清晰。
System UI
跟随系统选择字体
Apple system · Segoe UI · Roboto
Regular / Bold为字段和业务操作设计原生图标
通用图标难以完整表达多维表格的字段类型与业务操作。我整理并设计 300+ 产品原生图标，统一轮廓、尺寸和视觉重量，让图标在工具栏、字段菜单和移动端保持一致。
图标表达字段含义，而不只是装饰
公式与关联记录都涉及数据，但操作心智不同。我为产品词汇整理原生图形，让字段菜单、工具栏和移动端使用一致的识别方式。
后续演进：复用控件，保留业务语义
早期在 Figma 建立组件库；后续采用开源控件时，把定制集中在字段、层级导航与业务状态。这一段是后续实现回顾，不将早期系统归为 AI 生成。
主要操作与次要操作有明确主次
我将填充与轻量按钮分配给不同层级的操作，使关键动作在一组控件中更容易找到。控件的尺寸与图标规则保持一致，不依赖临时改色来强调。
不可用时，仍看得出操作是什么
禁用状态需要说明当前不能操作，同时保留按钮名称与位置。我将状态变化限制在统一规则内，避免用户因为控件消失而重新寻找操作。
Tree · 组件规范
缩进系统
交互状态
设计资产与交付
- 产品原生图标
- 300+
- 语义化颜色 Token
- 200+
- Light / Dark 主题
- 2
- 统一视觉与状态规范
- Web / 客户端
- 公开组件库
- Figma Community
我将颜色、图标和组件状态整理成可复用的设计资产，供设计与研发使用，并将组件库公开发布到 Figma Community。
复盘
如果重做一次，我会在搭建规范时同步记录关键命名和组件取舍，让新成员理解规则背后的原因。