ARVR的界面適合延續現在手機的扁平化界面設計嗎？

01-06

謝邀，這是個好問題，但答案是——VRAR的界面『不太適合』延續現在手機的扁平化界面設計』。

VRAR中的界面元素需要模擬現實中的物體或者場景，因為VRAR的本質是複製或還原現實世界的場景、物體和體驗。

用戶因為對現實世界的熟悉，所以一進入VR、AR就馬上能夠學會裡面的交互，因為操作和交互的學習成本低廉（比如用戶在VR中有一個預期，操作完之後得到的反饋和他在現實世界中操作完後得到的反饋一樣）。

我個人認為扁平化之所以適合於移動端，是因為移動端的交互是基於紙面交互的設計語言——你的手指怎樣搓動紙片對應MultiTouch（上下左右滑動），而到了VRAR中的互動式基於motion的，比如上下左右前後的移動、傾斜和旋轉。

另外：以前我們做移動端設計常說的是使用場景（use scenarios），而我們現在經常掛在嘴邊的還原怎樣的現實世界的場景（real-world scenarios）。

—————————————————————————————————————

而在VR中，界面是作為整個VR世界一部分出現的，所以VR中的界面元素就是整個VR世界的一部分。

反過來說，我們平時生活的空間，我們的卧室，我們的客廳，就是我們的界面，它們向我們傳達信息，舒服自然，以致於我們忽略了它們。

—————————————————————————————————————

在頭戴顯示器中有一種界面是扁平的，那就是HUD。

它看起來非常不舒服，如果離眼睛太近，感覺就像你眼鏡上面貼了紙，甚至讓你無法聚焦的感覺——從而引發accommodation-vergence conflict。

所以，HUD形式的界面會有點像HoloLens的『尾隨（tag-along）功能』——界面附著在三自由度的球面上，跟著你，而在六自由度的空間中，這種貼在三自由度球面上的『浮空』的界面，感覺非常難受。（你們目前看到的扁平化的ARVR界面，都是目前設計師對從傳統互聯網屏幕界面轉移到VRAR界面的一種妥協。）

下面是我個人總結的自己比較喜歡VRAR界面類型：

—————————————————————————————————————

1、將操作盤為界面

在oculus的雕塑類應用《medium》中，就將工具盛放在工作台上，符合現實世界中雕刻師在雕塑工作室雕雕塑的習慣。

PSVR的遊戲《Battlezone》，這是個常見的座艙式射擊遊戲。

你朝下看，可以看到整個操作界面（而這個過程相當於讓用戶探索，周圍的整個場景構成了用戶的界面）：

它們就像真正的駕駛艙一樣，給你提供信息。

在這裡，整個場景成為了你的界面，場景中的元素承載了你需要的信息。

—————————————————————————————————————

2、將桌面作為界面

在遊戲《I expect you to die》中所有的界面、頁面被放在了一個工具箱里。

而遊戲的功能介紹做成了『說明書』的形式，你可以把它拿起來。

（你所在的屏幕中心為raycast，投射一條射線和界面元素相交，這個點剛好是你眼睛converge匯聚所在的深度）

開始按鈕也被做在了這裡：

在遊戲《Keep Talking and Nobody Explodes》中

將操作的說明書做在了牆上（當用戶在房間中遇到困惑隨時向左轉頭就可以得到指示。）

而將任務書以實體的形式放在了桌子上：

時間的顯示做成了桌面上的時鐘

菜單和相關設置都放在了這本冊子里：

在遊戲《Waltz of the Wizard》中，也是將桌面做成了玩家進行魔法實驗的界面。

桌面上的每個物體可以拿起來放到鍋里或者添加其他化學藥劑：

《jobs simulator》這個遊戲模擬的未來廚房，廚房的桌面就是這個遊戲的界面：

在遊戲《Hover Junkers》中，則是將路標作為界面：

—————————————————————————————————————

3、將房間作為界面

在oculus的雕刻應用《medium》中，就用傳統的雕塑工作室做成場景。

這樣做的好處是：

讓你有深度和尺度的信息，你知道自己雕刻的虛擬雕塑有多大。
能將雕塑穩穩地放在地面上。
四周的窗外的光線不斷變化（虛擬的太陽轉動發生的日照變化），讓你能更好地把握雕塑的形態。

在這個場景中是沒有視覺冗餘的，背景在陰影下被隱去，只剩下一個乾淨的、被陽光照耀的虛擬雕塑。

在《the lab》中，整個實驗室房間里有很多桌面，每個桌面承載著不同的區域：

比如這個桌面上放滿了道具：

比如前面這個桌面承載著上帝視角下的桌面遊戲——

—————————————————————————————————————

在sony直系的《playroomVR》中，設計了一個VR的玩具房間。

—————————————————————————————————————

4、將界面放在用戶的手上

而用戶在VR中的化身（avatar），構成了最直接的界面，在很多三自由度的遊戲中，你低頭朝下看，VR中的化身會『左手拿著地圖』、『右手拿著指南針』。

有沒有想過？這就是很自然的界面吖。

就好像你在沒有手機之前，你在外面探險，遇到疑惑需要導航時，就會掏出指南針和地圖。

在傳統的雕塑中，雕刻家用次要手（secondary hand）抓著雕塑保持穩定，而用主要手（primary hand）進行雕刻。

在medium中，你左手抓住一個虛擬雕塑，右手在上面『雕刻』。

（左手可以抓住它微微轉動手腕調整角度。）

左手的主菜單主要承載所有重要的選項，而右手手左手選擇後的某個工具。

左手像夾住調色盤一樣，然後用右手在上面指，能夠做到很精細的調節。

