微交互是明年流行的設(shè)計(jì)趨勢(shì)，至于原因，來(lái)看這4個(gè)用動(dòng)效完成微交互的設(shè)計(jì)實(shí)例你就懂了。

動(dòng)效可以告訴我們一些故事。例如「現(xiàn)在就讓我看看吧?！?、「操作已經(jīng)完成了」等等，像這樣既不會(huì)很長(zhǎng)，又不會(huì)很復(fù)雜的故事。

動(dòng)效的目的，并不是為了娛樂(lè)用戶，而是為了讓用戶理解現(xiàn)在所發(fā)生的事情，更有效的說(shuō)明他們的使用方法。

我們不再只是去設(shè)計(jì)一個(gè)靜態(tài)的畫(huà)面。去思考怎樣才能將用戶從單純的畫(huà)面，引導(dǎo)到實(shí)際操作的內(nèi)容對(duì)設(shè)計(jì)來(lái)說(shuō)是非常重要的。

為了讓動(dòng)效變得好看，功能統(tǒng)一，可以廣泛的應(yīng)用于內(nèi)容之中。用戶的行為和條件狀況，被用戶注意的地方、或者成功的傳達(dá)執(zhí)行動(dòng)作所得到的結(jié)果這樣各種各樣的要素影響著。

這一次，為了改善UI設(shè)計(jì)的體驗(yàn)。讓我們用一些具體的實(shí)例來(lái)一起看看可以添加動(dòng)效的位置和情況吧。

1. 不要讓載入時(shí)間變得又長(zhǎng)又無(wú)聊

如果無(wú)論如何打開(kāi)網(wǎng)頁(yè)都需要很長(zhǎng)的時(shí)間的話，就想辦法讓用戶在等待的時(shí)候感受到樂(lè)趣吧。動(dòng)效可以作為能夠消除用戶的無(wú)聊感的代替（讓用戶不會(huì)感覺(jué)到一直在等待）。通過(guò)利用幾個(gè)連續(xù)的動(dòng)畫(huà)，讓用戶感覺(jué)到并不是一直在等待，這在絕大多數(shù)網(wǎng)站都是十分管用的方法。

例如左側(cè)的列表型屏幕，在內(nèi)容完全載入之前，我們可以看到，UI是一點(diǎn)一點(diǎn)分開(kāi)顯示出來(lái)的。

2. 不要讓頁(yè)面切換變得生硬

利用動(dòng)畫(huà)效果，可以在切換頁(yè)面（英: Transition）的時(shí)候，讓用戶清楚的看到什么時(shí)候在哪里開(kāi)始，又是在哪里結(jié)束。精心設(shè)計(jì)你的轉(zhuǎn)場(chǎng)，不僅可以吸引用戶的注意，還能讓他們很快理解現(xiàn)在所發(fā)生事情。

當(dāng)點(diǎn)擊鏈接的時(shí)候，滾動(dòng)可以很好的幫助用戶來(lái)理解當(dāng)前所發(fā)生的事情。首先讓我們來(lái)看看下面這個(gè)例子，瞬間的切換頁(yè)面能讓人感受到僵硬和牽強(qiáng)的感覺(jué)。

突然的切換讓人感到強(qiáng)烈的不適感，讓用戶在接下來(lái)的操作上會(huì)感到困惑。

然后讓我們來(lái)看下面這個(gè)案例，追加了滑動(dòng)的動(dòng)畫(huà)效果。

通過(guò)添加了滑動(dòng)的動(dòng)效，讓頁(yè)面的切換變得流暢順滑。

如你所見(jiàn)，通過(guò)這樣動(dòng)態(tài)的切換界面，可以幫助用戶理解當(dāng)前狀態(tài)，也可以很好的誘導(dǎo)用戶，再銜接到下面的頁(yè)面。

3. 說(shuō)明各個(gè)要素之間的關(guān)聯(lián)性

動(dòng)畫(huà)，可以直接的提高操作感。

例如通常在導(dǎo)航欄菜單，可以添加平滑的動(dòng)畫(huà)來(lái)使操作更流暢平穩(wěn)。利用這種效果，可以讓用戶輕松的明白按鈕有著怎樣的功能。

