光源偏见（Top-Down Lighting Bias）：为什么UI设计光源都在左上方

光源偏见（Top-Down Lighting Bias，又称自上而下光照偏见）是指人类视觉系统在长期演化与生活环境中形成的一种感知定势：人们天然倾向于认为物体是由上方的单一光源照射的；且大量实验证据表明，用左上方的灯光照射，物体会显得更加自然、真实与舒适。在 UI 视觉、品牌插画与电商 Banner 设计中，遵循左上方光源（左上高光、右下投影）能快速建立真实可信的立体秩序；反之，采用由下而上的底光则会打破日常视觉预期，营造出失真、诡异或恐怖的戏剧氛围。

在审视一套 UI 界面图标、一张促销 Banner 或一幅品牌插画时，有时明明构图和配色都没有硬伤，但画面却莫名让人觉得“假”、“悬浮”甚至隐隐有些不安。造成这种微妙违和感的幕后推手，往往是设计师忽略了人类视觉系统根深蒂固的本能——光源偏见（Top-Down Lighting Bias）。

一、人类为什么偏爱“左上方单一光源”？

人类在地球表面进化了数百万年，头顶上唯一的恒定主光源就是太阳；步入现代社会后，无论是室内的吸顶灯、路灯，还是大多数右利手人群为了避免写字时手部遮挡光线而放置在桌面左上方的台灯，都强化了同一个视觉经验：光线总是从上方（尤其是左上方）单一方向洒下来的。

基于这一生理与环境记忆，大脑在处理二维屏幕上的光影信息时，会自动套用“左上方单一光源”的假设：

当一个圆形按钮的左上边缘明亮、右下边缘带有阴影时，大脑会瞬间将其识别为一个向外凸起、可以按压的立体实体。
如果把高光和阴影反转（左上暗、右下亮），大脑依然会执拗地认为光是从左上方照过来的，从而将该图形解读为一个向内凹陷的坑洞。
更重要的是，如果同一个页面上的多个图标各自采用不同方向的投影（有的朝左、有的朝右、有的朝上），大脑的“单一光源假设”就会崩溃，整个界面就会呈现出拼凑感与杂乱感。

二、插画中的光线情绪实验：左上自然光 vs 底部恐怖光

光线方向不仅决定物体的立体体积，更是直接操控观者潜意识情绪的开关。我们可以通过两组人物插画的光影对比，直观感受光源方向带来的巨大心理反差：

左上方自然光源（温暖、真实、亲和）：在左侧的角色插画中，柔和的主光源从画面左上方约 45 度角倾泻而下，照亮角色的额头、鼻梁与左脸颊，受光面色彩清亮饱满，背光面自然过渡到右下侧的柔和暗部。整幅画面呈现出如同清晨阳光照射般的自然真实感，极易拉近与用户的心理距离。
由下而上的底部光源（失真、诡异、恐怖）：在右侧的暗黑风格插画中，主光源被移到了画面正下方的骷髅处，光线自下而上逆向打在人物的下巴、鼻底与眼窝下缘，而原本应该明亮的额头与头顶却隐没在阴影中。这种违背自然规律的底光瞬间打破了日常安全感，营造出强烈的不真实感、神秘感与恐怖氛围（这也是为什么人们在讲鬼故事时喜欢把手机手电筒放在下巴底下向上照脸）。

*图 5-1：插画光线传达气氛对比（左：左上方自然光源显得温暖真实；右：由下而上底光营造神秘恐怖感）*

三、常规产品中的光影规范：Banner 与金刚区图标如何借光增色？

除了特定题材的游戏或影视宣发外，绝大多数商业产品、企业官网与生活服务 App 的核心诉求都是传递阳光、安全、品质与信任。因此，大量常规产品中的 Banner 与插图都会优先选用左上方向的光源，或在左上方使用更清亮的颜色：

促销与品牌 Banner 设计：以本地生活平台的“周一乳品日·元气早餐系列（乳饮烘焙 5 折起）”Banner 为例，画面核心的吐司面包、草莓果酱瓶与飞溅的牛奶均严格遵循左上方受光逻辑——左上背景呈现明亮的暖红与高光渐变，牛奶杯与面包切面的受光亮部朝向左上，而在右下方的展示台面上投射出扎实的暖暗色阴影。这种顺应本能的光影处理，让食物显得格外新鲜诱人。
金刚区轻质感图标（Icons）：在页面底部的“美食、甜点饮品、超市便利、水果蔬菜、买药”五个圆角图标中，每一个微立体图形（刀叉、纸杯蛋糕、购物篮、橙子、医药箱）都在左上方边缘点缀了清透的高光，并在图标内部向右下角延伸出柔和的长投影。五个图标共享同一个虚拟左上光源，排成一排时既饱满灵动，又极具整体秩序感。

*图 5-2：常规产品“元气早餐系列”促销Banner与底部5个金刚区图标均采用左上方光源与高光*

四、UI/UX 视觉设计中的光影应用指南表

为了帮助设计团队在构建视觉规范（Design System）时统一光影语言，58UI 设计工作室整理了不同光源角度的视觉特征与适用规范：

光源方向	视觉参数特征（高光与投影）	传递的心理感受	典型适用场景	设计避坑提醒
左上方光源（约 120°–135°）	左上边缘高光/浅色渐变，X 与 Y 轴投影均为正值（向右下偏移）	自然、真实、明快、可信赖、符合直觉	企业官网卡片、常规 App 金刚区图标、电商促销 Banner、按钮悬浮态	全站所有组件必须锁定同一光源角度，切忌单页出现多重冲突投影
正上方垂直光源（90°）	顶部边缘微高光，X 轴偏移为 0，Y 轴投影向下自然扩散	现代、克制、均衡、秩序感强	现代极简 SaaS 界面、Material Design 卡片层级、移动端底部悬浮栏	阴影透明度宜控制在 4%–12%，避免黑重脏污感
由下而上底光（-90°）	底部发亮、顶部阴影压暗，反常逆光	神秘、戏剧化、不真实、紧张或恐怖	密室逃脱/暗黑游戏宣发、万圣节主题活动页、特殊前卫艺术展视觉	严禁用于金融、医疗、企业服务及日常消费品主界面

五、常见问题解答（FAQ）

问：在扁平化（Flat Design）或极简风格的网页中，还需要考虑光源偏见吗？
答：同样需要。即便不做拟物化的高光，扁平化界面依然依赖卡片投影（Box-shadow）和微渐变来区分可点击层级。将卡片投影设置为 0px 8px 24px（正上方光源）或 4px 8px 24px（左上方光源），并在按钮顶部留出 1px 的微弱亮边，能让极简界面拥有微妙的呼吸感与高级品质感。
问：如果把光源统一放在右上方，会有什么问题吗？
答：虽然右上方依然属于上方光源，不会产生恐怖感，但由于绝大多数人习惯从左往右阅读（F型视觉动线），视线首先触达元素的左上角。左上方受光能让视觉第一落点更加清亮通透，而右上方光源会让元素的左侧起始边缘处于暗部，略微削弱阅读的轻盈感。
问：做品牌设计规范时，如何把光源偏见写入组件库文档？
答：在构建设计系统组件库时，应将全局光源角度固定为 Token（例如规定全局主光源为左上方 135°），并据此统一定义 Elevation-1 至 Elevation-4 四个层级的阴影偏移量、模糊半径与渐变方向，确保所有设计师与前端开发输出的页面光影完全一致。