有時(shí)候現(xiàn)代科技產(chǎn)物使用起來非常復(fù)雜，但是其實(shí)「復(fù)雜」本身沒有好壞之分：不好是因?yàn)闆]有處理好這個(gè)復(fù)雜所以產(chǎn)生了「混亂」，所以應(yīng)該被批評(píng)的不是復(fù)雜而是因復(fù)雜所產(chǎn)生的混亂?！萍{德·諾曼

△ 上：大眾點(diǎn)評(píng)；馬蜂窩 下：IFTTT（個(gè)人助手類型應(yīng)用）；Airbnb（愛彼迎）

一、界面密度高就混亂么？

現(xiàn)在我們都喜歡追求「極簡風(fēng)格」， 設(shè)備/應(yīng)用看起來越「干凈」越好，但是「干凈」的產(chǎn)品就一定好用嗎？真的未必，有時(shí)候反而更不知道該從何開始。盲目追從低密度界面，為了簡潔而簡潔也不是件好事。密集界面就是不好看并且難用么？ 在紐約待了八年，一直在用「干凈」的手機(jī)應(yīng)用，我以為會(huì)非常不適應(yīng)國內(nèi)的 APP。然而留在北京期間使用國內(nèi)的應(yīng)用不但沒有覺得不知道該怎么用反而覺得咱們 APP 的功能強(qiáng)大而且上手很快，界面絕對(duì)不比「干凈」的界面差。

CJK（中國，韓國，日本）市場的 UI界面密度相對(duì)于歐美 UI界面密度會(huì)高很多，之前看過一個(gè)針對(duì) CJK用戶的調(diào)查，里面有一條：「CJK用戶對(duì)密度較高的界面有非常高的忍耐度?！?之后跟一位中國用戶體驗(yàn)研究員提過這個(gè)問題?！笧槭裁粗袊钠毡?UI界面都如此的密集？」 答說：其實(shí)這不僅僅只是一種設(shè)計(jì)風(fēng)格/文化上面的不一樣，有非常多的情況都是要滿足商業(yè)方面的需要。在相比頁面整潔、有設(shè)計(jì)感，把好一部分按鈕藏在「漢堡包圖標(biāo)」里，能把更多的功能放在界面當(dāng)中往往更為重要。 每一個(gè)按鈕的背后也都是一個(gè)團(tuán)隊(duì)的努力，他們可不想因?yàn)榻缑娴摹刚麧崱苟环诺綕h堡包圖標(biāo)或是擠到屏幕下方需要用戶往上滑動(dòng)才能看見。這往往是一種商業(yè)決定，并非設(shè)計(jì)決定。

Complexity can be tamed, but it requires considerable effort to do it well. （復(fù)雜其實(shí)可以被駕馭的，但是駕馭復(fù)雜則需要用戶一定的努力。）——唐納德·諾曼

我個(gè)人覺得界面密度與「對(duì)設(shè)計(jì)重視與否」并沒有那么大的關(guān)系。當(dāng)然絕對(duì)不排除 CJK 的用戶確實(shí)對(duì)于高密度的排版接受程度更高，但設(shè)計(jì)得要聽從商業(yè)要求這是合情合理的。 那我們作為界面/交互/動(dòng)效設(shè)計(jì)師的職責(zé)則是去降低來自各種密度所產(chǎn)生的「混亂」，使得用戶能夠輕松駕馭界面。

動(dòng)效設(shè)計(jì)作為用戶體驗(yàn)里面一個(gè)極為重要但是時(shí)常又會(huì)被忽略的部分，有時(shí)候直到產(chǎn)品快要成型的時(shí)候才會(huì)被提起，加上動(dòng)效之后很多交互的漏洞被展現(xiàn)了出來，但是又為時(shí)已晚。

很多設(shè)計(jì)師把動(dòng)效理解為一種更高層面的設(shè)計(jì)，即為一個(gè)界面內(nèi)的實(shí)體在即時(shí)的和非即時(shí)的事件之間的一種暫時(shí)性的行為。（其實(shí)就是過渡）——Isara Willenskomer

早期蘋果Mac 桌面文件夾的打開與關(guān)閉，注意在打開和關(guān)閉的過程中用戶可以清晰的分辨出窗口從屏幕的哪個(gè)位置來的。

