告别“AI 风”，精选 20 张对比图讲透 20 条设计军规

1. 一图速览：20 条设计军规

• 01 动手之前 · 定基调与起步策略：规则 01 定个性 ｜ 规则 02 别急着上色
• 02 视觉层级 · 克制使用大小，学会调配主次：规则 03 字号并非万能 ｜ 规则 04 弱化凸显 ｜ 规则 05 别用标签 ｜ 规则 06 按钮分级
• 03 空间与布局 · 留白做减法与拒绝过度拉伸：规则 07 过度留白 ｜ 规则 08 拒绝拉伸 ｜ 规则 09 间距亲疏 ｜ 规则 10 非等比缩放
• 04 文本与排版 · 把控行长、行高与基线对齐：规则 11 行长行高 ｜ 规则 12 基线对齐
• 05 色彩与无障碍 · 搭建实用色阶，兼顾识别度与对比度：规则 13 更多颜色 ｜ 规则 14 浅底深字 ｜ 规则 15 不只靠颜色
• 06 质感与图片 · 合理利用阴影与处理背景反差：规则 16 强调色边框 ｜ 规则 17 图片文字 ｜ 规则 18 适用尺寸
• 07 细节打磨 · 克制用线与做好空状态设计：规则 19 慎用边框 ｜ 规则 20 空状态

---

1.1. ｜ 缘起：当写代码不再是门槛，UI 成了做产品最大的痛点

一句话：写代码的门槛被 AI 抹平之后，UI 设计美感反而成了区分“玩具”与“真实商业产品”的坚固壁垒。

十几年前，移动互联网浪潮席卷而来，苏杰老师那本《人人都是产品经理》横空出世，在整个互联网行业掀起了一场思维启蒙。

那时候，无数怀揣改变世界梦想的人开始学着画原型、提需求、讲痛点、谈用户体验。然而，彼时横亘在每一个产品梦想面前最残酷的物理天堑，是代码工程——你想上线一款应用，必须拉起一个由 iOS、Android、前端、后端、数据库工程师组成的完整研发团队。成本高、周期长，“人人都是产品经理”往往止步于商业计划书和墨刀原型图。

一晃十多年过去，大语言模型横空出世，以 Claude Code、Codex、Cursor、v0 为代表的 AI 编码工具相继出现。Vibe Coding 这个词在 Andrej Karpathy 创造后，真正地“飞入寻常百姓家”。

在今天，“人人都是程序员”已经从一句口号变成了触手可及的现实。哪怕你一行代码都没系统学过，只要有清晰的想法，AI 就能在几分钟内帮你实现，甚至部署。曾经那座阻挡无数人的技术高墙，几乎被 AI 一夜夷平。

但是，一个新的痛点随之降临：AI 做出来的产品，功能能用，但界面很可能丑得让人无法接受。

AI 不会主动为你做克制的审美，不会主动运用格式塔心理学的视觉秩序，更不会主动为你设计“恰到好处的呼吸感”。

在信息过载的时代，用户打开一个新产品的耐心通常只有 3 秒钟。如果界面呈现出的是一股浓浓的“草台班子感”和“AI 塑料风”，哪怕你的底层算法再惊艳、功能再强大，用户的信任感也会在第一眼瞬间归零。

写代码的门槛被 AI 抹平之后，UI 设计美感，反而成了区分“玩具”与“真实商业产品”的最坚固壁垒。

很多开发者和产品人一聊到 UI，就会下意识叹气：“我天生没有艺术细胞”、“我没学过美术，搞不来”。

这也正是我写这篇文章最想替大家打破的思想钢印：在软件产品领域，UI 设计根本不是不可捉摸的玄学艺术，而是一套严密、理性、可工程化落地的视觉逻辑。

Tailwind CSS 创始人 Adam Wathan 与资深设计师 Steve Schoger 在设计神作《Refactoring UI》中，正是以纯程序员/工程学的理性视角，把 UI 设计拆解成了可计算、可度量、可建立规则的系统体系。