在下面這個(gè)例子中，播放按鈕和停止按鈕這兩個(gè)圖標(biāo)在切換的過(guò)程中添加了使他們具有關(guān)聯(lián)性的動(dòng)效，意味著當(dāng)你使用其中一個(gè)的時(shí)候，另一個(gè)將不能被使用。

在這種情況下，通過(guò)利用動(dòng)效，屏幕上的音樂(lè)播放器變得能吸引用戶注意而展現(xiàn)在了屏幕中央。

讓我們?cè)賮?lái)看另一個(gè)案例。在材料設(shè)計(jì)中我們可以看到，當(dāng)我們點(diǎn)擊浮動(dòng)的圖標(biāo)時(shí)，加號(hào)的圖標(biāo)變換成了鉛筆。通過(guò)這樣的一個(gè)小細(xì)節(jié)，我們可以知道每個(gè)圖標(biāo)會(huì)有什么作用，接下來(lái)又會(huì)發(fā)生些什么。

為了強(qiáng)調(diào)一些有趣的事情，讓我們來(lái)利用反饋吧。

動(dòng)效，可以為用戶的操作進(jìn)行一些輔助。

例如這個(gè)登錄框，通過(guò)添加一些動(dòng)效，便可以極大的引起重視。如果他輸入的是正確的內(nèi)容，我們可以通過(guò)添加一個(gè)簡(jiǎn)單的「點(diǎn)頭效果（英: Nod）」的動(dòng)畫(huà)，來(lái)表示輸入完成。另一方面，我們可以通過(guò)添加水平方向的震動(dòng)來(lái)表示輸入錯(cuò)誤的效果。當(dāng)用戶看到這樣的動(dòng)畫(huà)時(shí)，便可以立刻明白其中的含義。

利用上面所介紹的這種動(dòng)效，可以很方面的讓用戶理解“你還沒(méi)有輸入”這樣的意思。

4. 為了表示已經(jīng)完成，讓我們給用戶一個(gè)反饋

動(dòng)效，在給用戶的行為動(dòng)作的結(jié)果一個(gè)視覺(jué)化的反饋時(shí)也是非常有用的?！溉ケ憩F(xiàn)，而不是說(shuō)。（英: Show, don’t tell）」基于這樣的動(dòng)效設(shè)計(jì)原則，為了讓用戶明白，他們做了些什么，是否已經(jīng)完成，你可以使用動(dòng)效來(lái)給用戶一個(gè)反饋。

在下面的設(shè)計(jì)案例中，當(dāng)用戶點(diǎn)擊付款按鈕之后，便可以插入一個(gè)支付完成的小動(dòng)畫(huà)。對(duì)號(hào)這樣的動(dòng)效，可以告訴用戶支付已經(jīng)完成，這樣的細(xì)節(jié)對(duì)用戶體驗(yàn)來(lái)說(shuō)也是非常重要的。

最后

通過(guò)不斷的摸索與使用，動(dòng)效也會(huì)成為你一個(gè)非常強(qiáng)大的工具。怎樣的動(dòng)效是必須的，怎樣又是不需要的，通過(guò)不斷的反思，總結(jié)經(jīng)驗(yàn)對(duì)于設(shè)計(jì)這來(lái)說(shuō)是非常必要的。

在網(wǎng)頁(yè)設(shè)計(jì)的開(kāi)始階段，首先來(lái)好好考慮一下接下來(lái)會(huì)用到哪些動(dòng)效吧。像這樣來(lái)完成設(shè)計(jì)，可以將內(nèi)容以視覺(jué)性的效果呈現(xiàn)出來(lái)。

原文地址：photoshopvip

譯文地址：微信公眾號(hào)【喪心病狂的翻譯站】

版權(quán)聲明：人人都是產(chǎn)品經(jīng)理尊重行業(yè)規(guī)范，所轉(zhuǎn)載的文章都注明作者和來(lái)源，若標(biāo)注有誤，請(qǐng)聯(lián)系主編QQ：419297645更改。