動(dòng)效其實(shí)對(duì)于用戶體驗(yàn)這個(gè)大專業(yè)來講是一種新的學(xué)科，隨著我們的設(shè)備的硬件條件越來越好，動(dòng)效才能被支持。動(dòng)效里有一部分可以歸為傳統(tǒng)動(dòng)畫，比如說圖標(biāo)/插畫/載入動(dòng)畫。 這些可以借鑒迪士尼的十二大動(dòng)畫原則。但是另外一部分則是扎根于「交互」，Issara Willenskomer 用他在用戶體驗(yàn)領(lǐng)域15年的經(jīng)驗(yàn)總結(jié)出了屬于 UX動(dòng)效的12大原理。

二、動(dòng)效通過四大塊增強(qiáng)可用性

1. 減少預(yù)判誤差

用戶在界面中看到一個(gè)組件的時(shí)候，他們會(huì)產(chǎn)生對(duì)這個(gè)物體是什么還有它的運(yùn)動(dòng)方式的預(yù)判。設(shè)計(jì)師應(yīng)該減少的是「預(yù)判」與「現(xiàn)實(shí)」的差距。

2. 增加連貫性

這個(gè)可以涉及到單個(gè)界面和多個(gè)連環(huán)界面。 比如在單個(gè)界面（在日歷里面建立新的事件）內(nèi)用戶是否可以毫不費(fèi)力的導(dǎo)航以及多個(gè)連環(huán)界面（瀏覽商品 – 加入購物車 – 買單）的用戶體驗(yàn)。

3. 強(qiáng)調(diào)敘述

在一個(gè)應(yīng)用的導(dǎo)航過程中，經(jīng)過一系列的操作，用戶會(huì)在腦海里形成該應(yīng)用的信息結(jié)構(gòu)框架，動(dòng)效把這些環(huán)節(jié)緊緊相扣并幫助用戶加速學(xué)習(xí)該結(jié)構(gòu)框架。

4. 清晰關(guān)系

這個(gè)關(guān)系可以指的是不同界面之間的以及一個(gè)界面內(nèi)不同組件間的空間，主次關(guān)系。清晰的關(guān)系可以更有效率的引導(dǎo)用戶。

了解了以上四大塊兒后，下面讓我們來看一些例子。

三、幫助用戶導(dǎo)航，促生思維模式

最近我的同事 Jonas Naimark 在 Medium 上面發(fā)表了《Motion Doesn’t Have to Be Hard（動(dòng)效不該難）》中總結(jié)得特別好，這里給大家總結(jié)兩點(diǎn)。我獲得他的允許把這個(gè)文章翻譯了，有興趣的同學(xué)可以戳標(biāo)題查看全文。

1. 實(shí)實(shí)在在

大家注意到這兩邊前后大小變化沒有？ 他們是完全按照這個(gè)容器的大小而變的，這給予用戶一種「實(shí)實(shí)在在打開一個(gè)界面」的感覺。 這種細(xì)節(jié)其實(shí)對(duì)于「促生思維模式」是很有幫助的，因?yàn)樗岩粋€(gè)容器（界面）里的內(nèi)容跟容器本身緊密的聯(lián)系在了一起。再看下面的例子，這個(gè)例子又引出了下一話題。

2. 界面從哪兒來？

界面的來去對(duì)用戶熟悉這個(gè)應(yīng)用不同界面的空間關(guān)系非常重要，新的界面從哪兒來就該回哪兒去，界面的進(jìn)入以及出去的方向也直接暗示了激活該界面的按鈕的大概位置。設(shè)計(jì)這一塊的時(shí)候不一定要按照這個(gè)套路，可以研究屬于自己的運(yùn)動(dòng)模式，但是一定要注意運(yùn)動(dòng)模式的一致性。

小結(jié)：如果你的動(dòng)效連幫助用戶導(dǎo)航都沒到位，圖標(biāo)/過場動(dòng)畫什么的都得往后排。

四、在設(shè)計(jì)交互模式的時(shí)候

We must design for the way people behave, not for how we would wish them to behave.（我們?cè)O(shè)計(jì)師不能只用我們自己的思維去給用戶設(shè)計(jì)交互模式，我們必須根據(jù)用戶們的行為去設(shè)計(jì)。）——唐納德·諾曼

