引導用戶，增強產品功能認知 | 動效設計指南（一）
「 還在隨波逐流的瘋狂給App增加動效嗎？」
「 你的App還沒動效嗎？」
「 那些酷炫的概念動效我都會！用戶還是不喜歡呢？」
?
it is one of the most important tools for successful interaction.
現如今視覺設計扁平化，讓信息傳遞更直觀，使我們在App時有更高效的體驗。扁平化使我們在與「Screen」交互的過程中與物理世界脫節、導致「高效」的App上手困難。
而，拉、旋、彈... 這些動態協助視覺設計，動效自然的成為了視覺與交互之間的橋樑。在VR、AR的視覺設計中視覺設計師們也熱衷於「Sci-Fi」科技未來的感覺，在這之前我們也可以從APP的設計中為這種趨勢過渡做準備。
那這一次，我們聊一聊App設計中如何用動效設計引導用戶，增強對產品的功能認知。
下面和大家一起從：第一印象、日常使用、品牌強化。三個場景結合 AIUX | Protoype 和案例來看看如何恰好的運用動效吧。
因知乎無法顯示動圖，文中大量乾貨動效原型圖與案例無法直接展示，想獲取最佳的閱讀體驗，歡迎前往我們的微信公號: aiuxstudio
1. 第一印象
——————
烘托場景，建立關係
\ First Launch Experience //
AIUX | Prototype
對於用戶第一次使用App時，可互動式的引導動效更能吸引用戶，完成整個產品介紹的體驗。根據產品的需求在可互動式引導中採集用戶喜好，建立貼心印象。
初次使用功能提示案例:
引導用戶跟著動效貫穿產品功能介紹，吸引用戶看完介紹App及功能演示使用場景（左）
在引導動畫中有趣的小交互來採集用戶需求，為更精準的推薦資訊做準備（右）
\ Date Entry //
AIUX | Prototype
在數據輸入時，對用戶的操作給予反饋並留下提示。
\ Navigation //
AIUX | Prototype
第一次使用或產品更新迭代時，主動向用戶呈現有效信息，聚焦關注，傳達主要業務流程引導使用核心的功能。
初次使用功能提示案例：
中心藍色小球箭頭向上滾動，引導用戶閱讀頭條新聞（左）
個人頭像抖動提示點擊頭像側拉菜單有更多功能（右）
2.日常使用
——————
功能傳達，及時反饋
\Feedback//
AIUX | Prototype
在使用時，隨著操作的對應變化，用戶會感受到空間轉變。
合理運用物理世界的操作感知，避免動效誤導用戶。
核心功能或是新功能介紹時，吸引用戶眼流，提醒用戶關注的內容和操作。
反饋案例：
選擇緩存，選集飛彈到緩存欄，對用戶的操作給予反饋並引導協助用戶完成任務。（左）
導航切換時Icon抖動，告訴用戶現在在哪，現在已經轉場（右）
系統收到到截圖後操作後，給予反饋（左）
物理世界中隨手撥動小卡片的自然交互感知 （右）
說完了上面的設計原則，我們再來看一些過時的動效案例：
為了動效豐富，把功能堆疊到一個按鈕，且不易識別。
動效無意義，擾亂眼流，干擾信息閱讀，沒有傳達需要聚焦的信息。
過於精細的表單呈現速度過緩、顯得產品反應緩慢。
-
反覆提醒自己，動效需要配合視覺和交互，使用在合適的位置、合適的時間。不經過思考的增加動效，反導會傷害用戶體驗，讓用戶感到困擾、盲目、顯得產品反應速度緩慢、膩煩。
3.品牌強化
——————
保持趣味，觸發情感
\ Loading //
AIUX | Prototype
在載入與轉場時，合理運用精緻動效來提升軟體體驗同時緩減用戶等待時間。
案例：
品牌傳達，在開啟App閃屏、載入狀態都是融入品牌元素的好機會，即能加深品牌印象，增加愉悅性還可以緩解用戶等待的焦慮感。
保持趣味，恰當的融入創意設計對用戶的操作進行回應和反饋，加深用戶與產品的情感保證這個動效不會給用戶增加負擔。
??
我們與App也是在相互建立與培養感情，讓動效自然的融入產品，當動效設計在恰當的交互情景中，屏幕上單調的數字信息反饋會變得更生動，給我們帶來高效且印象深刻的體驗。
--------------------
AIUX | Prototype X Animation
AIUX交互模式庫，為大家在設計產品時候提供一些交互模式的原型， 你可以在這些原型中尋找一些設計靈感。有興趣的朋友可以和我們分享你的想法，我們也會將問題的解決思路放在公號里。期待看到一些好玩的設計。
在公號中直接回復 "動效原型" 獲取無水印動效原型源文件。
--------------------
我們是AIUX，最專業的產品體驗諮詢&人機交互創新團隊。我們的宗旨是：幫助你的產品擁有最好的體驗。
----------
歡迎關注我們的微信公號: aiuxstudio
推薦閱讀：