设计师必知：系统与 APP 的设计深度奥秘！

这篇文章非常好！探讨了视觉媒体中，如何通过构图来传达故事和深度，尤其在将三维世界转化为二维画面时。作者强调了使用分层对象来构建场景技术，这样可以增加视觉微妙的效果！

以下为译文，原文链接：https://rauno.me/craft/depth

构图是视觉媒体中最具挑战性的基本技能之一。如何将三维世界浓缩到二维（静止的）画面中，同时传达故事和页面深度？我最喜欢的一种构图技巧是将场景与多层次的物体合成在一起，这样既能表达故事情节，又能创造视觉趣味。

在电影制作中，这通常被称为 “弄脏画面”，即使用道具或非常规取景等前景元素--通常最明显、最原始的正面镜头不会巧妙地推进故事情节，也不会在视觉上引人注目。

例如，下面的构图暗示主体正在另一个物体后面被观察，从而产生一种不安感。如果没有前景的遮挡，我就不会得出这样的假设，而这一帧画面所承载的情感和信息也会减少。

我们还可以透过窗户拍摄以获得新颖的视觉效果 1 ，用失焦的前景物体遮盖画面 2 ，甚至使主体居中并利用周围环境提供更多背景 3 。

在软件设计中，我们同样可以通过引入环境前景和背景对象来增强构图。让我们来看看我为 Vercel 公司的一个市场营销网页而苦苦设计的视觉效果：

该设计在最初的一次迭代中表现平平，因为浏览器框架或叠加表面没有深度--它们的放置似乎是马虎之后的想法。

为了引入深度，我们可以做一个微不足道的改动，那就是模糊内部背景，在视觉上降低其 Z 轴的位置，并淡化容器的底边，让人感觉边界无限，不那么清晰：

我们可以通过额外的偏移浏览器框架和失焦对象来进一步强调设计的层次性。我们也不只是在焦点周围添加噱头装饰，而是有意利用主要对象（浏览器框架和气泡表面）来传达 Vercel 平台上大量的预览部署。

模糊的背景

在产品和操作系统中，启动叠加 1 时将背景调暗的做法相当普遍。这是通过模拟景深为界面增添立体感的另一个机会，而景深正是我们眼睛自然进化所期待的。

例如，如果不强调 iOS 主屏幕第 2 层，启动上下文菜单会让人感觉相当别扭。此外，这还会让人觉得整个应用背景墙都是交互式的，这是这样的情况下是不正确--只有上下文菜单是可操作的，点击背景可以将其关闭。

动效设计

在我看来，编排动效就是在有条理的序列中发生某些事情时刻意安排。我认为，“弄脏画面 ”和动作编排之间有微妙的相似之处。在这两种情况下，从高层次上讲，我们都希望为叙事增加更多的层次，这就好比将多种乐器叠加在一起，使声音更加丰富多彩。

在动画中，我们的乐器是时间和人工延迟，利用这种方式可以让人感觉到大自然中的运动--你很少能看到一棵树的所有树叶同时在一场令人震撼的音乐会中移动。

观察主屏幕向下轻扫的手势，就是一个很好的动作编排示例。第一次重现可能是通过向下轻扫来触发关键帧动画。

但是，如果我们把互动分解成手势过程中发生的 4 种离散状态，就会得到这样的结果，从而揭示出更多的细微差别：

由于主屏幕上的第一行应用程序和 Siri 建议占据屏幕上相同的空间，因此需要对主屏幕层进行充分模糊 1 ，然后才能清晰地显示 4 个 Siri 建议 2 。线性地揭示所述建议会产生视觉上奇怪的分层情况，因此这里有意延迟揭示。

交互中的第三个状态将搜索入口点转换为输入 3 ，同时巧妙地显示键盘而不完全展开它。我假设键盘弹出过渡被延迟，以免在认知上与 Siri 建议竞争，而设计可能会试图推动你这样做。

由于您正在向下滑动，因此在屏幕顶部附近显示即时反馈也是有意义的，该手势可能源自该位置。在手势结束时，动画达到其最终状态，并与释放手指触摸相配合地令人满意地展开键盘 4 。

现在，也可以通过点击主屏幕页脚的“搜索”按钮来启动相同的覆盖层，而不是滑动：

有趣的是，在这种情况下，编排是相反的 - 搜索入口点立即转换为输入 1 ，并且经过非常轻微的延迟后，Siri 建议的应用程序才会显示 2 。同样，优先考虑在触发位置（搜索输入按钮）附近进行转换是有意义的，以便及时传达界面理解您的信息。

交错动画

一群在海洋中游泳的鱼会产生令人着迷的效果，因为它们的运动和时间有非常微小的差异，但在视觉上看起来无法区分。

进一步观察鸟群是如何飞行的，就会发现大自然的运动并不总是完全同步的。

从自然界的界面中汲取灵感，我们有时可以错开外观相似的同级项目的行为。例如，OpenAI 会错开网格布局中加载内容的淡入时间。界面并不会因此而感觉变慢。相反，由于元素不会一下子突兀地出现，用户会怀疑页面是否滚动了，以及屏幕上更新了多少新项目，因此运动更有深度。

通过观察 iPhone 上的解锁交互，我们可以发现主屏幕上的应用程序在出现时也是交错进行的。在这里，交错的效果放大了解锁手势，让原始的轻扫手势变得立体、夸张，从而使操作更加令人满意。主屏幕也是 iOS 的 “起居室”，很可能是设置设备后的第一个接触点，这也是将动画的新颖性提升一个档次的大好时机。

iOS 控制中心提供有机橡皮筋反馈，使每一列项目都能以略微错开的弹簧配置作出反应。

我们还可以通过交错运动来制作文本动画，以创建令人满意的悬停效果：

表示亲和力

iPadOS 对 Dock 表面的动画处理尤为用心。例如，在主屏幕上向右滑动时，当 Dock 滑出视线时会出现全屏叠加。

Dock 没有与主屏幕一起模糊，而是在保持不透明的同时滑出屏幕，这表明它保留了互动性，并可通过轻扫手势返回。

苹果通过动作巧妙地传达了界面的深度，并强化了界面由层层堆叠组成的隐喻。现在，我们感觉他们本可以将 Dock 保持在原位以避免滑动，但由于它分层位于 “今日视图 ”侧边栏之上，让它移开可能会尊重你与你滑动的表面进行交互的意图。

现在，我们可以确认 Dock 并没有滑动动画，因为这样做实在是太可爱了--在显示控制中心时，Dock 并没有表现出独立图层的属性，而控制中心与侧边栏一样也是全屏覆盖。相反，它与主屏幕一起被模糊化，而主栏则作为一个图层浮现在主屏幕上方，以显示可移除性。

文中提到的设计方法对你有启发吗？留言谈谈你的体会~

【10月13日至10月20日17点， IXDC赠书活动 《变革者：领导者们是如何设计变革的》 正在举行 ，点开书名链接参加活动，即有可能获得实体图书一本噢！】