99久久精品国产片-99久久精品国产免费-99久久精品国产麻豆-99久久精品国产国产毛片-99久久精品国产高清一区二区-99久久精品费精品国产一区二区

如何為產(chǎn)品快速構(gòu)建合理的UI動(dòng)效

2019-5-30 濤濤

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

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

從哪里開始

動(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í)，簡單性和一致性是最關(guān)鍵的點(diǎn)。為了達(dá)到這個(gè)目的，我們將以下2種動(dòng)畫模式中進(jìn)行選擇：

1、基于容器的過渡。

2、沒有容器的過渡。

基于容器的過渡

Image title

文本、圖標(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)畫（意味著它可以快速加速，然后逐漸的慢下來）。在下圖的示例中，容器的尺寸和圓角半徑從圓形按鈕動(dòng)畫過渡到填充整個(gè)屏幕的矩形。

Image title

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

Image title

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

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

Image title

*放慢動(dòng)畫速度以說明元素如何使用淡出淡出

將此模式應(yīng)用于所有涉及容器過渡的動(dòng)效，這樣會(huì)建立起來一致的動(dòng)效規(guī)則。這樣還使得開始和結(jié)束之間的關(guān)系更加清晰，因?yàn)樗鼈兪怯蓛蓚€(gè)動(dòng)畫容器互相銜接的。為了展示這種模式的靈活性，這里將它分為五種不同使用場景：

Image title

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

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

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

Image title

*放慢動(dòng)畫速度以說明容器如何通過淡入淡出進(jìn)行縮放動(dòng)畫

沒有容器的過渡

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

1、起始元素通過淡出消失，然后最終元素通過淡入進(jìn)入。

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

Image title

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

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

Image title

*減慢動(dòng)畫以說明垂直和水平共享動(dòng)畫

最佳方案

把事情變的更簡單一些

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

Image title

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

選擇合適的時(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í)長。相比之下，像開關(guān)按鈕這種小組件動(dòng)畫持續(xù)時(shí)間很短，大概在100ms左右。如果過渡感覺太快或太慢，請(qǐng)以25ms的增量調(diào)整其持續(xù)時(shí)間，直到它達(dá)到合適的動(dòng)畫節(jié)奏。

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

Image title

*放慢動(dòng)畫速度以說明不同的緩動(dòng)類型

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

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

Image title