亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁 > SEO動態(tài) > 網(wǎng)站技術(shù)用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

最近梳理了 UI 動效的入門級基礎(chǔ)知識進(jìn)行分享,結(jié)合了主流系統(tǒng)官方指南和自己的理解,附有大量動圖幫你更好理解,具體往下看吧!

相關(guān)推薦:

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

UI 動效的作用

1. 提供用戶引導(dǎo)

通過動效可以幫助用戶更好的理解如何進(jìn)行操作,引導(dǎo)用戶接下來的行為。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

2. 建立層級結(jié)構(gòu)

在進(jìn)行導(dǎo)航時,合適的動畫能夠使用戶明確界面以及元素之間的層級關(guān)系,幫助用戶在腦海中形成應(yīng)用的層次結(jié)構(gòu)。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

3. 加強(qiáng)反饋和理解

在用戶進(jìn)行操作后,動效反饋可以告訴用戶操當(dāng)前正處于什么狀態(tài)。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

4. 過渡連續(xù)流暢

對象在場景與場景之間移動或在場景內(nèi)變形時,通過動效設(shè)計可以保持過渡平滑、連續(xù);避免轉(zhuǎn)場生硬所帶來的認(rèn)知負(fù)載。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

5. 增加趣味活力

借助動效可以為常見的交互添加個性,為體驗增加了趣味與活力,在移動端應(yīng)用中,還經(jīng)常會借助動效設(shè)計來傳達(dá)品牌風(fēng)格。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

6. 集中用戶注意力

通過動效使用戶將注意力集中在重要的事情上,而不會造成不必要的分心。例如應(yīng)用中新增活動的入口圖標(biāo)可以通過微動效來吸引用戶注意。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

7. 預(yù)知操作結(jié)果

通過預(yù)覽行動結(jié)果能夠建立用戶信心并減少操作錯誤成本。例如,將圖片進(jìn)行移動時,圖片布局隨之變化。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

8. 運動畫面一致

共享同一 UI 入口點的元素應(yīng)以相同的方法調(diào)用和關(guān)閉,保持運動行為統(tǒng)一,可以使畫面感覺一致。例如:PC 端的任務(wù)欄調(diào)用時,任務(wù)欄的所有窗口出現(xiàn)時向上滑出,關(guān)閉時向下滑出;以及移動端的底欄 icon 動效設(shè)計。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

UI 動效的基本要素

1. 變化屬性

設(shè)計師在制作動效時可以通過對元素的透明度、位置、大小、旋轉(zhuǎn)、形狀、顏色等屬性進(jìn)行變化,將一個或幾個屬性組合,進(jìn)行動效編排。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

2. 動畫時間

在進(jìn)行動畫制作時,持續(xù)時間的快慢直接影響用戶的感受,過快的動畫會讓用戶感知不到變化,過慢的動畫則可能會造成電腦卡頓、響應(yīng)速度慢的錯覺,使用戶不耐煩;合理的規(guī)定一個標(biāo)準(zhǔn)動畫持續(xù)時間值很有必要。下面給出了一些 UI 過渡動效的最佳動效持續(xù)時間(有參考自 Material 和 Windows 官方動效指南相關(guān)理論)

Tip:規(guī)范只是用來做設(shè)計時的一個合理值參考,我們作為設(shè)計師不必嚴(yán)格遵守,還是根據(jù)自己的應(yīng)用需求和品牌調(diào)性,靈活設(shè)計。

元素面積、變化大小和過渡區(qū)域影響持續(xù)時間

通常來說,較小的過渡區(qū)域或較簡單的過渡編排,動畫的持續(xù)時間更短;反之,較大的過渡區(qū)域或較復(fù)雜的過渡編排,動效的持續(xù)時間則更長。例如:相同大小的兩個物體,移動距離越長,持續(xù)時間越長。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

移動端 UI 動效的最佳持續(xù)時間在 200ms-300ms

移動端 UI 動效的持續(xù)時間可以控制在:小區(qū)域過渡 100ms-150ms,中區(qū)域過渡 200ms-250ms,大區(qū)域過渡 250ms-300ms。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

平板 UI 動效的最佳持續(xù)時間在:250ms-400ms

平板的動畫持續(xù)時間因為設(shè)備尺寸的原因,過渡范圍比移動端更大,可以在移動端的基礎(chǔ)上將動效持續(xù)時間增加 30%左右:小區(qū)域過渡 150ms-2000ms,中區(qū)域過渡 250ms-350ms,大區(qū)域過渡 350ms-400ms。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

PC 端 UI 動效的最佳持續(xù)時間在 150ms-250ms

一般來說,pc 端的動畫持續(xù)時間要比移動端更快、更簡單;綜合 windows 官方指南的標(biāo)準(zhǔn)動畫持續(xù)時間值,我們可以將動畫設(shè)定在 150ms-250ms 最佳,相對復(fù)雜或變化稍大的動畫可延伸至 300ms。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

3. 緩動曲線

加速曲線

用于正在退出場景的元素;這種動效在剛開始時變化緩慢,速度隨時間逐漸增加,這意味著元素在做加速度運動;由此產(chǎn)生的感覺是,對象快速離開,并為新內(nèi)容的進(jìn)入騰出空間。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

減速曲線

用于正在進(jìn)入場景的元素;這種動效在剛開始時變化較快,速度隨時間逐漸降低,直到元素最終停止;由此產(chǎn)生的感覺是,對象從遠(yuǎn)方行進(jìn),以極快的速度進(jìn)入,再逐漸恢復(fù)到靜止?fàn)顟B(tài)。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

標(biāo)準(zhǔn)緩動曲線(緩入緩出)

這是最常見的緩動曲線,同時具備緩入和緩出,適用于很多動效場景,例如增加或減少界面元素。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

