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

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

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

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

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

3D 化思維

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

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

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

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

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

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

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

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

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

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

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

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

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

除了更多元的交互方式外，AR 眼鏡帶來的最大的改變就是信息呈現(xiàn)方式，即虛實融合的效果。這也是依靠于 AR 眼鏡的光學(xué)顯示方案，將虛像“投射”到用戶的環(huán)境。這里的“投射”我加了一個引號，因為虛像并不是真的投射在空中，而是根據(jù)眼球成像原理而形成的。

人在看近處的物體時，遠(yuǎn)處的影像響就會虛化；若看遠(yuǎn)處的物體時，近處的影像就會虛化。就是依靠這種本能，人才會察覺到距離感。而 AR 眼鏡則是在兩塊光學(xué)鏡片上顯示有細(xì)微差異的畫面，迫使眼球主動對焦以合成清晰的圖像，再配合環(huán)境實物的參照、AR 虛像的運(yùn)動與縮放，從而讓人感覺到 AR 虛像的距離感和空間感。

光學(xué)顯示方案舉例，圖片來自耐德佳官網(wǎng)

說到設(shè)計，我們通常關(guān)注色彩和視覺上的表現(xiàn)。對于一般的電子屏幕，設(shè)計師一般只需考慮屏幕密度和尺寸比例即可。但對于光學(xué)鏡片顯示方案來說，還要考慮設(shè)計稿（電腦屏幕）與實機(jī)顯示的差異、虛實環(huán)境融合的效果及不同亮度的現(xiàn)實環(huán)境。

舉個最簡單的例子，Photoshop 中使用 灰白相間的網(wǎng)格圖來表示透明，而在 AR 眼鏡中則使用黑色來表示透明。因為 AR 眼鏡的畫面不是直接顯示在鏡片上，而是將 OLED 微顯示屏幕（可理解為手機(jī)顯示屏）上的畫面，并配合相關(guān)元器件折射到鏡片上的。OLED 這種屏幕的特性就是不需要背光，所以顯示黑色的時候像素點(diǎn)是不發(fā)光的，故沒有光可以折射到鏡片上，也就沒有任何畫面。這種顯示方案也導(dǎo)致呈現(xiàn)的界面幾乎都會帶有一點(diǎn)透明度，且會受到環(huán)境光源和現(xiàn)實場景的影響。

PS：真機(jī)預(yù)覽尤為重要，我們團(tuán)隊還專門開發(fā)了預(yù)覽界面設(shè)計的應(yīng)用。

三種設(shè)計方法

我們?nèi)绾稳ギa(chǎn)出設(shè)計方案？怎么去做 Prototype？產(chǎn)出物又是什么？如何與其他團(tuán)隊成員溝通？圍繞這一系列問題，我想與大家分享個人總結(jié)的三種設(shè)計方法，并按照個人使用的頻率依次介紹。

視頻分鏡法

分鏡是各類影視作品制作時，用于描繪視頻畫面構(gòu)成的最基本的形式，可以包括畫面、臺詞、聲音、動作等等內(nèi)容。分鏡沒有絕對統(tǒng)一的格式，每種類型的作品、甚至每個導(dǎo)演的分鏡都可能是不一樣的。

圖片來自網(wǎng)絡(luò)

對于2D界面的來說，在設(shè)計初期我們會快速在紙上繪制界面的線框圖，可能還會補(bǔ)上一些簡單的說明。而對于 3D 界面的設(shè)計來說，則還需考慮用戶的使用場景。出于信息的保密考慮，我不能直接把工作中產(chǎn)出的內(nèi)容直接貼上來，故單獨(dú)放一個“分鏡”的樣例表格。

• 序號：可選項
• 場景：用戶主要描繪用戶、場景和 AR 虛像的關(guān)系
• FOV 界面：在光學(xué)鏡片上，視野范圍內(nèi)的 AR 虛像的線框圖
• 內(nèi)容：可填寫一些補(bǔ)充內(nèi)容，比如交互方式、聲音、動畫等

你可以根據(jù)自己需求自行設(shè)計表格和內(nèi)容，然后打印出來；也可以直接用 A4 紙折出來，省去打印的麻煩。（我司提倡減少打印，并使用打印錯誤的 A4 紙來作為草稿紙，比較環(huán)保嘛?。?/p>

手工模擬法

相信大家小時候都做過手工，那現(xiàn)在就是發(fā)揮你動手能力的時候了。我們可以利用手上的任何東西來制作簡易的物體，放置在真實的環(huán)境中，以此代替 AR 虛像。除了 A4 紙、便簽、膠布、直尺等常用辦公用品以外，還可以用樂高積木來拼搭一些不規(guī)則的物體。戴眼鏡的朋友可以在自己的眼鏡上用白板筆畫上黑色方框，用來表示 FOV 區(qū)域。（當(dāng)然我還是更推薦去買一個護(hù)目鏡。會議室用到的激光筆，則可以綁在頭上當(dāng)作人眼的視線，模擬視覺光標(biāo)。

大家知道 Goolge Glass 的第一個可用原型花了多久做出來的嗎？答案是一天?？聪聢D中，這基本就是拿現(xiàn)成的東西拼湊起來的。所以大膽地去嘗試各種可能吧。

圖片來自 Youtube，作者 Tom Chi

這種方式是最身臨其境的，代入感也比較強(qiáng)。但受限于工作量的問題，我建議在大家已經(jīng)確定了一些方案之后，再采用此方法來進(jìn)行方案的模擬、測試與驗證。

腦補(bǔ)法

最粗暴的一種設(shè)計方法。畢竟腦子是個好東西，大家要經(jīng)常用啊。當(dāng)然我并不是說要你完全空想，而是建議結(jié)合真實的一些產(chǎn)品體驗、視頻圖文介紹等，結(jié)合自身的經(jīng)驗來構(gòu)想設(shè)計方案。（我建議大家在 Youtube 訂閱 HoloLens 的視頻，然后全部都看一遍，全部看，甚至還要包括它官方文檔中的視頻。）

作者：兔斯霽

來源：https://zhuanlan.zhihu.com/p/27894902

本文由 @兔斯霽 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。