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

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

來源：http://www.woshipm.com/ucd/161424.html

譯者紀(jì)：本片文中包含大量的動態(tài)頁面（原網(wǎng)站是視頻鏈接，本網(wǎng)站上傳視頻不能排序，故人工轉(zhuǎn)為動圖），加載較緩慢，請各位多點耐心，么么噠

---

一個好的交互設(shè)計師可以很容易的解釋設(shè)計里面的決定背后的邏輯。這包含著信息架構(gòu)，頁面內(nèi)容的層次結(jié)構(gòu)，流程和所做的解釋。

遲早，動效將會應(yīng)用到線框圖原型中，這個時候，再去對設(shè)計做決定或者是解釋，將會變的難一些。例如一些這樣的理由：太狂拽酷炫了……太潮了……太雞凍了……這將是設(shè)計失去其力度的領(lǐng)域（Reasons such as “It will be cool!” or “It’s trendy” or ”exciting” are exactly the areas where a design starts to lose its strength.）在我們的設(shè)計中，動效理應(yīng)占到更多的比重。我們應(yīng)該去定義動效，并且闡述他們的目的——像我們闡述一個設(shè)計中其他的元素一樣。

什么是功能動效？

功能動效是微妙的動效，是我們嵌入在用戶界面設(shè)計中的流程的一部分

不像是迪斯尼出的動效（動畫）或者是電腦游戲中的動效，我們這里講的功能動效擁有一個清晰的、有邏輯性目的。這個目的為是我們想要傳遞的設(shè)計理念服務(wù)的。功能動效是我們UX（交互設(shè)計）工具庫中的又一個工具。

在一個完美的世界里，我們應(yīng)該可以驗證功能動效與清晰設(shè)定邏輯的目的。如果一個動效在我們的設(shè)計里面遵循我們設(shè)定的邏輯目的，那么它就是一個有效的功能動效，它存在在我們的設(shè)計中便是合理的。但是，如果它不與邏輯目標(biāo)相符，那么它可能就是多余的，需要重新慎重考慮這個動效存在的意義。

在過去的一年左右的時間里，做過各種各樣的項目，我收集并整理了一系列九個邏輯目的。今天幫我驗證功能動效。我已經(jīng)意識到，通過查看一個被很好定義的動效，我可以很容易的把它們放入到這個系列點一個或者更多的組。

也可以這樣思考：當(dāng)一個動效不符合一個功能性的目的，那么這個動效多存在可能會讓用戶覺得困惑或者惱怒。下面是我目前收集的這一系列的動效。我希望你會在你的設(shè)計中對你有所幫助。

導(dǎo)向

導(dǎo)向會闡明結(jié)構(gòu)。在這組中，收集的是一些扮演導(dǎo)航角色的動效，它是網(wǎng)頁信息結(jié)構(gòu)的反映。這種動效是想要吸引用戶對導(dǎo)向的注意，幫助用戶理解頁面布局剛果發(fā)生的變化：什么導(dǎo)致了這個變化，下次想要使用的時候怎么再次打開。

一個典型的例子是：一個按鈕，可以切換隱藏內(nèi)容（如個人資料等）。當(dāng)你點擊它是，會出現(xiàn)一個隱藏的面板，當(dāng)你合上面板，它縮小回操作按鈕。

第一次接觸的時候，用戶可能對馬上要發(fā)生的事情（做了動作之后的回饋）猜的不那么準(zhǔn)。隱藏面板尺寸不斷變大的載入動效可以幫助用戶更好的知道發(fā)生了什么，而不是覺得自己離開了頁面或者內(nèi)容突然消失了。這樣用戶就產(chǎn)生一種自在的掌控感。收回面的的動效可以幫助用戶關(guān)聯(lián)打開對應(yīng)面板的按鈕或者圖標(biāo)，這樣他們就會知道下一次從哪里打開這個面板。

邏輯目的：避免突然間的變化，讓用戶知道自己在哪。

例如：下列兩個動圖：

相同的位置，新的功能

一個眾所周知的易用性準(zhǔn)則：保持設(shè)計和站點內(nèi)容的一致性。一個具有一致性的站點通常是可預(yù)見性的，因此，也是可以學(xué)習(xí)的。此規(guī)則也適用于按鈕的操作。

