毫無(wú)疑問(wèn)，在UI和網(wǎng)頁(yè)中使用動(dòng)效已經(jīng)成為大趨勢(shì)。這種趨勢(shì)是如此之明顯，以至于越來(lái)越多的應(yīng)用已經(jīng)不是為了提升體驗(yàn)而設(shè)計(jì)動(dòng)效，更多是為了強(qiáng)調(diào)動(dòng)效本身。設(shè)計(jì)師 Pasquale D'Silva 在2013年的 Web Direction South 上曾這樣說(shuō)過(guò)：

好的動(dòng)效是隱形的。(作為用戶(hù)的)你不應(yīng)該注意到你正在看一個(gè)動(dòng)效。

這是一個(gè)很好的建議，我們作為屏幕背后的設(shè)計(jì)和開(kāi)發(fā)團(tuán)隊(duì)，事先在腦中設(shè)定幾個(gè)原則：動(dòng)效的存在必須提高可用性，令人覺(jué)得自然，含蓄，是給予用戶(hù)反饋的一種機(jī)制。

好的界面也是一樣隱形的：《優(yōu)秀界面的終極形態(tài)：隱形的界面》

在過(guò)去的一年里，我一直忙于Email Builder的工作，在這個(gè)過(guò)程中我對(duì)于網(wǎng)頁(yè)中的動(dòng)效設(shè)計(jì)有了比較深入的了解，和本地的APP不同，它所面臨的挑戰(zhàn)更大，不僅需要考慮行距、間距、布局等等因素，而且所有設(shè)備和瀏覽器上動(dòng)效的顯示效果都不一樣，這也使得我們?cè)诹D創(chuàng)造最好的用戶(hù)體驗(yàn)過(guò)程中，不得不妥協(xié)。事實(shí)上，我們?cè)?7寸iMac上實(shí)現(xiàn)了許多漂亮而實(shí)用的特性，但是因?yàn)樵谄渌O(shè)備上運(yùn)行生澀遲滯，使得我們?cè)谧罱K發(fā)布的版本中未曾將它們放進(jìn)去。

在概念和設(shè)計(jì)階段，我們索設(shè)計(jì)的所有動(dòng)效和交互原型，在最終釋出的產(chǎn)品中，我們只保留了最實(shí)用效果最好的那部分。對(duì)我們而言，這樣可以親手挑選出最有用的動(dòng)效，并且將它們放在最恰當(dāng)?shù)牡胤健切┨嵘脩?hù)體驗(yàn)的細(xì)節(jié)之處。下面是我們我們精選的一部分動(dòng)效設(shè)計(jì)：

新增布局下拉框動(dòng)效

當(dāng)用戶(hù)單擊“Add layout”按鈕的時(shí)候，下拉框會(huì)從按鈕處淡入淡出顯現(xiàn)出來(lái)，這個(gè)時(shí)候動(dòng)效可以凸顯下拉框和按鈕之間的從屬關(guān)系。

側(cè)邊欄折疊框

當(dāng)你點(diǎn)擊某個(gè)折疊框的時(shí)候它會(huì)展開(kāi)，其他的框會(huì)折疊起來(lái)，動(dòng)效令內(nèi)容和標(biāo)題之間自然形成關(guān)聯(lián)。而“image”的標(biāo)簽頁(yè)是稍微遲滯一會(huì)兒才逐漸顯現(xiàn)的，這使得動(dòng)效有了層次，也讓用戶(hù)注意到這些內(nèi)容的所在標(biāo)簽頁(yè)。

按鈕狀態(tài)

當(dāng)你在等待某些事物的時(shí)候，你會(huì)覺(jué)得時(shí)間變慢了。所以，當(dāng)用戶(hù)在等待接收郵件的時(shí)候，我們會(huì)借助動(dòng)效向他們展示后臺(tái)正在發(fā)生的事情。在實(shí)際郵件發(fā)送時(shí)長(zhǎng)不變的前提下，我們讓用戶(hù)的注意力不再空置，而是轉(zhuǎn)移到動(dòng)效上來(lái)，讓他們感覺(jué)時(shí)間“變快了”。

添加或復(fù)制布局

當(dāng)用戶(hù)新增或者復(fù)制某個(gè)布局的時(shí)候，我們借助動(dòng)效先創(chuàng)建一個(gè)空白區(qū)域，然后新布局或者控件會(huì)從這個(gè)空白區(qū)域中淡出顯現(xiàn)，越來(lái)越清晰，從而暗示了“創(chuàng)建”的概念。

刪除布局

當(dāng)你的整個(gè)郵件布局中包含太多相似的區(qū)塊，刪除就不可避免了。當(dāng)你刪除某個(gè)區(qū)塊的時(shí)候，下面的區(qū)域會(huì)向上滑動(dòng)頂替這個(gè)位置，從而強(qiáng)調(diào)了刪除的概念。

布局控件

當(dāng)用戶(hù)鼠標(biāo)移動(dòng)到某個(gè)布局的附近的時(shí)候，布局控件會(huì)顯現(xiàn)。小控件會(huì)從對(duì)應(yīng)的布局區(qū)域逐漸淡出到旁邊，暗示了從屬關(guān)系，讓用戶(hù)明白這些按鈕所操控的布局是哪一塊。

我敢確信，真正優(yōu)秀的動(dòng)效設(shè)計(jì)師能夠輕松指出這些動(dòng)效的應(yīng)該如何提升。遺憾的地方在于，設(shè)備平臺(tái)和瀏覽器的分裂以及性能問(wèn)題，使得我們不得不放棄許多動(dòng)效和精致的細(xì)節(jié)。值得安慰的是，至少我們確定現(xiàn)有的動(dòng)效已經(jīng)提供了足夠優(yōu)秀的跨平臺(tái)用戶(hù)體驗(yàn)。

越來(lái)越多的人開(kāi)始探討動(dòng)效、設(shè)計(jì)動(dòng)效、撰文總結(jié)并不意味著你得為每一個(gè)變化和細(xì)節(jié)設(shè)計(jì)動(dòng)效。如果作為設(shè)計(jì)師的我們真正履行了我們的職責(zé)，那么用戶(hù)是不應(yīng)該注意到這些動(dòng)效的。

優(yōu)秀的動(dòng)效，應(yīng)該是隱形的，就像那些優(yōu)秀的界面一樣。

【少年，來(lái)搞動(dòng)效設(shè)計(jì)吧！】

不能不知道的動(dòng)效分類(lèi)知識(shí)：
《來(lái)點(diǎn)驚喜！APP動(dòng)效設(shè)計(jì)分為哪幾種？》

做有意義的動(dòng)效設(shè)計(jì)：
《設(shè)計(jì)師的必備技能！你需要學(xué)會(huì)設(shè)計(jì)有意義的動(dòng)效》

不是只有AE可以做動(dòng)效：
《SKETCH+KEYNOTE雙劍合璧！教你5步快速制作移動(dòng)動(dòng)效》

原文地址：medium
優(yōu)設(shè)譯者：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量91萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
官方微信：想在手機(jī)上、被窩里獲取設(shè)計(jì)教程和各種意想不到的"福利"嗎？添加優(yōu)設(shè)哥微信號(hào)：youshege