交互譯文-如何合理的在移動(dòng)應(yīng)用中使用動(dòng)效

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

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

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

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

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

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

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

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

引導(dǎo)性(Orientation)

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

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

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

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

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

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

　　“保存”和“編輯”應(yīng)該是最具代表性的例子了。但這只是一個(gè)簡單地案例，因?yàn)樗麄兇碇耆煌膭?dòng)作，很少會(huì)讓用戶混淆誤解。當(dāng)兩個(gè)操作無法清楚的區(qū)分對(duì)比時(shí)，用戶就會(huì)容易困惑，這就會(huì)帶來體驗(yàn)上的痛點(diǎn)。在這種情況下，功能性的動(dòng)效可以解決這個(gè)問題。

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

放大(Zoom In)

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

　　為了提高用戶體驗(yàn)，以下幾點(diǎn)需要注意：

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

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

　　3.當(dāng)用戶選擇了一個(gè)內(nèi)容，在所跳轉(zhuǎn)的內(nèi)容主頁中，動(dòng)效中牽扯到的元素將會(huì)移動(dòng)到顯著、重要的位置。舉個(gè)栗子，內(nèi)容主頁的顏色跟內(nèi)容的主色調(diào)一致;內(nèi)容中的圖標(biāo)被拉伸并且移動(dòng)到頁面的標(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è)計(jì)中。當(dāng)用戶打開一個(gè)新的頁面時(shí)，一個(gè)隨即被觸發(fā)的單次播放動(dòng)畫很容易吸引用戶注意到某個(gè)設(shè)計(jì)元素的功能特性，這就是視覺暗示的作用。

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

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

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

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

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

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

模擬(Simulation)

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

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

視覺反饋(Visual Feedback)

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

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

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

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

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

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

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

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

　　3.評(píng)估動(dòng)作的進(jìn)度狀態(tài)

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

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

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

營銷工具(Marketing Tool)

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

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

網(wǎng)站名稱：交互譯文-如何合理的在移動(dòng)應(yīng)用中使用動(dòng)效
文章URL：http://www.muchs.cn/news39/161589.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站營銷、微信小程序、小程序開發(fā)、靜態(tài)網(wǎng)站

廣告

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