[[149375]]

一個(gè)好的 UX 設(shè)計(jì)師可以輕易地解釋任何設(shè)計(jì)決策背后的邏輯，包括了信息架構(gòu)、內(nèi)容層級(jí)、流程等等。

終有一天，動(dòng)效會(huì)被引入到產(chǎn)品概念原型里面，到那個(gè)時(shí)候，設(shè)計(jì)師們會(huì)更難解釋原型中的設(shè)計(jì)想法。“這動(dòng)效很 cool 啊~”、“很接地氣~”、“效果驚呆了”將會(huì)是他們說(shuō)出的唯一的評(píng)價(jià)

什么是功能動(dòng)效

微妙的功能動(dòng)效作為設(shè)計(jì)流程的一部分，深藏于日常 UI 設(shè)計(jì)之中。

功能動(dòng)效有別于 Disney Studio 、或者專(zhuān)門(mén)為電腦游戲設(shè)計(jì)的動(dòng)效。它帶有明確的、符合邏輯的用途，目的是為了支持我們所推行的設(shè)計(jì)解決方案。

在理想狀態(tài)下，我們能通過(guò)一套完善的使用原則來(lái)驗(yàn)證這些功能動(dòng)效的可行性。在過(guò)去的幾年里，我接觸過(guò)各種各樣的項(xiàng)目。在這個(gè)過(guò)程中，我總結(jié)了 9 個(gè)類(lèi)型的動(dòng)效原則，若我們?cè)O(shè)計(jì)當(dāng)中的某個(gè)動(dòng)效遵循這些原則之一（或多個(gè)），那它就是一個(gè)有效的功能動(dòng)效，證明可以被應(yīng)用于項(xiàng)目當(dāng)中。

如果功能動(dòng)效不符合這些原則，那它可能就是多余的，使用的時(shí)候需要三思而后行，這些動(dòng)效通常會(huì)讓人感到討厭和笨拙。

下面是目前為止我所收集到的所有用途。希望對(duì)你們的動(dòng)效設(shè)計(jì)與驗(yàn)證有所幫助。

定位 Orientation

方向闡明結(jié)構(gòu)。在這類(lèi)型的原則里面，動(dòng)效作用于界面之間的導(dǎo)航，展示網(wǎng)頁(yè)信息架構(gòu)的走向。這類(lèi)型動(dòng)效背后的邏輯，就是為了幫助用戶(hù)感知自己在頁(yè)面流程中的位置，理解頁(yè)面的變化，是什么觸發(fā)這些變化，以及有需要的話(huà)如何再次觸發(fā)它們。

一個(gè)典型例子就是通過(guò)按鈕觸發(fā)「展示/隱藏」 內(nèi)容，當(dāng)你點(diǎn)擊按鈕后會(huì)展示一個(gè)被隱藏的面板，當(dāng)你關(guān)閉面板后，面板會(huì)“縮”回操作按鈕里面。

用戶(hù)在***次使用的時(shí)候無(wú)法預(yù)知此交互將會(huì)帶來(lái)啥結(jié)果，隱藏面板的不斷增大的展開(kāi)動(dòng)效會(huì)幫助用戶(hù)保持方向感，讓他不會(huì)感到已經(jīng)跳出了當(dāng)前頁(yè)面，或者內(nèi)容突然間消失了。關(guān)閉動(dòng)效讓用戶(hù)將不斷“收縮”的面板與操作按鈕聯(lián)系起來(lái)，這樣一來(lái)，他們下次就會(huì)記得如何打開(kāi)這個(gè)面板了。

用法：避免突兀的過(guò)度轉(zhuǎn)場(chǎng)，幫助用戶(hù)定位。

Apple Mac OSX 的窗口動(dòng)效

Facebook Paper 的菜單動(dòng)效

操作切換 Same Location, New Action

有一條廣為人知的可用性原則，就是讓產(chǎn)品保持一致性（譯者注：設(shè)計(jì)與功能的一致性）。保持良好一致性的網(wǎng)站（產(chǎn)品）可讓減低用戶(hù)的學(xué)習(xí)成本，讓內(nèi)容與交互有良好的可預(yù)見(jiàn)性。除此之外，這條原則還適用于操作按鈕。

在某些案例里面，當(dāng)按鈕被觸發(fā)后，我們被迫在特定條件下改變這個(gè)貴按鈕觸發(fā)后的功能，通常出現(xiàn)在那些總體空間受限的設(shè)計(jì)當(dāng)中。因此，已經(jīng)理解了按鈕初始功能的用戶(hù)，可能需要學(xué)習(xí)一下新功能了。

