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