這篇短文將會評論UI方案中動畫的過度運用，并將其與前期的視覺方案進行對比，提出一些對于有用的GUI動效方案的建議。

創(chuàng)新互聯將在下文中，簡略評論怎樣改進下面的這個交互。

UI動效方案的不好案例

注：這個不好案例并非假定，而是來自近期的真實客戶案例。

概述

自從 70、80 時代首個光柵圖像在CRT屏幕出現以來，我們對于(數字)視覺方案的心情一直在不斷進化。與其他藝術領域不一樣，在數字方案領域暴露的趨勢，與運用設備的展開史緊密有關。

設備才干的進步眾所周知，閃現器技能使分辨率從CGA320*200，到VGA的640*480，然后到SVGA的800*600，到現在已敏捷進步至4k及以上。

類比視覺方案展開進程

動效方案正在履歷生長的苦楚，正如在當年90時代和21世紀初的視覺方案。追溯視覺方案進化展開的進程，有助于我們去理解現時期的動效方案。

21世紀前期的頁面方案

在更精妙的方案言語出現之前，方案師們在前期時期簡略亂用新功用，這是正常的。90時代末和21世紀初的界面方案師，應當還記得以暗影、斜角、高光，無留白這特征的過度方案。當方案師們著迷于新媒體，并沉醉于像素的美好時，這一成果再天然不過了。

扁平化方案

扁平化方案示例

不論你喜歡與否，扁平化方案在方案圈中已成為干流思想。全部的首要系統(tǒng)渠道(Android、iOS、OSX、Windows、Windows phone)都現已初步擁抱這種極簡方案言語。同時，它還操作著高速展開的頁面方案。

扁平化方案是視覺方案考慮老到的體現。它是一個天然的進程，一方面是被潮流和時尚唆使，另一方面折射出業(yè)內人士總算逐漸掌握了數字媒體 。

動效方案

現時期的動效方案，可以類比視覺方案史的“暗影時期”。

頁面動效才干有了明顯進步，得益于CSS中的過渡特色(transition)和被硬件加速支撐的變形特色(transform)，以及正在展開的標準，如JS動效(JS Web Animations)。

另外，現在的移動設備因為其不斷精進的功用，以及多核、多存儲、高dpi等優(yōu)勝的特性，可以流暢地輸出60fps動畫效果。

讓全部東西都動起來!這么的動效似乎讓人回到了1999年。

考慮到現在是UI動效的前期方案時期，方案師企圖通過增加動效來增強視覺亮點，和從前的暗影和斜角沒什么不一樣。

可是我很深信，與視覺方案不一樣，動效方案的老到不需要耗時15年。

過度的動效運用

無意義的動效隨處可見，它們也不只出自業(yè)余方案師之手。作為用戶，我們可以很輕易地發(fā)現這種阻止著你的動畫，它阻隔著你和你的政策，令你迷惑皺眉。作為方案師，你需要認識到你的UI方案并非什么文娛。沒有人只為看著酷炫的動效爽，就運用你的app或許頁面。

UI動畫的運用反例

OS X的全屏動畫

桌面端和移動端都有很多的差勁UI動畫示例，其中之一，便是OS X的窗口切換到全屏方法的過渡動畫。因為它來自因前沿的方案感著稱的蘋果公司，且是旗艦產品的首要特色，所以格外令人迷惑。

(視頻：5-yosemite fullscreen.mp4)

這個UI動畫有以下幾個疑問：

緩慢

非必要

不可設置(除非通過命令行修正)

怎樣知道你的UI動效使人厭煩?我們會在博客上寫文抱怨。很多評論怎樣加速或禁用動效的博文和論壇疑問帖，都很有力地闡明這個轉場動效除了讓用戶煩惱，毫無效果，這是UI動效方案的一個大忌。

動效方案案例研討

我們運用一個簡略方案做示例，它來自我近期為客戶進行的工作。這個交互包括了一些差勁的方案決議方案。

UI動效方案的不好案例(線上demo)

這個方案包括如下疑問：

遮擋了界面的蒙層

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

動畫緩慢

動畫非必要

這個動畫最煩人的一點，是在耗時間的網絡央求完成后，這個動畫才發(fā)生，致使增加用戶額定的等待時間。

動畫是不是必要?

首要疑問理應為：這個動畫進步了用戶領會嗎?

上述交互案例中，出現了精確運用UI動畫的好時機?？紤]到這一交互需要一個耗時100-500毫秒的網絡央求，這是個運用動畫來掩蓋央求耗時的絕好時機。

方案改進

改進1(線上Demo)

這是很小的一個改進，增加一個加載指示器，告訴用戶正在等待額定的數據。可是，彈出動畫是剩下的，減緩了用戶流程。

改進2

刪減了不必要的滑出動畫，運用戶在操作后即可看到所需數據。蒙層的運用阻擋了用戶視圖，是剩下的打擾。

動畫——障眼法

推延，即使是網絡運用的推延，通過緩存和預讀取本錢，也可以減少甚至消除。可是這種方法也有其疑問。運用流量有限的移動網絡的用戶，并不情愿運用預讀取很多或許底子不不需要的數據。

考慮到推延并不總能完全避免，我們可以運用動畫制造更妥當的錯覺。這種情況下，運用分層動畫格外有用。

改進3

改進如下：

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

堆疊的動畫分散了用戶對數據讀取推延的注意力。

漸進式加載

漸進式加載可用來進一步減少可感知的數據加載時間。用戶底子不可能立刻用到運用展現的全部數據。通過分塊下載、數據可用后再閃現信息的方法，用戶會發(fā)生運用比實際上呼應更及時的錯覺。

改進4

很多留言的人，包括來自用戶領會社區(qū)的Isak Falch，舉薦我運用“拓寬式卡片”，這個方法最真實的優(yōu)點是堅持了用戶對上下文環(huán)境的感知。

作為另一種備選方案，也現已完成如下：

改進5

結論

我們要注意，不要重復方法跨越功用的過錯。動畫可以且應當運用于加強網站或運用的用戶領會，而純裝飾性的動畫效果設計，不太或許有助于產品變得非常好。

本文題目：UI動效設計這些到底該不該繼續(xù)？
URL鏈接：http://www.rwnh.cn/news49/169599.html

成都網站建設公司_創(chuàng)新互聯，為您提供用戶體驗、虛擬主機、全網營銷推廣、App設計、外貿建站、建站公司

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