時(shí)常在思考我們在追求漂亮的動效，追求真實(shí)的彈性和運(yùn)動狀態(tài)時(shí)，我們不需要怎樣的動效設(shè)計(jì)。從對現(xiàn)實(shí)世界材質(zhì)的模仿（擬物化）到對現(xiàn)實(shí)世界規(guī)則的模仿（如Material Design，以下稱MD）我們究竟是否有很大程度的進(jìn)步，在MD剛剛發(fā)布的時(shí)候作為設(shè)計(jì)師的我們十分激動，直到現(xiàn)在都還有很多設(shè)計(jì)師十分推崇MD一套的設(shè)計(jì)規(guī)范，這樣的做法在帶來便利的同時(shí)可能會讓我們忽略設(shè)計(jì)的初衷，還有作為一個設(shè)計(jì)師對產(chǎn)品的理解，最終可能給用戶帶來一個中庸的體驗(yàn)。

從動效設(shè)計(jì)上看：

設(shè)計(jì)所包含的方方面面在 MengTo 的《Design + Code》上有很好的歸納，我時(shí)常發(fā)現(xiàn)，經(jīng)過一段時(shí)間的設(shè)計(jì)之后很容易在設(shè)計(jì)的過程中有所迷失，原因在于我們很容易專注于細(xì)節(jié)，保持閱讀的習(xí)慣并試圖用相對宏觀的視角去看設(shè)計(jì)是不錯的做法。動效設(shè)計(jì)讓頁面元素能夠很自如的被操控而不僅僅是靜態(tài)呈現(xiàn)時(shí)，我們會直覺的想到讓其去模擬現(xiàn)實(shí)世界的規(guī)則，現(xiàn)實(shí)世界的運(yùn)動規(guī)則因其載體不同其實(shí)有很多選擇，在設(shè)計(jì)和模仿的同時(shí)還應(yīng)該考慮更多。

IBM在前不久發(fā)布了 IBM Design: Machine in animation, 試圖將機(jī)械運(yùn)動的風(fēng)格賦予給動效設(shè)計(jì)。

IBM因?yàn)槠湓?00年以來就生產(chǎn)著專業(yè)的打字機(jī)，打字機(jī)可以作為一種符號來代表IBM，它的視覺呈現(xiàn)和運(yùn)動軌跡都可以代表打字機(jī)的可靠和高效。運(yùn)用在IBM自家的應(yīng)用上時(shí)，真正的高級用戶可能會真實(shí)的感覺其與IBM企業(yè)所想要傳達(dá)符合的某種信號。機(jī)械運(yùn)動相對于我們在動效設(shè)計(jì)中所常用的彈性動畫有其獨(dú)特的特點(diǎn)，頁面元素堅(jiān)硬有序而活動自如這一感覺通過設(shè)計(jì)師所定制的曲線而呈現(xiàn)。

回想90年代時(shí)網(wǎng)頁設(shè)計(jì)的過度設(shè)計(jì)風(fēng)格，大量的陰影、斜角、高光、不考慮留白的使用，這是一個設(shè)計(jì)師在面對新媒介和慶祝掌控像素后的失控，而這也是自然能夠理解的結(jié)果。Stop Gratuitous UI Animation,現(xiàn)在的動效設(shè)計(jì)也是如此，它受新技術(shù)如CSS、JS的進(jìn)步和硬件的更新?lián)Q代影響。不必要的動效設(shè)計(jì)可能有以下幾個特點(diǎn)：

過多的對現(xiàn)實(shí)世界的模擬

這樣的模擬很可能不會讓你的應(yīng)用塑造出類IBM的視覺語言，而只會帶來不必要的認(rèn)知負(fù)擔(dān)。另一方面，像素世界有許多與物理世界不一樣的地方，如Loading，這樣的處理才是更應(yīng)該關(guān)注的。

這個例子的列表就是對現(xiàn)實(shí)世界中某種機(jī)械裝置的模擬，無論是運(yùn)動曲線還是緊度都調(diào)的不錯，可是它依舊是一個不好的例子。仔細(xì)來看，正因?yàn)樗牧斜碓谀M機(jī)械裝置所以每個卡片在拖動時(shí)必須固定像素定位，用戶無法做出按住-上下滑動預(yù)覽；滑動停止在任意位置瀏覽的手勢。

在大的頁面切換做過多動效

