火星網校
移動UI設計中動畫的3個主要用途【北京新易設計坊】
發(fā)布時間：2024-03-08 10:58:02 瀏覽量：146次
隨著技術的飛速發(fā)展，動畫已不再是視覺上的奢侈，而是用戶期望的功能需求。動畫解決了界面中的許多功能性問題，并使界面生動活潑并真正響應用戶。接下來讓我們探討一下改善移動界面功能和情感力量的關鍵動畫策略。
1.系統(tǒng)狀態(tài)
應用程序的后臺總會發(fā)生許多進程，例如正在從服務器下載數據，進行計算。這樣的過程總是需要一些時間。設計師應該讓用戶知道該應用程序未凍結，并指示正在進行的處理狀態(tài)。視覺上的進步跡象使用戶對應用程序有控制感。
加載指標
對于大多數數字產品而言，加載時間是不可避免的情況。盡管動畫無法解決問題，但它們無疑減少了等待問題的時間。當我們不能縮短排隊時間時，我們當然可以使等待變得更加愉快。
創(chuàng)作進度指示器可以減少用戶對時間的感知。動畫會影響用戶對您產品的感知，使其看上去比實際情況要好。如果應用程序在等待時為用戶提供了一些有趣的內容，這會使用戶對等待本身的關注減少。
拉刷新
這是一個著名動畫是“下拉以刷新”，它啟動了移動設備上的內容更新過程。
小提示：從頭到尾的動畫應與應用程序的設計輪廓匹配-如果應用程序很小，則動畫也應與之匹配。
通知事項
由于移動自然會引起人們的注意，因此，對通知進行動畫處理是一種通知用戶有關某件事的好方法，而不會過多地影響用戶的體驗。
移動物體會立即引起用戶的注意。
2.導航和過渡
動畫最基本的用途是過渡。這類動畫背后的邏輯是幫助用戶理解頁面布局中剛剛發(fā)生的更改，觸發(fā)更改的原因以及稍后如何再次發(fā)起更改。一個經典的示例是切換隱藏內容的漢堡包按鈕。運動設計可以通過告知和愉悅的方式有效地引導用戶的注意力。雖然漢堡動畫可能是這里最期望的選擇，但動畫還有許多其他方式可以補充導航。
導航上下文之間的傳輸
設計人員使用動畫在導航上下文之間平穩(wěn)地運輸用戶，并解釋屏幕上元素排列的變化。過渡應該充當UI的不同狀態(tài)之間的中介，以幫助用戶了解屏幕更改時發(fā)生的情況。
視覺層次和元素之間的連接
動畫非常適合描述界面對象并說明它們如何相互作用。動畫說明了元素如何連接。
功能變更
在某些情況下，設計人員不得不設計一個動作按鈕，其功能在某些情況下會發(fā)生變化。我們經常在整體空間有限的移動設計中看到這種情況?！安シ拧焙汀巴Ｖ埂卑粹o可能是多狀態(tài)按鈕的最常見示例。
此類動畫顯示了元素在用戶與其交互時如何變化。在下面的示例中，當用戶按下浮動操作按鈕時，加號將轉換為鉛筆。這表明鉛筆是主要的創(chuàng)建方法。這么小的細節(jié)意味著必須猜測接下來會發(fā)生什么與知道圖標在兩種狀態(tài)下的含義之間的區(qū)別。按鈕的外觀從“加號”更改為“鉛筆”，以表示按鈕的功能已更改。
3.視覺反饋
視覺反饋對于任何用戶界面都是至關重要的。它使用戶感到處于控制之中，對于用戶而言，控制意味著在任何給定時間了解他們在系統(tǒng)中的當前上下文。
總結
用戶界面元素應該看起來是有形的，即使它們位于玻璃層的后面。在物理世界中，按鈕，控件和其他對象響應我們與它們的交互。人們期望用戶界面控件具有類似水平的響應能力。為了彌合這一差距，視覺和運動提示可立即確認輸入并以看起來和感覺像直接操縱的方式進行動畫處理。動畫可以增強互動的每個方面，并增強用戶執(zhí)行的動作。當復雜的方式以使用動畫時，為設計增添了生氣，甚至使用戶參與了最日常的任務，精心設計的動畫使體驗倍感精致。
熱門課程推薦
熱門資訊
-
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)推薦理由: 這本書是日本現代平面...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯網APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
-
10. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