我回憶起自己畫油畫的時候，左手拿調色盤，右手拿畫筆畫，還要用筆戳左手調色盤上的顏料調色，這就是一個簡單的右手和左手手持界面的交互。

oculus的《medium》中，便將界面放在了左手上。

google tilt brush

將工具和調色盤一股腦放在左手

—————————————————————————————————————

二、AR界面

AR 界面最早也是Google glass那種貼在顯示器上的界面，和前面說的一樣，影響眼睛正常聚焦，極其不舒服。除此之外它比VR更危險的是會『遮擋視線』！

1、將全息物體放在現實空間里

在AR中，AR的界面元素——全息物體，作為整個現實空間的一部分，它放置在現實場景之上。

比如magic leap中的全息物體就是整個現實世界的一部分，所以將全息物體放在桌上。

在magic leap中你收到郵件，就會有一個全息的立體的郵件圖標向你飛來。

每一個全息物體都盛放在現實場景上

—————————————————————————————————————

2、將2D界面貼在現實物體上

在hololens中，有沒有平面類的文件呢？當然是有的，那他們就以我們現實生活中的物品，比如書頁、文稿的形式出現，而VRAR作為三維圖形的產物，理應發揮它的優勢，展示更多的三維信息，就像我們生活中的物體大多是三維的一樣。

當然，手部也可以用來承載AR界面：

結論：扁平化界面設計可以被沿用於 AR/VR 的界面

首先希望大家能明白：Flat Design 是一種視覺設計風格，不僅適於電子產品的 GUI 設計，也適用於一般的海報、冊子、宣傳畫等傳統印刷載體，同時又不局限於2D平面設計。它更多是代表的是視覺傳達，與交互的關係不是那麼緊密。X3

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/what-is-material/environment.html#

3.扁平的風格，與擬物兼容並包

不談需求談設計，就是扯淡。不同的設計風格，適用於不同的設計風格。即使是在 Flat Design 大行其道（可能）的今天，還是很有應用扔在使用擬物的設計，比如遊戲。我想說的是，設計風格並不受使用設備和技術的約束，而更多的是看應用場景。

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

來做一個小火箭吧！

說了這麼多都是關於 AR 的，其實 VR 也是同理。

舉個 Google tilt brush 的例子。這是軟體中提供的 Color picker，跟我們平時在桌面軟體中使用的也差不多（扁平式的風格），而不是給你一盒「顏料」慢慢調色。

再次強調：Flat Design 是一種視覺設計風格，不局限於2D平面設計。

首先得定義什麼是扁平化設計

什麼是扁平化設計 (Flat Design)，扁平化設計是未來的趨勢嗎？ - 用戶界面設計

如果單單把扁平化設計定義為視覺效果上的設計，我認為扁平化依然會在vr／ar中延續，並且會和擬物化設計配合使用。比方說下圖裡面的Modern UI、還有冰箱上的to－do list就是典型的扁平化設計，而左下角的天氣表示方式則明顯是擬物化的設計。

如果從交互方式來講，扁平化還是擬物化恐怕得根據具體的使用情景考量。

比如「刪除」這個操作，以htc vive為例：

扁平化可能是：用手柄的扳指點擊一個物體，然後在空間中的菜單上點擊「刪除」按鈕。擬物化可能是：用手柄抓住一個物體，然後將其丟到一個垃圾桶實物里完成刪除操作。

如果是在一個工具化的vr繪圖軟體里（例如 google的 tilt brush），我可能會更喜歡前者的刪除方式，因為它效率更高。如果是在一個遊戲里，我可能會更喜歡後者的交互方式，因為它更有趣。總而言之，扁平化還是擬物化我認為在vr／ar中會相輔相成，適不適合還是得看你開發的是什麼應用，目標人群是誰，旨在滿足用戶的什麼需求（額，好像扯到產品經理的方向去了）

好不容易VR了，你願意摸扁平的胸器啊！真不會做ui！

虛擬現實或者現實增效要在一個立體空間里做信息的傳遞與互動了，比起平面，要考慮的元素就多多了，扁平化的設計還是有適用的地方，但既然有3D縱深這個優勢，那很多地方就有會比扁平化設計更優勢的做法。但是完全的擬物化設計應該是不合適的，除非是代替模型或實境效果圖，因為完全擬物化會模糊可互動模塊和不可互動模塊的區別，從而降低操控體驗。

很明顯不適合，一個三維空間，顯示二維界面一定不合適。這就如同科幻大片，你不看3d電影一樣讓人乏味。

hololens的廣告中不是有了么，模型設計師用手拉一下，就可以像做陶藝一樣改變模型的形狀。

所以，未來的目標一定是向做陶藝的方向走，現在的什麼手柄都弱爆了，完全是沿用以往家用機的思路。

一副裝滿感測器的手套，才是最好的輸入設備。

既然如此，交互內容自然就多了，我們不再是手指點擊一個app，移動位置，而是用手抓取一個app盒子，放到另一個位置。這樣的界面，當然是3d的。

審美這東西，是會變的。

扁平風格的界面圖形在 3D 大作中比比皆是，布局上考慮 VR 特點，完全適用於 VR

這個問題先得回答手機的界面趨於扁平化的發展過程，從擬物的「重」質感到目前的扁平」輕「體驗是遷移真實世界的操作到平面信息設備，這也是個繼承和發展的趨勢，ARVR則是從信息返回到真實空間的體驗中去，所以一定程度遷移扁平化的信息輸出，但是VRAR的目的是奔著」求真「，所以接下的發展趨勢是往3D 多維信息方向，然而人本身不傾向於做複雜信息的處理，所以獲取直觀必要的信息才是用戶訴求。