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

产品设计 2016-06-23

最近兔斯霁回答了这个问题: 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平面设计。

责编内容by:LCLの海 (源链)。感谢您的支持!

您可能感兴趣的

全球第一家“虚拟现实内容制作中心”正式成立... 2017年7月19日下午,“虚拟现实内容制作中心新闻发布会暨中心启动仪式”在京举办。 Advertisement 本次新闻发布会邀请了多位重量级领导及嘉宾参加会议: 工业和信息化部电子信息司——乔跃山副司长 工业和信息化部电子信息司—...
YC 2018 Demo Day | 54家创企亮相:生物医疗仍受热捧,区块链异军突起... 【猎云网(微信号:)】3月21日报道 (编译:王潇宵) 一年一度的Y Combinator Demo Day如期来到,此次路演汇集了来自生物科技、机器人技术和金融科技领域的备受关注的创企。来自23个国家和地区的141家公司参与了该路演,他们将在这两天向公众展示自己。 Y Combi...
How to stream your Mac video games to Twitch using... Want stream your Mac developed games and VR apps to Twitch? You can by using Gameshow! Apple has been gearing up developers to create macOS-na...
寒冬后的VR影视:变化有多大?机会在哪里? —— 专访Jaunt中国CEO方淦... 风口每天都在变。2015年底成为资本宠儿的 VR ,在寒冬之后似乎已经渐渐变的沉寂。没有人否认它仍然是未来。但此前 VR 泡沫中的那些印象:低水平的 VR 设备,不成型的 VR 内容,不明晰的商业模式,还有疯狂的资本运作,让很多人对 VR 持怀疑态度。 不过,正在这寒冬之中,也在...
Google Earth VR加入街景,这次真的能“近距离”看世界!... 去年 11 月份,Google 联合 HTC Vive 推出 VR 版 Google Earth,让用户可以“足不出户看世界”。显然,这还不够,日前 Google 将 Street View (街景)功能加入其中,这将带来更好的 VR 体验。 雷锋网曾报道, Google Earth V...