如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

來(lái)源：UI中國(guó)

        圖片來(lái)源：Barthelemy Chalvet

如何利用動(dòng)效提升用戶(hù)體驗(yàn)

動(dòng)畫(huà)可以講述故事。不是很長(zhǎng)很復(fù)雜而是很簡(jiǎn)單的故事，而像是 "嘿，你現(xiàn)在要看看這個(gè)！" 或 "哇，你競(jìng)爭(zhēng)成功了！"。然而，動(dòng)效的目的不是娛樂(lè)用戶(hù)，而是幫助他們理解發(fā)什么什么事，或者如何有效的使用你的軟件。在Zurb的敘述中很清晰的表明了：

我們不再是設(shè)計(jì)靜態(tài)的屏幕，用戶(hù)將會(huì)從我們的設(shè)計(jì)中看到實(shí)際的內(nèi)容。

動(dòng)效可以廣泛用于統(tǒng)一美感和功能的平衡，它可以影響行為、溝通狀態(tài)、引導(dǎo)用戶(hù)和幫助他們查看自己行為的結(jié)果。下面是一些例子，是在一些方面可以增加動(dòng)效改進(jìn)UI的經(jīng)驗(yàn)：

加載不再無(wú)聊

如果你不能縮短加載時(shí)間和無(wú)聊的旋轉(zhuǎn)圖標(biāo)（基本上只是提醒用戶(hù)正在等待），那么可以用動(dòng)效代替等待的時(shí)間，應(yīng)該盡力讓等待變得更加愉快。幾乎任何網(wǎng)站或者app會(huì)利用屏幕的線(xiàn)框圖上微妙的動(dòng)效讓用戶(hù)在等待期間參與進(jìn)來(lái)。

        屏幕線(xiàn)框圖在內(nèi)容完全加載之前完成UI。圖片來(lái)源：tandemseven

不能削減設(shè)計(jì)狀態(tài)的變化

動(dòng)效可以使轉(zhuǎn)換更加明顯，用戶(hù)明確知道開(kāi)始到結(jié)束發(fā)生了什么。一個(gè)好的過(guò)渡設(shè)計(jì)會(huì)讓用戶(hù)清楚的理解他們的注意力應(yīng)該在什么地方。

Adrian Zumbrunnen上有個(gè)很好的滾動(dòng)動(dòng)畫(huà)的例子，當(dāng)用戶(hù)點(diǎn)擊一個(gè)鏈接時(shí)，幫助用戶(hù)聯(lián)系上下文。只是一個(gè)普通的靜態(tài)頁(yè)面感覺(jué)會(huì)很生硬：

        直接切換感覺(jué)很不自然，用戶(hù)很難接受這種變化。圖片來(lái)源：smashingmagazine

帶有動(dòng)效的行為：

        動(dòng)效就是貼近生活。圖片來(lái)源：smashingmagazine

如你所見(jiàn)，轉(zhuǎn)換幫助用戶(hù)加快理解界面。它還可以引導(dǎo)用戶(hù)下一步的交互。

解釋元素之間的關(guān)系

動(dòng)效可以增強(qiáng)直接操縱的感覺(jué)。

例如，一個(gè)菜單圖標(biāo)和一個(gè)播放控制圖標(biāo)可以來(lái)回切換。這種動(dòng)效應(yīng)該在添加交互時(shí)通知用戶(hù)按鈕的功能。轉(zhuǎn)換播放圖標(biāo)到暫停，意味著這兩個(gè)圖標(biāo)是連接著的，當(dāng)一個(gè)存在時(shí)另一個(gè)不存在。

        在這個(gè)情況中，屏幕中控制音樂(lè)的位置的動(dòng)效很吸引眼球。圖片來(lái)源：Material Design

另一個(gè)例子，當(dāng)按下浮動(dòng)按鈕時(shí)，加號(hào)變成一支鉛筆。這表明了鉛筆是主要的操作。這個(gè)小細(xì)節(jié)在猜測(cè)接下來(lái)發(fā)生什么和圖標(biāo)在不同狀態(tài)下的含義總是不同的。

        圖片來(lái)源：Material Design

用動(dòng)效反饋來(lái)說(shuō)明問(wèn)題

動(dòng)效可以增強(qiáng)用戶(hù)的操作。

例如，表單輸入可以用動(dòng)效進(jìn)行增強(qiáng)。如果輸入正確可以用一個(gè)簡(jiǎn)單的點(diǎn)頭動(dòng)效。而當(dāng)輸入不正確則水平搖晃。當(dāng)用戶(hù)注意到這個(gè)動(dòng)效就會(huì)立刻理解行為。

        形式上在在向你搖頭。圖片來(lái)源：Micha?l Villar

用動(dòng)效反饋老展示已經(jīng)完成

動(dòng)畫(huà)可以幫助人們理解他們行為的結(jié)果。遵循的原則："展示，而不是說(shuō)。"，你可以用動(dòng)效反饋已經(jīng)完成。

在下面的例子，當(dāng)用戶(hù)點(diǎn)擊"支付"，一個(gè)短暫的轉(zhuǎn)輪顯示成功的狀態(tài)。檢查動(dòng)效讓用戶(hù)覺(jué)得他們?nèi)菀椎倪M(jìn)行了支付，他們希望有這樣重要的細(xì)節(jié)。

        圖片來(lái)源：Micha?l Villar

總結(jié)

在一個(gè)復(fù)雜的情況下動(dòng)效是很強(qiáng)大的。花時(shí)間考慮動(dòng)效的存在是很重要的。我們需要從研究運(yùn)動(dòng)開(kāi)始，考慮設(shè)計(jì)中必須的動(dòng)效，因?yàn)樵O(shè)計(jì)不僅僅是視覺(jué)的呈現(xiàn)。就像Steve Jobs 說(shuō)過(guò)關(guān)于設(shè)計(jì)的一句話(huà)：

設(shè)計(jì)并非外觀怎樣或者感覺(jué)如何。設(shè)計(jì)是解決它是怎樣工作的。

謝謝你們。

---

原文地址：https://uxplanet.org/how-to-use-animation-to-improve-ux-338819e93bdb#.8z12f07cx

作者地址：https://uxplanet.org/@101

藍(lán)藍(lán)設(shè)計(jì)( m.0391cbd.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)