火星網(wǎng)校
UI設(shè)計：12種基本指向性動效，讓用戶體驗更出色
發(fā)布時間：2024-08-25 11:52:04 瀏覽量：229次
本文主要介紹了UI設(shè)計中的指向性動效，即能有效描述物體間邏輯關(guān)系，通過視覺效果展示用戶操作時的當前狀態(tài)，讓用戶清晰感知物體間的位置或?qū)蛹夑P(guān)系。
指向型動效的分類
1.滑動
信息列表隨用戶交互手勢移動，卡片到相應(yīng)位置，保持整齊感，通過指向型轉(zhuǎn)場幫助用戶整理頁面層級排列情況。
2.擴大
頁面中卡片從縮略圖轉(zhuǎn)為全屏視圖，提示用戶點擊的內(nèi)容被放大。
3.最小化
頁面元素點擊后縮小移動到相應(yīng)位置，清晰告知用戶元素位置。
4.切換對象
當前頁面移至后面，新頁面移至前面，清晰展示頁面切換，不顯突兀。
5.展開推疊
展開堆疊元素，告知用戶元素排列情況，更有趣。
6.翻頁
滑動手勢展現(xiàn)翻頁效果，展示列表層級信息架構(gòu)，增加情感。
7.添加到列表
新元素加入原列表，舊元素推開，清晰展現(xiàn)列表重新排列過程，避免用戶困惑。
8.導(dǎo)航標簽轉(zhuǎn)換
內(nèi)容轉(zhuǎn)換時，按鈕視覺改變，清晰展示標簽內(nèi)容從屬關(guān)系。
適合場景
1.滑動效果
適用于元素導(dǎo)航呈現(xiàn)列表場景，例如選擇明星、款式等。
2.彈出效果
適用于單一交互場景，例如查看圖片詳情。
3.最小化
適用于用戶最小化元素場景，如搜索、添加按鈕點擊。
4.切換對象
適用于元素切換場景，例如商品款式切換。
5.展開推疊
適用于展開多功能選項場景，方便用戶引導(dǎo)。
6.翻頁效果
適用于翻頁操作場景，如閱讀長篇文章。
7.添加到列表
適用于新操作場景，讓用戶清晰了解自己的動作，如點贊、打賞。
8.導(dǎo)航標簽轉(zhuǎn)換
適用于同級頁面切換場景，清晰標簽內(nèi)容架構(gòu)。
9.融合效果
適用于功能操作影響其他功能場景，如健身app開始健身。
10.滾動
適用于用戶垂直或水平移動頁面場景，如列表、圖片。
11.平移
適用于移動大頁面場景，如地圖、配合滾動產(chǎn)生平移效果。
12.保存指示器
適用于用戶添加書簽、下載、保存等操作場景。
想要了解更多UI設(shè)計師專業(yè)知識？歡迎了解火星時代教育的UI設(shè)計培訓(xùn)課程，助你成為UI設(shè)計專家！
熱門課程推薦
熱門資訊
-
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)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
4. 10個免費學(xué)習(xí)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ǔ)學(xué)UI設(shè)計要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
9. 武漢UI設(shè)計培訓(xùn)班費用怎么樣？想學(xué)UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓(xùn)班的費用是多少嗎？不知道學(xué)UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓(xùn)班的學(xué)費價格以及學(xué)習(xí)內(nèi)容。
-
10. 設(shè)計中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
最新文章
