藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源：莫貝網(wǎng)

沒(méi)有用戶請(qǐng)求就不會(huì)產(chǎn)生交互。

當(dāng)你關(guān)閉一個(gè)標(biāo)簽時(shí)，它就會(huì)從屏幕上消失：簡(jiǎn)單地說(shuō)，這給了用戶一個(gè)即時(shí)的反饋動(dòng)作（這個(gè)視覺(jué)效果對(duì)我們來(lái)說(shuō)非常重要）。深入地說(shuō)，動(dòng)作讓人類(lèi)感受到了現(xiàn)實(shí)生活中的行為。動(dòng)畫(huà)讓界面變得鮮活，帶給用戶真實(shí)的響應(yīng)感覺(jué)。

過(guò)去，在網(wǎng)站上增加動(dòng)畫(huà)效果是的，而且大部分是針對(duì)基于Flash的網(wǎng)站。但是現(xiàn)在幾乎每一個(gè)網(wǎng)站都在使用CSS/Javascript/HTML5的動(dòng)畫(huà)功能，小到簡(jiǎn)單的滑動(dòng)模塊，大到更復(fù)雜的“視覺(jué)滾動(dòng)差”效果。

這不是一件壞事——除了看起來(lái)漂亮和取悅用戶以外，動(dòng)畫(huà)也解決了很多界面上的實(shí)際性問(wèn)題。就像我們?cè)凇?Interaction Design Best Practices》中提到的那樣，動(dòng)畫(huà)起了一個(gè)“傳播者”的作用，比起文字描述和圖片，動(dòng)畫(huà)能使內(nèi)容表達(dá)得更徹底且簡(jiǎn)潔。

下文，我們將探討如何處理長(zhǎng)時(shí)間加載等待及自然轉(zhuǎn)場(chǎng)過(guò)渡，有哪些策略可以采用，及交互設(shè)計(jì)中可遵循的迪斯尼動(dòng)畫(huà)準(zhǔn)則。

在用戶等待過(guò)程中分散他們注意力

“人心不足蛇吞象”，內(nèi)容的臃腫導(dǎo)致加載時(shí)間過(guò)長(zhǎng)，這在技術(shù)層面無(wú)法解決。某些產(chǎn)品深受其害(如視頻游戲、重度數(shù)據(jù)網(wǎng)站)，但對(duì)于大多數(shù)數(shù)字產(chǎn)品來(lái)說(shuō)又是不可避免的。

我們沒(méi)辦法縮短加載時(shí)間，但是我們可以讓等待的過(guò)程更愉悅。加載時(shí)間動(dòng)畫(huà)（一種靜態(tài)動(dòng)畫(huà)）就派上用場(chǎng)了。

雖然動(dòng)畫(huà)不能完美的解決這個(gè)問(wèn)題，毫無(wú)疑問(wèn)，它緩解了這個(gè)問(wèn)題。

加載時(shí)間，它的關(guān)鍵是創(chuàng)建一個(gè)動(dòng)畫(huà)來(lái)替代原有的簡(jiǎn)單的加載進(jìn)度條。最理想的情況是，動(dòng)畫(huà)加載過(guò)程中，通過(guò)動(dòng)畫(huà)向用戶展現(xiàn)你產(chǎn)品的技術(shù)含量，給用戶一個(gè)好的印象。就算是最差的情況，用戶至少能在他們等待的過(guò)程中看一些有趣的東西，這就提高了整個(gè)用戶體驗(yàn)！

事實(shí)上，與用戶之間建立情感聯(lián)系的應(yīng)用和網(wǎng)站，更容易獲得用戶的寬容。好比一個(gè)優(yōu)秀的404錯(cuò)誤頁(yè)面設(shè)計(jì)可以減少用戶訪問(wèn)失敗的挫折感，一個(gè)有趣的加載頁(yè)面可產(chǎn)生更多情感價(jià)值而不是白白浪費(fèi)掉等待時(shí)間。

口說(shuō)無(wú)憑，讓我們一起來(lái)看看數(shù)字創(chuàng)意機(jī)構(gòu)Dunckelfeld的例子。當(dāng)你第一次進(jìn)入他們的網(wǎng)站時(shí)，你會(huì)看到下圖所展示的一個(gè)有個(gè)性且有趣的加載動(dòng)畫(huà)。

