Apple?Vision Pro等頭顯產(chǎn)品出現(xiàn)之后，不少人也關(guān)注起了空間視覺設(shè)計和動效設(shè)計，而無論是做視覺還是做動效設(shè)計，其實都需要掌握一定的人體工學知識。這篇文章里，作者便針對Apple?Vision Pro的視覺和動效原則進行了拆解，一起來看。

「不想細看版：直接拉到文末看“總結(jié)一下”」

Vision Pro的視覺與動效篇一共分為7個部分：視覺深度提示、內(nèi)容參數(shù)、眼睛費力度、虛擬對象的運動、頭部鎖定內(nèi)容、窗口內(nèi)運動、震蕩動畫。

前三個部分說的是視覺，后四個部分說的是動效。

無論是視覺還是動效，每個部分，都是人體工學基礎(chǔ)+設(shè)計經(jīng)驗的組合介紹。

為什么要了解人體工學的基礎(chǔ)呢？

因為如果沒有基礎(chǔ)的知識打底，只看官方總結(jié)的經(jīng)驗，就容易知其然不知其所以然，在應(yīng)用中產(chǎn)生很多問題，更無法把官方總結(jié)的設(shè)計經(jīng)驗適用到更廣泛的領(lǐng)域中。

一、視覺

用戶感知到的深度，可以通過平面的方式進行設(shè)計，也可以通過實際在Z軸上的位置來進行設(shè)計。平面的方式，提供的是視覺深度，是假三維；牽扯到Z軸的位置，提供的是確實深度，是真三維。

無論是真三維還是假三維，為了更好的進行空間視覺設(shè)計，需要首先了解一些人體工學的知識。

1. 人體工學

這部分，了解2個人體工學的知識。

第一，視覺系統(tǒng)辨別深度的方式。

什么是B端产品经理？和C端产品经理有什么区别？

B端产品经理中的B是Business，商业的意思，B端产品经理首先就要理解这个职位的重要性，要设计出更适合这个项目需求的产品方案，B最终产品经理在日常工作中...

查看详情 >

視覺系統(tǒng)辨別深度的方式依靠2種線索：單眼線索和雙眼線索。

顧名思義，單眼線索只需要一只眼睛即可提供給我們視覺系統(tǒng)依據(jù)，雙眼線索需要依靠兩只眼睛才能提供深度依據(jù)。

（源自《AR界面設(shè)計》）

第二，人眼的舒適閱讀區(qū)域和注意力時長。

在頭部不主動轉(zhuǎn)動的情況下，正負30度的弧度，以及比視線水平位置稍稍靠下的位置更適合閱讀。

超過這個區(qū)域，即使用戶不轉(zhuǎn)頭，也會因為耗費精力而感到不那么舒適。

從視覺暫留（殘像）和瞬目反射（眨眼睛）的角度來說，我們的眼睛是不能一直工作的，在設(shè)計中可以余留出可以讓眼睛休息的時間。

視覺的余留有點類似于留白，讓眼睛不需要通過這部分視覺去識別出什么。比如兩個按鈕中間的空隙，兩個虛像之間的不重要的輔助內(nèi)容等等。

2. 視覺設(shè)計

空間里的視覺設(shè)計，除了我們熟知顏色、大小等，還有尺寸、距離等。可以理解為，一類是二維參數(shù)，即Sketch等二維設(shè)計軟件里可以調(diào)整的參數(shù)，一類是三維參數(shù)，即3Dmax等三維設(shè)計軟件里，多出來的那些可以調(diào)整的參數(shù)。

無論是二維參數(shù)還是三維參數(shù)，就可視化來說，都可以針對顏色、模糊、大小、動效、背景、光影、遮擋、密度這八種對象進行定義，這就是官方說明中所提到的：圖像線索用法。

1）圖像線索用法

我們可以通過這八種視覺設(shè)計用法，營造出視覺深度的感知。

顏色：顏色一方面可以喚起我們對這個虛像對應(yīng)的真實物體的感知，一方面色彩本身也會影響我們對大小的感知。比如顏色的明度。

模糊：太遠的內(nèi)容會有點模糊看不清楚，所以，模糊本身會帶來更遠的感知。

大?。撼ＷR是，近大遠小。

微動效：例如放大的動效和縮小的動效會感覺像是離近和離遠。

背景：光影、遮擋和密度也會給予我們深度的提示。