本文对照全书 8 章 50 篇正文材料，精选出经常用得上、能纠正常见误解、能迁移到所有产品的 20 条黄金设计军规。每一条都还原原著背后的真实场景与逻辑权衡，并配上一张一目了然的前后对比图。

既然写代码的难题已经被 AI 攻克，那就让我们把 UI 设计这块最后的拼图彻底补齐。本文抛砖引玉，建议大家通读全书并作为日常开发的 Visual Checklist，祝开卷有益！

1.2. ｜ 动手之前：定好风格基调与起步策略

一句话：动手前先定好基调，用字体、色彩、圆角与措辞塑造个性；先灰度后上色。

1.2.1. 规则 01：为你的设计选择一种个性

每一项设计都拥有某种独特的个性。一个银行网站可能会力求传达安全与专业的感觉，而一个新潮的初创公司则可能希望其设计让人觉得有趣又俏皮。

从表面上看，赋予设计某种特定个性听起来有些抽象，但实际上，这种个性在很大程度上是由几个具体因素决定的：

• 字体选择：如果你想营造优雅或古典的风格，可以在设计中加入衬线字体；要想获得俏皮的感觉，试试圆体无衬线；追求简约克制，中性的无衬线字体则是绝佳选择。
• 色彩倾向：蓝色给人稳妥又熟悉的感觉，金色往往象征“昂贵”与“精致”，粉色和明亮色系则多了几分趣味，显得不那么严肃。
• 边框圆角：小圆角风格相当中性；大圆角营造出活泼俏皮的感觉；完全不使用圆角（直角）则会营造出更严肃、更正式的氛围。
• 语言措辞：采用客观疏离的语气更官方专业，而友好随意的文案则让产品显得更加亲切。

无论你作何选择，在同一个界面里保持一致性都至关重要。在动手前先定好基调，随后的视觉决策才不会互相打架。

01 定个性：左边（严肃专业风格）深蓝稳重、衬线搭配、严谨字体与克制边框，传递安全感与信任；右边（俏皮亲切风格）明快色彩、饱满大圆角与随和口语措辞，营造轻松活跃的社交氛围。字体、色彩、圆角和措辞共同决定产品个性。

1.2.2. 规则 02：别着急上色

在设计新功能的最早期，关键在于不要过分纠结于字体、阴影、图标这类底层微观细节。这些细节最终当然都很重要，但绝不是在起步阶段。

即便你已经准备好进入更高保真度的阶段来优化某个想法，也要克制住立即引入色彩的冲动。

在灰度模式下进行设计，会促使你必须完全依靠间距、对比度、字重与尺寸来完成所有核心的设计工作。仅凭黑白灰，你必须清楚地交代出主次层级与信息的亲疏归属。

这样做虽然挑战稍大，但最终你会构建出一个更加清晰、层级分明的稳健骨架。后续再用色彩来强化关键操作与核心状态，效果就会水到渠成、轻而易举。

02 先灰度后上色：左边（灰度设计）克制引入色彩，仅依靠间距、字重与中性灰度拉开层次，排版骨架稳固自洽；右边（点睛上色）骨架完善后，仅在主要操作按钮与选中卡片上注入品牌主色，焦点清晰、干净利落。

1.3. ｜ 视觉层级：克制使用大小，学会调配主次

一句话：用字重与颜色而非字号来区分层级；通过“弱化”来凸显主角。

1.3.1. 规则 03：字号并非万能

过分依赖字号来区分内容的层级，是一种常见的误区。这往往会导致主要内容过大，而次要内容又太小，且版面容易显得单薄散乱。

与其只靠字号来承担区分层级的重任，不妨试试用字重和颜色来达到同样的目的：

• 用字重强调重点：将主要元素加粗（如 600 或 700），可以让你选用更合适克制的字号，同时依然能稳稳凸显其统摄地位；
• 用颜色弱化次要文字：对于辅助性文字，使用较浅的颜色（中灰或浅灰），而不是一味缩小字号。这样既能清晰地表明其从属地位，又能在最大程度上保证文字的易读性。

在通常的 UI 设计中，准备两到三种文字颜色（深色主内容、灰色次要内容、浅灰色辅助说明）搭配两种字重（常规 400/500、强调 600/700）就足够构建出细腻的层级了。避免使用低于 400 的过细字重，小字号下极难看清。

