這篇短文將會(huì)評(píng)論UI方案中動(dòng)畫的過度運(yùn)用，并將其與前期的視覺方案進(jìn)行對(duì)比，提出一些對(duì)于有用的GUI動(dòng)效方案的建議。

創(chuàng)新互聯(lián)將在下文中，簡略評(píng)論怎樣改進(jìn)下面的這個(gè)交互。

UI動(dòng)效方案的不好案例

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

概述

自從 70、80 時(shí)代首個(gè)光柵圖像在CRT屏幕出現(xiàn)以來，我們對(duì)于(數(shù)字)視覺方案的心情一直在不斷進(jìn)化。與其他藝術(shù)領(lǐng)域不一樣，在數(shù)字方案領(lǐng)域暴露的趨勢，與運(yùn)用設(shè)備的展開史緊密有關(guān)。

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

類比視覺方案展開進(jìn)程

動(dòng)效方案正在履歷生長的苦楚，正如在當(dāng)年90時(shí)代和21世紀(jì)初的視覺方案。追溯視覺方案進(jìn)化展開的進(jìn)程，有助于我們?nèi)ダ斫猬F(xiàn)時(shí)期的動(dòng)效方案。

21世紀(jì)前期的頁面方案

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

扁平化方案

扁平化方案示例

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

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

動(dòng)效方案

現(xiàn)時(shí)期的動(dòng)效方案，可以類比視覺方案史的“暗影時(shí)期”。

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

另外，現(xiàn)在的移動(dòng)設(shè)備因?yàn)槠洳粩嗑M(jìn)的功用，以及多核、多存儲(chǔ)、高dpi等優(yōu)勝的特性，可以流暢地輸出60fps動(dòng)畫效果。

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

考慮到現(xiàn)在是UI動(dòng)效的前期方案時(shí)期，方案師企圖通過增加動(dòng)效來增強(qiáng)視覺亮點(diǎn)，和從前的暗影和斜角沒什么不一樣。

可是我很深信，與視覺方案不一樣，動(dòng)效方案的老到不需要耗時(shí)15年。

過度的動(dòng)效運(yùn)用

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

UI動(dòng)畫的運(yùn)用反例

OS X的全屏動(dòng)畫

桌面端和移動(dòng)端都有很多的差勁UI動(dòng)畫示例，其中之一，便是OS X的窗口切換到全屏方法的過渡動(dòng)畫。因?yàn)樗鼇碜砸蚯把氐姆桨父兄Q的蘋果公司，且是旗艦產(chǎn)品的首要特色，所以格外令人迷惑。

(視頻：5-yosemite fullscreen.mp4)

這個(gè)UI動(dòng)畫有以下幾個(gè)疑問：

緩慢

非必要

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

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

動(dòng)效方案案例研討

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

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

這個(gè)方案包括如下疑問：

遮擋了界面的蒙層

缺少后臺(tái)正在實(shí)行操作的指示

動(dòng)畫緩慢

動(dòng)畫非必要

這個(gè)動(dòng)畫最煩人的一點(diǎn)，是在耗時(shí)間的網(wǎng)絡(luò)央求完成后，這個(gè)動(dòng)畫才發(fā)生，致使增加用戶額定的等待時(shí)間。

動(dòng)畫是不是必要?

首要疑問理應(yīng)為：這個(gè)動(dòng)畫進(jìn)步了用戶領(lǐng)會(huì)嗎?

上述交互案例中，出現(xiàn)了精確運(yùn)用UI動(dòng)畫的好時(shí)機(jī)。考慮到這一交互需要一個(gè)耗時(shí)100-500毫秒的網(wǎng)絡(luò)央求，這是個(gè)運(yùn)用動(dòng)畫來掩蓋央求耗時(shí)的絕好時(shí)機(jī)。

方案改進(jìn)

改進(jìn)1(線上Demo)

這是很小的一個(gè)改進(jìn)，增加一個(gè)加載指示器，告訴用戶正在等待額定的數(shù)據(jù)。可是，彈出動(dòng)畫是剩下的，減緩了用戶流程。

改進(jìn)2

刪減了不必要的滑出動(dòng)畫，運(yùn)用戶在操作后即可看到所需數(shù)據(jù)。蒙層的運(yùn)用阻擋了用戶視圖，是剩下的打擾。

動(dòng)畫——障眼法

推延，即使是網(wǎng)絡(luò)運(yùn)用的推延，通過緩存和預(yù)讀取本錢，也可以減少甚至消除?？墒沁@種方法也有其疑問。運(yùn)用流量有限的移動(dòng)網(wǎng)絡(luò)的用戶，并不情愿運(yùn)用預(yù)讀取很多或許底子不不需要的數(shù)據(jù)。

考慮到推延并不總能完全避免，我們可以運(yùn)用動(dòng)畫制造更妥當(dāng)?shù)腻e(cuò)覺。這種情況下，運(yùn)用分層動(dòng)畫格外有用。

改進(jìn)3

改進(jìn)如下：

運(yùn)用了不遮擋界面的加載指示。

堆疊的動(dòng)畫分散了用戶對(duì)數(shù)據(jù)讀取推延的注意力。

漸進(jìn)式加載

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

改進(jìn)4

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

作為另一種備選方案，也現(xiàn)已完成如下：

改進(jìn)5

結(jié)論

我們要注意，不要重復(fù)方法跨越功用的過錯(cuò)。動(dòng)畫可以且應(yīng)當(dāng)運(yùn)用于加強(qiáng)網(wǎng)站或運(yùn)用的用戶領(lǐng)會(huì)，而純裝飾性的動(dòng)畫效果設(shè)計(jì)，不太或許有助于產(chǎn)品變得非常好。

當(dāng)前文章：UI動(dòng)效設(shè)計(jì)這些到底該不該繼續(xù)？
鏈接分享：http://aaarwkj.com/news/169599.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、面包屑導(dǎo)航、域名注冊、網(wǎng)站制作、網(wǎng)站內(nèi)鏈、網(wǎng)站設(shè)計(jì)

廣告

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