91成人精品,神马影院东京干,国产一级做a爰片久久 亚洲日韩欧美一区二区三区_国产AV无码专区亚洲AV

UI交互動效設(shè)計標(biāo)準(zhǔn)與規(guī)范探索

2021-5-18    seo達(dá)人

 

今天分享一篇在medium很火的文章《UI交互動效設(shè)計標(biāo)準(zhǔn)與規(guī)范探索》這篇文字將系統(tǒng)性的給你介紹UI交互動畫該如何深入研究,希望對您有用!

The ultimate guide to proper use of animation in UX

現(xiàn)如今,優(yōu)秀的界面動畫很能讓人產(chǎn)生深刻印象,甚至是帶來驚喜。它一方面表達(dá)了界面之間的交互過程,解釋說明如何使用應(yīng)用,另一方面也能正確引導(dǎo)用戶的注意力。在瀏覽關(guān)于動效的文章時,我發(fā)現(xiàn)幾乎所有的文章都只描述了特定的案例或者關(guān)于動畫的一般事實(shí),但是我還沒有遇到過任何一篇文章能夠清晰的描述所有關(guān)于界面動畫的使用規(guī)范。在這篇文章中我不會寫任何新的知識,我只是想把所有的主要原則和規(guī)范做一個收集歸納,這樣就能便于其他設(shè)計師進(jìn)行快速決策了。

動畫的速度和持續(xù)時間

當(dāng)界面元素改變他們的狀態(tài)和位置時,動畫的持續(xù)時間應(yīng)該以用戶能注意到又不用等待為標(biāo)準(zhǔn)。

1.gif

合適的動畫時長,既不要太快也不至于慢到讓用戶打哈欠。

大量的研究發(fā)現(xiàn)在界面中最優(yōu)的時間是200-500ms。這個數(shù)字是根據(jù)人類大腦的認(rèn)知水平得出來的。任何小于100ms的動畫是人類很難感知到的,而其他大于1秒的動畫又會讓用戶覺得有些延遲,不夠流暢。

2.gif

動畫的持續(xù)時間是使得界面流暢的關(guān)鍵

在手機(jī)上,谷歌設(shè)計規(guī)范同樣建議動畫的持續(xù)時間在200-300ms為宜。在平板電腦上,這個時間會稍微長30%,大約在400-450ms。原因很簡單,在更大的屏幕上,元素變化的位置路徑會更長?;诖耍诳纱┐髟O(shè)備中,持續(xù)時間又要縮短30%了,大約在150-200ms,因為小屏幕上元素變化的位置路徑會更短。

3.gif

設(shè)備的大小會影響動畫的持續(xù)時間

在網(wǎng)頁上又會是另外一種方式。由于我們習(xí)慣于在瀏覽器中快速打開網(wǎng)頁,所以我們也希望在不同的狀態(tài)之間能夠快速切換。所以,在網(wǎng)頁上的動畫應(yīng)該要比在手機(jī)上持續(xù)時間少2倍多,在150-200ms之間。一旦超過這個時間區(qū)間,用戶就會覺得網(wǎng)頁是不流暢的,或者覺得是不是網(wǎng)絡(luò)有了問題。

但是,如果你是在頁面中創(chuàng)建一些裝飾性的動畫或者目的是為了吸引用戶的注意力,此時就應(yīng)該拋棄這些規(guī)范,時間你可以做的更長一些。

4.gif

大界面中的動畫就一定是慢的嗎?并不一定。

還需要記住的一點(diǎn)就是,無論在什么平臺,動畫的持續(xù)時間不僅跟它的移動距離有關(guān),還跟它本身的大小有關(guān)系。小的元素或者變化不大的動畫應(yīng)該要移動的更快,而大的元素或者復(fù)雜的元素持續(xù)時間稍長一些看起來會更好。

在大小相同的對象中,移動距離最短的物體應(yīng)該最先停止。小的對象與大的對象相比較,小對象移動速度顯得更慢,因為會產(chǎn)生更大的偏移量。

5.gif

動畫的持續(xù)時間取決于物體的大小和移動的距離

