用戶界面設(shè)計(jì):為什么動(dòng)效重要?
在2015年澳大利亞CSSConf上 ,Benjamin De Cock,一個(gè)在動(dòng)效設(shè)計(jì)上有優(yōu)先權(quán)的交互設(shè)計(jì)師,分享了多年來的洞見 。他現(xiàn)在是一個(gè)在Stripe工作的用戶界面設(shè)計(jì)師,Stripe是一個(gè)非常流行的、支付處理平臺(tái)。Benjamin De Cock,提供了超越UI設(shè)計(jì)的領(lǐng)域,他拓展和提供了動(dòng)效設(shè)計(jì)的最佳練習(xí)。
提供最好的練習(xí)
在早期我們探索過用戶界面的過于浮夸的動(dòng)效后,De Cock 開始欣賞沉穩(wěn)的設(shè)計(jì)傳遞出來的力量。這是那些發(fā)現(xiàn)動(dòng)效設(shè)計(jì)有趣的人非常熟悉的過程。最初,你想讓一切動(dòng)起來,卻從來不問問自己是否應(yīng)該動(dòng)。
所以,在什么時(shí)候你應(yīng)該讓一些東西動(dòng)起來呢? 好的動(dòng)效設(shè)計(jì)當(dāng)然是經(jīng)過交互經(jīng)驗(yàn)專業(yè)的打磨,De Cock 相信,動(dòng)效UI設(shè)計(jì)的重要性有兩大主要原因: 在Stripe結(jié)賬APP 中,點(diǎn)擊“記住我”,會(huì)激活一個(gè)全新的界面設(shè)計(jì),De Cock 非常謹(jǐn)慎的設(shè)計(jì)每一個(gè)UI控件,以確保用戶沒有迷失在激活前和激活后這兩個(gè)界面中。 在另一個(gè)例子中, De Cock 揭示了一個(gè)謊言,那就是Stripe 告訴用戶,他們什么時(shí)候檢查了自己的賬戶。 雖然它看起來很像服務(wù)器進(jìn)行了處理信息,并且通過驗(yàn)證成功發(fā)送了短信,在現(xiàn)實(shí)中,是動(dòng)效設(shè)計(jì)支付了這個(gè)時(shí)間。 Stripe沒有任何渠道可以知道短息是不是已經(jīng)收到了,只是把動(dòng)效的時(shí)間設(shè)置的足夠長,長到短信已經(jīng)被接受的概率很高的時(shí)候。 對(duì)于用戶界面設(shè)計(jì)來說,性能和速度就是一切。就像De Cock 說的那樣: 如果你的動(dòng)效設(shè)計(jì)有一部分,沒有以每秒60幀的速度運(yùn)轉(zhuǎn),這基本上會(huì)毀了整個(gè)動(dòng)效的流暢感——不要只為了特殊的部分做動(dòng)效。很不幸,人類的眼睛對(duì)這些不流暢是極度敏感的。 De Cock 已經(jīng)拓展出UI動(dòng)效設(shè)計(jì)的四條簡單規(guī)則,他照顧到了現(xiàn)有的實(shí)時(shí)渲染的局限性。 動(dòng)效設(shè)計(jì)包括不透明度和其他屬性轉(zhuǎn)換的設(shè)計(jì)(動(dòng)效的其他屬性,像是寬高,要求很多控件推動(dòng)力量,并且可以降低控件速度) 擬物化設(shè)計(jì)是在數(shù)字界面中,模擬現(xiàn)實(shí)世界物品的外觀和感覺的實(shí)踐。Apple 曾經(jīng)有很長一段時(shí)間對(duì)擬物化設(shè)計(jì)十分青睞,在早期設(shè)計(jì)中,像日歷和找到我的朋友的app設(shè)計(jì)就是證據(jù)。 仿皮革紋理和照片般逼真的拼接都是擬物化設(shè)計(jì)的元素,他們?cè)噲D在數(shù)碼環(huán)境中創(chuàng)造模擬現(xiàn)實(shí)世界材質(zhì)的錯(cuò)覺。而在最近幾年,設(shè)計(jì)師已經(jīng)拒絕擬物化設(shè)計(jì),像谷歌的Material Design, 轉(zhuǎn)移到“扁平化”的設(shè)計(jì)語言中。 但是De Cock 警告我們說,我們不應(yīng)該不分良莠,好壞一起丟掉。 在現(xiàn)實(shí)世界中,顯然沒有什么是平坦的。而我認(rèn)為在軟件設(shè)計(jì)中,丟失這種元素是一種十分可惜的過度簡化。 3D實(shí)際上幫助了實(shí)際上有助于理解對(duì)象的行為以及它們之間的相互關(guān)系。因此,擬物化設(shè)計(jì)用來激發(fā)我們現(xiàn)實(shí)世界中的靈感,以構(gòu)建我們的界面設(shè)計(jì),似乎是一個(gè)很好的辦法。 優(yōu)秀的UI動(dòng)效設(shè)計(jì)可以是固有的擬物化設(shè)計(jì),他可以達(dá)到用戶熟悉的感覺,因?yàn)樗褂玫氖钦鎸?shí)世界的物理學(xué)原理。而物理是永恒的——不是一個(gè)路過的風(fēng)格。 舉個(gè)例子,當(dāng)你操作錯(cuò)誤的時(shí)候,在Stripe中這種微妙地3D側(cè)旋的交互響應(yīng),就像是現(xiàn)實(shí)世界中一個(gè)人在搖頭一樣。當(dāng)你使用擬物化設(shè)計(jì)的時(shí)候這幾乎是潛意識(shí)的為APP植入人性化動(dòng)效,在潛意識(shí)層面增加和藹和友善。 如果你想了解CSS動(dòng)效的真相,你可以觀看整個(gè)演講。大約在10分鐘左右,他開始講解產(chǎn)生微妙地、有效的動(dòng)效,如何通過具體的代碼操作,以達(dá)到最好的性能展示。他同時(shí)呼吁要擁抱JavaScript ,JavaScript 協(xié)調(diào)基于CSS的呈現(xiàn),并且作為觸發(fā)扳機(jī)和事件框架。 來源:產(chǎn)品中國 作者 :JUSTIN CONE
四條網(wǎng)頁設(shè)計(jì)規(guī)則
擬物化設(shè)計(jì)和動(dòng)效
掀開這層迷紗
- 目前還沒評(píng)論,等你發(fā)揮!