1. 動(dòng)效不只是過渡動(dòng)畫，得多思考用戶的行為

我們?cè)谠O(shè)計(jì)交互的時(shí)候往往都會(huì)以我們自己的思維出發(fā)，想著用戶在執(zhí)行完一個(gè)動(dòng)作之后就會(huì)執(zhí)行下一個(gè)動(dòng)作，那么在這個(gè)動(dòng)作之后會(huì)出現(xiàn)這個(gè)過渡，下一個(gè)動(dòng)作之后會(huì)出現(xiàn)下一個(gè)過渡?？墒乾F(xiàn)實(shí)完全不是這樣，用戶到底會(huì)不會(huì)按照我們?cè)O(shè)計(jì)的交互套路走除非做用戶測試，否則根本沒法知道。

Motiongraphics 里面的過渡跟動(dòng)效過渡不一樣，我們動(dòng)畫師畫什么就是什么。 但在設(shè)計(jì)一個(gè)交互動(dòng)作的同時(shí)，設(shè)計(jì)師需要思考有沒有在動(dòng)作開始與結(jié)束這兩點(diǎn)之間發(fā)生其他事件的可能，并且利用動(dòng)效來教育用戶同一個(gè)過渡可以通過不同的動(dòng)作來激活。用戶手指的擺位，怎樣用起來更加方便，減少手指需要移動(dòng)的距離等都應(yīng)該被考慮到。 當(dāng)然了，不是說每一個(gè)交互轉(zhuǎn)折點(diǎn)都得死磕，但是多思考思考用戶的行為絕對(duì)沒有壞處。

△ Safari關(guān)閉網(wǎng)頁的移動(dòng)方向暗指用戶也可以通過向左滑動(dòng)來關(guān)閉網(wǎng)頁

2. 顏色，音效還有震動(dòng)

動(dòng)效不只是視覺上的，因?yàn)閯?dòng)效其實(shí)就是機(jī)器跟用戶的溝通方式。 另外一點(diǎn)就是「小輸入，大輸出」。想想在蘋果手機(jī)上瀏覽網(wǎng)頁，只要輕輕在網(wǎng)頁往上一劃，就會(huì)滑出很長一段距離。在設(shè)置日期，調(diào)整時(shí)間的時(shí)候，手機(jī)的震動(dòng)以及音效使得交互變得更加真實(shí)。

https://player.youku.com/embed/XMzkzNDgyMDM2NA==

△ iOS在設(shè)定日期時(shí)間的時(shí)候，來自手機(jī)的音效和震動(dòng)效果增加了這個(gè)交互的真實(shí)感。

△ 在谷歌Pixel 上面，用戶可以通過擠手機(jī)來激活谷歌智能助手，這不但使得交互變得方便，也一定程度上增加了互動(dòng)的趣味，甚至讓機(jī)器「活」了起來。所以交互不是一定要都要在屏幕上發(fā)生。

3. 暫停，變向，返回，取消

上面提到了在設(shè)計(jì)一個(gè)交互動(dòng)作的同時(shí)，設(shè)計(jì)師可以思考有沒有在動(dòng)作開始到結(jié)束這兩點(diǎn)之間發(fā)生其他事件的可能，交互動(dòng)作能不能中途轉(zhuǎn)向？（打開視頻查看完整操作）

https://player.youku.com/embed/XMzkzNDgyNTYzMg==

這樣一個(gè)動(dòng)作就可以解決很多問題，執(zhí)行動(dòng)作與決定下一步做什么可以同時(shí)進(jìn)行，大大增加了交互效率，反之如果機(jī)器不能做到允許用戶在執(zhí)行當(dāng)前動(dòng)作的同時(shí)做下一步?jīng)Q定的話，那么用戶在執(zhí)行一個(gè)動(dòng)作之前就要做出決定，因此降低了互動(dòng)的效率。

裝置也應(yīng)該時(shí)刻給用戶反應(yīng)，接下來會(huì)發(fā)生什么。

當(dāng)往下拉動(dòng)照片的同時(shí)，白色的背景漸漸變得透明，暗示用戶照片如果這時(shí)候放手的話照片會(huì)被關(guān)閉。