Dunckelfeld創(chuàng)造性地利用傳統(tǒng)的加載條和他們獨(dú)特的橙色對(duì)角線標(biāo)志作為開(kāi)場(chǎng)動(dòng)畫(huà)，讓用戶知道等待不會(huì)太久,安撫他們的同時(shí)提升了品牌知名 度。一旦完成,加載條就只剩下Dunckelfeld標(biāo)志,飛到屏幕的左上角,無(wú)縫過(guò)渡到操作界面，用戶現(xiàn)在可以自由地與它交互了。

現(xiàn)在的網(wǎng)站通常都能很好地支持動(dòng)畫(huà)，關(guān)鍵是探索出與自己網(wǎng)站定位相符的界面移動(dòng)和變化的動(dòng)畫(huà)方式。將各式各樣的微交互（microinteractions）植入到你的產(chǎn)品中，讓你的產(chǎn)品為用戶帶去更多有樂(lè)趣的體驗(yàn)。

無(wú)論是初始化時(shí)的加載動(dòng)畫(huà)還是微交互動(dòng)畫(huà)對(duì)網(wǎng)站而言都需要一些技巧——畢竟,他們的加載時(shí)間并不會(huì)太長(zhǎng),微動(dòng)畫(huà)大多起美化和裝飾作用。然而，這些小的增加可使網(wǎng)站脫穎而出,使交互更令人滿意。在交互設(shè)計(jì)中，永遠(yuǎn)不要低估它們的價(jià)值，它們不僅僅是“花瓶”。

更多的屏幕加載的優(yōu)秀例子，請(qǐng)查Sitepoint列出的那12個(gè)有創(chuàng)意且聰明的屏幕加載設(shè)計(jì)。

場(chǎng)景過(guò)渡和用戶通知

動(dòng)畫(huà)不應(yīng)僅僅用于枯燥的等待時(shí)間中，以分散用戶注意力，還應(yīng)用來(lái)為用戶推送通知并引導(dǎo)他們?cè)L問(wèn)相應(yīng)內(nèi)容。

無(wú)論是從一個(gè)頁(yè)面或者對(duì)象跳轉(zhuǎn)到另一個(gè)，或者僅僅是一個(gè)簡(jiǎn)單的下拉菜單的出現(xiàn)，動(dòng)畫(huà)可以提高每一個(gè)細(xì)節(jié)上的交互——最好的動(dòng)畫(huà)看起來(lái)順暢自然，而不會(huì)把用戶的主要注意力吸引到動(dòng)畫(huà)本身。

接下來(lái)，讓我們看看如何在動(dòng)畫(huà)速度和用戶認(rèn)知方面建立一個(gè)平衡點(diǎn),同時(shí)使你的網(wǎng)站顯得更流暢。這些可作為一個(gè)UI模式來(lái)定制你的網(wǎng)站或App。

1.讓通知更具動(dòng)態(tài)

運(yùn)動(dòng)的物體可吸引人的注意力。讓你的消息通知?jiǎng)悠饋?lái)，是一個(gè)很好的提醒用戶的方式，且不會(huì)讓用戶感覺(jué)突兀。

在線照片禮品零售商Photojojo就做了這樣一個(gè)有趣且有用的動(dòng)畫(huà)。當(dāng)用戶添加一個(gè)新商品到購(gòu)物車(chē)時(shí)，一個(gè)“+1”的文本會(huì)滑過(guò)屏幕漂浮到購(gòu)物車(chē)圖標(biāo)處再增加商品計(jì)數(shù)。

動(dòng)畫(huà)運(yùn)用得好，也可很好為商業(yè)目的服務(wù)：通過(guò)即時(shí)動(dòng)態(tài)，向用戶反饋商品已添加入購(gòu)物車(chē)，可使用戶不必急于去結(jié)算頁(yè)面支付。這樣用戶的購(gòu)物體驗(yàn)就未被打斷，使得用戶有更多時(shí)間去瀏覽或購(gòu)買(mǎi)更多的商品。

當(dāng)然，這樣的動(dòng)畫(huà)模式不僅僅適用于電子商務(wù)的網(wǎng)站。如果你想以友好的方式將消息推送給用戶，可以考慮使用動(dòng)態(tài)消息，像RelateIQ那樣向下滑動(dòng)一個(gè)通知條（幾秒鐘后自動(dòng)消失）。

2.展示隱藏信息

