APP動效設計必備知識總結

如今豐富細膩的 App 動效遍布移動端優秀應用界面中。

為用戶提供了良好的動態沉浸式體驗，動效設計在產品研發過程中也越來越被認可和重視。

通過本文，你將輕鬆了解到關於動效設計的一些必備知識：

究竟為什麼要設計動效？它的意義和價值是什麼？

App 動效形式多種多樣，如何將它們區分和歸類？

優秀的動效有哪些實用性的指導原則供我們參考？

一、動效設計的必要性

1. 提升用戶體驗

設計師若只追求靜態像素的完美呈現，而忽略動態過程的合理表達，

會導致用戶不能在視覺上覺察元素的連續變化，進而很難對新舊狀態的更替有清晰的感知。

迪士尼動畫大師乃特維克說過一句話：動畫的一切皆在於時間點和空間幅度。

通過「時間點」和「空間幅度」的設計為用戶建立運動的可信度，

即視覺上的真實感，當用戶意識到這個動作是合理的，才能更加清晰愉悅地使用產品。

2. 增添產品氣質

未添加動效的產品，會帶給人一種死氣沉沉的感覺，所有內容平鋪直敘、毫無生機，

即使界面設計的很美觀，也會缺乏一種靈動細膩的氣質。

如果把產品比作成美女，那麼界面視覺就是美女的顏值，交互動效就是美女的肢體語言。

合理的動效能將更立體、更富有關聯性的信息傳遞出去，提高產品的「表達能力」，增加親和力和趣味性，也利於品牌的建立。

3. 創造設計師優勢

降低溝通成本：設計師通過製作高保真動效 Demo 展示設計思路和創意。

大大提高設計提案交接率，降低了設計師與開發的溝通成本，提高了動效的還原度，體現專業性。

打造核心競爭力：在 UI 設計行業已經趨於飽和，並且產品設計流程逐漸實現體系化和模塊化的今天，

設計師如果只會利用組件重複性地「拼湊」頁面而無更多的價值產出，被替代的可能性將會增大。

在日常工作之餘，若要為公司和團隊輸出更多的價值，動效設計能力便是交互/視覺設計師的必備技能與核心競爭力之一。

二、動效設計的類型

界面動效種類紛繁多樣，根據 App 動效的作用，可以大體分為如下6個類型：

1. 轉場過渡

人腦灰質會對動態事物（如：移動、形變、色變等）保持敏感。

在界面中加入一些平滑舒適的過渡效果，不僅能讓界面顯得生動，更能幫助用戶理解界面前後變化的邏輯關係。

2. 層級展示

現實空間里，物體存在近大遠小原則，運動則會近快遠慢。

當界面中的元素存在不同層級時，恰當的動效可以幫助用戶理清前後位置關係，以動效來體現整個系統的空間感。

3. 空間擴展

在移動端界面設計中，由於有限的屏幕空間難以承載大量的信息內容。

可以通過摺疊、翻轉、縮放等形式拓展附加內容的存儲空間，以漸進展示的方式來減輕用戶的認知負擔。

4. 聚焦關注

聚焦關注是通過元素的動作變化，提醒用戶關注特點的內容信息。

這種提醒方式不僅可以降低視覺元素的干擾，使界面更清爽簡潔，還能在用戶使用過程中，輕盈自然地吸引用戶注意力。

5. 內容呈現

界面內容元素按照一定的秩序規律逐級呈現，引導用戶視覺焦點走向，幫助用戶更好地感知頁面布局、層級結構和重點內容，

同時也能讓整個流程更加豐富流暢，增添了界面的活力。

6. 操作反饋

無論是點擊、長按、拖拽、滑動等交互行為，都應該得到系統的即時反饋，將其以視覺或動效的方式展現，

幫助用戶了解當前系統對交互過程的響應情況，為用戶帶來安全感。

三、動效設計的原則

這是一位在五年時間內為四十多個國家和上百個頂尖機構提供諮詢服務的動效設計師，

總結出來的實用性動效設計原則，為提升產品體驗與可用性提供幫助。