彈性曲線

彈性曲線模擬的是現(xiàn)實生活中的彈簧效果,元素經(jīng)歷多次回彈后恢復(fù)靜止;例如圖標(biāo)點擊前后的狀態(tài)變化、對話框的出現(xiàn)會使用到這種效果。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

UI 動效的過渡類型

1. 共享過渡軸

共享軸模式用于具有空間或?qū)Ш疥P(guān)系的 UI 元素之間的轉(zhuǎn)換。此模式通過在 x、y 或 z 軸上過渡來加強(qiáng)元素之間的關(guān)系。例如,在頂部標(biāo)簽欄想要切換標(biāo)簽板塊時,可以通過在同一水平方向的移動來表現(xiàn)其關(guān)聯(lián)性和層級關(guān)系。

x 軸

X 軸過渡加強(qiáng)了 UI 元素之間的水平布局或?qū)蛹墝?dǎo)航關(guān)系;元素沿 x 軸一致變換。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

y 軸

Y 軸過渡加強(qiáng)了 UI 元素之間的垂直布局或?qū)蛹墝?dǎo)航關(guān)系;元素沿 y 軸一致變換。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

z 軸

Z 軸過渡表示在應(yīng)用的層次結(jié)構(gòu)中向上或向下移動一級;元素沿 z 軸向前或向后變換。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

2. 淡入淡出

淡入淡出模式大多用于相互之間沒有強(qiáng)關(guān)系的 UI 元素之間的過渡。

單向淡入或淡出

在同一轉(zhuǎn)場中,進(jìn)場元素淡入或退場元素淡出,不影響當(dāng)前頁面的布局;例如對話框、菜單的出現(xiàn)或消失。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

交叉淡入淡出

在同一轉(zhuǎn)場中,進(jìn)場元素淡入和退場元素淡出同時交錯進(jìn)行,從當(dāng)前頁面轉(zhuǎn)換到另一個頁面;這種方式常用于兩個不同頁面間的過渡。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

3. 容器轉(zhuǎn)換

容器是用來表示封閉區(qū)域的形狀,例如按鈕、列表、卡片表面。

容器轉(zhuǎn)換是在包含容器的 UI 元素之間的轉(zhuǎn)換,在兩個 UI 元素之間創(chuàng)建可見的連接。通過將一個元素?zé)o縫過渡到另一個元素,使兩個元素的關(guān)系得到了加強(qiáng)。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

4. 共享元素轉(zhuǎn)場

在轉(zhuǎn)場時,被選中的 UI 元素在轉(zhuǎn)場前后的視圖中進(jìn)行可視化的移動或縮放等,這樣做可以鞏固用戶的空間心理模型、強(qiáng)調(diào)轉(zhuǎn)場前后的空間關(guān)系。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

UI 動效的編排技巧

1. 時序

退場元素要比進(jìn)場元素的動效開始時間早

通常,這樣的時間排序可以避免視覺上的紊亂,更加有序的呈現(xiàn)動畫效果。

退場元素持續(xù)時間相對短,進(jìn)場元素相對長

退場元素一般比進(jìn)場元素持續(xù)時間更短,這樣可以使退場元素快速消失,使用戶更多聚焦在即將出現(xiàn)的新內(nèi)容上。

進(jìn)場元素一般比退場元素持續(xù)時間更長,這樣能給用戶一種新的內(nèi)容逐漸出現(xiàn)在眼前的感受。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

2. 時差

時差就是利用 UI 元素的時間延遲差實現(xiàn)一種有層次感的過渡效果,也可以用于強(qiáng)調(diào) UI 元素。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

3. 視差

在 UI 滾動或平移時,通過不同的速率移動不同的對象可以創(chuàng)建視差效果,而速度的調(diào)整由持續(xù)時間(過渡持續(xù)多長時間)和運動曲線決定。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

4. 路徑

如果過渡中的元素沿對角線移動,則它們所遵循的路徑可以是線性的或弧形的。線性運動路徑具有簡單而實用的風(fēng)格,而弧形運動路徑則創(chuàng)造了更加強(qiáng)調(diào)和個性的風(fēng)格。可以根據(jù)自己的應(yīng)用調(diào)性來選擇使用哪種運動路徑。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

5. 引力

重力通常會在對象需要從一個場景跳轉(zhuǎn)到另一個場景時發(fā)生作用。當(dāng)一個物體脫離場景,重力會拉下該物體,在其移動時產(chǎn)生一條更自然的物體軌跡曲線。因此,有元素連接的動畫會使用重力的概念。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

6. 振蕩

默認(rèn)情況下,動效在到達(dá)終點時會結(jié)束,但添加振蕩時,過渡路徑至少超過其端點一次,然后反向返回端點。振蕩可以用來表達(dá)一種更加俏皮和充滿活力的過渡風(fēng)格。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

7. 觸底反彈

觸底反彈是當(dāng)我們在滾動應(yīng)用到達(dá)最底部或最頂部時,會出現(xiàn)回彈效果,這種通常還可以跟功能進(jìn)行結(jié)合,例如下滑刷新或進(jìn)入新的頁面,上滑出現(xiàn)彩蛋等。

用超多案例,幫你掌握 UI 動效基礎(chǔ)設(shè)計知識

本文分享暫到這里,點贊加收藏,數(shù)量多的話我會繼續(xù)出下篇哦

作者:小張同學(xué)H

想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)

本文來源:http://www.sonygallery.com.cn/seodongtai/17713.html

免責(zé)聲明:部分文章信息來源于網(wǎng)絡(luò)以及網(wǎng)友投稿,本網(wǎng)站只負(fù)責(zé)對文章進(jìn)行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點或證實其內(nèi)容的真實性,不承擔(dān)任何法律責(zé)任。