如何在UI設(shè)計(jì)中正確地使用UI動(dòng)效呢？又該怎樣通過(guò)動(dòng)效來(lái)傳遞意圖信息呢？這篇文章將給你答案。

在而今UI設(shè)計(jì)師滿地都是的情況下，UI設(shè)計(jì)師除了日常的UI設(shè)計(jì)能力之外，要保持比較高的競(jìng)爭(zhēng)力，還需要具備一定的動(dòng)效能力。但是很多設(shè)計(jì)師在掌握了動(dòng)效能力后，并沒(méi)有能夠很恰當(dāng)?shù)厝ナ褂脛?dòng)效。

那么怎樣在UI設(shè)計(jì)中正確地使用UI動(dòng)效呢？

在過(guò)去幾年的時(shí)間里，高保真原型工具的爆炸式發(fā)展，給了設(shè)計(jì)師們一個(gè)創(chuàng)造詳細(xì)交互動(dòng)效的機(jī)會(huì)，設(shè)計(jì)師們花了很多時(shí)間去學(xué)習(xí)這些工具，然而很多設(shè)計(jì)師在原型工具的技術(shù)細(xì)節(jié)上迷失了方向。

設(shè)計(jì)師們必須后退一步，問(wèn)一下動(dòng)效的目的是什么？通過(guò)動(dòng)效來(lái)傳遞意圖信息，動(dòng)效用來(lái)作為更好的向用戶傳遞信息的工具，設(shè)計(jì)者應(yīng)該避免使用那些妨礙用戶操作體驗(yàn)的浮夸動(dòng)效。

設(shè)計(jì)師可以利用動(dòng)效來(lái)解決設(shè)計(jì)問(wèn)題，比如：通過(guò)進(jìn)入和退出動(dòng)效來(lái)顯示對(duì)象之間的連續(xù)性和關(guān)系，從減少認(rèn)知成本到改進(jìn)用戶決策操作方面入手，有意義的動(dòng)效可以讓用戶愉悅和高效。

一、減少認(rèn)知成本

認(rèn)知成本是完成一項(xiàng)任務(wù)所需的腦力勞動(dòng)。

維基百科說(shuō)：“沉重的認(rèn)知負(fù)荷會(huì)對(duì)任務(wù)完成產(chǎn)生負(fù)面影響。”

當(dāng)用戶在網(wǎng)站上時(shí)，他們會(huì)收到大量的信息。因此，他們有選擇性的注意力?！八淼酪曇啊币馑际撬麄冎苯訉Ｗ⒂谒麄冋谶M(jìn)行的屏幕區(qū)域，因此，用戶不會(huì)看到屏幕上的所有內(nèi)容。

作為設(shè)計(jì)人員，創(chuàng)建易于使用的界面非常重要，這釋放了用戶完成任務(wù)的精神努力。

設(shè)計(jì)師如何用動(dòng)畫來(lái)達(dá)到這個(gè)目的？

動(dòng)效，當(dāng)使用好時(shí)，通過(guò)有效的用戶溝通反饋能減少用戶的困惑。另外，通過(guò)釋放用戶的思想，注意力可以被吸引到更重要的事情上，比如：頁(yè)面的“響應(yīng)動(dòng)作”。

二、吸引用戶的注意力

NNgroup說(shuō)：“使用動(dòng)效的一個(gè)有效方法是吸引用戶的注意力，吸引用戶注意力的好處是——引導(dǎo)用戶關(guān)注屏幕上的界面和元素之間的層次和關(guān)系?！?/p>

動(dòng)效不需要直接在用戶的視野中進(jìn)行。NNgroup的文章解釋說(shuō)：

由于我們的生物學(xué)認(rèn)識(shí)到外圍的潛在危險(xiǎn)，外圍視圖中的移動(dòng)可以更快地吸引用戶的注意力。然而，用戶已經(jīng)學(xué)會(huì)不去注意那些傳統(tǒng)意義上的側(cè)邊欄和標(biāo)題欄的橫幅或彈出框，因此設(shè)計(jì)師必須確保UI和動(dòng)畫不遵循這些模式。設(shè)計(jì)師可以通過(guò)最大限度地減少單次發(fā)生的運(yùn)動(dòng)量，以及位于用戶認(rèn)為相關(guān)信息所在位置的動(dòng)畫元素，來(lái)避免視覺(jué)盲點(diǎn)。