03 字号并非万能：左边（优化前）纯靠字号大小拉开层级，导致主标题过大膨胀、辅助文字过小难辨；右边（优化后）主标题加粗赋予深黑，次要文字适度缩小并降低明度，层级均衡温润。

1.3.2. 规则 04：反其道而行之：通过弱化来凸显重点

有时候你会遇到这样的窘境：界面的核心元素不够醒目，但你似乎已经用尽了所有方法，再也想不出什么新花样来强调它了。

举个例子，你可能尝试通过给当前选中的导航项换上高亮色彩，想让它“跳”出来，但跟旁边同样使用深色加粗的未选中项一比，它看起来还是不够突出。

每当遇到这种情况，与其一味地给目标元素“加戏”，不如换个思路，想想怎样才能弱化那些与之竞争的元素。

把未选中项的文字颜色调得浅一些、字重降为常规，让它们悄然退为背景。给周边喧闹的元素按下静音键，主角即便不施浓墨重彩，也会立刻成为视觉的焦点。

04 通过弱化凸显主角：左边（优化前）未选中的导航全部使用深色粗体，选中的“Orders”即便用了彩色也难以跳出；右边（优化后）将未选中的选项颜色调浅弱化，当前选中项瞬间成为视觉焦点。

1.3.3. 规则 05：不到万不得已，别用标签

先说明：这里讨论的不是表单，而是向用户展示数据时的界面。

向用户展示数据时，我们很容易不自觉地采用数据库式的“标签: 数据值”格式（例如“邮箱: [email protected]”）。这种做法的问题在于，它让所有数据都获得了同等的重要性，整个页面平摊权重，很难建立任何视觉上的层级感。

在很多情况下，我们仅凭数据的格式就能判断出它是什么：[email protected] 一看就是邮箱，(555) 765-4321 是电话，$19.99 显然是价格。即使无法凭格式判断，上下文也往往足够自明——在某人姓名下方看到“客户支持”，根本不需要“部门:”前缀也能明白。

省掉不必要的标签，将关键识别信息（如人名、标题）加大加粗置顶，能让界面瞬间变得干净利落。

当然，如果你是在做技术规格表或数据看板，用户需要通过寻找“厚度”、“功耗”等指标名来检索数据，此时不仅应该保留标签，还可以让标签颜色略深于数据本身。

05 删除冗余键值标签：左边（优化前）机械罗列 Name、Email、Phone 标签，所有字段平摊权重，笨拙死板；右边（优化后）去掉多余标签，名字加粗置顶，数据格式自明，信息层级干净洗练。

1.3.4. 规则 06：别让“语义”决定按钮样式

当一个页面上存在多个操作时，开发者很容易陷入一个陷阱：只根据操作的语义（semantics），也就是它本身的含义来进行设计，给每个按钮都套上醒目的高饱和实心填充。

但页面的操作应该遵循一个明确的重要性金字塔：大多数页面都只有一个核心的主要操作，一两个次要操作，以及几个很少用到的辅助操作。必须先通过视觉设计体现层级：

• 主要操作：最醒目，使用实心填充与高对比度背景；
• 次要操作：清晰但不过分突出，使用线框样式或低对比度浅色背景；
• 辅助操作：容易找到但绝不抢戏，通常设计成朴素的文本链接。

即使是具有破坏性或高风险的操作（如删除），如果它并非当前页面的主要任务，也应先设计成次要或辅助按钮样式。只在用户点击后弹出的确认对话框中，才把它升格为醒目鲜红的主要操作。

06 按钮按主次分级：左边（优化前）三个动作全部使用高对比度的实心按钮，并列排布互相抢戏打架；右边（优化后）按层级分级设计，主要操作实心高亮、次要操作线框、辅助操作纯文本链接。

1.4. ｜ 空间与布局：留白做减法与拒绝过度拉伸

一句话：从“过度留白”起步，别填满屏幕；用间距区分亲疏，小屏拒绝等比缩放。

1.4.1. 规则 07：从“过度留白”开始

