交互設(shè)計(jì)中的功能動(dòng)效

2015-6-12    藍(lán)藍(lán)設(shè)計(jì)的小編

藍(lán)藍(lán)設(shè)計(jì)m.820esy.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


每一個(gè)扁平化界面設(shè)計(jì),都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源:http://www.woshipm.com/ucd/161424.html

譯者紀(jì):本片文中包含大量的動(dòng)態(tài)頁(yè)面(原網(wǎng)站是視頻鏈接,本網(wǎng)站上傳視頻不能排序,故人工轉(zhuǎn)為動(dòng)圖),加載較緩慢,請(qǐng)各位多點(diǎn)耐心,么么噠

---

一個(gè)好的交互設(shè)計(jì)師可以很容易的解釋設(shè)計(jì)里面的決定背后的邏輯。這包含著信息架構(gòu),頁(yè)面內(nèi)容的層次結(jié)構(gòu),流程和所做的解釋。

遲早,動(dòng)效將會(huì)應(yīng)用到線框圖原型中,這個(gè)時(shí)候,再去對(duì)設(shè)計(jì)做決定或者是解釋?zhuān)瑢?huì)變的難一些。例如一些這樣的理由:太狂拽酷炫了……太潮了……太雞凍了……這將是設(shè)計(jì)失去其力度的領(lǐng)域(Reasons such as “It will be cool!” or “It’s trendy” or ”exciting” are exactly the areas where a design starts to lose its strength.)在我們的設(shè)計(jì)中,動(dòng)效理應(yīng)占到更多的比重。我們應(yīng)該去定義動(dòng)效,并且闡述他們的目的——像我們闡述一個(gè)設(shè)計(jì)中其他的元素一樣。

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

功能動(dòng)效是微妙的動(dòng)效,是我們嵌入在用戶界面設(shè)計(jì)中的流程的一部分

不像是迪斯尼出的動(dòng)效(動(dòng)畫(huà))或者是電腦游戲中的動(dòng)效,我們這里講的功能動(dòng)效擁有一個(gè)清晰的、有邏輯性目的。這個(gè)目的為是我們想要傳遞的設(shè)計(jì)理念服務(wù)的。功能動(dòng)效是我們UX(交互設(shè)計(jì))工具庫(kù)中的又一個(gè)工具。

在一個(gè)完美的世界里,我們應(yīng)該可以驗(yàn)證功能動(dòng)效與清晰設(shè)定邏輯的目的。如果一個(gè)動(dòng)效在我們的設(shè)計(jì)里面遵循我們?cè)O(shè)定的邏輯目的,那么它就是一個(gè)有效的功能動(dòng)效,它存在在我們的設(shè)計(jì)中便是合理的。但是,如果它不與邏輯目標(biāo)相符,那么它可能就是多余的,需要重新慎重考慮這個(gè)動(dòng)效存在的意義。

在過(guò)去的一年左右的時(shí)間里,做過(guò)各種各樣的項(xiàng)目,我收集并整理了一系列九個(gè)邏輯目的。今天幫我驗(yàn)證功能動(dòng)效。我已經(jīng)意識(shí)到,通過(guò)查看一個(gè)被很好定義的動(dòng)效,我可以很容易的把它們放入到這個(gè)系列點(diǎn)一個(gè)或者更多的組。

也可以這樣思考:當(dāng)一個(gè)動(dòng)效不符合一個(gè)功能性的目的,那么這個(gè)動(dòng)效多存在可能會(huì)讓用戶覺(jué)得困惑或者惱怒。下面是我目前收集的這一系列的動(dòng)效。我希望你會(huì)在你的設(shè)計(jì)中對(duì)你有所幫助。

導(dǎo)向

