Apple Vision Pro 空間設計基本原則拆解

0 評論 4378 瀏覽 6 收藏 23 分鐘

本篇文章將對Apple Vision Pro的空間設計進行拆解,作者以五大空間設計原則為基礎對此產品進行分析,能給產品設計的伙伴們提供一些參考幫助,希望能對你有所啟發。

AR設計,是基于已有設計基礎的一次設計升維,在短短20分鐘的官方視頻中,給出了五個基本空間設計原則:熟悉感、以人為中心、空間維度、沉浸感、真實可信

用一句話概括,就是基于原來沉淀的設計基礎理論,加上新維度后的升級和應用。

用一個詞概括,就是“深度”。也是我在自己的書和之前文章里所給出的AUI關鍵性區別之一。而在對Vision Pro空間設計基本原則的學習中,也加深了我對深度這一增加的維度,對整個界面設計所造成的影響有了更深的理解。

以下文字,按照我的收獲,拆解了這些基本原則,希望對你有所幫助。

官方視頻學習地址:https://developer.apple.com/videos/play/wwdc2023/10072/

一、熟悉感

熟悉感的兩點:窗口和點距。而其中很大一部分的筆墨,又給了窗口。

窗口的設計,沿用了我們在電腦的運用上逐漸形成的習慣和認知。

所以,官方設計原則中的多窗口、窗口的大小、窗口的擺放和關閉都傳承了屏幕界面的思維。

1. 多窗口

AR解決了屏幕大小的限制,真正做到了想大就大。(想起了我2年多以前給UXPA錄的課,有提到這點)

有一些更多的是:

  • 盡量讓一個應用在一個窗口里。
  • 允許一個應用多窗口。

看似有點矛盾,不過如果基于對注意力的考慮就不難理解了。

一個應用在一個窗口節省了注意力。一個應用多個窗口,也是節省注意力。因為,窗口不重要,重要的是里面的內容。

在允許一個應用多窗口這點里,提到的平級窗口、次級窗口、操作欄單獨放置,都是為了聚焦內容本身,從而節省用戶注意力。

2. 窗口的大小

窗口大小需要根據應用內容來設置,這是官方給出的指導,也是Mac或PC上的設計延續。

3. 窗口的擺放

移動、關閉和大小調整。

窗口的移動和關閉稍有點學習成本,不同于MAC上原有的,鼠標按住頂部欄就可以拖動,這里的拖動和關閉入口是放在下面,通過眼動觸發。

Apple Vision Pro 空間設計基本原則拆解

大小調整更隱蔽,需要眼睛注視到角落才會出現提示性的UI,不過對于已經習慣Mac或PC上操作的用戶來說,還是比較容易想到的。

Apple Vision Pro 空間設計基本原則拆解

在環境中但又能區別。

蘋果使用了玻璃質感的界面材質來保證窗口與真實環境的區別性,又用光線保證了它在環境中的融合感。

對于通用性的系統設計來說,玻璃質感是一種很好的選擇,如果是特定的應用,倒是也可以嘗試不一樣的風格。

對光線的運用,則是AR界面設計里新的知識點。

雖然設計原則這一節并沒有過多的說明,但結合宣傳視頻所見,要達到這樣的效果需要設計和研發共同的精雕細琢,細微之處見真章,很佩服他們在表現光線運用上所付出的投入。

Apple Vision Pro 空間設計基本原則拆解

值得注意的是,多窗口這種設計雖然看起來更易用,但并不是所有AR設備都可以使用的方法,必須要配備3DOF或6DOF的眼鏡設備才行。

另外,窗口設計也是之前被吐槽的部分,因為熟悉感帶來的另一面就是不夠具有突破性,整個界面看起來依然是平面化的。所以,我還是那句話,適合的才是最好的。

二、以人為中心

Vision Pro 設計原則的第二點,以人為中心,主要講了三個方面:FOV、人機工學和運動。

1. FOV

FOV,是視場角(Field of View)的意思,在《AR界面設計》里我也有介紹。