當(dāng)對象發(fā)生碰撞時,根據(jù)物理原則,碰撞的能量必須在碰撞對象之間平均分布。而如果在界面中只能看到碰撞體的一部分回彈,往往會顯得不夠自然。因此,最好避免回彈效果,只在一些特殊情況下才用到它。

6.gif

避免使用彈跳效果,因為它會分散注意力。

物體的運(yùn)動軌跡應(yīng)該是清晰銳利的,所以盡量不要使用動態(tài)模糊(在AE中做動畫效果除外)。即使是在現(xiàn)在最新的設(shè)備上也很難重現(xiàn)這些效果,不能把這種動態(tài)模糊的動畫效果應(yīng)用到界面中。

7.gif

動畫中盡量不要使用動態(tài)模糊

列表項的出現(xiàn)應(yīng)該只允許有一個短暫的延遲。每一個新列表項的出現(xiàn)間隔應(yīng)該在20-25ms之間。元素出現(xiàn)太慢的話,會讓用戶感到很不爽。

8.gif

列表項出現(xiàn)的動畫應(yīng)該在20-25ms之間。

緩動

緩動可以讓物體運(yùn)動的更加自然。這是動畫的基本原理之一,在?Ollie Johnston 和 Frank Thomas所寫的《 The Illusion of Life: Disney Animation》書中有詳細(xì)的解釋。

為了讓動畫看起來不會覺得太過機(jī)械,物體的運(yùn)動應(yīng)該會同時伴有一些加速度,就像現(xiàn)實(shí)世界中的運(yùn)動一樣,不會有絕對勻速的運(yùn)動形式。

9.gif

緩動的物體會比較線性運(yùn)動的物體看起來更加自然

線性運(yùn)動

不受任何物理因素影響的運(yùn)動叫做勻速運(yùn)動,這種動畫在用戶眼中看來是非常的機(jī)械和不真實(shí)的。

所有的APP動畫都會用到動畫曲線。我將試著去解釋如何閱讀它們并說明它們的含義。下面的例子中,運(yùn)動就是勻速的,可以看到對象在相同的時間間隔中移動了相同的位置。

10.gif

線性運(yùn)動

線性動畫在什么時候會用到?舉個例子,對象僅改變它的顏色和透明度的時候會用到。一般來說,當(dāng)一個對象不改變它的位置而只是改變狀態(tài)時,可以嘗試用線性動畫來改變狀態(tài)。

緩入或者說加速曲線

我們可以在曲線上看到,在相同時間內(nèi),位置的變化會越來越大。這就說明一個物體是在進(jìn)行加速運(yùn)動。

11.gif

加速運(yùn)動曲線

這種曲線一般應(yīng)用在對象移出界面時,這些可能是系統(tǒng)通知,也可能只是界面中的卡片設(shè)計。但是記住,這種動畫曲線只是會用在物體移出界面時,而反過來就不適用了。

12.gif

加速曲線應(yīng)用在物體移出界面時

動畫曲線有助于表達(dá)正確的情緒。在下面的例子中,物體動畫的持續(xù)時間和位移大小都是相同的,但你會發(fā)現(xiàn)即使是曲線上一些微小的變化也會讓你看動畫的感受不同。

當(dāng)然,通過改變曲線,可以讓物體的運(yùn)動顯得更加真實(shí)自然。

13.gif

相同的持續(xù)時間和相同的位移變化,但是會有不同的感受

緩出或者說減速曲線

與緩入恰恰相反,物體的運(yùn)動在開始時位移變化很大,但是后面會越來越小直到最后完全停止。

14.gif

減速曲線

這種類型的運(yùn)動曲線通常是用在物體進(jìn)入界面中時——快速進(jìn)入屏幕然后再慢慢停下來,在不同卡片或?qū)ο髲钠聊煌膺M(jìn)入界面時可以應(yīng)用上。

15.gif

減速曲線在此時會讓動畫顯得更加自然

緩入緩出或者說標(biāo)準(zhǔn)曲線

