亚洲国产精品久久精品成人_国产步兵社区视频在线观看_国产不卡免费视频_午夜私人影院免费体验区

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

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

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

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

　　什么是功能性的動效?

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

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

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

　　引導(dǎo)性(Orientation)

　　有目的性的啟發(fā)用戶。此類動效往往出現(xiàn)在菜單中，在網(wǎng)頁的內(nèi)容框架中幫助吸引用戶的注意力。使用此類動效的目的除了吸引用戶的注意力之外，還有引導(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ù)測到會有這樣的交互，當(dāng)TA點(diǎn)擊按鈕后，隱藏的內(nèi)容面板逐漸變大出現(xiàn)的動效引導(dǎo)了用戶的注意力，并避免讓用戶誤以為TA已經(jīng)離開了當(dāng)前頁面，或者誤以為主頁的內(nèi)容忽然消失了(其實(shí)是被出現(xiàn)的內(nèi)容遮擋住了)。關(guān)閉內(nèi)容面板的動效幫助用戶聯(lián)想到小時(shí)的內(nèi)容和按鈕的關(guān)系，因此下次他們就會記得相應(yīng)的操作所帶來的效果。

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

　　相同的位置，不同的動作(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)兩個(gè)操作無法清楚的區(qū)分對比時(shí)，用戶就會容易困惑，這就會帶來體驗(yàn)上的痛點(diǎn)。在這種情況下，功能性的動效可以解決這個(gè)問題。

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

　　放大(Zoom In)

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

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

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

　　2.動效中牽扯到的元素都應(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)容主頁中，動效中牽扯到的元素將會移動到顯著、重要的位置。舉個(gè)栗子，內(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è)計(jì)中。當(dāng)用戶打開一個(gè)新的頁面時(shí)，一個(gè)隨即被觸發(fā)的單次播放動畫很容易吸引用戶注意到某個(gè)設(shè)計(jì)元素的功能特性，這就是視覺暗示的作用。

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

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

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

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

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

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

　　模擬(Simulation)

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

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

　　視覺反饋(Visual Feedback)

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

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

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

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

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

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

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

　　營銷工具(Marketing Tool)

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

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

關(guān)注我們：在查找公眾號中搜索：zomsky1688，或者掃描下方二維碼快速關(guān)注。

關(guān)鍵詞：廣州網(wǎng)站建設(shè),廣州網(wǎng)站設(shè)計(jì)公司,移動網(wǎng)站建設(shè)