想让设计变得更整洁清爽，最简单的方法之一，就是给每个元素多留出一点“呼吸”的空间。

在做界面时，我们平时的常规做法几乎总是为设计“加”留白——如果某个地方看起来太挤了，就稍微加一点外边距或内边距，直到看起来顺眼为止。

这种“加法”思路的问题在于，元素往往只获得了“不至于看起来太糟糕”所需的最小空间。而要想让设计真正出色，你通常需要多得多的留白。

一个更好的方法是反其道而行之：先给元素远超所需的空间，然后再慢慢收紧减少，直到你对结果满意为止。

在实践中你会发现，当你聚焦于单个元素时感觉“有点多”的留白，放到整个用户界面的大背景下，效果往往是“刚刚好”。

07 从过度留白开始：左边（优化前）内边距与间距紧凑逼仄，内容紧贴卡片边框，呼吸感极差；右边（优化后）先给足充裕留白再适度收紧，内容松弛舒展，品质感跃然而出。

1.4.2. 规则 08：不必非得填满整个屏幕

还记得 960 像素曾是桌面设计的事实标准宽度吗？如今我们在高分辨率显示器上打开设计工具，起手就会创建一个 1200 到 1400 像素宽的画布。但请记住：拥有空间，不代表你就必须用满它。

如果你只需要 600 像素的宽度来展示表单或内容，那就只用 600 像素。刻意拉伸布局、把元素做得过宽，不仅不会显得大气，反而会让界面稀疏散乱、难以阅读。

在屏幕边缘留出一些额外的留白总是有益无害的。不要仅仅因为导航栏是全宽的，就把界面里的所有区块都强行撑满。

如果你觉得在宽大的画布上直接设计一个小尺寸界面束手无策，不妨先缩小画布（例如从 400 像素左右的移动端宽度开始设计）。当你对小界面的紧凑布局满意后，再将它放入大屏幕，或者通过分栏将辅助信息拆分到侧栏。给每个元素它真正需要的空间就好。

08 拒绝过度拉伸宽度：左边（优化前）表单元素机械撑满整个屏幕宽度，输入框横向过度拉伸，阅读与操作体验极差；右边（优化后）根据内容需求约束最大宽度，表单紧凑聚合，阅读与输入极为舒适。

1.4.3. 规则 09：间距的“亲疏”之别

如果用边框或背景色把几组元素明确分开，它们各自的归属关系就一目了然了。但如果没有这类明确的视觉分割，元素之间的关系就很容易变得模糊不清。

假设你正在设计一个标签和输入框纵向排列的表单。如果标签下方的间距，和输入框下方的间距完全一样，那么标签和对应的输入框之间就缺少了一种显而易见的“归属感”。用户需要费力辨认，甚至可能把信息填错地方。

同样的问题也常常出现在排版中：如果章节小标题离上一段文字的距离，和离下一段文字的距离一样近，标题就无法明确归属于下文。

请记住一条黄金法则：**当你需要用间距来组织元素时，组与组之间的间距，一定要大于组内元素之间的间距。**增大模块之间的间隔、收紧同组元素之间的距离，无需添加任何辅助线条，内容的归属感就会瞬间变得清晰自明。

09 间距的亲疏之别：左边（优化前）标签与输入框间距、输入框与下一组间距完全均等，归属关系模糊割裂；右边（优化后）缩紧组内距、拉开组间距，信息结构逻辑绑定一目了然。

1.4.4. 规则 10：等比缩放并非总是有效

我们很容易想当然地认为，界面中的所有元素都应该按固定的比例进行缩放。比如大屏幕上正文是 18px、标题是 45px（2.5 倍），于是很自然地用 2.5em 来定义标题大小，以为这样能保证在所有设备上比例一致。

然而，当你在移动端为了保证合适的行长把正文缩小到 14px 时，如果标题仍然按 2.5em 缩放，就会算出 35px——这在手机屏幕上显得过于庞大、笨拙且极易折行撑爆屏幕。

在小屏幕上，一个更合适的标题字号可能是在 20px 到 24px 之间（仅为正文的 1.5 到 1.7 倍）。

