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

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

你的UI動(dòng)效，是點(diǎn)睛還是敗筆?

發(fā)布時(shí)間：2024-01-15 12:07:13 瀏覽量：220次

文 | Sophie Paxton

譯 | Vin

校 | 莫小貝

本文將探究UI設(shè)計(jì)中動(dòng)畫效果的過度應(yīng)用，通過對比早期的視覺設(shè)計(jì)，為UI動(dòng)畫的有效設(shè)計(jì)提供一些建議。

我們也會(huì)簡要涉及如何改進(jìn)下文中案例的交互。


（遺憾的是，這并非某個(gè)做作的反面案例——而是某個(gè)近期客戶處拿來的實(shí)例。）

簡介

自70-80年代CRT屏幕上映第一幅光柵圖形以來，人們對數(shù)字視覺設(shè)計(jì)的態(tài)度便不斷進(jìn)化。與其他藝術(shù)領(lǐng)域不同，數(shù)字設(shè)計(jì)的潮流始終隨可用工具的進(jìn)化而變化。

我們已經(jīng)見證了設(shè)備顯示能力的不斷進(jìn)步——從有限的CGA分辨率 (320 x 200) 到VGA(640 x 480)，再到SVGA (800 x 600)，直至今日顯示技術(shù)已迅速邁向4K分辨率乃至更高。

視覺設(shè)計(jì)的相似性


（2000年前后的典型網(wǎng)頁設(shè)計(jì)）

在90年代至2000年前后，動(dòng)態(tài)設(shè)計(jì)經(jīng)歷過與視覺設(shè)計(jì)相似的成長瓶頸期。因而回顧視覺設(shè)計(jì)的發(fā)展歷程對于我們理解動(dòng)態(tài)設(shè)計(jì)的現(xiàn)狀具有重要的借鑒意義。

在新的設(shè)計(jì)語言形成并進(jìn)化之前，設(shè)計(jì)師往往會(huì)濫用新技術(shù)，這是很自然的現(xiàn)象。在90年代后期到2010年間（互聯(lián)網(wǎng)初期、CD-ROM時(shí)代），為顯示媒介做過設(shè)計(jì)的人，必然牢記那些不厭其煩被使用的設(shè)計(jì)方式和元素—陰影、倒角、光效以及地不考慮留白。這些都是設(shè)計(jì)師駕馭新型媒介并醉心于嶄新像素中的自然產(chǎn)物。


扁平化設(shè)計(jì)



（扁平化設(shè)計(jì)范例）

無論你喜愛與否，時(shí)下扁平化設(shè)計(jì)風(fēng)格正風(fēng)靡設(shè)計(jì)圈。所有主流系統(tǒng)都十分青睞各式各樣的極簡主義扁平化設(shè)計(jì)語言（Android, iOS, OSX, Windows, Windows Mobile）。它甚至在高速變化的網(wǎng)頁設(shè)計(jì)領(lǐng)域也占據(jù)主導(dǎo)。

扁平化設(shè)計(jì)是視覺設(shè)計(jì)思維的成熟化體現(xiàn)。這一自然進(jìn)化不僅源自時(shí)尚潮流的驅(qū)動(dòng)，同時(shí)也反映了這一行業(yè)專業(yè)人員已逐漸掌握數(shù)字媒介的核心。


動(dòng)態(tài)設(shè)計(jì)

當(dāng)前動(dòng)態(tài)設(shè)計(jì)的形勢，可與視覺設(shè)計(jì)的下拉陰影時(shí)代相提并論。

網(wǎng)頁動(dòng)畫的潛力在CSS過渡效果、由硬件加速的變形效果以及即將到來的標(biāo)準(zhǔn)（如JS Web Animations）的驅(qū)動(dòng)下得到了巨大提升。


（像1999年那樣使用動(dòng)畫吧?。?/span>

此外，運(yùn)算能力更強(qiáng)的多核、大容量、高DPI設(shè)備，現(xiàn)在已經(jīng)可以完美輸出60幀的UI動(dòng)畫。

鑒于UI動(dòng)效設(shè)計(jì)才剛剛興起，設(shè)計(jì)師被導(dǎo)向以動(dòng)畫作為視覺吸引是很自然的事，這與當(dāng)年陰影、倒角盛行的時(shí)代相似。

我確信，與視覺設(shè)計(jì)不同的是，動(dòng)態(tài)設(shè)計(jì)不需要15年之久才能變得成熟。


動(dòng)畫的過度使用

無用的動(dòng)畫在設(shè)計(jì)中比比皆是，且并不僅限于設(shè)計(jì)新手。作為用戶，你可以輕易地發(fā)現(xiàn)這種動(dòng)畫——它擋住了你與既定目標(biāo)之間的路，使你因無法完整地詮釋意圖而萬分沮喪。作為設(shè)計(jì)師，你必須明白UI絕不等于娛樂。沒有人會(huì)打開你的app或網(wǎng)站，然后贊嘆彈出的動(dòng)畫做得有多贊！


