火星網(wǎng)校
揭開UI設(shè)計中動效的神秘面紗，你絕對不能錯過這3個用途！
發(fā)布時間：2024-08-25 12:34:47 瀏覽量：149次
隨著技術(shù)和硬件設(shè)備性能的提升，動效已經(jīng)不再是視覺設(shè)計中的奢侈品。動效不僅僅是華麗的動態(tài)效果，它首先幫助設(shè)計師和用戶解決了許多界面功能上的問題，讓用戶更容易理解產(chǎn)品，也讓設(shè)計師更好地表達。動效本身還讓整個界面更加活潑，充滿生命力，更加自然地相應讓用戶和界面之間有了情感的聯(lián)系。
動效對于UI界面在功能和情感上的強化到底有哪些呢？今天的文章，我們從三個方面來聊聊這個問題。
1、系統(tǒng)狀態(tài)
每個APP為了保證正常的運行，后臺總會有許多進程在進行著，比如從服務(wù)器下載數(shù)據(jù)、初始化狀態(tài)、加載組件等等。做這些事情的時候，系統(tǒng)總是需要一定的時間來進行，但是用戶看著靜止的界面并不會明白這些，所以需要借助動效讓用戶明白后臺還在運行，在處理數(shù)據(jù)。通過動效，從視覺上告知用戶這些信息，讓用戶有掌控感，是很有必要的。
加載指示器
對于許多數(shù)字產(chǎn)品而言，加載是不可避免的。雖然動效并不能解決加載的問題，但是它會讓等待不再無聊。當我們無法讓加載時間更短的時候，我們應該讓等待更加有趣。
充滿創(chuàng)意的加載指示器能夠降低用戶對于時間的感知。動效會影響用戶對于產(chǎn)品的看法，讓界面比實際上看起來更好。
如果一個APP在用戶等待的時候，給他們看更有趣的東西，他們自然會忽略等待本身。
下拉刷新
另外一個著名的動效是下拉刷新，當觸發(fā)這個動效之后，移動端設(shè)備會更新相應的內(nèi)容。
小貼士：下拉刷新動效應該和整個設(shè)計的風格保持一致，如果APP是極簡風，那么動效也應當如此。
通知
由于動效會自然地引起用戶的注意力，所以使用動畫的方式來呈現(xiàn)通知是很自然的設(shè)計，它不會給用戶帶來太多顛覆性的使用體驗。
2、導航和過渡
動效最基本的功用是呈現(xiàn)過渡狀態(tài)。當頁面布局發(fā)生改變的時候，動效的存在會幫助用戶理解這種狀態(tài)的改變，呈現(xiàn)過渡的過程。一個經(jīng)典的案例就是漢堡圖標呈現(xiàn)隱藏菜單的過渡動效。
動效能夠有效地吸引用戶的注意力，讓用戶在愉悅的氛圍中獲取信息。雖然漢堡的動效是用戶最期待的，但是能夠強化導航的動效并不只有這么一種。
可導航內(nèi)容之間的過渡
設(shè)計師使用動效平滑地讓用戶在不同的內(nèi)容之間過渡、切換，而動效也解釋了UI的變化是怎么發(fā)生的。
過渡動效是UI不同狀態(tài)的中介環(huán)節(jié)，它幫助用戶理解。
視覺層次和元素的連接
動效可以完美地解釋界面元素之間的關(guān)系，并且闡明它們是如何完美地進行交互的。
功能變化
在許多案例中，設(shè)計師會強行設(shè)計一個可點擊的按鈕，在特定情況下，功能會發(fā)生改變。在移動端設(shè)計中，由于屏幕空間的限制，我們常常會看到這樣的按鈕。
“播放”和“暫?！笔亲畛Ｒ姷亩酄顟B(tài)切換的實例。
這類動效展示了用戶在交互的時候，元素是如何發(fā)生轉(zhuǎn)變的。在下面的案例中，用戶點擊按鈕，加號變?yōu)殂U筆圖標。這表明展開后的交互列表中，鉛筆所代表的是首要操作。這樣的小細節(jié)呈現(xiàn)出了可預期的下一步交互。
3、視覺反饋
視覺反饋對于任何UI界面都是非常重要的。視覺反饋讓用戶覺得一切都盡在掌握，可以預期，而這種掌握意味著用戶能夠明白和理解目前的內(nèi)容和狀態(tài)。
確認
用戶界面元素，諸如按鈕和控件，應該看起來是可點擊的，即使它們實際上是在屏幕背后。在我們的現(xiàn)實生活中，按鈕和各種控件都會對我們的交互產(chǎn)生響應，人們期望在界面中獲得類似的反饋。
為了解決這個問題，設(shè)計師引入了視覺化的動效來提醒用戶，讓這些虛擬的按鈕看起來能像真實的那樣有反饋。
視覺化地呈現(xiàn)操作后的結(jié)果
動效可以強化每一個交互的結(jié)果并且提升用戶交互。在下面的Stripe的案例中，當用戶點擊“支付”的時候，會有一個短暫的過渡動效，這個動效讓用戶更加欣賞這個過程也讓支付顯得更加便捷輕松。
結(jié)語
動效的強大之處在于，它將設(shè)計以更為成熟的方式呈現(xiàn)出來，賦予設(shè)計生命力，讓產(chǎn)品脫穎而出！
內(nèi)容來源于網(wǎng)絡(luò)，作者：Nick Babich 譯文：陳子木，如侵權(quán)請告知刪除
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
4. 10個免費學習UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學UI設(shè)計要多久？培訓完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗
ui設(shè)計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設(shè)...
-
9. 武漢UI設(shè)計培訓班費用怎么樣？想學UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓班的費用是多少嗎？不知道學UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓班的學費價格以及學習內(nèi)容。
-
10. 設(shè)計中的色彩心理學:淺析中西方色彩的歷史演變與設(shè)計應用
摘要:本文探討了色彩的歷史演變和設(shè)計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
最新文章