最后，謹慎使用密集的重復(fù)圖案，雙目AR眼鏡有一塊細分技術(shù)是雙目的合像，合不好會產(chǎn)生雙影的視覺感知。

2）內(nèi)容參數(shù)

了解了八種視覺設(shè)計的用法，官方給出了三個更具體的參數(shù)建議：距離、尺寸和明暗的過渡。

① 距離

• 常規(guī)的閱讀距離要大于用戶的一臂之長；
• 要允許用戶可以調(diào)整這個距離；
• 放置在一臂以內(nèi)距離的內(nèi)容，需要符合兩個條件：要么是需要直接進行操作的內(nèi)容，要么是短暫出現(xiàn)的內(nèi)容。

② 大小和尺寸

無論是通過大小還是通過尺寸來設(shè)置，同一個內(nèi)容要用戶在不轉(zhuǎn)頭的情況下就能看全。

③ 明暗過渡

突然切換到明亮和黑暗的環(huán)境中眼睛會有一段適應(yīng)的時間，所以兩個明度相差太大的內(nèi)容如果要切換，需要設(shè)置一個過渡過程。

二、動效

前部分的視覺，針對的是AR設(shè)計中內(nèi)容本身的設(shè)計，而動效，就是AR設(shè)計中內(nèi)容的運動。

首先還是從人體工學的知識開始。

1. 運動感知系統(tǒng)

人體對運動的感知，一方面來源于視覺系統(tǒng)，一方面來源于內(nèi)耳的前庭覺。

前庭覺是位于內(nèi)耳中的液體和器官，它們會告訴我們身體如何根據(jù)重力作用確認方向。當前庭系統(tǒng)的信息和視覺系統(tǒng)接受的信息相互沖突時，就容易造成生理上的頭暈、嘔吐等不適感。

大多數(shù)時候，用戶都是處于靜止狀態(tài)下在使用AR設(shè)備，因此，在深度距離上的動畫（前進后退等）要謹慎使用，充分弱化。

例如，大量虛擬內(nèi)容前進這個動畫，會讓用戶與自己往前動產(chǎn)生混淆，可以在動畫上疊加透明度以弱化視覺感知。

再例如，大面積虛像內(nèi)容的運動，會讓用戶與自己的運動產(chǎn)生混淆。窗口內(nèi)的運動，介紹了這種動效的處理方式。

2. 內(nèi)容與用戶的相對位置關(guān)系

Vision Pro介紹了三種內(nèi)容模式：頭部鎖定內(nèi)容（Head-locked）、世界鎖定內(nèi)容（World-locked）和懶跟隨內(nèi)容（Lazy follow）。

頭部鎖定內(nèi)容：與用戶的頭部保持相對靜止狀態(tài)。通常適用于小型的界面，比如隨取隨用的操作欄。

世界鎖定內(nèi)容：與地面保持相對靜止狀態(tài)，和我們物理世界的物品類似，是我們對內(nèi)容熟悉的認知，所以如有可能優(yōu)先使用這種模式。

懶跟隨內(nèi)容：介于頭部鎖定和世界鎖定之間的一種模式。頭部微微移動的時候不會跟隨，只有用戶頭部大幅度移動時才會跟隨。等同于我在《AR界面設(shè)計》里介紹的C類。

3. 窗口內(nèi)的動效

因為大窗口的內(nèi)容動效可能讓用戶產(chǎn)生混淆，官方給了8點設(shè)計建議。

1）保證窗口內(nèi)內(nèi)容和物理世界保持水平

2）保證動效擴展中心點的穩(wěn)定。這里有一個一個概念：擴散焦點，可以理解為動效的感知起點。

3）擴散焦點永遠保持在窗口內(nèi)

4）避免單純無意義的角度移動（因為會讓焦點移動）

5）避免過快的動畫

6）如果動畫變化過大，使用漸近漸出過場銜接

7）前后移動的動效，內(nèi)容間距放大，物體放小

8）使用低反光的材質(zhì)

最后，無論窗口內(nèi)還是外，AR界面設(shè)計不推薦震蕩動效，尤其是5s左右的重復(fù)。

總結(jié)一下：

1. 掌握基本的人體工學知識，可以用活別人的經(jīng)驗。
2. 8個視覺設(shè)計用法，定義了兩類參數(shù)來提供三維效果（二維參數(shù)，提供視覺深度，即假三維效果；三維參數(shù)，提供確實深度，即真三維效果）。
3. 動效設(shè)計的處理關(guān)鍵點：放慢節(jié)奏+可預(yù)測的。