UI大牛告訴你動效的使用方法

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

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

當我們無法縮短時長，但我們可以讓等待更愉快。 

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

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

一個大家都知道的動畫效果就是“下拉刷新”，這會觸發(fā)移動設備上的內容刷新。

小貼士：下拉刷新的動畫應該和APP的設計規(guī)范相匹配：如果你的APP風格是簡潔的，那這里的動畫也應該是簡潔的。

因為移動的物體天生會吸引注意力，動畫化你的產(chǎn)品的通知是一種愉快的方式來通知你的用戶，而不會犧牲太多的用戶體驗。

移動的物體能夠立刻吸引用戶的注意力。

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

動效設計可以有效地吸引用戶的注意力，既能通知用戶，又能愉悅用戶。

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

設計師可以使用動畫幫助用戶在各導航之間平滑地切換，并且闡明清楚頁面上元素布局的變化。

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

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

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

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

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

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

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

視覺反饋對于任何用戶界面來說都至關重要。它可以使用戶感受到控制權。對于用戶來說，“控制”意味著在任何時間都可以知道和理解他們所處的位置。

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

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

為了彌補這種差距，視覺和動效可以對用戶的輸入給予即時的反饋，通過直觀可操作的動畫來表現(xiàn)。

按鈕對用戶的點擊作出反饋。

“動效”可以增強每一個交互點，并且加強用戶對正在執(zhí)行的操作的印象。

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

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