起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識學了4年半AR 后，我總結了AR 眼鏡軟件產品的設計經驗
隨著 AR 的發展和這些年的工作學習，我收獲了不少 AR 產品相關的設計知識。在這里，我想跟大家分享關于 AR 眼鏡軟件產品設計，希望能對大家的工作有所幫助。
在2012年 Google IO 大會上，謝爾蓋和一幫跳傘運動員共同揭幕了一款劃時代的產品 Google Glass。它時髦的外觀和超前的理念讓在場所有人都歡呼不已，而這也是我第一次近距離接觸到穿戴式 AR 設備。在這之后的2013年，我正式加入亮風臺信息科技的設計團隊，踏上了交互設計之路。最開始的時候，主要工作都是設計基于手機和 Pad 的 AR 產品（2D界面），跟一般的應用并沒有太大區別。而后隨著公司推出自己的 AR 眼鏡產品，一個前所未有的挑戰擺在設計團隊面前：基于 3D 空間重新設計相關的軟件產品。
2D 到 3D 的轉變
10年前，喬布斯帶來了全觸控屏幕的第一代 iPhone，一句“You can touch your music！”生動形象地描述了這一開創性的交互方式——多點觸控。我們的生活中也開始被各種電子屏幕包圍，比如智能手機、平板電腦以及各種穿戴式設備，它們呈現著豐富多彩的信息。很多設計師的日常，也是跟一塊一塊屏幕“打交道”，用圖像、色彩、文字等構建出各種樣式的界面，所有信息都被井井有條地排布在屏幕內。
人與機器存在天生的隔閡，圖形用戶界面和交互方式的不斷革新正讓這個隔閡變得越來越小，但始終未能打破這層隔閡，哪怕是 iPhone。而直到 AR 眼鏡（頭盔）出現之后，這些內容才有了“跨越”屏幕的可能，并跟真實的世界“融為一體”。人機交互界面，也開始從 2D 向 3D 跨越。（這里的“3D”不是指 3D 模型，而是整個三維空間。）
3D 化思維
很多事情往往都是說起來容易做起來難，即使我反復提醒自己是基于 3D 來設計界面，但在日常工作中還是會掉入 2D 的“坑”。也許是深受 2D 界面設計的影響，我在紙上繪制原型時必定先繪制一個方框作為 AR 眼鏡的 FOV（Field of View，可視區域），就好像設計手機應用時必須先畫一個屏幕一樣。而這樣的設計方式很容易變得像在設計單純的手機應用一樣，在真機的上驗證結果也很不理想。
3D 界面有著區別于 2D 界面特殊的屬性，所以在設計上需要考慮更多，包括但不限于以下內容：
- 交互空間：空間大小、平面類型、遮擋關系
- 輸入方式：語音、手勢、控制器、外部傳感器
- 呈現信息類型：3D模型、圖片、2D界面
- 音效：空間音效、界面反饋音效
- 信息與環境的融合方式：無中生有、真實物體與虛擬信息疊加、遮擋真實環境
（PS：5點要素由?8ninths團隊整理而成）
在上述內容中，交互空間無疑是重中之重。我后來又常犯的一個錯誤就是在電腦上打開 Unity 3D，然后隔著屏幕用現成的 assets 布局所謂的 3D 界面。用“紙上談兵”這個成語來形容我初期的工作，再合適不過了。這種方式往往讓我忽略了對空間的考慮，限制了的思維，造成的結果往往是用戶“原地不動”地在看著一個 3D 界面。假若你已經想到要讓你的用戶“走動”起來了，那至少已經成功了一半，而另一半則是對各種細節的深思熟慮。我想分享一個 HoloLens 的設計案例來加以說明，希望能讓大家有所啟發。
Holo Studio 是 HoloLens 上一個早期的演示項目，它可以讓用戶在三維空間中制作各種 3D 模型。在最初的版本中，Holo Studio 的“工作臺”被設計為一個懸浮在空中的方形（下圖左），就好像我們真實世界中的桌面一樣。然而生活的經驗告訴用戶——“很多人都是在坐在桌面前工作的”。這就導致用戶只會停留在“工作臺”的前面，而不會圍繞著“工作臺”走動。吸取經驗教訓之后，Holo Studio 的設計師將“工作臺”改為圓形，才讓這一問題得到顯著的改善。
圖片來自 HoloLens 官網
相輔相成的人機交互
從形態上來說， AR 眼鏡（頭盔）跟手機、平板電腦等手持設備有著很大區別。但是從基礎的人機交互界面來說，它們還是有很大的共性，也比較符合經典的WIMP模式。那什么是WIMP？
WIMP是圖形界面電腦所采用的界面典范。在人機互動領域之中最普遍的電腦互動界面，WIMP堪稱無人能出其右，舉凡微軟的Windows、蘋果電腦的MacOS，甚至其它以X Window系統為基礎的操作系統，均采用WIMP此一界面典范。WIMP是由“視窗”（Window）、“圖標”（Icon）、“選單”（Menu）以及“指標”（Pointer）所組成的縮寫，其命名方式也指明了它所倚賴的四大互動元件?！猈ikipedia
在這里我想說明一點：任何設備的人機交互界面設計，都是有規律可循的，不要懼怕這些變化。下面是我整理的一張表格，列舉了部分常見設備的 WIMP 信息 ，供大家參考。（看不清點原圖放大）
了解了這些共性之后，我們就能將多種交互方案進行有效地進行結合。這也是為了在多種不同的場景下，選用不同的交互方式，最終達到同一個目標。比如在 HiAR Glasses 上，作出“確認”（需要與頭部光標配合）的操作可以通過四種方式實現：手勢、語音、觸控板和藍牙外設。如果當環境音嘈雜時，就可以使用手勢；當不方便使用雙手的時候，可以使用語音；當設備處于低電量模式下，可以自動關閉很耗性能的手勢和語音，僅使用觸控板。
屏幕與光學顯示的差異（劃重點?。?/h2>
除了更多元的交互方式外，AR 眼鏡帶來的最大的改變就是信息呈現方式，即虛實融合的效果。這也是依靠于 AR 眼鏡的光學顯示方案，將虛像“投射”到用戶的環境。這里的“投射”我加了一個引號，因為虛像并不是真的投射在空中，而是根據眼球成像原理而形成的。
人在看近處的物體時，遠處的影像響就會虛化；若看遠處的物體時，近處的影像就會虛化。就是依靠這種本能，人才會察覺到距離感。而 AR 眼鏡則是在兩塊光學鏡片上顯示有細微差異的畫面，迫使眼球主動對焦以合成清晰的圖像，再配合環境實物的參照、AR 虛像的運動與縮放，從而讓人感覺到 AR 虛像的距離感和空間感。
光學顯示方案舉例，圖片來自耐德佳官網
說到設計，我們通常關注色彩和視覺上的表現。對于一般的電子屏幕，設計師一般只需考慮屏幕密度和尺寸比例即可。但對于光學鏡片顯示方案來說，還要考慮設計稿（電腦屏幕）與實機顯示的差異、虛實環境融合的效果及不同亮度的現實環境。
舉個最簡單的例子，Photoshop 中使用 灰白相間的網格圖來表示透明，而在 AR 眼鏡中則使用黑色來表示透明。因為 AR 眼鏡的畫面不是直接顯示在鏡片上，而是將 OLED 微顯示屏幕（可理解為手機顯示屏）上的畫面，并配合相關元器件折射到鏡片上的。OLED 這種屏幕的特性就是不需要背光，所以顯示黑色的時候像素點是不發光的，故沒有光可以折射到鏡片上，也就沒有任何畫面。這種顯示方案也導致呈現的界面幾乎都會帶有一點透明度，且會受到環境光源和現實場景的影響。
PS：真機預覽尤為重要，我們團隊還專門開發了預覽界面設計的應用。
三種設計方法
我們如何去產出設計方案？怎么去做 Prototype？產出物又是什么？如何與其他團隊成員溝通？圍繞這一系列問題，我想與大家分享個人總結的三種設計方法，并按照個人使用的頻率依次介紹。
視頻分鏡法
分鏡是各類影視作品制作時，用于描繪視頻畫面構成的最基本的形式，可以包括畫面、臺詞、聲音、動作等等內容。分鏡沒有絕對統一的格式，每種類型的作品、甚至每個導演的分鏡都可能是不一樣的。
圖片來自網絡
對于2D界面的來說，在設計初期我們會快速在紙上繪制界面的線框圖，可能還會補上一些簡單的說明。而對于 3D 界面的設計來說，則還需考慮用戶的使用場景。出于信息的保密考慮，我不能直接把工作中產出的內容直接貼上來，故單獨放一個“分鏡”的樣例表格。
- 序號：可選項
- 場景：用戶主要描繪用戶、場景和 AR 虛像的關系
- FOV 界面：在光學鏡片上，視野范圍內的 AR 虛像的線框圖
- 內容：可填寫一些補充內容，比如交互方式、聲音、動畫等
你可以根據自己需求自行設計表格和內容，然后打印出來；也可以直接用 A4 紙折出來，省去打印的麻煩。（我司提倡減少打印，并使用打印錯誤的 A4 紙來作為草稿紙，比較環保嘛！）
手工模擬法
相信大家小時候都做過手工，那現在就是發揮你動手能力的時候了。我們可以利用手上的任何東西來制作簡易的物體，放置在真實的環境中，以此代替 AR 虛像。除了 A4 紙、便簽、膠布、直尺等常用辦公用品以外，還可以用樂高積木來拼搭一些不規則的物體。戴眼鏡的朋友可以在自己的眼鏡上用白板筆畫上黑色方框，用來表示 FOV 區域。（當然我還是更推薦去買一個護目鏡。會議室用到的激光筆，則可以綁在頭上當作人眼的視線，模擬視覺光標。
大家知道 Goolge Glass 的第一個可用原型花了多久做出來的嗎？答案是一天?？聪聢D中，這基本就是拿現成的東西拼湊起來的。所以大膽地去嘗試各種可能吧。
圖片來自 Youtube，作者 Tom Chi
這種方式是最身臨其境的，代入感也比較強。但受限于工作量的問題，我建議在大家已經確定了一些方案之后，再采用此方法來進行方案的模擬、測試與驗證。
腦補法
最粗暴的一種設計方法。畢竟腦子是個好東西，大家要經常用啊。當然我并不是說要你完全空想，而是建議結合真實的一些產品體驗、視頻圖文介紹等，結合自身的經驗來構想設計方案。（我建議大家在 Youtube 訂閱 HoloLens 的視頻，然后全部都看一遍，全部看，甚至還要包括它官方文檔中的視頻。）
作者：兔斯霽
來源：https://zhuanlan.zhihu.com/p/27894902
本文由 @兔斯霽 授權發布于人人都是產品經理，未經作者許可，禁止轉載。
- 目前還沒評論，等你發揮！