越是用戶經(jīng)常操作、變化越大的頁面越不應(yīng)做過多的動效處理，動效設(shè)計(jì)不應(yīng)該只是對一個動效時(shí)間上的操縱。如不應(yīng)該大于1s或者不應(yīng)該大于0.5s，這和7±2原則一樣十分具有玄學(xué)意味，這和網(wǎng)頁設(shè)計(jì)早期發(fā)展時(shí)Loading時(shí)間一樣：人心理的焦躁程度也會改變，談?wù)撘粋€動效的具體時(shí)間沒有太大意義，而更應(yīng)該關(guān)注它在什么地方做了一件什么事。

如果是Tab切換，筆者的意見是動效設(shè)計(jì)要盡量克制，一方面用戶的操作頻率十分高，如果要考慮到頁面元素級的切換，程序無法對用戶正在看當(dāng)前Tab上下滾動的位置做出相應(yīng)的動效定制化處理，這也涉及到另一個Tab的頁面元素進(jìn)場。另一方面過多的操作與動效時(shí)間相乘，將是一個很大的負(fù)擔(dān)。

手勢操作與系統(tǒng)全局操作沖突

因?yàn)槭謩菘梢愿奖愕谋贿\(yùn)用，最近更新的許多應(yīng)用普遍采用手勢操作，而不幸的是這樣的方便帶來了更大程度的誤觸，這也是動效設(shè)計(jì)和交互設(shè)計(jì)分割的后果。一般來說，從手機(jī)邊緣的上滑和下滑都已經(jīng)被系統(tǒng)手勢占用，不能讓原本應(yīng)該帶來便捷的手勢給用戶帶來更多麻煩。下圖就是一個和iOS喚出控制中心手勢沖突的例子。

從版式設(shè)計(jì)上看：

每個設(shè)計(jì)師特別是交互動效設(shè)計(jì)師在剛剛接觸動效的時(shí)候都很想創(chuàng)造一套動效的交互規(guī)則，能夠掌握到每個運(yùn)動的先后次序和精確到毫秒級的設(shè)計(jì)，會讓設(shè)計(jì)師很有快感。動效設(shè)計(jì)是基于頁面層級和頁面元素，在交互與視覺設(shè)計(jì)上的改進(jìn)，是當(dāng)交互和視覺在解決問題不夠高效時(shí)做的補(bǔ)充。MD和IBM的設(shè)計(jì)都很優(yōu)秀，但當(dāng)由動效或形式掌控過多的時(shí)候，可能會造成難以預(yù)料的低效率，這也不難理解為什么有人會說：the Floating Action Button （FAB）is bad UX design.

遵循平臺規(guī)則會給應(yīng)用加分這沒錯，這在iOS7發(fā)布的時(shí)候尤為適用，但當(dāng)平臺規(guī)范想要掌控你太多時(shí)就要多考慮一下了。單就FAB來說，從版式上來講，上文作者就總結(jié)出這些問題：

它打破了沉浸式體驗(yàn)

試想我在一個圖片瀏覽類應(yīng)用中FAB充當(dāng)?shù)慕巧侵匾摹八阉鳌?，這樣的使用自然沒錯，但它因?yàn)槠涓∑鸬臉邮讲豢杀苊獾膶⒂脩衾龀两襟w驗(yàn)。

它擋住了真正的內(nèi)容

早年Scott Hurff已經(jīng)提出過我們的可及區(qū)域與視覺遮擋，F(xiàn)AB的出現(xiàn)更是讓原本應(yīng)該顯示內(nèi)容的區(qū)域更大程度的犧牲。

它重要可能但它并不常用

由我們熟知的2/8原則，用戶在20%的動作上花去80%的時(shí)間，作者以Google 郵件為例，F(xiàn)AB在這里充當(dāng)?shù)慕巧亲珜戉]件這一動作，從直覺上來說它十分重要，而用戶實(shí)則在手機(jī)上大部分時(shí)間是閱讀郵件，F(xiàn)AB使用的頻率并不那么高，相反它犧牲了更多的內(nèi)容顯示空間。在大屏幕內(nèi)的使用時(shí)，因?yàn)镕AB是相對精確的點(diǎn)擊操作，它也會給用戶帶來更多的操作成本。

反觀最基礎(chǔ)的動效設(shè)計(jì)和它的原則方法。它應(yīng)該可以

