介面設計大未來-Apple Vision Pro設計解析(首部曲)

睽違8年，2023 年 6 月 5 日的WWDC蘋果開發者大會上，Tim Cook再次啟動了one more thing，這次介紹的產品為Apple Vision Pro — Apple 第一部空間運算設備。

在當天的Keynote speech中，Apple用了40分鐘來介紹Apple Vision Pro的軟硬體應用。看完介紹後，相信許多人已經滿頭問號。價格、上市日期、未來應用….等等的議題充斥著社群媒體。距離官方公佈的上市期（early 2024）至少還有半年的時間，除了地球上少數有機會親自體驗產品的幸運兒，我們能夠在上市前更了解Apple Vision Pro的設計細節呢？幸運的是，Apple在這次的WWDC中，也另外釋出了6隻Apple Vision Pro的UIUX設計介紹影片。接下來的幾篇文章中，我們將解析這些影片內容，並幫助讀者進行重點整理。讓我們開始進入Apple Vision Pro揭秘之旅吧！

這是Apple官方於WWDC釋出的首支介紹影片，影片內容可視為針對Apple Vision Pro的介面設計進行總覽式的介紹。在Apple Vision Pro的介面設計，我們就依據Apple官方的描述，定義為Spatial Design（空間性設計）。

Apple介紹影片都很有邏輯的進行架構編排，由於每以及的介紹內容都相當豐富，為了便於大家容易掌握主題內容，我們都會以mindmap的方式先整理出影片中的主題。以下是首集的主題架構：

簡單來說，本集的目的是：「如何設計出具有空間性的App」。

Familiar （易辨識）

如同Apple對於設計一致性（Consistency）的重視與遵守，在進行空間性設計時，也是從iPhone, iPad等設計介面進行延伸應用，讓使用者在戴上Apple Vision Pro時，能夠容易的辨識出介面指引與操作方式。

以Apple Music為例，iPad版本上的側邊欄（sidebars）、欄標（ tabs） 、搜尋欄（search fields）這三個設計部件，到了Vision Pro的空間性設計介面，也建議是採用一致性的設計概念，如此可便於使用者理解如何操作。

雖然我們都已經習慣視窗界面，然而在空間中，視窗的概念是「環繞」在你的周圍，而且具備有「距離感」。

在空間性設計中要維繫易辨識的操作，有以下三件事情必須留意：

Windows（視窗）
玻璃材質的UI設計，在空間性設計中是極為重要的，因為它象徵了「視窗」。玻璃材質視窗，除了幫助使用者理解操作範圍，並且在不同的光源環境中，起到了環境提示作用。

空間性設計的視窗界面，也具備移動（move）、關閉（close） 、resize（縮放）這三項視窗調整功能。

當使用者觸發視窗移動時，介面可依據使用者的需要進行向左、向右、向上、中心等方向的移動。

Sizing（畫面尺寸）
由於立體空間的遼闊性，代表了畫面尺寸也具有很大的彈性，這裡只要把握一個原則：根據內容制定視窗尺寸（Size windows for their content）即可。例如瀏覽器的內容適合篇垂直的長型設計，而簡報設計軟體則會偏向水平向的寬型設計。

在設計上，也可以運用空間性來重新針對畫面進行部署設計，以Keynote簡報軟體為例，播放簡報時的後續頁面提示，就可以獨立出另一個空間性視窗，讓使用者自由選擇趨前或者靠右。

Points（視點）
別於一般平面載具（例如 iPhone、iPad…等等），配戴Vision Pro進行瀏覽體驗時，可以依據需求改變畫面的視點。這裡需要注意，視點不只是等於距離的改變，你可以想像把iPhone靠近看跟拿很遠看，當你靠近看時，你無法看到整體內容，而拿遠看時，你無法清晰地看清楚所有內容。但是在空間性設計就不一樣了。當你想要改變觀賞距離時，內容會隨者你的試點進行對應的改變，讓你能夠在不同的距離都儘可能地看到清晰完整的內容。

Human-centered（以人為本）

好的設計師，一定會考量到以人（使用者）為本（中心）的設計原則，而在空間性設計中，這個設計原則有更新的詮釋。

Field of view（視野）
因為不需要拘泥於載具尺寸，所以在視野的運用上可以跳出傳統框架。以Safari為例，多頁面預覽的畫面尺寸，可以與單一網頁瀏覽的畫面不同。

Ergonomics（人因工程）
遵從人本設計，勢必也會思考人因工程，在空間性設計上，也必須考慮到使用者瀏覽的姿勢。

雖然空間性設計，可以根據不一樣的姿態，提供更貼心的瀏覽體驗，但在設計上也必須避免過度使用一些極端狀態，例如仰天俯視、低頭垂視，或者是回頭背視等等，這樣反而會讓瀏覽者不舒服。

另外在使用者頭部轉動時，要避免視窗隨時佔據使用者中間視角，最好是將是固定在原來位置。這樣可以避免使用者因為畫面持續的移動造成暈眩等不適感，也能夠讓使用者在不同觀賞角度時，依舊能透過眼睛掌握到整個空間。

