2015-3-27 藍(lán)藍(lán)設(shè)計的小編
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
每一個扁平化界面設(shè)計,都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計
來源:http://www.woshipm.com/ucd/140169.html
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
設(shè)計師們喜歡追求細(xì)節(jié)的完美。他們把大量時間花在了操蛋的像素級按鈕,表單樣式,設(shè)置類型以及讓如何那些圖標(biāo)變得漂亮和精致。即使是A+和干得好這樣的稱贊也不足以這些人停下來。
…但是關(guān)于如何設(shè)計銜接卻很少有人考慮。你點下按鈕表單就…出現(xiàn)了?你滑動刪除一個項目它就那么消失了?那也忒怪異忒不自然了。在真實世界里幾乎沒有效果,這好像是一個bug。
哦,好吧寶貝。你必須記住——它需要“滑入”。
怎樣?多快?反彈?漸入?靜態(tài)設(shè)計圖體現(xiàn)不出切換過程。
當(dāng)提到動畫和可愛的交互的時候,人們總是濫用“趣味性”這個詞。對這些人來說很炫酷,但是你猜怎么著?動效也可以有功能性作用,而不僅僅是個裝飾性的細(xì)節(jié)。
動效有一個被忽視了的維度——時間!一個看不見的組織將空間合在一起,要明白這點你不必精通數(shù)學(xué)。
讓我們看一些簡單的想法:緩沖
在傳統(tǒng)動效里,分解一個物體是如何從A點移動到B點的。它增加了運動的偏向并決定了其余幀如何排列。以這些25幀差值(中間點13幀在不同的位置)舉例:
看!你剛剛了解了緩沖。電腦很蠢并且只會線性的填補空白,但一位優(yōu)秀的動效設(shè)計師要花費大量的工作來讓它們更加完美。
動效都是關(guān)于時間。你可以設(shè)置不同的間距來獲得不同的結(jié)果。但這已足夠,這不是一個動效教程,重要的是讓你思考時間和空間的語言。
正如我之前所說,動效有場景,它有助于用戶理解信息如何流動。
在列表中插入一個條目
比如說你正在盯著一張活動的列表并且你想讓它實現(xiàn)數(shù)據(jù)填充。如果你把它放在電腦上,它會看起來像這樣:
是不是有點太粗糙了…
讓它變得平滑只需要幾幀動效就好了。以上關(guān)于列表的動效是否給了你一些啟發(fā)?
要是添加一個新選項,列表首先要為選項騰出空間然后再由來自某個地方的新選項填進(jìn)去。要是想少點沖突,可通過漸進(jìn)和漸出狀態(tài)來緩和改變。它感覺更加自然,因為我們有空間的常識——模擬真實生活中物理運動規(guī)律。
再多一些:
深入到列表項中
有滑動進(jìn)入到一個項目的典型默認(rèn)模式。這是一個經(jīng)常使用的模式,但卻沒有太大的意義:
滑動的方向除了展示一個線性的視圖之外,沒有給你任何真正有用的線索。
增加更多細(xì)節(jié),內(nèi)嵌到界面中如何?
如果操作目標(biāo)是深入并關(guān)注列表項,我們甚至可以其他列表隱藏在一個視圖之內(nèi)。
面包屑導(dǎo)航是一種很容易迷失的方法。
而保持內(nèi)嵌的一個優(yōu)點無須二級頁面。你可以取消分層導(dǎo)航的顯示,因為用戶已經(jīng)看到了他們是如何達(dá)到那里的。
當(dāng)然,上面的想法并不適用于所有情況——但是這個觀點會引出更優(yōu)雅的解決方案來連接界面。
Thinglist,我和Kyle Bragger先生共同開發(fā)的一款Elepath產(chǎn)品,有一些相當(dāng)有趣的過渡界面融入其中。上面的例子演示了我們是如何展現(xiàn)新的漸入特征。
你應(yīng)該研究的過渡界面案例
不再一一列舉了…在天平的一端,有許多漂亮卻極其靜態(tài)的界面,在另一端則是被巧妙的動畫過度裝飾了的界面。
我馬上能列舉出的三個案例:
Clear:非常美觀的手勢驅(qū)動的動畫。
Willcall:一致的,動態(tài)的節(jié)奏,狀態(tài)間沒有生硬的過渡,愉快的使用體驗。
Facebook.app:不是非常的一致,但是對于吸引注意有一些不錯的解決方案。特別是…深入展示全屏照片的燈箱視圖和彈出的評論輸入視圖。
很多人不曾考慮過界面的時間維度對我開說太瘋狂了,動效可以提供這么多的信息!難道是創(chuàng)建原型的工具對大多數(shù)設(shè)計師來說太復(fù)雜了?
我最初寫此文是作為Elepath員工的一份內(nèi)部文檔,以此來解釋我對動效的理念,畢竟我是一名動效師。
藍(lán)藍(lán)設(shè)計的小編 http://tweetduck.com