我之前的一篇關(guān)于無(wú)償動(dòng)畫(huà)的短文確實(shí)引起了人們的共鳴。群眾們的回復(fù)是熱烈的膨疏，運(yùn)用超棒的動(dòng)畫(huà)界面設(shè)計(jì)表達(dá)了傳達(dá)了人們的感受一睁。
最清楚的一點(diǎn)，我不是不贊成情感化的用戶(hù)界面設(shè)計(jì)佃却。從遠(yuǎn)處講者吁，我有一個(gè)關(guān)于動(dòng)畫(huà)的問(wèn)題就是動(dòng)畫(huà)可能最終只會(huì)妨礙用戶(hù)。
有能力的UI 設(shè)計(jì)師最明顯的標(biāo)志之一就是克制饲帅。是去了解你所選用平臺(tái)的各種功能款式并且不去使用它們（直到出現(xiàn)完美的機(jī)會(huì)）复凳。
與其抱怨使用了不必要的動(dòng)畫(huà)，我會(huì)盡力去建議去在可以從中收益的場(chǎng)景中使用動(dòng)畫(huà)灶泵。
我期待聽(tīng)到您對(duì)此主題的意見(jiàn)和建議育八。
如果您喜歡這篇文章，您也可能會(huì)喜歡
一個(gè)人為的例子
以下是我提出的一個(gè)快速赦邻，認(rèn)為的例子來(lái)展示UI動(dòng)效設(shè)計(jì)髓棋。雖然這是一個(gè)夸張的例子，但實(shí)際上有許多用戶(hù)界面設(shè)計(jì)中存在這樣花哨的動(dòng)效。
這就像我們已經(jīng)放棄了視覺(jué)假象按声，并將其替換為行為特征膳犹，我們的數(shù)據(jù)就像是有果凍制成或者懸掛在隱形橡皮筋上的。
停止恣意使用動(dòng)畫(huà)
動(dòng)畫(huà)就像咒語(yǔ)签则。如果你過(guò)度使用它须床，它會(huì)失去所有影響。
動(dòng)畫(huà)使用準(zhǔn)則
我聽(tīng)說(shuō)一些UI設(shè)計(jì)師建議將迪士尼的動(dòng)畫(huà)制作準(zhǔn)則作為UI設(shè)計(jì)師的必讀內(nèi)容渐裂。這的確有助于加深UI作為娛樂(lè)的概念豺旬，但這總會(huì)降低用戶(hù)操作效率。
許多UI動(dòng)畫(huà)設(shè)計(jì)師似乎都將用戶(hù)界面是為動(dòng)畫(huà)組合柒凉。除非你希望皮克斯能夠接受它族阅，否則你應(yīng)該避免使用動(dòng)畫(huà)造成的“Bounce”或”Ease-in-Out”.
什么是界面？
在計(jì)算中膝捞，接口是共享界面耘分，計(jì)算機(jī)系統(tǒng)中的兩個(gè)單獨(dú)組件通過(guò)該邊界交換信息。
界面（計(jì)算）—?維基百科绑警，免費(fèi)的百科全書(shū)
https://en.wikipedia.org/wiki/Interface_(computing)
界面負(fù)責(zé)調(diào)解信息交換，這就使得界面變得相當(dāng)重要央渣。設(shè)計(jì)師面臨的挑戰(zhàn)是確定他們的設(shè)計(jì)何時(shí)會(huì)妨礙這一中心UI原則计盒。
UI設(shè)計(jì)中的動(dòng)效
以下是一些對(duì)我有用的簡(jiǎn)單原則，我建議給你們的:
·確保每個(gè)動(dòng)畫(huà)的使用對(duì)用戶(hù)有用芽丹”逼簦“它看起來(lái)很漂亮”是沒(méi)資格使用的
·將動(dòng)畫(huà)持續(xù)時(shí)間保持在不超過(guò)300毫秒
·避免線(xiàn)性動(dòng)畫(huà)漸漸消逝。它會(huì)使動(dòng)效看起來(lái)緩慢拔第，無(wú)趣和機(jī)械
·99%的動(dòng)畫(huà)應(yīng)使用簡(jiǎn)單的“緩入”或“緩出”咕村。
你很少需要過(guò)于炫酷的動(dòng)畫(huà)，像Spring蚊俺，Bounce等懈涛。
一些UI示例
上面的演示使用了強(qiáng)度升級(jí)的動(dòng)畫(huà)
·在第一次點(diǎn)擊時(shí)，通知會(huì)淡入
·在第二次單擊時(shí)標(biāo)簽會(huì)抖動(dòng)
如果用戶(hù)持續(xù)點(diǎn)擊按鈕泳猬，則可以使用針對(duì)該問(wèn)題可選的模式來(lái)覆蓋按鈕吸引用戶(hù)的注意力
此外批钠，按鈕本身可以更改的顏色來(lái)指示后續(xù)失敗的操作。
卡片擴(kuò)展
這是卡片視圖的簡(jiǎn)單但非常有效的實(shí)現(xiàn)方法之一得封，通常在移動(dòng)設(shè)備上使用埋心。我非常喜歡這種互動(dòng)，是因?yàn)樗试S用戶(hù)維護(hù)上下文忙上。即使我們對(duì)列表的看法模糊不清拷呆，我們也知道它位于擴(kuò)展視圖后面。
我故意稍微延遲了顯示卡片的關(guān)閉圖標(biāo)，我使用了一個(gè)動(dòng)畫(huà)轉(zhuǎn)換茬斧，可以激活位置和不透明度腰懂。
這將用戶(hù)的注意力吸引到需要知道的能夠接觸卡片的重要UI元素。
重要層次性
作為設(shè)計(jì)人員和開(kāi)發(fā)人員啥供，我們所做的最重要的事情之一就是確定UI的哪些元素比其他元素更重要悯恍。我們用多種方式做到這一點(diǎn)
·通過(guò)使用標(biāo)題
·加下劃線(xiàn)或使文字變粗
·使用顏色
·使用形狀和圖像
·動(dòng)效
你不會(huì)將文檔中的每個(gè)句子都放入標(biāo)題中。同樣的原則也適用于動(dòng)畫(huà)伙狐。將UI中的每個(gè)動(dòng)畫(huà)元素都當(dāng)做書(shū)面文檔中的標(biāo)題涮毫。它應(yīng)該用于表示元素的重要性。過(guò)度使用它會(huì)簡(jiǎn)化您的層次結(jié)構(gòu)并淡化您嘗試通信的消息贷屎。
功能與美學(xué)動(dòng)畫(huà)
程序眼經(jīng)常根據(jù)“code smell”討論代碼罢防。“code smell”指的是編程代碼的功能唉侄，這些代碼可能不是完全糟糕的咒吐，但它們確實(shí)激發(fā)經(jīng)驗(yàn)豐富的程序員對(duì)潛在的糟糕代碼的敏銳感覺(jué)。
如果你開(kāi)始聽(tīng)到團(tuán)隊(duì)成員使用諸如“令人愉快”這樣的術(shù)語(yǔ)來(lái)談?wù)搫?dòng)畫(huà)属划，那么你的“desgin smell”警報(bào)應(yīng)該開(kāi)始消失恬叹。為動(dòng)畫(huà)而去做動(dòng)畫(huà)（幾乎總是）是糟糕的設(shè)計(jì)。
請(qǐng)記住同眯，對(duì)于動(dòng)畫(huà)要少用绽昼。功能總是勝于純粹的美學(xué)動(dòng)畫(huà)。
不要讓你的動(dòng)畫(huà)以你理解的用戶(hù)方式進(jìn)行须蜗。這就是為什么飛機(jī)的導(dǎo)航界面設(shè)計(jì)不使用任何動(dòng)畫(huà)的原因硅确。在你的用戶(hù)界面添加一個(gè)不必要的300ms動(dòng)畫(huà)可能不會(huì)殺死任何人，但它會(huì)讓你的用戶(hù)感到煩躁明肮，而不是“讓他們愉悅”菱农！
最后的看法
總的來(lái)說(shuō)在界面設(shè)計(jì)中使用的動(dòng)畫(huà)可以為高速寬帶快速傳達(dá)重要信息。傾向于功能性而不是純粹的美學(xué)設(shè)計(jì)柿估，并且要珍惜用戶(hù)投入你界面設(shè)計(jì)的每分每秒循未。
Medium原文鏈接
https://startupsventurecapital.com/your-ui-isn-t-a-disney-movie-703f7fbd24d2
@三米工作室-TFboys三缺一和他們的經(jīng)紀(jì)人
