UI動效設(shè)計這些到底該不該繼續(xù)？

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

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

UI動效方案的不好案例

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

概述

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

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

類比視覺方案展開進程

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

21世紀前期的頁面方案

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

扁平化方案

扁平化方案示例

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

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

動效方案

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

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

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

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

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

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

過度的動效運用

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

UI動畫的運用反例

OS X的全屏動畫

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

(視頻：5-yosemite fullscreen.mp4)

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

緩慢

非必要

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

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

動效方案案例研討

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

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

這個方案包括如下疑問：

遮擋了界面的蒙層

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

動畫緩慢

動畫非必要

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

動畫是不是必要?

首要疑問理應(yīng)為：這個動畫進步了用戶領(lǐng)會嗎?

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

方案改進

改進1(線上Demo)

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

改進2

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

動畫——障眼法

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

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

改進3

改進如下：

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

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

漸進式加載

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

改進4

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

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

改進5

結(jié)論

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

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

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

廣告

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