界面動效設計方法有哪些？

01-01

RT

靈感來源：

CAPPTIVATE.co

Hover States

Use Your Interface

Little Big Details

SIX UX Transitions

一、直觀設計方法（視覺類創作工具）

這類方法製作的動效，只做演示，不提供交互操作。應在不影響演示效果的前提下盡量使用輕量和壓縮的演示文件。

1. 使用 Photoshop 製作 GIF 格式的動效演示圖。（不推薦）

直接使用 Photoshop 製作並輸出的 GIF，動畫流暢度不足，若幀處理不當還會有明顯卡頓。如要追求品質，製作過程更是耗時費力。

2. 使用 After Effects 製作動效，結合 Photoshop 輸出 GIF 格式的動效演示圖。

可以將只做演示，不提供現實交互的界面動效理解為 Motion Graphic，而 AE 非常擅長於此。

AE 製作的動畫存儲為視頻格式 (QuickTime) ，再將視頻文件導入 PS 優化處理後輸出 GIF。動效優化也有一些技巧，比如顏色處理，幀，輸出設置等。最為受用的是在製作過程中使用 Motion Blur，這樣做即可減小文件尺寸，又能讓動效更連貫易於理解，導入到 PS 後對幀的編輯也更靈活。推薦文章：

7 tips for designing awesome animated GIFs | InVision

可用資源：

Precomposed Touch Gestures | 觸摸手勢動畫

二、前端設計方法

前端技術設計動效極具優勢，演示便捷，利於協作，可直接復用於 Web 產品。像 InVision，Marvel，Flinto 這類原型演示工具中的動畫效果，都是前端實現的。Flinto 就是使用前端動效結合「添加到主屏幕」的方式在移動端做演示的實例。Framer Studio 更是直接提供了用 JS (CoffeeScript) 製作移動端動效的環境。

1. CSS

CSS 是最輕盈靈巧的前端動效實現方式，藉助 Transitions，Animations，結合 Transform，Opacity，Position 等快速實現多變的動畫和過度效果。CSS 也有其身為樣式表的局限，比如不能操控文檔節點，監控事件等，這些功能可追蹤到更多樣的交互行為，從而激活交互動畫，所以結合 JavaScript 等前端技術完善交互動效就很有必要。

CSS 預定義的 Easing（緩動函數）只有五個，但可以通過 cubic-bezier 自定義理想值。也可以通過 jQuery 增強。參考：

Easing Functions Cheat Sheet

推薦資源：

Animate.css

CSS3 Animation Cheat Sheet

Hover.css

Bounce.js

我在幾年前用純粹的 CSS 做過一些實驗性質的項目，結合了交互，動效等。演示和下載：

Animated Content Tabs with CSS3

Fluid CSS3 Slideshow with Parallax Effect

Image Accordion with CSS3

2. JavaScript

JS 在 Web 中的應用面非常廣，對於做動效設計能應付自如，有大量的設計實例和開源項目可讓工作事半功倍。例如：

jQuery Easing Plugin | Easing（緩動函數）

Transit

Move.js

Animsition | 轉場動畫

scrollReveal.js | 界面元素以動畫方式進入 viewport（頁面滾動動畫）

ScrollMagic

stroll.js

WOW.js

OriDomi | 紙張摺疊效果

Textillate.js | 文字動效

parallax.js | 視差

.........

3. SVG Animations

在 Web 中，SVG 相比點陣圖有較大優勢，輕量，無限伸縮不失真，適用 Retina，可使用 CSS 控制樣式和動畫等等；可參考：

Using SVG | CSS-Tricks

Use SVG for icons | Google Web Fundamentals

SVG 除了支持 CSS 的 Transitions，Animations，Transform 等動畫屬性外，也可以配合 JavaScript 製作動畫。若選用此方法，推薦使用：

Snap.svg

svg.js

這裡重點介紹 SMIL Animation 方法定義 SVG 動畫，SVG 支持動畫元素（HTML 元素），這些元素包括：

其中 & 允許 SVG 延指定路徑運動。

詳細了解：

A Guide to SVG Animations (SMIL) | CSS-Tricks

