
之前的一篇關(guān)于無償動畫的短文確實引起了人們的共鳴。群眾們的回復是熱烈的,運用超棒的動畫界面設(shè)計表達了傳達了人們的感受。
最清楚的一點,我不是不贊成情感化的用戶界面設(shè)計。從遠處講,我有一個關(guān)于動畫的問題就是動畫可能最終只會妨礙用戶。
有能力的UI 設(shè)計師最明顯的標志之一就是克制。是去了解你所選用平臺的各種功能款式并且不去使用它們(直到出現(xiàn)完美的機會)。
與其抱怨使用了不必要的動畫,我會盡力去建議去在可以從中收益的場景中使用動畫。
我期待聽到您對此主題的意見和建議。
如果您喜歡這篇文章,您也可能會喜歡
一個人為的例子
以下是我提出的一個快速,認為的例子來展示UI動效設(shè)計。雖然這是一個夸張的例子,但實際上有許多用戶界面設(shè)計中存在這樣花哨的動效。

此鏈接查看這次演示的實時版本https://www.ux-app.com/device/view?s=MRGG9547&l=&pg=35687
這就像我們已經(jīng)放棄了視覺假象,并將其替換為行為特征,我們的數(shù)據(jù)就像是有果凍制成或者懸掛在隱形橡皮筋上的。
停止恣意使用動畫
動畫就像咒語。如果你過度使用它,它會失去所有影響。
動畫使用準則
我聽說一些UI設(shè)計師建議將迪士尼的動畫制作準則作為UI設(shè)計師的必讀內(nèi)容。這的確有助于加深UI作為娛樂的概念,但這總會降低用戶操作效率。
許多UI動畫設(shè)計師似乎都將用戶界面是為動畫組合。除非你希望皮克斯能夠接受它,否則你應該避免使用動畫造成的“Bounce”或”Ease-in-Out”.
什么是界面?
在計算中,接口是共享界面,計算機系統(tǒng)中的兩個單獨組件通過該邊界交換信息。
界面(計算)—?維基百科,免費的百科全書
https://en.wikipedia.org/wiki/Interface_(computing)
界面負責調(diào)解信息交換,這就使得界面變得相當重要。設(shè)計師面臨的挑戰(zhàn)是確定他們的設(shè)計何時會妨礙這一中心UI原則。
UI設(shè)計中的動效
以下是一些對我有用的簡單原則,我建議給你們的:
·確保每個動畫的使用對用戶有用。“它看起來很漂亮”是沒資格使用的
·將動畫持續(xù)時間保持在不超過300毫秒
·避免線性動畫漸漸消逝。它會使動效看起來緩慢,無趣和機械
·99%的動畫應使用簡單的“緩入”或“緩出”。
你很少需要過于炫酷的動畫,像Spring,Bounce等。
一些UI示例

查看此演示的實時版本https://www.ux-app.com/device/view?s=MRGG9547&l=1&pg=366
上面的演示使用了強度升級的動畫
·在第一次點擊時,通知會淡入
·在第二次單擊時標簽會抖動
如果用戶持續(xù)點擊按鈕,則可以使用針對該問題可選的模式來覆蓋按鈕吸引用戶的注意力
此外,按鈕本身可以更改的顏色來指示后續(xù)失敗的操作。
卡片擴展
這是卡片視圖的簡單但非常有效的實現(xiàn)方法之一,通常在移動設(shè)備上使用。我非常喜歡這種互動,是因為它允許用戶維護上下文。即使我們對列表的看法模糊不清,我們也知道它位于擴展視圖后面。

點擊這里查看查看演示實時版本https://www.ux-app.com/device/view?s=MRGG9547&l=1&pg=36662
我故意稍微延遲了顯示卡片的關(guān)閉圖標,我使用了一個動畫轉(zhuǎn)換,可以激活位置和不透明度。
這將用戶的注意力吸引到需要知道的能夠接觸卡片的重要UI元素。
重要層次性
作為設(shè)計人員和開發(fā)人員,我們所做的最重要的事情之一就是確定UI的哪些元素比其他元素更重要。我們用多種方式做到這一點
·通過使用標題
·加下劃線或使文字變粗
·使用顏色
·使用形狀和圖像
·動效
你不會將文檔中的每個句子都放入標題中。同樣的原則也適用于動畫。將UI中的每個動畫元素都當做書面文檔中的標題。它應該用于表示元素的重要性。過度使用它會簡化您的層次結(jié)構(gòu)并淡化您嘗試通信的消息。
功能與美學動畫
程序眼經(jīng)常根據(jù)“code smell”討論代碼?!癱ode smell”指的是編程代碼的功能,這些代碼可能不是完全糟糕的,但它們確實激發(fā)經(jīng)驗豐富的程序員對潛在的糟糕代碼的敏銳感覺。
如果你開始聽到團隊成員使用諸如“令人愉快”這樣的術(shù)語來談?wù)搫赢嫞敲茨愕摹癲esgin smell”警報應該開始消失。為動畫而去做動畫(幾乎總是)是糟糕的設(shè)計。
請記住,對于動畫要少用。功能總是勝于純粹的美學動畫。

不要讓你的動畫以你理解的用戶方式進行。這就是為什么飛機的導航界面設(shè)計不使用任何動畫的原因。在你的用戶界面添加一個不必要的300ms動畫可能不會殺死任何人,但它會讓你的用戶感到煩躁,而不是“讓他們愉悅”!
最后的看法
總的來說在界面設(shè)計中使用的動畫可以為高速寬帶快速傳達重要信息。傾向于功能性而不是純粹的美學設(shè)計,并且要珍惜用戶投入你界面設(shè)計的每分每秒。
三米工作室“TF三缺一與他們的經(jīng)紀人”小組的每周優(yōu)質(zhì)設(shè)計文章漢化計劃09篇--《你的界面設(shè)計不是迪士尼電影(Your UI isn’t a Disney?Movie)》。
Medium原文鏈接:https://startupsventurecapital.com/your-ui-isn-t-a-disney-movie-703f7fbd24d2