ui設計中的5個基本動效-千鋒教育深圳校區

ui設計中的5個基本動效-千鋒教育深圳校區

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

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

適合場景：當你設計的元素需要導航以列表方式呈現的時候可以使用滑動效果。例如一些明星的選擇，款式的選擇，適合用這樣的方式呈現。

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

適合場景：當你設計的元素是需要和用戶進行單一交互的時候。例如點開圖片查看詳情，讓轉場過渡更自然。

三、最小化

頁面元素點擊之后縮小，然后移動到屏幕上相應的位置，相反的動效就是擴大，從縮略圖重新變為全屏。這樣做的好處是能夠清楚的告訴用戶，最小化的元素可以在哪里被找到，如果沒有動效引導，可能用戶需要花時間去尋找。

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

四、切換對象

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

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

五、展開推疊

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

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

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

千鋒深圳校區：http://sz.mobiletrain.org/

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

深圳大學城校區地址：深圳市南山區留仙大道1201號大學城創客小鎮16棟2樓、3樓

培訓咨詢專線：0755-33582485-801（硅谷校區）0755-86660670-801（大學城校區）

咨詢熱線4008119990

咨  詢  QQ  : 1660794050

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

ui設計中的5個基本動效-千鋒教育深圳校區