火星網(wǎng)校
提升UI動效的8個設(shè)計技巧，讓用戶體驗(yàn)更上一層樓
發(fā)布時間：2024-08-28 13:57:58 瀏覽量：224次
如今在APP和網(wǎng)頁中，動效已成為基本的組成部分，精心制作的UI動效可以顯著提升整體界面的表現(xiàn)。
動效展示出元素之間狀態(tài)切換的過程，展現(xiàn)了它們之間的邏輯關(guān)系，吸引用戶的注意力，指導(dǎo)用戶進(jìn)行有效的交互。
在設(shè)計動效時，Material Motion的設(shè)計原則、IBM動畫設(shè)計規(guī)則和UX動效宣言都是不錯的參考和指導(dǎo)。遵循這些規(guī)范可以顯著提升動效的體驗(yàn)和效果，從優(yōu)秀走向卓越。如今，使用InVision Studio來制作動效已成為主流標(biāo)準(zhǔn)。
1. 標(biāo)簽頁切換動效
左側(cè)標(biāo)簽切換采用淡入淡出效果，右側(cè)標(biāo)簽頁切換使用滑動效果。
- 淡入淡出的內(nèi)容切換效果不錯。
- 滑動效果展示內(nèi)容變化過程，呈現(xiàn)了位置關(guān)系和邏輯關(guān)系，更加出色。
在設(shè)計諸如標(biāo)簽頁或彈出菜單等控件時，通過動效展示內(nèi)容位置的變化關(guān)系，確保內(nèi)容可見性，同時避免用戶困惑?；瑒邮謩萁换ズ驮匚灰苿有呛芎玫倪x擇。
2. 卡片的展開動效
卡片是最常見的UI元素，點(diǎn)擊卡片后，在左側(cè)界面，展開新頁面；右側(cè)界面中，卡片擴(kuò)展填充整個屏幕。
- 展開動效從卡片直接過渡到詳情頁是更卓越的設(shè)計。
優(yōu)秀的動效能讓人理解兩種狀態(tài)之間的內(nèi)在關(guān)聯(lián)。在制作不同狀態(tài)之間的動效時，注意共享元素，并將其作為連接兩種狀態(tài)的橋梁。在InVision Studio中，自動連接前后兩屏的控件，構(gòu)建動效，更加便捷。
3. 列表中的瀑布式展開動效
左側(cè)列表使用迅速淡入淡出動效，右側(cè)列表通過延時淡入淡出展示，呈現(xiàn)瀑布展開效果。
- 淡入淡出帶有位移的逐個元素出現(xiàn)，自然且不錯。
- 延時出現(xiàn)的元素位移明顯，如瀑布一般展開，視覺和體驗(yàn)更為出色。
瀑布式展開動效通過明顯延時實(shí)現(xiàn)，控制節(jié)奏，讓加載速度適中，能被用戶察覺。如Google建議，每個元素延時不超過20毫秒。在Material Motion中，探索更多原理和實(shí)例。
4. 展開時的擴(kuò)展動效
內(nèi)容在頂層覆蓋列表，或從中間擴(kuò)展頂開內(nèi)容。
- 移動、覆蓋、展開方式呈現(xiàn)詳情頁，視覺效果不錯。
- 展開頂?shù)糁車?，與周圍元素互動，設(shè)計更加卓越。
界面元素應(yīng)具有"重量感"，UI控件隨動效變化，與周圍元素互動，增強(qiáng)實(shí)體感。
5. 菜單的展開動效
菜單從底部/按鈕淡入，或從按鈕中擴(kuò)展展開。
- 菜單從按鈕淡入，展示兩者關(guān)聯(lián)，設(shè)計不錯。
- 通過擴(kuò)展動效展示菜單，加強(qiáng)按鈕與菜單的關(guān)聯(lián)，更優(yōu)秀的設(shè)計。
6. 使用按鈕展現(xiàn)不同狀態(tài)
左側(cè)按鈕文本和色彩變化指示狀態(tài)，右側(cè)按鈕通過加載控件展示不同事件發(fā)生。
- 通過按鈕指示狀態(tài)變化，視覺化展現(xiàn)加載狀態(tài)，更自然易懂。
嘗試使用加載指示器展示狀態(tài)變化和進(jìn)度，視覺化、自然地展現(xiàn)狀態(tài)變化過程，搭配色彩變化效果更佳。
7. 吸引用戶注意的動效
色彩、符號、位置吸引注意力，加入微妙動效來吸引用戶。
- 使用色彩、標(biāo)識、位置吸引用戶是有效的。
- 使用微妙動效吸引注意力，不干擾用戶，設(shè)計更優(yōu)秀。
對于重要組件、事件或信息，使用呼吸式動效強(qiáng)化效果，自然不干擾，讓元素重要性凸顯。
8. 結(jié)語
希望以上設(shè)計技巧能幫助你打造更自然、出色的UI動效方案。從微小改變走向卓越，借助工具如InVision Studio，提升動效明顯，提供更自然直觀的動效。
在設(shè)計動效時，注意狀態(tài)變化指示，加強(qiáng)元素間關(guān)系，增添樂趣。遵循這些原則，讓動效更上一層樓。
譯文地址：點(diǎn)擊咨詢
題圖來源：Pexels，基于CC0協(xié)議
火星時代教育致力于數(shù)字藝術(shù)教育，開設(shè)諸如游戲設(shè)計、動畫培訓(xùn)、影視后期制作等課程，歡迎點(diǎn)擊點(diǎn)擊咨詢咨詢報名！
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
4. 10個免費(fèi)學(xué)習(xí)UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點(diǎn)擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學(xué)UI設(shè)計要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗(yàn)
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
9. 武漢UI設(shè)計培訓(xùn)班費(fèi)用怎么樣？想學(xué)UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓(xùn)班的費(fèi)用是多少嗎？不知道學(xué)UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓(xùn)班的學(xué)費(fèi)價格以及學(xué)習(xí)內(nèi)容。
-
10. 設(shè)計中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
最新文章