通過(guò)動(dòng)畫(huà)方式動(dòng)態(tài)顯示一些隱藏的信息。兩種最常見(jiàn)的方法是Hover-to-Reveal（鼠標(biāo)懸停時(shí)觸發(fā)）和Click-to-Reveal（點(diǎn)擊時(shí)觸發(fā)）。

懸停技術(shù)直截了當(dāng)。當(dāng)鼠標(biāo)懸停在作用區(qū)域時(shí)，更多的隱藏內(nèi)容將展現(xiàn)出來(lái)。我們并不鼓勵(lì)將涉及用戶操作的元素通過(guò)懸停的方式來(lái)顯示，但可以用它來(lái)顯示一些次要的信息。請(qǐng)記住,通過(guò)移動(dòng)設(shè)備訪問(wèn)網(wǎng)站，懸停方式是不生效的(移動(dòng)設(shè)備不支持Hover操作)。

例如，F(xiàn)lickr上，你只要將鼠標(biāo)懸停在照片上就能顯示照片的說(shuō)明信息。

為了讓用戶更多的關(guān)注主體內(nèi)容，我們嘗試一種叫做Click-to-Hover的替代方法。如AirBnB的地圖將各目地有趣的建議（網(wǎng)站的主要內(nèi)容）進(jìn)行了隱藏，只有單擊每個(gè)目的地的Icon才能看到它們。

3.內(nèi)容突出

如果使用網(wǎng)格或卡片布局，這一點(diǎn)很容易實(shí)現(xiàn)。當(dāng)用戶鼠標(biāo)滑到內(nèi)容區(qū)域（不單單指文本鏈接），確保設(shè)置好合適的參數(shù)以保證動(dòng)畫(huà)的觸發(fā)。下面我們可以看看阿迪達(dá)斯的例子。

4.折疊菜單

正如我們前面所提到的，某些區(qū)域最好保持隱藏，以節(jié)省所占用的屏幕空間，直到必要時(shí)再顯示。如果采用這種方式，你希望折疊或下拉應(yīng)流暢平滑，而不是簡(jiǎn)單地讓用戶和動(dòng)畫(huà)區(qū)域“躲貓貓”。這將提醒用戶變化正在發(fā)生而不會(huì)打斷他們流暢瀏覽的體驗(yàn)過(guò)程。

上面是一個(gè)來(lái)自Cabedge的例子，它在傳統(tǒng)菜單的基礎(chǔ)上添加了動(dòng)畫(huà)。它逐漸展開(kāi)或折疊，而不是突兀地出現(xiàn)。這讓整個(gè)UI顯得更高大上，讓人眼前一亮。

如果你想親自試試這些有趣的動(dòng)畫(huà)效果，但又沒(méi)時(shí)間一行行自己寫(xiě)代碼來(lái)實(shí)現(xiàn)，那去UXPin看看吧，它有一個(gè)豐富包含 24種動(dòng)畫(huà)和交互效果的庫(kù)。

5.動(dòng)畫(huà)滾動(dòng)

印刷媒體與數(shù)字媒體相比，其優(yōu)勢(shì)在于線性度。

正在閱讀一本雜志，你通常會(huì)知道讀到哪里及記得你的閱讀目的。然而瀏覽一個(gè)頁(yè)面，往往比較跳躍，經(jīng)常遇到的情況是：被另外一些有趣的圖片或者標(biāo)題吸引，甚至通過(guò)鏈接去瀏覽其它頁(yè)面，到最后你閱讀的內(nèi)容也不再是你最初所計(jì)劃的。數(shù)字媒體缺乏這樣的品質(zhì)……但它又不是非這樣不可。

動(dòng)畫(huà)滾動(dòng)是一種可以讓整個(gè)網(wǎng)站從頂部到底部更具線性的設(shè)計(jì)方案（常被稱為單頁(yè)面網(wǎng)站）。當(dāng)你點(diǎn)擊不同的菜單選項(xiàng)時(shí)，目標(biāo)區(qū)域自動(dòng)地滾動(dòng)到屏幕的可視區(qū)域——不會(huì)像“Jump-to-Section(場(chǎng)景跳轉(zhuǎn))”那樣讓人失去方向感。

動(dòng)畫(huà)滾動(dòng)在瀏覽方面模擬了印刷媒體的方式，主要實(shí)現(xiàn)了三個(gè)目的：

