在2015年澳大利亞CSSConf上 ,Benjamin De Cock，一個(gè)在動(dòng)效設(shè)計(jì)上有優(yōu)先權(quán)的交互設(shè)計(jì)師，分享了多年來(lái)的洞見(jiàn) 。他現(xiàn)在是一個(gè)在Stripe工作的用戶界面設(shè)計(jì)師，Stripe是一個(gè)非常流行的、支付處理平臺(tái)。Benjamin De Cock，提供了超越UI設(shè)計(jì)的領(lǐng)域，他拓展和提供了動(dòng)效設(shè)計(jì)的練習(xí)。

提供最好的練習(xí)

在早期我們探索過(guò)用戶界面的過(guò)于浮夸的動(dòng)效后，De Cock 開(kāi)始欣賞沉穩(wěn)的設(shè)計(jì)傳遞出來(lái)的力量。這是那些發(fā)現(xiàn)動(dòng)效設(shè)計(jì)有趣的人非常熟悉的過(guò)程。最初，你想讓一切動(dòng)起來(lái)，卻從來(lái)不問(wèn)問(wèn)自己是否應(yīng)該動(dòng)。

所以，在什么時(shí)候你應(yīng)該讓一些東西動(dòng)起來(lái)呢?

好的動(dòng)效設(shè)計(jì)當(dāng)然是經(jīng)過(guò)交互經(jīng)驗(yàn)專(zhuān)業(yè)的打磨，De Cock 相信，動(dòng)效UI設(shè)計(jì)的重要性有兩大主要原因：

1. 動(dòng)效設(shè)計(jì)幫助用戶了解控件之間的交互關(guān)系。
2. 動(dòng)效設(shè)計(jì)能讓你的程序感覺(jué)更快、更流暢。

在Stripe結(jié)賬APP 中，點(diǎn)擊“記住我”，會(huì)激活一個(gè)全新的界面設(shè)計(jì)，De Cock 非常謹(jǐn)慎的設(shè)計(jì)每一個(gè)UI控件，以確保用戶沒(méi)有迷失在激活前和激活后這兩個(gè)界面中。

在另一個(gè)例子中， De Cock 揭示了一個(gè)謊言，那就是Stripe 告訴用戶，他們什么時(shí)候檢查了自己的賬戶。

雖然它看起來(lái)很像服務(wù)器進(jìn)行了處理信息，并且通過(guò)驗(yàn)證成功發(fā)送了短信，在現(xiàn)實(shí)中，是動(dòng)效設(shè)計(jì)支付了這個(gè)時(shí)間。

Stripe沒(méi)有任何渠道可以知道短息是不是已經(jīng)收到了，只是把動(dòng)效的時(shí)間設(shè)置的足夠長(zhǎng)，長(zhǎng)到短信已經(jīng)被接受的概率很高的時(shí)候。

四條網(wǎng)頁(yè)設(shè)計(jì)規(guī)則

對(duì)于用戶界面設(shè)計(jì)來(lái)說(shuō)，性能和速度就是一切。就像De Cock 說(shuō)的那樣：

如果你的動(dòng)效設(shè)計(jì)有一部分，沒(méi)有以每秒60幀的速度運(yùn)轉(zhuǎn)，這基本上會(huì)毀了整個(gè)動(dòng)效的流暢感——不要只為了特殊的部分做動(dòng)效。很不幸，人類(lèi)的眼睛對(duì)這些不流暢是極度敏感的。

De Cock 已經(jīng)拓展出UI動(dòng)效設(shè)計(jì)的四條簡(jiǎn)單規(guī)則，他照顧到了現(xiàn)有的實(shí)時(shí)渲染的局限性。

動(dòng)效設(shè)計(jì)包括不透明度和其他屬性轉(zhuǎn)換的設(shè)計(jì)(動(dòng)效的其他屬性，像是寬高，要求很多控件推動(dòng)力量，并且可以降低控件速度)

1. 保持動(dòng)效迅速(一般大約300ms)
2. 保持動(dòng)畫(huà)獨(dú)立性
3. 保持使用自定義曲線
4. 最后一條規(guī)則可以應(yīng)用于所有一般的動(dòng)效設(shè)計(jì)中， De Cock建議避免使用保存在軟件中自帶的動(dòng)畫(huà)曲線，取而代之的是你自己創(chuàng)造的動(dòng)畫(huà)曲線。在播放動(dòng)畫(huà)設(shè)計(jì)的世界中，精通圖形編輯(在任何動(dòng)效包裝中，不僅僅是AE)，并且學(xué)習(xí)如何從數(shù)學(xué)上掌握你的動(dòng)效，這是突破普通動(dòng)效設(shè)計(jì)技巧的關(guān)鍵。

擬物化設(shè)計(jì)和動(dòng)效

擬物化設(shè)計(jì)是在數(shù)字界面中，模擬現(xiàn)實(shí)世界物品的外觀和感覺(jué)的實(shí)踐。Apple 曾經(jīng)有很長(zhǎ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ò)覺(jué)。而在最近幾年，設(shè)計(jì)師已經(jīng)拒絕擬物化設(shè)計(jì)，像谷歌的Material Design， 轉(zhuǎn)移到“扁平化”的設(shè)計(jì)語(yǔ)言中。

但是De Cock 警告我們說(shuō)，我們不應(yīng)該不分良莠，好壞一起丟掉。

在現(xiàn)實(shí)世界中，顯然沒(méi)有什么是平坦的。而我認(rèn)為在軟件設(shè)計(jì)中，丟失這種元素是一種十分可惜的過(guò)度簡(jiǎn)化。

3D實(shí)際上幫助了實(shí)際上有助于理解對(duì)象的行為以及它們之間的相互關(guān)系。因此，擬物化設(shè)計(jì)用來(lái)激發(fā)我們現(xiàn)實(shí)世界中的靈感，以構(gòu)建我們的界面設(shè)計(jì)，似乎是一個(gè)很好的辦法。

優(yōu)秀的UI動(dòng)效設(shè)計(jì)可以是固有的擬物化設(shè)計(jì)，他可以達(dá)到用戶熟悉的感覺(jué)，因?yàn)樗褂玫氖钦鎸?shí)世界的物理學(xué)原理。而物理是永恒的——不是一個(gè)路過(guò)的風(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í)層面增加和藹和友善。

掀開(kāi)這層迷紗

如果你想了解CSS動(dòng)效的真相，你可以觀看整個(gè)演講。大約在10分鐘左右，他開(kāi)始講解產(chǎn)生微妙地、有效的動(dòng)效，如何通過(guò)具體的代碼操作，以達(dá)到最好的性能展示。他同時(shí)呼吁要擁抱JavaScript ，JavaScript 協(xié)調(diào)基于CSS的呈現(xiàn)，并且作為觸發(fā)扳機(jī)和事件框架。

名稱欄目：用戶界面設(shè)計(jì)：為什么動(dòng)效重要？
文章位置：http://www.rwnh.cn/news/160377.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、服務(wù)器托管、App設(shè)計(jì)、面包屑導(dǎo)航、軟件開(kāi)發(fā)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)