起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識12 條動效設計的原理
這是關于動效設計的12條原理，一起來看看吧~
首先看下面表格：
- 緩動（Easing）、偏移和延遲（Offset & Delay）與時間相關。
- ?父子關系（Parenting）用于闡述元素之間的關系。
- 變形（Transformation）、數值變化（Value Change）、遮罩（Masking）、覆蓋（Overlay）、生成（Cloning）可以加強元素自身的延續性。
- 視差（Parallax）多用于表明元素的層級關系。
- 蒙層（Obscuration）、多維度（Dimensionality）、鏡頭平移與縮放（Dolly & Zoom）用于表明元素與空間的關系。
原理1：緩動（Easing）
當運動時，自然界中很少存在讓人舒適的勻速運動，并且元素運動速率的變化應該符合用戶的預期。貼近自然，符合用戶認知，緩入緩出。
示例一
示例二
示例一有直線運動，看起來并不好。以上所有三個例子都有相同幀數，并在相同的時間內完成。唯一的區別在于他們的緩動不同。
若行為超出用戶期望的行為會導致可用性較差的交互。在適當緩動的情況下，用戶可以體驗到自然的動效 ，它不會分散注意力。而直線運動會使用戶感覺刻意的、難以理解、未完成，并且分散注意力。
而右邊的例子，它具有“設計”的感覺，我們注意到物體是如何到達的，比直線運動的例子更加“正確”。
總結：何時使用緩動？任何時候都要使用緩動。
原理2：偏移和延遲（Offset & Delay）
利用偏移和延遲錯開元素的運動時間，表明元素之間的層級與關系。
- 讓信息或界面元素按照秩序進退場；
- 暗示用戶信息與界面元素之間或許存在某些區別；
- 吸引用戶的注意力。
示例
在上面的例子中，浮動動作按鈕（FAB）轉換成由三個按鈕組成的標題導航元素。因為這些按鈕在時間上相互“抵消”，所以他們最終通過“分離”來支持可用性，這告訴用戶完全獨立于視覺設計的界面中元素的本質。
為了更好地向您展示這是如何工作的，我將向您展示一個打破偏移和延遲原理的示例。
在上面的例子中，靜態視覺設計告訴我們背景上有圖標，推測是這些圖標都是相互分離的，并且做了不同的事情。但是，這個動效打破了之前的理論。
在時間上，圖標被分組成行并且表現得像一個單獨的對象，它們的標題同樣分組成行，并且也表現得像一個單一的對象，該動議告訴用戶除眼睛看到的東西外。在這種情況下，我們可以說時間元素行為不支持可用性。
原理3：父子關系（Parenting）
父子關系是一種強大的原則?？梢栽谟脩艚缑嬷小瓣P聯”對象。
- 幫助用戶更好地理解它們之間的層級關系；
- 有依據的操作反饋。
父子關系是對象屬性與其他對象屬性的鏈接，這以支持可用性的方式創建對象關系和層次結構。親子關系還允許設計師在用戶界面中更好地協調時間，同時向用戶傳達對象關系的性質。
回想一下，對象屬性包括以下內容：比例、不透明度、位置、旋轉、形狀、顏色、數值等。這些屬性中的任何一個都可以鏈接到任何其他屬性，以在用戶體驗中創建協同。
示例2
在上面這個示例中，父子關系就是子元素的某個屬性的值，隨父元素的某個屬性參數的值按照一定的比例進行變化。父子關系最適合作為“實時”互動，當用戶直接操作界面對象時，設計者通過運動向用戶傳達對象如何鏈接以及它們之間的關系。
示例4
原理4：變形（Transformation）
在運動原理“變形”中已經寫了很多有關UX的文章。在某些方面，它是動畫原理中最明顯和最引人注意的。變形是最明顯的，主要是因為它脫穎而出?！疤峤弧卑粹o將形狀變為徑向進度條，并最終改變形狀以成為標記，吸引了我們的注意力。
- 告知用戶元素的狀態或作用發生了改變；
- 高效地將信息傳遞給用戶。
示例1
變形所做的是通過不同實物變形（在這是一個按鈕，這是一個徑向進度條）無縫地轉換用戶，最終產生期望的結果，用戶已經通過這些功能到達最終目的地。轉換將用戶體驗中的關鍵時刻認知分離成無縫連續的一系列事件，這種無縫結果可提高用戶的認知度，保證時間和連貫性。
原理5：數值變化（Value Change）
基于文本的界面對象（即數字和文本）可以連續更改它們的值，清晰看到數值的增多或減少。
我們來看一下用戶儀表板的例子：
示例1
示例2
數字和價值觀是現實中發生的事物的表征。這種可能是時間、收入、游戲成績、商業指標、健身追蹤等。我們通過動作區分的是“價值主體”是動態的，價值觀反映了動態價值集合中的某些東西。
當我們使用基于運動的價值形式來表示動態系統時，它激活了一種“神經反饋”，掌握數據動態特性的用戶現在可以改變這些價值觀。當這些值是靜態的時候，與這些值背后的現實的聯系就會減少。比如：支付寶中的余額，余額的增多或減少。
示例4
示例5
數值變化既可以發生在實時活動中，也可以發生在非實時活動中。在實時事件中，用戶正在與對象交互以更改值。在非實時事件中，例如：加載器和轉換，這些值在沒有用戶輸入的情況下發生變化以反映動態敘述。
原理6：遮罩（Masking）
在上面的例子中，標題圖像改變了邊界的形狀和位置，但不改變內容，并成為一個專輯。這具有改變對象的效果，同時保留遮罩內的內容 – 這是一個相當巧妙的技巧。這發生在非實時，作為轉換，在用戶采取行動后激活。
請記住，UI動畫原則暫時出現并通過連續性、敘述、關系和期望來支持可用性。在上面的參考文獻中，雖然物體本身保持不變，但它也有邊界和位置，而這兩個因素決定了物體是什么。
原理7：覆蓋（Overlay）
覆蓋通過允許用戶能讓本來有限的空間被更好的利用起來，利用扁平化設計來闡述兩個相互獨立的元素的位置關系。
示例中：前景物體向右滑動以顯示其他背景物體的位置。我們用圖層進行設計，圖層的概念深入內部。作為設計師，我們需要非常熟悉我們正在設計的所有對象（包括隱藏片段）。然而，作為用戶，這些不可見的部分是定義和實踐，隱藏在視覺和認知上。
原理8：生成（Cloning）
當元素被生成時，表達元素與元素之間的連續性。這種動畫能夠非常清晰地表達因某個操作而產生的一個或數個事件發生，以及它們之間的關系。
在以上三個示例中，在用戶注意力集中在這些對象的時間內，從現有元素對象創建新對象，引導注意力，然后通過創建一個克隆的新對象來引導。具有傳達清晰明確的事件：該行為“x”具有“y”的結果創建新的子對象。
原理9：蒙層（Obscuration）
與覆蓋原理中的用戶體驗類似，蒙層既是靜態現象，也是時間現象。不完全蓋住，簡單的不透明度漸變往往不會達到這個結果，通常利用模糊或者變暗保留可視性。
上面示例中，模糊看起來像透明對象或疊加層，也是一種涉及多個屬性的時間交互，各種常見的技術涉及模糊效果和整體對象透明度的減少。用戶意識到她正在操作的另一個非主要上下文，還有另一個世界，就像它在主要對象層次結構“后面”一樣，遮擋使設計師能夠補償用戶體驗中的單一統一視野或“客觀視圖”。
原理10：視差（Parallax）
作為運動原理中的UX的“視差”描述了以不同速率運動，構成不同的視差效果。視差允許用戶專注于主要操作和內容，同時保持設計完整性，在視差效果表現空間中個元素的位置及層級關系，引導用戶去關注應該應該關注的地方。
這對用戶的影響是為了明確界定交互的持續時間，對象關系，前景對象或“更快”移動的對象對用戶來說顯得“更接近”。同樣，移動“較慢”的背景對象或對象被視為“更遠”。設計人員可以使用時間本身來創建這些關系，告訴用戶界面中的哪些對象具有更高的優先級。因此，將背景或非互動元素進一步推回是有道理的。
不僅用戶感知的界面超出一個層次，其在視覺設計決定的，但現在這個層次可以利用用是自覺意識到在設計之前的用戶體驗內容。
原理11：多維化（Dimensionality）
用戶體驗的關鍵是連續性和位置，將界扁平化的界面元素多維化，表達空間中個元素的位置及層級關系。維度提供了一種強大的方法來克服用戶體驗的平坦性和非邏輯性，人類非常擅長利用空間框架在現實世界和數字體驗中進行導航。維度以三種方式呈現：折紙維度、浮動維度和對象維度。
浮動維度為界面對象提供了空間起源和離開，使得交互模型更加直觀和高度敘述；對象維度導致具有真實深度和形式的維度對象。
這里，多個2D層被安排在3D空間中以形成真實的三維物體。它們的維度在實時和非實時過渡顯示，對象維度的用途是，用戶基于不可見的空間位置開發對象實用程序的敏銳意識。
原理12：鏡頭平移與縮放（Dolly & Zoom）
- 鏡頭平移：被拍攝物保持靜止而鏡頭移動或鏡頭保持靜止，而被攝物體進行遠離或接近鏡頭的前后移動。
- 鏡頭縮放：鏡頭與被攝物體在位置上保持靜止，而被攝物自身進行縮放。
在某些情況下，無法判斷對象是否正在縮放，是否在3D空間中朝向相機移動，或者如果相機正朝3D空間中的對象移動（請參見下面的參考資料）。
以下三個例子說明了可能的情況：
前兩張圖像是放大的，而最后的圖像是放大的。
在UX中，空間運動可以引用觀看者視角的變化，或者當對象改變位置時視角保持靜止。還可以結合維度原則，從而產生更多空間體驗，更深入，并向用戶傳達當前視圖“前”或“后”的其他區域或內容。并且滿足運動原則中用戶體驗的要求：它們通過運動支持可用性。
原文作者：Issara Willenskomer
原文鏈接：https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
譯文作者：VisualCC
譯文鏈接：https://www.jianshu.com/p/0efbd3db9f4b
本文由 @VisualCC 授權發布于人人都是產品經理，未經作者許可，禁止轉載
題圖來自 Pexels，基于 CC0 協議
受教了
??，確實都是一些很不錯的交互設計，很有啟發