激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

UI設(shè)計(jì)：動(dòng)態(tài)效果的新潮應(yīng)用技巧

發(fā)布時(shí)間：2024-08-23 15:12:37 瀏覽量：136次

如今，越來(lái)越多的頁(yè)面會(huì)運(yùn)用動(dòng)態(tài)效果，今天就來(lái)聊聊動(dòng)態(tài)效果該如何運(yùn)用。

做作的動(dòng)畫(huà)案例

下面是一則快速且做作的動(dòng)畫(huà)案例，我以此來(lái)演示UI動(dòng)畫(huà)中的卡通化現(xiàn)象。盡管這是個(gè)略微夸張的例子，但事實(shí)上，確有許多界面呈現(xiàn)出了這種花哨的動(dòng)畫(huà)。

似乎我們剛拋棄了擬物化的視覺(jué)設(shè)計(jì)，又陷入了行為上的擬物化。我們把虛擬物表現(xiàn)得像是果凍，或像是掛在隱形的橡皮繩上。

拒絕肆無(wú)忌憚的動(dòng)畫(huà)

動(dòng)畫(huà)就像某種咒法。如果過(guò)度使用，就會(huì)效力盡失。

動(dòng)畫(huà)原則

我聽(tīng)聞一些UI設(shè)計(jì)師推崇卡通化的動(dòng)畫(huà)設(shè)計(jì)，將它作為UI設(shè)計(jì)師的必讀準(zhǔn)則。不幸的是，這增強(qiáng)了UI的娛樂(lè)功效，總會(huì)使得界面變成用戶的阻礙。

許多UI動(dòng)效設(shè)計(jì)師似乎把界面設(shè)計(jì)當(dāng)成了他們的動(dòng)畫(huà)作品集。除非你想被收錄進(jìn)Pixar，否則請(qǐng)避免使用“彈跳”、“加速后減速”這樣的緩動(dòng)效果。

界面是什么？

在計(jì)算機(jī)科學(xué)中，界面是指計(jì)算機(jī)系統(tǒng)中，兩個(gè)獨(dú)立組成部分相互交換信息的銜接處。

界面居中銜接、傳達(dá)信息的作用使得它如此重要。決定何時(shí)可以違背這條UI中心原則，是設(shè)計(jì)師所面臨的挑戰(zhàn)。

UI設(shè)計(jì)中的動(dòng)效

這些簡(jiǎn)單的準(zhǔn)則讓我受益良多，在此推薦：

  • 站在用戶的立場(chǎng)對(duì)每段動(dòng)畫(huà)做出決斷，“挺好看的”可不是正確答案。
  • 保持每段動(dòng)畫(huà)時(shí)間不超過(guò)300ms.
  • 避免使用線性動(dòng)畫(huà)，它使得動(dòng)畫(huà)看起來(lái)遲緩、無(wú)趣且機(jī)械.
  • 99%的動(dòng)畫(huà)都應(yīng)該使用簡(jiǎn)單的“加速”或“減速”緩動(dòng)效果.
  • 你極少會(huì)需要那些更加醒目的緩動(dòng)效果，例如彈簧、彈跳等等.

通知



通知案例1

這個(gè)簡(jiǎn)單的動(dòng)畫(huà)只持續(xù)300ms。它有細(xì)微的分層效果，卡片的動(dòng)畫(huà)開(kāi)始后，消息在100ms內(nèi)淡入顯現(xiàn)。本例中的動(dòng)效確實(shí)提升了用戶體驗(yàn)，因?yàn)樗鼘⒂脩舻淖⒁饬σ蛄瞬豢珊鲆暤闹匾耐ㄖ?/p>

通知的升級(jí)

通知案例2

上面的例子使用了更強(qiáng)烈的動(dòng)畫(huà).

  • 首次點(diǎn)按，通知淡入顯現(xiàn)
  • 再次點(diǎn)按，整個(gè)標(biāo)簽晃動(dòng).

如果用戶持續(xù)點(diǎn)按按鈕，還可以疊加一個(gè)模態(tài)窗口吸引用戶注意。而且在后續(xù)失敗的嘗試后，也可以通過(guò)改變按鈕本身顏色來(lái)警示。

卡片展開(kāi)

這是卡片視圖的一種簡(jiǎn)單有效的實(shí)現(xiàn)，移動(dòng)端通常都這么做。我非常喜歡這個(gè)交互，因?yàn)樗層脩羰煜?lái)龍去脈。即使列表視圖不見(jiàn)了，我們也知道它就在那里，在展開(kāi)項(xiàng)的背后。

卡片展開(kāi)案例

故意讓卡片的關(guān)閉按鈕稍稍延遲顯現(xiàn)，同時(shí)使用了位置與透明度的動(dòng)畫(huà)。用戶的視線不會(huì)漏掉這個(gè)重要的UI元素，他們?cè)谑掌鹂ㄆ瑫r(shí)會(huì)需要它。

重要性分層次

作為設(shè)計(jì)師與開(kāi)發(fā)者，必然要決定我們界面中哪些元素更重要。它有很多種體現(xiàn)方式：

  • 使用標(biāo)題
  • 下劃線、或是加粗
  • 使用色彩
  • 使用形狀和圖片
  • 運(yùn)動(dòng)

你當(dāng)然不會(huì)把文章的每一句話都當(dāng)作標(biāo)題。這個(gè)原則也適用于動(dòng)畫(huà)。界面中的每個(gè)動(dòng)畫(huà)元素，都等同于文章中的一個(gè)標(biāo)題。它應(yīng)該用來(lái)顯現(xiàn)元素的重要性。過(guò)度使用反而會(huì)混淆層次，同時(shí)干擾你試圖表達(dá)的信息。

功能動(dòng)畫(huà) vs 裝飾動(dòng)畫(huà)

程序員常常談?wù)摗按a嗅覺(jué)”。這是指編寫(xiě)代碼時(shí)的某種特質(zhì)，它并無(wú)絕對(duì)的對(duì)錯(cuò)，但能避免老練的程序員寫(xiě)出低質(zhì)量代碼。

如果你聽(tīng)到團(tuán)隊(duì)伙伴談?wù)揢I動(dòng)畫(huà)“愉悅”用戶，你的“設(shè)計(jì)嗅覺(jué)”警鐘可能就響起了。為了動(dòng)畫(huà)而做動(dòng)畫(huà)（幾乎任何時(shí)候）是糟糕的設(shè)計(jì)。

切記，動(dòng)畫(huà)同樣符合少即是多的原則。功能動(dòng)畫(huà)總是勝過(guò)純粹的裝飾動(dòng)畫(huà)。

不要讓動(dòng)畫(huà)妨礙了用戶。這就是為什么飛機(jī)駕駛艙的界面從不用使用動(dòng)畫(huà)。額外增加毫無(wú)必要的300ms動(dòng)畫(huà)，對(duì)你的界面而言可能人畜無(wú)害，但它給用戶帶來(lái)的煩惱遠(yuǎn)比“愉悅”更多！

總結(jié)

界面中還是需要?jiǎng)赢?huà)的。要將它作為迅速傳遞重要信息的工具。多用功能性而非純裝飾動(dòng)畫(huà)，珍視用戶花在你界面上的每一毫秒。

～此文轉(zhuǎn)載，如有侵權(quán)，請(qǐng)聯(lián)系刪除


歡迎了解更多關(guān)于數(shù)字藝術(shù)教育的信息，請(qǐng)點(diǎn)擊點(diǎn)擊咨詢，火星時(shí)代教育竭誠(chéng)為您服務(wù)。

熱門(mén)課程推薦

熱門(mén)資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定