游戏开发论坛

 找回密码
 立即注册
搜索
查看: 3693|回复: 0

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

[复制链接]

1万

主题

1万

帖子

3万

积分

论坛元老

Rank: 8Rank: 8

积分
36572
发表于 2016-6-27 16:22:30 | 显示全部楼层 |阅读模式
QQ截图20160627161623.jpg

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

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

  答案是肯定的

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

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

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

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

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

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

1.jpg

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

  《Iron Man》

2.png

  《Psycho Pass》

3.png

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

4.png

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

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

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

5.png

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

  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.

6.png

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

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

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

7.png

  来做一个小火箭吧!

8.png

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

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

9.png

10.png

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

12.png

  相关阅读:VR游戏界面设计干货分享:用户模型的建立

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

作品发布|文章投稿|广告合作|关于本站|游戏开发论坛 ( 闽ICP备17032699号-3 )

GMT+8, 2024-12-4 16:31

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表