激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

7點設(shè)計技巧，讓UI動效更上一層樓

發(fā)布時間：2024-04-08 16:41:33 瀏覽量：253次

動效現(xiàn)如今在 APP 和網(wǎng)頁中幾乎已經(jīng)成為了基本的組成部分，經(jīng)過仔細打磨的 UI動效對于整個界面的提升是顯著的。

動效呈現(xiàn)出狀態(tài)切換的過程，展現(xiàn)了元素之間的邏輯關(guān)系，并且吸引用戶的注意力，引導(dǎo)他們執(zhí)行有效的交互。

在設(shè)計動效的過程中， Material Motion的設(shè)計原則，IBM 動畫設(shè)計規(guī)則和UX動效宣言都是不錯的設(shè)計參考和指引。遵循這些現(xiàn)有的規(guī)范，能夠很好地提升動效本身的體驗和效果，從優(yōu)秀走向卓越。今天的動效設(shè)計都是遵循著這些規(guī)范使用 InVision Studio 來進行制作的。

1. 標簽頁切換動效

左側(cè)標簽切換的時候使用了淡入淡出，右側(cè)標簽頁切換使用了滑動效果。

  • 內(nèi)容切換的時候淡入淡出效果不錯。
  • 通過滑動效果來展示內(nèi)容，不僅呈現(xiàn)了變化的過程，還指明了兩者的位置關(guān)系和邏輯關(guān)系，更為卓越。

當你在設(shè)計諸如標簽頁或者彈出菜單這樣的控件的時候，盡量借助動效讓內(nèi)容的位置變化關(guān)系呈現(xiàn)出來，這樣不僅確保了內(nèi)容的可見性，而且能夠讓用戶不迷惑。這個時候，滑動手勢交互和位移動效是不錯的搭配，非常符合此處內(nèi)容切換的語境。

2. 卡片的展開動效

卡片是最常見的 UI 元素，左側(cè)的界面中，點擊卡片之后，展開新的界面；右側(cè)界面中，點擊卡片之后，卡片擴展并填充整個屏幕。

  • 點擊卡片之后，詳情頁向上滑出或者從左側(cè)滑出的設(shè)計很不錯。
  • 通過展開動效從卡片直接過渡到詳情頁是更卓越的設(shè)計。

最好的動效往往能夠通過變化讓人明白兩種狀態(tài)之間的內(nèi)在關(guān)聯(lián)。在制作不同狀態(tài)之間變化的動效的時候，注意兩個界面中共享的元素，并且將它作為橋梁，將兩個界面狀態(tài)連接到一起。在使用 InVision Studio 創(chuàng)建原型的時候，這種同時存在前后兩屏中的控件會自動連接起來，構(gòu)成動效。這一功能使得動效的構(gòu)建更加便捷。

3. 在列表中使用瀑布式展開動效

左邊的列表使用了較為迅速的淡入淡出動效，而右邊的列表當中，淡入淡出以延時的方式呈現(xiàn)，效果類似瀑布的展開方式。

  • 淡入淡出的動效讓元素遞次出現(xiàn)加上輕微的位移，比較自然，看起來不錯。
  • 列表元素通過延時次第出現(xiàn)，位移更加明顯，形同瀑布，在視覺和體驗上更為卓越。

瀑布式的展開動效只需要通過明顯的延時就能夠?qū)崿F(xiàn)，適當?shù)乜刂乒?jié)奏，讓整個加載速度適當?shù)臏p緩而不會太慢，讓用戶能夠感知到這個過程即可。谷歌建議每個元素的延時不超過20毫秒。你可以在 Material Motion 中看到設(shè)計的原理和更多的實例。

4. 展開時的擴展動效

左側(cè)的動效是內(nèi)容在頂層覆蓋列表，而右側(cè)的動效是從中間擴展將上下內(nèi)容頂開。

  • 通過移動、覆蓋、展開的方式來呈現(xiàn)詳情頁的動效，視覺上看起來不錯。
  • 而點擊之后展開頂?shù)糁車脑?，和周圍的其他的元素有所互動，這樣的動效更加優(yōu)秀。

界面中所有的元素都應(yīng)該是有「重量」的，某個 UI 控件隨著動效變化的時候，和周圍的元素發(fā)生互動，則能夠強化這種實體感。

5. 菜單的展開動效

左側(cè)的動效中，菜單從底部淡入界面，而右側(cè)的動效中，菜單是從被點擊的按鈕中擴展開的。

  • 菜單從按鈕的位置淡入進入界面的方式展現(xiàn)了兩者的關(guān)聯(lián)，這樣的設(shè)計還不錯。
  • 通過擴展動效的方式來呈現(xiàn)菜單的展開，讓按鈕和菜單之間的關(guān)系得到了進一步的加強，這樣的設(shè)計更加優(yōu)秀。

6. 使用按鈕展現(xiàn)不同狀態(tài)

左側(cè)的按鈕通過文本說明和色彩變化來指示狀態(tài)改變，而右側(cè)按鈕則通過加載控件來展示不同的事件的發(fā)生。

  • 好的按鈕會指示狀態(tài)的改變，哪怕是通過文本來呈現(xiàn)。
  • 通過按鈕本身，視覺化地呈現(xiàn)加載的狀態(tài)變化，比起文本說明更加自然，也更加易于理解，這樣的設(shè)計更加優(yōu)秀。

嘗試使用加載指示器來指示狀態(tài)的變化和進度，類似的方式有很多，重點是在于視覺化的、自然的呈現(xiàn)狀態(tài)的變化過程，如果搭配上色彩的變化，那么就更好了。

7. 吸引用戶注意的動效

左側(cè)僅僅是通過色彩、符號和位置來吸引注意力，而右側(cè)加入了微妙的動效來吸引用戶注意。

  • 使用色彩、標識和位置來吸引用戶注意力是頗為有效的手段。
  • 借助微妙自然的動效，不僅能夠吸引用戶注意力，而且不會造成干擾，這樣的設(shè)計更優(yōu)秀。

對于一些重要的組件、事件或者信息，使用類似呼吸式的動效來強化效果是自然且干擾性較低的，這樣的動效設(shè)計讓元素的重要性得到凸顯，還不會讓用戶感到反感。

8. 結(jié)語

我希望今天所提到的這些技巧能夠讓你在設(shè)計交互動畫的時候，拿出更加自然、優(yōu)秀的方案。從優(yōu)秀到卓越，有的時候只需要進行微小的改變。值得一提的是，像 InVision Studio 這樣的工具，對于動效本身的提升是很明顯的，它能夠提供更多自然而富有直覺性的動效。

總之，在設(shè)計動效的時候，注意狀態(tài)變化的指示，元素之間關(guān)系的強化，適當?shù)卦黾右恍啡?。遵循這樣的原則，總能讓動效更上一層樓。

原文作者 : Pablo Stanley

譯者/編輯 : 陳子木

譯文地址：
https://www.uisdc.com/good-to-great-ui-animation

本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

您已成功報名0元試學活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定