2020-12-21 ui設計分享達人
動效對產品的可用性體驗有多維度的影響。在界面中動效不僅僅是一種視覺裝飾，它能夠提升產品的參與度并擴展交流的范圍。
本文追根溯源，先從動效的起源講起，一步步推進與產品、體驗之間的關系，最后通過案例分析動效設計的原理和應用。一起來看看吧～
一、動效設計的起源
動效與用戶體驗的結合相對較新，其根源是迪士尼動畫設計的十二個條基本原理。迪士尼動畫原理是為了講故事而提煉出的基本的物理運動規律。這些原理能讓繪制的卡通角色移動和表演，但不能充分滿足現代UI界面的交互需求。
為了彌合這個差距，動效專家Canedo Estrada改編的《動效設計的10條原理》更適合應用到數字產品設計中。
在圍繞界面元素建立用戶體驗時，重新定位動效原理的關鍵在于：
二、動效設計與用戶體驗
在討論動效設計的原理之前，重要的是要強調動效不僅僅是裝飾，而是一種用來幫助用戶體驗的行為。動效設計涉及兩種基本的交互類型：實時和非實時。
實時
當用戶在屏幕上點擊UI元素時，實時交互提供即時反饋，會對用戶的操作做出即時響應。
非實時
非實時交互發生在用戶操作后，這意味著用戶需要經過短暫的轉場才能看到結果，然后再繼續。
另外動效設計通過四種不同的方式來提升產品的可用性：
1.期望：當用戶與界面交互時，他們期望看到哪些行為？動效是否符合預期或引起混亂？
2.連續性：交互在整個體驗中是否發生一致的運動行為？
3.敘述：觸發的動作是否與滿足用戶意圖的事件的邏輯進程相關聯？
4.關系：UI界面的空間、美學和層級結構如何相互關聯并影響用戶的決策？動效如何影響各種元素的關系？
三、產品動效設計原理
這里提供12種動效設計原理的解析，每一種對應不同的案例，從更直觀的角度來解讀抽象的原理。
1、緩動(Easing)
緩動效果模擬了現實世界中對象隨時間加速或減速的方式。它適用于所有運動的UI元素。下圖中的卡片和對應的椅子移動速度很快，但由于緩動效果它們可以平穩地受到控制。
2、偏移和延遲(Offset & Delay)
當多個UI元素同時快速移動時，用戶傾向于將它們組合在一起，而忽略了每個元素自身的功能性。
偏移和延遲會在移動的UI元素之間創建層級結構，并傳達它們相關但又不同的消息。元素的時間、速度和間距不是完全同步的，而是交錯排列從而產生一種微妙的“一個接一個”的效果。
當用戶在屏幕之間穿梭時，偏移和延遲表明存在多個交互選項。
3、父子關系(Parenting)
父子關系將一個元素的屬性鏈接到其他元素中。當父元素中的屬性更改時，子元素的鏈接屬性也會更改，同時所有元素的屬性都可以相互鏈接。
在下圖中，將父元素(藍色滑塊)的位置與子元素(燈泡發光效果&光照強度)相關聯。當父元素左右移動時，子元素的發光效果的范圍和光照強度的數值會發生變化。
父子關系在元素間創建關系并建立層級結構，允許多個元素同時與用戶交互。因此這種效果非常適用于實時交互中。
4、轉換(Transformation)
當一種UI元素變成另一種形式時就會發生轉換。例如，轉換展示了下載的開始、中間和完成狀態——下載按鈕轉換為進度條，進度條轉換為完成圖標。
從UX角度看，轉換效果告知用戶元素的狀態發生了變化并將信息傳遞給用戶，提高了用戶的認知度。
5、數值變化(Value Change)
數值的變化(數字、文本或圖形）在數字界面中非常豐富，從銀行APP到日歷到電商網站的各種產品中都會出現。
在某種程度上，數據的動態表達和交流可能會對數據的價值產生影響。例如下圖中的數值被動態引入，向用戶顯示他們有能力影響數據，提升了參與活動的意愿。
6、遮罩(Masking)
遮罩是對界面上的部分內容進行戰略性的顯示和隱藏。通過改變元素的形狀和比例，在改變元素效果的同時允許元素本身保持可識別性。因此，照片和插圖等視覺形式是理想的選擇。
從可用性的角度來看，設計師可以通過遮罩向用戶展示產品正在進行一系列的交互。
7、覆蓋(Overlay)
二維空間中沒有深度，元素只能沿X或Y軸移動，疊加在界面中創造出前景/背景相區分的位置關系。通過模擬深度，覆蓋可以根據用戶的需要隱藏和顯示元素。
在使用覆蓋時，信息層級結構是重要的考慮因素。例如，用戶在筆記應用中首先應該看到的是筆記列表，然后使用覆蓋來顯示每個筆記的輔助選項，如刪除或歸檔。
8、克隆(Cloning)
克隆是將現有的對象拆分成新對象,這是一種突出顯示重要信息或交互選項的方法。
通過克隆將元素與界面相鏈接，如果元素只是突然出現或消失沒有關聯性，那么用戶將缺乏信心去交互。
9、模糊(Obscuration)
想象一扇磨砂玻璃門，雖然看不清門后的東西但是我們能察覺到門后事物的存在。
模糊的工作原理是一樣的。它為用戶提供提示，讓用戶意識到自己正在操作的界面之后還有其他的層級結構。導航菜單、密碼屏幕和文件窗口是常見的示例。
10、視差(Parallax)
當兩個(或更多)元素同時以不同的速度移動時會構成視差效果。
視差的主要目的是劃分層級結構：
視差引導用戶點擊可交互的元素，同時允許非交互的元素保留在屏幕上并保持設計的統一性。
11、維度(Dimensionality)
維度使界面元素具備具多個方向的交互，這種行為是使元素看起來是可折疊、可翻轉、浮動的或具有深度。
作為一種敘述性工具，維度意味著元素的不同側面是相互聯系的，并且可以實現無縫的屏幕過渡。
12、平移與縮放(Dolly & Zoom)
平移與縮放通過視角的變化能產生更多空間上的體驗，逐級遞進顯示更高級別的細節。
平移：點擊元素后發生距離遠近的平移，用戶的視點會越來越接近圖像。(一個人拿著照相機走到一朵花前面近距離拍攝)
縮放：用戶的視角與圖像的距離保持不變，但圖像在屏幕中的比例會增加。(這個人站在原地不動，只利用相機的變焦功能使花顯得更大)
四、總結——動效即交流
互動體驗要求動效具備敏捷和微妙的形式。堅持動效設計原理，即使最基本的界面元素也能成為交流的復雜媒介。
動效設計與產品用戶體驗之間的關系正在迅速成熟，而且動效跨越了二維屏幕上元素的抽象運動和3D世界中對運動的感知之間的鴻溝。
文章來源：UI中國 作者：Clip設計夾
藍藍設計( axecq.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務