日韩午夜福利a无码,三级亚洲中文字幕,免费高清av一区二区三区,国产精品白丝祙喷水视频

您現(xiàn)在所在的位置:首頁 >關(guān)于奇酷 > 行業(yè)動態(tài) > UI設(shè)計師如何為產(chǎn)品快速構(gòu)建合理的UI動效

UI設(shè)計師如何為產(chǎn)品快速構(gòu)建合理的UI動效

來源:奇酷教育 發(fā)表于:

奇酷教育-UI培訓(xùn)_UI培訓(xùn)班_UI設(shè)計_UI設(shè)計培訓(xùn)班

動效有助于讓UI具有更好的表現(xiàn)力及更易于使用,盡管具有如此大的潛力,但可能由于它是UI設(shè)計家族中的新成員之一,所以它大概是所有設(shè)計學(xué)科中最不被大眾所了解的。視覺設(shè)計和交互設(shè)計可追溯到早期的GUI,但由于動畫必須由現(xiàn)代硬件來順暢的渲染,而且UI動效和傳統(tǒng)動畫之間的重疊區(qū)間也使得兩者之間的區(qū)分變得復(fù)雜。傳統(tǒng)動畫需要掌握迪斯尼的12個基本原則,那么這是否意味著UI動效也像傳統(tǒng)動畫一樣復(fù)雜?我經(jīng)常能聽到人們說,動效設(shè)計很復(fù)雜,不知道如何選擇相對應(yīng)的動畫模式,但是我認(rèn)為至少在UI領(lǐng)域,動效設(shè)計是可以很簡單的。

 

從哪里開始

動效主要是通過UI元素之間關(guān)系過渡來幫助用戶瀏覽App。當(dāng)然還可以通過使用圖標(biāo)、勛章以及插畫動效來為App增色,但是建立產(chǎn)品可用性應(yīng)該優(yōu)先于增加動效表現(xiàn)力。在展示你的動效設(shè)計技巧之前,讓我們先從設(shè)計一個基本的動效開始,即產(chǎn)品導(dǎo)航之間的過渡。

過渡模式

在設(shè)計導(dǎo)航之間進行動效過渡時,簡單性和一致性是最關(guān)鍵的點。為了達到這個目的,我們將以下2種動畫模式中進行選擇:

1、基于容器的過渡。

2、沒有容器的過渡。

基于容器的過渡 

Image title

文本、圖標(biāo)和圖片等元素在容器內(nèi)進行分組

 

如果動畫涉及像按鈕,卡片或列表這樣的內(nèi)容,則使用基于容器的動畫設(shè)計,容器通常有很明顯的邊界,這種模式分為三個步驟:

1.使用Material的標(biāo)準(zhǔn)緩動為容器設(shè)置動畫(意味著它可以快速加速,然后逐漸的慢下來)。在下圖的示例中,容器的尺寸和圓角半徑從圓形按鈕動畫過渡到填充整個屏幕的矩形。

Image title

 

2.縮放容器中的元素進行寬度自適應(yīng),將元素固定在頂部但是仍然存在容器內(nèi),這樣在容器和內(nèi)部元素之間創(chuàng)建了清晰的關(guān)系鏈。

Image title

*放慢動畫速度以說明元素在容器內(nèi)如何縮放

 

3.隨著容器加速,在過渡期間逐漸淡出消失。當(dāng)容器減速時輸入的元素逐漸淡入。當(dāng)元素進行快速移動時,通過淡入淡出來實現(xiàn)元素的更替。

Image title

*放慢動畫速度以說明元素如何使用淡出淡出

 

將此模式應(yīng)用于所有涉及容器過渡的動效,這樣會建立起來一致的動效規(guī)則。這樣還使得開始和結(jié)束之間的關(guān)系更加清晰,因為它們是由兩個動畫容器互相銜接的。為了展示這種模式的靈活性,這里將它分為五種不同使用場景:

Image title

*放慢動畫速度以說明容器如何連接開始和結(jié)束

 

有的容器只是使用Material的標(biāo)準(zhǔn)緩動從屏幕外滑入,它滑動的方向取決于與之關(guān)聯(lián)的組件位置。例如點擊左上角的抽屜導(dǎo)航,圖標(biāo)將從左側(cè)滑動容器。

