ios 不被遮挡 阴影_阴影的逻辑

本专栏转载需要授权。欢迎关注作者 Twitter：https://twitter.com/shuding_。

在现实世界里，阴影并不是一个真实存在的实体。阴影只是一种现象：由于不透明物体的遮挡而造成的暗部。

但在大多数用户界面（或平面设计）的语境下，我们淡化了许多关于光的真实物理性质，也因而抽象出阴影这一实体作为设计的元素之一，为的是用阴影的某些属性（properties）承载设计上的某些功用（functions）。但仍然，我们依旧必要为其尽可能保证合理性。

下文将以网页为例，对上述观点进行解释，并讨论一些与阴影相关值得注意的地方。

阴影的功能

前文所说 “用阴影的某些属性承载设计上的某些功用”，简而言之即是乔布斯那句广为流传的 “设计关乎功能”：

It’s not just what it looks like and feels like. Design is how it works.

如果我们希望在设计中用到阴影，那么阴影一定要承载一些功能。

主要功能是区分形状和位置。数学过绘画的人都会记得入门时简笔画的经历：用线条勾勒出平面物体的轮廓。再往后在素描中，我们开始用阴影来辅助表现立体形状与纵深。学习油画后，这个功能又被色彩所取代了一部分。

用户界面也是如此。我们想通过尽可能易于理解的方式，让用户区分不同元素的轮廓和深度。

图片来源：https://material.io/components/cards/#behavior

例如，Material Design 的卡片浮动（Elevation）篇目完全采用了拟物的思路来介绍阴影的性质，甚至阴影本身的定义单位为物体的高度（例如 8dp）^[1]。当卡片高度为 0 时，阴影退化成了轮廓。

这与绘画的逻辑也是大致相同的：为了实现区分形状和位置这一功能，阴影和轮廓取一即可，在理论上不应同时存在。这也是一个用户界面设计中常见的误区。

注：为了解决这一问题，并提供更好的区分度，Material Design 采用了环境光（ambient light）与关键光（key light）的模式^[2]：采用关键光来表现阴影本身的特征（例如纵深关系），再用环境光来凸显轮廓，加深对比。

此外，阴影也有其他次要功能，例如美观、维持统一的设计风格等等。

阴影的色彩

在用户界面设计中，我们常常用一个半透明线性渐变来表示阴影。但这个渐变应是无色的（“暗” 并非一种颜色），具体实现中应该在 RGB = (0, 0, 0) 的基础上调整 alpha 通道。

许多网站（尤其是导航栏的阴影）都犯有这个错误，当然知乎的导航栏也不例外。

我们来举例说明一下这样带来的问题。以下是三种常见的阴影实现方式：

此处我们用 RGBA 模式来表示 box-shadow 的颜色，可以看到他们存在透明度、灰度（或 HSL 中的亮度）上的实现差异。

这三中实现在白色页面背景中，视觉（例如在设计稿上）上均能带来几乎一样的观感。而一旦背景发生了变化，同样的实现会呈现截然不同的效果：

例如在设计一个带阴影的浮动导航栏（fixed navbar）网站时，我们无法预计阴影背后的内容将会是什么颜色（也可能是图片或视频）。以上三种实现只有第一种才是合理的，我们应常常考虑到这一点：阴影是无色的。

光源的统一

在大多数用户界面设计中，我们忽略了透视带来的影响，而将光照条件简化成了一个来自无穷远处的、近乎垂直的平行光。

因此保持所有阴影的光源方向统一，在很大程度上决定了界面设计的一致性。大部分情况下，设计师都选择了稍稍偏上方的垂直光源。在本质上是人类对于太阳的习惯。

当然也存在特例。在部分设计语言中，例如几年前流行的 “长阴影（long shadow）^[3]” 设计潮流，光源可能是非平行的点光源、来自贴合地平面的方向（贴近于夕阳光）：

图片来源：https://dribbble.com/shots/1107326-Everything-is-going-flat

在交互上，也有 OKShadow 这样的阴影实验。

此外，除了光源方向的合理性，阴影设计的统一也意味着纵深关系的合理。例如下图是一个常见的 “按钮 + 提示框（tooltip）” 设计：

阴影是体现元素深度关系的途径

以上左图中的纵深关系就更加合理：提示框在纵向位于按钮的上层。而右图交换了两者的阴影，显得非常不自然。

因此，在考虑同一体系中各个元素的纵深（z-index）时，阴影系统也应同时设计。

夜间模式下的方案

近年来夜间模式（或暗模式）功能相继被各大产品所采用（例如 macOS 与 iOS），Twitter 网页版甚至有默认、暗、黑三种亮度模式可选。而夜间模式下的阴影设计也有几大误区。

逻辑上，阴影现象与光照共生。在绝对黑暗的环境中并不应存在阴影对比（或一切都是阴影）。但我们仍需提供区分形状和位置这一关键功能，只是此时不应再依赖阴影这一设计元素。

为了解决这个问题，原本需要用阴影来凸显的卡片，在相应暗色主题下 Material Design 采用了一层额外的半透明蒙版（overlay）来提供区分度^[4]（注意到卡片不再和背景同色）：

图片来源：https://material.io/design/color/dark-theme.html#properties

此外，其暗色主题没有采用纯黑色背景，目的之一是仍然保留一定的阴影，用以表现纵深关系。

而另一个解决方案是，在夜间模式下舍弃阴影而采用轮廓（例如 https://zeit.co/design/popover-menu）。这个选择在对比度上更加友好，但放弃了纵深关系。

---

作者知乎页面：Parabola，本专栏转载需要授权。

题图：https://unsplash.com/photos/qtgcyExF8GM

参考

1. ^Material Design 中的卡片 https://material.io/components/cards/#behavior
2. ^Material Design 中的光影 https://material.io/design/environment/light-shadows.html#light
3. ^“长阴影” 设计 https://designmodo.com/long-shadows-design/
4. ^Material Design 中的暗主题 https://material.io/design/color/dark-theme.html#properties