SVG 動畫非常適合用於提升產品中 Diagram 的用戶體驗，繪製具有互動和動效的統計圖表 (Chart)，原理圖 (Schematics) 等。可以藉助此項目：

D3.js

4. HTML5 Canvas

& 元素自身並不具備繪製圖形和動畫的功能，需要使用 JavaScript 來操作。HTML5 Canvas 的用法和用途非常廣泛，這裡舉幾個可用於界面動效的例子：

Turn.js | 擬物圖書翻頁效果

rainyday.js | 雨滴散落在玻璃上

Chart.js | 動效統計圖表（同類里最推薦該項目）

目前，Canvas 動畫製作工具已有不少，比如視覺化製作工具 Animatron，3D 遊戲引擎 (WebGL) PlayCanvas，2D 遊戲引擎 Construct 2，移動端網頁遊戲製作 Phaser 等。

適合設計界面動效：

GSAP

Adobe Edge Animate

Google Web Designer

三、邏輯設計方法

邏輯設計泛指用一類邏輯化編輯工具設計界面動效。正因其擁有邏輯編輯力，該類工具也可用來製作產品原型。

Pixate | 較推薦的移動端動效設計工具，入門成本低（節省時間）

Form by RelativeWave | 移動端動效

Quartz Composer | Facebook Origami | IDEO Avocado | iOS 動效

Canvas | iOS 動效

Facebook Pop | iOS，OS X 動效

______________________________________________________________________________________

3 月 16 日更新：

工具 / Webflow 現已支持交互和動效設計，詳情和演示：

Design Interactions Without Code | Webflow

3 月 20 日更新：

工具 / HTML5 動畫和交互設計可視化編輯工具 Tumult Hype 3 發售專業版：

Tumult Hype 3 Professional

3 月 25 日更新：

方法 / 一篇有趣的文章，關於如何將迪士尼動畫師的「動畫的12項基本法則」運用在網頁中：

Animation Principles for the Web | CSS Animation

3 月 31 日更新：

方法 / 一篇來自 Medium 的文章，關於 Blendle Trending（一款 iOS 報刊雜誌應用）的交互和動效設計細節：

Blendle Trending design details | Medium

4 月 19 日更新：

方法 / 如何使用動效吸引用戶：

How to Captivate Your Audiences with Motion | The Percolate Blog

靈感 / 9 位不同風格的設計師和動畫師國際合作，每位設計師都基於同樣的 4 色調色板創作一個抽象的，350 像素，3 秒鐘的動畫方塊，9 種設計最終組合成一個循環 GIF：

9 Squares

這個頁面收錄了很多上架 App Store 的 iOS 應用的特色 Animation，希望能給你靈感: CAPPTIVATE.co | iOS UI Animations

知乎不能傳gif，對於動效這個話題真的很要命

----------------以下為回答---------------

以前在團隊內部做過一個關於動效的分享，當時，是從現實參照、功能性、品牌，等維度進行分析。這次為了更全面的介紹界面動效，我參考了5W2H分析法，希望能給題主一些幫助。5W2H又稱七何分析法，分別是：What、Why、Who、When、Where、How、How much。

WHAT

什麼是界面動效？大家對其的理解大致是，用戶界面上所有運動的效果，也可以視其為界面設計（UI design）與動態設計（motion design）的交集。

具體可以參考下圖：The Disciplines of User Experience Design

http://thumbnails-visually.netdna-ssl.com/the-disciplines-of-user-experience-design_51029d505f014.png

作為多學科交集的界面動效，其設計者可以交互，也可以是UI，甚至很多時候是前端開發直接完成的。而我碰到的很多比較完整的設計團隊，專門招的動效設計師，除了做界面動效外，還會做與產品推廣相關的motion graphic。

而我們所要講解的界面動效（UI motion）區別於motion graphic 最大的差別，就是界面動效需要以用戶體驗與界面設計為大前提，來進行動效設計。所以下面很多觀點也是基於此來進行說明的。

另一個值得注意的是，界面動效在設計師設計完成後，需要開發實現才能與用戶見面。而不像MG動畫，直接由設計師輸出。

WHY

