在2015年澳大利亞CSSConf上 ,Benjamin De Cock，一個在動效設計上有優先權的交互設計師，分享了多年來的洞見 。他現在是一個在Stripe工作的用戶界面設計師，Stripe是一個非常流行的、支付處理平臺。Benjamin De Cock，提供了超越UI設計的領域，他拓展和提供了動效設計的練習。

提供最好的練習

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

所以，在什么時候你應該讓一些東西動起來呢?

好的動效設計當然是經過交互經驗專業的打磨，De Cock 相信，動效UI設計的重要性有兩大主要原因：

1. 動效設計幫助用戶了解控件之間的交互關系。
2. 動效設計能讓你的程序感覺更快、更流暢。

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

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

雖然它看起來很像服務器進行了處理信息，并且通過驗證成功發送了短信，在現實中，是動效設計支付了這個時間。

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

四條網頁設計規則

對于用戶界面設計來說，性能和速度就是一切。就像De Cock 說的那樣：

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

De Cock 已經拓展出UI動效設計的四條簡單規則，他照顧到了現有的實時渲染的局限性。

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

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

擬物化設計和動效

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

仿皮革紋理和照片般逼真的拼接都是擬物化設計的元素，他們試圖在數碼環境中創造模擬現實世界材質的錯覺。而在最近幾年，設計師已經拒絕擬物化設計，像谷歌的Material Design， 轉移到“扁平化”的設計語言中。

但是De Cock 警告我們說，我們不應該不分良莠，好壞一起丟掉。

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

3D實際上幫助了實際上有助于理解對象的行為以及它們之間的相互關系。因此，擬物化設計用來激發我們現實世界中的靈感，以構建我們的界面設計，似乎是一個很好的辦法。

優秀的UI動效設計可以是固有的擬物化設計，他可以達到用戶熟悉的感覺，因為它使用的是真實世界的物理學原理。而物理是永恒的——不是一個路過的風格。

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

掀開這層迷紗

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

名稱欄目：用戶界面設計：為什么動效重要？
文章位置：http://m.2m8n56k.cn/news/160377.html

成都網站建設公司_創新互聯，為您提供動態網站、服務器托管、App設計、面包屑導航、軟件開發、網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