chapter[5] · part 1 / 鉴赏的基础

光影、材质与空间

建筑是对阳光下各种体量的精确的、正确的和卓越的处理。 勒·柯布西耶（Le Corbusier），《走向新建筑》，1923

前三章给了你形状（第二章）、颜色（第三章）和文字（第四章）——它们都生活在平面上。本章加入第三个维度。这里有一个对程序员特别重要的前提：屏幕是物理上平坦的，你在界面里看到的一切深度——阴影、层叠、景深——都是幻觉。而这套幻觉的语法不是 Google 或 Apple 发明的，它在绘画里被打磨了六百年，在建筑里被打磨了两千年。本章去源头学语法。

5.1光是指挥棒：卡拉瓦乔的聚光灯

在 1600 年前后的罗马，卡拉瓦乔做了一件改变绘画史的事：把光从"照明"变成了"叙事者"。这种手法叫明暗对照法（chiaroscuro），他的极端版本——大片黑暗中一束强光——叫暗色调主义（tenebrism）：

卡拉瓦乔《圣马太蒙召》
Caravaggio · The Calling of Saint Matthew · 1599–1600 · 罗马圣王路易堂 · 公有领域 《圣马太蒙召》 —— 一束光完成的全部信息架构。 场景其实很日常：一间昏暗的屋子，几个收税人围桌数钱。但看那束从右上方斜切进来的光：① 它不照亮整个房间，只挑出几张脸——光在做选择，被照亮的就是重要的；② 顺着光的方向看，它和基督伸出的手指同向，两者构成一条复合引导线（第二章的工具），终点落在马太身上；③ 注意基督本人几乎隐在阴影里，只露出手——主角是"呼召"这个动作，不是人。把这幅画压成灰度图，它依然完全成立：卡拉瓦乔用明度对比一项工具，完成了焦点、路径、层级三件事。
程序员视角

卡拉瓦乔的聚光灯在今天的界面里叫"对比度预算"：弹出一个 Modal 时背景压暗 50%，本质就是 tenebrism——把光从全屏收走，只留给对话框。同理还有 onboarding 的 spotlight 引导、夜间模式里唯一高亮的播放按钮。规则和画里一样：光（高明度、高对比）是稀缺资源，照亮一切等于什么都没照亮。回想 3.4 节"强调色面积 ≤ 10%"——那是同一条定律的色彩版。

5.2一笔高光：材质是光的语法

光不仅指出"看哪里"，还告诉你"这是什么做的"。同样的光打在不同表面上，反应完全不同：金属拉出锐利的亮线，丝绒把光揉散，珍珠——看下面这颗艺术史上最著名的珍珠——只需要两笔：

维米尔《戴珍珠耳环的少女》
Johannes Vermeer · Girl with a Pearl Earring · c. 1665 · 海牙莫瑞泰斯皇家美术馆 · 公有领域 《戴珍珠耳环的少女》 —— 那颗珍珠根本没有轮廓线。 凑近看那颗珍珠（放大图片）：它其实只是两笔——上方一点浓重的白色高光，下方一抹来自衣领的微弱反光，中间什么都没有，没有轮廓、没有"珍珠的形状"。你的大脑用这两笔自己渲染出了一颗圆润、温润、有重量的珍珠。材质感不需要画出材质，只需要画出光对材质的反应。同样的语法贯穿全画：嘴唇的小高光（湿润）、眼角的光点（明亮）、头巾的哑光（布料）。维米尔是历史上最早把"高光贴图"玩到极致的人。

这个原理直接解释了界面设计的一段风格史。早期 iOS 的拟物化（skeuomorphism）给按钮画上玻璃高光、给书架贴上木纹——把"光对材质的反应"画满，帮助第一代触屏用户理解"这能按"；2013 年前后的扁平化（flat design）把这些全部删除，换取信息密度与克制；随后 Google 的 Material Design 又把光请了回来，但只留一种最便宜的反应：阴影——用投影的大小表示元素的海拔（elevation），纸片越高、影子越软越大。三种风格争论的从来不是"好不好看"，而是同一个问题：给用户多少光学线索，才够他们理解界面的物理模型？

阴影各自为政

四张卡片，四个光源方向，四种模糊度：有的影子在上、有的在左、有的硬如剪纸。大脑无法为这个场景构建一致的物理模型，只觉得"廉价"，却说不出原因。