為什麼需要界面動效？在我的理解里這是5W里最重要的一點。設計交流網站上有很多純粹追求酷炫，或為了動起來而做的動效。他們如果只是為了展示設計技術，或者博得關注自然無妨。但是，界面動效畢竟要在真實產品中展示的，其目的自然需要符合產品的整體訴求。這裡的目的，我總結了兩方面：

1，保證產品的流暢體驗。產品只要跟用戶有互動，就會有狀態的變化，而絕大多數的變化都是由界面視覺展示的。這時，界面上的狀態變化，是否有過渡，過渡的是否流暢，就直接的影響著用戶的感受。

動效過渡案例演示

2.傳遞產品信息。動效其實跟交互，跟UI一樣，都是傳遞產品信息的一種渠道。而這裡的信息會有很多可能，可以是：趨勢、來源、去向、結構、情感、屬性，等。運用合理的動效傳遞信息，能大大增強產品的表現力，同時也能減少用戶的理解成本。

信息傳遞案例演示

WHO

這裡的Who，不是指的人，而是表示的動效的對象。這個對象又是一個或多個界面元素組成。單個元素，大家比較好

理解。多個元素的動效，除了表現元素屬性變化以外，還會將這些元素之前的關係傳遞出來：譬如：主次、聯動、並列先後、因果，等。

動效對象關係演示

WHEN

使用動效的時機，對於動效來說，是非常基礎的存在。用的好或不好，直接決定用戶體驗的感受。首先是實時性，動效作為人機交互反饋過程中的重要表現方式，必須做到快速，明確的表達當前的狀態。這就類似，你跟人交談，對方對你所說，完全沒有回應，無動於衷。這會讓你感到不確定，不認同甚至是疏遠。

及時性演示

其次是動效過載，動效與界面視覺一樣，當出現大量過於複雜或者重複的效果時，都會讓人視覺疲勞，抓不住要點。而且動態的畫面會讓這種感受更加強烈。

動效過載演示

WHERE

動效用在哪裡？根據「WHY」里所說，所有的元素只要狀態發生變化，就可以用動效來過渡。那麼這些位置都把動效用起來就可以了嗎？然而事實是，很多時候動效並不是產品設計的必選項，其對可用性幾乎沒有影響，對於易用性有一定的影響。所以，資源有限的團隊把動效的優先順序放到很靠後的位置。那麼，有沒有哪兒的動效是必須的？哪兒的動效優先順序比較高呢？同樣可以從「WHY」中的兩點目的來入手。

首先，是流暢度。其影響因素主要是，畫面切換時變化太大，視覺的割裂讓用戶產出跳脫感。所以，當狀態變化前後差異很大時，如：元素大小、顏色、明暗、位置等，就需要做適當的過渡來改善這種割裂感。

界面動效必要場景演示

另一個，是信息傳遞，功能說明。動效是產品信息傳遞的方式之一，除此還有：文字，圖形、音效，音頻，視頻等。在信息傳遞過程中，動效的是否必要取決於信息本身的重要性，以及動效是否比其他傳遞方式更高效。最常見的例子就是上文多次提到的載入，不管是文字，還是圖形，都很難達到類似「轉菊花」動效的詮釋效率。

信息傳遞效率演示

HOW

終於來到了HOW，之前的5W大家大致知道了界面動效的目的和使用尺度，都是相對基礎的。接下來的HOW會講它的運動過程該如何表現。這個過程在設計時，需要具備兩大特徵：自然、統一。

先說自然，在宏觀物理世界（人類可觀測）的所有的運動，都是符合經典物理定律的，它反映的是運動相關對象的質量、密度、質地、阻力，等。然後這些運動又是通過物體狀態、時間、緩動，等讓我們感受到周圍的世界。動效的不自然感受，也就是源自運動方式並不是人們日常生活中常觀察到的，大家無法從運動想像其背後的物體屬性及關係。

自然的動效演示

在界面動效中來表現自然，我們主要通過形變、運動時間及緩動曲線來體現。形變表現的是運動對象自身的質地，而運動時間及緩動曲線則是表現運動對象周圍的環境。

至於，如何設置緩動曲線與時間讓動效更加自然，可以看下面的一些總結，或許有些幫助。

