design-taste
跨媒介通用美学底线。下面每条都是模型容易做不到的执行红线,不是教怎么选。怎么选交给判断,这里只守住底线。
视觉层级
- 一个视野内只能有 1 个主焦点。出现两个同等抢眼的元素,必须分主次:一个变大/变重,另一个降级。
- 一个模块内文字层级 ≤ 3 层(标题 / 正文或数值 / 辅助标注)。要第 4 层,先拆模块。
- 相邻层级字号差要明显,≥ 1.2 倍。不要 14/15/16 这种看不出差别的假层级。
- 标题写信息,不写"概览""亮点""解决方案"。优先写对象、结论、差异或动作,能单独读懂。
- 别靠阴影/发光/渐变把元素抬成重点。先用位置、大小、字重、留白解决。
认知负荷(7±2)
- 一组并列项(标签、卡片、选项、行动)控制在 5-7 个。超过 7 个就分组、分页、折叠、排序或渐进呈现。
- 同一视野强调对象 1-3 个。每个卡片标题按钮都有强调色,等于没有强调。
- 主行动只有一个;次行动不能比主行动更大、更亮、更靠前。
- 长文本行宽 45-75 个中文字感知宽度。过宽丢行,过窄破碎。
亲密 / 对齐 / 对比 / 重复
亲密
- 用固定间距刻度:4 / 8 / 12 / 16 / 24 / 32 / 48 / 64。不要冒出 13、19、27 这种无规则间距。
- 组内间距 1x,同级组间 2x,大区块间 3-4x。
- 标题到它正文的距离,必须小于它到上一组的距离,否则归属会错。
- 图例、注释、单位、脚注贴近被解释对象;能内联就内联,别把人赶去远处查图例。
对齐
- 一个区块主对齐轴 ≤ 2 条。左/中/右对齐不在同一信息组里混用。
- 数字列右对齐,文本列左对齐,单位与数值基线对齐。
- 卡片、图表、段落的边缘落在同一条网格线上,不要每个容器各缩进各的。
- 悬浮标签、角标必须有锚点:贴边、贴角、贴对象,不能浮在空中。
对比
- 同时改字号、字重、颜色、空间、形状时,最多让 2 个维度承担主对比,多了就乱。
- 正文与背景必须有足够明度差。浅灰字、透明字、照片上裸奔文字都是失败。
- 状态色只表状态,数据色只表数据类别,品牌/强调色只表强调,三者不混成一套。
重复
- 同一媒介内:一套字体角色、一套间距刻度、一套圆角逻辑、一套图标风格、一套色彩角色。
- 图标统一视觉重量,不混粗线、细线、填充、emoji。
- 同类组件共享结构;不同语义不要套同一外观,否则用户判断不出差异。
- 破格元素必须有理由(更重要 / 更危险 / 更需被记住),没理由就回到系统规则。
格式塔
- 接近:距离决定归属。相关项的距离应小于不相关项的一半。
- 相似:同类信息用相同字号/形状/色彩角色;不同类至少改一个维度。
- 连续:阅读路径单向推进,避免"左上标题、右下注释、左下按钮"的折返。
- 共同区域:边界能减少误解时才加容器,别为显高级给所有东西套框。
- 图底:主体和背景一眼分离。背景纹理、照片、渐变不能压过文字和数据。
信息密度与垂直节奏(最容易翻车)
- 内容填满版面,但不是堆满:上下密度均衡,不能上半挤、下半空一大块。
- 撑满高度时,让真正的视觉元素(图、卡、占位图)变大去填,而不是把文字行距拉开、分割线空一截。
- 条目少时让它们居中或等高分布,别全堆在顶部、空在底部。
- 节奏统一:同类间距(如 eyebrow→标题、标题→正文)全篇一致,不要每处不同。
- 高密度不等于拥挤:密集场景仍要有清晰的组间距、对齐轴和扫描路径。
图形优先于文字
能可视化就别堆字。 先问这块信息能不能变成图形:
- 数据、对比、趋势、构成、占比 → 图表。
- 流程、步骤、因果、时序 → 流程图、箭头、时间线。
- 结构、关系、层级 → 结构图、矩阵、分组。
- 单一关键结论 → 大数字 / 主视觉 + 一句话,而不是一整段。
- 状态、进度、健康度 → 仪表、进度环、状态徽章。
文字的角色是标题写结论 + 图形旁的精炼标注,不是信息主体。 反面:一整屏纯文字段落、把可对比的数据写成句子、把流程写成一二三四行字。 但别为配图而配图:图必须承载核心信息,凑无关装饰图同样是 AI 味。
色彩角色
- 先定角色再选色:背景、表面、正文、弱文本、边界、强调、状态、数据。
- 强调色默认 1 个。大型系统可有多个数据色,但数据色不能冒充品牌强调。
- 别让单一色相的深浅撑完整个画面。至少要有清晰的中性色、文字色、功能色分工。
- 大面积背景色必须服务调性或品牌,不用铺色掩盖信息贫弱。
字体角色
- 1-2 个字体家族通常够,最多 3 个。超过 3 个多半是风格没定下来。
- 字体角色清楚:标题、正文、标签、数据、注释。不要每个角色换一个字体。
- 正文不全大写;大写只用于短标签或极短类别。
- 不用描边字、阴影字、渐变字制造"设计感",用字号、字重、位置和文案质量。
- 数字、金额、时间序列保持稳定宽度或清晰对齐,避免列表刷新时跳动。
- 文案删空泛形容词(高级、智能、极致、赋能、重塑、下一代),换成具体对象、动作、结果。
- 按钮文字用"动词+对象"(保存设置、查看明细),不写"确定""了解更多"。
数据可信
- 不为美观牺牲比例、排序、单位、时间范围、基线、坐标。
- 面积、长度、角度、颜色深浅必须和数据含义一致;不用 3D、透视、假图形夸大差异。
- 关键数字带单位;变化值说明对比基准;排名说明范围。
- 来源、更新时间、筛选条件、异常说明靠近数据主体,不埋在远处页脚。
- 数据不足时表达不确定性,不用强视觉制造确定感。占比类别超过 5 个不用饼图,改条形。
渐变与质感:克制不是禁止
**克制的渐变(可以用):**有方向、透明度 ≤ 20%;同色系两端相近色相不跨彩虹;只用在标题、关键数字、主视觉、图表面积上服务焦点;一个版面最多一两处,不让每个元素都发光。
**滑向 AI 味的渐变(不要):**紫蓝满屏渐变背景;多个高饱和光晕/霓虹/粒子叠加;玻璃拟态+渐变+大圆角+重阴影全堆一个元素;渐变盖过文字可读性。
暗色不用纯黑铺底,留 2-3 级 surface,避开霓虹紫蓝;浅色不靠浅灰文字牺牲对比。
配图分两类(用错就 AI 味)
位图 / 照片类(产品、场景、人物、案例截图、实拍)→ 用占位图,不要自己编造。
- 在正确位置放占位框,锁定比例和尺寸,框内标注「该放什么:具体内容 + 比例」,可附一句生图 prompt 供替换。
- 标注具体内容(如"北区门店实景"),不是"科技感氛围图"。
- 占位框风格统一(浅灰底 + 居中说明 + 1px 边界),当成最终图来留白对齐,替换后即成型。
矢量 / 程序化(背景色块、克制渐变底、几何装饰、分隔形状、SVG 图标、SVG 图表)→ 自己用代码生成。
- 这些可控且能直接产出,优先自己写。
- 背景服务调性、克制有据:品牌色块、低对比几何、单色底;不做满屏光晕、粒子、紫蓝渐变。
- 图标用统一一套 SVG,不混 emoji。
反 AI 味红线(命中即重做)
| 截图失败信号 | 替代做法 |
|---|---|
| 紫蓝渐变、霓虹光晕、漂浮 blob 占据背景 | 内容相关的图像、图形系统、实色品牌面或干净留白 |
| 玻璃拟态卡片到处都是,半透明加 blur | 实色表面、细边界、分隔线或直接留白分组 |
| 3/4/6 张等大卡片,每张都是图标+标题+两行文案 | 按重要性做大小变化、列表、流程、对比表、主从布局 |
| 每个区块都有小号大写 eyebrow 或编号 01/02/03 | 只在真正的分类或序列处用;其他让标题直接承担语义 |
| 连续 3 个以上左右图文交替区块 | 插入全宽证据、表格、引用、时间线、图墙改变节奏 |
| 大圆角+大阴影+细边框同时出现在所有容器 | 只选一种层级手段:边界 / 阴影 / 背景差 / 留白,不叠满 |
| 装饰性手绘 SVG、通用插画、emoji 替代真实对象 | 真实图片、具体图标、数据图、产品截图;没有就不用 |
| 大口号占首屏,真实内容在第二屏之后 | 首屏放结论、对象、关键数据、主操作或可验证证据 |
| 图表无坐标、无单位、无图例,颜色只为好看 | 恢复坐标、单位、基线、图例、标注和真实比例 |
| 文案满是"AI 赋能 / 重塑 / 极致体验" | 改成"谁在什么场景,用它完成什么,结果如何衡量" |
工艺底线(出现即失败)
不需要审美争论,出现就修:
- 挤压:文字贴边、按钮文字换行、padding 小于内容视觉重量、表格行高压扁、标题被截断。
- 重叠:浮层遮挡触发项,固定头尾遮住内容,图表标签互盖,长数字侵入相邻列。
- 错位:同一行基线不齐,图标不居中,数字列不右对齐,卡片边缘不在同一网格。
- 无效留白:大面积空白没承载视觉重心,容器内内容小到漂浮,模块间距大于模块自身导致断裂。
修复顺序:先保证不挤压、不重叠 → 再修对齐 → 最后调留白和节奏。
