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

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

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

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

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

新增布局下拉框動效

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

側(cè)邊欄折疊框

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

按鈕狀態(tài)

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

添加或復(fù)制布局

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

刪除布局

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

布局控件

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

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

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

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

原文來自：優(yōu)設(shè)

原文地址：medium

優(yōu)設(shè)譯者：@陳子木