iOS 中止沒必要要的UI動效設計

http://www.cocoachina.com/design/20151124/14400.html

 

前言：這篇短文將會探討UI設計中動畫的過分使用，並將其與早期的視覺設計進行對比，提出一些對於有效的GUI動效設計的建議。

咱們將在下文中，簡單探討如何改善下面的這個交互。

 

UI動效設計的反面案例（線上Demo）

注：這個反面案例並不是假設，而是來自近期的真實客戶案例。

概述

自從 70、80 年代首個光柵圖像在CRT屏幕出現以來，人們對於（數字）視覺設計的態度一直在不斷進化。與其餘藝術領域不一樣，在數字設計領域顯露的趨勢，與使用設備的發展史緊密相關。

設備能力的提高有目共睹，顯示器技術使分辨率從CGA320*200，到VGA的640*480，而後到SVGA的800*600，到如今已快速提高至4k及以上。

類比視覺設計發展歷程

動效設計正在經歷成長的疼痛，正如在當年90年代和21世紀初的視覺設計。追溯視覺設計進化發展的過程，有助於咱們去理解現階段的動效設計。

21世紀初期的網頁設計

在更精妙的設計語言出現以前，設計師們在初期階段容易濫用新功能，這是正常的。90年代末和21世紀初的界面設計師，應該還記得以陰影、斜角、高光，無留白這特徵的過分設計。當設計師們着迷於新媒體，並陶醉於像素的奇妙時，這一結果再天然不過了。

扁平化設計

扁平化設計示例

無論你喜歡與否，扁平化設計在設計圈中已成爲主流思想。全部的主要系統平臺（Android、iOS、OSX、Windows、Windows phone）都已經開始擁抱這種極簡設計語言。同時，它還主宰着高速發展的網頁設計。

扁平化設計是視覺設計思考成熟的體現。它是一個天然的進程，一方面是被潮流和時尚驅使，另外一方面折射出業內人士終於逐漸掌握了數字媒體 。

動效設計

現階段的動效設計，能夠類比視覺設計史的「陰影階段」。

網頁動效能力有了顯著提高，得益於CSS中的過渡屬性（transition）和被硬件加速支持的變形屬性（transform），以及正在發展的標準，如JS動效（JS Web Animations）。

另外，如今的移動設備因爲其不斷精進的性能，以及多核、多存儲、高dpi等優越的特性，能夠流暢地輸出60fps動畫效果。

讓全部東西都動起來！這樣的動效彷彿讓人回到了1999年。

考慮到如今是UI動效的早期設計階段，設計師試圖經過增長動效來加強視覺亮點，和曾經的陰影和斜角沒什麼不一樣。

可是我很確信，與視覺設計不一樣，動效設計的成熟不須要耗時15年。

過分的動效使用

無心義的動效隨處可見，它們也不只出自業餘設計師之手。做爲用戶，咱們能夠很輕易地發現這種妨礙着你的動畫，它阻隔着你和你的目標，令你困擾皺眉。做爲設計師，你須要意識到你的UI設計並不是什麼娛樂。沒有人只爲看着酷炫的動效爽，就使用你的app或者網頁。

UI動畫的使用反例

OS X的全屏動畫

桌面端和移動端都有無數的糟糕UI動畫示例，其中之一，就是OS X的窗口切換到全屏模式的過渡動畫。由於它來自因前沿的設計感著稱的蘋果公司，且是旗艦產品的主要特色，因此格外使人困惑。

（視頻：5-yosemite fullscreen.mp4）

這個UI動畫有如下幾個問題：

• 緩慢

• 非必要

• 不可設置（除非經過命令行修改）

如何知道你的UI動效令人厭煩？人們會在博客上寫文抱怨。無數探討如何加速或禁用動效的博文和論壇問題帖，都頗有力地說明這個轉場動效除了讓用戶煩惱，毫無做用，這是UI動效設計的一個大忌。

動效設計案例研究

咱們使用一個簡單設計作示例，它來自我最近爲客戶進行的工做。這個交互包含了一些糟糕的設計決策。

UI動效設計的反面案例（線上demo）

這個設計包括以下問題：

• 遮擋了界面的蒙層

• 缺乏後臺正在執行操做的指示

• 動畫緩慢

• 動畫非必要

這個動畫最煩人的一點，是在耗時間的網絡請求完成後，這個動畫才發生，致使增長用戶額外的等待時間。

動畫是否必要？

首要問題理應爲：這個動畫提高了用戶體驗嗎？

上述交互案例中，出現了正確使用UI動畫的絕佳時機。考慮到這一交互須要一個耗時100-500毫秒的網絡請求，這是個利用動畫來掩蓋請求耗時的絕好機會。

設計改進

改進1（線上Demo）

這是很小的一個改進，增長一個加載指示器，告訴用戶正在等待額外的數據。然而，彈出動畫是多餘的，減緩了用戶流程。

改進2（線上Demo）

刪減了沒必要要的滑出動畫，使用戶在操做後便可看到所需數據。蒙層的使用阻擋了用戶視圖，是多餘的打擾。

動畫——障眼法

延遲，即便是網絡應用的延遲，經過緩存和預讀取資源，也能夠減小甚至消除。然而這種方式也有其問題。使用流量有限的移動網絡的用戶，並不肯意應用預讀取大量可能根本不不須要的數據。

考慮到延遲並不總能徹底避免，咱們可使用動畫製造更利落的錯覺。這種狀況下，使用分層動畫尤爲有效。

改進3（線上Demo）

改進以下：

• 使用了不遮擋界面的加載指示。

• 重疊的動畫分散了用戶對數據讀取延遲的注意力。

漸進式加載

漸進式加載可用來進一步減小可感知的數據加載時間。用戶基本不可能馬上用到應用展現的全部數據。經過分塊下載、數據可用後再顯示信息的方法，用戶會產生應用比實際上響應更及時的錯覺。

改進4(線上Demo)

不少留言的人，包括來自用戶體驗社區的Isak Falch，推薦我使用「擴展式卡片」，這個方法最切實的好處是保持了用戶對上下文環境的感知。

做爲另外一種備選方案，也已經實現以下：

改進5（線上Demo）

感謝你們的建設性意見！

結論

咱們要注意，不要重複過去形式超越功能的錯誤。動畫能夠且應該應用於增強網站或應用的用戶體驗，而純裝飾性的動畫效果，不太可能有助於產品變得更好。

長時間的網絡請求，是使用動畫障眼法，縮短等待時間感知的好機會。

注：若是你對這篇文章感興趣的話，你應該也會對《有效的原型設計》感興趣。