欧美精品在线一区二区三区_亚洲女同精品视频_日韩一区免费_国产欧美久久久精品免费_国产这里只有精品_僵尸再翻生在线观看_久久99精品国产一区二区三区_亚洲免费一区二区_女教师淫辱の教室蜜臀av软件_中文字幕国产一区二区

停止不必要的UI動效設(shè)計

2015-12-9 用心設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

來源：莫貝網(wǎng)

短文將會探討UI設(shè)計中動畫的過度使用，并將其與早期的視覺設(shè)計進行對比，提出一些對于有效的GUI動效設(shè)計的建議。

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

相關(guān)好文推薦：《盤點那些應(yīng)該杜絕濫用的設(shè)計》

1-Example of Poor UI

UI動效設(shè)計的反面案例（線上Demo）

注：這個反面案例并非假設(shè)，而是來自近期的真實客戶案例。

概述

自從 70、80 年代首個光柵圖像在CRT屏幕出現(xiàn)以來，人們對于（數(shù)字）視覺設(shè)計的態(tài)度一直在不斷進化。與其他藝術(shù)領(lǐng)域不同，在數(shù)字設(shè)計領(lǐng)域顯露的趨勢，與使用設(shè)備的發(fā)展史緊密相關(guān)。
設(shè)備能力的提升有目共睹，顯示器技術(shù)使分辨率從CGA320*200，到VGA的640*480，然后到SVGA的800*600，到現(xiàn)在已快速提升至4k及以上。

類比視覺設(shè)計發(fā)展歷程

動效設(shè)計正在經(jīng)歷成長的疼痛，正如在當(dāng)年90年代和21世紀(jì)初的視覺設(shè)計。追溯視覺設(shè)計進化發(fā)展的過程，有助于我們?nèi)ダ斫猬F(xiàn)階段的動效設(shè)計。

2-2000s website design
21世紀(jì)初期的網(wǎng)頁設(shè)計

在更精妙的設(shè)計語言出現(xiàn)之前，設(shè)計師們在初期階段容易濫用新功能，這是正常的。90年代末和21世紀(jì)初的界面設(shè)計師，應(yīng)該還記得以陰影、斜角、高光，無留白這特征的過度設(shè)計。當(dāng)設(shè)計師們著迷于新媒體，并陶醉于像素的奇妙時，這一結(jié)果再自然不過了。

扁平化設(shè)計

3-Example of flat design

扁平化設(shè)計示例

不管你喜歡與否，扁平化設(shè)計在設(shè)計圈中已成為主流思想。所有的主要系統(tǒng)平臺（Android、iOS、OSX、Windows、Windows phone）都已經(jīng)開始擁抱這種極簡設(shè)計語言。同時，它還主宰著高速發(fā)展的網(wǎng)頁設(shè)計。

扁平化設(shè)計是視覺設(shè)計思考成熟的體現(xiàn)。它是一個自然的進程，一方面是被潮流和時尚驅(qū)使，另一方面折射出業(yè)內(nèi)人士終于逐漸掌握了數(shù)字媒體。

動效設(shè)計
現(xiàn)階段的動效設(shè)計，可以類比視覺設(shè)計史的“陰影階段”。

網(wǎng)頁動效能力有了顯著提升，得益于CSS中的過渡屬性（transition）和被硬件加速支持的變形屬性（transform），以及正在發(fā)展的標(biāo)準(zhǔn)，如JS動效（JS Web Animations）。

另外，現(xiàn)在的移動設(shè)備由于其不斷精進的性能，以及多核、多存儲、高dpi等優(yōu)越的特性，可以流暢地輸出60fps動畫效果。

4-Animate like it’s 1999

讓所有東西都動起來！這樣的動效仿佛讓人回到了1999年。
考慮到現(xiàn)在是UI動效的早期設(shè)計階段，設(shè)計師試圖通過增加動效來增強視覺亮點，和曾經(jīng)的陰影和斜角沒什么不同。