一个光源，海拔分层

同一个世界：光永远从正上方来，普通卡片贴在 1px 的海拔，唯一浮起的卡片用更大更软的影子宣布"我在最上层"。阴影从装饰变成了 z 轴的度量衡。

核心概念

检验任何界面（或画面）光影质量的一句话标准：这个场景里的光源数量和方向，能被一致地推断出来吗？能——大脑就接受这个世界是真的；不能——一切材质和层次都垮掉。这就是为什么设计系统总是把阴影做成全局 token（shadow-sm/md/lg）而不许各组件自己发明。

5.3空间的两种语法：消失点与游观

第二章看《最后的晚餐》时你已经见过西方空间的语法：线性透视（linear perspective）——所有平行线汇向消失点，画框是一扇固定的"窗"，观看者被钉在唯一的视点上。它精确、可计算，是文艺复兴"美可度量"信念的最大胜利。但它不是唯一的答案。看中国画给出的另一套方案：

王希孟《千里江山图》全卷
王希孟 · 千里江山图（全卷 51.3 × 1191.5 cm）· 1113 年 · 北京故宫博物院 · 公有领域 《千里江山图》全卷 —— 一幅近十二米长、没有消失点的画。 先接受一个事实：这幅画不可能"一眼看完"。手卷的正确打开方式是边展边卷，任何时刻只露出一臂宽——它是一幅需要"滚动浏览"的画，观看是一段时间，不是一个瞬间。因此它不用固定视点的线性透视，而用散点透视：视点跟着你移动，处处是"此处的合理视角"，山可以同时被平视、仰视、俯视。中国画论叫"游观"——不是隔窗看景，是人在画中走。
千里江山图 · 长桥局部
千里江山图 · 长桥段局部 局部：跨江长桥 在局部里验证深度线索：① 近处的山石轮廓清晰、石青石绿浓重，远山只剩淡淡一抹——这是空气透视（远处的东西因大气散射而变淡变蓝，第三章的明度与饱和度在此服役）；② 近大远小依然成立，但没有统一的消失点约束；③ 山体的前后关系全靠遮挡交代。深度的四大线索——遮挡、大小、雾化、位置——一个都不少，只是没有透视网格。深度感不需要透视的数学，只需要线索的一致。
程序员视角

九百年前的手卷和你的 App 是同构的：视口（viewport）有限，内容沿一根轴无限延展，体验在滚动中展开。"游观"就是滚动浏览的美学理论。这给无限流、长页面叙事（scrollytelling）的设计一个古老的参照：手卷大师们早就解决了"如何让任意一屏都构图成立、又让相邻几屏连续不断"的问题——每一段自成段落（局部平衡），段落之间用山势水脉牵引（跨屏引导线）。而界面里的深度线索也同一张表：遮挡 = z-index 层叠，大小 = 近大远小的卡片缩放，雾化 = 背景模糊（iOS 的毛玻璃就是空气透视），视差滚动 = 运动深度线索。

5.4空间的尽头：光成为主角

最后把三个词合在一起。有没有一个作品，光、材质、空间三者都做到极限？有，而且它已经站了一千九百年：

罗马万神殿穹顶内部
万神殿穹顶 · 罗马 · 公元 126 年建成 · 摄影来自 Wikimedia Commons（CC 授权） 万神殿 —— 用一个洞完成的空间设计。 这个直径 43 米的穹顶（至今仍是世界最大的无筋混凝土穹顶）只有一个光源：顶端 9 米宽的圆洞（oculus）。① 光：一束实体般的光柱随时间在殿内缓慢移动，整座建筑成了日晷——光不再照亮空间，光就是展品；② 材质：穹顶的方格藻井（coffer）既减轻自重，又用阴影画出一圈圈向上收束的节奏（第二章的重复），把视线推向洞口；③ 空间：殿内是一个完整的球体几何——穹顶直径等于地面到顶的高度，你站在一个看不见的完美球心里。留白的三维版就是这种"空"：整个殿堂没有任何陈设与你竞争，空间本身就是内容。

万神殿值得每个做产品的人记住，因为它演示了体验设计的最高形态：不设计物，设计"在场"。用户走进你的 App，第一秒的感受不来自任何具体控件，而来自光（整体明度氛围）、材质（质感的一致性）、空间（密度与留白）共同构成的那个"场"。这个场，第七章开始我们亲手来建。

