表现层 —— 视觉设计不是"好看"，是"有效"

本课导读

终于到了大楼的顶层——用户唯一"直接看见"的一层。也正因为人人看得见，它是最容易吵架、最容易被外行意见劫持的一层（"我老婆说这个蓝不好看"）。本课的任务是给你一套不靠美术功底的判断标准：视觉设计的评价问题不是"美不美"，而是"它有没有支持楼下四层定好的目标"。你会拿到三个立刻能用的工具：视线追踪自测、眯眼测试、一致性检查。预计 30 分钟。

评价视觉的第一问：视线往哪走

Garrett 给了一个朴素到惊人的标准：拿一个页面，问自己"我的眼睛第一眼落在哪？然后去了哪？"成功的视觉设计里，这条视线轨迹有两个特征：

1. 轨迹是流畅的——眼睛顺着一条清晰的路走：大标题 → 关键信息 → 行动按钮。失败的页面让眼睛"弹球"：到处都在喊"看我！"，等于哪儿都没看
2. 轨迹和目标一致——视线停靠的第一站、第二站，恰好就是楼下定的重点。电商详情页的视线该落在"商品图 → 价格 → 购买"上；如果最先抓住眼球的是一个闪烁的优惠券弹窗，视觉在给战略帮倒忙

引导视线的最大杠杆是对比：更大、更粗、更亮、颜色更突出、四周留白更多——都能把元素往视线前排推。对比的纪律是克制：什么都强调等于什么都没强调（一页三个"最重要"就是零个）。

一致性：视觉界的"惯例"

上两层反复讲的"尊重惯例"，在表现层叫一致性，分两个方向：

• 内部一致性：产品内部同一元素长一个样——所有主按钮同一个青色、所有报错同一个红、所有圆角同一个弧度。每处不一致都在悄悄提问"这个和那个是一回事吗？"，用户答不上来就流失一点信任
• 外部一致性：跟平台惯例走——iOS 用户期待返回在左上、Android 用户期待系统返回手势有效。你的产品是用户手机里几十个 App 之一，别当特立独行的转学生

内部一致性的工程化解法是设计语言/风格指南：把颜色、字号、间距、控件样式写成一份规范文档，此后所有页面照章办事。它还有个隐藏收益：新页面不用每次重新发明视觉决策，设计速度和质量同时上升——规格思维（范围层学的）在表现层的翻版。

配色与排版：两条不懂美术也能守住的纪律

不展开色彩理论（那是设计师的专业），只给两条零基础红线：

1. 颜色少而有含义：一套主色 + 一两个强调色足够。给颜色分配固定语义——青色 = 可点击/主操作，红色 = 危险/错误，灰色 = 次要——然后永不背叛这个约定。红色今天表示错误、明天表示打折，用户的条件反射就废了
2. 文字为读而排：正文字号别小于 16px（移动端更大）；行长控制在一行 20-35 个汉字（太长眼睛找不到下一行的开头）；行距至少 1.5 倍;正文与背景对比度要够（浅灰字配白底的"高级感"是以三成用户读不清为代价的）

品牌：视觉是战略层的回声

绕一整圈，顶层连回了地基：战略层写下的品牌识别（专业？亲切？极客？），最终就是靠表现层兑现的。微信多年不换的克制绿、无印良品的大留白、游戏 App 的高饱和撞色——都不是审美偶然，是"我是谁"的视觉翻译。所以评审视觉方案时，除了"视线对不对"，还要问一句"这套视觉说出来的性格，和战略层写的人设是同一个人吗？"高饱和荧光色的记账 App，等于在用视觉否定自己"稳健可靠"的人设。

到此五层走完。你现在拥有的不是五个孤立知识点，而是一条完整的决策链：为什么做 → 做什么 → 怎么组织 → 怎么摆放 → 什么样子——每一环都咬着上一环。

✍️ 练习

练习 1：给三个 App 做眯眼测试

挑三个常用 App 的首屏截图，分别缩小到拇指大（或眯眼看），记录：哪个色块最先跳出来？它是这个页面的核心任务吗？三个 App 里谁的"跳出元素"和"核心任务"对得最齐？

✅ 参考思路

常见结果模式：工具型产品（地图、支付）通常对得很齐——搜索框/付款码永远是视觉第一站，因为它们的商业模式就建立在"你顺利完成任务"上；内容+广告型产品常见"跳出来的是广告位"——这不一定是设计失误，而是战略层的商业目标（广告收入）压了用户任务一头，你正在用视觉层的证据反推它的战略层取舍。能做出这种"从楼顶看穿到地基"的分析，说明五层模型已经长在你眼睛里了。

练习 2：一致性巡检

打开你自己参与做的产品（或常用的小众产品），只查一件事：主操作按钮在各页面的颜色、形状、位置是否一致？红色在全产品里是否只有一种含义？列出你找到的不一致清单。

✅ 参考思路

高频病例：主按钮在 A 页是青色圆角、B 页是蓝色直角（多半是两次迭代各写各的样式）；"删除"是红字但"限时抢购"也是红字（红色语义被出卖了）；同一个"保存"动作，有的页面叫保存、有的叫提交、有的叫确认（这其实是命名一致性，病根在结构层的受控词表缺失——又一次症状在楼上、病灶在楼下）。修法就是风格指南：把决定写下来，以后照章办事。

📝 随堂测验

随堂测验0 / 5 题正确

1. 评价视觉设计的第一问是？

A美不美B视线往哪走——第一眼落点和移动轨迹是否流畅、是否恰好经过楼下定好的重点C用了几种颜色D是不是大厂风格

2. 眯眼测试检验的是？

A屏幕分辨率B细节糊掉后依然跳出来的色块，是否正是你想强调的核心任务元素C色盲兼容性D夜间模式效果

3. “红色今天表示错误、明天大促时表示折扣”的问题是？

A红色不好看B背叛了颜色的语义约定——用户对颜色的条件反射被摧毁，一致性受损C打印成本高D没有问题，灵活运用

4. 内部一致性的工程化解法是？

A每页找同一个设计师画B设计语言/风格指南——颜色字号间距控件写成规范，照章办事，速度与质量同升C全站只用黑白两色D抄大厂的界面

5. “高饱和荧光撞色的记账 App”最可能的问题是？

A费电B视觉性格与战略层品牌识别（稳健可靠）自相矛盾——表现层是战略层的回声，两层要说同一个人设C年轻人不喜欢D颜色越多越好

本课小结

• 视觉评价第一问：视线往哪走——轨迹流畅 + 与任务重点一致；杠杆是对比，纪律是克制
• 眯眼测试：糊掉细节看主次，检查跳出来的是否是你想强调的
• 一致性 = 表现层的惯例：内部靠风格指南，外部跟平台走
• 零基础两红线：颜色少而有含义（语义永不背叛）、文字为读而排（字号/行长/行距/对比度）
• 品牌是战略层的回声：视觉说出的性格要和战略写的人设是同一个人
• 五层决策链闭环：为什么做 → 做什么 → 怎么组织 → 怎么摆放 → 什么样子

下一课是收官的项目课：拿一个真实产品做完整的五层解剖，再给你自己的工作需求正向写一份五层设计文档——学以致用的时刻到了。