4. 給符合現(xiàn)實(shí)的思維方式和運(yùn)動(dòng)方式

圖標(biāo)到全屏和開關(guān)動(dòng)畫所需的時(shí)長肯定不一樣，屏幕的大小也需要被考慮到。

Material 基線動(dòng)效中，從一個(gè)從容器部件到全屏的動(dòng)畫需要300毫秒的時(shí)長。

利用彈力友好的提示用戶已經(jīng)到達(dá)了界面的末端。

直接操作，指尖與觸碰內(nèi)容同時(shí)移動(dòng)。

小結(jié)：想著怎樣設(shè)計(jì)交互模式加上動(dòng)效能使得裝置與用戶時(shí)刻溝通，再通過不同的感官增加輸出，達(dá)到人機(jī)合一的境界。

五、制作Demo

1. 選擇用適當(dāng)?shù)膮?shù)

根據(jù)過渡的「大小」（動(dòng)畫所占屏幕的大?。┖蛷?fù)雜程度選擇適當(dāng)?shù)乃俣群蜁r(shí)長。

雖然都是圖標(biāo)動(dòng)畫，但是左邊因?yàn)閺?fù)雜程度較低，所以動(dòng)畫時(shí)長只有100毫秒。而在右邊較為復(fù)雜的圖標(biāo)動(dòng)畫時(shí)長則是500毫秒。還有文章上面提到的從容器部件到全屏的動(dòng)效時(shí)長為300毫秒。

2. 選擇正確的緩和效果

緩和效果建議使用非對(duì)稱型緩和，比如 Material基線緩和。

3. Demo最有效了，能互動(dòng)的Demo更能說明問題

動(dòng)效設(shè)計(jì)師可以實(shí)現(xiàn)來自交互設(shè)計(jì)師的設(shè)想，把靜態(tài)的界面變成動(dòng)態(tài)Demo，交互流程一目了然。但是有時(shí)候交互設(shè)計(jì)師們會(huì)不自覺受到他們腦海里已經(jīng)形成的交互模式的影響，所以如果你覺得還有什么要補(bǔ)充的話，應(yīng)該主動(dòng)提出。還可以結(jié)合不同的手勢，闡述過渡中所涉及到的所有可能的參數(shù)，位置，動(dòng)量，按壓以及按壓面積等多做幾個(gè)交互流程方案，然后跟團(tuán)隊(duì)一塊討論，也可以和交互設(shè)計(jì)師私底下討論（根據(jù)你的工作氛圍）。

有條件可以使用 Principle，F(xiàn)ramer，F(xiàn)igma，Invision等設(shè)計(jì)工具直接制作可互動(dòng)Demo，沒有什么能比真正使用更有說服力。

4. 在設(shè)計(jì)過渡當(dāng)中注意尷尬幀的存在

 

It’s not the frame rate, it is what in the frame!（別只怪幀頻，幀里有啥才是最重要?。禗esign Fluid Interface》Apple WWDC 2018

更高的幀頻當(dāng)然有幫助，但是當(dāng)視覺變化太大的時(shí)候，人的眼睛一下子就能偵測到這種信息的缺失。

大家可以看到在右邊原型運(yùn)動(dòng)過程中很明顯有一處「空缺的地方」。

幀頻變成60幀之后確實(shí)有好轉(zhuǎn)，但是看起來還是有點(diǎn)不舒服，動(dòng)效設(shè)計(jì)師應(yīng)該注意的就是這個(gè)「不舒服的瞬間」，這種情況下可以通過調(diào)整時(shí)長或者利用疊加漸進(jìn)淡出等來改善過渡。

△ 適當(dāng)?shù)臅r(shí)候可以直接把中間那個(gè)部分去掉。但是要確保這個(gè)部件前后的樣式保持一致，否則用戶容易混淆兩者是否是相同的部件。

新的內(nèi)容會(huì)在過渡最快的時(shí)候進(jìn)入界面。

小結(jié)：思考過渡模式的時(shí)候把腦子思維放開，思考各種用戶場景以及動(dòng)效參數(shù)，制作給力Demo。注意過渡屏幕里面的細(xì)節(jié)，記住不是幀頻的問題，是幀中內(nèi)容的問題。