這種曲線使物體有加速和減速的過程。這種類型的動畫在界面中是最常用的,當(dāng)你還在遲疑該用怎樣的動畫曲線時,選擇標(biāo)準(zhǔn)曲線準(zhǔn)沒錯。

16.gif

標(biāo)準(zhǔn)曲線

根據(jù)谷歌規(guī)范,建議最好是用一些非對稱曲線來使得物體運(yùn)動的更加自然真實(shí)。動畫的結(jié)尾會比動畫的開頭更加需要去強(qiáng)調(diào),這樣的結(jié)果是加速時間要小于減速時間。在這個情況下,動畫能夠引導(dǎo)用戶更加關(guān)注元素的結(jié)束部分,以至于關(guān)注到其新的狀態(tài)。

17.gif

注意觀察對稱與非對稱曲線的區(qū)別

緩入緩出動畫常被用在界面中對象從一個位置移動到另一個位置時。在這種情況下,動畫的目的是為了不讓人有過多不必要的關(guān)注。

18.gif

卡片的非對稱曲線運(yùn)動

同樣的情況還適用于,元素在界面中消失后用戶還能隨時顯示,抽屜導(dǎo)航就是這樣的例子。

19.gif

抽屜導(dǎo)航的收起過程就是應(yīng)用到了標(biāo)準(zhǔn)曲線

從很多例子中可以看出許多初學(xué)者都忽略了一個基本的規(guī)則——開始動畫不等同于結(jié)束動畫,應(yīng)該分別去設(shè)置,比如在抽屜導(dǎo)航動效中——打開是一個減速動畫但關(guān)閉時卻是一個標(biāo)準(zhǔn)曲線動畫。另外,根據(jù)谷歌設(shè)計規(guī)范,物體出現(xiàn)的動畫持續(xù)時間應(yīng)該略長,以吸引用戶更多的注意力。

20.gif

側(cè)邊欄的動畫是配合減速曲線和標(biāo)準(zhǔn)曲線一起來實(shí)現(xiàn)的

有一個立方貝塞爾函數(shù)常用來描述這種速度曲線。之所以叫立方是因為它是基于2個點(diǎn)來的。第一個點(diǎn)在坐標(biāo)軸中是(0,0)(左下),最后一個點(diǎn)是(1,1)(右上)。

基于此,我們只需要描述圖上的兩個點(diǎn),這是由貝塞爾函數(shù)的四個參數(shù)給出的:前兩個是第一個點(diǎn)的坐標(biāo)x和y,后兩個是第二個點(diǎn)的坐標(biāo)x和y。

為了便于實(shí)際工作,我建議使用2個工具網(wǎng)站來操作

https://easings.net/zh-cn

http://cubic-bezier.com

第一個包含一些最常使用的曲線列表,可以直接將其復(fù)制到原型工具中去。第二個是可以給你自己自定義動畫的曲線,并能實(shí)時查看效果。

21.gif

不同類型的動畫曲線以及他們不同的參數(shù)

動畫在界面中的編排

就像芭蕾舞編排一樣,主要思想是從一個狀態(tài)到另一個狀態(tài)的過渡引導(dǎo)用戶注意力方向。

一般會有2種編排形式——同級動畫和從屬動畫。

同級動畫

同級動畫意味著所有對象的外觀都服從一個特定的規(guī)則。

在這種情況下,所有卡片都按一個相同的流程出現(xiàn),引導(dǎo)用戶注意力在一個方向上,即從上到下。如果我們不按照這個順序,用戶的注意力就會分散,如果所有元素同時出現(xiàn)也會很糟糕。

22.gif

用戶的注意力應(yīng)被引導(dǎo)在一個方向上

至于表格視圖,就會略微有些復(fù)雜。這種情況下,用戶往往是以對角線為焦點(diǎn)去看界面的,所以逐個出現(xiàn)的形式也比較糟糕。另外,逐個出現(xiàn)的動畫在時間上也會過長,而且把用戶的注意力引導(dǎo)成鋸齒狀,這是很不友好的。

23.gif

按對角線出現(xiàn)的表格視圖動畫

從屬動畫

