2015-6-12 藍藍設計的小編
藍藍設計( 91whvog3.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
每一個扁平化界面設計,都是我們的心靈碰撞致力于最棒的 metro ui 設計
來源:http://www.woshipm.com/ucd/161424.html
譯者紀:本片文中包含大量的動態(tài)頁面(原網站是視頻鏈接,本網站上傳視頻不能排序,故人工轉為動圖),加載較緩慢,請各位多點耐心,么么噠
---
一個好的交互設計師可以很容易的解釋設計里面的決定背后的邏輯。這包含著信息架構,頁面內容的層次結構,流程和所做的解釋。
遲早,動效將會應用到線框圖原型中,這個時候,再去對設計做決定或者是解釋,將會變的難一些。例如一些這樣的理由:太狂拽酷炫了……太潮了……太雞凍了……這將是設計失去其力度的領域(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.)在我們的設計中,動效理應占到更多的比重。我們應該去定義動效,并且闡述他們的目的——像我們闡述一個設計中其他的元素一樣。
功能動效是微妙的動效,是我們嵌入在用戶界面設計中的流程的一部分
不像是迪斯尼出的動效(動畫)或者是電腦游戲中的動效,我們這里講的功能動效擁有一個清晰的、有邏輯性目的。這個目的為是我們想要傳遞的設計理念服務的。功能動效是我們UX(交互設計)工具庫中的又一個工具。
在一個完美的世界里,我們應該可以驗證功能動效與清晰設定邏輯的目的。如果一個動效在我們的設計里面遵循我們設定的邏輯目的,那么它就是一個有效的功能動效,它存在在我們的設計中便是合理的。但是,如果它不與邏輯目標相符,那么它可能就是多余的,需要重新慎重考慮這個動效存在的意義。
在過去的一年左右的時間里,做過各種各樣的項目,我收集并整理了一系列九個邏輯目的。今天幫我驗證功能動效。我已經意識到,通過查看一個被很好定義的動效,我可以很容易的把它們放入到這個系列點一個或者更多的組。
也可以這樣思考:當一個動效不符合一個功能性的目的,那么這個動效多存在可能會讓用戶覺得困惑或者惱怒。下面是我目前收集的這一系列的動效。我希望你會在你的設計中對你有所幫助。
導向會闡明結構。在這組中,收集的是一些扮演導航角色的動效,它是網頁信息結構的反映。這種動效是想要吸引用戶對導向的注意,幫助用戶理解頁面布局剛果發(fā)生的變化:什么導致了這個變化,下次想要使用的時候怎么再次打開。
一個典型的例子是:一個按鈕,可以切換隱藏內容(如個人資料等)。當你點擊它是,會出現一個隱藏的面板,當你合上面板,它縮小回操作按鈕。
第一次接觸的時候,用戶可能對馬上要發(fā)生的事情(做了動作之后的回饋)猜的不那么準。隱藏面板尺寸不斷變大的載入動效可以幫助用戶更好的知道發(fā)生了什么,而不是覺得自己離開了頁面或者內容突然消失了。這樣用戶就產生一種自在的掌控感。收回面的的動效可以幫助用戶關聯打開對應面板的按鈕或者圖標,這樣他們就會知道下一次從哪里打開這個面板。
邏輯目的:避免突然間的變化,讓用戶知道自己在哪。
例如:下列兩個動圖:
一個眾所周知的易用性準則:保持設計和站點內容的一致性。一個具有一致性的站點通常是可預見性的,因此,也是可以學習的。此規(guī)則也適用于按鈕的操作。
在某些情況下,我們必須要設計一個在一定條件下功能發(fā)生一定變化的按鈕。我們這樣做通常是因為空間受限,如手機等。因此,用戶已經知道一個按鈕的功能情況下,他還得學習另一個新功能。
“保存”和“編輯”按鈕是功能轉化按鈕的最常見的例子。但是這個又是最簡單的,因為這兩項操作是互斥的,他們具有相同的情景(context)。在其他的情況中,當兩個功能之間不具備明顯的聯系,可用性的挑戰(zhàn)就凸顯出來了。功能動效這個時候就能發(fā)揮很好的作用。
邏輯目的:強調動作按鈕的功能變化。
例如:下列兩個動圖:
第三組的放大縮小看起來和第一組的導向有些相似。在這些動效里面,用戶在列表里選擇一個條目,然后就變成了這個條目的內容或細節(jié)(取代了列表視圖),并且能夠返回之前的條目列表。
我們經常在圖像庫、卡片和條目選擇中見到這樣的動效。用戶選擇了一個條目,條目馬上響應用戶的選擇,在屏幕上顯示對應的細節(jié)內容。
這里的困難是必須讓用戶繼續(xù)感到掌控感,并且還在原來的流程中。功能動效在這時候往往是必不可少的。
在研究這個組中的功能動效時,我注意到一種共同的模式,當下面條件被準確的實施時,會增強動效的功效:
邏輯目的:把條目與詳情頁關聯。
例如:下列兩個動圖:
視覺提示可以幫助用戶更好的知道怎么去操作產品的界面。尤其是設計包含非常規(guī)對象或者單一的導航形式時,顯得尤為重要。
這種功能動效是很容易被察覺的。當我們打開了一個頁面,突然觸發(fā)一個快速的一次性動效,來演示如何操作產品中的功能。
邏輯目的:可以展示非常規(guī)功能或者隱藏的事件。
這種動效可以吸引用戶在內容太多的環(huán)境下的注意力。
設計師通常是避免嘈雜的布局和太多的內容的,當內容太多時,屏幕中的各種顏色和內容均試圖吸引用戶的注意。
一個解決的方式就是從界面上去掉些內容,但是這個方式在有的時候并不是那么給力。試圖想一下一個新聞網站的負責人想要移除一些新聞和圖片。
另一個角度想一下。動效是可以自然而然的得到頁面上的視覺焦點的。無論是文本內容還是靜止的圖片,都是無法與動效比擬的。我們可以利用功能動效的這一優(yōu)點。記住,通過添加動效獲取最高視覺焦點是對嘈雜界面的一個緩坡。
在下面動效的例子當中,我們可以看到,在嘈雜的網頁中把一個物品加入到購物車是不明顯的。所以,這時候就需要動效。
邏輯目的:抓住用戶注意力,超越嘈雜的界面。
例如下面一個動圖。
未完待續(xù)
翻譯自:Functional Animation In UX Design
譯者:那啥那小啥啥去化齋
譯文地址:http://www.jianshu.com/p/8b62ed0c949c#