三、可視化層次結(jié)構(gòu)

設(shè)置頁(yè)面元素加載到屏幕上的順序可以傳遞頁(yè)面的視覺(jué)層次結(jié)構(gòu)，使用微妙的動(dòng)畫將向用戶顯示頁(yè)面布局以及關(guān)注哪些內(nèi)容，從而減少認(rèn)知負(fù)擔(dān)。

另外，通過(guò)對(duì)不同元素使用相同的動(dòng)畫，用戶很容易理解元素被分組并且可以執(zhí)行類似的動(dòng)作，因?yàn)槿祟惖念^腦總是在尋找創(chuàng)造性的模式。

四、做出更好的決定

微交互（單個(gè)對(duì)象的轉(zhuǎn)換）和宏觀交互（對(duì)象之間的轉(zhuǎn)換）中的動(dòng)效可以通過(guò)系統(tǒng)為用戶提供上下文之間的聯(lián)系，動(dòng)效還可以教會(huì)用戶新的交互手勢(shì)。動(dòng)效完成后，用戶可以快速了解信息如何組合在一起，從而做出更好的決策。

動(dòng)效還有可以發(fā)現(xiàn)性，狀態(tài)之間的轉(zhuǎn)換可以傳達(dá)單個(gè)對(duì)象的功能。例如：菜單圖標(biāo)可以轉(zhuǎn)換為關(guān)閉圖標(biāo)以向用戶顯示同一按鈕可以完成兩個(gè)操作。

動(dòng)效可幫助用戶構(gòu)建更好的空間信息心智地圖，在小屏幕的時(shí)代，這是至關(guān)重要的，用戶可以很容易地迷失在移動(dòng)端小屏幕的迷宮中。但是，動(dòng)效可以讓用戶通過(guò)返回屏幕間的步驟，來(lái)學(xué)習(xí)如何使用應(yīng)用程序。

例如：用戶通過(guò)右滑動(dòng)進(jìn)入到一個(gè)頁(yè)面中，他們會(huì)發(fā)現(xiàn)如果想要回到主頁(yè)面，他們可以向左滑動(dòng)。為了確保視覺(jué)的可發(fā)現(xiàn)性，應(yīng)結(jié)合動(dòng)效。

五、新手入門

動(dòng)畫可以幫助創(chuàng)建新用戶的上手入門，通過(guò)在正確的時(shí)間向用戶展示正確的東西，設(shè)計(jì)師能夠有一個(gè)高效的信息傳遞，漸進(jìn)地信息傳遞使系統(tǒng)更容易被用戶學(xué)習(xí)和使用。在向用戶介紹應(yīng)用程序的工作方式的同時(shí)，可以在新內(nèi)容中加入輕松的動(dòng)畫，這有利于用戶記住重要的事情。

六、制造驚喜

動(dòng)畫是給用戶帶來(lái)驚喜和增強(qiáng)用戶體驗(yàn)的絕佳方式。但是，在嘗試用動(dòng)畫取悅用戶之前，設(shè)計(jì)師應(yīng)該先滿足用戶的基本期望，并首先嘗試消除體驗(yàn)不好的基本因素。否則，不會(huì)有令人愉快的動(dòng)畫效果。

動(dòng)畫的頻率、持續(xù)時(shí)間和速度也會(huì)影響用戶對(duì)系統(tǒng)的感知，這是設(shè)計(jì)師在創(chuàng)建動(dòng)畫時(shí)應(yīng)考慮的。

理想的添加動(dòng)效令用戶愉悅的地方是用戶真正需要?jiǎng)有У牡胤剑夷愕膭?dòng)效也不應(yīng)妨礙用戶的行為。

頻率

設(shè)計(jì)師應(yīng)該考慮用戶多久會(huì)看到一次動(dòng)效。動(dòng)效第一次看起來(lái)很新穎，可以讓用戶感到驚喜。但是，此后多次出現(xiàn)可能會(huì)變得煩人。在用戶測(cè)試和反饋中，可以經(jīng)常收集到類似的反饋。

