公主的腿间舌奴们np肉_国产在热线精品视频99公交_公主车上荫蒂添的好舒服_公侵犯人妻中文字慕一区二区_公么大龟弄得我好舒服秀_公交车+多人+高cH文章推荐_日本熟妇另类视频在线播放

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

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

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

• 潛移默化的動效

• 引人注目的動效

潛移默化的動效

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

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

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

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

(前方高能)

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

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

這是什么情況？

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

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

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

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

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

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

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

引人注目的動效

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

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

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

結(jié)論

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

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

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

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

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

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

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

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

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

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

• 吸引用戶的注意力。

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

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