六、與團(tuán)隊(duì)合作的時(shí)候

說動(dòng)效設(shè)計(jì)師是設(shè)計(jì)與實(shí)現(xiàn)的粘合劑一點(diǎn)也不為過，當(dāng)我們?cè)诳匆幌盗械撵o態(tài)界面的時(shí)候，腦海里浮現(xiàn)的是各種交互流程，我們得理性?？吹揭粋€(gè)標(biāo)志，一個(gè)人物的時(shí)候，得想如何把它們變活并且符合品牌風(fēng)格，我們得感性。 當(dāng)我們面對(duì)工程師們的時(shí)候，不但得有效的讓工程師明白一個(gè)過渡界面中發(fā)生了什么，還得在技術(shù)允許的范圍盡可能說服工程方滿足來自設(shè)計(jì)方的要求，我們要理性加感性。

時(shí)刻記住，你不是動(dòng)畫師。用你制作的 Demo 來引發(fā)并參與交互設(shè)計(jì)師，界面設(shè)計(jì)師的討論。 平時(shí)也多跟工程師聊聊，了解當(dāng)前技術(shù)上面的局限。因?yàn)閷?shí)現(xiàn)一個(gè)動(dòng)效會(huì)受到來自代碼框架的局限，還有產(chǎn)品本身的局限。有一些過渡不能被實(shí)現(xiàn)是因?yàn)檫M(jìn)入的新界面來自第三方產(chǎn)品，這樣第一方?jīng)]有辦法控制第三方頁面的結(jié)構(gòu)，所以無法完美的把雙方的界面串聯(lián)起來，那這個(gè)時(shí)候設(shè)計(jì)只能先屈服現(xiàn)實(shí)。有時(shí)候設(shè)計(jì)師跟工程師思維的不同，會(huì)導(dǎo)致他們有時(shí)候會(huì)想不到其他的實(shí)現(xiàn)方式。 曾經(jīng)跟一位工程師聊過，我問實(shí)現(xiàn)一個(gè)組件的代碼的書寫方式只有一種么？ 答說不是，有很多種，但是最有效率的書寫方式就那么一種。但是思維方式不一樣不代表不好，而且「沒有主意是壞主意」，有時(shí)候甚至?xí)驗(yàn)槟愕奶嶙h工程師們會(huì)想到新的實(shí)現(xiàn)方式。你制作的 Demo 如果工程師們達(dá)不到，并不代表以后達(dá)不到，這也成為他們之后的目標(biāo)。

總結(jié)

動(dòng)效設(shè)計(jì)先要解決的問題就是增加應(yīng)用的可用性，幫助用戶輕松駕馭應(yīng)用。確?？捎眯灾螅诓挥绊懹脩趔w驗(yàn)的前提下，天花亂墜的加特效吧。

簡易的導(dǎo)航，有效的過渡以及酷炫的動(dòng)效最終都是服務(wù)用戶。成功的交互能使得「人機(jī)合一」，自然的交互往往成敗都在細(xì)節(jié)上，那么真正了解這些細(xì)節(jié)光參考網(wǎng)站上玲瑯滿目的素材與案例和學(xué)習(xí)動(dòng)畫制做是不夠的，閱讀關(guān)于用戶體驗(yàn)書籍學(xué)習(xí)理論知識(shí)是一大方面，最重要的是了解人本身。所以廣泛閱讀，對(duì)比閱讀，用戶體驗(yàn)知識(shí)完全不用從用戶體驗(yàn)的書中來。

你，是動(dòng)效設(shè)計(jì)師，是一個(gè)產(chǎn)品的頂梁柱。一定要積極的參與到設(shè)計(jì)流程中，尤其是在設(shè)計(jì)產(chǎn)品初期，放開思維張開嘴。

希望以上的內(nèi)容可以讓大家進(jìn)一步的了解動(dòng)效設(shè)計(jì)，給那些想學(xué)習(xí)動(dòng)效設(shè)計(jì)但又摸不著頭腦的同學(xué)一點(diǎn)大方向，也給現(xiàn)在已經(jīng)在崗位上的動(dòng)效設(shè)計(jì)師們一些雞血。

原作者的微信公眾號(hào)：「魔瓜」