UI大牛告訴你動(dòng)效的使用方法

在APP后臺(tái)總會(huì)運(yùn)行著一些進(jìn)程，例如，從服務(wù)器上下載數(shù)據(jù)，或者進(jìn)行某項(xiàng)計(jì)算。這類進(jìn)程總是需要一些時(shí)間，因此，你需要讓用戶知道你的APP沒有卡住，并且告訴用戶正在進(jìn)行的進(jìn)程的狀態(tài)。進(jìn)程的視覺顯示可以讓用戶對(duì)APP產(chǎn)生一種控制感。

加載時(shí)間對(duì)于大多數(shù)互聯(lián)網(wǎng)產(chǎn)品來(lái)說(shuō)是不可避免的。雖然動(dòng)效不能從根本上解決問題，但是它可以讓“等待”不是那么難受。

當(dāng)我們無(wú)法縮短時(shí)長(zhǎng)，但我們可以讓等待更愉快。 

充滿創(chuàng)意的加載提示可以減少用戶對(duì)時(shí)間的感知。動(dòng)效可以使等待的過(guò)程看上去比實(shí)際好一些，影響用戶對(duì)你的產(chǎn)品的看法。

如果APP在用戶等待的時(shí)間里，向用戶展示一些有趣的東西，這可以使用戶減少關(guān)注等待本身。

一個(gè)大家都知道的動(dòng)畫效果就是“下拉刷新”，這會(huì)觸發(fā)移動(dòng)設(shè)備上的內(nèi)容刷新。

小貼士：下拉刷新的動(dòng)畫應(yīng)該和APP的設(shè)計(jì)規(guī)范相匹配：如果你的APP風(fēng)格是簡(jiǎn)潔的，那這里的動(dòng)畫也應(yīng)該是簡(jiǎn)潔的。

因?yàn)橐苿?dòng)的物體天生會(huì)吸引注意力，動(dòng)畫化你的產(chǎn)品的通知是一種愉快的方式來(lái)通知你的用戶，而不會(huì)犧牲太多的用戶體驗(yàn)。

移動(dòng)的物體能夠立刻吸引用戶的注意力。

動(dòng)效的最基本的用法是—切換。這類動(dòng)效背后的邏輯是幫助用戶理解頁(yè)面中發(fā)生的變化、引發(fā)了變化的內(nèi)容以及以后如何再次觸發(fā)變化。一個(gè)經(jīng)典的例子就是可以觸發(fā)隱藏內(nèi)容的“漢堡按鈕”。

動(dòng)效設(shè)計(jì)可以有效地吸引用戶的注意力，既能通知用戶，又能愉悅用戶。

雖然漢堡按鈕是經(jīng)常會(huì)用到的導(dǎo)航菜單方式，不過(guò)還有很多方式可以完成導(dǎo)航。

設(shè)計(jì)師可以使用動(dòng)畫幫助用戶在各導(dǎo)航之間平滑地切換，并且闡明清楚頁(yè)面上元素布局的變化。

過(guò)渡動(dòng)畫應(yīng)該作為UI不同狀態(tài)之間的中介，幫助用戶了解頁(yè)面的變化。

動(dòng)畫很適合表述界面中的事物，并且說(shuō)明它們之間如何相互作用。

動(dòng)畫闡明了元素之間是如何聯(lián)系的。

在某些情況下，設(shè)計(jì)師會(huì)被迫設(shè)計(jì)一個(gè)在某些條件下功能發(fā)生變化的操作按鈕。因?yàn)橐苿?dòng)設(shè)計(jì)的整體空間有限，我們經(jīng)常在移動(dòng)設(shè)計(jì)中看到這種形式。

“播放”和“暫停”按鈕可能是最常見的多狀態(tài)按鈕。

這種類型的動(dòng)畫表明了一個(gè)元素在與用戶交互后是如何改變的。在下面的例子中，當(dāng)用戶點(diǎn)擊懸浮操作按鈕的時(shí)候，“加號(hào)”變成“鉛筆”。“鉛筆”說(shuō)明正在執(zhí)行編輯操作。這種小細(xì)節(jié)意味著用戶不需要猜測(cè)接下來(lái)會(huì)發(fā)生什么，用戶可以通過(guò)圖標(biāo)的變化了解不同的狀態(tài)。

按鈕的外觀發(fā)生了變化，從“加號(hào)”變成“鉛筆”，表明按鈕的功能已經(jīng)發(fā)生改變。

視覺反饋對(duì)于任何用戶界面來(lái)說(shuō)都至關(guān)重要。它可以使用戶感受到控制權(quán)。對(duì)于用戶來(lái)說(shuō)，“控制”意味著在任何時(shí)間都可以知道和理解他們所處的位置。

用戶界面元素（如按鈕和控件）應(yīng)該顯得可觸摸的，即使事實(shí)上它們是在一層玻璃后面。

在真實(shí)的物理世界中，按鈕和控件和其他事物會(huì)對(duì)我們和它們的交互行為作出反饋。人們會(huì)期望界面上的控件也能作出類似的反饋。

為了彌補(bǔ)這種差距，視覺和動(dòng)效可以對(duì)用戶的輸入給予即時(shí)的反饋，通過(guò)直觀可操作的動(dòng)畫來(lái)表現(xiàn)。

按鈕對(duì)用戶的點(diǎn)擊作出反饋。

“動(dòng)效”可以增強(qiáng)每一個(gè)交互點(diǎn)，并且加強(qiáng)用戶對(duì)正在執(zhí)行的操作的印象。

在下面的例子中，當(dāng)用戶點(diǎn)擊“Pay”時(shí)，一個(gè)Loading旋轉(zhuǎn)動(dòng)效會(huì)在成功狀態(tài)前出現(xiàn)。而對(duì)勾的動(dòng)畫效果又讓用戶感覺他們輕松地完成了支付。用戶確實(shí)喜歡這樣的細(xì)節(jié)。

視覺反饋可以提升用戶參與度，并使用戶愉悅。
相關(guān)文章--《產(chǎn)品經(jīng)理的核心競(jìng)爭(zhēng)力是什么》