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

動效探討:UI動效,靈魂還是篡改?

發(fā)布時間:2024-08-31 10:15:57 瀏覽量:103次

文 | Sophie Paxton

譯 | Vin

校 | 莫小貝

本文將探究UI設計中動畫效果的過度應用,通過對比早期的視覺設計,為UI動畫的有效設計提供一些建議。

我們也會簡要涉及如何改進下文中案例的交互。


(遺憾的是,這并非某個做作的反面案例——而是某個近期客戶處拿來的實例。)

簡介

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

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

視覺設計的相似性


(2000年前后的典型網(wǎng)頁設計)

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

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

扁平化設計


(扁平化設計范例)

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

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

動態(tài)設計

當前動態(tài)設計的形勢,可與視覺設計的下拉陰影時代相提并論。

網(wǎng)頁動畫的潛力在CSS過渡效果、由硬件加速的變形效果以及即將到來的標準(如JS Web Animations)的驅動下得到了巨大提升。


(像1999年那樣使用動畫吧?。?/span>

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

鑒于UI動效設計才剛剛興起,設計師被導向以動畫作為視覺吸引是很自然的事,這與當年陰影、倒角盛行的時代相似。

我確信,與視覺設計不同的是,動態(tài)設計不需要15年之久才能變得成熟。

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

失敗的動畫案例設計


(OS X 全屏動畫)

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

該動畫存在的問題包括:

- 速度緩慢

- 無存在必要性

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

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

動態(tài)設計案例分析


(反面教材)

- 徹底擋住UI的蒙版

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

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

- 無用的動畫

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

動畫效果是否必要?

首先考慮一個問題:動畫是否提升了用戶體驗?

上文的交互是正確使用UI動畫的完美案例。這個交互需要一個100-500毫秒的請求才能完成,正是采用動畫填補這一等待時長的良好機會。

改進設計


(第一次迭代)

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


(第二次迭代)

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

魔術般的動畫

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

既然延遲不是總能完全避免,動畫就可使之變得更加流暢。此時層級動畫會非常有效。


(第三次迭代)

改進功能包括:

- 非阻礙性的載入指示

- 層疊動畫,分散用戶對延遲的注意力

漸進式載入

漸進式的載入方式可進一步減少用戶所感知的數(shù)據(jù)載入時間。幾乎可以確定,用戶不會立即使用程序將提供給他們的全部數(shù)據(jù)。通過給數(shù)據(jù)下載分塊,并隨數(shù)據(jù)的載入來顯示信息,用戶感受到的將是一個交互性更強的App。


(第四次迭代)

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

感謝你們建設性的建議!

結論

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

冗長的網(wǎng)絡請求提供了使用動畫的絕好機會——如同魔術一般,降低用戶所感知的等候時長。

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

想要學習更多關于UI設計的知識?快來點擊咨詢吧!

火星時代教育,專注數(shù)字藝術教育30年,開設課程涵蓋游戲設計、動畫培訓、UI設計等多個方向,歡迎來電咨詢。

熱門課程推薦

熱門資訊

請綁定手機號

x

同學您好!

您已成功報名0元試學活動,老師會在第一時間與您取得聯(lián)系,請保持電話暢通!
確定