兔斯霽：隨著 AR 的發(fā)展和這些年的工作學(xué)習(xí)，我收獲了不少 AR 產(chǎn)品相關(guān)的設(shè)計(jì)知識(shí)。在這里，我想跟大家分享關(guān)于 AR 眼鏡軟件產(chǎn)品設(shè)計(jì)，希望能對(duì)大家的工作有所幫助。

目錄

1. 2D 到 3D 的轉(zhuǎn)變
2. 3D 化思維
3. 相輔相成的人機(jī)交互
4. 屏幕與光學(xué)顯示的差異
5. 三種設(shè)計(jì)方法

在2012年 Google IO 大會(huì)上，謝爾蓋和一幫跳傘運(yùn)動(dòng)員共同揭幕了一款劃時(shí)代的產(chǎn)品 Google Glass。它時(shí)髦的外觀和超前的理念讓在場所有人都?xì)g呼不已，而這也是我第一次近距離接觸到穿戴式 AR 設(shè)備。在這之后的2013年，我正式加入亮風(fēng)臺(tái)信息科技的設(shè)計(jì)團(tuán)隊(duì)，踏上了交互設(shè)計(jì)之路。最開始的時(shí)候，主要工作都是設(shè)計(jì)基于手機(jī)和 Pad 的 AR 產(chǎn)品（2D界面），跟一般的應(yīng)用并沒有太大區(qū)別。而隨著公司推出自己的 AR 眼鏡產(chǎn)品，一個(gè)前所未有的挑戰(zhàn)擺在設(shè)計(jì)團(tuán)隊(duì)面前：基于 3D 空間重新設(shè)計(jì)相關(guān)的軟件產(chǎn)品。

隨著 AR 的發(fā)展和這些年的工作學(xué)習(xí)，我收獲了不少 AR 產(chǎn)品相關(guān)的設(shè)計(jì)知識(shí)。在這里，我想跟大家分享關(guān)于 AR 眼鏡軟件產(chǎn)品設(shè)計(jì)，希望能對(duì)大家的工作有所幫助。

2D 到 3D 的轉(zhuǎn)變

10年前，喬布斯帶來了全觸控屏幕的第一代 iPhone，一句“You can touch your music！”生動(dòng)形象地描述了這一開創(chuàng)性的交互方式——多點(diǎn)觸控。我們的生活中也開始被各種電子屏幕包圍，比如智能手機(jī)、平板電腦以及各種穿戴式設(shè)備，它們呈現(xiàn)著豐富多彩的信息。很多設(shè)計(jì)師的日常，也是跟一塊一塊屏幕“打交道”，用圖像、色彩、文字等構(gòu)建出各種樣式的界面，所有信息都被井井有條地排布在屏幕內(nèi)。

人與機(jī)器存在天生的隔閡，圖形用戶界面和交互方式的不斷革新正讓這個(gè)隔閡變得越來越小，但始終未能打破這層隔閡，哪怕是 iPhone。而直到 AR 眼鏡（頭盔）出現(xiàn)之后，這些內(nèi)容才有了“跨越”屏幕的可能，并跟真實(shí)的世界“融為一體”。人機(jī)交互界面，也開始從 2D 向 3D 跨越。（這里的“3D”不是指 3D 模型，而是整個(gè)三維空間。）

3D 化思維

很多事情往往都是說起來容易做起來難，即使我反復(fù)提醒自己是基于 3D 來設(shè)計(jì)界面，但在日常工作中還是會(huì)掉入 2D 的“坑”。也許是深受 2D 界面設(shè)計(jì)的影響，我在紙上繪制原型時(shí)必定先繪制一個(gè)方框作為 AR 眼鏡的 FOV（Field of View，可視區(qū)域），就好像設(shè)計(jì)手機(jī)應(yīng)用時(shí)必須先畫一個(gè)屏幕一樣。而這樣的設(shè)計(jì)方式很容易變得像在設(shè)計(jì)單純的手機(jī)應(yīng)用一樣，在真機(jī)的上驗(yàn)證結(jié)果也很不理想。

3D 界面有著區(qū)別于 2D 界面特殊的屬性，所以在設(shè)計(jì)上需要考慮更多，包括但不限于以下內(nèi)容：

