產(chǎn)品設(shè)計(jì)中界面的過(guò)渡效果處理
設(shè)計(jì)師都愛(ài)雕琢細(xì)節(jié)。多數(shù)時(shí)間都用來(lái)折騰像素級(jí)的按鈕、表單樣式、設(shè)定字體,還要把圖標(biāo)打磨得像圖釘一樣鋒利。很好,滿分,大家請(qǐng)繼續(xù)保持。
但是,還需要考慮一點(diǎn),它們除了靜態(tài)組合之外如何相互結(jié)合。按下按鈕,表單就……直接出現(xiàn)嗎?滑動(dòng)刪除一個(gè)項(xiàng)目,它就直接消失?那太奇怪了,也不自然。現(xiàn)實(shí)中幾乎沒(méi)有什么會(huì)這樣突兀地直接切換狀態(tài)。它給人感覺(jué)像是出了毛病。
那好。你寫(xiě)下了一條注釋——它是“滑入”的。
如何滑入?速度多快?會(huì)不會(huì)反彈?有沒(méi)有緩沖?靜態(tài)的設(shè)計(jì)無(wú)法提供狀態(tài)之間的銜接。
提到動(dòng)畫(huà)和討喜的交互時(shí),人們總是用“有趣”一詞。對(duì)他們來(lái)說(shuō),這些動(dòng)態(tài)效果很酷。但你猜怎么著?動(dòng)畫(huà)還有功能性的作用。它不僅僅是個(gè)美化過(guò)的細(xì)節(jié)。
動(dòng)畫(huà)利用了一個(gè)被忽略的維度——時(shí)間!一種將空間縫合在一起的隱形織物。即使不是數(shù)學(xué)宅,你也能理解這點(diǎn)。
我們來(lái)看看一些簡(jiǎn)單的概念:
緩動(dòng)/緩沖
傳統(tǒng)動(dòng)畫(huà)中,斷點(diǎn)決定了一團(tuán)東西如何從A點(diǎn)移動(dòng)到B點(diǎn)。它給動(dòng)畫(huà)增加了偏移量,決定了其余幀的時(shí)間間隔是怎樣的。以這25幀補(bǔ)間動(dòng)畫(huà)為例,第13幀(中點(diǎn))的位置有所不同:
瞧瞧!你已經(jīng)學(xué)會(huì)了緩沖/緩動(dòng)。電腦都是混蛋,喜歡線性均勻地填充這些空隙,因?yàn)樗麄兙褪且粓F(tuán)懶惰的電路。優(yōu)秀的動(dòng)畫(huà)/動(dòng)效設(shè)計(jì)師多數(shù)時(shí)間都在與電腦作斗爭(zhēng),確保它們不會(huì)把這搞砸。
動(dòng)畫(huà)總是關(guān)乎時(shí)間。你可以嘗試各種不同的時(shí)間間隔,會(huì)得到不同的結(jié)果。但這已經(jīng)足夠了。這不是動(dòng)畫(huà)教程,關(guān)鍵是讓你思考時(shí)間與間隔的語(yǔ)言。
關(guān)于界面銜接動(dòng)畫(huà)的一些創(chuàng)意
我之前說(shuō)過(guò),動(dòng)畫(huà)有助于創(chuàng)造情境。它幫助大腦理解信息如何流轉(zhuǎn)。
向列表中添加項(xiàng)目
比如說(shuō)你在看著一列動(dòng)態(tài)列表,你希望用實(shí)時(shí)數(shù)據(jù)填充它。如果你把這任務(wù)交給電腦,它看起來(lái)會(huì)是這樣:
我去,太挫了……
平滑地將它顯示出來(lái),只需要幾幀動(dòng)畫(huà)。給你的大腦提供一點(diǎn)線索吧,想想這個(gè)列表發(fā)生了什么?
為了添加一個(gè)新項(xiàng)目,列表需要為它讓出空間,然后(來(lái)自某處的)新項(xiàng)目填充了這片空間。突兀感大大減少了。狀態(tài)淡入淡出還能使變化更加緩和。感覺(jué)更自然,因?yàn)槲覀兟?lián)想到空間的相關(guān)情境——它反映了現(xiàn)實(shí)生活中,你往一堆東西里添加?xùn)|西的過(guò)程。
再來(lái)幾個(gè):
進(jìn)入列表項(xiàng)
典型的默認(rèn)方式是滑動(dòng)進(jìn)入某一項(xiàng)。這是常用的一種模式,但整體在空間上并不怎么合理:
滑動(dòng)的方向并沒(méi)有給你任何有用的線索,除了一系列串成線的界面。
要不考慮一下把這項(xiàng)做成一個(gè)容器,點(diǎn)它之后在內(nèi)部展示更多詳情?
如果目的是進(jìn)入該項(xiàng),并使它吸引全部的注意力,我們甚至可以在同個(gè)界面中把其他所有都隱藏起來(lái):
把>所有>界面>用>面包屑導(dǎo)航>串起來(lái),很容易迷失方向。
內(nèi)部展開(kāi)的一個(gè)優(yōu)勢(shì),是你不需要解釋用戶如何到達(dá)這個(gè)子界面??梢話仐墝蛹?jí)式的導(dǎo)航,因?yàn)橛脩?strong style="color: #222222">看見(jiàn)了他們是如何進(jìn)到那里。
我和Kyle Bragger?先生正在致力于打造Thinglist,一款Elepath旗下的產(chǎn)品,它里面加入了一些非常好玩的界面過(guò)渡效果。上面的例子演示了這些新特性。
你該看看這些界面過(guò)渡效果案例:
Clear:與手勢(shì)操作緊密相關(guān)的動(dòng)畫(huà)。
Willcall:它有一套統(tǒng)一的律動(dòng)節(jié)奏。狀態(tài)之間不會(huì)有東西生硬地出現(xiàn)。非常有趣值得把玩。
Elepath的員工可以解釋我對(duì)于動(dòng)畫(huà)的癡迷。畢竟我是一名動(dòng)效設(shè)計(jì)師。
你還可以參與branch的討論:http://branch.com/b/transitional-interfaces-design-ux
最新消息:我為這篇文章做了一段50分鐘的演說(shuō),可以在此觀看(譯者提醒:需翻墻)
如果動(dòng)畫(huà)使你無(wú)法自拔,我概不負(fù)責(zé)。
Android最新的設(shè)計(jì)思想中也有類(lèi)似的描述。