心里有三個(gè)思維方向幫助你快速學(xué)習(xí)UI設(shè)計(jì)
在UI設(shè)計(jì)中,動(dòng)效可以有更好的變現(xiàn)力,也更便于接受,但就目前而言,UI動(dòng)效對(duì)于很多人來說還相對(duì)陌生,那如何才能構(gòu)建隔離的UI動(dòng)效讓產(chǎn)品能為用戶帶來更好的體驗(yàn)?zāi)?下面,黑馬先鋒學(xué)院鄭州UI培訓(xùn)小編就分享三個(gè)方法幫助你構(gòu)建合理的UI動(dòng)效。
一、哪里開始
動(dòng)效主要是通過UI元素之間關(guān)系過渡來幫助用戶瀏覽App。當(dāng)然還可以通過使用圖標(biāo)、勛章以及插畫動(dòng)效來為App增色,但是建立產(chǎn)品可用性應(yīng)該優(yōu)先于增加動(dòng)效表現(xiàn)力。在展示你的動(dòng)效設(shè)計(jì)技巧之前,讓我們先從設(shè)計(jì)一個(gè)基本的動(dòng)效開始,即產(chǎn)品導(dǎo)航之間的過渡。
二、過渡模式
在設(shè)計(jì)導(dǎo)航之間進(jìn)行動(dòng)效過渡時(shí),簡(jiǎn)單性和一致性是 關(guān)鍵的點(diǎn)。為了達(dá)到這個(gè)目的,我們將以下2種動(dòng)畫模式中進(jìn)行選擇:
1、基于容器的過渡
如果動(dòng)畫涉及像按鈕,卡片或列表這樣的內(nèi)容,則使用基于容器的動(dòng)畫設(shè)計(jì),容器通常有很明顯的邊界。
2、沒有容器的過渡
有些作品將使用沒有容器的過渡來構(gòu)建動(dòng)效設(shè)計(jì),例如點(diǎn)擊底部導(dǎo)航中的圖標(biāo),將用戶帶到新的頁(yè)面。
心里有三個(gè)思維方向幫助你快速學(xué)習(xí)UI設(shè)計(jì)
三、 佳方案
1、把事情變的更簡(jiǎn)單一些
鑒于其動(dòng)畫頻率高低與產(chǎn)品可用性密切相關(guān),導(dǎo)航過渡通常應(yīng)該優(yōu)先于功能展示。引人注目的動(dòng)畫通常 適用于小圖標(biāo),勛章,加載或空狀態(tài)等元素。
2、選擇合適的時(shí)間及緩動(dòng)類型
導(dǎo)航過渡應(yīng)該使用合適的時(shí)間,快速過渡優(yōu)先考慮功能,但是速度也不要太快,防止動(dòng)畫路徑迷失。根據(jù)動(dòng)畫占用的屏幕比例來選擇動(dòng)畫持續(xù)時(shí)間。由于導(dǎo)航過渡通常占據(jù)屏幕的大部分,因此300ms是一個(gè)比較有經(jīng)驗(yàn)的動(dòng)畫時(shí)長(zhǎng)。相比之下,像開關(guān)按鈕這種小組件動(dòng)畫持續(xù)時(shí)間很短,大概在100ms左右。如果過渡感覺太快或太慢,請(qǐng)以25ms的增量調(diào)整其持續(xù)時(shí)間,直到它達(dá)到合適的動(dòng)畫節(jié)奏。
以上就是黑馬先鋒學(xué)院ui學(xué)校設(shè)計(jì)培訓(xùn)培訓(xùn)小編分享的構(gòu)建UI動(dòng)效的3種方法。一旦你能夠?yàn)楫a(chǎn)品構(gòu)建合理的UI動(dòng)效,那么將會(huì)給用戶帶來更好的體驗(yàn),從而產(chǎn)生效益。當(dāng)然UI動(dòng)效可以讓你的作品更生動(dòng)更能吸引用戶,可想要在競(jìng)爭(zhēng)激烈的職場(chǎng)中占有一席之地,就要不斷增加技能。