设计资讯：动态界面的未来？设计与自然环境同步的用户界面美学
UI & UX
Article：2022/07/22
研究表明，光的功能不仅仅是照亮我们的环境，它们也对我们的健康和幸福有直接影响。光对我们的睡眠、认知、昼夜节律有生物影响，也对我们的情绪、抑郁值和认知表现有心理影响。
了解如何在数字界面设计中实现这些效果的细微差别，可能会有助于设计出改善我们健康和福祉的界面美学。
“
思辨性探索
光的视觉效果，如形状，强度，对比度和阴影通常在数字界面设计中表达和探索，但只能与用户的环境隔离。这种推测性探索的前提是为用户界面创建一个概念模型，以促进与用户环境中的灯光同步的美学。
基于对光影的理论理解，这种思辨性的探索着眼于自然环境中的这些物理现象如何动态地影响用户界面，并重新思考环境如何成为数字项目美学的一部分。其目的是就这种相互作用进行讨论，并进一步提高我们对它们的潜在健康益处的理解。
“
了解自然环境中的光影
灯光在材料上的相互作用会产生反射和阴影。直接放置在阳光下的材料会产生更强的反射和更明显的阴影。在阳光透过云层扩散或在建筑环境中反射时发生的自然环境照明下，由此产生的反射和材料上的阴影也是环境光。
在材料设计指南中，谷歌强调需要虚拟光来照亮数字设备的用户界面。这些虚拟光的形式是“关键光”，它能产生更清晰、有方向性的阴影，称为“关键阴影”，而“环境光”从各个角度出现，形成扩散的、柔和的阴影，称为“环境阴影”。
谷歌的材料设计阴影
虽然材料设计促进独立于环境的静态阴影，但以下探索旨在促进包括环境数据的材质上光和阴影的相互作用，以创建数字界面美学，为用户提供更动态的体验。
“
叠加虚拟光与环境数据
材料设计环境中的虚拟光固定在一个点上，并在一天中投射相同的阴影。虚拟光的一个更动态的实现可能是虚拟光与阳光同步，以创建抽象的视觉美学，突出一天的流逝。
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
如果觉得我们做的还不错点个赞和在看吧！：