基礎原則里提供了兩點設計原則:

  • 將最主要的內容放在顯示區域中心。
  • 使用寬屏的界面以適配人的視場角。

這兩點不難理解。

  • 第一點是人的注意力很窄小,而且集中在人視野的中心。你可以試試把手臂伸直,人的注意力相對于所有輸入信息的比例,就等同于此時手的大拇指指甲蓋大小。
  • 第二點是人的視場角,左右可以達230度,上下120度,是一個寬屏。當然,目前的AR設備的顯示區域也都是寬屏的。

Apple Vision Pro 空間設計基本原則拆解

這里面有個典型的設計問題,由于目前AR設備的顯示區域都遠遠小于人的可視范圍,在虛像顯示范圍有限的情況下,實際用戶看到的界面和你設想的界面是略有差別的。

以視頻里的圖舉個例。如果設備顯示FOV不夠大,虛擬界面會被切掉一些。

Apple Vision Pro 空間設計基本原則拆解

被切掉一部分的虛擬界面示意

如何讓用戶感知不到實際的顯示區域是有邊界的呢?這里面有蠻多可以嘗試和探索的地方,是很有意思的設計點,提供2點憑借供參考:

  • 第一個憑借是對用戶注意力的應用。
  • 第二個憑借是無邊框產生的無界感知。

2. 人機工學

Vision Pro 基本設計原則的第二點中的人機工學,里面介紹的內容可以用另一個詞來講:用戶位姿。

用戶位姿,是指界面的設置,基于用戶的位置和姿態而設定。

里面給出了4個準則,簡單歸納如下:

  • 設置界面的默認距離。
  • 把界面擺放在用戶手臂范圍外以鼓勵用戶操作。
  • 界面的角度和距離應該隨著用戶的個性姿態有變化。
  • 當用戶頭動的時候,內容最好錨定不動。

1)默認設置距離

由應用的場景定位決定,一般系統級的界面會比我們看電腦時的電腦屏幕遠,如果是主打觀影類的會更遠一些,如Xreal為4M/6M,微軟的Hololens是2m的默認距離。

Apple Vision Pro 空間設計基本原則拆解

2)交互距離

對于需要交互的界面,自然點來說應該在手臂伸長的范圍內。不過,這是在手可以直接操作界面(例如手直接點擊虛擬的按鍵觸發響應)的情況下來說的。

Apple Vision Pro 空間設計基本原則拆解

Apple的手勢交互更類似于隔空交互,在手勢可以識別的范圍內,用戶特定的手勢可以對界面上的內容進行交互操作。

Apple Vision Pro 空間設計基本原則拆解

3)動態位姿

以用戶的實時或個性位姿來設置界面相對最佳的位置。例如高一點的用戶,界面會高一些,躺著的用戶,界面朝向為斜下方等。

Apple Vision Pro 空間設計基本原則拆解

如果設備支持6DOF,可以定義的更精細一點,例如用戶可以稍微走近或離遠一點看虛擬界面內的文字,界面本身不會發生移動。

但如果用戶決定換一個地方閱讀,例如從床上到沙發上,用戶移動的距離超出一個設定值,虛擬界面跟隨移動到新地點,再重新校準和用戶的相對距離和朝向。

4)用戶頭動,內容錨定

在用戶頭動的時候將內容固定在原地,可以給用戶更多自由。這似乎和上一點又是相反的。

可以理解為,在用戶的注意力被環境中別的吸引時,讓內容不搶用戶視野的鏡頭。

例如觀看網頁時,被房間里小狗小貓的聲音吸引,用戶可以轉頭看到視野下方的它們,而不用被跟隨的界面阻礙。再例如,用戶不自覺的動動頭部放松時,不會影響虛擬界面的擺放。

3. 運動

Vision Pro推薦靜態體驗,即在用戶靜止不動的情況去設計AR應用。

在我自己的經驗中,用戶行走過程下的AR界面設計,需要考慮的設計點以及遇到的技術難點都比靜態時要增加許多,所以如果可能,盡量考慮讓用戶在不動的情況下完成應用所需要傳達的體驗內容。

三、空間維度