如果容器從屏幕邊界進入,則它會淡入并放大。它并不是從0%的比例制作動畫,而是從95%開始,以避免元素之間的過渡幅度太大??s放動畫使用Material的減速緩動,這意味著它以峰值速度開始并逐漸減速停止。在元素退出時,容器會在沒有縮放動畫的情況下淡出。為什么退出動畫會有這樣微妙的設(shè)計呢,這樣做是便于將注意力集中在新內(nèi)容上。

Image title

*放慢動畫速度以說明容器如何通過淡入淡出進行縮放動畫

 

沒有容器的過渡

有些作品將使用沒有容器的過渡來構(gòu)建動效設(shè)計,例如點擊底部導(dǎo)航中的圖標(biāo),將用戶帶到新的頁面,在這些情況下,將使用以下兩個步驟:

1、起始元素通過淡出消失,然后最終元素通過淡入進入。

2、隨著最終元素逐漸出現(xiàn),使用Material的減速運動來巧妙的展現(xiàn)。但同時縮放僅適用于新舊內(nèi)容的替換。

Image title

*放慢動畫速度以說明沒有容器的過渡如何使用淡入淡出和縮放

 

如果開始和結(jié)束的組合元素具有清晰的空間或順序關(guān)系,則可以使用共享動畫來強化它。例如當(dāng)下圖觸發(fā)導(dǎo)航組件時,開始和結(jié)束的動畫都在垂直維度進行滑動,這加強了他們的垂直布局。當(dāng)點擊下右圖入門流程中的下一個按鈕時,從左向右水平動畫強化了序列進行的的概念。共享動畫使用Material的標(biāo)準(zhǔn)緩動。

Image title

*減慢動畫以說明垂直和水平共享動畫

 

最佳方案

把事情變的更簡單一些

鑒于其動畫頻率高低與產(chǎn)品可用性密切相關(guān),導(dǎo)航過渡通常應(yīng)該優(yōu)先于功能展示。引人注目的動畫通常最適用于小圖標(biāo),勛章,加載或空狀態(tài)等元素。下面這個簡單的案例可能不會得到Dribbble的那么多關(guān)注,但是它更像一個真實的產(chǎn)品。

Image title

*放慢動畫速度以顯示不同的動畫風(fēng)格

 

選擇合適的時間及緩動類型

導(dǎo)航過渡應(yīng)該使用合適的時間,快速過渡優(yōu)先考慮功能,但是速度也不要太快,防止動畫路徑迷失。根據(jù)動畫占用的屏幕比例來選擇動畫持續(xù)時間。由于導(dǎo)航過渡通常占據(jù)屏幕的大部分,因此300ms是一個比較有經(jīng)驗的動畫時長。相比之下,像開關(guān)按鈕這種小組件動畫持續(xù)時間很短,大概在100ms左右。如果過渡感覺太快或太慢,請以25ms的增量調(diào)整其持續(xù)時間,直到它達到合適的動畫節(jié)奏。

Easing描述了動畫加速和減速。大多數(shù)導(dǎo)航過渡使用Material的標(biāo)準(zhǔn)緩動,這是一種不對稱的緩動類型。這意味著元素會快速加速運動,然后緩慢減速以將注意力集中在動畫結(jié)束時。這種類型的緩動為動畫提供了自然的感覺,因為現(xiàn)實世界中的物體不會立即開始或停止移動。如果動畫看起來很僵硬或死板,那么可能是由于你選錯了緩動類型。

Image title

*放慢動畫速度以說明不同的緩動類型

 

本文所說的動效模式在建立一種實用而又微妙的動畫風(fēng)格。這適用于大多數(shù)產(chǎn)品,但某些品牌可能需要更激進的動效表達。要了解更多有關(guān)動效的內(nèi)容,請閱讀Material motion指南。

一旦處理好了導(dǎo)航之間的過渡動畫,在你的產(chǎn)品中添加角色動畫的挑戰(zhàn)就開始了。這意味著簡單動畫模式是不夠的,這時候動傳統(tǒng)的動畫工藝會真正閃耀起來。

Image title

角色動畫可以增加趣味性