但是我很確信，與視覺設(shè)計不同，動效設(shè)計的成熟不需要耗時15年。

過度的動效使用
無意義的動效隨處可見，它們也不僅出自業(yè)余設(shè)計師之手。作為用戶，我們可以很輕易地發(fā)現(xiàn)這種妨礙著你的動畫，它阻隔著你和你的目標(biāo)，令你困擾皺眉。作為設(shè)計師，你需要意識到你的UI設(shè)計并非什么娛樂。沒有人只為看著酷炫的動效爽，就使用你的app或者網(wǎng)頁。

UI動畫的使用反例
OS X的全屏動畫
桌面端和移動端都有無數(shù)的糟糕UI動畫示例，其中之一，就是OS X的窗口切換到全屏模式的過渡動畫。因為它來自因前沿的設(shè)計感著稱的蘋果公司，且是旗艦產(chǎn)品的主要特點，所以格外令人困惑。
（視頻：5-yosemite fullscreen.mp4）
這個UI動畫有以下幾個問題：

緩慢
非必要
不可設(shè)置（除非通過命令行修改）

如何知道你的UI動效使人厭煩？人們會在博客上寫文抱怨。無數(shù)探討如何加速或禁用動效的博文和論壇問題帖，都很有力地說明這個轉(zhuǎn)場動效除了讓用戶煩惱，毫無作用，這是UI動效設(shè)計的一個大忌。
動效設(shè)計案例研究
我們使用一個簡單設(shè)計做示例，它來自我最近為客戶進行的工作。這個交互包含了一些糟糕的設(shè)計決策。
1-Example of Poor UI

UI動效設(shè)計的反面案例（線上demo）
這個設(shè)計包括如下問題：

遮擋了界面的蒙層
缺少后臺正在執(zhí)行操作的指示
動畫緩慢
動畫非必要

這個動畫最煩人的一點，是在耗時間的網(wǎng)絡(luò)請求完成后，這個動畫才發(fā)生，導(dǎo)致增加用戶額外的等待時間。

動畫是否必要？
首要問題理應(yīng)為：這個動畫提升了用戶體驗嗎？

上述交互案例中，出現(xiàn)了正確使用UI動畫的絕佳時機。考慮到這一交互需要一個耗時100-500毫秒的網(wǎng)絡(luò)請求，這是個利用動畫來掩蓋請求耗時的絕好機會。
設(shè)計改進
7-improvement1

改進1（線上Demo）

這是很小的一個改進，增加一個加載指示器，告訴用戶正在等待額外的數(shù)據(jù)。然而，彈出動畫是多余的，減緩了用戶流程。
8-improvement2

改進2（線上Demo）
刪減了不必要的滑出動畫，使用戶在操作后即可看到所需數(shù)據(jù)。蒙層的使用阻擋了用戶視圖，是多余的打擾。
動畫——障眼法
延遲，即使是網(wǎng)絡(luò)應(yīng)用的延遲，通過緩存和預(yù)讀取資源，也可以減少甚至消除。然而這種方式也有其問題。使用流量有限的移動網(wǎng)絡(luò)的用戶，并不愿意應(yīng)用預(yù)讀取大量可能根本不不需要的數(shù)據(jù)。

考慮到延遲并不總能完全避免，我們可以使用動畫制造更利落的錯覺。這種情況下，使用分層動畫尤其有效。
9-improvement3

改進3（線上Demo）
改進如下：

使用了不遮擋界面的加載指示。
重疊的動畫分散了用戶對數(shù)據(jù)讀取延遲的注意力。

漸進式加載
漸進式加載可用來進一步減少可感知的數(shù)據(jù)加載時間。用戶基本不可能立刻用到應(yīng)用展示的所有數(shù)據(jù)。通過分塊下載、數(shù)據(jù)可用后再顯示信息的方法，用戶會產(chǎn)生應(yīng)用比實際上響應(yīng)更及時的錯覺。
10-improvement4