这意味着一个基本原则：**在大屏幕上尺寸越大的元素，缩放到小屏幕时，其缩小的比例也应该越大。**大元素和小元素之间的尺寸差距，在小屏幕上应该被主动收敛。抛开“万物皆需等比缩放”的执念，给各个元素独立微调的自由，你的移动端设计才会自然舒适。

10 手机端非等比缩放：左边（优化前）移动端机械套用桌面端 2.5em 相对比例，标题 35px 巨大拥挤、两行撑爆屏幕；右边（优化后）打破等比缩放执念，小屏标题独立收敛至 20-24px，整体比例和谐自然。

1.5. ｜ 文本与排版：把控行长、行高与基线对齐

一句话：行高与行长协同、与字号反向；不同字号沿基线对齐而非居中。

1.5.1. 规则 11：控制文本行长，动态适配行高

在设计文本样式时，很多人喜欢在全局 CSS 中写死一个 line-height: 1.5，然后任由文字容器随意铺满屏幕。

但实际上，行高与行长是紧密联动的。行间距的核心目的，是为了帮助读者在读完一行后轻松折返回下一行的开头。行长越长，读者的视线需要水平跳跃的距离就越远，如果行间距过小，就极易读错行或串行。因此，行高应该与行长成正比：较窄的文本段落可以用 1.5 左右，而较宽的段落可能需要高达 1.8 甚至 2.0 的行高。

与此同时，行高与字号大小成反比。小字号的文本需要充足的行距来引导视线；但当字号变大（如大标题）时，字面本身已足够清晰醒目，若仍套用 1.5 的行距，标题就会松散脱节、形如散沙。对于大尺寸标题，行高收紧到 1.1~1.2 往往效果最好。

控制段落行长在每行 45 到 75 个字符（约 20 到 35em），并让行高随行长和字号动态调整，是保证舒适排版阅读的基础。

11 行长与行高协同：左边（优化前）文本横跨整个大屏未做约束，行长过长且行间过密，换行极易读错行；右边（优化后）段落宽度约束在 45-75 字符黄金区间，行高与行长协同适配，阅读平稳流畅。

1.5.2. 规则 12：以基线对齐，而非居中

在设计中，我们经常需要在同一行里使用不同大小的文字。比如卡片头部左侧是大号标题，右侧是小号辅助操作（如“查看全部”或时间戳）。

当一行中出现不同大小的文字时，很多人的第一反应就是写一个 align-items: center 垂直居中，以求几何上的平衡。

如果文字之间离得很远，这种问题还不显眼；但当它们挨得很近时，不协调感就会暴露无遗——小字看起来像是孤零零地漂浮在空中或下沉悬挂，非常别扭。

更专业的做法是让它们沿着文字的**基线（baseline）**对齐。所谓基线，就是所有字母仿佛都“坐”在上面的那条隐形横线。人类的阅读视线早已习惯顺着这条基准线平移。改用 align-items: baseline，文字的视觉重心立刻稳稳落地，整体呈现出更规整、更严谨的美感。

12 不同字号基线对齐：左边（优化前）几何绝对居中（align-items: center），不同字号混排时小字视觉上悬空错落；右边（优化后）沿字母隐形基线平齐对齐（align-items: baseline），视觉底盘扎实稳健。

1.6. ｜ 色彩与无障碍：搭建实用色阶，兼顾识别度与对比度

一句话：搭一套远超五色的色阶；用“浅底深字”兼顾对比，别只靠颜色传信息。

1.6.1. 规则 13：你需要的颜色，远比想象中更多

你是否也用过那种在线调色板生成器？只要选定一个初始颜色，微调几个选项，它就会“赐予”你一套看似完美的五色方案，号称足够用来搭建整个网站。

这种通过算法生成的“五色方案”听起来极具诱惑力，但实际上根本没办法用来做真实产品——除非，你希望自己的界面看起来就像左边那样灾难：满屏刺眼的大黄底、突兀的深红报错条、生硬的深蓝侧边栏……把这区区 5 个颜色生搬硬套到所有组件上，页面会立刻变成毫无层级的车祸现场。

