原標題：「AR 學了4年半」 如何設計 AR 眼鏡軟件產品

這原本是《程序員》雜誌的約稿，由於我的問題超過了交稿日期，中間暫停了一段時間，現在終於把它寫完了。大概3300多字，閱讀時間約4分鐘。

目錄

在2012年 Google IO 大會上，謝爾蓋和一幫跳傘運動員共同揭幕了一款劃時代的產品 Google Glass。它時髦的外觀和超前的理念讓在場所有人都歡呼不已，而這也是我第一次近距離接觸到穿戴式 AR 設備。在這之後的2013年，我正式加入亮風臺信息科技的設計團隊，踏上了交互設計之路。最開始的時候，主要工作都是設計基於手機和 Pad 的 AR 產品（2D界面），跟一般的應用並沒有太大區別。而後隨着公司推出自己的 AR 眼鏡產品，一個前所未有的挑戰擺在設計團隊面前：基於 3D 空間重新設計相關的軟件產品。

隨着 AR 的發展和這些年的工作學習，我收穫了不少 AR 產品相關的設計知識。在這裏，我想跟大家分享關於 AR 眼鏡軟件產品設計，希望能對大家的工作有所幫助。

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

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

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

3D 界面有着區別於 2D 界面特殊的屬性，所以在設計上需要考慮更多，包括但不限於以下內容：

PS：5點要素由 8ninths團隊整理而成

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

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

圖片來自 HoloLens 官網

從形態上來說， AR 眼鏡（頭盔）跟手機、平板電腦等手持設備有着很大區別。但是從基礎的人機交互界面來說，它們還是有很大的共性，也比較符合經典的WIMP模式。那什麼是WIMP？

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

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

除了更多元的交互方式外，AR 眼鏡帶來的最大的改變就是信息呈現方式，即虛實融合的效果。這也是依靠於 AR 眼鏡的光學顯示方案，將虛像“投射”到用戶的環境。這裏的“投射”我加了一個引號，因爲虛像並不是真的投射在空中，而是根據眼球成像原理而形成的。

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

光學顯示方案舉例，圖片來自耐德佳官網

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

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

PS：真機預覽尤爲重要，我們團隊還專門開發了預覽界面設計的應用。

我們如何去產出設計方案？怎麼去做 Prototype？產出物又是什麼？如何與其他團隊成員溝通？圍繞這一系列問題，我想與大家分享個人總結的三種設計方法，並按照個人使用的頻率依次介紹。

視頻分鏡法

分鏡是各類影視作品製作時，用於描繪視頻畫面構成的最基本的形式，可以包括畫面、臺詞、聲音、動作等等內容。分鏡沒有絕對統一的格式，每種類型的作品、甚至每個導演的分鏡都可能是不一樣的。

圖片來自網絡

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

你可以根據自己需求自行設計表格和內容，然後打印出來；也可以直接用 A4 紙折出來，省去打印的麻煩。（我司提倡減少打印，並使用打印錯誤的 A4 紙來作爲草稿紙，比較環保嘛！）

手工模擬法

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

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

圖片來自 Youtube，作者 Tom Chi

這種方式是最身臨其境的，代入感也比較強。但受限於工作量的問題，我建議在大家已經確定了一些方案之後，再採用此方法來進行方案的模擬、測試與驗證。

腦補法

最粗暴的一種設計方法。畢竟腦子是個好東西，大家要經常用啊。當然我並不是說要你完全空想，而是建議結合真實的一些產品體驗、視頻圖文介紹等，結合自身的經驗來構想設計方案。（我建議大家在 Youtube 訂閱 HoloLens 的視頻，然後全部都看一遍，全部看，甚至還要包括它官方文檔中的視頻。）

最後，向各位推薦我的個人項目 ardesign.club，這是一個 AR 設計知識的網站。（歡迎投稿）

長文總結實屬不易，轉載請註明作者和原文鏈接。