從屬動畫是指有一個核心運(yùn)動的元素,它吸引用戶所有的注意力,其他元素也都跟隨它的運(yùn)動。這種類型的動畫會顯得更有秩序感,讓用戶更多的去關(guān)注到內(nèi)容本身。

而在其他情況下,用戶是很難知道他到底要去看哪個元素,注意力很容易被分散。如果要設(shè)置多個動畫元素,一定要清楚的知道他的動畫順序,并盡可能的將其他動畫元素弱化。

24.gif

只賦予一個中心對象生命是值得的,而所有其他的對象都服從于它。否則,用戶就不知道到底應(yīng)該注意哪個元素。

根據(jù)谷歌規(guī)范,當(dāng)運(yùn)動物體的大小不成比例地改變時,它們應(yīng)該沿著弧線而不是直線運(yùn)動。這有助于使動畫更自然。所謂“不成比例”,是指物體的高度和寬度的增加/減少是不對稱地進(jìn)行的,即以不同的速度變化(例如,一個正方形變成一個矩形)。

25.gif

物體的運(yùn)動如果不成比例,那應(yīng)該按弧線變化。

當(dāng)對象按比例改變其大小時,則此時直線運(yùn)動的形式會更好。由于這種運(yùn)動形式做起來容易得多,弧線軌跡運(yùn)動的規(guī)律就往往被忽視。在現(xiàn)在很多應(yīng)用中,我們都能找到這種例子。

26.gif

等比的物體運(yùn)動軌跡應(yīng)該使用直線

曲線軌跡運(yùn)動也會有兩種實(shí)現(xiàn)方式:第一種是開始水平移動,然后以垂直運(yùn)動結(jié)束;第二種是開始垂直移動,然后以水平運(yùn)動結(jié)束。

物體沿曲線移動的路徑必須與滾動界面的方向重合。例如,在下面的例子中,我們可以上下滾動界面,相應(yīng)地,卡片以垂直的方式展開更合適——先向右,然后向下。

27.gif

展開/折疊卡片的方向應(yīng)與界面的軸線重合

如果物體的運(yùn)動路徑彼此相交,它們就應(yīng)該不能穿過對方。物體應(yīng)該通過減慢或加速自身的速度為另一個物體的運(yùn)動留下足夠的空間。另一種方式——只是推開其他物體。為什么要這么做?因為我們假設(shè)界面中的所有對象都位于一個平面上。(譯者注:對于這一點(diǎn)我不是很認(rèn)同,為了更加真實(shí)么?)

28.gif

在運(yùn)動過程中,物體不應(yīng)該互相穿透,而是為另一個物體的運(yùn)動留下空間。

在另一種情況下,移動的物體可以通過抬高于其他物體,而不會以溶解或通過其他物體的形式來移動。為什么?因為我們相信界面上元素的行為應(yīng)該要符合物理定律,在現(xiàn)實(shí)世界中沒有任何實(shí)體能夠做到直接穿透對方。

29.gif

物體可以被抬高于其他元素之上來移動

總結(jié)

如果我們總結(jié)上述所有的規(guī)律和原則,可以得出界面動畫應(yīng)該要反映物質(zhì)世界的運(yùn)動,例如我們都知道的,摩擦,加速等等。模仿現(xiàn)實(shí)世界的行為我們可以創(chuàng)建一個優(yōu)秀的動畫,滿足用戶的心理預(yù)期。

一個優(yōu)秀的動畫,應(yīng)該是不會那么刻意,也不會分散用戶對目標(biāo)的注意力。如果是的話,就需要優(yōu)化它,或者干脆把動畫去掉。核心標(biāo)準(zhǔn)是動畫不應(yīng)該降低用戶執(zhí)行任務(wù)的效率。

但是不要忘記,用戶對動畫的好壞感受,是感性大于理性的。所以,最好是把做出來的動畫給用戶進(jìn)行評鑒,然后再不斷優(yōu)化它。

 

 

文章來源:云端網(wǎng)

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。


微信圖片_20210513163802.png


 



分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

 

藍(lán)藍(lán)設(shè)計www.b186.net )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

日歷

鏈接

個人資料

存檔