數(shù)十萬互聯(lián)網(wǎng)從業(yè)者的共同關(guān)注！

作者：可樂橙。微信公眾號：可樂橙（ID:colachangreen）

作者授權(quán)早讀課發(fā)表，轉(zhuǎn)載請聯(lián)系作者

歡迎投稿到早讀課，投稿郵箱：mm@zaodula.com

我之前撰文講過多余的動畫，引發(fā)了一些共鳴。得到了非常積極的反饋，我很高興了解到，動畫過多的界面也會令其他人手足無措。

老實說，我并不反對為界面進行動效設(shè)計。我主要是在質(zhì)疑那些妨礙用戶的動畫。

克制，是一名優(yōu)秀UI設(shè)計師的特質(zhì)。它要求你了解所選平臺的能力，然后避免使用它（除非時機成熟）。

與其為多余的動畫惋惜，我寧可學(xué)習(xí)深思熟慮的動畫，盡量提出一些方案。

我期望得到你對本文的評價與建議。

做作的動畫案例

下面是一則快速且做作的動畫案例，我以此來演示UI動畫中的卡通化現(xiàn)象。盡管這是個略微夸張的例子，但事實上，確有許多界面呈現(xiàn)出了這種花哨的動畫。

似乎我們剛拋棄了擬物化的視覺設(shè)計，又陷入了行為上的擬物化。我們把虛擬物表現(xiàn)得像是果凍，或像是掛在隱形的橡皮繩上。

拒絕肆無忌憚的動畫

動畫就像某種咒法。如果過度使用，就會效力盡失。

動畫原則

我聽聞一些UI設(shè)計師推崇卡通化的動畫設(shè)計，將它作為UI設(shè)計師的必讀準則。不幸的是，這增強了UI的娛樂功效，總會使得界面變成用戶的阻礙。

許多UI動效設(shè)計師似乎把界面設(shè)計當成了他們的動畫作品集。除非你想被收錄進Pixar，否則請避免使用“彈跳”、“加速后減速”這樣的緩動效果。

界面是什么？

在計算機科學(xué)中，界面是指計算機系統(tǒng)中，兩個獨立組成部分相互交換信息的銜接處。界面（計算機）——維基百科，自由的百科全書(computing)

界面居中銜接、傳達信息的作用使得它如此重要。決定何時可以違背這條UI中心原則，是設(shè)計師所面臨的挑戰(zhàn)。

UI設(shè)計中的動效

這些簡單的準則讓我受益良多，在此推薦：

• 站在用戶的立場對每段動畫做出決斷，“挺好看的”可不是正確答案。

• 保持每段動畫時間不超過300ms。

• 避免使用線性動畫，它使得動畫看起來遲緩、無趣且機械。

• 99%的動畫都應(yīng)該使用簡單的“加速”或“減速”緩動效果。

• 你極少會需要那些更加醒目的緩動效果，例如彈簧、彈跳等等。

界面案例

這些例子請盡情批評、挑刺。你們的評論和建議常常能改善我的想法。

通知

通知案例1

這個簡單的動畫只持續(xù)300ms。它有細微的分層效果，卡片的動畫開始后，消息在100ms內(nèi)淡入顯現(xiàn)。本例中的動效確實提升了用戶體驗，因為它將用戶的注意力引向了不可忽視的重要的通知。

通知的升級

通知案例2

上面的例子使用了更強烈的動畫。

• 首次點按，通知淡入顯現(xiàn)

• 再次點按，整個標簽晃動

如果用戶持續(xù)點按按鈕，還可以疊加一個模態(tài)窗口吸引用戶注意。

而且在后續(xù)失敗的嘗試后，也可以通過改變按鈕本身顏色來警示。

卡片展開

這是卡片視圖的一種簡單有效的實現(xiàn)，移動端通常都這么做。我非常喜歡這個交互，因為它讓用戶熟悉來龍去脈。即使列表視圖不見了，我們也知道它就在那里，在展開項的背后。

卡片展開案例

我故意讓卡片的關(guān)閉按鈕稍稍延遲顯現(xiàn)，同時使用了位置與透明度的動畫。用戶的視線不會漏掉這個重要的UI元素，他們在收起卡片時會需要它。

重要性分層次

作為設(shè)計師與開發(fā)者，必然要決定我們界面中哪些元素更重要。它有很多種體現(xiàn)方式：

• 使用標題

• 下劃線、或是加粗

• 使用色彩

• 使用形狀和圖片

• 運動

你當然不會把文章的每一句話都當作標題。這個原則也適用于動畫。界面中的每個動畫元素，都等同于文章中的一個標題。它應(yīng)該用來顯現(xiàn)元素的重要性。過度使用反而會混淆層次，同時干擾你試圖表達的信息。

功能動畫vs裝飾動畫

程序員常常談?wù)摗按a嗅覺”。這是指編寫代碼時的某種特質(zhì)，它并無絕對的對錯，但能避免老練的程序員寫出低質(zhì)量代碼。

如果你聽到團隊伙伴談?wù)揢I動畫“愉悅”用戶，你的“設(shè)計嗅覺”警鐘可能就響起了。為了動畫而做動畫（幾乎任何時候）是糟糕的設(shè)計。

切記，動畫同樣符合少即是多的原則。功能動畫總是勝過純粹的裝飾動畫。

不要讓動畫妨礙了用戶。這就是為什么飛機駕駛艙的界面從不用使用動畫。額外增加毫無必要的300ms動畫，對你的界面而言可能人畜無害，但它給用戶帶來的煩惱遠比“愉悅”更多！

總結(jié)

界面中還是需要動畫的。要將它作為迅速傳遞重要信息的工具。多用功能性而非純裝飾動畫，珍視用戶花在你界面上的每一毫秒。

互聯(lián)網(wǎng)早讀課，每天八點，風(fēng)雨無阻專注產(chǎn)品、設(shè)計、交互、運營微博：@互聯(lián)網(wǎng)早讀課QQ 10群：215027395加群密碼：地區(qū)-職位-昵稱

互聯(lián)網(wǎng)早讀課是WeMedia自媒體成員之一，

WeMedia是自媒體第一聯(lián)盟，覆蓋5000萬人群