1. 交互空間：空間大小、平面類型、遮擋關(guān)系
2. 輸入方式：語音、手勢、控制器、外部傳感器
3. 呈現(xiàn)信息類型：3D模型、圖片、2D界面
4. 音效：空間音效、界面反饋音效
5. 信息與環(huán)境的融合方式：無中生有、真實(shí)物體與虛擬信息疊加、遮擋真實(shí)環(huán)境

PS：5點(diǎn)要素由 8ninths 團(tuán)隊(duì)整理而成

在上述內(nèi)容中，交互空間無疑是重中之重。我后來又常犯的一個(gè)錯(cuò)誤就是在電腦上打開 Unity 3D，然后隔著屏幕用現(xiàn)成的 assets 布局所謂的 3D 界面。用“紙上談兵”這個(gè)成語來形容我初期的工作，再合適不過了。這種方式往往讓我忽略了對(duì)空間的考慮，限制了的思維，造成的結(jié)果往往是用戶“原地不動(dòng)”地在看著一個(gè) 3D 界面。假若你已經(jīng)想到要讓你的用戶“走動(dòng)”起來了，那至少已經(jīng)成功了一半，而另一半則是對(duì)各種細(xì)節(jié)的深思熟慮。我想分享一個(gè) HoloLens 的設(shè)計(jì)案例來加以說明，希望能讓大家有所啟發(fā)。

Holo Studio 是 HoloLens 上一個(gè)早期的演示項(xiàng)目，它可以讓用戶在三維空間中制作各種 3D 模型。在最初的版本中，Holo Studio 的“工作臺(tái)”被設(shè)計(jì)為一個(gè)懸浮在空中的方形（下圖左），就好像我們真實(shí)世界中的桌面一樣。然而生活的經(jīng)驗(yàn)告訴用戶——“很多人都是在坐在桌面前工作的”。這就導(dǎo)致用戶只會(huì)停留在“工作臺(tái)”的前面，而不會(huì)圍繞著“工作臺(tái)”走動(dòng)。吸取經(jīng)驗(yàn)教訓(xùn)之后，Holo Studio 的設(shè)計(jì)師將“工作臺(tái)”改為圓形，才讓這一問題得到顯著的改善。

（圖片來自 HoloLens 官網(wǎng)）

相輔相成的人機(jī)交互

從形態(tài)上來說， AR 眼鏡（頭盔）跟手機(jī)、平板電腦等手持設(shè)備有著很大區(qū)別。但是從基礎(chǔ)的人機(jī)交互界面來說，它們還是有很大的共性，也比較符合經(jīng)典的WIMP模式。那什么是WIMP？

WIMP是圖形界面電腦所采用的界面典范。在人機(jī)互動(dòng)領(lǐng)域之中最普遍的電腦互動(dòng)界面，WIMP堪稱無人能出其右，舉凡微軟的Windows、蘋果電腦的MacOS，甚至其它以X Window系統(tǒng)為基礎(chǔ)的操作系統(tǒng)，均采用WIMP此一界面典范。WIMP是由“視窗”（Window）、“圖標(biāo)”（Icon）、“選單”（Menu）以及“指標(biāo)”（Pointer）所組成的縮寫，其命名方式也指明了它所倚賴的四大互動(dòng)元件。——Wikipedia

在這里我想說明一點(diǎn)：任何設(shè)備的人機(jī)交互界面設(shè)計(jì)，都是有規(guī)律可循的，不要懼怕這些變化。下面是我整理的一張表格，列舉了部分常見設(shè)備的 WIMP 信息 ，供大家參考。

了解了這些共性之后，我們就能將多種交互方案有效地進(jìn)行結(jié)合。這也是為了在多種不同的場景下，選用不同的交互方式，最終達(dá)到同一個(gè)目標(biāo)。比如在 HiAR Glasses 上，作出“確認(rèn)”（需要與頭部光標(biāo)配合）的操作可以通過四種方式實(shí)現(xiàn)：手勢、語音、觸控板和藍(lán)牙外設(shè)。如果當(dāng)環(huán)境音嘈雜時(shí)，就可以使用手勢；當(dāng)不方便使用雙手的時(shí)候，可以使用語音；當(dāng)設(shè)備處于低電量模式下，可以自動(dòng)關(guān)閉很耗性能的手勢和語音，僅使用觸控板。

屏幕與光學(xué)顯示的差異（劃重點(diǎn)?。?/strong>