2022-09-22 15:31:15|已瀏覽:92次

ui設(shè)計要學(xué)習(xí)哪些動效
ui設(shè)計要學(xué)習(xí)哪些動效?UI動效可以直觀地描述用戶操作時的當(dāng)前狀態(tài),使用戶能夠清晰地感受到對象之間的位置。下面就來看看這篇ui設(shè)計要學(xué)習(xí)哪些動效,相信你們會喜歡的。
滑動
信息列表隨著用戶的交互手勢移動,然后卡片移動到適當(dāng)?shù)奈恢茫3终R感。它屬于一個指向型動畫,物體的滑動取決于用戶使用的手勢。它的目的是通過指向轉(zhuǎn)換有效地幫助用戶清理頁面層次結(jié)構(gòu)的安排。
適合場景:在設(shè)計需要導(dǎo)航到列表的元素時使用滑塊。例如,一些明星的選擇,款式的選擇,適合用這樣的表現(xiàn)方式呈現(xiàn)。
擴大
頁面中的卡片將從縮略圖轉(zhuǎn)換為全屏視圖(卡片的中心也將移動到屏幕的中心)。反向動畫是將卡片從全屏視圖轉(zhuǎn)換為縮略圖。它的優(yōu)點是能夠清楚地告訴用戶在哪里單擊和放大。
適合場景:當(dāng)你設(shè)計需要與用戶進(jìn)行單一交互的元素時。例如,單擊圖片查看詳細(xì)信息,讓轉(zhuǎn)場過渡更自然。
最小化
頁面元素被點擊之后縮小,然后移動到屏幕上相應(yīng)的位置。相反的動效就擴大,從縮略圖再次擴展到全屏。這種方法的優(yōu)點是,用戶很清楚在哪里可以找到最小化的元素,如果沒有動效引導(dǎo),用戶可能需要花時間自己去尋找。
適合場景:當(dāng)用戶希望最小化一個元素時。像搜索、添加快捷按鈕的點擊事件,符合從哪來到哪去的原理。
切換對象
當(dāng)前頁面移到后面,而新頁面移到前面,這清楚地解釋了頁面之間的切換,而不會顯得太突然或令人困惑。
適合場景:當(dāng)用戶在元素之間切換時。滑動效果是比較單一和常見的,而使用動態(tài)效果開關(guān)可以使用戶產(chǎn)生眼前一亮的效果,如一些商品款式的切換,就可以使用這樣的效果。
翻頁
當(dāng)用戶實施滑動時,效果就像在現(xiàn)實生活中翻頁一樣。真實的動態(tài)轉(zhuǎn)換還可以清晰地顯示列表層次結(jié)構(gòu)的信息體系結(jié)構(gòu),更有效地模擬真實的動態(tài)效果。
適合場景:當(dāng)用戶翻頁時。例如,閱讀小說和讀長篇文章,效果會更貼近現(xiàn)實生活,引起用戶的共鳴。
注:尊重原創(chuàng)文章,轉(zhuǎn)載請注明出處和鏈接 http://m.hebeijilong.cn/news-id-57403.html 違者必究!部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實性請自行核實或聯(lián)系我們,了解更多相關(guān)資訊請關(guān)注UI設(shè)計頻道查看更多,了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費申請試課。關(guān)注官方微信了解更多:150 3333 6050