ui設(shè)計中的5個基本動效-千鋒教育深圳校區(qū)

 動效可以幫我們提升用戶體驗，使ui界面顯得更加一致和真實，并給整個產(chǎn)品帶來創(chuàng)新的感覺。如果想要你的ui界面更出彩，恰到好處的使用動效將是明智的選擇。今天千鋒小編就和大家分享5個基本的動效，希望能對大家有所幫助。

一、滑動
    信息列表會跟隨著用戶的交互手勢而動，然后卡片到相應(yīng)的位置上，保持整齊感，它屬于指向型動畫，物體的滑動取決于用戶是用那種手勢滑動的。它的作用就是通過指向型轉(zhuǎn)場，有效幫助用戶清理頁面層級的排列情況。

適合場景：當(dāng)你設(shè)計的元素需要導(dǎo)航以列表方式呈現(xiàn)的時候可以使用滑動效果。例如一些明星的選擇，款式的選擇，適合用這樣的方式呈現(xiàn)。

二、擴(kuò)大
    頁面中的卡片會從縮略圖轉(zhuǎn)化為全屏視圖（一般這個卡片的中心點也會跟隨移動到屏幕的中央）。反向動效就是卡片從全屏視圖轉(zhuǎn)換為縮略圖。它的優(yōu)點是能清楚的告訴用戶點擊的地方被放大了。

適合場景：當(dāng)你設(shè)計的元素是需要和用戶進(jìn)行單一交互的時候。例如點開圖片查看詳情，讓轉(zhuǎn)場過渡更自然。

三、最小化

頁面元素點擊之后縮小，然后移動到屏幕上相應(yīng)的位置，相反的動效就是擴(kuò)大，從縮略圖重新變?yōu)槿痢＿@樣做的好處是能夠清楚的告訴用戶，最小化的元素可以在哪里被找到，如果沒有動效引導(dǎo)，可能用戶需要花時間去尋找。

適合場景：當(dāng)用戶想要最小化某個元素的時候。例如搜索、添加快捷按鈕的點擊事件，符合從哪來到哪去的原理。

四、切換對象

當(dāng)前頁面移動到后面，新的頁面移動到前面，這樣能夠清楚解釋頁面之間是進(jìn)行切換的，不會顯得轉(zhuǎn)換的太突兀和莫名其妙。

適合場景：當(dāng)用戶在元素之間切換。滑動效果相對來說比較單一和常見，使用動效切換可以讓用戶產(chǎn)生眼前一亮的效果，例如一些商品款式的切換，就可以使用這樣的效果

五、展開推疊

堆疊在一起的元素被展開。能夠清楚的告訴用戶每個元素的排列情況，從哪里來到哪里去，也顯得更加有趣。

適合場景：當(dāng)用戶打開一堆功能選項的時候。例如一個功能里面隱藏了好幾個二級功能時，就可以使用這樣的效果，利于用戶引導(dǎo)。

千鋒教育ui設(shè)計課程將在移動端界面設(shè)計學(xué)習(xí)階段學(xué)習(xí)AE動效設(shè)計軟件，通過講師細(xì)致的講解和學(xué)員大膽的實戰(zhàn)訓(xùn)練，學(xué)員將掌握自主進(jìn)行動效設(shè)計的能力。把握時代潮流技術(shù)，融入前沿開發(fā)技能，嫻熟駕馭各種技法，千鋒教育ui設(shè)計給你不一樣的學(xué)習(xí)體驗。

千鋒深圳校區(qū)：http://sz.mobiletrain.org/

深圳西部硅谷校區(qū)地址：深圳市寶安區(qū)寶安大道5010號深圳西部硅谷A區(qū)B座605-619

深圳大學(xué)城校區(qū)地址：深圳市南山區(qū)留仙大道1201號大學(xué)城創(chuàng)客小鎮(zhèn)16棟2樓、3樓

培訓(xùn)咨詢專線：0755-33582485-801（硅谷校區(qū)）0755-86660670-801（大學(xué)城校區(qū)）

咨詢熱線4008119990

咨  詢  QQ  : 1660794050

面授課程：全棧HTML5+培訓(xùn)、UI交互設(shè)計培訓(xùn)、PHP培訓(xùn)、Java+云數(shù)據(jù)培訓(xùn)、大數(shù)據(jù)開發(fā)培訓(xùn)、VR/AR/Unity游戲開發(fā)培訓(xùn)、Python培訓(xùn)、Linux云計算培訓(xùn)、全棧軟件測試培訓(xùn)、Android培訓(xùn)、iOS培訓(xùn)、好程序員

ui設(shè)計中的5個基本動效-千鋒教育深圳校區(qū)