本文是我在Smashing Magazine看到的一篇關(guān)于如何在移動應(yīng)用設(shè)計中運用微動效的譯文。初次翻譯文章，很多詞句用的可能不太妥當(dāng)，在這里給大家作揖了!knock knock……

　　下面進(jìn)入譯文。

　　一個優(yōu)秀的UX設(shè)計師可以輕松地解釋每一個動作邏輯背后的設(shè)計概念，包括信息框架，頁面內(nèi)容的繼承，每一個點擊動作對于頁面跳轉(zhuǎn)的影響等。

　　不久的將來，動效將被廣泛的引入到原型的概念設(shè)計當(dāng)中，然而隨之帶來的是設(shè)計方案的確定與分析變得越來越復(fù)雜。影響這些決定的原因當(dāng)中，諸如“這樣看起來很炫”，“這樣看酷”等等，將會讓動效設(shè)計失去了它本來的目的。接下來，我們將試著站在用戶體驗的角度來定義動效設(shè)計，以及解釋引入動效設(shè)計的目的。

什么是功能性的動效?

　　功能性的動效就是被我們引入到交互設(shè)計當(dāng)中的微動效(motion)，它通常是很細(xì)微的動效，來實現(xiàn)一些界面交互當(dāng)中的一些功能。

　　不同于迪斯尼級別或者是視頻游戲里的動畫效果，功能性的動效更加的清爽、具有邏輯目的性。功能性動效需要在遵守設(shè)計規(guī)范的基礎(chǔ)上幫助我們實現(xiàn)我們的交互方案。功能性動效已經(jīng)是我們交互設(shè)計中的另一個有效地工具。

　　在交互設(shè)計中，如果一個功能性動效能夠在遵守邏輯性目的的基礎(chǔ)上實現(xiàn)了交互效果，它才可以被看做是一個有效的動效設(shè)計，否則即使它實現(xiàn)了交互效果，也不是有效的。在過去的項目積累當(dāng)中，我總結(jié)了9條邏輯目的性，通過解釋它們的特性，讓我們更好地理解功能性動效。

引導(dǎo)性(Orientation)

　　有目的性的啟發(fā)用戶。此類動效往往出現(xiàn)在菜單中，在網(wǎng)頁的內(nèi)容框架中幫助吸引用戶的注意力。使用此類動效的目的除了吸引用戶的注意力之外，還有引導(dǎo)、啟發(fā)用戶理解界面布局剛剛所發(fā)生的改變，它們往往用來承接、過度界面的變化。

　　一個經(jīng)典的例子就是觸發(fā)隱藏內(nèi)容的按鈕，當(dāng)用戶點擊這個按鈕，隱藏的內(nèi)容面板出現(xiàn)，當(dāng)你關(guān)閉這個內(nèi)容面板后，它縮回隱藏到按鈕后方。當(dāng)用戶第一次操作的時候，TA并不能夠預(yù)測到會有這樣的交互，當(dāng)TA點擊按鈕后，隱藏的內(nèi)容面板逐漸變大出現(xiàn)的動效引導(dǎo)了用戶的注意力，并避免讓用戶誤以為TA已經(jīng)離開了當(dāng)前頁面，或者誤以為主頁的內(nèi)容忽然消失了(其實是被出現(xiàn)的內(nèi)容遮擋住了)。關(guān)閉內(nèi)容面板的動效幫助用戶聯(lián)想到小時的內(nèi)容和按鈕的關(guān)系，因此下次他們就會記得相應(yīng)的操作所帶來的效果。

　　邏輯目的：避免突然的變化導(dǎo)致的茫然失措，引導(dǎo)用戶聯(lián)系動作前后的關(guān)系。

　　相同的位置，不同的動作(Same Location, New Action)

　　一條眾所周知的可用性規(guī)則：設(shè)計和網(wǎng)頁的內(nèi)容應(yīng)該具有連續(xù)性。一個具有連續(xù)性的網(wǎng)頁是可以根據(jù)用戶的經(jīng)驗、設(shè)計的風(fēng)格來感知的，是可以學(xué)習(xí)的。因此，這條可用性規(guī)則應(yīng)該被用在操作按鈕的設(shè)計，以及其他的控件設(shè)計當(dāng)中。

