約在10年之前，在用戶界面使用的動(dòng)效，大部分是一些廣告和閃爍的彈窗。然而到了今天，已經(jīng)發(fā)生了翻天覆地的變化。

交互設(shè)計(jì)和動(dòng)態(tài)效果的詳情，帶來的是網(wǎng)站或APP的根本改變。這種思維方法，在下面有詳細(xì)的描述。

為了設(shè)計(jì)出更好的數(shù)字產(chǎn)品，從一開始網(wǎng)頁或APP就要有良好的交互性質(zhì)是非常有必要的。這一次，就將如何有效的運(yùn)用UI動(dòng)效的方法詳細(xì)介紹給大家。

使用動(dòng)效的理由

動(dòng)態(tài)（英: Motion）在從他的性質(zhì)上來說，就是用戶界面上最突出的元素。相較于文字文本和靜止的圖像，動(dòng)態(tài)的更容易被發(fā)覺。我們的視線會(huì)不由自主的追尋著動(dòng)態(tài)的物體，這也可以說是一種條件反射。試著將這個(gè)利用在功能性的動(dòng)效上吧。

功能性的動(dòng)效是？

功能性動(dòng)效，指的是在UI設(shè)計(jì)中作為功能的一部分被采用的小動(dòng)效，有著非常明確和合理的目的。

• 為了減輕認(rèn)知的負(fù)擔(dān)。
• 防止發(fā)生變化時(shí)看漏（英: Change Blindness）。
• 在空間關(guān)系中確立良好的層級(jí)關(guān)系。

以用戶為中心的設(shè)計(jì)方法，直觀的用戶界面，響應(yīng)性，人性化等等都是必須的。功能性動(dòng)效，將有助于你實(shí)現(xiàn)這些目標(biāo)。那么，就讓我們?cè)敿?xì)的來看一看功能性動(dòng)效吧。

用功能性動(dòng)效完善UX

對(duì)APP或網(wǎng)站的體驗(yàn)或印象，通過在好的地方使用動(dòng)效，會(huì)更易于使用，讓功能性更加完善。

通過仔細(xì)研究測(cè)試，功能性動(dòng)效，都包含以下的功能、要點(diǎn)。

01. 可視化的反饋

舒適的交互設(shè)計(jì)可以提供更好的反饋。無論是否成功，反饋能告訴用戶系統(tǒng)已經(jīng)識(shí)別到了你的操作。顯示出相互作用的結(jié)果。這組動(dòng)效應(yīng)特別注意控制。

反饋按鈕

在我們的生活中，對(duì)按鈕會(huì)有按下去的反應(yīng)。進(jìn)行會(huì)有怎樣的反應(yīng)的預(yù)測(cè)是十分重要的。

?

操作結(jié)果的可視化

按照基本規(guī)則，使用動(dòng)畫進(jìn)行反饋，你可以很好的強(qiáng)調(diào)什么操作是錯(cuò)誤的。

例如，如果你輸入密碼錯(cuò)誤，讓我們添加一個(gè)左右抖動(dòng)的視覺動(dòng)畫吧。像出錯(cuò)啦，請(qǐng)?jiān)僭囈淮芜@樣，左右搖頭的效果。當(dāng)用戶看到這些動(dòng)效后，可以立即了解當(dāng)前的狀況。

?另外，您還可以強(qiáng)化用戶當(dāng)前正在運(yùn)行的動(dòng)作。在下面的例子中，當(dāng)用戶點(diǎn)擊提交按鈕，在成功之前通過一點(diǎn)點(diǎn)加載動(dòng)畫來顯示。加載的動(dòng)效使用戶感覺過程已經(jīng)成功完成。

02. 抑制狀態(tài)的變化

至于添加動(dòng)效最好的地方，就是讓變化的瞬間變得引人注目。用戶界面狀態(tài)的變化，特別是網(wǎng)站上突然的變化，很難讓用戶理解當(dāng)前究竟發(fā)生了什么。在這變化的瞬間，就可以在UI中添加動(dòng)效進(jìn)行緩和。

（1）建立連接

動(dòng)畫的變化，能向用戶界面展示各種各樣的狀態(tài)，作為一個(gè)如同中介一樣的角色，幫助用戶理解當(dāng)前正在發(fā)生著什么。用戶只需跟隨動(dòng)效，就能夠理解2個(gè)UI狀態(tài)之間究竟有著怎樣的聯(lián)系。