讓用戶知道這個(gè)站點(diǎn)包含了多少內(nèi)容及這些內(nèi)容之間相互的關(guān)聯(lián)；
可以讓用戶隨意地發(fā)現(xiàn)和瀏覽站點(diǎn)內(nèi)所感興趣的內(nèi)容而不用跳轉(zhuǎn)頁(yè)面。
場(chǎng)景過(guò)渡平滑而自然。
Laura Meroni是一個(gè)很好地例子。注意這個(gè)站點(diǎn)在場(chǎng)景轉(zhuǎn)換時(shí)不同的層有不同的移動(dòng)速度，這就創(chuàng)造了一個(gè)驚艷的視覺(jué)滾動(dòng)差效果。

當(dāng)用戶通過(guò)Web或者移動(dòng)端訪問(wèn)站點(diǎn)時(shí)，我們想象他們只是“突然闖入”。一個(gè)動(dòng)畫(huà)滾動(dòng)扮演的角色就像一輛豪華的轎車(chē)帶用戶去他們想去的地方。

如果你正在創(chuàng)建的是一個(gè)傳統(tǒng)的多頁(yè)面網(wǎng)站，你仍然可以通過(guò)視覺(jué)滾動(dòng)差（ Parallax Scrolling）的方法來(lái)增加可交互性。想深入了解該方法，查下載閱讀免費(fèi)書(shū)籍Web UI最佳實(shí)踐（ Web UI Best Practices）。

遵循迪斯尼動(dòng)畫(huà)12原則

如果要把交互式設(shè)計(jì)中所有的動(dòng)畫(huà)方式寫(xiě)成書(shū)，可能好幾本書(shū)都說(shuō)不完。我認(rèn)為為你提供一個(gè)動(dòng)畫(huà)設(shè)計(jì)指南可能更有用，授人以魚(yú)不如授人以漁。

在動(dòng)畫(huà)設(shè)計(jì)界，誰(shuí)能比迪斯尼更專(zhuān)業(yè)？1981年，迪士尼動(dòng)畫(huà)公司在《The Illusion of Life（生命的幻想）》這本書(shū)中總結(jié)出了12條設(shè)計(jì)準(zhǔn)則，也正是這12條準(zhǔn)則成就了現(xiàn)在的迪士尼。

• 擠壓與伸展——模擬出實(shí)體對(duì)象的重量、硬度等特性，體現(xiàn)出物體被“壓扁”或“拉申”的感覺(jué)。物體在運(yùn)動(dòng)過(guò)程中是保持原樣還是靈活多取決于你的設(shè)計(jì)。

 

 

• 預(yù)見(jiàn)性——?jiǎng)赢?huà)角色的動(dòng)作必須讓觀者能夠產(chǎn)生“預(yù)見(jiàn)性”，當(dāng)動(dòng)畫(huà)角色一個(gè) Pose擺出來(lái)后，觀眾就知道角色的下一步動(dòng)作將會(huì)如何。舉個(gè)例子，從下面的APP屏幕快照中可以看出，用戶可以通過(guò)左邊疊加在下層的卡片預(yù)測(cè)到點(diǎn)擊下層的卡片就會(huì)切換到該卡片所對(duì)應(yīng)的內(nèi)容。

 

 

• 呈現(xiàn)方式——將合適的內(nèi)容放置在動(dòng)畫(huà)周?chē)趲椭麄冊(cè)谀?span style="width:auto;height:auto;float:none;" id="4_nwp">網(wǎng)站/應(yīng)用中獲得更舒適的交互。使用色彩、對(duì)比度、構(gòu)圖和動(dòng)作使用戶把目光焦點(diǎn)定位在主要的對(duì)象上，給用戶一個(gè)更好的整體感。例如，彈出一個(gè)模態(tài)窗（背景模糊化，窗口部分處于焦點(diǎn)狀態(tài)）來(lái)將數(shù)據(jù)區(qū)域更直接地展現(xiàn)給用戶。

 

 

• “關(guān)鍵動(dòng)作”和“連續(xù)動(dòng)作”——“關(guān)鍵動(dòng)作”將動(dòng)作拆解成一些重要的定格動(dòng)作，補(bǔ)上中間的間補(bǔ)動(dòng)畫(huà)后，產(chǎn)生動(dòng)態(tài)的效果，通常適用于較復(fù)雜的動(dòng)作； “連續(xù)動(dòng)作”是將動(dòng)作從第一張開(kāi)始，依照順序畫(huà)到最后一張，通常是制作較簡(jiǎn)易的動(dòng)態(tài)。下面的第一張圖就是一個(gè)“連續(xù)動(dòng)作”的例子，第二張圖是“關(guān)鍵動(dòng)作” 的例子。

 

 