只靠五个十六进制颜色码，你什么像样、舒适的东西都做不出来。要想搭建一个真实、克制的高级界面，背后往往依赖一套远比这更庞大的色彩系统：

• 中性灰色系（8~10 档）：界面中的绝大多数元素（文本、主背景、面板底色、细边框、表单控件）本质上都是灰色的。从极深的近黑文字，以均匀步长过渡到柔和近白，你需要 8~10 种不同深浅的灰色，确保总能找到最舒适的对比度；
• 品牌主色（5~10 档）：用于核心操作按钮、激活态导航等，决定产品的整体气质。其中极浅色用于轻量背景，深色用于文字，基准色用于按钮；
• 语义强调色（各 5~10 档）：红（报错/破坏）、黄（预警/提示）、绿（成功/正向）、青或紫（新功能）。即使它们在界面中只是画龙点睛，也需要准备好由浅到深的色阶。

一个成熟的 UI 系统，包含十种不同颜色、每种各有 5~10 个色阶是极其常见的。唯有备齐完整的色阶梯队，浅底才不会抢戏，深字才不会发虚，界面才能呈现出呼吸般的自然层次。

13 你需要的颜色远比想象中更多：上方（色彩方案对比）左边是在线生成器给出的孤立 5 色方案，右边是预先规划的完整色阶系统（Primary/Neutral/Accents 梯队）；下方（实操落地结果）左边生搬硬套 5 色导致界面刺眼混乱，右边按需调配丰富色阶，呈现呼吸般的高级秩序。

1.6.2. 规则 14：无障碍不一定难看：巧用“浅底深字”

为了保证界面的可读性，Web 内容无障碍指南（WCAG）建议普通文本与背景的对比度至少达到 4.5:1。

在“白底黑字”的常规页面上这很容易实现。但当你需要为标签（Badge）、警告框等彩色小组件设计样式时，事情就变得棘手起来了。

很多人的习惯是在彩色背景上放白色文字。但你会惊讶地发现，为了让白色文字达到 4.5:1 的合规对比度，彩色背景往往需要调得非常深、非常暗。如果这个小标签只是一个普通的辅助状态，深色的高饱和背景就会在页面上极其“抢戏”，硬生生破坏了整个页面的主次视觉层级。

解决这个问题的一个绝佳技巧是**“反转对比”**：与其在深色背景上放浅色文字，不如反过来，在浅色背景上使用深色的彩色文字（例如浅黄底配深金棕字，浅红底配暗红字）。这样不仅保留了色彩所承载的语义与强调作用，而且柔和舒适，绝不会喧宾夺主干扰页面的主要功能。

14 浅底深字提升对比：左边（优化前）使用深色高亮背景标签，虽然对比达标但视觉过于刺眼，抢占主要内容视线；右边（优化后）采用“浅底深字”（反转对比），对比度大幅提升（达 AAA 级）且柔和融入界面。

1.6.3. 规则 15：不要只靠颜色传递信息

颜色无疑是强化信息、辅助理解的绝佳工具，但千万要避免过度依赖它。否则，对于有色觉障碍（如红绿色盲）的用户，或者在屏幕反光、弱光环境下，界面的状态传达就会彻底失效。

比如在财务或数据卡片中，如果仅仅依靠红色文字表示下跌、绿色文字表示上涨，对红绿色盲用户来说，两者看起来几乎毫无差别。

要解决这个问题其实非常简单：增加另一种信息传递的维度。在颜色之外，加入向上的箭头、向下的三角、勾选框或警告感叹号等图形符号。双通道传达意味着即使完全剥离颜色，用户只看图标也能毫不费力地读懂状态。

请记住一条准则：颜色应该始终作为辅助工具，用来强化设计本身已经传达的信息；绝不应将其作为信息传递的唯一手段。

15 不只靠颜色传递状态：左边（优化前）仅靠红绿文字颜色区分涨跌，色盲或弱光环境下状态极难识别；右边（优化后）增加方向箭头与图标符号，双重通道确保信息百分之百送达。

1.7. ｜ 质感与图片：合理利用阴影与处理背景反差

一句话：用强调色边框添彩；图片上的文字先处理背景；图标与截图各守适用尺寸。

