Apple Vision Pro設計解析(第二集)-操作模式

前言

如果你閱讀完本系列的第一篇文章，必定會對於Apple Vision Pro的產品更感興趣。本篇文章中，我們將介紹在空間性設計中，是怎麼樣進行互動的。

Design for spatial input

空間性設計的操作，除了用手以外，來多了眼睛作為操作工具。另外聲音（語音）也會是一個操作媒介。當然，使用者也可以結合搖桿來玩遊戲。不過在多數狀況下，空間性設計將會以眼（Eyes）和手（Hands）為操作主角。

依照慣例，我們先為大家整理出本集的主題架構：

空間性設計的操作行為，很清楚的有以下三個特性：

Personal（個人化） Comfortable（舒適） Precise（精確）

每個人的眼球運動與手勢動作，都會有自己的獨特性，Vision Pro的硬體將會根據使用者獨特的眼手動作進行行為追蹤與操作校正。當然，舒適且精確的操作，也會是空間性設計的特性。

眼

眼球操作中，我們將針對以下幾項重點進行說明：

Comfortable（舒適性）

雖然在空間性設計中，空間是非常寬廣的，但大多時候使用者在瀏覽時，頭部大多是停留在正前方的位置。因此在設計畫面的寬度，儘量集中於前方30度至60度的範圍。

而次要的操作介面，則可以安置在圍繞最適瀏覽範圍的附近

除了最適瀏覽範圍，將主要與次要的介面安置在不同景深的位置，也能夠幫助使用者輕鬆且舒服的理解操作介面的部署。

Easy to use（簡易操作）

為了讓眼睛簡易的辨識與操作介面，在icon設計上就必須以簡單為主，壁面太過複雜的icon繪製。

在icon的外緣，也儘量以圓潤的線條進行包覆，因為如果選擇尖銳的線條，視覺焦點會放在外緣，而不在icon線條本身。同時外緣的設計，也必須避免增加額外的邊緣或者增加陰影，這些額外的設計都會讓眼睛操作時失焦。

在icon設計上，切記整體間距加上尺寸總和範圍不應小於 60 pt（注） （注）：pt＝Point＝點，1pt＝1/72 英吋。

當我們已經瞭解了目標區域對眼睛的重要性之後，接下來，我們必須確保將目標區域保持在空間中的任何位置。這裡會涉及到介面的縮放。在空間性設計中，分別有動態比例（Dynamic scale）以及固定比例（Fixed scale）兩種。在動態比例的狀態下，介面如果距離使用者越遠，在真實空間中會自行的放大，讓使用者在遠距離下依舊能夠清晰地看到介面內容。如果採取固定比例，則介面遠離使用者時，真實介面比例式維持不變的，因此對使用者而言，看到的介面會變得比原來還要小。

Responsive（響應式）

在空間性設計中，眼球的移動即象徵著滑鼠游標移動，因此在空間性設計上，必須做出研究移動位置的響應式介面提示。

Intentional（意圖性）

為了更清楚地利用眼睛來進行操作識別，在空間性設計上，會把眼球停滯在特定焦點的時間作為意圖考量。例如當眼球集中於某一個特定icon打一定時間時，icon下方會出現icon的說明提示，而當眼球聚焦在麥克風icon上，即會啟動語音輸入功能，或者是眼球停滯在某一排icon排列區時，此排icon會展開呈現出所代表的功能說明。

Conclusions（結論）

以上介紹了眼球相關的操作原則，下面為重點整理：

將主要內容設計在使用者前方 設計出容易引起眼球注意的UI元素 重視眼球的最小專注區域 運用hover效果來提供操作回饋 根據眼球停滯意圖來呈現額外的資訊

手

Hand gestures（手勢）

手勢的操作，是空間性設計操作的重大環節，必須運用不同的手勢來達成個別的操作目的。例如單手雙指的捏合，象徵著對物件的點擊。而雙手搭配雙指捏合，並且進行雙手的靠近及遠離，則可以實現元件的縮效與放大。

雖然在空間性設計系統中，已經內建了許多手勢操作，但仍然會有其他的特殊狀況，會需要設計客製化的手勢，以下為設計客製化手勢的幾項原則：

易於理解與操作 避免與系統既有手勢產生衝突 操作舒適與可靠 人人皆可使用 明確無誤、不含糊

Eyes and intent（眼睛與專注點）

眼球與手勢的搭配，能夠更彈性的進行更多更複雜的功能操作。以圖片瀏覽為例，當使用者眼球專注於照片中某一個區域時，同時進行縮放手勢的操作，此刻照片會特別針對視覺焦點區域進行縮放。

另一個例子，眼球停滯在不同區域時，可以利用手勢在當下注視的區域進行文字書寫或者繪圖。

Direct touch（直接觸摸）

除了遠程操作，使用者也可以將介面拉近，執行更直覺的操作行為，例如把瀏覽器拉近，用手指以類似觸控螢幕的操作方式滑動網頁，或者是呼叫出虛擬鍵盤進行打字，也能夠把3D物件如同玩具般拉近、轉動、縮放。

如同眼球的操作方式，手勢的操作也可以結合hover的提示，例如鍵盤打字時，手指頭指向的位置，可以使用明亮化的UI進行位置提示，而指頭點擊後則可產生出敲擊的視覺效果，當然如果搭配上敲擊的聲音，就會讓整體的操作更加真實。

Conclusions（結論）

以上介紹了手部相關的操作原則，下面為重點整理：

使用熟悉的手勢語言 只在必要時客製化手勢 配眼球焦點進行互動 在適當的狀態下進行直接性操作 在互動操作時提供清楚的操作回饋

結語

透過這一集的解讀，讓我們更深入的了解到如何操作Vision Pro，對照目前的介面操作，在空間性設計平台中，眼球的任務取代了滑鼠，而雙手除了刷螢幕和打鍵盤以外，還要會比手勢（划拳？），相信未來的世界會更加有趣。

附註 本集原始影片連結：https://developer.apple.com/videos/play/wwdc2023/10073 關於Apple Vision Pro的其他設計重點介紹與更多數位設計相關文章，歡迎至ABLE部落格（https://blog.able.cool）閱讀與分享！ Able Studio Founded in Taiwan, we emphasizes building the right image to take company’s international competitiveness to the next…blog.able.cool 第一集-設計總則 第二集-操作模式 第三集-使用者介面 第四集-共享體驗 第五集-空間音訊 最六集-無障礙設計