編者按：早追溯到唐朝，杜甫就曾說過，優(yōu)秀的動效設(shè)計要隨風(fēng)潛入夜，潤物細(xì)無聲。千年后作詞人黃偉文表示不服，似木頭似石頭的話能得到注意嗎？動效自己要搞出意外，突然地高歌才能引人注目。今天我們請來兩位大人物，來一場現(xiàn)代與古代的交鋒，孰勝孰敗，看標(biāo)題 ← 再戳進(jìn)來。

看完這篇文章之后，你也許會意識到，你在各種應(yīng)用里看到的所有動效，其中有80%可能是不恰當(dāng)?shù)模蚴歉緵]必要存在的。

關(guān)于該不該做動效設(shè)計，這篇文章總結(jié)了幾個要點(diǎn)：《DO OR DO NOT？如何從3個方面判斷是否做交互動畫》

本質(zhì)上講，應(yīng)用界面是在顯示屏的2D框架當(dāng)中為我們呈現(xiàn)更廣闊的2D甚至是3D世界的。在現(xiàn)實(shí)生活中，如果你把錘子放在抽屜里，那么它就在那里，你知道拉開抽屜就能看到。而在手機(jī)里，如果一個元素移出屏幕，它就不再“存在”了。所以，要把應(yīng)用設(shè)計的更加“符合直覺”，很重要的一點(diǎn)就是盡量讓界面元素以用戶在現(xiàn)實(shí)生活中熟悉的方式進(jìn)行運(yùn)動。

一直以來，我設(shè)計應(yīng)用，苦心研究各種應(yīng)用，讀書，在網(wǎng)上消費(fèi)內(nèi)容...經(jīng)驗告訴我，各類界面中的動效大體可以分為兩類：

• 潛移默化的動效
• 引人注目的動效

潛移默化的動效

你用Facebook嗎？當(dāng)然。先不要打開Facebook的應(yīng)用，告訴我：當(dāng)你在feed界面里上下滾屏?xí)r，除了內(nèi)容以外，還有什么元素在移動嗎？仔細(xì)想想...

答案就是：當(dāng)然有了唄。

這么一說，也許有的人才意識到，內(nèi)容滾動時，頂部的搜索欄會自動收起；其實(shí)是挺明顯的交互，意圖就是在用戶瀏覽內(nèi)容時提供更多的可視空間。看上去很簡單的事情，但妙就妙在用戶也許根本不會注意到這一點(diǎn)。

這就是“潛移默化的動效”的經(jīng)典范例：對于我的操作行為，界面元素能夠以非常符合直覺的、甚至是不會讓我注意到的方式進(jìn)行響應(yīng)。

Facebook 這個細(xì)節(jié)太贊了，不過你肯定沒想到，它還有這么多！《最近這個超火！23個FACEBOOK PAPER中的設(shè)計細(xì)節(jié)》

前方高能！！！

Achvr應(yīng)用則是一個反例。在Facebook中，當(dāng)我的手指上移5像素時，頂部搜索欄也會上移5像素，這種對應(yīng)關(guān)系讓我感覺正是自己的動作使搜索欄逐漸隱藏起來。而在Achvr當(dāng)中，一個很小的滾屏操作就會導(dǎo)致內(nèi)容產(chǎn)生大幅度的移動，交互體驗非常不符合預(yù)期。在Facebook中，我們幾乎不會留意到界面本身的變化，而在Achvr里，我的注意力則被迫集中到了界面交互上。

要知道，在上面兩張圖片當(dāng)中，我的手指移動距離是相同的。

這是什么情況？

Apollo Robbins在TED（https://www.youtube.com，自備梯子）上為我們演示了扒手行竊的過程，并討論了為什么我們的大腦每次只能聚焦在很少的事物上，例如演講臺上的聚光燈。

我們來做個小實(shí)驗：看看你的iPhone主界面左下角是哪個應(yīng)用？現(xiàn)在就試試，看看是否和你記憶中的一致。

然后把手機(jī)放起來，同時也不要看任何其他設(shè)備，告訴我，現(xiàn)在幾點(diǎn)？

實(shí)際上在前面看手機(jī)的過程里你至少能看到兩次時間，但你很可能完全沒有注意到。

簡單的、符合直覺的日常事物通常會被大腦所忽略，因為它很難在其中發(fā)現(xiàn)什么有意思的或是值得驚訝的東西。

另一方面，你現(xiàn)在的注意力仍然會被上面那張圖左下角閃爍的小方塊所吸引，對吧？因為它所處的情境并不符合我們的直覺，你不理解這個東西為什么會一直在那閃爍，因此你的大腦會將注意力放在上面。

所以，當(dāng)我們在Facebook中滾屏?xí)r，由于搜索欄隱藏的過程完全符合我們在移動手指時的操作直覺，我們通常難以注意到這一點(diǎn)；而Achvr的內(nèi)容在移動時大大超出了我們在潛意識中對操作結(jié)果的預(yù)期，所以感覺很突兀。

