AR/VR 的界面是否可沿用扁平化设计?

最近兔斯霁回答了这个问题: ARVR的界面适合延续现在手机的扁平化界面设计吗? ,然后把答案搬运过来了。

结论:扁平化界面设计可以被沿用于 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.

参考链接: 如何理解 Material Design 的 Z 轴 – LCLの海 – 知乎专栏

参考链接: https:// material.google.com/wha t-is-material/environment.html#

3.扁平的风格,与拟物兼容并包

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

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

来做一个小火箭吧!

说了这么多都是关于 AR 的,其实 VR 也是同理。

举个 Google tilt brush 的例子。这是软件中提供的 Color picker,跟我们平时在桌面软件中使用的也差不多(扁平式的风格),而不是给你一盒“颜料”慢慢调色。


再次强调: Flat Design 是一种视觉设计风格, 不局限于2D平面设计。

稿源:LCLの海 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 产品设计 » AR/VR 的界面是否可沿用扁平化设计?

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录