1.7.1. 规则 16：用强调色边框为设计添彩

如果你不是平面设计师，该如何给你的用户界面增添一抹亮色，让它也能像那些拥有精美摄影或多彩插图的设计一样，充满视觉吸引力呢？

有一个简单却效果显著的技巧：就是在那些看起来有些平淡乏味的界面元素上，添加一道彩色的强调色边框（Accent Border）。

比如，在原本素净的卡片顶部加上一条彩色条；或者用来高亮当前选中的导航项；或者沿着提示信息框的侧边画一道亮线；甚至可以放在整个页面布局的顶部。

在界面上加一个彩色矩形，并不需要什么专业的设计天分，但这个小小的举动，却能打破单调的大面积白色，为平庸的卡片赋予视觉重心与层次感，让你的作品瞬间看起来更有“设计感”。

16 强调色边框为设计添彩：左边（优化前）平淡乏味的常规白卡片，缺乏视觉重心与活力；右边（优化后）仅在卡片顶部添加一道亮丽的彩色强调色边框，瞬间增添视觉吸引力与设计感。

1.7.2. 规则 17：图片上的文字，需要稳定的对比度

你是否曾有过这样的经历：想在网站首页那张醒目的主视觉图（Hero Image）上放一行文字标题，结果试遍了各种颜色，文字却怎么都看不清楚？白色文字在亮处隐形，黑色文字在暗部融为一体。

其实，问题不在文字，而在那张背景图片本身。真实的摄影照片具有极复杂的动态光影反差，单靠调整文字的字号或颜色，根本无法在每个像素点上都维持稳定的对比度。

解决这个问题的关键，是将治理重心转移到背景上：

• 叠加半透明深色蒙版：在图片和浅色文字之间垫一层半透明黑色遮罩（如 rgba(0, 0, 0, 0.4~0.6)），压暗背景高光；
• 降低图片对比度：直接抚平背景图原有的剧烈明暗反差；
• 叠加品牌单色：对图片去色并使用“正片叠底”（Multiply）混合模式，不仅解决了文字辨识度，还能让画面与品牌色调高度和谐；
• 添加柔和的文字光晕阴影：加大文字阴影的模糊半径，且不设置偏移，在文字轮廓边缘局部提升反差。

17 图片文字先处理背景：左边（优化前）文字直接覆盖在光影复杂的背景照片上，高光暗部交错导致文字看不清；右边（优化后）在背景图上叠加一层半透明深色蒙版，抚平光影反差，文字边缘清晰利落。

1.7.3. 规则 18：万物皆有其适用尺寸：切勿随意缩放

我们都知道将位图放大是不可取的，图片会立刻模糊失真。但在缩放矢量图标和截图时，也常常会踩入另一个陷阱。

比如在落地页上，你需要一个大尺寸图标，很多人的第一反应是直接把 24px 的 SVG 放大到 64px——“反正矢量图放大不糊嘛”。然而，专为小尺寸设计的图标线条在放大后会显得极其笨拙粗壮、缺乏细节，比例严重失调。正确的做法是：让小图标保持其 24px 的自然大小，外层包裹一个带浅背景色的圆形或圆角矩形容器来填充空间，既撑起了大布局，又保持了精致感。

同样，展示产品后台时，切勿把一张完整的大网页截图强行缩小 70% 塞进小卡片里，文字会变成看不清的蚂蚁线。更聪明的做法是只截取核心交互局部，或者绘制一个略去细枝末节的简化 UI 示意图。

万物皆有其适用尺寸，不要盲目等比拉伸。

18 图标与截图适用尺寸：左边（优化前）以为矢量图放大不失真，直接把 24px 小图标强行拉大到 64px，比例失调且笨拙粗壮；右边（优化后）保持小图标自然尺寸，外包一层带浅底色的圆形容器填充空间，比例协调精致。

1.8. ｜ 细节打磨：克制用线与做好空状态设计

一句话：慎用边框，多用底色与留白；别忽视空状态，它是用户的第一印象。

1.8.1. 规则 19：慎用边框