1. 強(qiáng)化頁面呈現(xiàn)的引導(dǎo)。通過動效可以更有加有次序規(guī)律的呈現(xiàn)頁面層級，
2. 解釋交互動作的變化。通過動效來有效反饋用戶操作，聲明狀態(tài)變化和暗示
3. 并通過良好的設(shè)計(jì)來取悅用戶。

互聯(lián)網(wǎng)產(chǎn)品的功能性設(shè)計(jì)可能會在未來越來越弱，就像有很多論調(diào)說the Web is dead一樣，不僅僅是占有率上的，更多人為其創(chuàng)造版式化規(guī)則和工具，同樣造成了功能性可以被多驗(yàn)過的滿足。而取悅用戶的設(shè)計(jì)如文化產(chǎn)品一樣具備更長久的生命力。

原則上，動效設(shè)計(jì)做小不做大，即盡量做小的交互動態(tài)而不做大得頁面切換動效，經(jīng)常操作的頁面切換動效會讓人覺得設(shè)計(jì)太過，Ben Johnson認(rèn)為一個App動效應(yīng)該由三部分組成，即1個單元的歡迎動畫，6個單元的告知性動畫，1-2個令人愉悅的小細(xì)節(jié)。太過花哨的動效很可能會讓它像FAB一樣受人詬病，反饋符合用戶的心理預(yù)期，而不單純的追求每個動效時(shí)間上的控制，同樣是動效設(shè)計(jì)師所應(yīng)該注意的。

我們需要怎樣的動效設(shè)計(jì)

現(xiàn)在看來，我們不需要怎樣的動效設(shè)計(jì)？

它應(yīng)該是以特定的應(yīng)用需求為導(dǎo)向的，它不需要模擬紙張也不需要模擬墨水，模擬機(jī)械或者其他什么東西。在動效設(shè)計(jì)上我們希望有一個解決問題的態(tài)度，亦或是如IBM一樣傳遞自己的品牌文化，就如FAB一樣，很多時(shí)候我們不需要它出現(xiàn)來阻礙我們?yōu)g覽內(nèi)容。?同時(shí)，產(chǎn)品、交互設(shè)計(jì)、視覺設(shè)計(jì)、動效設(shè)計(jì)的過分區(qū)分會讓動效設(shè)計(jì)變得缺乏創(chuàng)意，相信交互設(shè)計(jì)師在接到需求之后，腦子中不可能不出現(xiàn)帶有視覺風(fēng)格的產(chǎn)品愿景，而現(xiàn)在的職位分割讓設(shè)計(jì)師變得十分危險(xiǎn)。

我們不需要規(guī)定過多的動效設(shè)計(jì)，也不需要為一個既定界面設(shè)計(jì)動效，這種內(nèi)在能力應(yīng)該如用戶研究能力一樣深化在每一個關(guān)心用戶和體驗(yàn)的從業(yè)者中，從源頭上思考動效，必要的時(shí)候做出相應(yīng)交互與視覺上的調(diào)整，不沉迷于軟件，將一個應(yīng)用當(dāng)成電影或者游戲整體來做，這其中的動效設(shè)計(jì)可能才是我們想要的。

它無關(guān)乎是用形變還是彈性動畫，這種技法很難在沒有上下文和語境的情況下來確定，就像3D電影的攝影師只能在CG未完成時(shí)，讓演員在綠布上表演，這讓攝影師的拍攝困難重重。只有從源頭上重塑信息結(jié)構(gòu)，用某種 “motion UI thinking” 的思考方法，或許才是提升一個應(yīng)用品質(zhì)的好的辦法。

最后，交互動效設(shè)計(jì)師應(yīng)該多看看游戲，他們已經(jīng)走得很靠前，而且默默無聞。

參考：

IBM design: Machine in animation：

Material Design: Why the Floating Action Button is bad UX design

Make the right FAB

“1+6+2”公式：App動畫及動態(tài)效果之基本原則

#專欄作家#

亭決，人人都是產(chǎn)品經(jīng)理專欄作家，相信多學(xué)科整合的力量能讓設(shè)計(jì)產(chǎn)生乘數(shù)效應(yīng)，在交互設(shè)計(jì)、用戶研究、動效設(shè)計(jì)方面持續(xù)學(xué)習(xí)。

本文系作者授權(quán)發(fā)布，未經(jīng)許可，不得轉(zhuǎn)載。