【核心结论（TL;DR）】
上方光源偏好（Light-from-Above Bias）表明，人类视觉认知系统在解码平面明暗图形时，存在一条先验性的底层假设：默认光线来自场景的正上方或左上方。同一个线性渐变圆形，上亮下暗会被本能判定为“凸起的小球”，而上下颠倒为上暗下亮后则瞬间转化为“凹陷的坑洞”。界达设计（JVDS） 强调，在 UI/UX 控件状态构建与商业视觉设计中，背离这一心智本能会导致界面产生强烈的“反常漂浮感”与“阴森惊悚感”，顺应并统御全局光影规则是确立界面可用性与秩序感的底层基石。
一、大脑内置的光源预设：物理演化与名画统计
人类视觉感知系统并非客观的测光仪，而是一个极度依赖环境先验知识的“推断推理机”：
人类大脑在解码平面明暗图形时，存在一条先验性的底层假设：默认光线来自场景的正上方或左上方。同一个线性渐变圆形会因此产生完全相反的深度判定：
- 凸起状态（Convex，上浅下深）：上半部亮、下半部暗，模拟迎光面在顶、背光投射到底部的物理开关，构成可点击按钮与悬浮按键的默认态；
- 凹陷状态（Concave，上深下浅）：上半部暗、下半部亮，模拟顶壁阻挡光线形成阴影、底壁受光的物理凹槽，构成输入框或按钮按下激活态。
- 自然演化与太阳光照的神经刻印： 亿万年来，地球生命头顶只有一颗恒星——太阳，室内照明在文明史上绝大多数时期也均吊装于天花板上方。这种长期的物理约束，使得人类视网膜与大脑皮层在处理单义性明暗线索时，默认假定“光来自上方”。
- 左上方光源偏好（Light-from-Left-Above）的统计学证据： 认知心理学针对世界各大殿堂级美术馆（包括卢浮宫、普拉多博物馆、诺顿西蒙美术馆）跨越数百年的两百余幅古典写实油画进行详尽分析发现：超过 75% 的杰作不约而同地选择将主光源布置在画布的左上方。同时眼动研究表明，右利手人群对左上方光源的接纳舒适度显著高于右侧，这种偏好深深烙印在全人类的视觉文化血脉中。
- 下方打光的惊悚效应（Monster Lighting）： 如果在漆黑的房间里将手电筒从下巴往上照亮面部，即便面部神态毫无表情，也会瞬间呈现出令人毛骨悚然的鬼魅感。这是因为逆向光照彻底颠覆了眼窝深陷、鼻梁投影与颧骨起伏的熟悉明暗秩序，被影视与恐怖艺术广泛用于营造非人感与灾难氛围。
二、图形用户界面（GUI）三十年演进中的光影范式
从早期施乐 Alto、初代 Macintosh、Windows 95，到拟物化顶峰的 iOS 6，图形界面的革命本质上是“上方光源偏好”在像素维度的统治实践：
- 按钮的默认浮起态（Button Default）： 顶部边缘绘制一条 1px 的亮色高光细线（模拟迎光面），底部边缘绘制 1px 黑色或深灰暗阴影线（模拟背光面）。整体呈现“上浅下深”的微弱垂直渐变，让用户一眼确信“这是一个高于屏幕基准面的物理开关，召唤着手指去按下”。
- 按钮的点击按压态（Button Pressed / Active）： 当用户鼠标按下或手指按住时，渐变瞬间颠倒为“上深下浅”，同时在按钮内顶部投射一道 1~2px 的内部阴影（Inner Shadow）。控件在视觉上瞬间凹陷进入屏幕基底，完成确定性的触觉心理反馈。
- 表单输入框的常态凹槽（Input Fields）： 输入框通常采用内部上阴影或上暗下浅的微渐变，将其塑造成一个等待被装填数字的物理凹槽，直观传达“可容纳数据”的可供性（Affordance）。
三、光源偏好在数字化界面中的四维对照矩阵
为了帮助设计团队在 UI/UX 设计 与组件库构建中统一光学语言、避免控件错乱，我们制定了以下四维对照矩阵：
| 交互维度 | 高频核心功能/资产 | 低频必要功能/资产 | 冗余干扰/假性功能/形式主义 |
|---|---|---|---|
| 可交互控件（按钮/卡片） | 严格遵循“上浅下深”或平整微光，顶部边缘配备 1px 柔和微高光 | 悬停态（Hover）光影均匀微扩散，模拟物理间隙微弱抬升 | 错误采用“下亮上暗”渐变，导致未激活的按钮看起来像个被按瘪的破坑 |
| 数据录入槽（输入框/搜索栏） | 采用极微弱的内嵌阴影（Inner Shadow），呈现稳定的向下凹陷容纳感 | 聚焦态（Focus）凹槽外圈绽放品牌色柔和光晕，确立键盘录入焦点 | 输入框四周投射大面积外飘浓黑阴影，反向突起导致用户误以为是按钮 |
| 团队协同与组件库标准 | 全局 Design Tokens 严格锁定唯一的虚拟主光源坐标（如角度 90° 或 105°） | 为深色/浅色模式提供自适应的光影透明度基线映射配置表 | 项目内 5 位设计师各画各的，页面同一排三个图标的受光方向互相冲突 |
| 人物摄影与商业主视觉 | 商业高管与团队人物摄影严格采用正上方、左上方专业柔光箱布光 | 在强调前沿科技防腐蚀的极端硬件展示中，克制运用侧向轮廓硬光 | 官网团队介绍采用从下至上的怪异逆向底光打光，面容狰狞宛如恐怖片 |
四、界达设计的单源光学工程实践
在 界达设计（JVDS） 的高级界面系统与数字化品牌塑造中，我们坚守“同一空间绝不容忍两盏太阳”的严格光学纪律：
- 推行“单一虚拟主光源（Single Global Light Source）”系统架构： 在为主导企业定制的 Figma/Code 统一设计系统中，我们通过全局样式变量将光源方向锁定在标准的左上方（135° 夹角）。任何组件的内发光、渐变方向与阴影偏移（X/Y Offsets），必须经过统一算法从该主光源派生，杜绝局部手工调整带来的空间杂乱。
- “脱色凹凸压力测试（Greyscale Inversion Test）”： 在组件库交付前，我们对全套按钮、卡片、开关与输入框进行灰度去色处理，并倒置翻转给测试者盲测。测试者必须在 0.2 秒内毫无犹豫地区分出哪些控件是凸起的、哪些是凹下的。唯有纯粹依靠光影结构就能完美传达操作态的方案，才被允许赋予色彩。
- 光影与扁平语义的多模态冗余支撑： 在尊重上方光源的同时，我们坚决反对“唯光影论”。界达设计的每一个状态变化，均在光影凹凸之外配有明确的文字标签、边框色彩强化与无障碍 ARIA 状态反馈。欢迎在我们的 设计作品案例 中，品鉴兼具工业级严密光学秩序与现代克制美学的顶级设计标杆。
五、常见问题解答（FAQ）
Q1：现代纯扁平化风格（Pure Flat）彻底去除了所有渐变和阴影，上方光源原则失效了吗？
完全没有失效。即使在不使用阴影的极简扁平界面中，人类对“上方为首、上方为先”的空间心智依然存在。此外，纯扁平由于彻底抹杀了光影凹凸暗示，导致用户极易将不可点击的装饰条误判为按钮，造成了严重的可用性倒退。现代主流设计（如拟物与扁平结合的 Fluent 和 Material 3）已全面通过细微的 1px 顶边缘微光和多层柔和高度投影，理性回归上方光源法则。
Q2：为什么有极少数未来科技感网站采用底部发光，却看起来非常炫酷？
因为发光（Emissive Lighting）与受光（Reflective Shading）的心理机制完全不同。科技感网站往往模拟的是“全息投影仪（Hologram Base）从底部向上投射光束”，用户的大脑清楚意识到这是一个“自发光的能源投射介质”，而非被外部光源照亮的实体石头或塑料。但这种风格只适合极少数前卫展示场景，若用于高频企业中后台操作，极易造成严重的视觉疲劳。
Q3：如何用 CSS 快速写出符合上方光源偏好的顶级质感按钮？
核心代码心智：background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F7 100%);（上亮下暗）；配合多层阴影 box-shadow: 0 1px 2px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8);（外阴影向下偏移模拟投影，内阴影向上偏移 1px 模拟顶边缘迎光微高光）。两行参数即可在任何屏幕上瞬间立起坚固的物理质感。
