06 · 营造层次感

模拟光源

你有没有注意过，界面里有些元素看起来像是从页面上浮起来的，另一些则像是凹进背景里的？

做出这种效果，乍看很复杂，其实你只需要懂一条基本规律。

光从上方来

看看这扇门上的门板：

即便你看到的只是一张平面照片，也很容易看出门板是凸起的。为什么？

注意看门板上沿是不是更亮？因为它朝向上方天空，接收到的光更多。同样，下沿更暗，因为它背对天空，接收到的光更少。

这两条边只可能以那种方式斜着，前提是门板本身凸起——我们的大脑就是这么判断的。

再看这个柜子上的门板：

这次你一眼就能看出门板是内凹的，因为上沿有一道阴影，说明上方的边檐挡住了光，而下沿更亮，说明它朝上倾斜。

想让你的设计也有同样的层次感，你要做的只是模仿现实世界里光对物体的影响。

在界面里模拟光

如果你想让元素看起来凸起或内凹，先想清楚你希望它是什么剖面，再模仿光源会如何作用于这个形状。

凸起的元素

举个例子，假设你有个按钮，想让它从页面上浮起来，上下两条边都是平直的：

因为上下两边都是平的，你不可能同时看到它们。人看屏幕时视线通常略微向下，所以最自然的做法是：露出一点上沿，把下沿藏起来。

上沿朝上，就让它比按钮正面稍亮一点，通常用一条上边框，或者带一点垂直偏移的内阴影来实现：

想达到最佳效果，浅色要手动挑，不要用半透明白——直接叠一层白，会把底下颜色的饱和度吸走。

接下来还要考虑一件事：凸起的元素会挡住一部分光，让它下方的区域照不到光。

做法是加一层小范围、深色的阴影，垂直方向略微偏移*（你只希望阴影出现在元素下方）*：

模糊半径别太夸张，几个像素就够。这类阴影的边缘应该相当锐利——看看墙上插座或窗框下沿投出的影子，现实里就是这样。

内凹的元素

假设你在做一个“凹槽”组件，希望它看起来像是陷进了页面里。

视线略微向下，你能看到的只有下沿。下沿朝向天空，所以给它稍浅一点的颜色，用一条下边框，或者带负垂直偏移的内阴影：

凹槽上方的区域会挡住一部分光，让光线到不了凹槽最顶部，所以再加一层小范围、深色的内阴影，垂直方向略微正向偏移，确保它不会从底部透出来：

这套处理方式对所有需要内凹效果的元素都适用，比如输入框和复选框：

别玩过头

一旦明白了怎么在界面里模拟光，你很容易一调就是几个小时，反复微调，看自己能多接近现实。

这玩起来确实有趣，但落到实际项目里，出来的界面往往又乱又不清楚。从现实里借一点视觉线索来增加层次感是好事，但没必要追求照片级的真实。

用阴影传达高度

阴影不只是个花哨的装饰——用得恰当，它能让你把元素放到虚拟的 z 轴上，做出有意义的层次感。

模糊半径小、范围小的阴影，让元素只比背景稍微高一点；模糊半径大、范围大的阴影，则让元素离用户更近：

元素离用户越近，就越能抓住他们的注意力。

按钮这类元素可以用小阴影：你希望用户注意到它，但不希望它抢走整个页面的注意力：

下拉菜单这类需要比其他界面元素悬浮得更高的东西，适合中等阴影：

大阴影很适合弹窗，那种你特别想抓住用户注意力的地方：

建立一套高度体系

跟颜色、字体、间距和尺寸一样，把阴影定成固定的一组，能加快你的工作速度，也让设计保持一致。

阴影不需要很多种——五档通常就够了。

先定下最小的阴影和最大的阴影，再把中间的按大致线性递增补齐：

把阴影和交互结合起来

阴影不只能静态地把元素放在 z 轴上，它也是给用户提供交互视觉提示的好办法。

举个例子，假设你有个列表，用户能拖着每一项给它排序。用户点住某项时给它加一层阴影，它就像从列表里弹了出来，也清楚地告诉用户可以拖：

同样，用户点击按钮时，换成更小的阴影，或者干脆去掉阴影，按钮就像被按进了页面里：

这样有目的地用阴影，是决定某个元素该用哪种阴影的好办法。别去想阴影本身，去想你想让这个元素待在 z 轴的哪个位置，再相应地给它配阴影。

阴影可以分成两层

你有没有端详过某个网站上特别漂亮的阴影，然后发现它其实用了两层阴影？

这种看似疯狂的做法自有它的道理，而且道理很简单。

别人把两层阴影叠在一起时，并不是随便试到好看为止，而是每层阴影各干一件事。

第一层阴影更大更柔和，垂直偏移明显，模糊半径也大。它模拟的是直射光打在物体背后投出的影子。

第二层阴影更紧更暗，垂直偏移更小，模糊半径也更小。它模拟的是物体下方连环境光都难以照到的阴影区域。

这样用两层阴影，比只用一层可控得多——你可以让大阴影保持细腻柔和，同时让靠近元素边缘的阴影依然清晰。

高度不同，内层阴影也不同

物体离表面越远，由于缺少环境光形成的那层小而暗的阴影就会慢慢消失*（不信就拿桌上的东西试试）*。

所以，如果你要在自己的项目里用这种双层阴影，记得高度越高的阴影，那层小阴影就要越轻微。

高度最低的那档，它应该相当明显；高度最高时，几乎*（或完全）*看不见。

扁平设计也能有层次感

大多数人说起“扁平设计”，指的是不用阴影、渐变，以及任何模仿现实世界光线效果的做法。

但最有效的扁平设计同样能传达层次感，只是方式不同。

用颜色做出层次感

一般来说*（同一种颜色的不同色阶尤其如此）*，浅色的物体感觉离我们更近，深色的物体感觉更远。

把元素做得比背景浅一点，它就像从页面上浮起来；做得比背景深一点，它就像凹槽一样陷进去：

这在非扁平的设计里同样适用——颜色只是你工具箱里又一件传达远近的工具。

用实心阴影

扁平设计里还有一种传达层次感的办法：用不模糊的短阴影，只在垂直方向偏移。

想在不牺牲扁平风格的前提下，让卡片或按钮稍稍离开页面，这招很好用。

让元素重叠出层次

制造层次感最有效的办法之一，是让不同元素相互重叠，让设计看起来有多层。

比如，与其把卡片完全包在另一个元素里，不如让它偏移出去，横跨两种不同背景的交界处：

你也可以让元素比它的父容器更高，这样两边都会重叠出去：

重叠也能给更小的组件增加层次感，比如这个轮播图上的控件：

图片重叠

这套办法用在图片上效果也很好，但稍不留神，重叠的图片之间就容易互相干扰。

避免这个问题有个简单的技巧：给图片加一圈“隐形边框”——颜色和背景一致——这样图片之间总会留出一点缝隙：

你依然能看出层次感，却不会有任何难看的冲突。