WHY · 这条规则要解决的问题
玩家的眼睛,其实是可以被"指挥"的
R7 解决了"玩家想去哪"(引力),R9 解决了"玩家怎么看见目标"(形状与情绪)。R10 处理的是更底层的一件事:在任意一个画面里,玩家的眼睛先看向哪、注意力落在哪。
这件事看起来玄乎,其实有硬机制。人的视觉系统对收敛的线条有本能反应——当多条线朝一个点汇聚时,眼睛会不由自主地被拉向那个汇聚点。这是画家、摄影师用了几百年的"引导线(leading lines)"原理。米津真在 CEDEC 2017 把它总结成三角形法则的第三个职责,一句话:
三角形有把视线引向顶端的强烈效果。所以在山或丘的顶上配置某种特异物,就能促使玩家对那里产生兴趣。
—— 米津真 · CEDEC 2017
这条规则的威力在于它零成本、无需UI、玩家无感知。你不需要箭头、不需要高亮、不需要弹窗——只要把重要的东西放在几何收敛的顶点,玩家的眼睛就"自己"看过去了。而且玩家完全意识不到自己被引导,他会以为"是我注意到的"。这种不留痕迹的引导,正是任天堂最推崇的境界(呼应 R7 青沼"删掉标记"的哲学)。
CORE · 原理
收敛的线条 = 一根指向焦点的箭头
三角形之所以能引导视线,本质是它的两条斜边在顶点汇聚。任何收敛的线条组合,都等于一根隐形的箭头,指向汇聚点。三角形只是最纯粹的一种。理解了这一点,你就能把它推广到任何画面:
三种收敛结构,同一个原理。三角顶点、道路河流的汇聚点、框景(树木/拱门)围出的中心——它们都是"隐形箭头"指向的焦点。把重要的东西放在焦点上,玩家的眼睛自动看过去。
| 收敛结构 | 在3D世界里 | 推广到2D/UI |
|---|
| 三角顶点 | 山丘顶端放孤树/怪石/发光物 | 三角形构图的尖端放主体 |
| 道路/河流汇聚 | 几条路通向一个地标 | 线条、箭头、排版流向汇聚到CTA |
| 框景(framing) | 拱形树木/山谷框住远景 | 留白/边框把视线锁进中心元素 |
| 明暗/色彩对比 | 暗处的一束光、灰调里的暖色 | 沉色背景里的高饱和按钮 |
核心口诀:凡是有"方向性"的东西(线条、坡度、渐变、运动)都在指向某处。让它们指向你要玩家看的地方。
DEEPEN · 从地形到UI的同构
关卡的"顶点",就是界面的"视觉焦点"
这条规则最有价值的地方,是它在关卡设计和界面设计里是同一条。米津真讲的"三角顶点引导视线",和UI设计里的"视觉层级(visual hierarchy)",是同一个人类视觉机制的两种应用。对你这样既做游戏、又做前端/portfolio 的人,这条规则一次学会,两处都能用。
视线有一个"入口"和一条"路径"
无论是游戏画面还是网页,玩家/用户的眼睛都有一个最先落下的点,然后沿某条路径扫描。好的设计是主动规划这条路径,而不是让它随机游走。三角收敛就是规划路径的工具之一。
一个画面只能有一个主焦点
三角形法则里,顶点是唯一的。UI 同理:一个屏幕如果有五个东西都在喊"看我",等于没有焦点。先确定这个画面唯一最重要的东西,把所有收敛线条指向它,其余元素退居次要。
层级 = 多个三角的嵌套
确定主焦点后,次要焦点用更弱的收敛(更小的三角、更低的对比)。形成"主→次→再次"的视觉层级。玩家的眼睛按你设计的顺序,一站一站地走。
具体的对应关系(直接可用于你的 nav.bluecatbot 改版和作品集):
| 三角形法则(关卡) | 视觉动线(UI/网页) |
|---|
| 顶点放地标 | 视觉焦点区放核心CTA/主标题 |
| 大三角=远距地标 | 首屏主视觉=最强层级元素 |
| 小三角=近距节奏 | 次级信息=较弱层级,维持浏览节奏 |
| 道路汇聚到目标 | 排版流向/箭头/视线引导到转化点 |
| 时隐时现维持期待 | 滚动渐显(scroll reveal)维持浏览动力 |
| 偶尔落空防麻木 | 不是每个元素都高亮,留白让焦点突出 |
DEEPEN · 一个容易忽略的约束
聚光灯只有一盏才亮
顶点聚光灯的威力,建立在稀缺性上。三角形法则里,顶点是收敛的唯一汇聚点,所以它独占了视线。如果一个画面里到处都是三角顶点、到处都是收敛线条,视线就无所适从,聚光灯效果互相抵消,等于全灭。
大·中·小按数量递增地配置图形,让无论从哪个方向、走哪条路,画面里都必有一个远处的大三角和一个近处的小三角同居。
—— 米津真 · CEDEC 2017(谈大中小配比)
注意这句话的分寸:画面里同时只有"一大一小"两级,不是塞满同等强度的焦点。大三角是当前的主目标(远处地标),小三角是脚下的节奏,两者层级分明、不抢戏。这就是"聚光灯只有一盏"的实操:任一时刻,画面里只有一个最强焦点,其余都是配角。UI 同理——首屏可以有很多元素,但只能有一个"最先被看到"的主角。
HOW · 怎么用收敛引导视线
执行流程(关卡 & UI 通用)
确定这个画面唯一的主焦点
问:玩家/用户在这一屏,我最想让他看到什么?只能选一个。这是所有收敛线条要指向的目标。
找出画面里所有"有方向性"的元素
线条、坡度、道路、河流、排版流向、渐变、角色的视线朝向、运动方向……这些都在无声地指向某处。盘点它们。
让这些方向性元素指向主焦点
调整地形/构图,让收敛线的汇聚点落在主焦点上。三角顶点、道路终点、框景中心,都对准它。
把主焦点放在汇聚点,并给它对比优势
光是几何收敛还不够,再叠加明暗/色彩对比(暗处的光、灰调里的暖色),让焦点在收敛+对比双重加持下跳出来。
压制其他元素的焦点强度
确保没有第二个同等强度的收敛点在抢戏。次要元素用更弱的收敛和更低的对比,退居层级下游。
真的看一眼(3秒测试)
让没见过的人瞄画面3秒,问"你第一眼看到了什么"。答案不是你的主焦点,就回去调收敛。这是 UI 版的"越肩视线"(R1)。
CHECKLIST · 顶点聚光灯审计
- 这个画面是否只有一个明确的主焦点?
- 画面里所有"有方向性"的元素是否已盘点?
- 这些方向性元素是否都指向主焦点(而非四散)?
- 主焦点是否放在收敛线的汇聚点上?
- 主焦点是否叠加了明暗/色彩对比优势?
- 是否只有一盏聚光灯(没有第二个同强度焦点抢戏)?
- 次要元素是否退居更弱的层级?
- 3秒测试:陌生人第一眼看到的,是你的主焦点吗?
TEMPLATE · 可直接复制的字段
视觉焦点设计表
FOCAL POINT / LEADING LINES
frame: 这个画面/屏幕的名称
primary_focus: 唯一主焦点(只能一个)
directional_elements: 所有有方向性的元素(线/坡/流向…)
convergence: 它们的汇聚点是否=主焦点?(否→调整)
contrast_boost: 主焦点叠加的明暗/色彩对比
secondary[]: 次要元素(更弱收敛+更低对比)
single_spotlight: 确认无第二个同强度焦点抢戏?
3sec_test: 陌生人3秒第一眼看到的是______
APPLY · 映射到你的项目
游戏 · portfolio · nav.bluecatbot
星屑急便 & 人生小镇(游戏画面)
- 用地形/建筑收敛指向关键点:2D俯视里,让道路、街道、建筑排列的透视线汇聚到本关的核心目标(送达点、关键NPC、入口)。玩家一进入画面,眼睛自动被导向该去的地方,无需UI箭头。
- 顶点放交互物:想让玩家注意的道具/开关,放在场景收敛线的尖端(街道尽头、建筑缺口正对处、光柱下)。借几何聚光灯,让它"自己"被发现。
- 一屏一焦点:每个游戏画面只让一个东西最抢眼。多个目标时用层级(主目标强收敛+高对比,次目标弱化),避免玩家视线迷失。
nav.bluecatbot 改版 & 作品集(UI/网页) — 同一条规则直接复用
- 首屏只设一个主焦点:hub 页首屏,确定唯一最想让访客点的东西(核心作品/CTA/主张),把标题层级、留白、色彩对比全部为它服务。别让五个入口同等大声。
- 用排版流向做"道路":标题→副标题→CTA 的视觉流,就是引导视线的"道路"。让它平滑汇聚到转化点,而非四处分叉。左对齐的文字块天然形成一条向下的引导线,善用它。
- 框景锁定核心元素:用留白或边框把最重要的作品卡"框"起来,四周留空,视线自动锁进中心。这是网页版的"拱形树木框远景"。
- 对比而非堆砌:一个高饱和的按钮在沉色背景里,胜过十个都想抢眼的元素。聚光灯只有一盏才亮——这条对 hub-and-spoke 的"spoke 入口"排布尤其关键:主 spoke 强化,次 spoke 弱化。
- 滚动渐显=时隐时现:scroll reveal 对应关卡的"目标时隐时现",维持访客往下浏览的动力(你这套教程本身就用了这个手法)。
- 3秒测试:把 hub 页给没见过的人看3秒,问"第一眼看到啥/这站是干嘛的"。答不对就回去调收敛与对比。这是 ui-layout-audit 技能可以固化的一条规则。
PITFALL · 常见误用
三个反面信号
误用一 · 一个画面里多个焦点抢戏。到处都是收敛线、到处都是高对比,视线无所适从,聚光灯互相抵消,等于全灭。铁律:一个画面只有一个最强焦点,其余退居层级下游。这是最常见、最致命的错误——尤其在信息密集的 hub 页。
误用二 · 收敛线指向了错误的地方(或空白)。如果画面里的道路、透视线、排版流向汇聚到一个无关紧要的角落或空白处,玩家的眼睛就被引到了错误目标。盘点所有方向性元素,确保它们的汇聚点=你真正要玩家看的东西,别让隐形箭头指错。
误用三 · 只靠几何,忘了对比。光把东西放在三角顶点,如果它和周围颜色/明暗融为一体,收敛的力量会被削弱。几何收敛要和明暗/色彩对比叠加,双重加持焦点才真正跳出来。反之,如果一个次要元素对比过强,会盖过你精心收敛的主焦点。