Apple Vision Pro 視覺與動效設計原則拆解
Apple?Vision Pro等頭顯產品出現之后,不少人也關注起了空間視覺設計和動效設計,而無論是做視覺還是做動效設計,其實都需要掌握一定的人體工學知識。這篇文章里,作者便針對Apple?Vision Pro的視覺和動效原則進行了拆解,一起來看。
「不想細看版:直接拉到文末看“總結一下”」
Vision Pro的視覺與動效篇一共分為7個部分:視覺深度提示、內容參數、眼睛費力度、虛擬對象的運動、頭部鎖定內容、窗口內運動、震蕩動畫。
前三個部分說的是視覺,后四個部分說的是動效。
無論是視覺還是動效,每個部分,都是人體工學基礎+設計經驗的組合介紹。
為什么要了解人體工學的基礎呢?
因為如果沒有基礎的知識打底,只看官方總結的經驗,就容易知其然不知其所以然,在應用中產生很多問題,更無法把官方總結的設計經驗適用到更廣泛的領域中。
一、視覺
用戶感知到的深度,可以通過平面的方式進行設計,也可以通過實際在Z軸上的位置來進行設計。平面的方式,提供的是視覺深度,是假三維;牽扯到Z軸的位置,提供的是確實深度,是真三維。
無論是真三維還是假三維,為了更好的進行空間視覺設計,需要首先了解一些人體工學的知識。
1. 人體工學
這部分,了解2個人體工學的知識。
第一,視覺系統辨別深度的方式。
視覺系統辨別深度的方式依靠2種線索:單眼線索和雙眼線索。
顧名思義,單眼線索只需要一只眼睛即可提供給我們視覺系統依據,雙眼線索需要依靠兩只眼睛才能提供深度依據。
(源自《AR界面設計》)
第二,人眼的舒適閱讀區域和注意力時長。
在頭部不主動轉動的情況下,正負30度的弧度,以及比視線水平位置稍稍靠下的位置更適合閱讀。
超過這個區域,即使用戶不轉頭,也會因為耗費精力而感到不那么舒適。
從視覺暫留(殘像)和瞬目反射(眨眼睛)的角度來說,我們的眼睛是不能一直工作的,在設計中可以余留出可以讓眼睛休息的時間。
視覺的余留有點類似于留白,讓眼睛不需要通過這部分視覺去識別出什么。比如兩個按鈕中間的空隙,兩個虛像之間的不重要的輔助內容等等。
2. 視覺設計
空間里的視覺設計,除了我們熟知顏色、大小等,還有尺寸、距離等??梢岳斫鉃椋?strong>一類是二維參數,即Sketch等二維設計軟件里可以調整的參數,一類是三維參數,即3Dmax等三維設計軟件里,多出來的那些可以調整的參數。
無論是二維參數還是三維參數,就可視化來說,都可以針對顏色、模糊、大小、動效、背景、光影、遮擋、密度這八種對象進行定義,這就是官方說明中所提到的:圖像線索用法。
1)圖像線索用法
我們可以通過這八種視覺設計用法,營造出視覺深度的感知。
顏色:顏色一方面可以喚起我們對這個虛像對應的真實物體的感知,一方面色彩本身也會影響我們對大小的感知。比如顏色的明度。
模糊:太遠的內容會有點模糊看不清楚,所以,模糊本身會帶來更遠的感知。
大?。撼WR是,近大遠小。
微動效:例如放大的動效和縮小的動效會感覺像是離近和離遠。
背景:光影、遮擋和密度也會給予我們深度的提示。
最后,謹慎使用密集的重復圖案,雙目AR眼鏡有一塊細分技術是雙目的合像,合不好會產生雙影的視覺感知。
2)內容參數
了解了八種視覺設計的用法,官方給出了三個更具體的參數建議:距離、尺寸和明暗的過渡。
① 距離
- 常規的閱讀距離要大于用戶的一臂之長;
- 要允許用戶可以調整這個距離;
- 放置在一臂以內距離的內容,需要符合兩個條件:要么是需要直接進行操作的內容,要么是短暫出現的內容。
② 大小和尺寸
無論是通過大小還是通過尺寸來設置,同一個內容要用戶在不轉頭的情況下就能看全。
③ 明暗過渡
突然切換到明亮和黑暗的環境中眼睛會有一段適應的時間,所以兩個明度相差太大的內容如果要切換,需要設置一個過渡過程。
二、動效
前部分的視覺,針對的是AR設計中內容本身的設計,而動效,就是AR設計中內容的運動。
首先還是從人體工學的知識開始。
1. 運動感知系統
人體對運動的感知,一方面來源于視覺系統,一方面來源于內耳的前庭覺。
前庭覺是位于內耳中的液體和器官,它們會告訴我們身體如何根據重力作用確認方向。當前庭系統的信息和視覺系統接受的信息相互沖突時,就容易造成生理上的頭暈、嘔吐等不適感。
大多數時候,用戶都是處于靜止狀態下在使用AR設備,因此,在深度距離上的動畫(前進后退等)要謹慎使用,充分弱化。
例如,大量虛擬內容前進這個動畫,會讓用戶與自己往前動產生混淆,可以在動畫上疊加透明度以弱化視覺感知。
再例如,大面積虛像內容的運動,會讓用戶與自己的運動產生混淆。窗口內的運動,介紹了這種動效的處理方式。
2. 內容與用戶的相對位置關系
Vision Pro介紹了三種內容模式:頭部鎖定內容(Head-locked)、世界鎖定內容(World-locked)和懶跟隨內容(Lazy follow)。
頭部鎖定內容:與用戶的頭部保持相對靜止狀態。通常適用于小型的界面,比如隨取隨用的操作欄。
世界鎖定內容:與地面保持相對靜止狀態,和我們物理世界的物品類似,是我們對內容熟悉的認知,所以如有可能優先使用這種模式。
懶跟隨內容:介于頭部鎖定和世界鎖定之間的一種模式。頭部微微移動的時候不會跟隨,只有用戶頭部大幅度移動時才會跟隨。等同于我在《AR界面設計》里介紹的C類。
3. 窗口內的動效
因為大窗口的內容動效可能讓用戶產生混淆,官方給了8點設計建議。
1)保證窗口內內容和物理世界保持水平
2)保證動效擴展中心點的穩定。這里有一個一個概念:擴散焦點,可以理解為動效的感知起點。
3)擴散焦點永遠保持在窗口內
4)避免單純無意義的角度移動(因為會讓焦點移動)
5)避免過快的動畫
6)如果動畫變化過大,使用漸近漸出過場銜接
7)前后移動的動效,內容間距放大,物體放小
8)使用低反光的材質
最后,無論窗口內還是外,AR界面設計不推薦震蕩動效,尤其是5s左右的重復。
總結一下:
- 掌握基本的人體工學知識,可以用活別人的經驗。
- 8個視覺設計用法,定義了兩類參數來提供三維效果(二維參數,提供視覺深度,即假三維效果;三維參數,提供確實深度,即真三維效果)。
- 動效設計的處理關鍵點:放慢節奏+可預測的。
專欄作家
林影落,微信公眾號:林間有影落,人人都是產品經理專欄作家。一枚會玩卡的用戶體驗設計師,《AR界面設計》作者,10年+UIUX設計經驗,專注于AR及智能化領域用戶體驗設計6年;設計&心理學教育背景,國家職業認證高級OH卡師/天賦挖掘教練。愿意用我的一份努力,讓設計這個領域在智能化的未來更有價值,讓設計師這個職業更加值錢!
本文原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自 Unsplash,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發揮!