2、视觉感知与设计：格式塔原理、视觉层次、色彩心理学、视觉动线
好，咱们进入第二个大块。视觉感知，说白了就是研究「用户第一眼看到什么，以及怎么理解它」。
我做了这么多年UI，发现一个残酷的事实：用户根本不会「读」你的设计，他们只会「扫」。你花三天打磨的细节，用户可能0.3秒就划过去了。所以，理解视觉感知的底层规律，比学一百个设计工具都重要。
2.1 格式塔原理：用户为什么「看错」？
格式塔心理学，听起来很学术。其实核心就一句话：人的大脑会自动把零散的元素，组织成一个整体。
我记得刚入行时，带我的老大哥跟我说：「别跟用户的直觉对着干。」我当时不懂，后来踩坑多了才明白——你设计得再合理，如果违背了用户的视觉本能，那就是白搭。
2.1.1 接近性原则
距离近的元素，会被视为一组。这个最简单，也最常用。
实战案例：我在做后台表格时，曾经把操作按钮（编辑、删除、复制）放得离每行数据很远。结果用户老点错行。后来我把按钮紧贴着该行数据放，误操作率直接降了60%。
2.1.2 相似性原则
长得像的东西，会被归为一类。颜色、形状、大小，都可以用来建立「组」。
举个例子：你打开一个设置页面，所有开关控件都用绿色表示「开」，红色表示「关」。用户根本不用看文字，扫一眼颜色就知道状态。这就是相似性的力量。
2.1.3 闭合性原则
人的大脑会自动补全缺失的部分。这个在图标设计里特别常见。
你想想看，那个经典的「设置」齿轮图标，其实只有几个缺口，但没人会认成别的。为什么？因为大脑自动把缺口补上了。
我的建议：别把图标画得太满。留点空白，让用户自己去「脑补」，反而更有识别度。
2.1.4 共同命运原则
往同一个方向运动的元素，会被视为一组。这个在动效设计里特别重要。
我曾经做过一个列表页，删除某条数据时，其他数据会「抖动」一下。用户反馈说「感觉整个页面都要崩了」。后来改成：被删除的项淡出，其他项平滑上移。用户就觉得很自然。为什么？因为只有被删除的项在「动」，其他项保持静止——共同命运原则被打破了。
2.2 视觉层次：让用户「先看哪，再看哪」
视觉层次，说白了就是信息的优先级排序。你希望用户第一眼看到什么？第二眼看到什么？最后看什么？
我见过太多设计，把所有内容都做得一样大、一样粗、一样鲜艳。结果就是——用户什么都看不到。
2.2.1 大小与权重
最重要的内容，用最大的字号、最粗的字体。这是最直接的层次手段。
避坑指南：我曾经在一个活动页面上，把标题做得特别大，副标题也很大，正文也很大。结果用户说「不知道重点在哪」。后来我狠心把正文缩小了两个字号，标题突出，转化率反而提升了。记住：什么都突出，等于什么都不突出。
2.2.2 颜色与对比度
高对比度的元素会「跳」出来，低对比度的元素会「退」回去。
我习惯用「主色-辅色-中性色」三层体系：
| 层级 | 用途 | 对比度建议 |
|---|---|---|
| 主色（高对比） | CTA按钮、关键数据、错误提示 | 7:1以上 |
| 辅色（中对比） | 标题、导航、次要操作 | 4.5:1左右 |
| 中性色（低对比） | 正文、背景、分割线 | 3:1以下 |
2.2.3 间距与留白
留白不是浪费，是呼吸。间距越大，元素越「独立」；间距越小，元素越「相关」。
嗯，这里要注意：很多新手设计师喜欢把间距做得均匀。其实不对。你应该让相关内容的间距小，不相关内容的间距大。这样用户一眼就能看出「哪些是一伙的」。
2.3 色彩心理学：颜色不只是好看
颜色是有情绪的。这不是玄学，是生理反应。
我做过一个实验：同一个按钮，蓝色背景的点击率比绿色背景高了12%。为什么？因为蓝色传递「安全、信任」，绿色传递「完成、通过」。用户对「信任」的点击意愿，远高于「完成」。
2.3.1 常见颜色的心理暗示
| 颜色 | 心理暗示 | 常见场景 |
|---|---|---|
| 蓝色 | 信任、专业、冷静 | 金融、医疗、科技 |
| 红色 | 紧迫、热情、警告 | 促销、错误提示、删除操作 |
| 绿色 | 安全、成长、环保 | 成功状态、环保类、健康 |
| 黄色 | 乐观、注意、温暖 | 警告、促销标签、儿童类 |
| 黑色 | 高端、权威、神秘 | 奢侈品、高端品牌、夜间模式 |
注意：颜色心理暗示有文化差异。比如白色在西方代表纯洁，在东方某些文化里代表丧事。做国际化产品时，一定要做本地化色彩调研。
2.3.2 色彩搭配的「60-30-10」法则
这个法则我用了十年，从来没出过问题：
- 60%：主色（通常是背景色或大面积色）
- 30%：辅助色（标题、导航、次要元素）
- 10%：强调色（按钮、链接、关键信息）
你想想看，如果整个页面都是红色，用户会疯掉。但如果只有10%的红色用在「立即购买」按钮上，那红色就成了「视觉焦点」。
2.4 视觉动线：引导用户的「视线路径」
视觉动线，就是用户眼睛在屏幕上移动的轨迹。好的动线，能让用户「不知不觉」地看完你想让他看的内容。
我刚开始做设计时，完全没考虑过这个。后来发现用户老是跳过重要信息，直接点按钮。我才意识到：用户的视线是有惯性的。
2.4.1 F型动线（适合文字密集型页面）
用户会先水平扫读顶部，然后向下移动，再水平扫读中间，最后垂直扫读左侧。像字母「F」。
所以，最重要的信息放左上角，次重要的放中间偏左，最不重要的放右下角。别把关键内容藏在右下角——用户根本不会看到。
2.4.2 Z型动线（适合视觉导向型页面）
用户从左上角开始，水平扫到右上角，然后斜线扫到左下角，再水平扫到右下角。像字母「Z」。
这个适合首页、着陆页、海报类设计。把品牌Logo放左上角，CTA按钮放右下角，中间放核心卖点。
我的经验：别死板套用F型或Z型。实际用户行为是混合的。我一般会做「热力图测试」——让几个同事用眼动仪（或者简单录屏）看看他们实际看了哪里。结果经常让我意外。
2.4.3 视觉引导的「三要素」
- 视线起点：通常是左上角或页面中央。用大标题、高对比度图片吸引注意。
- 视线路径：用箭头、线条、人物的视线方向、元素的排列顺序来引导。
- 视线终点：通常是CTA按钮或关键操作区。确保终点清晰可见，别让用户「迷路」。
说白了，视觉动线就是给用户画一条「看不见的路」。你画得好，用户走起来舒服；你画得乱，用户就跳车了。
总结一下：
- 格式塔原理：别跟用户的直觉对着干
- 视觉层次：什么都突出等于什么都不突出
- 色彩心理学：颜色不只是好看，它传递情绪
- 视觉动线：给用户画一条「看不见的路」
下一章，咱们聊聊「认知负荷与信息架构」——说白了，就是怎么让用户「不费脑子」地理解你的设计。