|
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,它呈现出一个很拟物的工具箱。官方演示视频中,用它可以制作一个逼真的模型,那么势必需要将物体渲染地更加真实。
来做一个小火箭吧!
说了这么多都是关于 AR 的,其实 VR 也是同理。
举个 Google tilt brush 的例子。这是软件中提供的 Color picker,跟我们平时在桌面软件中使用的也差不多(扁平式的风格),而不是给你一盒“颜料”慢慢调色。
再次强调:Flat Design 是一种视觉设计风格,不局限于2D平面设计。
相关阅读:VR游戏界面设计干货分享:用户模型的建立
|
|