这本书回答一个让无数 PM/工程师沮丧的问题:我没有艺术天赋,能不能也做出像样的 UI? 答案是能。Adam Wathan 和 Steve Schoger 的核心论点是:好看不是玄学,是一堆能背下来的具体规则——什么时候加留白、灰色要分几档、阴影怎么打、按钮怎么分级。你不需要"有品味",你需要一份清单。
全书的元方法只有一句话:把每个让你反复纠结的小决定,提前变成系统(system)。"这里用 12px 还是 13px?""阴影透明度 10% 还是 15%?"——这些纠结不是设计,是浪费。先定好一组固定选项,以后只从里面挑。本篇就是把这套系统按主题重组成八章 + 三个实战拆解:
一、开局心法(怎么起步,怎么不把自己绕进去) 二、视觉层级(让重要的先被看到——全书的地基) 三、留白与间距(空间感比内容更决定专业度) 四、配色系统(为什么你需要的颜色远比想象多) 五、字体排印(选字体、排文字的可照做规则) 六、深度与阴影(让界面有立体感) 七、图片处理(照片、图标、用户上传内容) 八、收尾打磨(从"能用"到"好看"的最后一公里) 九、三个 before/after 实战拆解(把前八章串起来用)
与 NNGroup 视觉设计原理·格式塔分组·视觉层次·排版·色彩·图像(19 篇 · 五大视觉原则/格式塔接近-相似-闭合-共同区域/视觉层次-网格-黄金比例/字体术语-搭配-阅读字体/色彩60-30-10/图片优势效应-照片-意象/美学-可用性效应/术语表) 互补:那篇讲"为什么"(认知科学 + 原理),这篇讲"怎么做"(具体到像素的操作)。同一个主题(层级/格式塔/配色)两篇对照看最扎实。
一、开局心法(Starting from Scratch)
刚开始设计一个新功能时,最容易掉进的坑是"先想布局"和"想太多"。这一章是动手前的思维校准。
1.1 从功能入手,不要从布局入手
心法:不要从"导航放顶部还是侧边、logo 放哪、要不要容器"开始,而是从一个具体功能开始(比如"搜索航班":出发地、目的地、日期、搜索按钮就够了)。Why:布局是用来"装功能"的空架子,功能没定就画布局,等于凭空想象——容易做出一堆冗余页面(以为要"个人中心/收藏/设置/消息",其实只有"设置"需要独立页),还会因信息不足反复重做(画完"创建项目"入口才发现项目有两种类型、流程完全不同)。
| 场景 | ❌ 错误起手 | ✅ 正确起手 |
|---|---|---|
| 新建一个 app | 先纠结导航形式、内容区宽度 | 先挑一个核心功能,把它需要的输入框/按钮列出来 |
| 心态 | 一开始就追求完整的页面框架 | 快速画草图/线框图理清思路,定了方向就扔掉,别在此阶段花太多时间 |
1.2 细节稍后再说 + 先不上色
心法:早期别陷进字体、阴影、图标这些细节。Why:细节会偷走你对"结构是否成立"的注意力。两个反陷阱技巧:
- 用记号笔在纸上画(Basecamp 创始人 Jason Fried 的方法):粗笔根本没法纠结小细节,反而能快速试多种布局。
- 先只用黑白灰(Hold the color):逼你靠间距、对比、尺寸这些基本功把层次做出来。结构清晰之后,上色是"锦上添花",非常容易;反过来,用颜色掩盖结构问题则掩盖不住。
1.3 不要过度设计:循环工作 + 做悲观主义者
心法:先做能跑的基础版,上线后用真实反馈再完善。Why:想一次做完美,常常导致什么都做不出来。
- Work in cycles 循环工作:设计功能的最简版 → 实现 → 迭代到满意 → 再做下一个功能。
- Be a pessimist 做悲观主义者:只设计你"现在就能做出来"的功能。反例:做评论功能时顺手把"上传附件"加进设计,结果附件太复杂做不完,连基本的评论都没交付。一个简陋的评论功能也好过一片空白。
1.4 限制选择 + 把一切系统化(全书的元规则)
心法:选项太多反而瘫痪。"12px 还是 13px、阴影 10% 还是 15%、头像 24px 还是 25px"——这些差别肉眼几乎看不出,却让你做不出自信的决定。解法:提前定好有限的一组值,以后只从里面选。Why:把"无限连续的纠结"变成"有限选项里的排除法",决策从痛苦变轻松。
排除法选值(process of elimination):比如图标只允许 12 / 16 / 24 / 32px 四个值。先选一个看着顺眼的(16px),再和左右邻居(12、24)对比——通常一眼就能排掉明显不对的,中间那个就是答案;如果某个邻居更好,就以它为新基准继续比。只在几个明显不同的选项里挑,比在连续区间里调容易得多。
该系统化的清单(凡是你经常要花时间想的,都做成固定规则):字号 / 字重 / 行高 / 颜色 / 外边距 margin / 内边距 padding / 宽 / 高 / 阴影 / 圆角 / 边框粗细 / 透明度。不必一开始全定好,关键是养成"能不能把这个变成规则"的思维习惯,避免重复纠结同一个小问题。
1.5 选一种"性格"(Choose a personality)
心法:每个设计都有性格(银行=专业可靠,创业公司=有趣活泼),而性格由几个具体可控的因素决定,不是抽象玄学:
| 因素 | 怎么影响性格 |
|---|---|
| 字体 Font | 衬线=优雅经典;圆角无衬线=活泼可爱;中性无衬线=简约 |
| 颜色 Color | 蓝=安全可靠,金=高档,粉=活泼。选色信自己的感觉 > 研究色彩理论 |
| 圆角 Border radius | 小圆角=中性;大圆角=活泼;无圆角=正式。选一种就全程一致,别混用 |
| 文案语气 Language | "谢谢您,Benson 先生…" vs "太好了呢,谢谢你 Steve!"——用语对性格的影响比颜色字体还大 |
不知道选什么性格? 看你的用户平时用什么风格的网站,跟着走。借鉴别人的点子可以,但别整套照抄竞品。
二、视觉层级(Hierarchy is Everything)
全书最重要的一章。一句话:让设计好看的头号秘诀,跟"装饰"无关,是 visual hierarchy 视觉层级——让页面上不同内容呈现出不同的重要性。 如果所有东西都一样醒目,就像一面贴满纸的墙,没人知道该看哪。把次要的压下去、重要的提上来,即使颜色/字体/布局都不变,设计立刻就清晰了。
2.1 字号不是一切(Size isn't everything)
心法:只靠字号区分层级会出事——重要的字太大、次要的字太小,都难看。除了字号,还要动字重和颜色。Why:多一个维度,就不用把字号推到极端。
| 维度 | 推荐规则(可直接抄) |
|---|---|
| 颜色(2-3 档) | 深色=重要(标题)· 灰色=次要(日期)· 浅灰=最不重要(页脚版权) |
| 字重(2 档) | 普通 400/500=大部分文字 · 粗体 600/700=需要强调处 |
| ❌ 别这么做 | 想弱化某段文字时,不要用更细的字重(<400)——细字体只适合大标题,字一小就糊。要弱化就调颜色或字号 |
2.2 彩色背景上不要用灰字(Don't use grey text on colored backgrounds)
心法:白底上用浅灰字来弱化文字 OK;但彩色背景上灰字会出问题。Why:白底配灰字本质是"降低文字与背景的对比",换到彩色背景上,灰色只会让字显脏。
| ❌ 做法 | ✅ 做法 |
|---|---|
| 彩底上直接放灰字 | 选一个和背景同色系的颜色,微调它的明度和饱和度,直到看着舒服 |
| 白字 + 降低透明度(opacity) | 透明度会让字发暗发褪色、像不可点;背景若是图片/图案还会透过来更乱 |
2.3 想突出重点,先弱化次要(Emphasize by de-emphasizing)
心法:有时重点已经够大够显眼了还是不跳——这时别再往重点上加东西,反过来把周围的次要内容压淡。Why:对比是相对的,降低背景噪音 = 提升信号。
- 例:选中的导航项改了颜色还是不够突出 → 把没选中的那些调淡、靠近背景色,选中项自然就跳出来了。
- 例:侧边栏太抢戏盖过主内容 → 去掉侧边栏的背景色,让它融进页面背景。
2.4 标签是最后手段(Labels are a last resort)
心法:展示数据时少用"标签:数值"这种结构。Why:它让所有信息看起来一样重,突不出重点。
| 场景 | 做法 |
|---|---|
| 数据本身能说明身份 | 直接省掉标签——janedoe@example.com(邮箱)、$19.99(价格)、人名下的"客户支持"(岗位),靠格式和上下文就懂 |
| 数据需要点解释 | 把标签和数值揉成一句自然语言:"库存:12" → "库存仅剩 12 件";"卧室:3" → "3 间卧室" |
| 仪表板里大量相似数据 | 确实需要标签,但标签是配角:做小一点、淡一点、细一点,让数值当主角 |
| 信息密集的规格页(用户找特定项) | 例外:用户找"厚度"时是先扫这个词再看"7.6mm",所以标签可以醒目些,但数值也别太淡 |
2.5 视觉层级 ≠ 文档层级(Separate visual from document hierarchy)
心法:HTML 的 h1–h6 标签是给机器和无障碍读屏用的语义结构,不该决定视觉大小。Why:h1 默认很大,你会不自觉地把"账户管理"这种标题做得过大,破坏设计。
- 很多标题其实更像"内容的小标签",真正重要的是标题下面的内容,标题往往应该做小。
- 为了无障碍/SEO,可以在代码里保留标题标签,但在视觉上完全隐藏它。
- 一句话:选 HTML 标签是为了表达含义,显示样式你随便调。
2.6 平衡权重与对比(Balance weight and contrast)
心法:为什么粗体更显眼?因为同样空间里像素更多(占的"墨"更多)。这个"视觉重量 vs 对比度"可以互相补偿——这是处理图标的关键技巧。
| 情况 | 手法 |
|---|---|
| 图标(尤其实心)放在文字旁太抢眼 | 降低对比度:用更浅的颜色给图标减重,大小不变但看着轻了 |
| 浅色元素太弱(如 1px 浅色边框看不见) | 增加重量:把边框加粗一点,既看得见又保持柔和,好过直接换深色(太刺眼) |
2.7 功能含义是次要的(Semantics are secondary)
心法:设计按钮时别只想"它是什么功能",先想它在这一页的重要级别。每页的按钮分三级:
| 级别 | 数量 | 样式 |
|---|---|---|
| 主按钮 Primary | 通常只 1 个 | 最显眼:实心 + 醒目颜色 |
| 次按钮 Secondary | 可能几个 | 看得到但不抢:描边 outline 或浅色背景 |
| 辅助按钮 Tertiary | 按需 | 最低调:做成普通文字链接的样子 |
危险操作不必又大又红:如果"删除"不是这一页的主功能,就把它做成次按钮甚至文字链接。等用户真的点下去时,再用确认弹窗 + 醒目红色按钮来郑重提醒。把红色留给"即将发生"的时刻,而不是常态。
三、留白与间距(Layout and Spacing)
主题:空间感(留白 white space)往往比内容本身更决定一个界面专不专业,而它恰恰最容易被忽略。
3.1 从"过多的留白"开始(Start with too much white space)
心法:留白应该是被删出来的,不是被加出来的。 多数人的做法是:先把内容堆上去,挤了再一点点加空隙到"还行"——但这只给了内容最低限度的呼吸空间。Why:好设计需要的留白,通常比你直觉以为的多得多。
- 正确做法:一开始就给大量留白,然后慢慢往回收,直到满意。你以为"太空了"的留白,放到整体里看往往刚刚好。
- 例外:紧凑(dense)UI 有它的位置——仪表板要在一屏塞很多信息时,适当牺牲留白是合理的。但要有意识地牺牲,而不是默认就挤。通常人更擅长判断"何时该减留白",而非"何时该加"。
3.2 建立间距/尺寸系统(Establish a spacing and sizing system)
心法:别在 120px 和 125px 之间反复横跳。Why:既浪费时间,又让设计不协调。
| 要点 | 说明 |
|---|---|
| ❌ 线性阶梯不够用 | "全是 4px 倍数"这种规则没法帮你在 120 和 125 之间选。关键是相邻值之间的比例 |
| 小尺寸 vs 大尺寸 | 小尺寸(图标/内边距)差几像素影响很大:12→16px 等于 +33%;大尺寸(卡片宽)差几像素几乎看不出:500→520px 只 +4% |
| ✅ 经验法则 | 相邻两档至少差 25%,选起来才容易 |
| 起点 | 以 16px 为基准(好算,且是多数浏览器默认字号),向两边扩;小尺寸间隔密,越大间隔越疏 |
收益:在浏览器里直接敲值时更快、试两个相邻值就能定、整体更协调。
3.3 避免歧义间距(Avoid ambiguous spacing)
心法:用间距来分组时,组与组之间的间距必须明显大于组内的间距。 Why:没有边框/底色时,人完全靠间距判断"谁和谁是一组"。
| 反例(歧义) | 后果 |
|---|---|
| 表单里"标签↔输入框"的间距 = 两组之间的间距 | 用户分不清哪个标签配哪个框,看着累,甚至填错 |
| 文章标题上方留白不足 | 标题像是黏在上一段尾巴上 |
| 列表项之间的间距 = 行高 | 分不清哪几行是同一项 |
解法都一样:把"组间距"加大。
3.4 网格被高估了(Grids are overrated)
心法:12 列网格能帮你快速规划,但别迷信它——不是所有元素都该用百分比流式(fluid)宽度。Why:网格的核心是百分比宽度,而很多元素有它"最舒服的固定宽度"。
| 元素 | ❌ 网格百分比的问题 | ✅ 更好的做法 |
|---|---|---|
| 侧边栏(如固定占 25%) | 大屏上太宽浪费、小屏上太窄挤坏文字 | 给侧边栏固定宽度,主内容区吃掉剩余空间 |
| 登录框(如占 6 列=50%) | 中等屏上反而比大屏更宽(因为是按百分比) | 知道它最佳宽度是 500px 就直接写 500px,只在屏幕真的太小时才让它变窄 |
一句话:只在你确实希望元素随屏幕缩放时才用百分比,否则用固定值。
3.5 相对尺寸不会等比缩放(Relative sizing doesn't scale)
心法:不要让所有元素按同一比例放大缩小。 Why:在大屏上成立的比例,搬到小屏上会失调。
| 例子 | 桌面 | 手机 | 教训 |
|---|---|---|---|
| 正文 vs 标题 | 正文 18px,标题 45px(2.5 倍) | 正文若降到 14px,标题按 2.5 倍=35px 太大;实际 20-24px(1.5-1.7 倍)才对 | 屏幕变小时,大元素要缩得更多,小元素缩得更少,免得大小差距过大 |
| 按钮内边距 | 字 16px,左右 padding 16px,上下 12px | 等比放大/缩小技术上可行但不最佳 | 大按钮的内边距相对更大、小按钮相对更小,大的更突出、小的更紧凑 |
3.6 不必填满整个屏幕(You don't have to fill the whole screen)
心法:大屏(1200-1400px)有空间不代表必须用完。Why:把内容无谓地铺太开反而难用,适当留白更好。
- 600px 够用就用 600px;别因为导航栏是全宽,就把所有内容也拉成全宽。每个元素只取它需要的空间。
- 缩小画布技巧:做响应式时先用手机尺寸(约 400px)设计,再放大到大屏——你会发现要改的地方其实不多。
- 分栏思维:想让窄内容(如窄表单)在宽屏上更好看,把说明文字放到旁边一栏,而不是简单加宽表单本身。
四、配色系统(Working with Color)
主题:你需要的颜色,远比那些"输入 1 个色给你 5 个完美配色"的工具给的多。 一个功能完整的网站通常需要约 10 种颜色,每种再有 5-10 个深浅档。
4.1 用 HSL,别用 hex(Ditch hex for HSL)
心法:hex(#3490dc)和 RGB 对人不直观——相近的颜色码完全不像。改用 HSL(色相/饱和度/亮度),三个值都对应人能理解的概念。
| HSL 维度 | 含义 | 关键点 |
|---|---|---|
| H 色相 Hue | 颜色种类(0°红 / 120°绿 / 240°蓝),一个色环 0-360° | —— |
| S 饱和度 Saturation | 鲜艳程度,0%=灰,100%=最鲜艳 | 饱和度为 0 时色相无意义(都是灰) |
| L 亮度 Lightness | 明暗,0%=黑,100%=白,50%=最纯 | —— |
HSL vs HSB:设计软件里常见的是 HSB,但浏览器只认 HSL,做网页就用 HSL。
4.2 你需要的颜色比想象多 + 预先定义色阶(Define your shades up front)
一套实用调色板的构成:
| 类别 | 数量 | 用途 |
|---|---|---|
| 灰色 Greys | 8-10 档 | 文字、背景、边框、次要按钮/链接——界面主体 |
| 主色 Primary | 1-2 个,每个 5-10 档 | 主按钮、导航、链接;决定品牌识别(想到 Facebook=蓝) |
| 辅助/语义色 Accent | 按需,可达 ~10 种 | 红=危险、黄=警告、绿=成功、亮色=新功能;图表/标签区分用 |
怎么造一组色阶(以一个主色为例):
- 先选基准色(base):挑一个适合做按钮背景的中间调,看效果别抠数值。
- 找两端:最深的(给文字用)和最浅的(给背景用)——参考"警告框=深字+浅底"来定边界。
- 填中间:用 9 档,编号 100-900(900 最深 / 500 基准 / 100 最浅)。先补 700 和 300,再补 800/600/400/200。
- 灰色同理,但基准色不重要,重点是定好最深(文字)和最浅(背景)两端再填中间。
别用 CSS 自动算明暗(如
darken()):会产生一堆相似的近色,系统就废了。配色不是纯数学——可以拿这套方法起步,实际用时相信眼睛去微调,但克制住"随手加新颜色"的冲动,否则系统形同虚设。
4.3 灰不一定是纯灰(Greys don't have to be grey)
心法:纯灰=完全不带其他颜色,但生活里大多数"灰"其实带点色温。Why:带色温的灰更有质感、更协调。
- 想偏冷:灰里掺一点蓝;想偏暖:掺一点黄/橙。
- 从浅灰到深灰都要掺同一种色,否则色调不统一会显脏。
4.4 别让亮度杀死饱和度(Don't let lightness kill your saturation)
心法:颜色调得特别亮或特别暗时,会显得不那么鲜艳(中等亮度时最艳)。解法:调亮/调暗的同时,也把饱和度往上提一点,保住活力。在大色块上尤其重要。
感知亮度(perceived brightness):黄和蓝技术亮度相同,但人眼觉得黄更亮——每种颜色天生有自己的明暗感。色环上红/绿/蓝看起来偏暗,黄/青/品红看起来偏亮。
靠转色相来提亮/压暗(防止发灰):直接调 L 亮度,颜色容易发白发灰失去生气。更好的办法是微调色相往最近的亮色或暗色靠:
- 想变亮 → 往最近的亮色相靠:60°(黄)/ 180°(青)/ 300°(品红)。例:L 不变,把 H 从 210 调到 190(靠青)就提亮了,还不发灰。
- 想变暗 → 往最近的暗色相靠:0°(红)/ 120°(绿)/ 240°(蓝)。例:黄色想压暗,往橙色方向调,显得温暖自然而非灰暗。
- 色相微调别超过 20-30°,否则就像换了个完全不同的颜色;可以和调亮度结合使用。
4.5 无障碍不等于丑(Accessible doesn't have to mean ugly)
心法:WCAG 对比度要求——正文(<18px)需 4.5:1,大字需 3:1。浅底深字很容易达标,彩色时才棘手。两个保美感又达标的技巧:
| 技巧 | 做法 |
|---|---|
| 翻转对比(Flipping the contrast) | 彩底配白字要达标常得把背景调得很深、太抢眼。反过来:浅色背景 + 深色文字,既保留颜色存在感又不喧宾夺主 |
| 旋转色相(Rotating the hue) | 深色块上选次要文字颜色时,光调明度/饱和度很难在"不接近白"的前提下达标。换个天生更亮的色相(青、粉、黄),兼顾美观与可读 |
4.6 不要只依赖颜色(Don't rely on color alone)
心法:颜色是锦上添花,不能是唯一的信息载体。 Why:色盲用户分辨不了(尤其红绿)。
| 场景 | ❌ 只靠颜色 | ✅ 加冗余线索 |
|---|---|---|
| 数据涨跌卡片 | 红/绿区分涨跌 | 颜色 + 向上/向下箭头 |
| 多线折线图 | 每条线不同颜色 | 改用深浅(明度)区分——色盲看明暗比看色相容易得多 |
五、字体排印(Designing Text)
5.1 建立 type scale(字号阶梯)
心法:别让字号在 10-24px 之间随意散布(没规范的团队常这样)。定一组固定字号。Why:随意字号=既乱又费时。
| 方法 | 评价 |
|---|---|
| 模块化阶梯(modular scale,如黄金比 1.618) | 不推荐用于界面:会算出 31.25px 这种小数(浏览器渲染不一;真要用就取整);而且界面常需要公式之间的中间值,太死板 |
| ✅ 手挑(hand-crafted) | 直接手动挑一组合适的整数值——没有小数问题,完全按实际需要,不被公式绑架。和间距系统配合用 |
单位:别用 em,用 px 或 rem。 em 是相对父元素的,会层层叠加失控(父级 1.25em=20px,内部再 0.875em 就成了 17.5px,脱离规范)。
5.2 用好字体(Use good fonts)
不需要长年经验也能快速筛出好字体:
| 招 | 做法 |
|---|---|
| 保守起手 | 拿不准就用系统默认字体栈(用户早已习惯,实用):-apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue |
| 按字重数量筛 | 忽略字重少于 5 种的字体;在 Google Fonts 上按字重筛,选至少 10 种样式(含斜体)的——字重多通常意味着做得用心 |
| 看易读性 | 正文字体要小写字母够高(x-height 大)、字间距宽;标题字体则字间距紧、小写矮。选正文别用小写太矮的 |
| 随大流 | 受欢迎的字体通常是好字体,尤其选有个性的衬线字体时,看使用率排名能避坑 |
| 偷师 | 用开发者工具看你喜欢的网站用了什么字体——它们背后有专业团队 |
5.3 控制行长(Keep your line length in check)
心法:每行 45-75 个字符(中文更短)。Why:行太长读着容易跳行/读重复。
- 网页上用 em 设宽度最方便(随字号自适应),正文容器约 20-35em。
- 偶尔超 75 字符可以,但尽量别。
- 页面里有宽图/宽内容时,正文段落仍保持适中宽度——同页多种宽度乍看奇怪,实际更专业。
5.4 行高是成比例的(Line-height is proportional)
心法:"行高 1.5 最好"只是起点,要按行宽和字号双向调整。Why:行高帮眼睛从一行末尾找到下一行开头。
| 变量 | 规则 |
|---|---|
| 行越宽 | 行高越大(最大可到 2)——长行更容易找错下一行 |
| 行越窄 | 行高可越小 |
| 字越小 | 行高越大(小字更需要呼吸) |
| 字越大(标题) | 行高越小(最小可到 1) |
5.5 基线对齐,不要居中(Baseline, not center)
心法:同一行里有不同大小的文字(如大标题 + 小按钮),用基线对齐(baseline,文字底部那条隐形线),不要垂直居中。Why:基线对齐符合我们平时阅读的习惯,离得近时比居中整齐得多。
5.6 为可读性选对齐(Align with readability in mind)
| 对齐方式 | 用在哪 |
|---|---|
| 左对齐 | 中英文长文本的默认——最易读 |
| 居中 | 只用于短文本(标题),别用于长段落;文字太长时应该把内容改短而不是硬居中 |
| 数字右对齐 | 表格里数字右对齐,小数点对齐,方便比大小 |
| 两端对齐 justify | 适合正式场合(电子杂志);必须开启断字(hyphenation),否则字间会出现大空隙;左对齐其实也很好,看个人喜好 |
5.7 不是每个链接都要上色(Not every link needs a color)
心法:正文里夹的链接要让人看出可点;但整页大部分都是链接时,别个个都做得很抢眼。Why:满屏高亮等于没有高亮,还分散对真正重点的注意。
- 普通做法:加粗一点或颜色深一点就够了。
- 次要链接:只在 hover(鼠标悬停)时才显下划线/变色——需要的人能找到,平时不干扰。
5.8 用好字间距(Use letter-spacing)
心法:默认信字体设计师的判断,但两种情况该手动调:
| 情况 | 调整 | 为什么 |
|---|---|---|
| 用正文字体做标题 | 收紧字间距 | 正文字体(如 Open Sans)为小字可读而设计,字间距偏宽;收紧后更像专门的标题字体。反过来:别把标题字体放大当正文用,也别给标题加宽间距 |
| 全大写文本(all-caps) | 加宽字间距 | 大写字母都一样高、缺少小写那种 n/v/e/y/g/b 的高低变化,默认间距下难分辨;加宽能提可读性 |
六、深度与阴影(Creating Depth)
主题:让界面有"凸起/凹陷/悬浮"的立体感,核心只有一条物理规则。
6.1 模拟光源:光从上方来(Emulate a light source)
心法:假设光永远从正上方照下来,据此打高光和阴影,大脑就会自动判断元素是凸是凹。Why:这是现实世界门板、插座给我们的本能直觉。
| 想做成 | 上边缘 | 下边缘 | 补充 |
|---|---|---|---|
| 凸起(按钮) | 更亮(顶部高光,稍向下偏) | 更暗 + 下方加一道边缘清晰的小阴影(像窗框投影) | 高光手动选亮色,别用半透明白(会冲淡原色) |
| 凹陷(输入框/复选框) | 顶部加一点阴影(上沿挡光),稍向下偏、不到底 | 底边更亮 | —— |
别玩过头:学会模拟光源后容易沉迷调到极度逼真。记住界面第一位是清晰易用,有点立体感即可,不必拟真。
6.2 用阴影表现高度(Use shadows to convey elevation)
心法:阴影越大越虚 = 元素离你越近 = 越吸引注意。建一套固定 5 档阴影(先定最小和最大,中间补 3 档渐变)。
| 元素 | 阴影 | 含义 |
|---|---|---|
| 按钮 | 小阴影 | 略微突出 |
| 下拉菜单 | 中阴影 | 更易被看到 |
| 弹窗 modal | 大阴影 | 立刻抓住视线 |
配合交互:拖动列表项时加大阴影=被抬起;点按钮时减小阴影=被按下。重点不是阴影本身,而是先问"这个元素该多突出",再选对应档位。
6.3 阴影分两层(Shadows can have two parts)
心法:好看的阴影常是两个阴影叠加,各有分工:
| 层 | 特征 | 模拟的是 |
|---|---|---|
| 大阴影 | 大而柔、向下偏移多、边缘模糊 | 阳光在物体后方的自然投影 |
| 小阴影 | 小而深、向下偏移少、边缘清晰 | 物体正下方光照不到的暗影 |
Why:分两层比一层更可控(大的可以很轻柔,边缘的小阴影可以很锐利)。离表面越远,正下方那道暗影越淡(拿桌上东西试就懂)——所以元素抬得越高,这套双阴影整体越淡。
6.4 扁平设计也能有深度(Even flat designs can have depth)
扁平 = 不模拟真实光影,但仍能造深度感,只是换手法:
| 手法 | 做法 |
|---|---|
| 用颜色 | 浅色显得近、深色显得远:想让元素凸出就比背景浅,想凹进就比背景深 |
| 实色阴影(solid shadow) | 用一道短、向下、边缘清晰不模糊的阴影,让卡片/按钮轻浮于页面,既保扁平风又有层次 |
6.5 重叠元素造层次(Overlap elements to create layers)
心法:最简单的立体感=让元素互相重叠。
- 让卡片错开跨过两个不同背景的分界线,而不是规规矩矩放在某一块里。
- 让某元素比它的容器更高,在上下两边都形成重叠。
- 轮播图的按钮控件压在图上也是这个套路。
- 图片重叠小心乱:给图片加一圈和背景同色的"隐形边框",制造一点小空隙,看着就整齐了。
七、图片处理(Working with Images)
7.1 用好照片(Use good photos)
心法:一张差照片能毁掉整个设计,哪怕其他都做得好。不擅长拍照就:
- 找专业摄影师(好照片靠用光/构图/配色的功力,不只靠贵相机)。
- 或用高质量素材库(Unsplash 有免费精品)。
- 千万别用临时照片占位、想着"之后用手机随便补拍替换"——行不通。
7.2 文字需要一致的对比度(Text needs consistent contrast)
心法:大图上放标题,无论文字什么颜色都难读——问题在图不在字。Why:照片明暗反差大,白字在亮处消失、深字在暗处看不清。解法是压低图片的动态范围:
| 方法 | 做法 |
|---|---|
| 加半透明遮罩(overlay) | 黑遮罩压暗高光、帮浅色字;白遮罩提亮暗部、帮深色字。整体记得顺手调一下亮度更自然 |
| 给图片单色化(colorize) | ①降明暗对比 ②降饱和度 ③叠一个纯色图层用"正片叠底" → 文字更清晰且贴合品牌色 |
| 文字发光(text shadow) | 想保留图片原有明暗时,给文字加柔和光晕(大模糊、不偏移),而非明显投影;有了它对比度就不用压太狠 |
7.3 每个元素都有它的最佳尺寸(Everything has an intended size)
心法:别随意放大或缩小——图标、截图、logo 各有设计目标尺寸。
| ❌ 别做 | 后果 | ✅ 解法 |
|---|---|---|
| 放大小图标(16-24px 的 SVG 放大 3-4 倍) | "矢量放大不掉质量"是错觉——会显粗糙、比例失调 | 把小图标放进一个带背景色的形状里填满空间,图标本身保持原尺寸 |
| 缩小截图(大图压到 70%) | 里面的文字小到要凑近屏幕才看清 | ①直接用平板尺寸截图 ②只截最重要的部分 ③画简化版界面图,只留主结构 |
| 把 128px 大 logo 缩成 16px favicon | 模糊 | 专门重画一个简化版小图标 |
7.4 当心用户上传的内容(Beware user-uploaded content)
心法:用户上传的图你没法像自己的图那样随意调色裁剪,但能约束它的"容器":
| 问题 | 解法 |
|---|---|
| 图片大小不一,页面乱 | 放进固定尺寸的显示框、居中;CSS 用 background-size: cover |
| 图片颜色和页面背景太近,边界看不清 | 别加边框,用淡淡的内阴影(inner shadow)——自然到很多人注意不到;或用半透明细边框 |
八、收尾打磨(Finishing Touches)
主题:这些是从"能用"到"好看"的最后一公里,大多不需要任何美术功底。
8.1 少用边框(Use fewer borders)
心法:想分隔两个元素,别一上来就加边框——边框多了显乱。三个更柔和的替代:
| 替代 | 说明 |
|---|---|
| 用阴影 box-shadow | 比边框柔和,元素与背景不同色时尤佳 |
| 用两种背景色 | 给两块设稍不同的底色就能区分;已经用了不同底色就把边框删掉 |
| 加大间距 | 最简单——拉开空白距离,又清晰又干净 |
8.2 让默认样式更出彩(Supercharge the defaults)
不加新东西,只升级现有元素:
- 列表项的圆点 → 换成小图标(对勾、箭头,或贴合内容的图标如安全功能配小锁)。
- 用户评价的引号 → 放大、换色,当视觉元素用。
- 链接 → 改色+加粗,或加一条鲜艳、略盖住文字的下划线。
- 表单 → 把默认复选框/单选按钮换成自定义样式,选中色用品牌色,立刻显精致。
8.3 用彩色强调边框点缀(Add color with accent borders)
心法:一招几乎零门槛提质感——在普通区块上加一条彩色边框线:卡片顶部 / 当前导航项 / 提示消息侧边 / 整个页面顶部(如 6px 彩条)。不需要设计经验,一条线就让界面立刻精致。
8.4 美化背景(Decorate your backgrounds)
布局排版都好但仍显单调时,简单装饰背景:
- 换背景色:最简单,可突出重点或区分内容区。
- 渐变:选两个相近的颜色效果最好。
- 重复花纹(如 Hero Patterns):不用铺满,边角放一点就好看;花纹颜色要接近背景,免得压住文字。
- 简单图形/插图:空白处放一两个圆/方,或淡淡的世界地图;图形颜色都要淡,不干扰阅读。
8.5 重视空状态(Don't overlook empty states)
心法:空状态(empty state)是新用户第一次见到这个功能的样子,别用一片空白应付。 Why:开发时你用真实数据做了漂亮 demo,但新用户进来啥都没有。
- 给空状态配一张吸引人的图 + 一句引导文案,告诉用户下一步该做什么。
- 还没有内容时,先把那些筛选/标签等操作按钮藏起来——现在点也没用,只添乱。
8.6 跳出常规框框(Think outside the box)
心法:别被组件的"标准长相"框死,规则之外有空间:
- 下拉菜单不必是一列带阴影的白底链接——可以分类、多栏并排、加说明文字和彩色图标。
- 表格不必每列一个数据项——不需要排序的内容可以把相关列组合成更清晰的层次,加图片、用颜色突出重点。
- 单选按钮不必是圆圈——可以做成卡片式选择。
九、进阶提升(Leveling Up)
持续变强的两个习惯:
- 找出"你自己不会那么做"的决定:看到喜欢的设计就问"这里有什么我没想到的巧思?"(如日期选择器用了特别的背景色、把按钮塞进输入框里面、标题用两种字色)——这些反常规选择就是可偷的好点子。
- 重建你喜欢的界面:动手复刻欣赏的作品,是看懂"高手为什么这么做"的最好方式。坚持研究 + 实践,设计力会持续进步。
—— Adam Wathan & Steve Schoger
十、三个实战拆解(Before → After)
前九章是零件,这三个案例是把零件装到一起。每个都是一张普通 Bootstrap 默认样式页面,不改结构、只调排版/层级/配色,就变专业。
10.1 内容页(一个大会宣传页)
要点串讲:
- 可读性:行长 45-75 字符、容器 20-35em;正文行高 1.4-1.7(字大行高小、字小行高大);用三档颜色分层(主=深 / 次=中灰 / 辅助法律声明=浅灰)。
- 字体:标题用 display 字体(轻字重显优雅),正文换更有特色的字体(开发者工具偷师别人)。
- 接近性:"时间地点"贴紧标题;"适合谁参加"标题贴紧它的列表。
- 列表:项间距设为字号的 2 倍;圆点换成相关小图标。
- 引用语:换衬线字体(Georgia)显可信、加斜体显口语;引号放大彩色当视觉元素;名字加粗 + 头像 + 品牌色。
- 输入框:它是全页唯一动作,要放大;下半部背景改淡灰突出它;边框换阴影(带垂直偏移模拟上方光源)。
- 灰调:给灰掺一点蓝(深灰更蓝、浅灰保对比)显冷显现代。
- 零美术提质感:顶部加 6px 彩条。
- 移动端:字号不等比缩(标题别太大);输入框和按钮垂直堆叠。
10.2 复杂表单(SaaS 设置页)
要点串讲:
- 可读性:背景改淡灰让白输入框跳出;字段分组(账号/资料/套餐支付/通知)每组加一句说明;别太宽——用两栏(左说明、右输入)。
- 输入框:高度提到 48px 更舒服;换新的下拉箭头图标;加大字段间距防混淆。
- 按钮三级分:主(保存,最显眼)/ 次(改头像,描边)/ 辅助(取消订阅,文字链接)。
- 套餐选择:单选按钮改卡片式——大字突出重点(存储空间)、淡色弱化重复信息、hover/选中加边框+对勾。
- 支付区:建层级(卡号大而黑、有效期小而淡);用一个内嵌容器把这块包成整体,免得"更新"按钮显孤立。
- 通知区:说明文字调小调淡;复选框换成和全站一致的圆角风格、选中用主色。
- 底部操作:上方加分隔线表示"全表单的结尾";按钮右对齐、主操作放最右(像翻书从左到右推进)。
- 移动端:双栏改单栏;套餐卡片纵向排、价格移右;提交按钮做全宽,主操作在上、次在下。
10.3 数据面板(发票仪表盘)
要点串讲:
- 概览区:标题栏背景改白、概览区背景改深蓝、文字反白带轻微渐变;缩小概览与标题间距让它们成一体。
- 标签 vs 数值:数值是重点——标签做小号大写+调淡;深色背景上的次要文字别直接用灰,而是从背景色"调亮"出来(对比不够时还可微调色相偏青)。
- 按钮:别抢数据的戏——换黑色半透明小按钮、全圆角、加箭头图标、风格统一。
- 最近发票卡片:靠上下文省标签(加货币符号就知是金额);日期用"3 天前"相对时间;金额用字号/颜色突出;状态用色(黄=待处理 / 红=逾期 / 绿=已付);整卡可点,按钮浅色背景延伸到卡片底部。
- 表格:包进圆角容器和卡片统一;内容左对齐、金额按小数点对齐;加大行距留呼吸感;少用边框,改用斑马纹(隔行变色);表头用小号淡色字别喧宾夺主;次要内容小号淡色,日期用"3 天后"。
- 全局:少边框(改浅灰底+阴影);阴影用垂直偏移(模拟顶部光源)更自然;灰掺蓝;字体弃系统字体(跨系统显示不一)改 Google Fonts 流行无衬线(如 Proxima Nova),筛"8 个字重"的。
- 移动端:12 栅格改上下堆叠;导航收进汉堡菜单;表格做横向滚动(给截断提示)或只留"客户名+金额+状态"三项。
附:速查参考(笔记里附带的资源页)
源资料还含三份"打开即用"的资源页,本篇不逐图搬运,只记其结构供需要时回查原档:
| 资源页 | 是什么 | 怎么用 |
|---|---|---|
| Color Palettes 调色板 | 大量成品配色板,分主色 Primary / 中性色 Neutrals / 辅助色 Supporting 三类(对应第四章 60-30-10 思路) | 主色=最醒目(按钮/链接/导航/强调边框);中性=界面主体(文字/背景/边框/次按钮);辅助=谨慎用(语义色:错误/积极趋势) |
| Font Recommendations 字体推荐 | 按 Headlines 标题 / Articles 正文 / Application UI 应用界面 三类场景给字体搭配示范图 | 不同场景照着挑字体组合 + 字重/字号搭配 |
| UI Components Glossary 组件术语表 | 中英对照的 UI 组件 + 交互状态 + 动效术语大全(按钮/输入/导航/容器/反馈/数据展示/布局/表单/手势/动效缓动…) | 和工程/AI 对话时对齐黑话:主按钮 primary button、骨架屏 skeleton screen、慢进慢出 ease-in-out、空状态 empty state… |
这三页配套的是 Refactoring UI 官方资源(原书附带的调色板、字体推荐、组件库截图),原始图片保留在 sources,本篇不嵌入。
源自 will-design-notes / Refactoring UI(Adam Wathan & Steve Schoger,中英混排笔记全集)。与 NNGroup 视觉设计原理·格式塔分组·视觉层次·排版·色彩·图像(19 篇 · 五大视觉原则/格式塔接近-相似-闭合-共同区域/视觉层次-网格-黄金比例/字体术语-搭配-阅读字体/色彩60-30-10/图片优势效应-照片-意象/美学-可用性效应/术语表) 对照看:本篇=可照做的具体技巧,那篇=背后的认知科学原理。大量 before/after 视觉对比图与官方资源截图(调色板/字体推荐/组件库)保留在 sources,因路径含空格且已 gitignore,未嵌入本 wiki。