失敗的動(dòng)畫案例設(shè)計(jì)



（OS X 全屏動(dòng)畫）

無論是桌面還是移動(dòng)端，UI動(dòng)畫的反面案例數(shù)不勝數(shù)。Mac OS X由窗口轉(zhuǎn)換到全屏的動(dòng)畫就是一個(gè)例子。作為以前沿設(shè)計(jì)感知名的公司推出的主打產(chǎn)品中的核心功能，這一轉(zhuǎn)化的失敗著實(shí)令人費(fèi)解。

該動(dòng)畫存在的問題包括：

- 速度緩慢

- 無存在必要性

- 除非使用命令行，否則無法修改

如何知道自己的UI動(dòng)畫令人反感呢？那就是當(dāng)有人開始寫文章來吐槽這個(gè)問題的時(shí)候。無數(shù)的博客文章和論壇回復(fù)都關(guān)于如何加速或取消這個(gè)效果，這很好地說明了這種設(shè)計(jì)除了刺激用戶以外幾乎沒有任何作用，而這正是UI動(dòng)態(tài)設(shè)計(jì)的大忌。


動(dòng)態(tài)設(shè)計(jì)案例分析

拿一個(gè)近期客戶的案例做例子。這個(gè)交互包含了一系列不妥當(dāng)?shù)脑O(shè)計(jì)，包括：



（反面教材）

- 徹底擋住UI的蒙版

- 缺少后臺操作正在執(zhí)行的指示

- 動(dòng)態(tài)效果緩慢

-無用的動(dòng)畫

最令人厭煩的是它出現(xiàn)在耗時(shí)最長的網(wǎng)絡(luò)請求完成以后，從而為用戶增加了額外的等待時(shí)間。


動(dòng)畫效果是否必要？

首先考慮一個(gè)問題：動(dòng)畫是否提升了用戶體驗(yàn)？

上文的交互是正確使用UI動(dòng)畫的完美案例。這個(gè)交互需要一個(gè)100-500毫秒的請求才能完成，正是采用動(dòng)畫填補(bǔ)這一等待時(shí)長的良好機(jī)會(huì)。


改進(jìn)設(shè)計(jì)



（第一次迭代）

這是一個(gè)細(xì)節(jié)性的提升，增加了一個(gè)載入指示以告訴用戶他們正在等待額外的數(shù)據(jù)，但是，彈出的動(dòng)畫過于多余，只起到了降低用戶效率的作用。


（第二次迭代）

用戶不希望在閱讀信息時(shí)看到任何多余的動(dòng)畫。使用蒙版遮住用戶視圖是一種不必要的入侵式行為。


魔術(shù)般的動(dòng)畫

即使對于網(wǎng)頁App，使用緩存和主動(dòng)預(yù)載機(jī)制，延遲也是可以減少甚至去除的。但是，這種做法自身也存在問題。有流量限制的移動(dòng)端用戶并不希望預(yù)加載大量可能不需要的數(shù)據(jù)。

既然延遲不是總能完全避免，動(dòng)畫就可使之變得更加流暢。此時(shí)層級動(dòng)畫會(huì)非常有效。


（第三次迭代）

改進(jìn)功能包括：

- 非阻礙性的載入指示

- 層疊動(dòng)畫，分散用戶對延遲的注意力


漸進(jìn)式載入

漸進(jìn)式的載入方式可進(jìn)一步減少用戶所感知的數(shù)據(jù)載入時(shí)間。幾乎可以確定，用戶不會(huì)立即使用程序?qū)⑻峁┙o他們的全部數(shù)據(jù)。通過給數(shù)據(jù)下載分塊，并隨數(shù)據(jù)的載入來顯示信息，用戶感受到的將是一個(gè)交互性更強(qiáng)的App。


（第四次迭代）

相當(dāng)數(shù)量的評論都推薦了卡片式擴(kuò)張的交互方式，在此列出，作為替代方案。

感謝你們建設(shè)性的建議！


（備用方案）

該方式一個(gè)顯著的好處就是，用戶可保持對上下文的感知。

結(jié)論

我們必須十分謹(jǐn)慎，讓形式重于實(shí)用性的歷史不再重演。動(dòng)畫可以也理應(yīng)被用在你的網(wǎng)站或App上以強(qiáng)化用戶體驗(yàn)，但純粹裝飾性的動(dòng)畫效果，很難令產(chǎn)品變的更好。

冗長的網(wǎng)絡(luò)請求提供了使用動(dòng)畫的絕好機(jī)會(huì)——如同魔術(shù)一般，降低用戶所感知的等候時(shí)長。

來源 | 微信公眾號：特贊Tezign

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

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