1. 緩入緩出

時效事件發生時，元素的動作應顯得自然，與用戶預期相符。

2. 偏移與延遲

加入新的界面元素或場景時，可用於表達元素之間的關係。

3. 父子關係

當界面元素較多時，可以利用時空差異創造出可以感知到的父子繼承關係。

4. 形變

用連貫的狀態描繪表達元素功能的改變。

5. 值變

當元素的值發生變化時，用連續動態的方式表達前後之間的關聯。

6. 遮罩

如果一個界面元素的不同的展示方式對應不同的功能，那麼讓展示方式的變化過程具有連續性。

7. 覆蓋

用堆疊元素的相對位置來描述它們的扁平空間關係。

8. 複製

當新的元素從已有元素複製出來時，用連貫的方式描述其關聯關係。

9. 景深

允許用戶瞥得到非主要元素或場景。

10. 視差

當用戶滾動界面時，在平面創造出空間層次。

11. 翻轉

通過具有空間架構的描述方式來表現新元素的產生與離場。

12. 滑動變焦

用連續的空間描述來引導界面元素和空間。

四、動效軟體的選擇

動效設計軟體紛繁眾多，不同軟體的側重點也各不相同。

設計師可以根據項目的時間、精細度、面向對象等條件來選擇合適的軟體。

下面我列舉出市面上常見的動效軟體以及各自的優缺點，供選擇參考。

1. After Effects

AE 這款軟體知名度很高，學過設計的應該都知道，它的優點就是強大。

可以實現超高精度的動效，一般 UI 動效製作只用到了 AE 很小的一部分功能。

缺點是門檻高，上手較困難，不能做實時交互動效。

2. Hype

Hype 號稱無代碼動效神器，像 AE 一樣使用時間軸來設置動畫。

動畫效果在 PC、Mobile、Pad 端都可以直接預覽，也可以導出視頻或者 GIF。

3.0版還有物理特性和彈性曲線，可以實現更強大的動畫效果。

3. Principle

Principle 功能強大，界面和 Sketch 類似，被譽為 Sketch 的最佳拍檔。

它主要是做少量頁面間的過渡轉場、單元素動畫等細節動效。

優點很明顯，上手快、效率高、質感好，缺點就是不易做整套交互流程。

4. Flinto

Flinto 界面跟 Sketch 也非常相似，能夠快速實現各種滾動、轉場、點擊反饋等效果，適合模擬多個頁面、場景複雜的交互流程，學習成本低。

缺點是複雜的動效難以實現，價格略貴且試用期短。

5. Framer

Framer 是一個基於 Javas cript 的原型工具，能快速導入 Photoshop、Sketch 中的圖像並模擬圖層分層。

支持手勢，動畫精細度高，可在手機或平板中預覽效果。缺點是需要有一定的編程基礎，上手難度較高。

6. ProtoPie

ProtoPie 是一款交互原型設計工具，支持 Mac 和 Windows 雙平台，更加輕量級，集成的功能更吸引人，

可以調用 iPhone 系統的陀螺儀、麥克風、羅盤、3D Touch，多種智能感測器等等，絕對是 Windows 用戶設計師的福利。

小結

動效設計可以提升用戶體驗、增添產品氣質，並為設計師創造優勢。

6種作用的動效類型：轉場過渡、層級展示、空間擴展、聚焦關注、內容呈現、操作反饋。

12個實用性的動效原則 ：緩入緩出、偏移與延遲、父子關係、形變、值變、遮罩、覆蓋、複製、景深、視差、翻轉、滑動變焦。

根據項目時間、精細度、面向對象等條件，選擇合適的工具製作動效。

蕭伯納曾經說過，沒有什麼愛比對美食的愛還要真誠。

這也是為什麼美食和烹飪成為了用戶體驗設計師的重要靈感來源之一。

Tubik Sutdio 今天的設計案例就是一款用來訂購美食的移動端APP Tasty Burger 的交互和創意設計流程。

項目簡述

漢堡訂購 APP 的UI 和交互設計。

預處理環節