八、持續(xù)時(shí)間

設(shè)計(jì)師應(yīng)該意識(shí)到用戶在放棄任務(wù)之前愿意等待動(dòng)畫或其他操作的時(shí)間。

NN組的研究發(fā)現(xiàn)：任何100毫秒（1秒=1000毫秒）的內(nèi)容對(duì)用戶來(lái)說(shuō)是瞬間的。 理解動(dòng)效需要一些時(shí)間，時(shí)間范圍從150ms到350ms。

根據(jù)Val Head的說(shuō)法：一般的動(dòng)效持續(xù)時(shí)間指標(biāo)應(yīng)該在200ms-500ms之間運(yùn)行。 因?yàn)檫@是一個(gè)指導(dǎo)方針，所以我們的目標(biāo)是讓動(dòng)效看起來(lái)很自然。 用戶認(rèn)同看起來(lái)很熟悉的東西，所以最終取決于設(shè)計(jì)師的最佳判斷。 當(dāng)涉及動(dòng)效運(yùn)行多長(zhǎng)時(shí)間時(shí)，速度太快，用戶可能會(huì)錯(cuò)過(guò)它，速度太慢，用戶可能會(huì)認(rèn)為系統(tǒng)太慢。

九、速度

整體動(dòng)效的速度會(huì)影響到用戶的感知； 較慢的動(dòng)效會(huì)導(dǎo)致用戶感覺(jué)整個(gè)系統(tǒng)也很慢。 然而，動(dòng)效可以用來(lái)隱藏加載延遲，并提高用戶的參與感。

加載動(dòng)效可以讓用戶占用視覺(jué)反饋，因此用戶可以感受到更短的等待時(shí)間，動(dòng)效中的周期數(shù)量也可以提高感知速度。 Facebook有一個(gè)骨架內(nèi)容加載動(dòng)畫，這是傳統(tǒng)加載的優(yōu)雅解決方案。

Viget的一項(xiàng)研究發(fā)現(xiàn)：相比較一般的動(dòng)效而言，人們會(huì)等待更長(zhǎng)的品牌加載動(dòng)效。

十、可用性

設(shè)計(jì)師應(yīng)該考慮動(dòng)畫可用性。 對(duì)于患有前庭障礙（一種面對(duì)運(yùn)動(dòng)過(guò)快的物體會(huì)發(fā)生眩暈的病癥）的人，運(yùn)動(dòng)會(huì)引起頭暈，眩暈或惡心。 這是Apple iOS7可以關(guān)閉動(dòng)畫過(guò)渡和移動(dòng)背景的原因之一。

視差滾動(dòng)，一種背景移動(dòng)速度比前景慢的方法，是運(yùn)動(dòng)的一個(gè)例子，如果使用不當(dāng)，會(huì)導(dǎo)致惡心。 為了解決這個(gè)問(wèn)題，設(shè)計(jì)師要考慮不讓動(dòng)效自動(dòng)播放。 如果是由用戶啟動(dòng)動(dòng)效，他們將會(huì)更加準(zhǔn)備，而且不會(huì)引起不適。

設(shè)計(jì)師應(yīng)牢記以下幾點(diǎn)，保證最佳的實(shí)際輸出效果：

• 目標(biāo)：與用戶溝通的動(dòng)畫是什么？
• 焦點(diǎn)：用戶目前的焦點(diǎn)在哪里 – 用戶在哪里看？

運(yùn)動(dòng)力學(xué)：

• 頻率：這部動(dòng)畫多久播放一次？
• 持續(xù)時(shí)間：此動(dòng)畫應(yīng)播放多長(zhǎng)時(shí)間？
• 速度：這部動(dòng)畫應(yīng)該播放多快？
• 觸發(fā)器：動(dòng)畫如何觸發(fā)？通過(guò)用戶操作？還是自動(dòng)？
• 輔助功能：如果用戶關(guān)閉動(dòng)畫，用戶體驗(yàn)將如何受到影響？

原文作者：Naema Baskanderi

原文地址：https://uxdesign.cc/ui-animation-please-use-responsibly-e707dbdb12d5

本文由 @小賤劍 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pexels，基于 CC0 協(xié)議