深圳千鋒ui設計分享:ui設計中的5個基本動效動效可以幫我們提升用戶體驗,使ui界面顯得更加一致和真實,并給整個產品帶來創(chuàng)新的
深圳千鋒ui設計分享:ui設計中的5個基本動效
動效可以幫我們提升用戶體驗,使ui界面顯得更加一致和真實,并給整個產品帶來創(chuàng)新的感覺。如果想要你的ui界面更出彩,恰到好處的使用動效將是明智的選擇。今天千鋒小編就和大家分享5個基本的動效,希望能對大家有所幫助。
一、滑動
信息列表會跟隨著用戶的交互手勢而動,然后卡片到相應的位置上,保持整齊感,它屬于指向型動畫,物體的滑動取決于用戶是用那種手勢滑動的。它的作用就是通過指向型轉場,有效幫助用戶清理頁面層級的排列情況。
適合場景:當你設計的元素需要導航以列表方式呈現(xiàn)的時候可以使用滑動效果。例如一些明星的選擇,款式的選擇,適合用這樣的方式呈現(xiàn)。
二、擴大
頁面中的卡片會從縮略圖轉化為全屏視圖(一般這個卡片的中心點也會跟隨移動到屏幕的中央)。反向動效就是卡片從全屏視圖轉換為縮略圖。它的優(yōu)點是能清楚的告訴用戶點擊的地方被放大了。
適合場景:當你設計的元素是需要和用戶進行單一交互的時候。例如點開圖片查看詳情,讓轉場過渡更自然。
三、最小化
頁面元素點擊之后縮小,然后移動到屏幕上相應的位置,相反的動效就是擴大,從縮略圖重新變?yōu)槿痢_@樣做的好處是能夠清楚的告訴用戶,最小化的元素可以在哪里被找到,如果沒有動效引導,可能用戶需要花時間去尋找。
適合場景:當用戶想要最小化某個元素的時候。例如搜索、添加快捷按鈕的點擊事件,符合從哪來到哪去的原理。
四、切換對象
當前頁面移動到后面,新的頁面移動到前面,這樣能夠清楚解釋頁面之間是進行切換的,不會顯得轉換的太突兀和莫名其妙。
適合場景:當用戶在元素之間切換?;瑒有Ч鄬碚f比較單一和常見,使用動效切換可以讓用戶產生眼前一亮的效果,例如一些商品款式的切換,就可以使用這樣的效果
五、展開推疊
堆疊在一起的元素被展開。能夠清楚的告訴用戶每個元素的排列情況,從哪里來到哪里去,也顯得更加有趣。
適合場景:當用戶打開一堆功能選項的時候。例如一個功能里面隱藏了好幾個二級功能時,就可以使用這樣的效果,利于用戶引導。
千鋒教育ui設計課程將在移動端界面設計學習階段學習AE動效設計軟件,通過講師細致的講解和學員大膽的實戰(zhàn)訓練,學員將掌握自主進行動效設計的能力。把握時代潮流技術,融入前沿開發(fā)技能,嫻熟駕馭各種技法,千鋒教育ui設計給你不一樣的學習體驗。
千鋒教育:http://www.mobiletrain.org/
千鋒深圳校區(qū):http://sz.qfedu.com/?pinzhuan=biaoti
深圳西部硅谷校區(qū)地址:深圳市寶安區(qū)寶安大道5010號深圳西部硅谷A區(qū)B座605-619
深圳大學城校區(qū)地址:深圳市南山區(qū)留仙大道1201號大學城創(chuàng)客小鎮(zhèn)16棟2樓、3樓
培訓咨詢專線:0755-33582485-801(硅谷校區(qū))0755-86660670-801(大學城校區(qū))
咨 詢 QQ : 1660794050
面授課程:全棧HTML5+培訓、UI交互設計培訓、PHP培訓、Java+云數(shù)據(jù)培訓、大數(shù)據(jù)開發(fā)培訓、VR/AR/Unity游戲開發(fā)培訓、Python培訓、Linux云計算培訓、全棧軟件測試培訓、Android培訓、iOS培訓、好程序員