要設計一個訂購漢堡的 APP，最重要的是考慮清楚每個步驟，給出足夠清晰的導航，這確保了用戶在不同情況下都能快速製作並且下單。

Tubik UI 設計師 Anton Morozov 在藝術總監 Ernest Asanov 和 Vladyslav Taran 的指導下進行這個項目的設計，

他們的設計目標是讓 Tasty Burger APP 的界面直觀又美味。

擴展功能主要藉助漢堡圖標來承載，可以自定義添加各種食材配料和相關選項。

接下來你會看到用戶歷程的界面設計，其中包含了具體的漢堡菜單中的選項和定製流程，以及提交訂單的具體界面。

選擇漢堡頁面

在這個菜單當中，用戶會看到當前餐廳或者服務提供者所在的位置以及特別優惠活動。

具體食物的圖片旁邊還有食物的成份和重量等相關的基本數據。

通過色彩凸顯價格和 CTA 用語，讓用戶快速獲取到關鍵信息。

更重要的是，頂部的過濾能夠幫助用戶自定義篩選，並且快速找到想要的東西。

在選擇了特定的位置並且跳轉到特定的產品頁之後，用戶會看到產品的高清大圖，

相關的定價、重量、營養信息等關鍵數據，並且會看到添加購物車的 CTA 按鈕。

這種視覺化的呈現方式更具有情感表現力和吸引力，屏幕上整體布局也顯得乾淨利落。

這樣的設計對於經常來這個頁面下單購買的用戶而言不會顯得信息過載，他們會迅速地作出決策。

自定義漢堡頁面

對於那些關心具體配料的用戶而言，他們會有自定義漢堡中具體配料的需求。

只需要點擊「成份」這個標籤，他們就能看到漢堡中所包含的具體的配料，具體有哪些蔬菜，哪些肉類，哪些醬料等等。

為了使成份列表看起來比較吸引人，界面中將會包含所有的配料的圖片。

購物車圖標同樣是經過 UX 優化的，當上面有顯示黃色的小點的時候，就表示其中不是空的。

考慮到用戶會仔細閱讀配料細節，觀察並進行更為深度的自定義交互，信息最好是顯示在淺色的背景上，確保文本和背景的對比度，提升可讀性。

當然，在設計的時候，也同樣支持高對比度的深色背景 ，因為這樣同樣有足夠的對比度，風格上則會顯得更加時尚優雅。

此外，設計師非常重視構建均衡而易於掃視的視覺層次結構，以便快速的傳遞信息和交互。

飢餓的用戶們其實並不會投入大量的時間和精力來研究這個 APP 的具體功能的，在飢餓的促使之下，他們只會儘快下單。

自定義訂單的交互流程如下圖所示：

創建全新漢堡的頁面

餐廳和咖啡館所提供的漢堡通常有著典型的特色。而為了將美食的精神貫徹到底，

用戶應該還可以基於不同的配料完全定製屬於自己的，全新的漢堡品類。當然，這些配料應該是庫存配料所能支持的。

添加新的配料之後，用戶會看到價格的變化。

下面是在 APP 當中創建新漢堡的交互流程。

下單和配送頁面

確定訂單細節之後，用戶可以通過兩種方式來獲取：將食物送到特定的地點，或者用戶去餐館自提。APP 還可以支持不同的付款方式。

如果用戶選擇去餐館自提，那麼 APP 還應該提供地圖服務，並且顯示最佳的路線。

高色彩對比度和精心挑選的自提能夠確保內容的可讀性。

以下是訂單交付的解決方案和交互流程。

微妙的動效使得整個訂購流程顯得生動而美味。

著陸頁

著陸頁一定是要有足夠吸引人的動畫：新鮮美味的漢堡要能夠呈現出令人垂涎欲滴的效果，並且要貼合主題，並且富有吸引力。

Tasty Burger 這個應用程序對於 Tubik 團隊而言是非常有挑戰性的，它是一個非常酷的嘗試，拓寬了我們的視野，在功能的設計上同樣作出了全新的嘗試。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！