3.3 KiB
3.3 KiB
UI 整体风格
0. 文档边界
- 本文档只定义视觉系统与通用交互 affordance。
- 用户可见功能、操作逻辑、状态反馈和验收标准统一放在
doc/prd/**。 - 新增或修改业务功能时，不要把流程规则、业务状态和功能验收写回本文。
1. 设计语言
- 整体气质是温暖、克制、偏编辑器而不是宣传页
- 默认走低装饰、高密度、强层级路线
- 优先用版式、字号、留白、分区线表达层级，不靠堆叠小卡片
- 文字只承担必要说明；状态、来源、风险、模式优先用图标、tag、tooltip、色块表达
2. 配色
背景
- 主背景：
#F5F5F4 - 主面板：
#FFFFFF - 柔和面板：
#FCFBF8 - 内嵌浅底：
#FAFAF9
品牌色
- 主品牌色：
#D97757 - 悬停品牌色：
#C66A4A - 浅品牌底：
#F4E5DF - 品牌弱背景：
#FBF5F2
文本
- 主文本：
#1F1F1F - 次文本：
#666666 - 辅助文本：
#999999 - 禁止使用纯黑
#000000
边框
- 主边框：
#E5E5E4 - 柔和分隔：
#ECE7DF
3. 尺度系统
圆角
- 控件：
10px - 内嵌块：
14px - 主面板：
18px - 浮层 / overlay：
24px - pill / tag：
999px
字级
- 元信息：
12px - 正文：
14px - 区块标题：
16px - 页面标题：
18px - 默认避免继续散落
11 / 13 / 15 / 17+
间距
- 紧凑内边距优先用
12 / 14 / 16 - 面板间距优先用
16 / 20 / 24 - 页面级容器优先用
20 / 24
阴影
- 默认只用轻阴影：
0 1px 2px rgba(0, 0, 0, 0.04) - 浮层可用一档更明显的阴影
- 禁止为了“高级感”加厚重阴影
4. Surface 层级
canvas：页面底色，只承载布局，不制造视觉噪音panel：主工作面板，白底、细边框、轻阴影panel-soft：需要区分但不抢主层级的柔和面板inset：面板内部的次层区域，用于摘要、状态块、导航块
5. 组件规则
Button
- 主按钮只给主动作
- 次按钮保持轻边框、轻背景，不做厚重胶囊感
- 图标按钮必须和常规按钮使用同一套圆角和 hover 规则
Input / Select / Composer
- 桌面工作台保持紧凑高度，不做宣传页式大输入框
- focus 使用统一品牌色边框与浅色 ring
- 一个区域只保留一个主输入焦点
Tag / Status
- 状态默认使用图标 + label + 色块
- tag 用于扫描，不用于写长句
- 相邻 tag 的视觉重量要低于正文标题
Icon
- 默认使用线性图标
- 小图标
16px，常规图标18px-20px - 图标优先承担扫描职责：来源、状态、动作、风险、模式
6. 文字与文案
- 页面不是文档，不要把状态说明写成长段解释
- 能放进 tooltip、tag、状态条的文案，不要放成段落
- 标题只负责定位，辅助文案只负责补充范围或行为
7. 动效与交互
- 默认过渡时长
180-200ms - hover 只做轻微位移、边框变色、背景变浅，不做夸张动画
- 同类元素必须共享同一套 hover / active / focus 反馈
8. Cursor 规则
- 可点击元素统一使用
pointer - 文本输入、
textarea、contenteditable使用text - 帮助提示使用
help - 禁用态统一使用
not-allowed
9. 辅助功能
- 所有交互元素必须可键盘访问
- focus ring 必须清晰可见
- 文本和背景对比度需满足正常阅读