動效非佐料
"有時候現代科技產物使用起來非常複雜，但是其實‘複雜’本身沒有好壞之分：不好是因為沒有處理好這個複雜所以產生了“混亂”，所以應該被批評的不是複雜而是因複雜所產生的混亂。" - 唐納德·諾曼
上：大眾點評； 馬蜂窩 下： IFTTT(個人助手型別應用）；Airbnb(愛彼迎)
介面密度高就混亂麼？
現在我們都喜歡追求“極簡風格”， 啥裝置/應用看起來越‘乾淨’越好，但是是否‘乾淨’的產品就一定好用？真的未必，有時候反而更不知道該從何開始。盲目追從低密度介面，為了簡潔而簡潔也不是件好事。密集介面就是不好看並且難用麼？ 在紐約待了八年，一直在用“乾淨”的手機應用，我以為會非常不適應國內的APP。然而留在北京期間使用國內的應用不但沒有覺得不知道該怎麼用反而覺得咱APP的功能強大而且上手很快，介面絕對不比“乾淨”的介面差。
CJK（中國，韓國，日本）市場的UI介面密度相對於歐美UI介面密度會高很多，之前看過一個針對CJK使用者的調查，裡面有一條：“CJK使用者對密度較高的介面有非常高的忍耐度。” 之後跟一位中國使用者體驗研究員提過這個問題。“為什麼中國的普遍UI介面都如此的密集？” 答說：“其實這不僅僅只是一種設計風格/文化上面的不一樣，有非常多的情況都是要滿足商業方面的需要。在相比頁面”整潔“有設計感，把好一部分按鈕藏在“漢堡包標示”裡，能把更多的功能放在介面當中往往更為重要。 每一個按鈕的背後也都是一個團隊的努力，他們可不想因為介面的”整潔“而被放到漢堡包標示或是擠到螢幕下方需要使用者往上滑動才能看見。這往往是一種商業決定，並非設計決定。”
“Complexity can be tamed, but it requires considerable effort to do it well. ”
"複雜其實可以被駕馭的，但是駕馭複雜則需要使用者一定的努力。" - 唐納德·諾曼
我個人覺得介面密度跟‘對設計重視與否’並沒有那麼大的關係。當然絕對不排除CJK的使用者確實對於高密度的排版接受程度很高，但設計得要聽從商業要求這是合情合理的。 那我們作為介面/互動/動效設計師的職責則是去降低來自各種密度所產生的“混亂”，使得使用者能夠輕鬆駕馭介面。
前段時間我有幸能在站酷2018CUBE上面代表谷歌Material Design與大家分享 Material Design主題和動效定製 。(再次感謝站酷ZCOOL，CUBE視訊在這 https://cube.zcool.com.cn/) 但由於時間的關係只能大概講解動效定製。從就職谷歌開始素材製作，到真正參與撰寫動效原則，再到研究產品未來潛在的互動模式，今天我把自己學到的看到的進行整理，從整體角度來講講動效，還有我對動效設計師這個職位的看法和在工作方面一些該注意的。最後再給大家推薦幾本讀物，內容較多，同學們慢慢咀嚼。
鋪墊完成！
動效設計作為使用者體驗裡面一個極為重要但是時常又會被忽略的部分，有時候直到產品快要成型的時候才會被提起，加上動效之後很多互動的漏洞被展現了出來，但是又為時已晚。
"很多設計師把動效理解為一種更高層面的設計，即為一個介面內的實體在即時的和非即時的事件之間的一種暫時性的行為（其實就是過渡）"- Isara Willenskomer
早期蘋果Mac桌面資料夾的開啟與關閉，注意在開啟和關閉的過程中使用者可以清晰的分辨出視窗從螢幕的那個位置來的。
動效其實對於使用者體驗這個大專業來講是一種新的學科，隨著我們的裝置的硬體條件越來越好，動效才能被支援。動效裡有一部分可以歸為傳統動畫，比如說標示/插畫/載入動畫。 這些可以借鑑迪士尼的 ofollow,noindex"> 十二大動畫原則 。 但是另外一部分則是紮根於“互動”。Issara Willenskomer用他在使用者體驗領域15年的經驗總結出了屬於 UX動效的12大原理 ，PeterZ在UX/Motion Design | 知乎專欄 DesignCoder上總結加翻譯，感興趣的同學可以去讀讀(連結在文末)。
動效通過四大塊增強可用性
減少預判誤差：
使用者在介面中看到一個元件的時候，他們會產生對這個物體是什麼還有它的運動方式的預判。設計師應該減少的是“預判”與“現實”的差距。
增加連貫性：
這個可以涉及到單個介面和多個連環介面。 比如在單個介面（在日曆裡面建立新的事件）內使用者是否可以毫不費力的導航以及多個連環介面（瀏覽商品 - 加入購物車 - 買單）的使用者體驗。
強調敘述：
在一個應用的導航過程中，經過一些列的操作，使用者會在腦海裡形成該應用的資訊結構框架，動效把這些環節緊緊相扣並幫助使用者加速學習該結構框架。
清晰關係：
這個關係可以指得是不同介面之間的以及一個介面內不同元件間的空間，主次關係。清晰的關係可以更有效率的引導使用者。
瞭解了以上四大塊兒後，下面讓我們來看一些例子。
幫助使用者導航，促生思維模式
最近我的同事Jonas Naimark在Medium上面發表了 《Motion Doesn’t Have to Be Hard》 - 動效不該難 中總結的特別好，這裡給大家總結兩點。我獲得他的允許把這個文章翻譯了，有興趣的同學可以戳標題檢視全文。
1.實實在在
大家注意到這兩邊前後大小變化沒有？ 他們是完全按照這個容器的大小而變的，這給予使用者一種“實實在在開啟一個介面”的感覺。 這種細節其實對於‘促生思維模式’是很有幫助的，因為它把一個容器(介面)裡的內容跟容器本身緊密的聯絡在了一起。再看下面的例子，這個例子又引出了下一話題。
2.介面去哪兒了？
介面的來去對使用者熟悉這個應用不同介面的空間關係非常重要，新的介面從哪兒來就該回哪兒去，介面的進入以及出去的方向也直接暗示了啟用該介面的按鈕的大概位置。設計這一塊兒的時候不一定要按照這個套路，可以研究屬於自己的運動模式，但是一定要注意運動模式的一致性。
《動效不該難》 文章後半部細節講了具體應用，歡迎同學們猛戳閱讀。想進一步瞭解Material Design動效設計規範可以看文末的連結，或去Material.io瞭解。
小結：如果你的動效連幫助使用者導航都沒到位，標示/過場動畫什麼的都得往後排！
在設計互動模式的時候
*下面的我們指代動效/互動/介面設計師*
“We must design for the way people behave, not for how we would wish them to behave.” 我們設計師不能只用我們自己的思維去給使用者設計互動模式，我們必須根據使用者們的行為去設計。 - 唐納德·諾曼
動效不只是過渡動畫，咱得多思考思考使用者的行為
我們在設計互動的時候往往都會以我們自己的思維出發，想著使用者們在執行完一個動作之後就會執行下一個動作，那麼在這個動作之後會出現這個過渡，下一個動作之後會出現下一個過渡，Boomchakalaka，完美！可是現實完全不是這樣，使用者們到底會不會按照我們設計的互動套路走除非你做使用者測試，否則根本沒法知道。Motiongraphics裡面的過渡跟動效過渡不一樣，我們動畫師畫什麼就是什麼。 但在設計一個互動動作的同時，設計師需要思考有沒有在動作開始與結束這兩點之間發生其他事件的可能，並且利用動效來教育使用者同一個過渡可以通過不同的動作來啟用。使用者手指的擺位,怎樣用起來更加方便，減少手指需要移動的距離等都應該被考慮到。 當然了，不是說每一個互動轉折點都得死磕，但是多思考思考使用者的行為絕對沒有壞處。
Safari關閉網頁的移動方向暗指使用者也可以通過向左滑動來關閉網頁
再想想，顏色，音效還有震動
動效不只是視覺上的，因為動效其實就是機器跟使用者的溝通方式。 另外一點就是‘小輸入，大輸出’ 想想在蘋果手機上瀏覽網頁，只要輕輕在網頁往上一劃，就會滑出很長一段距離。在設定日期，調整時間的時候，手機的震動以及音效使得互動變得更加真實。
IOS在設定日期時間的時候，來自手機的音效和震動效果增加了這個互動的真實感。
在谷歌Pixel上面，使用者可以通過擠手機來啟用谷歌只能助手，這不但使得互動變得方便，也一定程度上增加了互動的趣味，甚至讓機器“活”了起來。所以互動不是一定要都要在螢幕上發生。
暫停，變向，返回，取消
上面提到了在設計一個互動動作的同時，設計師可以思考有沒有在動作開始到結束這兩點之間發生其他事件的可能，互動動作能不能中途轉向？
這樣一個動作就可以解決很多問題，執行動作與決定下一步做什麼可以同時進行，大大增加了互動效率，反之如果機器不能做到允許使用者在執行當前動作的同時做下一步決定的話，那麼使用者在執行一個動作之前就要做出決定，因此降低了互動的效率。
裝置也應該時刻給使用者反應，接下來會發生什麼。
當往下拉動照片的同時，白色的背景漸漸變得透明暗示使用者照片如果這時候放手的話照片會被關閉。
符合現實的思維方式和運動方式
標示到全屏和開關動畫所需的時長肯定不一樣，螢幕的大小也需要被考慮到。
Material基線動效中，從一個從容器部件到全屏的動畫需要300毫秒的時長。
利用彈力友好的提示使用者已經到達了介面的末端
直接操作，指尖與觸碰內容同時移動。
小結：想著怎樣設計互動模式加上動效能使得裝置與使用者時刻溝通，再通過不同的感官增加輸出；達到人機合一的境界。
在製作Demo的時候
選擇用適當的引數
根據過渡的“大小”(動畫所佔螢幕的大小)和複雜程度選擇適當的速度和時長；
雖然都是標示動畫，但是左邊因為複雜程度較低所以動畫時長只有100毫秒而在右邊較為複雜的標示動畫時長則是500毫秒。還有文章上面提到的從容器部件到全屏的動效時長為300毫秒。
選擇正確的緩和效果。
緩和效果建議使用非對稱型緩和，比如Material基線緩和。
Demo最有效了，能互動的Demo更能說明問題
動效設計師可以實現來自互動設計師的設想，把靜態的介面變成動態Demo，互動流程一目瞭然。但是有時候互動設計師們會不自覺受到他們腦海裡已經形成的互動模式的影響，所以如果你覺得還有什麼要補充的話，應該主動提出。還可以結合不同的手勢，闡述過渡中所涉及到的所有可能的引數，位置，動量，按壓以及按壓面積等多做幾個互動流程方案然後跟團隊一塊兒討論，也可以先跟互動設計師私底下討論(根據你的工作氛圍)。
有條件可以使用Principle,Framer,Figma,Invision等設計工具直接製作可互動Demo，沒有什麼能比真正使用更有說服力。
在設計過渡當中注意尷尬幀的存在
“It’s not the frame rate, it is what in the frame!”
別隻怪幀頻，幀裡有啥才是最重要！- 《Design Fluid Interface》Apple WWDC 2018
更高的幀頻當然有幫助，但是當視覺變化太大的時候，人的眼睛一下子就能偵測到這種資訊的缺失。
大家可以看到在右邊原型運動過程中很明顯有一處“空缺的地方”
幀頻變成60幀之後確實有好轉，但是看起來還是有點不舒服，動效設計師應該注意的就是這個‘不舒服的瞬間’，這種情況下可以通過調整時長或者利用疊加漸進淡出等來改善過渡。
適當的時候可以直接把中間那個部分去掉。但是要確保這個部件前後的樣式保持一致，否則使用者容易混淆兩者是否是相同的部件。
新的內容會在過渡最快的時候進入介面。
小結：思考過渡模式的時候把腦子思維放開，思考各種使用者場景以及動效引數，製作給力Demo。注意過渡螢幕裡面的細節，記住不是幀頻的問題，是幀中內容的問題！
在與團隊合作的時候
說動效設計師是設計與實現的粘合劑一點也不為過，當我們在看一系列的靜態介面的時候，腦海裡浮現的是各種互動流程，我們得理性；看到一個標誌，一個人物的時候，得想如何把它們變活並且符合品牌風格，我們得感性； 當我們面對工程師們的時候,不但得有效的讓工程師明白一個過渡介面中發生了什麼，還得在技術允許的範圍能儘可能說服工程方滿足來自設計方的要求，我們的理性加感性。 動效設計師們，你知道你們有多重要麼！
時刻記住，你不是動畫師！用你製作出來的Demo來引發並參與互動設計師，介面設計師的討論。 平時也多跟工程師聊聊，瞭解當前技術上面的侷限。因為實現一個動效會受到來自程式碼框架的侷限，還有產品的本身的侷限。有一些過渡不能被實現是因為進入的新介面來自第三方產品，這樣第一方沒有辦法控制第三方頁面的結構，所以無法完美的把雙方的介面串聯起來，那這個時候設計只能先屈服現實。還有時候設計師跟工程師的思維的不同，會導致他們有時候會想不到其他的實現方式。 曾經跟一位工程師聊過，我問實現一個元件的程式碼的書寫方式只有一種麼？ 答說不是，有很多種，但是最有效率的書寫方式就那麼一種。但是思維方式不一樣不代表不好，而且‘沒有主意是壞主意’，有時候甚至會因為你的提議工程師們會想到新的實現方式。你製作的Demo如果工程師們達不到，並不代表以後達不到，這也成為他們之後的目標。
最後說一點：
動效設計先要解決的問題就是增加應用的可用性，幫助使用者輕鬆駕馭應用。確保可用性之後，在不影響使用者體驗的前提下，天花爛墜的加特效吧！
簡易的導航，有效的過渡以及酷炫的動效最終都是服務使用者。成功的互動能使得‘人機合一’，自然的互動往往成敗都在細節，那麼真正瞭解這些細節光參考網站上玲琅滿目的素材與案例和學習動畫製做是不夠的；閱讀關於使用者體驗書籍學習理論知識是一大方面；最重要的是瞭解人本身。所以廣泛閱讀！ 對比閱讀！使用者體驗知識完全不用從使用者體驗的書來。
你，是動效設計師！是一個產品的頂樑柱！一定要積極的參與到設計流程中，尤其是在設計產品初期，放開思維張開嘴。
希望以上的內容可以讓大家進一步的瞭解動效設計，給那些想學習動效設計但又摸不著頭腦的同學一點大方向，也給現在已經在崗位上的動效設計師們一些雞血。
P.S.
文中使用的動圖例子來自谷歌Material Design，Jonas Narimark, 瓜兄還有蘋果WWDC。Material Design設計系統，蘋果“設計流暢的介面”背後的Human Interface Guidelines，著重點不太一樣但是雙方設計理念和原則都十分完善。
推薦讀物以及本文參考資料：
文章/視訊
Motion Doesn’t have to be Hard - Jonas Naimark
Design fluid interface - Apple WWDC 2018
Creating Usability with Motion - Issara Willenskomer
書籍推薦：
《Living with complexity》 ，作者為使用者體驗始祖Don·Norman，裡面充滿了使用者體驗的基本知識，本書讓我從“為人民服務”的角度出發來看待動效設計，讓我更加明白了動效與互動的之間的關係。
《White》 （白）作者：Kenya Hara. 白色只是一種顏色麼？它是一種能量，一種潛在的可能，一個文化的精髓之一。這本書會讓你的腦子爆炸。
《Smarter Faster Better》 高效的祕密 作者：Charles Duhigg。 通過真實的事例，作者認為其實我們每天生活中做出的選擇，怎樣激勵自己，對待他人，設立實際目標讓你的生活，事業各種事倍功半。
《Made to Stick》 作者Heath兄弟。 怎樣以最有效的方式逼逼自己的想法，並且讓你的團隊聽的進去。來看看這對兒兄弟的獨特“SUCCES”公式你就知道了。
《史蒂夫·喬布斯傳》 作者沃爾特·艾薩克森。 個人傳記跟使用者體驗有什麼關係麼？ 當然有，書中提到我們現在用的MacIOS的發展過程，滿滿的UX知識啊。更重要的是，在讀的過程中你會跟喬布斯一起成長，從一個混蛋騷年到後來改變歷史的混蛋。