空間維度,是基本原則中占用篇幅中最多的一點,英文詞是“dimensional”,中文意思是“有尺寸的”、“有維度的”。

在數學和物理學中,維度是描述空間或物體特征的一個量,通常用長度、寬度和高度等尺寸來表示。因此,“dimensional” 這個詞可以用來表示一個物體或概念具有多個尺寸或特征,或者需要考慮多個方面才能完整描述。

這個很有意思,說明可以讓我們產生空間感的方面有很多,導致設計也可以從很多方向切入,當然,這也同樣帶來了設計的難度。

在官方介紹里,這部分分了三個方面:

  • 空間
  • 深度
  • 尺寸

1. 空間

空間,是利用空間的優勢去設計界面。

第一是不需要嚴格被真實空間的物理特性限制,比如界面窗口可以和物理世界交叉,比如界面大小可以擴大到影院屏幕大小,超出真實物理空間的容納范圍。

Apple Vision Pro 空間設計基本原則拆解

這里不得不感嘆下蘋果的細節處理,這種移動過程中交叉部分的透明度降低,停止后完全顯示的設計,在我們的產品里可能完全排不上優先級……

Apple Vision Pro 空間設計基本原則拆解

第二是可以創造一個全新的空間,這里提到Vision Pro設定的一個模式:full space(全空間),與之相對的另一個模式是share space(共享空間)。

2. 深度

深度,一個新的吸引注意力和表達層級感的設計維度。

對于深度的利用,從Vision Pro的基本原則里可以總結為五個方面:距離、層級、光影線索、微距感、厚度。

  • 距離:就直覺來說,放在遠處的虛像可以設計的比較大,并且適合做一些遠距離交互的操作設定。放在近處的虛像可以設計的比較小,并且適合做一些直接操作的設定,另外也方便用戶360度環繞觀察它。
  • 層級:主內容前面小的操作欄,通過深度表達了層級。

Apple Vision Pro 空間設計基本原則拆解

  • 光影線索:通過光線和陰影來突出內容和明晰虛像的空間位置,讓虛像更加融合在空間內。

Apple Vision Pro 空間設計基本原則拆解

  • 微距感:聚焦的時候可以使用距離來突出激活態。

Apple Vision Pro 空間設計基本原則拆解

  • 厚度:不是任何內容都需要厚度。也可以從另一個角度解釋,模型的投入畢竟比平面UI更多,所以如果都能達到目的,使用平面素材也是一種很好的方案。

3. 尺寸

尺寸:虛擬內容的尺寸,是一個新的設計方式。

不同的尺寸會帶給人不同的感覺。小的虛像會讓人感覺更輕盈和私人,大的虛像可以提供更加沉浸的感覺。某些內容,適合以它在物理世界的真實尺寸顯示。

Apple Vision Pro 空間設計基本原則拆解

空間、深度、尺寸,是空間維度設計的三個切入點。但如果只能記下一個,我推薦深度,因為不管是空間還是尺寸,都是因為深度,才帶來了與原有屏幕界面不一樣的設計維度,名為空間的設計維度。

四、沉浸感

AR內容要帶來沉浸感,將用戶完全吸引在虛擬的空間內,更多的做法是像VR一樣,讓虛擬內容盡可能的包圍用戶,占據TA的全部視野,盡可能的完全忽視掉現實空間。

對于沉浸感,Vision Pro給出了三個要點:

  • 空間光譜
  • 關鍵提示
  • 舒適感

1. 空間光譜

空間光譜,是對AR界面是一種空間界面設計的進一步應用,它可以展現在眼前,也可以包圍,更可以包裹。

Apple Vision Pro 空間設計基本原則拆解

這就是空間畫布和我們之前畫布最大的一個區別,其畫布形狀可以在三維空間產生各種變化。

這里,也介紹了Vision Pro里共享空間(Share space)和全局空間(Full space)的兩個概念,在全局空間,我們不僅可以創造出全新的空間,也可以結合現有空間來締造。

這里也有一個小提示,可以用調光(diming),也就是我們在屏幕界面設計中常用的蒙層來聚焦內容,引導用戶的注意力。

