四川少BBB搡BBB爽爽爽_四川女人毛多水多A片_四川BBBBBB搡BBBBB_四LLL少妇BBBB槡BBBB_私密直播全婐APP免费魅影_爽到喷水(H)

400-611-9921

當前位置:首頁 > 新聞資訊 > 建站知識
用戶界面設(shè)計:為什么動效重要?

2015-11-02

2589


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

提供最好的練習(xí)

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

所以,在什么時候你應(yīng)該讓一些東西動起來呢?

好的動效設(shè)計當然是經(jīng)過交互經(jīng)驗專業(yè)的打磨,De Cock 相信,動效UI設(shè)計的重要性有兩大主要原因:

  1. 動效設(shè)計幫助用戶了解控件之間的交互關(guān)系。

  2. 動效設(shè)計能讓你的程序感覺更快、更流暢。

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

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

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

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

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

對于用戶界面設(shè)計來說,性能和速度就是一切。就像De Cock 說的那樣:

如果你的動效設(shè)計有一部分,沒有以每秒60幀的速度運轉(zhuǎn),這基本上會毀了整個動效的流暢感——不要只為了特殊的部分做動效。很不幸,人類的眼睛對這些不流暢是極度敏感的。

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

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

  1. 保持動效迅速(一般大約300ms)

  2. 保持動畫獨立性

  3. 保持使用自定義曲線

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

擬物化設(shè)計和動效

擬物化設(shè)計是在數(shù)字界面中,模擬現(xiàn)實世界物品的外觀和感覺的實踐。Apple 曾經(jīng)有很長一段時間對擬物化設(shè)計十分青睞,在早期設(shè)計中,像日歷和找到我的朋友的app設(shè)計就是證據(jù)。

仿皮革紋理和照片般逼真的拼接都是擬物化設(shè)計的元素,他們試圖在數(shù)碼環(huán)境中創(chuàng)造模擬現(xiàn)實世界材質(zhì)的錯覺。而在最近幾年,設(shè)計師已經(jīng)拒絕擬物化設(shè)計,像谷歌的Material Design, 轉(zhuǎn)移到“扁平化”的設(shè)計語言中。

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

在現(xiàn)實世界中,顯然沒有什么是平坦的。而我認為在軟件設(shè)計中,丟失這種元素是一種十分可惜的過度簡化。

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

優(yōu)秀的UI動效設(shè)計可以是固有的擬物化設(shè)計,他可以達到用戶熟悉的感覺,因為它使用的是真實世界的物理學(xué)原理。而物理是永恒的——不是一個路過的風(fēng)格。

舉個例子,當你操作錯誤的時候,在Stripe中這種微妙地3D側(cè)旋的交互響應(yīng),就像是現(xiàn)實世界中一個人在搖頭一樣。當你使用擬物化設(shè)計的時候這幾乎是潛意識的為APP植入人性化動效,在潛意識層面增加和藹和友善。

掀開這層迷紗

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


關(guān)注我們:在查找公眾號中搜索:zomsky1688,或者掃描下方二維碼快速關(guān)注。
廣州市縱天信息科技有限公司公眾號
關(guān)鍵詞:移動網(wǎng)站建設(shè),高端網(wǎng)站建設(shè)

免費咨詢熱線

400-611-9921

020-29860991

聯(lián)系方式

地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場16F

業(yè)務(wù) QQ:  3561401262

E-mail:  sales@zomsky.com

微信咨詢
官方微信
微信咨詢
在線咨詢
TOP

立即與縱天項目顧問通話

400-611-9921

您也可以咨詢我們的在線客服或預(yù)約資深顧問

信息保護中,請放心填寫
關(guān)閉
免費獲取方案
阳朔县| 赞皇县| 洛隆县| 乡宁县| 宁都县| 师宗县| 安吉县| 都江堰市| 榆树市| 乳山市| 西乡县| 思茅市| 承德市| 湘潭县| 石棉县| 自贡市| 伊通| 佳木斯市| 商河县| 武汉市| 浠水县| 南康市| 普陀区| 五大连池市| 鹤山市| 鄂州市| 通江县| 屯昌县| 平凉市| 革吉县| 布拖县| 防城港市| 绥江县| 盐源县| 夏邑县| 青冈县| 房产| 贺兰县| 灵台县| 新津县| 龙泉市|