想要獲得自然的動態(tài)效果，最好的方法是跟大自然學(xué)習(xí)，比如這篇好文歸納的這些：《內(nèi)外兼修！打造酷炫實(shí)用APP動效的兩個關(guān)鍵》

有時，你不希望用戶注意到某些東西，而有些時候正相反。這也引出了我們要討論的第二類動效：

引人注目的動效

也許你已經(jīng)猜到了，這類動效的主旨就是引導(dǎo)用戶將注意力集中到某個地方，譬如一些你希望用戶注意到的新功能。

上面的動畫圖片演示的是Animoto Video Maker應(yīng)用，我最喜歡用它來演示這類用以聚焦注意力的動效。為了避免使用新手教程一類累贅的東西，Animoto力圖打造極其簡單移動的界面，并通過動效來吸引用戶的注意力，詮釋操作方法。當(dāng)用戶進(jìn)入上圖演示的界面，突然看到面板在彈跳，便很難不去試著點(diǎn)開它看個究竟。

上圖演示的是Jink應(yīng)用的介紹界面。你的目光注意到哪里了？自然是動效。人們通常不會留意新應(yīng)用的介紹界面，但我在Jink當(dāng)中真的留意了。很多應(yīng)用都試著讓用戶在這些界面里讀一些簡介文字，但Jink只是把文字作為詮釋動畫演示的輔助信息。

結(jié)論

“天啊，看看我實(shí)現(xiàn)了怎樣的效果！”幾乎每個新開發(fā)者都會這樣講。這種感覺確實(shí)不壞，但也是很危險的。一開始你還不知道怎樣呈現(xiàn)一個UI元素，突然間你可以讓所有的東西都很炫酷的移來移去了。很久以前我也是這樣的，而且如今也時常會陷入這種欲望當(dāng)中。但是，我們必須時刻記得，你剛剛實(shí)現(xiàn)的漂亮動效，未必是真正必要的。記得考慮以下幾點(diǎn)：

1. 你有能力讓UI元素動起來，不代表你應(yīng)該這樣做。
2. 多數(shù)動效會天然的歸類到“引人注目的動效”行列當(dāng)中，這就意味著它們很容易將用戶的注意力從那些真正重要的元素讓移開。如果你不能確定某個動效是真正必要的，還是去掉吧。
3. 如果有些東西必須動起來，問問你自己，這里的內(nèi)容或功能是需要潛移默化的發(fā)生變化，還是需要用戶立刻注意到？
4. 找一個資深開發(fā)人員，問問他們的看法。你的朋友們?nèi)绻肋@東西是你做的，通常會傾向于告訴你它真的很不錯；但開發(fā)人員知道這些動效是怎樣實(shí)現(xiàn)出來的，他們不會被表面的炫酷或創(chuàng)新所影響。
5. 試著觀察產(chǎn)品在實(shí)際情境中的表現(xiàn)。我強(qiáng)烈建議，不要只觀察那些優(yōu)秀的應(yīng)用，糟糕的產(chǎn)品同樣值得解讀。好的應(yīng)用能告訴你哪些東西可以為用戶帶來價值，差勁的應(yīng)用可以讓你知道哪些方式是根本行不通的。
6. “潛移默化的動效”比“引人注目的動效”要難設(shè)計的多，記得多花些心思去鉆研分析。

等下，關(guān)于...

你也許會說，那些傳統(tǒng)的動效，例如界面的層級遞進(jìn)、變色、彈出、放大縮小等等，都是不同風(fēng)格的動效呢，怎么會只能分為兩類？我同意，這些動效每一個都可以單獨(dú)拎出來探討探討，但我同樣相信，從大體上講，動效主要就是用來做兩件事的：

• 以符合直覺的方式對用戶的行為進(jìn)行反饋響應(yīng)。
• 吸引用戶的注意力。

所以，以后我們都可以試著從這兩個方向出發(fā)，來觀察觀察我們平時見到的各種應(yīng)用產(chǎn)品是怎樣打造動效的；針對這兩方面的目標(biāo)，其設(shè)計方案是否合理并值得學(xué)習(xí)。

對戰(zhàn)結(jié)束后，兩人握手言和，紛紛表示，下一次對戰(zhàn)內(nèi)容是：《交互設(shè)計實(shí)戰(zhàn)！Tab導(dǎo)航與側(cè)邊抽屜導(dǎo)航的巔峰對決》

動效設(shè)計教程及好文合集！

PS教程！手把手教你設(shè)計動態(tài)界面！
《PS高手教程！教你打造流暢酷炫的動態(tài)演示》

想要自然而流暢的效果？來這里學(xué)習(xí)！
《自然而流暢！聊聊常見的界面切換動畫》

直接借鑒高手總結(jié)的動態(tài)設(shè)計規(guī)則！
《漲姿勢！你應(yīng)該知道的UI動態(tài)設(shè)計規(guī)則》

原文地址：medium
譯文地址：beforweb

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

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