ui設(shè)計要學(xué)習(xí)哪些動效

ui設(shè)計要學(xué)習(xí)哪些動效？UI動效可以直觀地描述用戶操作時的當(dāng)前狀態(tài)，使用戶能夠清晰地感受到對象之間的位置。下面就來看看這篇ui設(shè)計要學(xué)習(xí)哪些動效，相信你們會喜歡的。

滑動

信息列表隨著用戶的交互手勢移動，然后卡片移動到適當(dāng)?shù)奈恢茫�保持整齊感。它屬于一個指向型動畫，物體的滑動取決于用戶使用的手勢。它的目的是通過指向轉(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