另外，也可以顯示縮略圖和詳細(xì)信息。

?這張動(dòng)畫卡片，是通過點(diǎn)擊將重疊的詳細(xì)信息進(jìn)行展示，它清楚地表明了是同一個(gè)項(xiàng)目。

（2）注意變化

當(dāng)一個(gè)新的對(duì)象已經(jīng)公開時(shí)，動(dòng)效有助于我們?cè)诒谎谏w的信息中清楚的找到它。比如通過滑動(dòng)打開內(nèi)容來隱藏信息，你可以在需要關(guān)注時(shí)用到這種變化效果。

在下面的案例中，當(dāng)您單擊漢堡包圖標(biāo)時(shí)，導(dǎo)航菜單用幻燈片展示。通過這種動(dòng)作，用戶就可以明白，導(dǎo)航菜單不會(huì)消失。

03. 系統(tǒng)狀態(tài)的可視化

作為Jakob Nielsen為了可用性推導(dǎo)出來的答案之一，系統(tǒng)狀態(tài)的可見性仍然是用戶界面設(shè)計(jì)中最重要的原則之一。對(duì)于用戶來說，把握理解系統(tǒng)當(dāng)前的狀況，是非常重要的。

（1）進(jìn)度條

上傳和下載數(shù)據(jù)的過程是采用功能性動(dòng)效的一個(gè)很好的機(jī)會(huì)。有動(dòng)效的加載欄，可以直觀的看到動(dòng)作加載完成預(yù)計(jì)還要多少時(shí)間。

另外，當(dāng)操作未能成功進(jìn)行時(shí)，動(dòng)效也很有用。例如在下載失敗的時(shí)候，你就需要考慮如何讓失敗畫面看起來比較舒服。

（2）下拉刷新

用戶的等待時(shí)間是從動(dòng)作開始的瞬間開始，最糟糕的情況是不知道系統(tǒng)是否收到指示。

下拉刷新這一技術(shù)，讓我們嘗試在操作瞬間作出反應(yīng)。告訴用戶你的進(jìn)程已經(jīng)開始，最重要的是給與用戶視覺反饋，在這里使用動(dòng)畫將非常有幫助。

04. 解說動(dòng)畫

有時(shí)，用戶需要一些額外的幫助來了解用戶流程或如何與某些界面元素進(jìn)行交互。對(duì)于包含用戶的新的或不熟悉的功能或交互的用戶界面尤其如此。

（1）新手上路

用戶入門需要一個(gè)完美的UX，第一次看到的操作動(dòng)畫對(duì)于首次使用者如何與應(yīng)用程序進(jìn)行互動(dòng)有著巨大的影響。無論多么復(fù)雜的東西，動(dòng)畫都能通過有趣的方法傳達(dá)出來。他有著無限的可能性。

（2）視覺提示

動(dòng)畫可以提供一些易于理解的視覺線索。解說動(dòng)畫，通常是在網(wǎng)頁第一次被打開時(shí)看到，通過動(dòng)畫可以表現(xiàn)頁面上特定的要素在什么情況下可以使用。

這種類型的動(dòng)畫，通過故事的進(jìn)行漸漸的看到全體的效果，在游戲中經(jīng)常被利用。只有當(dāng)用戶自己的經(jīng)驗(yàn)到達(dá)一個(gè)點(diǎn)的時(shí)候，才會(huì)觸發(fā)這個(gè)提示。

總結(jié)

動(dòng)畫是一個(gè)復(fù)雜而強(qiáng)有力的工具。

我們需要從一開始就采納這種效果，并將其視為我們?cè)O(shè)計(jì)的自然部分，因?yàn)樵O(shè)計(jì)不僅僅是視覺呈現(xiàn)。正如史蒂夫·喬布斯談到設(shè)計(jì)時(shí)所說的：

設(shè)計(jì)不僅是外形和感覺，設(shè)計(jì)關(guān)乎如何運(yùn)作。

原文地址：?photoshopvip

譯者：@喪心病狂十六夜貓

譯文地址：http://www.uisdc.com/functional-motion-design-method

本文由 @喪心病狂十六夜貓?授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。