在现代界面设计中，元素看似从界面平面凸出或凹入的视觉感知，是最微妙却最具影响力的视觉动态之一。
虽然创造这种视觉深度的幻觉似乎需要复杂的技术，但实际上，它依赖于人类视觉认知中一个简单而深刻的感知原则。
照明的原始方向性
看看这扇门的面板所展现的建筑表达：
虽然这是二维的表现，但面板的体积感却非常清晰。是什么神经机制让我们能如此解读空间呢？
观察每个面板上边界的亮度梯度——这种增强的亮度是因为表面朝向光源。相反，下边界的亮度减弱是因为它远离主要光源，接收到较少的光。
我们的视觉皮层将这些亮度差异解读为三维突出物的证据，这是唯一可能产生这种光影互动的物理配置。
现在看看这个柜子面板的例子：
在这种情况下，视觉解读明确地表明是凹入而非凸出。上边界的阴影表明上方的唇缘遮挡了光线，而下边界的亮度增加则表明一个朝上的表面有效地捕捉了光线。
要在你的界面设计中营造这种深度感知，需要系统地模拟这些自然发生的光与表面互动，这些互动在进化过程中塑造了人类的视觉处理。
将光度学原理应用于界面设计
要在界面中展现深度感知，首先要构思每个元素的体积轮廓，然后精确模拟光源与该三维形态之间的光影互动。
正浮雕元素
考虑一个功能控件，比如按钮，它应该通过从界面平面凸出而显得具有触觉感，沿其上边界和下边界具有正交边缘：
正交平面的几何特性意味着从单一视角无法同时看到上边缘和下边缘。由于用户通常从略微向下的视角看显示屏，最佳的视觉效果是展示上边缘的一小部分，而完全遮挡下边缘。
上边缘的表面朝向光源，因此应比元素的主要表面更亮，通常通过上边框或内嵌阴影实现，具有最小的垂直位移：
为了获得最佳的色彩保真度，应手动选择增加的亮度值，而不是简单地应用半透明的白色覆盖，因为后者可能削弱基础色调的色彩饱和度。
接下来，考虑投影元素遮挡光线，立即在其下边界下方形成一个阴影区域。
这种现象通过应用微妙的深色盒子阴影来模拟，具有精确的垂直位移（确保阴影仅在元素下方显现）：
在阴影扩散参数（模糊半径）上保持克制；对于大多数应用，几像素的扩散就足够了。这些近距离阴影应保持相对明确的边界——观察建筑元素如电源插座或窗框下方的清晰阴影定义以获取自然参考。
负浮雕元素
考虑一个凹入的容器组件的实现——一个“井”——旨在传达体积凹入界面基质的印象：
从标准的向下视角来看，只有下边界会呈现可见的表达。由于这个表面朝向光源，它需要增强的亮度，通过一个下边框或内嵌阴影实现，具有负的垂直位移：
凹陷区域上方的结构突出物自然会遮挡光线照射到凹陷的上边界，需要通过深色的内嵌盒子阴影应用一个微妙的阴影区域，具有最小的正垂直位移，精心校准以防止在下边界显现：
这种光度模拟方法普遍适用于任何需要凹入感知的界面元素，包括表单输入字段和选择控件：
感知克制的美德
一旦掌握了界面设计中的光度模拟原则，自然会有过度精细化的诱惑——在追求更高的逼真度中投入不成比例的时间进行微小调整。
虽然这种探索具有智力和创造价值，但实际实施需要明智的克制。选择性地应用维度线索通过微妙的感知提供增强了可用性，但超现实的模拟往往会导致视觉复杂性，削弱界面的清晰度和效率。目标仍然是功能性沟通而非幻觉技艺。
会员专享
余下内容仅对会员开放。
会员可读完整内容 —— 每一个公开发布的观点背后，那些框架、决策与推理的全貌。
- —完整文章，包含未公开存档的部分
- —可落地的工作框架，附带权衡与决策依据
- —新文章抢先看，先于公开发布
随时取消 · 一次订阅，畅读全部
