火星網校
UI設計中的動態(tài)效果的應用
發(fā)布時間：2024-01-15 17:08:32 瀏覽量：168次
如今，越來越多的頁面會運用動態(tài)效果，今天就來聊聊動態(tài)效果該如何運用。
做作的動畫案例
下面是一則快速且做作的動畫案例，我以此來演示UI動畫中的卡通化現(xiàn)象。盡管這是個略微夸張的例子，但事實上，確有許多界面呈現(xiàn)出了這種花哨的動畫。
似乎我們剛拋棄了擬物化的視覺設計，又陷入了行為上的擬物化。我們把虛擬物表現(xiàn)得像是果凍，或像是掛在隱形的橡皮繩上。
拒絕肆無忌憚的動畫
動畫就像某種咒法。如果過度使用，就會效力盡失。
動畫原則
我聽聞一些UI設計師推崇卡通化的動畫設計，將它作為UI設計師的必讀準則。不幸的是，這增強了UI的娛樂功效，總會使得界面變成用戶的阻礙。
許多UI動效設計師似乎把界面設計當成了他們的動畫作品集。除非你想被收錄進Pixar，否則請避免使用“彈跳”、“加速后減速”這樣的緩動效果。
界面是什么？
在計算機科學中，界面是指計算機系統(tǒng)中，兩個獨立組成部分相互交換信息的銜接處。
界面（計算機）——維基百科，自由的百科全書
https://en.wikipedia.org/wiki/Interface_(computing)
界面居中銜接、傳達信息的作用使得它如此重要。決定何時可以違背這條UI中心原則，是設計師所面臨的挑戰(zhàn)。
UI設計中的動效
這些簡單的準則讓我受益良多，在此推薦：
- 站在用戶的立場對每段動畫做出決斷，“挺好看的”可不是正確答案。
- 保持每段動畫時間不超過300ms。
- 避免使用線性動畫，它使得動畫看起來遲緩、無趣且機械。
- 99%的動畫都應該使用簡單的“加速”或“減速”緩動效果。
- 你極少會需要那些更加醒目的緩動效果，例如彈簧、彈跳等等。
通知
通知案例1
這個簡單的動畫只持續(xù)300ms。它有細微的分層效果，卡片的動畫開始后，消息在100ms內淡入顯現(xiàn)。本例中的動效確實提升了用戶體驗，因為它將用戶的注意力引向了不可忽視的重要的通知。
通知的升級
通知案例2
上面的例子使用了更強烈的動畫。
- 首次點按，通知淡入顯現(xiàn)
- 再次點按，整個標簽晃動
如果用戶持續(xù)點按按鈕，還可以疊加一個模態(tài)窗口吸引用戶注意。而且在后續(xù)失敗的嘗試后，也可以通過改變按鈕本身顏色來警示。
卡片展開
這是卡片視圖的一種簡單有效的實現(xiàn)，移動端通常都這么做。我非常喜歡這個交互，因為它讓用戶熟悉來龍去脈。即使列表視圖不見了，我們也知道它就在那里，在展開項的背后。
卡片展開案例
故意讓卡片的關閉按鈕稍稍延遲顯現(xiàn)，同時使用了位置與透明度的動畫。用戶的視線不會漏掉這個重要的UI元素，他們在收起卡片時會需要它。
重要性分層次
作為設計師與開發(fā)者，必然要決定我們界面中哪些元素更重要。它有很多種體現(xiàn)方式：
- 使用標題
- 下劃線、或是加粗
- 使用色彩
- 使用形狀和圖片
- 運動
你當然不會把文章的每一句話都當作標題。這個原則也適用于動畫。界面中的每個動畫元素，都等同于文章中的一個標題。它應該用來顯現(xiàn)元素的重要性。過度使用反而會混淆層次，同時干擾你試圖表達的信息。
功能動畫 vs 裝飾動畫
程序員常常談論“代碼嗅覺”。這是指編寫代碼時的某種特質，它并無絕對的對錯，但能避免老練的程序員寫出低質量代碼。
如果你聽到團隊伙伴談論UI動畫“愉悅”用戶，你的“設計嗅覺”警鐘可能就響起了。為了動畫而做動畫（幾乎任何時候）是糟糕的設計。
切記，動畫同樣符合少即是多的原則。功能動畫總是勝過純粹的裝飾動畫。
不要讓動畫妨礙了用戶。這就是為什么飛機駕駛艙的界面從不用使用動畫。額外增加毫無必要的300ms動畫，對你的界面而言可能人畜無害，但它給用戶帶來的煩惱遠比“愉悅”更多！
總結
界面中還是需要動畫的。要將它作為迅速傳遞重要信息的工具。多用功能性而非純裝飾動畫，珍視用戶花在你界面上的每一毫秒。
～此文轉載，如有侵權，請聯(lián)系刪除
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數(shù)字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
9. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
-
10. 武漢UI設計培訓班費用怎么樣？想學UI設計要多少錢？
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
