奇酷教育-UI培訓(xùn)_UI培訓(xùn)班_UI設(shè)計(jì)_UI設(shè)計(jì)培訓(xùn)班
動(dòng)效主要是通過(guò)UI元素之間關(guān)係過(guò)渡來(lái)幫助用戶(hù)瀏覽App。當(dāng)然還可以通過(guò)使用圖標(biāo)、勳章以及插畫動(dòng)效來(lái)為App增色,但是建立產(chǎn)品可用性應(yīng)該優(yōu)先於增加動(dòng)效表現(xiàn)力。在展示你的動(dòng)效設(shè)計(jì)技巧之前,讓我們先從設(shè)計(jì)一個(gè)基本的動(dòng)效開(kāi)始,即產(chǎn)品導(dǎo )航之間的過(guò)渡。
在設(shè)計(jì)導(dǎo )航之間進(jìn)行動(dòng)效過(guò)渡時(shí),簡(jiǎn)單性和一致性是最關(guān)鍵的點(diǎn)。為了達(dá)到這個(gè)目的,我們將以下2種動(dòng)畫模式中進(jìn)行選擇:
1、基於容器的過(guò)渡。
2、沒有容器的過(guò)渡。
文本、圖標(biāo)和圖片等元素在容器內(nèi)進(jìn)行分組
如果動(dòng)畫涉及像按鈕,卡片或列表這樣的內(nèi)容,則使用基於容器的動(dòng)畫設(shè)計(jì),容器通常有很明顯的邊界,這種模式分為三個(gè)步驟:
1.使用Material的標(biāo)準(zhǔn)緩動(dòng)為容器設(shè)置動(dòng)畫(意味著它可以快速加速,然後逐漸的慢下來(lái))。在下圖的示例中,容器的尺寸和圓角半徑從圓形按鈕動(dòng)畫過(guò)渡到填充整個(gè)屏幕的矩形。
2.縮放容器中的元素進(jìn)行寬度自適應(yīng),將元素固定在頂部但是仍然存在容器內(nèi),這樣在容器和內(nèi)部元素之間創(chuàng)建了清晰的關(guān)係鏈。
*放慢動(dòng)畫速度以說(shuō)明元素在容器內(nèi)如何縮放
3.隨著容器加速,在過(guò)渡期間逐漸淡出消失。當(dāng)容器減速時(shí)輸(shū)入的元素逐漸淡入。當(dāng)元素進(jìn)行快速移動(dòng)時(shí),通過(guò)淡入淡出來(lái)實(shí)現(xiàn)元素的更替。
*放慢動(dòng)畫速度以說(shuō)明元素如何使用淡出淡出
將此模式應(yīng)用於所有涉及容器過(guò)渡的動(dòng)效,這樣會(huì)建立起來(lái)一致的動(dòng)效規(guī)則。這樣還使得開(kāi)始和結(jié)束之間的關(guān)係更加清晰,因為它們是由兩(liǎng)個(gè)動(dòng)畫容器互相銜接的。為了展示這種模式的靈活性,這裡將它分為五種不同使用場(chǎng)景:
*放慢動(dòng)畫速度以說(shuō)明容器如何連接開(kāi)始和結(jié)束
有的容器只是使用Material的標(biāo)準(zhǔn)緩動(dòng)從屏幕外滑入,它滑動(dòng)的方向取決於與之關(guān)聯(lián)的組件位置。例如點(diǎn)擊左上角的抽屜導(dǎo )航,圖標(biāo)將從左側滑動(dòng)容器。
如果容器從屏幕邊界進(jìn)入,則它會(huì)淡入並放大。它並不是從0%的比例製作動(dòng)畫,而是從95%開(kāi)始,以避免元素之間的過(guò)渡幅度太大。縮放動(dòng)畫使用Material的減速緩動(dòng),這意味著它以峰值速度開(kāi)始並逐漸減速停止。在元素退出時(shí),容器會(huì)在沒有縮放動(dòng)畫的情況下淡出。為什麼退出動(dòng)畫會(huì)有這樣微妙的設(shè)計(jì)呢,這樣做是便於將注意力集中在新內(nèi)容上。
*放慢動(dòng)畫速度以說(shuō)明容器如何通過(guò)淡入淡出進(jìn)行縮放動(dòng)畫
有些作品將使用沒有容器的過(guò)渡來(lái)構(gòu )建動(dòng)效設(shè)計(jì),例如點(diǎn)擊底部導(dǎo )航中的圖標(biāo),將用戶(hù)帶到新的頁(yè)面,在這些情況下,將使用以下兩(liǎng)個(gè)步驟:
1、起始元素通過(guò)淡出消失,然後最終元素通過(guò)淡入進(jìn)入。
2、隨著最終元素逐漸出現(xiàn),使用Material的減速運(yùn)動(dòng)來(lái)巧妙的展現(xiàn)。但同時(shí)縮放僅適用於新舊內(nèi)容的替換(huàn)。
*放慢動(dòng)畫速度以說(shuō)明沒有容器的過(guò)渡如何使用淡入淡出和縮放
如果開(kāi)始和結(jié)束的組合元素具有清晰的空間或順序關(guān)係,則可以使用共享動(dòng)畫來(lái)強(qiáng)化它。例如當(dāng)下圖觸發(fā)導(dǎo )航組件時(shí),開(kāi)始和結(jié)束的動(dòng)畫都在垂直維度進(jìn)行滑動(dòng),這加強(qiáng)了他們的垂直布局。當(dāng)點(diǎn)擊下右圖入門(mén)流程中的下一個(gè)按鈕時(shí),從左向右水平動(dòng)畫強(qiáng)化了序列進(jìn)行的的概念。共享動(dòng)畫使用Material的標(biāo)準(zhǔn)緩動(dòng)。
*減慢動(dòng)畫以說(shuō)明垂直和水平共享動(dòng)畫
鑑於其動(dòng)畫頻率高低與產(chǎn)品可用性密切相關(guān),導(dǎo )航過(guò)渡通常應(yīng)該優(yōu)先於功能展示。引人注目的動(dòng)畫通常最適用於小圖標(biāo),勳章,加載或空狀態(tài)等元素。下面這個(gè)簡(jiǎn)單的案例可能不會(huì)得到Dribbble的那麼多關(guān)注,但是它更像一個(gè)真實(shí)的產(chǎn)品。
*放慢動(dòng)畫速度以顯示不同的動(dòng)畫風(fēng)格
導(dǎo )航過(guò)渡應(yīng)該使用合適的時(shí)間,快速過(guò)渡優(yōu)先考慮功能,但是速度也不要太快,防止動(dòng)畫路徑迷失。根據(jù)動(dòng)畫佔用的屏幕比例來(lái)選擇動(dòng)畫持續(xù)時(shí)間。由於導(dǎo )航過(guò)渡通常佔據(jù)屏幕的大部分,因此300ms是一個(gè)比較有經(jīng)驗(yàn)的動(dòng)畫時(shí)長(zhǎng)。相比之下,像開(kāi)關(guān)按鈕這種小組件動(dòng)畫持續(xù)時(shí)間很短,大概在100ms左右。如果過(guò)渡感覺太快或太慢,請以25ms的增量調(diào)整其持續(xù)時(shí)間,直到它達(dá)到合適的動(dòng)畫節(jié)奏。
Easing描述了動(dòng)畫加速和減速。大多數(shù)導(dǎo )航過(guò)渡使用Material的標(biāo)準(zhǔn)緩動(dòng),這是一種不對(duì)稱(chēng)的緩動(dòng)類(lèi)型。這意味著元素會(huì)快速加速運(yùn)動(dòng),然後緩慢減速以將注意力集中在動(dòng)畫結(jié)束時(shí)。這種類(lèi)型的緩動(dòng)為動(dòng)畫提供了自然的感覺,因為現(xiàn)實(shí)世界中的物體不會(huì)立即開(kāi)始或停止移動(dòng)。如果動(dòng)畫看起來(lái)很僵硬或死板,那麼可能是由於你選錯了緩動(dòng)類(lèi)型。
*放慢動(dòng)畫速度以說(shuō)明不同的緩動(dòng)類(lèi)型
本文所說(shuō)的動(dòng)效模式在建立一種實(shí)用而又微妙的動(dòng)畫風(fēng)格。這適用於大多數(shù)產(chǎn)品,但某些品牌可能需要更激進(jìn)的動(dòng)效表達(dá)。要了解更多有關(guān)動(dòng)效的內(nèi)容,請閱讀Material motion指南。
一旦處理好了導(dǎo )航之間的過(guò)渡動(dòng)畫,在你的產(chǎn)品中添加角色動(dòng)畫的挑戰就開(kāi)始了。這意味著簡(jiǎn)單動(dòng)畫模式是不夠的,這時(shí)候動(dòng)傳統(tǒng)的動(dòng)畫工藝會(huì)真正閃耀起來(lái)。
角色動(dòng)畫可以增加趣味性
Python交流群
635448130點(diǎn)擊加入群聊UI設(shè)計(jì)交流群
579150876點(diǎn)擊加入群聊Unity交流群
495609038點(diǎn)擊加入群聊HTML5交流群
645591648點(diǎn)擊加入群聊