设计资讯：动态界面的未来？设计与自然环境同步的用户界面美学

研究表明， 光 的功能不仅仅是照亮我们的环境，它们也 对我们的健康和幸福有直接影响 。光对 我们的睡眠、认知、昼夜节律有生物影响，也对我们的情绪、抑郁值和认知表现有心理影响。

了解如何 在数字界面设计中实现这些效果的细微差别 ，可能会 有助于设计出改善我们健康和福祉的界面美学 。

光的视觉效果，如形状，强度，对比度和阴影通常在数字界面设计中表达和探索， 但只能与用户的环境隔离 。这种推测性探索的前提是为用户界面创建一个概念模型，以 促进与用户环境中的灯光同步 的美学。

基于对光影的理论理解，这种思辨性的探索 着眼于自然环境中的这些物理现象如何动态地影响用户界面，并重新思考环境如何成为数字项目美学的一部分。 其目的是就这种相互作用进行讨论，并进一步提高我们对它们的潜在健康益处的理解。

灯光在材料上的相互作用会产生反射和阴影。直接放置在阳光下的材料会产生更强的反射和更明显的阴影。在阳光透过云层扩散或在建筑环境中反射时发生的自然环境照明下，由此产生的反射和材料上的阴影也是环境光。

在材料设计指南中，谷歌强调 需要虚拟光来照亮数字设备的用户界面 。这些虚拟光的形式是“关键光”，它能产生更清晰、有方向性的阴影，称为“关键阴影”，而“环境光”从各个角度出现，形成扩散的、柔和的阴影，称为“环境阴影”。

谷歌的材料设计阴影

虽然 材料设计促进独立于环境的静态阴影 ， 但 以下探索旨在促进包括环境数据的材质上光和阴影的相互作用，以创建数字界面美学，为用户提供更 动态 的体验。

材料设计环境中的虚拟光固定在一个点上，并在一天中投射相同的阴影。 虚拟光的一个更动态的实现可能是虚拟光 与阳光同步 ，以创建抽象的视觉美学，突出一天的流逝。

1. 动态反射

光对固体材料的常见影响是吸收，反射和阴影的产生。在下面的探索中，我们看到了 一天的流逝如何影响用户界面的颜色 。环境中的材料只反射特定波长的光并吸收其余部分，光源颜色的变化也会影响材料反射的颜色。

由于白天环境色调存在动态变化，因此这种颜色变化也会影响数字界面，从而 在环境的物理和数字体验之间建立联系 。

动态色调，是界面的真实色调和清晨色调的组合

虽然某些设备为此提供了内置方法（iOS 的夜间模式），其中显示适应一天中的时间以创建更暖或更冷的色调，但这种方法在 UI 元素上创建了色调的泛化并且提供更 少 使用特定 UI 组件的空间——文本、图像、按钮和品牌元素。 将环境色调与品牌颜色对齐并对 UI 组件状态引入微妙的反应可以提供更丰富的用户体验。

全天变换色调

这种动态的灯光相互作用也可以 扩展 ，以表达 全年 观察到的色调的微妙变化。 随着 季节 的变化，色调可能会发生变化，从秋天的暖色调到冬季的冷色调，从充满活力的春天到柔和的季风。

微妙的色调反映了季节的变化

Apple 更进一步，在 iOS 天气应用程序中渲染 自然逼真的图像 ，以 表达一天中的时间和外面的天气 。

iOS 15 中的天气应用

然而， 在 非天气应用程序 中如此详细的表达可能会使用户的 注意力 从应用程序的主要任务/目的上 移开 ，这就是为什么所提出的界面建议在实现这些 表达时 要 巧妙 。

2. 动态阴影

与色调的变化一样，材质在阻挡光源时也会呈现阴影。这可以通过假设太阳作为虚拟光源并 动态渲染材料阴影的传播和方向以与白天太阳的运动同步 来在用户界面设计中表达。方向传感器可以引导阴影的方向。此外， 相机基于其对光的敏感度，可以引导阴影的粗糙度或柔和度 。因此，可以在用户和他们的环境之间建立一种联系感。

Apple 前 SD 经理 Bob Burrough 通过使用房间中的灯光在界面中的对象上创建反射，进一步推进了这一概念。

Bob Burrough 的视频解释了对环境做出反应的 UI

他的环境照明用户界面的工作概念从设备的周围环境中获取信息，并使用它在屏幕上呈现物理上准确的东西。看起来好像用户周围的灯光照在屏幕上的东西上。

3. 环境反射

将环境反射引入界面美学可以进一步提高UI组件的材料真实感。 所有材料都会反射光线（除非是黑体）。所有自然发生的视觉构图都是来自各种来源的环境反射的组合。

环境反射——材质柔和的蓝色外阴影

当UI 元素将其主要色调反射到周围元素上时，界面中可能会发生环境反射。 这种反射可以在界面中创建颜色的动态相互作用 。将其 作为对动态阴影的扩展，可以进一步增强 UI 元素的重要性，并为界面创建准现实状态。

来自 UI 按钮的环境反射作为反射源

在各种环境因素的相互作用及其对用户界面的影响方面，有很多需要和探索的地方 。想象一下随环境变化的 触感 效果——下雨天的飘逸触感与大风天的轻飘飘的触感；具有 与其相关联的材料权重的界面元素，该权重在不同的环境条件下表现不同 。

Google Material Design 3 指南引入了 动态颜色 ，让用户可以更好地控制其应用的 个性化 。界面现在可以适应用户在他们的安卓设备上设置的通用颜色主题。

自定义材质M3动态颜色

这种颜色的个性化 是朝着愉悦的用户体验方向发展的迫切需要 ，也 为数字界面引入环境影响开辟了空间 。

随着无数的数字应用程序竞相吸引我们日益减少的注意力广度，我们很容易完全脱离与这个星球和自然环境的基本联系。 这里的思辨性概念 探索了与用户环境相关并同步的精心设计的视觉模式，可以给用户一个机会，不仅体验他们周围的环境，而且加强他们与环境的联系。 虽然研究正在进行中，以 提高我们对数字媒体中的光线和颜色如何改善健康和福祉的理解 ，但 在这一领域的更多思辨性探索可以帮助我们进一步理解。

（部分图文来自网络，若有侵权，请联系删除。）

加入 UI&UX交流社群 ~

往期推荐 | Read More

知识干货：每个原型都是一个重要实验？为你推荐最佳原型设计工具！

设计资讯：UX/UI设计师能为可持续未来做些什么？5个亲生物UX解决方案！

案例研究：如何实际应用UX设计法则？来看看 Netflix (网飞) 遵循的7个用户体验定律！

文字丨Jelly

编辑丨Jelly

如果觉得我们做的还不错点个赞和在看吧！ ：