「保存」與「編輯」按鈕算是最常見(jiàn)的可切換按鈕了。這個(gè)算是最簡(jiǎn)單的案例了，因?yàn)橹灰粹o的定義是相反的（譯者注：例如「添加」點(diǎn)擊后變成「移除」），就等于他們?cè)谕粓?chǎng)景下。在其他情況下，當(dāng)兩個(gè)操作沒(méi)有直接表面關(guān)聯(lián)時(shí)，才算是可用性的難題，這時(shí)候，你需要功能動(dòng)效。

用法：強(qiáng)調(diào)操作按鈕的功能切換。

Google material design 的 Button靜音開(kāi)關(guān)

放大 Zoom

第三種類(lèi)型與「定位」類(lèi)型相似。在這類(lèi)動(dòng)效里，用戶(hù)在列表視圖里面選中某個(gè)項(xiàng)來(lái)放大進(jìn)入詳情視圖（覆蓋原有列表視圖），并且可以返回列表視圖。

通常應(yīng)用于相冊(cè)、卡片和項(xiàng)目選擇器。用戶(hù)會(huì)選擇一個(gè)選項(xiàng)然后馬上看到與之相應(yīng)的詳情視圖。

要使用這類(lèi)動(dòng)效的難處在于，需要確保用戶(hù)感覺(jué)自己仍然能 hold 住局面并且不脫離當(dāng)前場(chǎng)景。在這個(gè)情況下，功能動(dòng)效是必不可少的。

體驗(yàn)過(guò)大量使用這類(lèi)型的功能動(dòng)效后，我總結(jié)出一些通用規(guī)則，若嚴(yán)格執(zhí)行則功效顯著：

• 動(dòng)效的初始狀態(tài)就是原有列表視圖；

• 每個(gè)選項(xiàng)都被指定一個(gè)視覺(jué)線(xiàn)索，這個(gè)線(xiàn)索可以是這個(gè)應(yīng)用的主題色，也可以是某種符號(hào)、加粗的標(biāo)題或者縮略圖；

• 當(dāng)用戶(hù)作出選擇后，將會(huì)新建一個(gè)頁(yè)面，然后視覺(jué)線(xiàn)索會(huì)移動(dòng)到一個(gè)突出的新位置。例如，可以用選項(xiàng)的獨(dú)有顏色來(lái)填充整個(gè)頁(yè)面；選項(xiàng)的符號(hào)可以放大并且移動(dòng)到頁(yè)面標(biāo)題處；選項(xiàng)的名字可以放大并作為頁(yè)面標(biāo)題來(lái)展示；

• 一個(gè)顯眼的操作按鈕，用于退出這個(gè)新頁(yè)面，例如「取消」，「關(guān)閉」，「返回」或者「X」。

用法：將預(yù)覽視圖與細(xì)節(jié)視圖聯(lián)系起來(lái)。

視覺(jué)隱喻 Visual Hint

視覺(jué)隱喻幫助用戶(hù)更好地理解如何與產(chǎn)品界面交互，那些含有非主流組件或者特別導(dǎo)航系統(tǒng)的則更加需要視覺(jué)隱喻。

這類(lèi)型功能動(dòng)效很容易被發(fā)現(xiàn)，當(dāng)我們打開(kāi)一個(gè)頁(yè)面，一個(gè)一次性的動(dòng)效會(huì)立即被觸發(fā)，并演示某個(gè)功能如何使用。

用法：為不常用功能或者隱形操作提供暗示。

來(lái)源：Dejan Markovic

強(qiáng)調(diào) Highlight

這類(lèi)型的動(dòng)效幫助用戶(hù)在滿(mǎn)布繁雜元素的界面中做出有效操作。

設(shè)計(jì)師通常都會(huì)盡量避免設(shè)計(jì)出復(fù)雜的界面布局--滿(mǎn)屏盡是多媒體--不斷爭(zhēng)奪著用戶(hù)的眼球。

減少噪音的其中一個(gè)方法就是刪繁就簡(jiǎn)，然而有時(shí)候這是不可能的任務(wù)。你想想，要求一個(gè)新聞網(wǎng)站的老板移除新聞的文字內(nèi)容模塊和首頁(yè)的圖片欄目……

在 UI 界面當(dāng)中，「運(yùn)動(dòng)」有一個(gè)很重要的特質(zhì)，就是最容易吸引注意力，文字段落或者靜態(tài)圖片都無(wú)法與之媲美。我們可以利用這一點(diǎn)來(lái)設(shè)計(jì)動(dòng)效。然而請(qǐng)謹(jǐn)記，最容易吸引注意力同時(shí)也是一種「干擾」，濫用的話(huà)等同于在界面中增加噪音。

用法：在繁復(fù)的界面中吸引用戶(hù)的注意力。

www.Photojojo.com

#p#

模擬現(xiàn)實(shí) Simulation

