先建立一个观念：设计不是天赋，是有规律的知觉科学

很多工程师觉得“我没有审美，做不好设计”，这其实误解了设计。视觉设计的绝大部分“好看”，背后是人眼与大脑稳定的知觉规律——这些规律在过去一百多年被格式塔心理学、瑞士平面设计和现代可用性工程反复验证，是可以学习、可以复用的。你不需要成为艺术家，只要严格遵守这些规律，就能让界面从“能用”变成“专业、耐看、有秩序”。

一、格式塔：大脑如何自动“分组”你看到的东西

格式塔学派（Gestalt）由马克斯·韦特海默（Max Wertheimer）于 1912 年前后在德国创立，核心命题是“整体大于部分之和”：人眼不会把界面看成一堆孤立像素，而会自动按某些规则把元素组织成组。做界面本质上就是在“顺应”这些规则，让用户不用思考就知道哪些元素属于一块。七条最常用的组织原则是：

格式塔七原则 → 界面落地

接近性 Proximity 距离近的元素被视为一组 → 相关控件靠近、无关项拉开相似性 Similarity 长得像的被视为一类 → 同类按钮同色同形,主操作只留一个高亮连续性 Continuity 视线倾向沿平滑线条走 → 分割线/对齐引导纵向阅读闭合性 Closure 大脑会自动补全残缺形状 → 可用不完整边框/留白暗示卡片图底 Figure/Ground 人会自动区分主体与背景 → 弹层遮罩、毛玻璃把主体抬出良好完形 Prägnanz 人会把复杂图形理解成最简单的整体 → 图标尽量几何简洁共同命运 Common Fate 一起动的被视为一组 → 列表项整行联动、错位移动即异常

二、CRAP：Robin Williams 给非设计师的四条铁律

罗宾·威廉姆斯（Robin Williams，与演员同名的女设计师）在 1994 年初版的《写给大家看的设计书》（The Non-Designer's Design Book）里，把平面设计浓缩成四个原则，首字母正好组成 CRAP，几十年过去仍是 UI 排版的最高性价比清单：

CRAP 四原则

Contrast 对比 不同就明显不同:标题/正文用字号字重颜色拉开,别“差不多”Repetition 重复 视觉元素在全产品重复:同一套色板/圆角/字号/间距/图标风格Alignment 对齐 任何元素都应与另一个元素对齐:页面只有一条隐含的对齐基线Proximity 亲密性 相关的靠近、无关的远离:一张卡片只讲一件事

对比（Contrast）要求“要不同，就截然不同”，最忌讳两个字号/颜色“差一点又没差开”，那会显得是失误而非设计；重复（Repetition）要求主色、圆角、字号阶梯、阴影、图标风格在全局反复出现，形成统一的设计语言——这正是我们用 CSS 变量把颜色/间距/圆角全部 token 化的原因；对齐（Alignment）要求页面上每个元素都能和某个别的元素对齐，避免随意的居中与错位；亲密性（Proximity）与格式塔的接近性互为表里：标题与其描述、标签与其输入框必须成组靠近。

三、网格与视觉层级：秩序从哪里来

瑞士国际主义设计把“网格”推到了系统高度，代表人物约瑟夫·米勒-布罗克曼（Josef Müller-Brockmann）在 1981 年的《平面设计中的网格系统》（Grid Systems in Graphic Design）中，用模块化列网格让版面获得可计算的秩序；其思想源头可追溯到 1919 年成立的包豪斯（Bauhaus）——强调理性、功能与几何秩序。落到 App 上，就是用统一的水平内边距、8pt 间距基准、列对齐，让上百个页面拥有一致的“骨架”。

视觉层级（Visual Hierarchy）回答“用户先看哪、后看哪”：你通过大小、字重、颜色对比、留白和位置，给内容排出重要性次序。人眼在页面上的扫描路径通常呈 F 型（文字密集页）或 Z 型（稀疏落地页），所以主标题、主按钮要落在这些动线的关键节点上。一个可操作的自检问题是：把页面眯眼看成模糊色块，你是否仍能一眼分辨“最重要的一块、次重要的一组、背景”？如果所有元素权重都一样，就是没有层级。

四、配色：60-30-10、色彩三属性与对比度底线

60-30-10 法则源自室内设计，迁移到界面非常好用：约 60% 是中性背景色（决定整体基调），30% 是次级结构色（卡片、导航、次要区块），只剩 10% 留给强调色（主按钮、关键链接、当前状态）。强调色之所以“强调”，正是因为它稀缺——如果品牌色铺满半屏，它就再也无法引导注意力。

理解颜色还要掌握三个属性：色相（是什么颜色）、明度（亮还是暗）、饱和度（鲜艳还是灰）。深色模式不是简单反色，而要降低饱和、拉开层次；浅色模式下小图标若明度/饱和不足会显得“发灰、没精神”，这正是本版本给浅色主题图标提亮、让统计卡辉光匹配各自色相的原因。配色关系上，互补色对比最强（适合强调）、邻近色最和谐（适合背景层次）、三角配色活泼但要控制面积。

最后是不能妥协的无障碍底线：WCAG（Web 内容无障碍指南）AA 级要求正文文字与背景对比度不低于 4.5:1，大号文本与 UI 组件/图形边界不低于 3:1。颜色永远不能是传达信息的唯一手段——错误状态除了变红，还要有图标或文字，因为约 8% 的男性存在不同程度的色觉异常。

本节小结

视觉设计是有规律的科学：格式塔（韦特海默，1912）七原则解释人眼如何自动分组，优先用间距而非分割线表达结构；CRAP（Robin Williams，1994）要求对比要拉开、元素要重复、处处能对齐、相关要靠近；网格系统（米勒-布罗克曼，1981；包豪斯，1919）用统一内边距与 8pt 基准建立秩序，用大小/字重/颜色/留白建立 F/Z 动线上的视觉层级；配色遵循 60-30-10、理解色相/明度/饱和度，并守住 WCAG 正文 4.5:1、UI 3:1 的对比度底线，且不让颜色成为唯一信息载体。高级感来自克制与全局一致，而不是堆叠。