發(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
熱門資訊
1. iPhone6的UI設計尺寸規(guī)范,原來如此重要!
想要了解iPhone6界面設計的尺寸規(guī)范嗎?這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范,包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
2. 12個絕佳的UI設計網(wǎng)站,助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
3. 移動端UI設計中常見的5種APP界面類型,你get到了嗎?
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型,幫助大家更好地了解UI設計的基本知識
4. 10個免費學習UI設計的網(wǎng)站 提升你的設計能力
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網(wǎng)站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網(wǎng)頁設計、字體...
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
探索零基礎UI設計培訓的時長與薪資前景。了解數(shù)字藝術教育領域的專業(yè)課程,以及培訓后的職業(yè)發(fā)展機會。
8. 物聯(lián)網(wǎng)APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
想了解武漢UI設計培訓班的費用是多少嗎?不知道學UI設計要花多少錢?不妨看看這篇文章,了解UI設計培訓班的學費價格以及學習內容。
10. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
同學您好!