1.linear曲線（勻速運動）除了一些特殊場景如載入、星空背景外，很少被使用。

2.easeIn（先緩後快）使用場景較少，主要在掉落、toWhere的動畫中使用。

3.easeInOut（頭尾緩、中間快）通常在輪轉切換的動畫中使用（One Out One In），這類動畫的觸發對象與運動對象並不是同一個元素。

4.easeOut（先快後緩）最常見的效果，其觸發對象與運動對象往往是同一個。主要用在展開、收起、出現、移動等動畫中。當不知道用哪個緩動曲線時，用這個一般不會錯。

5.曲度主要表現運動過程的力的大小，曲度越大，啟示力或阻力越大。

6.回彈則表現的是運動的劇烈程度及對象的質地。

7.運動時間一般都控制在0.3s-0.8s之間，過長的時間會讓人感覺拖沓，不自然。

常見緩動曲線演示

常見的緩動曲線類型：http://easings.net/zh-cn

自定義緩動曲線，可參考：https://matthewlein.com/ceaser/

統一，是界面動效需要具備的除自然外另一個重要指標。表現主要包括空間與環境質地這兩方面。同時，整個產品設計的品牌特性也需要通過統一才能得以體現。

動效的空間表意需要我們構建一個由頁面與元素組成的虛擬空間關係，以此來表達各元素的結構關係及功能。

環境質地在動效中主要需要通過緩動曲線、元素形變等來實現。他們與界面視覺所表現出的環境質地也需要統一。舉個簡單的例子，一個金屬質感的控制項，動效出現彈性形變，肯定是不合適的。

品牌特性的提煉。好的產品在設計之初都會基於自身的特色、目標人群及競品等，確立自身的品牌特性。這些特性又需要具備可認知、有價值、特有性、長期性、規律性的特徵。簡單說就是界面元素、交互行為以及動效的符號化。讓這些符號在產品中反覆出現，加深用戶的認知記憶。隨著現在技術的提升，通過動效表達品牌特質的案例月來越多。

iOS的品牌特性透過三大設計原則來體現：Deference（遵從）、Clarity（清晰）、Depth（深度）。其中的深度完整的表述是Use Depth to Communicate（有層次的表達）。這正是在空間表意這個場景中，iOS找了深度這種方式來作為其設計原則。

iOS 有層次的表達演示

Android的品牌特性表現在其最新的設計語言Material design中。其核心觀點Material is the metaphor（材料的隱喻）所講的就是將不同的物品屬性按照不同的場景賦予到界面元素中，讓用戶有親切的感受。Andriod挖掘品牌特質的場景，恰恰是通過動效來表現的元素質地。

Android 材質的隱喻案例

綜上，界面動效需要具備自然和統一這兩點。結合前面所提到的流暢、信息說明、對象關係、實時性、防止過載、必要性，等幾個方面，我們可以對界面動效該如何呈現，有大致的了解。而關於動效如何實現，平時如何提高動效設計的能力，動效設計時有哪些技巧等，後續看時間，可以繼續補充。

HOW MUCH

最後，我們要講下界面動效的投入產出比，也就是性價比的問題。在Where我們提到，動效並不是產品界面設計中必不可少的部分，產品規劃也往往會把其放到優先順序比較低的位置，最關鍵的是，你設計出來動效，要在用戶面前展現，實現其價值，需要通過前端編碼這一必不可少的環節。很多設計同學會為此鬱悶和糾結，我們不妨對比下不同狀況下界面動效的投入與產出，看看如何處理更為合理。

我們先看下界面動效的成本，這裡的成本主要的就是設計與開發的時間。動效的難易度與動效使用的多少直接決定了所需的時間。

難易程度方面，較常見的大小、位移、旋轉、透明度等的變化，是最常見的屬性，實現起來也是比較方便的。

常見的動效演示

