歡迎光臨安陽中飛網絡傳媒官方網站 設為首頁 | 加入收藏 | 聯系我們
公司名稱
 
 
業務快速通道
網站建設
為您量身打造企業網站
域名注冊
中英文域名,通用網址
虛擬主機
中國萬網,東方網域
企業郵箱
自由定制,隨需購買
網站推廣
百度競價,谷歌推廣
聯系我們

安陽市中飛網絡傳媒有限公司

地址:河南省安陽市北關區彰德路與健康路交叉口U樂廣場2220室
郵編:455000
咨詢熱線:0372-3983299
郵箱:[email protected]

當前位置:網站首頁  >> 新聞資訊  >> 網站設計
交互設計案例!手把手教你改善界面交互動畫
  2015-8-17 來源:安陽中飛網絡 作者:安陽中飛網絡

本文將探究UI設計中動畫效果的過度應用,通過對比早期的視覺設計,為UI動畫的有效設計提供一些建議,另外附上實戰案例,手把手教你改進文中案例的交互動畫喲。

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

簡介

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

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

視覺設計的相似性

交互設計 交互設計模式 交互設計原則 UI設計問題

2000年前后的典型網頁設計

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

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

扁平化設計

交互設計 交互設計模式 交互設計原則 UI設計問題

扁平化設計范例

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

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

動態設計

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

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

交互設計 交互設計模式 交互設計原則 UI設計問題

像1999年那樣使用動畫吧!

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

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

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

動畫的過度使用

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

失敗的動畫案例設計

OS X 全屏動畫

交互設計 交互設計模式 交互設計原則 UI設計問題

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

該動畫存在的問題包括:

- 速度緩慢

- 無存在必要性

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

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

動態設計案例分析

拿一個近期客戶的案例做例子。這個交互包含了一系列不妥當的設計,包括:

交互設計 交互設計模式 交互設計原則 UI設計問題

反面教材

- 徹底擋住UI的蒙版

- 缺少后臺操作正在執行的指示

- 動態效果緩慢

-無用的動畫

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

動畫效果是否必要?

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

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

 

改進設計

交互設計 交互設計模式 交互設計原則 UI設計問題

第一次迭代

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

交互設計 交互設計模式 交互設計原則 UI設計問題

第二次迭代

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

魔術般的動畫

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

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

交互設計 交互設計模式 交互設計原則 UI設計問題

第三次迭代

改進功能包括:

- 非阻礙性的載入指示

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

漸進式載入

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

交互設計 交互設計模式 交互設計原則 UI設計問題

第四次迭代

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

感謝你們建設性的建議!

交互設計 交互設計模式 交互設計原則 UI設計問題

備用方案

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

結論

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

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

 
上一篇:5個嚴重影響用戶體驗的設計問題 下一篇: 談網站用戶體驗:別讓用戶覺得自己蠢
     
首頁 | 關于中飛 | 新聞資訊 | 客戶案例 | 在線留言 | 聯系我們 | 支付方式

Copyright © 0372it.com 安陽市中飛網絡傳媒有限公司 豫ICP備12006994號
地址:河南省安陽市北關區彰德路與健康路交叉口U樂廣場2220室   郵編:455000 咨詢熱線:0372-3983299

三昇体育网站