看完這篇文章之后，你也許會(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)就是盡量讓界面元素以用戶(hù)在現(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)告訴我，各類(lèi)界面中的動(dòng)效大體可以分為兩類(lèi)：

• 潛移默化的動(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í)是挺明顯的交互，意圖就是在用戶(hù)瀏覽內(nèi)容時(shí)提供更多的可視空間?？瓷先ズ芎?jiǎn)單的事情，但妙就妙在用戶(hù)也許根本不會(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í)，你不希望用戶(hù)注意到某些東西，而有些時(shí)候正相反。這也引出了我們要討論的第二類(lèi)動(dòng)效：

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

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

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

上圖演示的是Jink應(yīng)用的介紹界面。你的目光注意到哪里了？自然是動(dòng)效。人們通常不會(huì)留意新應(yīng)用的介紹界面，但我在Jink當(dāng)中真的留意了。很多應(yīng)用都試著讓用戶(hù)在這些界面里讀一些簡(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ì)天然的歸類(lèi)到“引人注目的動(dòng)效”行列當(dāng)中，這就意味著它們很容易將用戶(hù)的注意力從那些真正重要的元素讓移開(kāi)。如果你不能確定某個(gè)動(dòng)效是真正必要的，還是去掉吧。

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

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)用能告訴你哪些東西可以為用戶(hù)帶來(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ì)只能分為兩類(lèi)？我同意，這些動(dòng)效每一個(gè)都可以單獨(dú)拎出來(lái)探討探討，但我同樣相信，從大體上講，動(dòng)效主要就是用來(lái)做兩件事的：

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

• 吸引用戶(hù)的注意力。

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

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