導(dǎo)向會(huì)闡明結(jié)構(gòu)。在這組中,收集的是一些扮演導(dǎo)航角色的動(dòng)效,它是網(wǎng)頁(yè)信息結(jié)構(gòu)的反映。這種動(dòng)效是想要吸引用戶對(duì)導(dǎo)向的注意,幫助用戶理解頁(yè)面布局剛果發(fā)生的變化:什么導(dǎo)致了這個(gè)變化,下次想要使用的時(shí)候怎么再次打開(kāi)。

一個(gè)典型的例子是:一個(gè)按鈕,可以切換隱藏內(nèi)容(如個(gè)人資料等)。當(dāng)你點(diǎn)擊它是,會(huì)出現(xiàn)一個(gè)隱藏的面板,當(dāng)你合上面板,它縮小回操作按鈕。

第一次接觸的時(shí)候,用戶可能對(duì)馬上要發(fā)生的事情(做了動(dòng)作之后的回饋)猜的不那么準(zhǔn)。隱藏面板尺寸不斷變大的載入動(dòng)效可以幫助用戶更好的知道發(fā)生了什么,而不是覺(jué)得自己離開(kāi)了頁(yè)面或者內(nèi)容突然消失了。這樣用戶就產(chǎn)生一種自在的掌控感。收回面的的動(dòng)效可以幫助用戶關(guān)聯(lián)打開(kāi)對(duì)應(yīng)面板的按鈕或者圖標(biāo),這樣他們就會(huì)知道下一次從哪里打開(kāi)這個(gè)面板。

邏輯目的:避免突然間的變化,讓用戶知道自己在哪。

例如:下列兩個(gè)動(dòng)圖:

326269-02e2c75ab1dc70ce

326269-cd0e80accb3a1dfe

相同的位置,新的功能

一個(gè)眾所周知的易用性準(zhǔn)則:保持設(shè)計(jì)和站點(diǎn)內(nèi)容的一致性。一個(gè)具有一致性的站點(diǎn)通常是可預(yù)見(jiàn)性的,因此,也是可以學(xué)習(xí)的。此規(guī)則也適用于按鈕的操作。

在某些情況下,我們必須要設(shè)計(jì)一個(gè)在一定條件下功能發(fā)生一定變化的按鈕。我們這樣做通常是因?yàn)榭臻g受限,如手機(jī)等。因此,用戶已經(jīng)知道一個(gè)按鈕的功能情況下,他還得學(xué)習(xí)另一個(gè)新功能。

“保存”和“編輯”按鈕是功能轉(zhuǎn)化按鈕的最常見(jiàn)的例子。但是這個(gè)又是最簡(jiǎn)單的,因?yàn)檫@兩項(xiàng)操作是互斥的,他們具有相同的情景(context)。在其他的情況中,當(dāng)兩個(gè)功能之間不具備明顯的聯(lián)系,可用性的挑戰(zhàn)就凸顯出來(lái)了。功能動(dòng)效這個(gè)時(shí)候就能發(fā)揮很好的作用。

邏輯目的:強(qiáng)調(diào)動(dòng)作按鈕的功能變化。

例如:下列兩個(gè)動(dòng)圖:

326269-2b68efc424274e25

326269-24dce45fdc6bed35

放大縮小

第三組的放大縮小看起來(lái)和第一組的導(dǎo)向有些相似。在這些動(dòng)效里面,用戶在列表里選擇一個(gè)條目,然后就變成了這個(gè)條目的內(nèi)容或細(xì)節(jié)(取代了列表視圖),并且能夠返回之前的條目列表。

我們經(jīng)常在圖像庫(kù)、卡片和條目選擇中見(jiàn)到這樣的動(dòng)效。用戶選擇了一個(gè)條目,條目馬上響應(yīng)用戶的選擇,在屏幕上顯示對(duì)應(yīng)的細(xì)節(jié)內(nèi)容。

這里的困難是必須讓用戶繼續(xù)感到掌控感,并且還在原來(lái)的流程中。功能動(dòng)效在這時(shí)候往往是必不可少的。

