產(chǎn)品如何快速構(gòu)建ui動(dòng)效

      產(chǎn)品如何快速構(gòu)建ui動(dòng)效？如果容器從屏幕邊界進(jìn)入，它會(huì)淡入并放大。它不從0%開(kāi)始制作動(dòng)畫，而是從95%開(kāi)始，以避免元素之間過(guò)渡太多。下面來(lái)講講產(chǎn)品如何快速構(gòu)建ui動(dòng)效，希望對(duì)你有幫助。

      移動(dòng)性有助于使ui更具表現(xiàn)力，更易于使用。盡管它有很大的潛力，但它可能是ui設(shè)計(jì)家族中最新的成員之一，所以它可能是所有設(shè)計(jì)學(xué)科中最少的。為公眾所知。視覺(jué)設(shè)計(jì)和交互設(shè)計(jì)可以追溯到早期的Gui，但是由于動(dòng)畫必須由現(xiàn)代硬件平滑地呈現(xiàn)，而且ui運(yùn)動(dòng)和傳統(tǒng)動(dòng)畫之間的重疊使得兩者之間的區(qū)別更加復(fù)雜。傳統(tǒng)動(dòng)畫需要掌握迪士尼的12條基本原則。這是否意味著ui動(dòng)畫和傳統(tǒng)動(dòng)畫一樣復(fù)雜?我經(jīng)常聽(tīng)到人們說(shuō)動(dòng)效設(shè)計(jì)很復(fù)雜，我不知道如何選擇相應(yīng)的動(dòng)畫模式，但我認(rèn)為至少在ui領(lǐng)域，動(dòng)效設(shè)計(jì)可以很簡(jiǎn)單。

      動(dòng)效設(shè)計(jì)主要作用是幫助用戶瀏覽應(yīng)用程序，通過(guò)ui元素之間的關(guān)系過(guò)渡。當(dāng)然，你也可以通過(guò)使用圖標(biāo)、獎(jiǎng)?wù)潞筒鍒D效果為應(yīng)用程序添加顏色，但是構(gòu)建產(chǎn)品可用性應(yīng)該優(yōu)先于添加動(dòng)態(tài)性能。在展示你的動(dòng)效設(shè)計(jì)技能之前，讓我們先設(shè)計(jì)一個(gè)基本的運(yùn)動(dòng)，即產(chǎn)品導(dǎo)航之間的轉(zhuǎn)換。

      過(guò)渡模式

      在設(shè)計(jì)導(dǎo)航之間進(jìn)行轉(zhuǎn)換時(shí)，簡(jiǎn)單性和一致性是最關(guān)鍵的。為此，我們將在以兩種動(dòng)畫模式進(jìn)行選擇:

      1. 基于容器的過(guò)渡

      2. 沒(méi)有到容器的轉(zhuǎn)換

      如果動(dòng)畫包含按鈕、卡片或列表等內(nèi)容，那么使用基于容器的動(dòng)畫設(shè)計(jì)，容器通常有明顯的邊界。這個(gè)模式分為三個(gè)步驟:

      1. 使用材質(zhì)的標(biāo)準(zhǔn)緩動(dòng)使容器具有動(dòng)畫效果(這意味著它可以快速加速，然后緩慢減速)。

      2. 縮放容器中的元素以適應(yīng)寬度，將元素固定在頂部，但仍然在容器中，在容器和內(nèi)部元素之間創(chuàng)建一個(gè)清晰的關(guān)系鏈。

      3.當(dāng)容器加速時(shí)，它會(huì)在轉(zhuǎn)換期間淡出。隨著容器變慢，輸入元素逐漸淡入。當(dāng)元素快速移動(dòng)時(shí)，元素被淡入替換。

      將此模式應(yīng)用于所有涉及容器轉(zhuǎn)換的效果，這些轉(zhuǎn)換建立一致的運(yùn)動(dòng)規(guī)則。這也使得開(kāi)始和結(jié)束之間的關(guān)系更加清晰，因?yàn)樗鼈冇蓛蓚�(gè)動(dòng)畫容器連接。為了展示這個(gè)模型的靈活性，它被分為五個(gè)不同的使用場(chǎng)景:

      有些容器只是使用材質(zhì)的標(biāo)準(zhǔn)緩動(dòng)功能從屏幕上滑動(dòng)進(jìn)來(lái)，它滑動(dòng)的方向取決于與之關(guān)聯(lián)的組件位置。例如，單擊左上角的折疊項(xiàng)導(dǎo)航，圖標(biāo)將從左側(cè)滑動(dòng)容器。

      如果容器從屏幕邊界進(jìn)入，它會(huì)淡入并放大。它不從0%開(kāi)始制作動(dòng)畫，而是從95%開(kāi)始，以避免元素之間過(guò)渡太多。變焦動(dòng)畫使用了材質(zhì)的減速，這意味著它從峰值速度開(kāi)始，然后逐漸減速。當(dāng)元素退出時(shí)，容器將在沒(méi)有縮放動(dòng)畫的情況下淡出。

      過(guò)渡沒(méi)有容器

      有些作品會(huì)使用沒(méi)有容器的轉(zhuǎn)換來(lái)構(gòu)建動(dòng)態(tài)設(shè)計(jì)，例如點(diǎn)擊底部導(dǎo)航欄中的圖標(biāo)，將用戶帶到一個(gè)新的頁(yè)面，在這種情況下，將使用以下兩個(gè)步驟:

      1. 開(kāi)始的元素通過(guò)淡入消失，然后最后的元素通過(guò)淡入進(jìn)入。

      2. 當(dāng)最后一個(gè)元素出現(xiàn)時(shí)，使用材料的減速運(yùn)動(dòng)來(lái)微妙地顯示。但同時(shí)縮放只適用于新舊內(nèi)容的替換。

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://m.hebeijilong.cn/news-id-40677.html 違者必究！部分文章來(lái)源于網(wǎng)絡(luò)由培訓(xùn)無(wú)憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注UI設(shè)計(jì)頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050