当需要区分两个相邻的元素或列表时，请先克制住自己，别急着画上一条 1px 的灰色边框。

边框固然是区分元素的有效手段，但滥用边框会让整个界面布满网格线，切得细碎拥挤，宛如一张噪点爆炸的 Excel 电子表格。

在画线之前，先试试更高级柔和的替代手段：

• 利用背景色差：页面大底使用微灰（如 ##f8fafc），卡片使用纯白（##ffffff），两者仅凭底色微差就能自然区隔，根本无需多画边框；
• 拉开留白间距：直接拉大两组元素之间的距离，留白本身就是最好的分割线；
• 巧用微弱阴影：让卡片轻微浮起，边缘的柔和阴影自然就勾勒出了轮廓。

核心不是绝对禁用边框，而是“克制”——如果背景差或留白已经足够说明归属，就果断删掉多余的线条。

19 慎用边框巧用留白：左边（优化前）习惯性给每个区块和列表套用 1px 灰色实线边框，线条密集切割碎裂；右边（优化后）彻底移除多余边框，仅凭柔和的背景底色微差与自然留白分区，清爽利落。

1.8.2. 规则 20：别忽视了“空状态”的设计

想象一下：你为一款新功能花费了大量心血，用完美的模拟数据拼凑出一个精美酷炫的界面。功能顺利部署上线后，一位满怀期待的新用户点了进来——结果由于没有数据，他看到的只是一个孤零零的空白卡片或光秃秃的表格线框，甚至不知道该点哪里。

如果你的功能依赖用户生成内容，那么“空状态”就应该被优先设计，而不是事后才想起的补救措施。

一个优秀的空状态应该做到两点：

1. 提供清晰的行动号召（CTA）：加入友好的插画或图标吸引注意力，并突出核心操作按钮（如“创建你的第一个项目”），明确告诉用户下一步该做什么；
2. 隐藏无关的空壳控件：在用户创建第一条内容之前，把标签页、多维筛选器、排序按钮等毫无用处的辅助控件暂时隐藏起来，避免界面显得凄凉简陋。

空状态是用户与新功能的第一次接触，让它变得生动友好、目标明确，才能激发用户探索的动力。

20 空状态设计指引下一步：左边（优化前）冷冰冰的“No contacts found”，用户面对空白无所适从、甚至以为系统卡死；右边（优化后）友好插画配温暖文案，辅以醒目的“+ Add contact”行动按钮，清晰指引下一步。

1.9. 💡 总结：把 UI 当作一门工程学来重构

一句话：没有一条规则依赖与生俱来的“艺术天分”，设计直觉是刻意练习形成的条件反射。

看完这 20 条设计原则，你会发现一件有趣的事：没有任何一条规则依赖与生俱来的“艺术天分”。

• 先灰度后点睛上色，本质上是解耦骨架排版与视觉渲染的工程分层；
• 亲疏法则与基线对齐，本质上是格式塔心理学与阅读生理学的忠实体现；
• 巧用强调色边框，本质上是用最小视觉代价建立焦点的注意力工程；
• 浅底深字与多通道传达，本质上是信息工程的容错与无障碍覆盖。

正如《Refactoring UI》的作者们所强调的：优秀的“设计直觉”并非天赋，而是大量刻意练习后形成的条件反射。

如果你想真正把这套知识内化为自己的武器，建议在日常中践行两项极简练习：

1. 日常拆解与建库：浏览网页或使用优秀 App（如 Linear、Stripe、Raycast）时，每当被某个细节触动，随手截图保存。尝试用本文的 Checklist 追问自己：它的标题字重是多少？组间距是组内距的几倍？它的提示框为什么清晰却不扎眼？
2. 像素级复刻练习：挑出一个打动你的精美卡片或表单组件，不要直接 Inspect 源码，而是自己动手用 HTML/CSS 尝试 1:1 复刻还原。在一次次间距微调与对比度权衡中，你会真正体会到顶尖设计高手的思考逻辑。

永远记住：相信你的眼睛，而不是死记数学公式。 规则是帮助你起飞的跑道，而真正决定产品生命力的，是你对真实用户体验的细致体察与克制追求。