AR/VR 的界面是否可沿用扁平化設計?

分類:設計 時間:2016-10-11

點擊上方“亮風臺HiScene”可以關注我們哦!

兔斯霽

歡迎在知乎上關注@兔斯霽,交流討論AR與產品設計。

依稀記得2013年 Apple 推出 iOS7 的時候,扁平化設計(下稱 Flat Design)的討論被推到了風口浪尖,同時“扁平化”和“擬物化”的優劣之爭也持續升溫。而現在,當討論“降溫”之后,Flat Design 也逐步被大眾所接受。各家大廠也都在推行自己的設計方式(比如 Google 的 Material Design),讓 Flat Design 在 2D 的 GUI 上迸發活力與創意。

伴隨著 AR 技術和 AR 智能設備的興起,GUI 設計與表現也逐步從 2D 平面轉向 3D 空間。那么,追求虛擬內容與真實環境融合的 AR,是否還可以沿用偏抽象化的 Flat Design 呢?

答案是 YES!

1

扁平的風格,追求更好的信息展示

我們都知道,AR 技術可以將虛擬物體疊加到真實世界,融合并進行互動。不過要以復雜的真實環境作為“背景畫布”,GUI 的設計則要重點考慮如何更好地呈現信息,便于瀏覽與交互。那么 Flat Design 的優勢就體現出來了:

• 更好地呈現內容和數據,避免過多視覺元素對信息辨識造成干擾

• 適用于透明化的效果,便于用戶觀測外部環境

下圖 Hololens 中的一個 Holographic 在桌子上的真實效果。我們可以看到 Menu (三個方形的按鈕),直觀的圖標與文字指令可以讓人很快地了解操作方式。這也是繼承于微軟自家的 Metro UI ,Flat Design 的代表之一。

很多影視作品中的酷炫界面( FUI ),也是 Flat Design 的一種體現:

《Iron Man》

《Psycho Pass》

《エヴァンゲリオン新劇場版:破》

2

扁平的風格,不代表扁平的內容

目前很多 AR 效果都是基于 SLAM 技術(如 Hololens),可以對空間進行重構,這也讓 AR 的交互從傳統 2D 平面轉為 3D 空間,從 xy 軸變成了 xyz 軸。這也使得虛擬的數字內容,更多地都將以 3D 模型的形態呈現。 GUI 的風格可以是扁平的,但是 GUI 當中的內容其實也可以立體的、擬物的、豐富的,人與界面的交互也是可以自然的。

下圖是我在辦公室里添加 Holographic 的效果,它們都處于真實的 3D 空間中。圖中的 Holographic(地球、云朵、冰山)雖然也是一些模擬真實物體的 3D 模型,但視覺上是 Low Ploy 風格,講究低細節、抽象化,也可以理解為是另一種 Flat Design。

順便提一下手機產品設計中對于 3D 空間的應用,能讓各位意識到扁平的設計也可以是立體的。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 extendingtowards the viewer. Every sheet of material occupies a single position along the z-axis and has a standard 1dp thickness.

參考閱讀:

如何理解 Material Design 的 Z 軸

https://zhuanlan.zhihu.com/p/19975734

3

扁平的風格,與擬物兼容并包

我們在設計產品的時候,最重要的一點就是從真實需求出發。不談需求談設計,就是扯淡。不同的設計風格,適用于不同的產品。即使是在 Flat Design 大行其道的今天,還是很有應用仍在使用擬物的設計,比如部分追求場景真實還原的游戲。我想說的是,設計風格并不受使用設備和技術的約束,而是取決于應用場景。

這是 Hololens 中的 Holo Studio 的 Holographic,也是官方演示視頻中的一個 Demo,它呈現出一個很擬物的工具箱。官方演示視頻中,用它可以制作一個逼真的模型,那么勢必需要將物體渲染地更加真實。

來做一個小火箭吧!

4

那 VR 的設計呢?

說了這么多都是關于 AR 的,其實 VR 也是同理。下圖是一個名為 Google tilt brush 的 VR 項目,是基于 HTC Vive 的一個 VR 畫圖軟件。軟件中提供的 Color picker,跟我們平時在桌面軟件中使用的也差不多(扁平式的風格),而不是給你一盒擬物的“顏料”來慢慢調色。

總的來說,Flat Design 更側重于視覺效果上的呈現,不僅適用于一般的海報、手冊、宣傳畫等傳統平面載體,也適于電子產品的 GUI 設計。同時又不局限于 2D 的設計,在 3D 數字化的空間當中, Flat Design 也將繼續發揮它的優勢。

致力提供最自然人機交互,挖掘最深度數據價值。

HiAR qq群:263842074

長按二維碼關注


Tags: 虛擬現實

文章來源:http://mp.weixin.qq.com/s?__biz=MjM5MDM3MjEyMA==


ads
ads

相關文章
ads

相關文章

ad