5.5一束光的语气：从烛光到晨光

5.1 谈过光如何指出焦点（卡拉瓦乔的聚光灯），但光还做一件更微妙的事：定下整个画面的情绪基调。同样一张脸，烛光下温暖私密，正午顶光下平淡，月光下清冷——光没换对象，只换了"语气"。决定语气的主要是两件事：光的色温（暖/冷，第三章）和画面的明调（整体偏亮还是偏暗）。看光谱的两个极端：

拉图尔烛光画
Georges de La Tour · 烛光夜景 · 17 世纪 · 公有领域 拉图尔的烛光 —— 一支蜡烛定义的暖与私密。 这是低明调（low-key）+ 暖色温的教科书：画面绝大部分沉在暖褐色的黑暗里，唯一光源是一支烛火。注意它和卡拉瓦乔聚光灯的区别——卡拉瓦乔的光是"舞台追光"，制造戏剧冲突；拉图尔的烛光是"围炉夜话"，制造的是亲密、安静、近乎神圣的氛围。同一种"暗背景+单光源"，因为色温更暖、光更柔，语气从紧张变成了温存。常被画进画里的那只手——手指被烛光照得透红（光穿过皮肤的次表面散射）——是"温暖"二字最精确的视觉证据。
哈默修伊《室内·背对的女人》
Vilhelm Hammershøi · 室内·背对的女人 · 1903–1904 · 兰诺斯美术馆 · 公有领域 哈默修伊的晨光 —— 光谱的另一端：冷、淡、静。 几乎是拉图尔的反义词：高明调（偏亮）但低饱和 + 冷色温。北欧的漫射晨光透过窗，没有锐利的影子，整个房间是一片接近单色（第三章的限制调色板）的灰。语气：安静、克制、一丝忧郁。再用前几章的工具看两处：① 大量负空间（第二章）——空荡的墙和地板占了大半画面，人退到一角；② 那个背对你的女人，正是第一章弗里德里希《漫游者》的同一个手法——背影邀请你进入画面、替她去看。同样是"光定义房间"，拉图尔用暖光把空间收拢成一个温暖的茧，哈默修伊用冷光把空间摊开成一片沉思的留白。
程序员视角 · 界面的"明调"是一个情绪决定

每个界面都有一个隐含的"布光方案"，摄影里叫影调（key）：高明调（明亮、通透、大面积浅色 → 乐观、清爽、亲和，常见于健康、社交、效率类）vs 低明调（深色、聚焦、大面积暗色 → 专注、专业、沉浸，常见于代码编辑器、视频剪辑、看盘工具）。这解释了一件常被误解的事：暗色模式不只是"把颜色反过来"，它是把界面从高明调改成低明调——是一次情绪与场景的重新布光。所以好的暗色模式会顺势降低饱和、把"光源"逻辑从投影改成发光表面（回链 9.4 / 11.2），而不是机械取反。选明调，和选色温一样，是在写第一行控件之前就该定的语气。

把 5.1 到 5.5 串起来：光在一幅画（或一个界面）里同时干四件事——指方向（焦点，5.1）、说材质（高光，5.2）、造空间（深度与海拔，5.2–5.3）、定语气（色温与明调，5.5）。下次觉得一个界面"说不出哪里舒服或不舒服"，先问问它的光：光源统一吗？语气和内容匹配吗？很多"高级感"或"廉价感"的根源，就藏在这束看不见的光里。

鉴赏练习 5

三道题。① 看光：挑家里一个房间，在早、午、晚各拍一张同机位照片。对比三张图：光的方向、软硬（影子边缘清晰还是模糊）、色温（第三章）各自怎么变？哪一张"最好看"？试着用本章的词说出原因。② 查影子：打开你常用的 App，审计它的阴影：所有投影暗示的光源方向一致吗？浮层（弹窗、菜单、卡片）的海拔层级能从影子大小读出来吗？再看它的"深度线索"用了几种（遮挡/缩放/模糊/视差）。③ 判语气：给你最爱和最讨厌的各一个 App 截图，判断它们的影调（高/低明调）和色温（暖/冷），写下这个"布光"和产品想传达的情绪是否匹配——你正在用看拉图尔与哈默修伊的眼睛，审一个现代界面的语气。