非常見屬性的動畫類型，如：SVG路徑動畫，濾鏡動畫，特效動畫等，對於一般開發人員還是有一定成本的。首先，你要將你要的效果準確的表述給開發人員。同時，他們還要查閱相關的案例，來實現方案並優化性能。這時作為一個設計者要做的，除了做動效demo外，還要將相關的屬性及變化信息告訴開發人員，最好還能提供類似案例的源碼。很多設計同學會覺得，沒有必要，覺得將動效demo做出來就ok了。但是，在實際工作中，你做的動效，開發需要分解，反編譯，同時量化後再以其代碼表現出來。這個過程很容易產生彼此認知的偏差，然後開發產出的不是你想要的，你是讓他改呢？還是改呢？改呢...所以，動畫信息的量化表述，可以減少很多「我認為」的空間，同時提供案例源碼，可以給開發提供參考，以免被一句「沒法實現」給打發回來。

關於動效的量，在「where」中有提到，界面動效如果做足做全，將是相對巨大的工作量。面對這樣的成本，我們要怎樣解決呢？答案是，規範與組件化。在前期設計時，與產品充分討論，考慮組控制項各種使用場景，制定相應的規範；同時，前端以組件化的方式開發，類似的效果只寫一次，其他都通過組件復用。當然，要做到這些，需要各崗位的同學有很強的專業能力，同時團隊的溝通協作又很順暢。而對於，資源緊張，業務變化大的團隊，產品中動效的運用就需要收斂在必要的環節上了。

說完成本，我們看看動效的產出價值。前面說了很多，包括：信息表述的功能價值以及流暢，自然，品牌這些體驗價值，這裡就不再贅述。我們說說動效的場景價值。

首先是業務場景。在不同業務場景下，對動效的需求是不同的。譬如，一個後台產品和一個前台產品，前台產品會更注重體驗的順暢性，後台產品更強調產品的穩定性（只是相對來說，在同質化嚴重的情況下也越來越強調體驗）。所以前台的產品更需要通過動效來打差異，增加自身的附加值。

同時，不同功能場景下，動效也發揮著不同程度的價值。產品介紹頁，往往會通過動效強化品牌質感，如蘋果的新品介紹頁。活動頁，則會用動效來強化活動氛圍。互動傳播頁面，動效除了渲染氛圍，同時還有講故事的作用。因為在這些頁面里體驗、設計、動效相對於產品功能，更能吸引用戶關注，價值也被放的更大。

在不同平台場景下，動效會受到不同的技術限制。最常見的就是通過Native與H5來實現動效，性能和展現效果都會有所差異。一般來說，動效在系統層優於應用層優於web層。當然這裡面的差距會隨時間越來越小，現在很多簡單的動效已經可以做到無差異了。

最後，將上述的相關內容整理了一張圖片，如果不足之處歡迎大家補充。

Hi，

其實我個人是比較反對動效的，絕大多數是在浪費用戶時間/開發成本。

但是，涉及到動效，一般我是這樣做的：

1.先看別人的作品，然後取其精華去其糟泊，不採用過於花哨的動效，動效能免則免，如果必須存在，也要儘力做到乾脆利落。去哪裡看樓上已經說的非常詳細。

界面動效設計方法有哪些？

2.早起如果對動效沒什麼概念或者經驗，一個比較粗暴的方法就是：下載別人的作品，慢放看具體的技巧，你會慢慢發現動效常用的一些基本技巧：遮罩，路徑動畫，漸變，淡出淡入，加減速度等等。

但是很多動效做的差強人意，主要是因為在加減速度和變形上沒做好，建議去看看迪斯尼的動畫運動規律，非常詳細地描述了日常動畫中的運動規律，讓動畫看起來生動有趣有活力有情感。

用到的軟體：目前圈子裡流行用AE，也可以用Flash，看你自己哪款軟體用的舒服。

一、告知用戶正在運行用戶想知道在每一步中發生了什麼，如果超過3秒沒有反饋，使用戶在不確定性等待中極易關閉應用。但是，如果告知用戶應用正在運行，等待就不會不那麼惱人，尤其是在刷新、載入頁面更應該注意這一點。
二、告知用戶進度
通常只是讓用戶知道程序正在運行是不夠的，還要能夠看到載入速度和載入時長，進度條的作用得以突顯：
告知用戶進度狀況
可以成為交互等待過程中的娛樂元素，抵消的負面體驗
可以成為一個"病毒"功能，引起用戶分享的興趣，從而吸引更多的用戶。
http://sina.lt/eR85