　　在某種場景中，我們被迫將一個操作按鈕設(shè)計成可以根據(jù)場景的不同而具有不同功能的效果。我們經(jīng)常在極其有限的設(shè)計場景中看到類似的案例。因此，用戶需要學(xué)習(xí)/熟悉同一個操作按鈕在不同的場景下代表的不同功能。

　　“保存”和“編輯”應(yīng)該是最具代表性的例子了。但這只是一個簡單地案例，因為他們代表著完全不同的動作，很少會讓用戶混淆誤解。當(dāng)兩個操作無法清楚的區(qū)分對比時，用戶就會容易困惑，這就會帶來體驗上的痛點。在這種情況下，功能性的動效可以解決這個問題。

　　邏輯目的：幫助操作按鈕突出功能的變化。

放大(Zoom In)

　　這條原則與上文的引導(dǎo)性原則相似。在這類動效中，用戶在列表中選擇一條內(nèi)容，然后點擊放大(跳轉(zhuǎn))到內(nèi)容細(xì)節(jié)的頁面(頁面跳轉(zhuǎn))，同時又能夠回到列表主頁中。這類動效經(jīng)常出現(xiàn)在圖片庫、卡片或者商品的選擇頁面中。用戶在其中選擇一條內(nèi)容，然后頁面理解跳轉(zhuǎn)到所選的內(nèi)容主頁面。這類頁面交互的難點在于要讓用戶了解頁面跳轉(zhuǎn)到了自己想要的頁面。功能性動效在這里是必須的。

　　為了提高用戶體驗，以下幾點需要注意：

　　1.動效的起點應(yīng)該是列表的初始狀態(tài)

　　2.動效中牽扯到的元素都應(yīng)該有一個固定的視覺狀態(tài)，例如有一個主色調(diào)、一個圖標(biāo)、一個加粗的標(biāo)題或者一個縮略圖

　　3.當(dāng)用戶選擇了一個內(nèi)容，在所跳轉(zhuǎn)的內(nèi)容主頁中，動效中牽扯到的元素將會移動到顯著、重要的位置。舉個栗子，內(nèi)容主頁的顏色跟內(nèi)容的主色調(diào)一致;內(nèi)容中的圖標(biāo)被拉伸并且移動到頁面的標(biāo)題處;內(nèi)容的名稱變大并且出現(xiàn)在頁面標(biāo)題處。

　　4.操作按鈕出現(xiàn)在內(nèi)容主頁中，比如“取消”，“關(guān)閉”，“返回”或者“X”

　　邏輯目的：關(guān)聯(lián)縮略內(nèi)容和主頁內(nèi)容。

視覺暗示(Visual Hint)

　　視覺暗示引導(dǎo)用戶更好的理解怎樣與產(chǎn)品的界面交互。視覺暗示經(jīng)常被用在包含不規(guī)則元素或者固定導(dǎo)航的設(shè)計中。當(dāng)用戶打開一個新的頁面時，一個隨即被觸發(fā)的單次播放動畫很容易吸引用戶注意到某個設(shè)計元素的功能特性，這就是視覺暗示的作用。

　　邏輯目的：暗示用戶不規(guī)則元素的功能或隱藏的功能。

高光標(biāo)注(Highlight)

　　高光標(biāo)注幫助用戶在復(fù)雜混亂的排版中注意到重點內(nèi)容。設(shè)計師在設(shè)計過程中經(jīng)常會盡力避免復(fù)雜混亂的排版布局，這樣做的結(jié)果是頁面往往會整齊的被分割成幾塊，并有規(guī)則的填充文本內(nèi)容和視覺元素。這些被整齊分割的版塊會使用戶迷失在頁面中，找不到重點。

　　一個避免混亂的方法是去除雜亂的內(nèi)容。但這在實際操作中很難實現(xiàn)，現(xiàn)實的例子就是像新浪，或者淘寶這樣的平臺類網(wǎng)站app中，主頁中的任何一條內(nèi)容都是很難去除的，這往往牽扯很多市場因素、業(yè)務(wù)因素等等。

　　微動效，在這種情況下將起到非常顯著的作用。相比動效，無論是文本還是靜態(tài)圖都無法更加顯著地吸引用戶的視線。但需要注意的是，引入動效將會使原本已經(jīng)混亂復(fù)雜的頁面布局更加撲朔迷離，所以是否增加動效，增加多少動效需要對整個頁面的復(fù)雜度進(jìn)行權(quán)衡。

　　邏輯目的：吸引用戶的注意力，在復(fù)雜的界面布局中突出重點。

模擬(Simulation)

　　有時在設(shè)計研究和用戶訪談中我們發(fā)現(xiàn)，用戶的某些需求只有在模擬現(xiàn)實情景中才會被滿足，對于這種特殊的情況，我們需要設(shè)計定制的功能性動效。舉個例子，足球比賽的數(shù)據(jù)分析，標(biāo)準(zhǔn)化的圖表、數(shù)字對比不會幫助用戶對與比賽數(shù)據(jù)的理解。再舉個栗子，通過地圖展示不同時段的氣候溫度，用戶可以很容易追蹤到明天巴黎與倫敦的天氣情況。

　　邏輯目的：模擬現(xiàn)實場景可以幫助用戶理解捕捉特定的信息。

視覺反饋(Visual Feedback)

　　視覺反饋在用戶界面設(shè)計中非常重要。按鈕，操作控件，以及其他交互元素都需要反映用戶的操作，它們能夠引導(dǎo)用戶與頁面元素的交互。

　　功能性動效需要設(shè)計的非常細(xì)致入微(微動效)，而且需要在用戶操作后具有反饋動作。點擊按鈕后的狀態(tài)反饋在界面設(shè)計中是必須的，它將提示用戶點擊操作已完成，頁面將會展示后續(xù)的反應(yīng)。

　　邏輯目的：反映用戶的操作。

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

　　好的交互意味著：用戶需要在任何情境下都要懂得頁面的內(nèi)容，了解何時何地進(jìn)行何種操作將實現(xiàn)何種功能。功能性動效能夠?qū)ο到y(tǒng)的狀態(tài)(頁面狀態(tài))進(jìn)行實時的監(jiān)控，能夠使用戶在第一時間了解某個動作已經(jīng)開始，持續(xù)中，以及何時完畢。在HTML網(wǎng)頁中，第一個實現(xiàn)這種功能性動效的是GIF，并且在目前仍被用來展示動作的狀態(tài)。

　　高效的功能性動效通常會遵守以下規(guī)律：

　　1.清楚的反饋指示操作的開始狀態(tài)

　　2.反饋給用戶系統(tǒng)持續(xù)中的狀態(tài)

　　3.評估動作的進(jìn)度狀態(tài)

　　4.清楚的反饋指示進(jìn)度已完成狀態(tài)

　　舉個例子，“下拉刷新”動作，當(dāng)用戶下拉后，頁面會出現(xiàn)不停旋轉(zhuǎn)的圓圈來提示用戶頁面正在刷新，當(dāng)刷新完畢后，圓圈消失，內(nèi)容更新。試想如果沒有圓圈旋轉(zhuǎn)，用戶可能會懷疑頁面并沒有刷新，這可能導(dǎo)致用戶在此下拉頁面。

　　邏輯目的：在一系列操作中展示不同的狀態(tài)變化。

營銷工具(Marketing Tool)

　　這類動效相較上文的動效來說具有更弱的邏輯性，但是卻更加的活潑生動!

　　當(dāng)我們需要指導(dǎo)用戶怎樣操作產(chǎn)品時，當(dāng)我們向用戶推薦某個功能點時，當(dāng)我們向用戶推銷平臺里的某個產(chǎn)品時，營銷工具類的動效就能夠幫助到我們。這類動效或許沒有以用戶為核心來設(shè)計，但它絕對能夠完成營銷的目的。

名稱欄目：交互譯文-如何合理的在移動應(yīng)用中使用動效
URL地址：http://www.rwnh.cn/news/161589.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、靜態(tài)網(wǎng)站、云服務(wù)器、網(wǎng)頁設(shè)計公司、虛擬主機、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)