Apple Vision Pro 空間設計基本原則拆解

如果能利用現實空間來達到沉浸式體驗也是不錯的做法,例如結合實際空間的AR游戲。

2. 關鍵提示

關鍵提示,是在AR界面設計時一些設計建議,一共4點:

1)引導用戶的注意力

現實+虛擬,帶來不同的體驗的同時必然會增加注意力的損耗,好的設計能夠讓用戶的注意力關注在需要關注的地方。Vision Pro 提供了4個可以引導用戶注意力的設計角度:聲音、材質、色彩、漸變的動效

2)謹慎思考和現實的融合

Vision Pro提供了環境的線索,虛擬的內容可以和真實的環境進行融合,但這樣的融合要自然且有意義。

  • 第一,在新環境和當前環境的切換上,需要有過渡。
  • 第二,我再增加一點:虛擬內容要和真實的環境有邏輯關聯。

Apple Vision Pro 空間設計基本原則拆解

3)生動體驗

塑造生動體驗,Vision Pro提供三個建議:微動畫、聲音、少即是多。

  1. 微動畫:這也不是什么新鮮的設計手法了,現有的屏幕界面設計有很多可以借鑒的地方。
  2. 用聲音塑造氛圍:對于投入產出比來說,我覺得是一個非常劃算的設計點。但也會遇到一些問題,比如硬件終端本身的支持(Vision Pro大概不用擔心),嘈雜環境下的低體驗度。
  3. 少即是多??梢杂煤苄〉脑O置來提供更大的體驗,比如官方案例中,使用微小的光照反射在地板上,而不必大面積渲染來營造出電影院的真實效果。少即是多這個設計原則并不是新鮮事情,但AR界面中,需要有很多新的運用。

3. 舒適感

舒適感,是和控制感一起被提到的。

面對新的界面,讓用戶感到整個系統界面在自己的控制下,是創造使用舒適感的一個基本要求。

Apple Vision Pro 空間設計基本原則拆解

三個設計建議:

  1. 畫面切換,無論是虛到實,還是實到虛,漸近漸出。
  2. 避免大的,快速的動畫。容易造成眩暈。
  3. 清晰的功能可視化和必要的指引。

五、真實可信

真實可信,是指充分利用設備的能力,使用空間性創造直觀、引人入勝和豐富的體驗。將想法聚焦成一個主題,從一個方面切入,用一個應用的空間來創造出一個主題。

如何切入?

1)找一個關鍵的動作

這個關鍵動作,只可能在空間上成立,Vision Pro的例子是相冊,單張照片可以按照畫面里真實的比例呈現,以及全景模式的展現,都是空間界面才能帶來的體驗。

Apple Vision Pro 空間設計基本原則拆解

2)聚焦一個角度

要么是幫助用戶完成任務,要么是喚起用戶感情,要么……在這個基礎上利用空間來設計界面,聚焦一個主要的提升點,讓已有的內容展現出新的活力。

Apple Vision Pro 空間設計基本原則拆解

真實可信這點講述的內容很少,因為大部分需要基于實際應用和情況來思考,這是一個新的畫布上,有待后續的AR設計師填補的部分。

六、總結

  • Vision Pro五大基本設計原則:熟悉感、以人為中心、空間維度、沉浸感、真實可信。
  • 熟悉感:對已有內容的再應用。
  • 以人為中心、空間維度、沉浸感:是空間設計的重點。增加一個維度后,帶來了設計的升級和體驗的升級。
  • 真實可信:理論簡單,需要基于實際應用和情況,從實踐中來體會。

專欄作家

林影落,微信公眾號:林間有影落,人人都是產品經理專欄作家。一枚會玩卡的用戶體驗設計師,《AR界面設計》作者,10年+UIUX設計經驗,專注于AR及智能化領域用戶體驗設計6年;設計&心理學教育背景,國家職業認證高級OH卡師/天賦挖掘教練。愿意用我的一份努力,讓設計這個領域在智能化的未來更有價值,讓設計師這個職業更加值錢!

本文原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App