扁平，追求更好的信息展示——AR/VR 界面扁平化设计研究

2016-06-27

GameRes游资网授权发布文 / 兔斯霁

目前链接VR/AR设备的终端不仅只有PC，还有将手机放进眼镜盒里，例如暴风魔镜这类的，而手机的界面是扁平化设计的，那么AR/VR 的界面设计能否沿用手机扁平化界面的设计风格呢？

答案是肯定的

首先希望大家能明白：Flat Design 是一种视觉设计风格，不仅适于电子产品的 GUI 设计，也适用于一般的海报、册子、宣传画等传统印刷载体，同时又不局限于 2D 平面设计。它更多是着重于视觉传达，与人机交互的关系不是那么紧密。

PS：后续的内容主要以 AR 举例为主，主要分为3部分。

1、扁平的风格，追求更好的信息展示

我们都知道，AR 技术可以将虚拟物体叠加到真实世界，融合并进行互动。不过要以复杂的真实环境作为“背景画布”，GUI 的设计则要重点考虑如何更好地呈现信息，便于浏览与交互。那么 Flat Design 的优势就体现出来了：

更好地呈现内容和数据，避免过多视觉元素对信息辨识造成干扰
适用于透明化的效果，便于用户观测外部环境

这是 Hololens 中 Holographic 的在我的桌子上的真实效果，你可以看到 Menu （三个方形的按钮），轻巧的 Metro UI 很快让我了解可以进行的操作，这跟你在地铁里看指示牌是一个道理。

很多影视作品中的也有很多 FUI 的设计：

《Iron Man》

《Psycho Pass》

《エウ?ァンケ?リァ◇新剧场版：破》

2、扁平的风格，不代表扁平的内容

目前很多 AR 都是给基于 SLAM 技术（如 Hololens），可以对空间进行重构，这也让 AR 的交互从传统 2D 平面转为 3D 空间，从 xy 轴变成了 xyz 轴。这也使得虚拟的数字内容，更多地都将以 3D 模型的形态呈现。 GUI 的风格可以是扁平的，但是 GUI 当中的内容其实也可以立体的、拟物的、丰富的，人与内容的交互也是可以立体的。

这是我办公室里能看到的 Holographic，它们处于 3D 的空间中，但你能说这不是扁平化的风格吗？PS：图中的 Holographic，比如地球、云朵、冰山，本身就是 Low Ploy 风格，讲究低细节、抽象化，也可以理解为是另一种 Flat Design。

顺便提一下手机产品设计中对于空间的应用，能让各位意识到扁平的设计也可以是立体的。

Google 的 Material Design 其实早就引入了 Z 轴的概念，将整个场景立体化而不局限于平面。通过不同的层级位置，去影响视觉的显示效果。

The material environment is a 3D space, which means all objects have x, y, and z dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the positive z-axis extending towards the viewer. Every sheet of material occupies a single position along the z-axis and has a standard 1dp thickness.

3、扁平的风格，与拟物兼容并包

不谈需求谈设计，就是扯淡。不同的设计风格，适用于不同的产品。即使是在 Flat Design 大行其道（可能）的今天，还是很有应用仍在使用拟物的设计，比如部分追求画面写实的游戏。我想说的是，设计风格并不受使用设备和技术的约束，而是取决于应用场景。

这是 Hololens 中的 Holo Studio 的 Holographic，也是官方演示视频中的一个 Demo，它呈现出一个很拟物的工具箱。官方演示视频中，用它可以制作一个逼真的模型，那么势必需要将物体渲染地更加真实。