DOMAIN · DESIGN
设计与体验
信息如何变得清楚、一致且易于使用。从用户常说的话进入，逐步看懂背后的技术关系与验收边界。
视觉层级
02用大小、位置、颜色和对比度告诉用户先看什么、再看什么。
“标题要最醒目，主按钮比次按钮更突出”留白与间距
03留白是让内容呼吸的空区域，间距用稳定规律表达元素关系。
“相关内容靠近，不同板块拉开，但不要留下无意义大空洞”网格与对齐
04网格提供稳定列和基线，对齐让不同元素形成可扫描的秩序。
“标题、卡片和按钮要落在同一条边线上”排版
05通过字体、字号、行高、字重和行长组织阅读体验。
“标题有力量，正文别太灰，手机不要一行塞太多字”颜色与对比度
06颜色表达品牌和状态，对比度确保文字与控件看得清。
“浅色背景上的文字不能淡到看不见”一致性与设计系统
07设计系统用共享规则、组件和变量保持产品在不同页面表现一致。
“同一种按钮不要在每个页面长得都不一样”可供性与交互反馈
08可供性让用户看得出能怎么操作，反馈说明操作是否发生和结果如何。
“看起来要像能点，点完要告诉我正在处理还是成功了”响应式信息密度与可用性
09不同屏幕应重新安排内容密度和操作方式，而不是机械缩放。
“手机先给核心操作，次要信息折叠，桌面再展开比较”Design Token 设计变量
10用命名变量集中表达颜色、间距、字号和圆角等设计决策。
“主色只改一个 token，全站按钮和链接同步更新。”Iconography 图标系统
11用一致的图形语言表达常见对象、状态和动作。
“删除、下载、设置使用同一套线性图标，并提供提示。”Border Radius 圆角
12控制元素边角弧度，影响组件边界和整体气质。
“卡片统一 6px 圆角，按钮不要像胶囊一样到处都是。”Shadow 阴影
13用明暗和模糊模拟元素层级或悬浮关系。
“弹窗比卡片阴影更明显，但不要像发光边框。”Opacity 透明度
14控制元素整体与背景混合的程度。
“禁用状态可以降低强调，但文字仍要看得清。”Gradient 渐变
15在两个或多个颜色停靠点之间平滑过渡。
“只在品牌强调区域使用轻微渐变，不铺满所有卡片。”Spacing Scale 间距尺度
16用有限的一组间距值控制组件内外留白，形成稳定节奏。
“统一使用 4、8、12、16、24、32 的间距体系。”Hover、Active 与 Focus
17分别表示指针悬停、正在按下或选中，以及键盘焦点所在状态。
“按钮鼠标经过、按下和键盘聚焦时都要有不同反馈。”Disabled 禁用状态
18表示当前控件不可操作，并说明需要满足什么条件。
“没有选择文件时导入按钮禁用，同时提示先选择文件。”Transition 界面过渡
19用短暂动画解释元素从一个状态到另一个状态的变化。
“抽屉从右侧平滑进入，关闭时回到触发按钮。”Easing 缓动曲线
20决定动画在开始、中间和结束阶段的速度变化。
“进入时快速响应再平稳停下，退出更短更直接。”Microcopy 微文案
21按钮、提示、错误和空状态中的短文字，帮助用户理解下一步。
“把“确定”改成“删除项目”，把失败原因写清楚。”Empty State 空状态设计
22当没有数据时解释原因，并提供合理的下一步。
“没有项目时显示“创建第一个项目”，而不是一片空白。”Progressive Disclosure 渐进披露
先展示最常用信息，需要时再展开高级细节。
“默认显示基础设置，高级网络参数放到可展开区域。”