Movement（移動）
雖然前段提到避免視窗移動，但是在某些狀況下必須移動視窗，例如使用者因為移動身體而改變了原本居中的位置。此時可以長按Vision Pro的皇冠旋鈕，讓視窗回歸到你目前的中心視點。

Dimensional（維度化）

空間性設計中，因為立體化了，所以對於維度的概念也必須改變。

Space（場地）
我們無法預知或限定使用者使用產品的場域環境，因此在設計上我們必須事先考量到環境的影像，並適時的做出改變。以Apple TV為例，當使用者想要移動視角的過程中，畫面並不會阻擋真實物體，等到確定好視角之後，畫面才會進行適度的遮蔽。這樣設計的目的，是便於使用者在操作Vision Pro過程中失去了物理空間的概念，讓使用者友善的沈浸在虛擬畫面與現實同時存在的場景裡。

在瀏覽的環境中，光線的不均勻也是常見狀況，因此在開發空間性App時，也必須思考到針對環境光源來進行自動調光。當然，如果在光賞影片時，不希望保留環境的通透感，可以選擇背景模式徹底的遮蔽現實環境。

Depth（深度）
深度的運用，能夠幫助使用者對於資訊層級（hierarchy）與焦點（focus）的掌握。例如3D物件在真實空間的位置與距離；觀看影片時，控制UI可以與影片以距離遠近方式分開；陰影的運用，也能幫助使用者理解相對空間位置；彈跳視窗的呈現，也可以運用陰影創造出不一樣的視覺深度。綜合以上的應用，都是可以更容易讓使用者進行操作。

Scale（尺寸）
不同觀賞尺寸下，在空間性設計上也可以進行對應的設計規劃。例如在觀賞小型畫面時，視窗可以採取簡單輕盈的設計介面。在大型畫面時，可以採取壯大遼闊的設計體驗。而在一些狀況下，建議採取與實際尺寸相符合的設計，例如線上販售的商品。

Immersive（沈浸感）

創造最佳的沈浸感，是空間性設計的重點，也是Vivison Pro的產品核心之一。

在此以Keynote軟體為例，在進行投影片整體瀏覽與編排時，可以使用較具通透感的視窗模式，當需要預覽投影片放映時，則可以使用調暗模式放大並聚焦於單張投影片，而想要模擬演講會場的情境時，則可以選擇場景環繞的演講模式，此時待播放的投影片提示只會佔據畫面的一小部分，使用者可以沈浸於演講現場。

Essential tips（必要提示）
引導使用者焦點為何，是沈浸體驗的一環。以冥想功能為例，一開始畫面呈現的焦點，是在引導使用者辨識出球體在空間中的位置。當位置確定後，就會引導使用者把焦點放在球體的脈動與顏色變化，使用者從不同角度也可以觀察到球體的立體感（如果你有使用過Apple Watch的冥想模式，你就會跟著球體脈動調整呼吸）。當冥想完成時，球體的葉片就會散開，使用者的焦點就會放在整個空間被散開的葉片包覆。要留意的是，這些焦點的變化，都必須充滿連貫性，才能讓使用者充分感受其沈浸感。

虛實混合對於沈浸體驗也很有幫助，例如背景模式的呈現，在呈現過程中，應該要逐漸的呈現畫面，而非瞬間切換讓使用者產生突兀感。在完成切換後，也可適當的露出真實環境的一小部分，讓使用者仍然可以意識到真實空間的存在。

創造栩栩如生的畫面，也可提升沈浸感，例如置入細微動態影片（例如湖光瀲灩的湖面、白雲悠悠的天空）。當然也可以結合Vision Pro所提供的空間音效。

增加適度的光影效果也有幫助。例如在觀賞影片時，可以用適度的光暈，來模擬出戲院觀影的沈浸感受。僅需要適度的增加，不需要太刻畫所有細節（你不用連戲院的座椅跟逃生指示燈都模擬出來～）。

Comfort（舒適性）
避免太快速的畫面切換或移動，可有效提升使用者舒適性。這裡會常運用的是淡入與淡出的效果。另外，在畫面上用最簡單的UI設計提示使用者控制動作，也是很重要的一件事情。

Authentic（真實感）

如何把你的設計概念，轉變成真實可用的空間性設計App，是未來所有設計師的課題。除了擴大想像力，也可以先從既有簡單的需求作為出發點。例如照片App的設計，在iPhone上已經有相當成熟的介面設計與應用。而在空間性設計App中，即可以iPhone的UI/UX作為基礎，進行照片集瀏覽與聚焦瀏覽的介面設計。對了，務必記得你已經在進行空間性設計，全景照片就可以善用此環境設計出更真實的全景瀏覽喔！

在Apple第一個介紹空間性設計的影片中，大致說明了以下幾大設計原則：

寫完這篇文章，讓我回想到每當我們走進電影院時，電影開始前會有的這一段影音畫面：

空間性設計的最高境界，莫過於這支影片的標語：

本集原始影片連結：https://developer.apple.com/videos/play/wwdc2023/10072

關於Apple Vision Pro的其他設計重點介紹與更多數位設計相關文章，歡迎至ABLE部落格（https://blog.able.cool）閱讀與分享！