审美工程 · 7 / 12 「好看」的一百种具体说法 你对 AI 说「好看一点」，它只能猜；你说「信息密度加一档、视觉噪音降下来」，它立刻知道该动哪里。这一节给你十二个能直接用的审美词、一套拆解一切视觉差异的八变量，外加一台把抱怨翻译成术语的机器。 审美词汇 八变量 正反案例 抱怨翻译 可复制速查 一句话速览 信息密度、视觉噪音、呼吸感、对比度层级…点选审美词汇看释义与正反案例。说得出名字，才指挥得动 AI 说不出名字，就改不对地方 「好看一点」交出去，AI 只能猜：猜你要加渐变，猜你要换字体，猜你要堆动效。「信息密度加一档，视觉噪音降下来」交出去，AI 立刻知道该动哪里：多放两组数据，砍掉一半徽章。 词汇是判断力的容器 ：装得下「视觉噪音」这个词，你才留得住「这页面哪里不对」的那个直觉。 审美词汇量，决定你能指挥 AI 做到的上限。
动手 · 八个词，一张张翻开
审美词汇卡组 0 / 12
点一张卡翻开释义和正反例，再点一次收起；十二张翻完有总结。
信息密度 视觉噪音 呼吸感 视觉层级 视觉重量 亲密性 对比度 基线对齐 HSV 有序变量 能供性 眯眼测试
信息密度 单位面积里装了多少有效信息。密度低是在浪费读者的屏幕；密度高但没层级，才叫挤。
✓ 正例 本周经营数据 10 月 14 日至 10 月 20 日 新增用户 1,284 付费转化 4.6% 客单价 ¥86 退款率 0.8% 一屏放下四组关键数据，每个像素都在干活。
✗ 反例 ✓ 本周经营数据 一切正常，无需担心 查看详情 一屏只说一句话，想看数据还得再点一次。
视觉噪音 与信息无关的装饰量。徽章、角标、分割线、多余的颜色，都是噪音。
✓ 正例 春季新品上架 第一波上新 24 件，全场包邮 限时 同样的信息，留一个徽章就够。
✗ 反例 HOT 春季新品上架 NEW 限时 第一波上新 24 件 包邮 爆款 直降 会员价 点击领 5 元无门槛券 徽章、角标、虚线塞满，信息没变，噪音翻倍。
呼吸感 内容和边界、内容和内容之间的空隙。空隙也是设计，挤掉它，内容会打架。
✓ 正例 账户安全 上次修改密码在 90 天前 修改密码 块与块之间留出空隙，眼睛有地方歇。
✗ 反例 账户安全 上次修改密码在90天前建议尽快更新密码保障账户安全 修改密码 绑定手机 138****0000 绑定邮箱 xiaoyu@mail.cn 元素顶着边贴着排，读起来喘不过气。
视觉层级 谁最重要，谁最显眼。字号、字重、颜色三根杠杆，一次只捧一个主角。
✓ 正例 3 月账单已出 共消费 ¥2,318 ，比上月少 12% 查看明细 一个主角、一个配角、一个动作，视线有路径。
✗ 反例 3 月账单已出！ 共消费 ¥2,318！ 比上月少 12%！！ 查看明细 每行都在喊，等于没有重点。
视觉重量 元素抢注意力的能力，由大小、颜色深浅、实心程度决定。重的名额要留给主操作。
✓ 正例 合计 ¥86.00 提交订单 继续逛逛 主操作实心、次操作描边，重量替你排好了优先级。
✗ 反例 合计 ¥86.00 提交订单 取消订单 两个按钮一样重，手一抖就点错。
亲密性 相关的靠近，无关的离远。距离本身就在传递分组信息。
✓ 正例 收件人 王小雨 收货地址 珠海市香洲区仓库街 12 号 3 栋 502 标签贴着自家输入框，组和组离远，不用读也知道谁管谁。
✗ 反例 收件人 王小雨 收货地址 珠海市香洲区仓库街 12 号 3 栋 502 间距处处一样，标签悬在两个框中间，归属要靠猜。
对比度 文字和背景拉开多少差距。灰得优雅和灰得看不清，隔着一条可读性的线。
✓ 正例 退款说明 签收后 7 天内可申请退款，运费由平台承担。 最近更新：2026 年 8 月 标题深、正文次深，关键信息一眼可读。
✗ 反例 退款说明 签收后 7 天内可申请退款，运费由平台承担。 最近更新：2026 年 8 月 浅灰叠浅灰，重要条款读着费劲。
基线对齐 元素的边缘落在同几条隐形直线上。对齐是免费的秩序感。
✓ 正例 通知设置 评论提醒 点赞提醒 系统消息 左缘都落在同一条线上，秩序感免费拿。
✗ 反例 通知设置 评论提醒 点赞提醒 系统消息 每行各起各的头，眼睛要不停找起点。
HSV 一个颜色拆成三个旋钮：色调 H 管它是什么颜色，饱和度 S 管它有多鲜艳，色值 V 管它有多深。About Face 4 建议设计师把三个旋钮分开考虑，跟 AI 调色也一样，按旋钮说，别整体抱怨「颜色不好看」。
✓ 正例 50 200 400 600 800 只动色值一个旋钮，深浅拉出层级，色调始终是一个。
✗ 反例
三个旋钮一起乱拧，五个色调打成一团，谁也压不住谁。
有序变量 取值天生分大小的视觉属性。大小、色值、位置有序，适合表达层级、数量、顺序；色调、形状无序，只能管分类。出自 Bertin《图形符号学》���About Face 4 沿用了这套判断。
✓ 正例 低 较低 中 较高 高 色值由浅到深，风险等级不用读字也排得出来。
✗ 反例 低 较低 中 较高 高 色调排不出顺序，哪档更危险要靠背口诀。
能供性 元素外观发出的「怎么操作我」信号。凸起、阴影、纹理都在说能点能拖；信号乱发，读者就会去点点不动的东西。About Face 4 提到纹理很少用来做对比，本职就是当能供性信号。
✓ 正例 保存设置 上次保存于 5 分钟前 能点的带按钮气质，纯信息安静躺平，信号各归各位。
✗ 反例 自动续费说明 会员权益一览 当前版本 3.2.1 每块都带阴影带边框，看着都能点，点了没反应。
眯眼测试 眯起一只眼看屏幕：谁还跳得出来，谁糊成一团，谁自动聚成一组。About Face 4 推荐的层级体检法，五秒钟做完，交稿前做一遍。
✓ 正例 8 月报表已生成 42 个项目按期交付，2 项异常待处理 查看报表 眯着眼标题和主按钮还在，层级过关。
✗ 反例 8 月报表已生成待查看 42 个项目按期交付完成 2 项异常等待处理确认 点击此处查看完整报表 糊成一片灰，谁重要看不出来，回炉。
十二个词都过了一遍。 它们的共同点：都指向能数、能量、能验证的东西。数据几组、徽章几个、间距几档、颜色几种，说到这个颗粒度，AI 才改得对。下次开口评界面，用这十二个词替换「好看」和「不好看」。
动手 · 八个变量，一间试衣间 上面的词管「怎么评」，下面这套变量管「怎么改」。Bertin 在《图形符号学》里把视觉编码拆成八个变量，About Face 4 沿用了这套清单： 形状、大小、色值、色调、饱和度、方向、纹理、位置 。界面上一切「看起来不一样」，拆到底就是这八个旋钮。同一排色块，动哪个变量，讲出来的故事就不一样。
八变量试衣间 0 / 8
点一个变量，看它怎么把一排一模一样的色块区分开；八个都试过有总结。
形状 大小 色值 色调 饱和度 方向 纹理 位置
现在五个元素一模一样，谁重要、谁一组、谁能点，都看不出来。挑一个变量动手。
形状 无序 圆的那个是「另一类」，但你得盯一会儿才找到它。形状靠轮廓传「是什么」，分辨它比分辨颜色和大小费注意力；想抢注意力别指望它，Dock 里点错图标就是这么来的。
大小 有序 · 可量化 不用教，你已经把它们从小到大排完了。大小天生带顺序，表达层级和数量最顺手；Bertin 提醒过它是解离属性，元素太大或太小时，形状这些变量会被它吞掉。
色值 有序 深浅对比人眼抓得最快，要突出谁就把谁加深。地图上颜色越深人口越密，不用图例也猜得到；表达强弱、密度、层级，先想它。
色调 无序 五种色调只能说「这是五类」，排不出谁先谁后。拿它表达顺序前先过两道关：色盲读者读不读得出来；红色在股市是卖、在春联上是喜，文化联想会背叛你。
饱和度 可量化 最鲜艳的自己跳出来，黯的往后退。鲜艳的名额只留一个：整排都鲜艳，就是 About Face 4 说的嘉年华效应，人人都在喊，等于没人说话。
方向 半有序 朝下那个说的是「跌」。方向能传涨跌、进退，但元素一小就看不清，当次要信号用；这里给它配了色值和色调，双保险。
纹理 能供性信号 条��那个像是能拖的把手。分辨纹理费注意力，少拿它做对比；它的本职是发操作信号：条纹说能拖，凸起说能按，扁平化时代少量用反而更好学。
位置 有序 挨在一起的四个是一伙，孤悬在右的那个是外人。位置天生有序：左上先被读到，距离近就是相关，分组和层级它都管，还免费。
八个变量都试完了，结论落三条。 要表达层级和数量，动大小、色值这些有序变量；要分类，才轮到色调，还得照顾色盲和文化联想；形状和纹理费注意力，一个管「是什么」，一个管「能不能按」。改界面前先问一句：我要传的是顺序，还是类别？
练一手 · 风险要排队
场景题：五档风险怎么画 单选
仪表盘要展示五档风险，从低到高一眼排得出来。该动哪个变量？
A 五种色调，绿黄橙红紫各占一档 B 同一色调，色值由浅到深排五档 C 五种形状，圆方三角各管一档 D 给高风险那档加一块纹理
视觉管类别，文字管身份 About Face 4 里有条压舱原则： 表明「是什么」用视觉属性，明确「是哪一个」用文字 。图标说到「这是份文档」就到头了，哪份是合同，得靠文件名接着说。两样各干各的活，谁也替不了谁。
视觉说到哪里停 二档切换
切一下，看视觉说到哪里停，文字从哪里接手。
只有视觉 视觉 + 文字
一季度采购合同.docx 供应商报价对比.docx 会议纪要 0811.docx
三个图标说完「都是文档」就没词了，想找合同只能挨个打开。
动手 · 把抱怨翻译成变量 客户和老板说不出术语，但他们的抱怨句句有所指。听懂抱怨背后的变量，改起来才有方向。先练四句最常听到的。
抱怨翻译机 0 / 4
先点左列一句抱怨，再点右列它对应的术语；配对正确会锁定。
客户的抱怨 「太乱了」 「显得廉价」 「重点不突出」 「太挤了」
翻译成术语 层级缺失 视觉噪音太高 留白不足 配色超预算
四句都翻译完了。 「乱」指向视觉噪音，「廉价」指向配色超预算，「不突出」指向层级，「挤」指向留白。客户的抱怨都能翻译成变量，先翻译，再动手，改得才有方向。
抄走这份速查表 八个词整理成了给 AI 用的句式，每句都能直接贴进 Prompt。复制一份存起来，下次改界面照着挑。
给 AI 的审美词汇速查 可复制
给 AI 的审美词汇速查（替换「好看一点」用）
信息密度：这一屏信息密度偏低，同屏多放两组关键数据。 视觉噪音：徽章和分割线太多，视觉噪音超标，装饰砍掉一半。 呼吸感：区块之间加大间距，留出呼吸感，内容别贴边。 视觉层级：标题和正文拉开字号与字重，一屏只捧一个主角。 视觉重量：主按钮保持实心，其余降成描边，压低视觉重量。 亲密性：标签贴紧自己的输入框，组与组离远，用距离表达分组。 对比度：正文和背景的对比度不够，灰字加深到可读级别。 基线对齐：所有元素左缘对齐同一条基线，别各起各的头。 HSV：调色分开说旋钮，色调、饱和度、色值，一次动一个。 有序变量：要表达从低到高，动色值或大小，别换色调。 能供性：能点的做出能点的样子，纯展示的别带按钮气质。 眯眼测试：交稿前眯眼看一遍，主角没跳出来就回炉。 复制速查表
练一题再走
场景题：没有高级感 单选
老板拿着你的页面说：「没有高级感」。按这一节的思路，先检查哪个？
A 换个贵的字体 B 数一数页面上有几种颜色、几种圆角 C 加动效 D 加深阴影
本节要点
✓ 「好看」是许愿，术语是指令： 说得出「信息密度」「视觉噪音」，AI 才知道往哪改。 ✓ 抱怨都能翻译成变量： 「太乱」是视觉噪音超标，「显得廉价」是配色超预算，翻译出来才改得对。 ✓ 八个变量各有分工： 层级和数量找有序变量（大小、色值），分类才用色调，形状管「是什么」，纹理管「能不能按」。 ✓ 下次让 AI 改界面，先从速查表挑一个词 写进 Prompt，跟「好看一点」的产出对比一次，感受差距。
内容来源： 小山学堂「审美工程」专题原创；部分设计原则整理自《About Face 4：交互设计精髓》第 17 章。