cookieOptions = {...}; ‧ 設計師們,停止不必要的 UI 動效設計吧!(V) - 3S Market「全球智慧科技應用」市場資訊網

3S MARKET

3S MARKET
2015年11月23日 星期一

 leiphone 百度MUX

【編者按】本文來自百度MUX翻譯小組。
前言:這篇短文將會探討UI設計中動畫的過度使用,並將其與早期的視覺設計進行對比,提出一些對於有效的GUI動效設計的建議。我們將在下文中,簡單探討如何改善下面的這個交互。
设计师们,停止不必要的UI动效设计吧! 
UI動效設計的反面案例(線上Demo
注:這個反面案例並非假設,而是來自近期的真實客戶案例。
概述
自從 7080 年代首個點陣影像在CRT螢幕出現以來,人們對於(數位)視覺設計的態度一直在不斷進化。與其他藝術領域不同,在數位設計領域顯露的趨勢,與使用設備的發展史緊密相關。
設備能力的提升有目共睹,顯示器技術使解析度從CGA320*200,到VGA640*480,然後到SVGA800*600,到現在已快速提升至4k及以上。
類比視覺設計發展歷程
動效設計正在經歷成長的疼痛,正如在當年90年代和21世紀初的視覺設計。追溯視覺設計進化發展的過程,有助於我們去理解現階段的動效設計。 
设计师们,停止不必要的UI动效设计吧!
21世紀初期的網頁設計)
在更精妙的設計語言出現之前,設計師們在初期階段容易濫用新功能,這是正常的。90年代末和21世紀初的介面設計師,應該還記得以陰影、斜角、高光,無留白這特徵的過度設計。
當設計師們著迷于新媒體,並陶醉於圖元的奇妙時,這一結果再自然不過了。
扁平化設計 
设计师们,停止不必要的UI动效设计吧!
(扁平化設計示例)
不管你喜歡與否,扁平化設計在設計圈中已成為主流思想。所有的主要系統平臺(AndroidiOSOSXWindowsWindows phone)都已經開始擁抱這種極簡設計語言。同時,它還主宰著高速發展的網頁設計。
扁平化設計是視覺設計思考成熟的體現。它是一個自然的進程,一方面是被潮流和時尚驅使,另一方面折射出業內人士終於逐漸掌握了數字媒體 。
動效設計
現階段的動效設計,可以類比視覺設計史的“陰影階段”。
網頁動效能力有了顯著提升,得益於CSS中的過渡屬性(transition)和被硬體加速支援的變形屬性(transform),以及正在發展的標準,如JS動效(JS Web Animations)。
另外,現在的移動設備由於其不斷精進的性能,以及多核、多存儲、高dpi等優越的特性,可以流暢地輸出60fps動畫效果。 
            设计师们,停止不必要的UI动效设计吧!
讓所有東西都動起來!這樣的動效仿佛讓人回到了1999年。
考慮到現在是UI動效的早期設計階段,設計師試圖通過增加動效來增強視覺亮點,和曾經的陰影和斜角沒什麼不同。
但是我很確信,與視覺設計不同,動效設計的成熟不需要耗時15年。
過度的動效使用
無意義的動效隨處可見,它們也不僅出自業餘設計師之手。
作為用戶,我們可以很輕易地發現這種妨礙著你的動畫,它阻隔著你和你的目標,令你困擾皺眉。作為設計師,你需要意識到你的UI設計並非什麼娛樂。沒有人只為看著酷炫的動效爽,就使用你的app或者網頁。
UI動畫的使用反例
·         OS X的全屏動畫
桌面端和移動端都有無數的糟糕UI動畫示例,其中之一,就是OS X的視窗切換到全屏模式的過渡動畫。因為它來自因前沿的設計感著稱的蘋果公司,且是旗艦產品的主要特點,所以格外令人困惑。
這個UI動畫有以下幾個問題:
·    緩慢
·  非必要
·     不可設置(除非通過命令列修改)
如何知道你的UI動效使人厭煩?人們會在博客上寫文抱怨。無數探討如何加速或禁用動效的博文和論壇問題帖,都很有力地說明這個轉場動效除了讓用戶煩惱,毫無作用,這是UI動效設計的一個大忌。
動效設計案例研究
我們使用一個簡單設計做示例,它來自我最近為客戶進行的工作。這個交互包含了一些糟糕的設計決策。
设计师们,停止不必要的UI动效设计吧!
UI動效設計的反面案例(線上demo

這個設計包括如下問題
· 遮擋了介面的蒙層
· 缺少後臺正在執行操作的指示
· 動畫緩慢
· 動畫非必要
這個動畫最煩人的一點,是在耗時間的網路請求完成後,這個動畫才發生,導致增加用戶額外的等待時間。
動畫是否必要?
首要問題理應為:這個動畫提升了用戶體驗嗎?
上述交互案例中,出現了正確使用UI動畫的絕佳時機。考慮到這一交互需要一個耗時100-500毫秒的網路請求,這是個利用動畫來掩蓋請求耗時的絕好機會。
設計改進
设计师们,停止不必要的UI动效设计吧!
改進1線上Demo
這是很小的一個改進,增加一個載入指示器,告訴使用者正在等待額外的資料。然而,彈出動畫是多餘的,減緩了使用者流程。
设计师们,停止不必要的UI动效设计吧!
改進2線上Demo
刪減了不必要的滑出動畫,使用戶在操作後即可看到所需資料。蒙層的使用阻擋了用戶視圖,是多餘的打擾。
動畫——障眼法
延遲,即使是網路應用的延遲,通過緩存和預讀取資源,也可以減少甚至消除。然而這種方式也有其問題。使用流量有限的移動網路的使用者,並不願意應用預讀取大量可能根本不不需要的資料。
考慮到延遲並不總能完全避免,我們可以使用動畫製造更俐落的錯覺。這種情況下,使用分層動畫尤其有效。
设计师们,停止不必要的UI动效设计吧!
改進3線上Demo
改進如下:
· 使用了不遮擋介面的載入指示。
· 重疊的動畫分散了使用者對資料讀取延遲的注意力。
漸進式載入
漸進式載入可用來進一步減少可感知的資料載入時間。使用者基本不可能立刻用到應用展示的所有資料。通過分塊下載、資料可用後再顯示資訊的方法,使用者會產生應用比實際上回應更及時的錯覺。
设计师们,停止不必要的UI动效设计吧!
改進4(線上Demo)
很多留言的人,包括來自用戶體驗社區的Isak Falch,推薦我使用“擴展式卡片”,這個方法最切實的好處是保持了用戶對上下文環境的感知。
作為另一種備選方案,也已經實現如下:
设计师们,停止不必要的UI动效设计吧!
改進5線上Demo

感謝大家的建設性意見!
結論
我們要注意,不要重複過去形式超越功能的錯誤。動畫可以且應該應用于加強網站或應用的用戶體驗,而純裝飾性的動畫效果,不太可能有助於產品變得更好。
長時間的網路請求,是使用動畫障眼法,縮短等待時間感知的好機會。
注:如果你對這篇文章感興趣的話,你應該也會對有效的原型設計感興趣。

譯文來自:Stop Gratuitous UI Animation 。百度MUX的譯文僅作學習用途。

                                                                                                                                                                                                                            

0 comments: