交互譯文-如何合理的在移動應用中使用動效

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

　　下面進入譯文。

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

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

什么是功能性的動效?

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

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

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

引導性(Orientation)

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

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

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

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

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

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

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

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

放大(Zoom In)

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

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

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

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

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

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

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

視覺暗示(Visual Hint)

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

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

高光標注(Highlight)

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

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

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

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

模擬(Simulation)

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

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

視覺反饋(Visual Feedback)

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

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

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

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

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

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

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

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

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

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

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

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

營銷工具(Marketing Tool)

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

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

名稱欄目：交互譯文-如何合理的在移動應用中使用動效
URL地址：http://bm7419.com/news/161589.html

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

廣告

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