• 漸入和淡出——在動(dòng)畫(huà)開(kāi)始和結(jié)束部分添加更多的動(dòng)畫(huà)幀，這樣符合人們對(duì)慣性定律的認(rèn)識(shí)，形成了一種加速或減速的感覺(jué)。

 

 

• 弧形運(yùn)動(dòng)軌跡——運(yùn)動(dòng)沿著圓弧感覺(jué)更自然，而直線運(yùn)動(dòng)讓人感覺(jué)僵硬。例如，Android UI的滾動(dòng)是直線的，它的logo被設(shè)計(jì)為一個(gè)機(jī)器人倒也名副其實(shí)了，哈哈。

 

 

• 附屬（次要）動(dòng)作——在現(xiàn)實(shí)生活中，做一個(gè)動(dòng)作總會(huì)引起多個(gè)附屬動(dòng)作——正如下面這只松鼠，它的跳躍引起尾巴的擺動(dòng)。我們可以把這個(gè)運(yùn)用到數(shù)字媒體設(shè)計(jì)中：假設(shè)用戶打開(kāi)了一個(gè)新菜單，我們可讓之前打開(kāi)的其它菜單動(dòng)態(tài)地收起。

 

 

• 時(shí)間控制——節(jié)奏的控制是見(jiàn)仁見(jiàn)智的，不同的節(jié)奏傳達(dá)不同的風(fēng)格。輕松和娛樂(lè)的App和網(wǎng)站需要快速反應(yīng)，然而結(jié)構(gòu)復(fù)雜的網(wǎng)站則相反。設(shè)想一下，要讓用戶獲得真實(shí)操作的感覺(jué)，動(dòng)畫(huà)必須在0.1s內(nèi)做出反應(yīng)。
• 夸張手法——?jiǎng)赢?huà)的樂(lè)趣之一是它可以“瀟灑隨意”?，F(xiàn)實(shí)主義是好的，然而過(guò)于現(xiàn)實(shí)主義則抑制了對(duì)動(dòng)畫(huà)的想象力和創(chuàng)造力。建議適度使用夸張手法。如你可以給一個(gè)跳躍的小球在反彈時(shí)添加被“擠壓”的效果，使得這個(gè)反彈小球的動(dòng)畫(huà)顯得很好玩。
• 立體繪畫(huà)——就像真實(shí)生活一樣，為它添加3D空間、質(zhì)感和聲音。
• 吸引力——這是動(dòng)畫(huà)最棘手和最主觀的方面。記住要遵循最佳實(shí)踐的情感設(shè)計(jì)。
• 最后，記得動(dòng)畫(huà)應(yīng)該適度使用。動(dòng)畫(huà)應(yīng)該用來(lái)幫助用戶完成在頁(yè)面和操作之間的預(yù)期目的，而不是作為一個(gè)“花瓶”（如果還有什么不明白的，可查看原文中提供的視頻演）。

總結(jié)

隨著時(shí)間的推移，對(duì)動(dòng)畫(huà)的需求將增而不減。未來(lái)不久你的網(wǎng)站或App也許會(huì)用到。別忘了，動(dòng)畫(huà)是一種強(qiáng)大的工作。它不僅滿足了交互設(shè)計(jì)中的娛樂(lè)性，也完成了很多實(shí)際的功能性工作。請(qǐng)牢記文中提到的三種動(dòng)畫(huà)并把它們運(yùn)用到你的界面中，可以讓你的加載等待和場(chǎng)景變換更平滑自然。設(shè)計(jì)動(dòng)畫(huà)時(shí)，千萬(wàn)別忘了迪士尼的十二原則。

要使得網(wǎng)站內(nèi)容既實(shí)用又有趣不是一件易事，不要小看動(dòng)畫(huà)的作用。

更多細(xì)節(jié)，可下載閱讀免費(fèi)電子書(shū)《Interaction Design Best Practices: Time & Behavior》，書(shū)中囊括了包括Google、AirBnB、Facebook、雅虎等30多個(gè)公司的研究案例。