有時(shí)候，通過(guò)數(shù)據(jù)分析與用戶(hù)訪(fǎng)談，我們發(fā)現(xiàn)用戶(hù)的某些需求只能通過(guò)定制特定的界面來(lái)滿(mǎn)足。

對(duì)于這些特殊用例，我們可以考慮設(shè)計(jì)一個(gè)自定義的功能動(dòng)效。常用的方法很難***實(shí)現(xiàn)某些獨(dú)特的案例。

用法：適用于那些難以表達(dá)含義的場(chǎng)景。

來(lái)源：Monterosa

視覺(jué)反饋 Visual Feedback

在 UI 設(shè)計(jì)當(dāng)中，視覺(jué)反饋非常重要，在真實(shí)生活中，按鈕、控制器和其他物件都會(huì)響應(yīng)用戶(hù)的交互操作，這就是用戶(hù)所期望的事物的運(yùn)作方式。

但請(qǐng)謹(jǐn)記，視覺(jué)反饋這類(lèi)型功能動(dòng)效應(yīng)該盡量“低調(diào)”，并且設(shè)計(jì)得易于理解。按鈕反饋被廣泛應(yīng)用于每個(gè) UI 界面，因此如果濫用沒(méi)必要的動(dòng)效會(huì)適得其反。

用法：響應(yīng)用戶(hù)的操作。

與此類(lèi)似的有tumblr

系統(tǒng)狀態(tài) System Status

這類(lèi)型完全就是關(guān)于“控制”的。對(duì)于用戶(hù)來(lái)說(shuō)，“控制”意味著在任何時(shí)候都可以感知和理解系統(tǒng)的當(dāng)前場(chǎng)景。

功能動(dòng)效實(shí)時(shí)監(jiān)測(cè)系統(tǒng)狀態(tài)，讓用戶(hù)快速感知操作的開(kāi)始、剩余時(shí)間與準(zhǔn)確的完成時(shí)間。也許***個(gè)滿(mǎn)足此需求的功能動(dòng)效就是 HTML 頁(yè)面的“轉(zhuǎn)菊花”GIF，目前還被廣泛使用于某些操作指示界面。

優(yōu)質(zhì)的系統(tǒng)狀態(tài)功能動(dòng)效通常都遵循以下模式：

• 在進(jìn)程開(kāi)始后展示清晰的反饋；

• 在進(jìn)程進(jìn)行中提供反饋；

• 估算進(jìn)程的完成度，并提供反饋；

• 在進(jìn)程結(jié)束后提供成功或失敗反饋。

有個(gè)很出名的動(dòng)效“下拉刷新”，就是屬于本類(lèi)型動(dòng)效，在移動(dòng)設(shè)備上，它常用于觸發(fā)內(nèi)容的刷新。在幾個(gè)不同類(lèi)型的 apps 中檢驗(yàn)一下，你會(huì)發(fā)現(xiàn)這些動(dòng)效都沒(méi)有完全遵循上述 4 個(gè)步驟，感覺(jué)怪怪的。例如，語(yǔ)意不明地抬升界面來(lái)結(jié)束進(jìn)程，會(huì)讓用戶(hù)再一次觸發(fā)下拉刷新。

用法：傳達(dá)出操作處理過(guò)程的可控性。

Yik Yak App的下拉刷新

營(yíng)銷(xiāo)手段 Marketing Tool

這類(lèi)型雖然只與市場(chǎng)營(yíng)銷(xiāo)有關(guān)，但已經(jīng)有很多有趣的動(dòng)效。之前的 8 個(gè)類(lèi)型看起來(lái)都與理性和邏輯掛鉤，但是這類(lèi)型只與感性有關(guān)。

假設(shè)我們需要定義一個(gè)產(chǎn)品的行為，突出獨(dú)有的功能，甚至捆綁品牌價(jià)值和風(fēng)格。

在這些場(chǎng)景劇本當(dāng)中，這些方法雖然未必是以用戶(hù)為中心來(lái)設(shè)計(jì)，但卻擁有明確的功能目標(biāo)————可以滿(mǎn)足公司的營(yíng)銷(xiāo)策略。

用法：幫助突出公司的品牌價(jià)值，或者產(chǎn)品的強(qiáng)項(xiàng)。

[[149383]]

來(lái)源：Creativedash

總結(jié)：在我們的網(wǎng)站或者和移動(dòng)產(chǎn)品添加動(dòng)效，可以為用戶(hù)帶來(lái)很多驚喜與愉悅，但請(qǐng)謹(jǐn)記——形式服從功能，任何毫無(wú)用途，不是為了滿(mǎn)足實(shí)際功能需求的，為了動(dòng)效而動(dòng)效，請(qǐng)勿濫用動(dòng)效。