看完這篇文章之后，你也許會(huì)意識(shí)到，你在各種應(yīng)用里看到的所有動(dòng)效，其中有80%可能是不恰當(dāng)?shù)?，或是根本沒(méi)必要存在的。

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

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

• 潛移默化的動(dòng)效

• 引人注目的動(dòng)效

潛移默化的動(dòng)效

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

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

這么一說(shuō)，也許有的人才意識(shí)到，內(nèi)容滾動(dòng)時(shí)，頂部的搜索欄會(huì)自動(dòng)收起；其實(shí)是挺明顯的交互，意圖就是在用戶瀏覽內(nèi)容時(shí)提供更多的可視空間?？瓷先ズ芎?jiǎn)單的事情，但妙就妙在用戶也許根本不會(huì)注意到這一點(diǎn)。

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

(前方高能)

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

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

這是什么情況？

Apollo Robbins在TED上為我們演示了扒手行竊的過(guò)程，并討論了為什么我們的大腦每次只能聚焦在很少的事物上，例如演講臺(tái)上的聚光燈。

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

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

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

簡(jiǎn)單的、符合直覺(jué)的日常事物通常會(huì)被大腦所忽略，因?yàn)樗茈y在其中發(fā)現(xiàn)什么有意思的或是值得驚訝的東西。另一方面，你現(xiàn)在的注意力仍然會(huì)被上面那張圖左下角閃爍的小方塊所吸引，對(duì)吧？因?yàn)樗幍那榫巢⒉环衔覀兊闹庇X(jué)，你不理解這個(gè)東西為什么會(huì)一直在那閃爍，因此你的大腦會(huì)將注意力放在上面。

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

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

引人注目的動(dòng)效

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

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

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

結(jié)論

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

1. 你又能力讓UI元素動(dòng)起來(lái)，不代表你應(yīng)該這樣做。

2. 多數(shù)動(dòng)效會(huì)天然的歸類到“引人注目的動(dòng)效”行列當(dāng)中，這就意味著它們很容易將用戶的注意力從那些真正重要的元素讓移開(kāi)。如果你不能確定某個(gè)動(dòng)效是真正必要的，還是去掉吧。

3. 如果有些東西必須動(dòng)起來(lái)，問(wèn)問(wèn)你自己，這里的內(nèi)容或功能是需要潛移默化的發(fā)生變化，還是需要用戶立刻注意到？

4. 找一個(gè)資深開(kāi)發(fā)人員，問(wèn)問(wèn)他們的看法。你的朋友們?nèi)绻肋@東西是你做的，通常會(huì)傾向于告訴你它真的很不錯(cuò)；但開(kāi)發(fā)人員知道這些動(dòng)效是怎樣實(shí)現(xiàn)出來(lái)的，他們不會(huì)被表面的炫酷或創(chuàng)新所影響。

5. 試著觀察產(chǎn)品在實(shí)際情境中的表現(xiàn)。我強(qiáng)烈建議，不要只觀察那些優(yōu)秀的應(yīng)用，糟糕的產(chǎn)品同樣值得解讀。好的應(yīng)用能告訴你哪些東西可以為用戶帶來(lái)價(jià)值，差勁的應(yīng)用可以讓你知道哪些方式是根本行不通的。

6. “潛移默化的動(dòng)效”比“引人注目的動(dòng)效”要難設(shè)計(jì)的多，記得多花些心思去鉆研分析。

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

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

• 以符合直覺(jué)的方式對(duì)用戶的行為進(jìn)行反饋?lái)憫?yīng)。

• 吸引用戶的注意力。

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

創(chuàng)意 · 設(shè)計(jì) · 靈感 · 資訊