起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識我們不需要怎樣的動效設計
時常在思考我們在追求漂亮的動效，追求真實的彈性和運動狀態(tài)時，我們不需要怎樣的動效設計。從對現(xiàn)實世界材質(zhì)的模仿（擬物化）到對現(xiàn)實世界規(guī)則的模仿（如Material Design，以下稱MD）我們究竟是否有很大程度的進步，在MD剛剛發(fā)布的時候作為設計師的我們十分激動，直到現(xiàn)在都還有很多設計師十分推崇MD一套的設計規(guī)范，這樣的做法在帶來便利的同時可能會讓我們忽略設計的初衷，還有作為一個設計師對產(chǎn)品的理解，最終可能給用戶帶來一個中庸的體驗。
從動效設計上看：
設計所包含的方方面面在 MengTo 的《Design + Code》上有很好的歸納，我時常發(fā)現(xiàn)，經(jīng)過一段時間的設計之后很容易在設計的過程中有所迷失，原因在于我們很容易專注于細節(jié)，保持閱讀的習慣并試圖用相對宏觀的視角去看設計是不錯的做法。動效設計讓頁面元素能夠很自如的被操控而不僅僅是靜態(tài)呈現(xiàn)時，我們會直覺的想到讓其去模擬現(xiàn)實世界的規(guī)則，現(xiàn)實世界的運動規(guī)則因其載體不同其實有很多選擇，在設計和模仿的同時還應該考慮更多。
IBM在前不久發(fā)布了 IBM Design: Machine in animation, 試圖將機械運動的風格賦予給動效設計。
IBM因為其在100年以來就生產(chǎn)著專業(yè)的打字機，打字機可以作為一種符號來代表IBM，它的視覺呈現(xiàn)和運動軌跡都可以代表打字機的可靠和高效。運用在IBM自家的應用上時，真正的高級用戶可能會真實的感覺其與IBM企業(yè)所想要傳達符合的某種信號。機械運動相對于我們在動效設計中所常用的彈性動畫有其獨特的特點，頁面元素堅硬有序而活動自如這一感覺通過設計師所定制的曲線而呈現(xiàn)。
回想90年代時網(wǎng)頁設計的過度設計風格，大量的陰影、斜角、高光、不考慮留白的使用，這是一個設計師在面對新媒介和慶祝掌控像素后的失控，而這也是自然能夠理解的結(jié)果。Stop Gratuitous UI Animation,現(xiàn)在的動效設計也是如此，它受新技術如CSS、JS的進步和硬件的更新?lián)Q代影響。不必要的動效設計可能有以下幾個特點：
過多的對現(xiàn)實世界的模擬
這樣的模擬很可能不會讓你的應用塑造出類IBM的視覺語言，而只會帶來不必要的認知負擔。另一方面，像素世界有許多與物理世界不一樣的地方，如Loading，這樣的處理才是更應該關注的。
這個例子的列表就是對現(xiàn)實世界中某種機械裝置的模擬，無論是運動曲線還是緊度都調(diào)的不錯，可是它依舊是一個不好的例子。仔細來看，正因為它的列表在模擬機械裝置所以每個卡片在拖動時必須固定像素定位，用戶無法做出按住-上下滑動預覽；滑動停止在任意位置瀏覽的手勢。
在大的頁面切換做過多動效
越是用戶經(jīng)常操作、變化越大的頁面越不應做過多的動效處理，動效設計不應該只是對一個動效時間上的操縱。如不應該大于1s或者不應該大于0.5s，這和7±2原則一樣十分具有玄學意味，這和網(wǎng)頁設計早期發(fā)展時Loading時間一樣：人心理的焦躁程度也會改變，談論一個動效的具體時間沒有太大意義，而更應該關注它在什么地方做了一件什么事。
如果是Tab切換，筆者的意見是動效設計要盡量克制，一方面用戶的操作頻率十分高，如果要考慮到頁面元素級的切換，程序無法對用戶正在看當前Tab上下滾動的位置做出相應的動效定制化處理，這也涉及到另一個Tab的頁面元素進場。另一方面過多的操作與動效時間相乘，將是一個很大的負擔。
手勢操作與系統(tǒng)全局操作沖突
因為手勢可以更方便的被運用，最近更新的許多應用普遍采用手勢操作，而不幸的是這樣的方便帶來了更大程度的誤觸，這也是動效設計和交互設計分割的后果。一般來說，從手機邊緣的上滑和下滑都已經(jīng)被系統(tǒng)手勢占用，不能讓原本應該帶來便捷的手勢給用戶帶來更多麻煩。下圖就是一個和iOS喚出控制中心手勢沖突的例子。
從版式設計上看：
每個設計師特別是交互動效設計師在剛剛接觸動效的時候都很想創(chuàng)造一套動效的交互規(guī)則，能夠掌握到每個運動的先后次序和精確到毫秒級的設計，會讓設計師很有快感。動效設計是基于頁面層級和頁面元素，在交互與視覺設計上的改進，是當交互和視覺在解決問題不夠高效時做的補充。MD和IBM的設計都很優(yōu)秀，但當由動效或形式掌控過多的時候，可能會造成難以預料的低效率，這也不難理解為什么有人會說：the Floating Action Button （FAB）is bad UX design.
遵循平臺規(guī)則會給應用加分這沒錯，這在iOS7發(fā)布的時候尤為適用，但當平臺規(guī)范想要掌控你太多時就要多考慮一下了。單就FAB來說，從版式上來講，上文作者就總結(jié)出這些問題：
它打破了沉浸式體驗
試想我在一個圖片瀏覽類應用中FAB充當?shù)慕巧侵匾摹八阉鳌保@樣的使用自然沒錯，但它因為其浮起的樣式不可避免的將用戶拉出沉浸式體驗。
它擋住了真正的內(nèi)容
早年Scott Hurff已經(jīng)提出過我們的可及區(qū)域與視覺遮擋，F(xiàn)AB的出現(xiàn)更是讓原本應該顯示內(nèi)容的區(qū)域更大程度的犧牲。
它重要可能但它并不常用
由我們熟知的2/8原則，用戶在20%的動作上花去80%的時間，作者以Google 郵件為例，F(xiàn)AB在這里充當?shù)慕巧亲珜戉]件這一動作，從直覺上來說它十分重要，而用戶實則在手機上大部分時間是閱讀郵件，F(xiàn)AB使用的頻率并不那么高，相反它犧牲了更多的內(nèi)容顯示空間。在大屏幕內(nèi)的使用時，因為FAB是相對精確的點擊操作，它也會給用戶帶來更多的操作成本。
反觀最基礎的動效設計和它的原則方法。它應該可以
- 強化頁面呈現(xiàn)的引導。通過動效可以更有加有次序規(guī)律的呈現(xiàn)頁面層級，
- 解釋交互動作的變化。通過動效來有效反饋用戶操作，聲明狀態(tài)變化和暗示
- 并通過良好的設計來取悅用戶。
互聯(lián)網(wǎng)產(chǎn)品的功能性設計可能會在未來越來越弱，就像有很多論調(diào)說the Web is dead一樣，不僅僅是占有率上的，更多人為其創(chuàng)造版式化規(guī)則和工具，同樣造成了功能性可以被多驗過的滿足。而取悅用戶的設計如文化產(chǎn)品一樣具備更長久的生命力。
原則上，動效設計做小不做大，即盡量做小的交互動態(tài)而不做大得頁面切換動效，經(jīng)常操作的頁面切換動效會讓人覺得設計太過，Ben Johnson認為一個App動效應該由三部分組成，即1個單元的歡迎動畫，6個單元的告知性動畫，1-2個令人愉悅的小細節(jié)。太過花哨的動效很可能會讓它像FAB一樣受人詬病，反饋符合用戶的心理預期，而不單純的追求每個動效時間上的控制，同樣是動效設計師所應該注意的。
我們需要怎樣的動效設計
現(xiàn)在看來，我們不需要怎樣的動效設計？
它應該是以特定的應用需求為導向的，它不需要模擬紙張也不需要模擬墨水，模擬機械或者其他什么東西。在動效設計上我們希望有一個解決問題的態(tài)度，亦或是如IBM一樣傳遞自己的品牌文化，就如FAB一樣，很多時候我們不需要它出現(xiàn)來阻礙我們?yōu)g覽內(nèi)容。?同時，產(chǎn)品、交互設計、視覺設計、動效設計的過分區(qū)分會讓動效設計變得缺乏創(chuàng)意，相信交互設計師在接到需求之后，腦子中不可能不出現(xiàn)帶有視覺風格的產(chǎn)品愿景，而現(xiàn)在的職位分割讓設計師變得十分危險。
我們不需要規(guī)定過多的動效設計，也不需要為一個既定界面設計動效，這種內(nèi)在能力應該如用戶研究能力一樣深化在每一個關心用戶和體驗的從業(yè)者中，從源頭上思考動效，必要的時候做出相應交互與視覺上的調(diào)整，不沉迷于軟件，將一個應用當成電影或者游戲整體來做，這其中的動效設計可能才是我們想要的。
它無關乎是用形變還是彈性動畫，這種技法很難在沒有上下文和語境的情況下來確定，就像3D電影的攝影師只能在CG未完成時，讓演員在綠布上表演，這讓攝影師的拍攝困難重重。只有從源頭上重塑信息結(jié)構，用某種 “motion UI thinking” 的思考方法，或許才是提升一個應用品質(zhì)的好的辦法。
最后，交互動效設計師應該多看看游戲，他們已經(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)理專欄作家，相信多學科整合的力量能讓設計產(chǎn)生乘數(shù)效應，在交互設計、用戶研究、動效設計方面持續(xù)學習。
本文系作者授權發(fā)布，未經(jīng)許可，不得轉(zhuǎn)載。
- 目前還沒評論，等你發(fā)揮！