在研究這個(gè)組中的功能動(dòng)效時(shí),我注意到一種共同的模式,當(dāng)下面條件被準(zhǔn)確的實(shí)施時(shí),會(huì)增強(qiáng)動(dòng)效的功效:

  1. 初始狀態(tài)時(shí)條目的列表。
  2. 每個(gè)項(xiàng)目被指定一個(gè)單獨(dú)的視覺(jué)提示,例如一個(gè)主色調(diào)、一個(gè)符號(hào)、一個(gè)加粗標(biāo)題或者是預(yù)覽圖像。
  3. 當(dāng)用戶做出了一個(gè)選擇,一個(gè)新的頁(yè)面出現(xiàn),所選擇的條目的視覺(jué)提示的要素被突出出來(lái)。例如,整個(gè)頁(yè)面的顏色可能延續(xù)了之前所選條目的主色調(diào);或者,之前頁(yè)面的符號(hào)被擴(kuò)大并且定位到頁(yè)面的標(biāo)題;或一個(gè)條目的名字會(huì)變的更大,出現(xiàn)在頁(yè)面的標(biāo)題。
  4. 一個(gè)較明顯的關(guān)閉動(dòng)作按鈕出現(xiàn)在新的頁(yè)面,如“取消”,“關(guān)閉”,“返回”或“x”。

邏輯目的:把條目與詳情頁(yè)關(guān)聯(lián)。

例如:下列兩個(gè)動(dòng)圖:

326269-1073e3f5da70d1f5

326269-5b446c52da1bd7d4

視覺(jué)提示

視覺(jué)提示可以幫助用戶更好的知道怎么去操作產(chǎn)品的界面。尤其是設(shè)計(jì)包含非常規(guī)對(duì)象或者單一的導(dǎo)航形式時(shí),顯得尤為重要。

這種功能動(dòng)效是很容易被察覺(jué)的。當(dāng)我們打開(kāi)了一個(gè)頁(yè)面,突然觸發(fā)一個(gè)快速的一次性動(dòng)效,來(lái)演示如何操作產(chǎn)品中的功能。

邏輯目的:可以展示非常規(guī)功能或者隱藏的事件。

326269-189612f059ddfc70

326269-95e9a732a8bdd7d5

326269-1d3ea6489d3bf8ba

突出

這種動(dòng)效可以吸引用戶在內(nèi)容太多的環(huán)境下的注意力。

設(shè)計(jì)師通常是避免嘈雜的布局和太多的內(nèi)容的,當(dāng)內(nèi)容太多時(shí),屏幕中的各種顏色和內(nèi)容均試圖吸引用戶的注意。

一個(gè)解決的方式就是從界面上去掉些內(nèi)容,但是這個(gè)方式在有的時(shí)候并不是那么給力。試圖想一下一個(gè)新聞網(wǎng)站的負(fù)責(zé)人想要移除一些新聞和圖片。

另一個(gè)角度想一下。動(dòng)效是可以自然而然的得到頁(yè)面上的視覺(jué)焦點(diǎn)的。無(wú)論是文本內(nèi)容還是靜止的圖片,都是無(wú)法與動(dòng)效比擬的。我們可以利用功能動(dòng)效的這一優(yōu)點(diǎn)。記住,通過(guò)添加動(dòng)效獲取最高視覺(jué)焦點(diǎn)是對(duì)嘈雜界面的一個(gè)緩坡。

在下面動(dòng)效的例子當(dāng)中,我們可以看到,在嘈雜的網(wǎng)頁(yè)中把一個(gè)物品加入到購(gòu)物車(chē)是不明顯的。所以,這時(shí)候就需要?jiǎng)有А?

邏輯目的:抓住用戶注意力,超越嘈雜的界面。

例如下面一個(gè)動(dòng)圖。

326269-e571ffc5939a677f

未完待續(xù)

 

翻譯自:Functional Animation In UX Design

譯者:那啥那小啥啥去化齋

譯文地址:http://www.jianshu.com/p/8b62ed0c949c#


 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