在某些情況下，我們必須要設(shè)計一個在一定條件下功能發(fā)生一定變化的按鈕。我們這樣做通常是因為空間受限，如手機等。因此，用戶已經(jīng)知道一個按鈕的功能情況下，他還得學(xué)習(xí)另一個新功能。

“保存”和“編輯”按鈕是功能轉(zhuǎn)化按鈕的最常見的例子。但是這個又是最簡單的，因為這兩項操作是互斥的，他們具有相同的情景（context）。在其他的情況中，當(dāng)兩個功能之間不具備明顯的聯(lián)系，可用性的挑戰(zhàn)就凸顯出來了。功能動效這個時候就能發(fā)揮很好的作用。

邏輯目的：強調(diào)動作按鈕的功能變化。

例如：下列兩個動圖：

放大縮小

第三組的放大縮小看起來和第一組的導(dǎo)向有些相似。在這些動效里面，用戶在列表里選擇一個條目，然后就變成了這個條目的內(nèi)容或細節(jié)（取代了列表視圖），并且能夠返回之前的條目列表。

我們經(jīng)常在圖像庫、卡片和條目選擇中見到這樣的動效。用戶選擇了一個條目，條目馬上響應(yīng)用戶的選擇，在屏幕上顯示對應(yīng)的細節(jié)內(nèi)容。

這里的困難是必須讓用戶繼續(xù)感到掌控感，并且還在原來的流程中。功能動效在這時候往往是必不可少的。

在研究這個組中的功能動效時，我注意到一種共同的模式，當(dāng)下面條件被準(zhǔn)確的實施時，會增強動效的功效：

1. 初始狀態(tài)時條目的列表。
2. 每個項目被指定一個單獨的視覺提示，例如一個主色調(diào)、一個符號、一個加粗標(biāo)題或者是預(yù)覽圖像。
3. 當(dāng)用戶做出了一個選擇，一個新的頁面出現(xiàn)，所選擇的條目的視覺提示的要素被突出出來。例如，整個頁面的顏色可能延續(xù)了之前所選條目的主色調(diào)；或者，之前頁面的符號被擴大并且定位到頁面的標(biāo)題；或一個條目的名字會變的更大，出現(xiàn)在頁面的標(biāo)題。
4. 一個較明顯的關(guān)閉動作按鈕出現(xiàn)在新的頁面，如“取消”，“關(guān)閉”，“返回”或“x”。

邏輯目的：把條目與詳情頁關(guān)聯(lián)。

例如：下列兩個動圖：

視覺提示

視覺提示可以幫助用戶更好的知道怎么去操作產(chǎn)品的界面。尤其是設(shè)計包含非常規(guī)對象或者單一的導(dǎo)航形式時，顯得尤為重要。

這種功能動效是很容易被察覺的。當(dāng)我們打開了一個頁面，突然觸發(fā)一個快速的一次性動效，來演示如何操作產(chǎn)品中的功能。

邏輯目的：可以展示非常規(guī)功能或者隱藏的事件。

突出

這種動效可以吸引用戶在內(nèi)容太多的環(huán)境下的注意力。

設(shè)計師通常是避免嘈雜的布局和太多的內(nèi)容的，當(dāng)內(nèi)容太多時，屏幕中的各種顏色和內(nèi)容均試圖吸引用戶的注意。

一個解決的方式就是從界面上去掉些內(nèi)容，但是這個方式在有的時候并不是那么給力。試圖想一下一個新聞網(wǎng)站的負責(zé)人想要移除一些新聞和圖片。

另一個角度想一下。動效是可以自然而然的得到頁面上的視覺焦點的。無論是文本內(nèi)容還是靜止的圖片，都是無法與動效比擬的。我們可以利用功能動效的這一優(yōu)點。記住，通過添加動效獲取最高視覺焦點是對嘈雜界面的一個緩坡。

在下面動效的例子當(dāng)中，我們可以看到，在嘈雜的網(wǎng)頁中把一個物品加入到購物車是不明顯的。所以，這時候就需要動效。

邏輯目的：抓住用戶注意力，超越嘈雜的界面。

例如下面一個動圖。

未完待續(xù)

 

翻譯自：Functional Animation In UX Design

譯者：那啥那小啥啥去化齋

譯文地址：http://www.jianshu.com/p/8b62ed0c949c#