中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語(yǔ)：我們?cè)诘却粋€(gè)軟件頁(yè)面加載的時(shí)候，總是可以看到一個(gè)動(dòng)效畫(huà)面，一般都與軟件的調(diào)性相關(guān)；這類(lèi)設(shè)計(jì)要非常注重用戶(hù)的體驗(yàn)，設(shè)計(jì)的不好可能還會(huì)降低用戶(hù)的耐心；本文作者詳細(xì)介紹了Loader設(shè)計(jì)最重要且必要的準(zhǔn)則，我們一起來(lái)看一下。

很多頁(yè)面在設(shè)計(jì)時(shí)，常常會(huì)忽略加載器的設(shè)計(jì)，也就是loader，或者是Loading animations。

Loader是在使用網(wǎng)站的過(guò)程中，頁(yè)面內(nèi)容數(shù)據(jù)加載時(shí)，減少用戶(hù)等待厭倦感的動(dòng)效；它不但可以很好的提高頁(yè)面的用戶(hù)體驗(yàn)感，還可以減少用戶(hù)的流失。

在這里，我將分享給大家loader設(shè)計(jì)最重要且必要設(shè)計(jì)準(zhǔn)則，幫助你設(shè)計(jì)更好頁(yè)面產(chǎn)品！請(qǐng)認(rèn)真閱讀哦~

干貨分享內(nèi)容：

• loader最重要的設(shè)計(jì)原則是什么？
• 如何做？
• 做到什么程度？

一、WHAT &?loader最重要的設(shè)計(jì)原則是什么？

提高用戶(hù)的期待心理。

提高用戶(hù)的期待心理，就是可以讓用戶(hù)不停的期待：后面是什么？

為什么要提高用戶(hù)期待心理呢？

提高了用戶(hù)期待，意味著減少了用戶(hù)在等待過(guò)程中的厭倦感、可以提高了產(chǎn)品使用的愉悅感，最為重要的是：可以為網(wǎng)站留住更多的客戶(hù)。

對(duì)于這個(gè)競(jìng)爭(zhēng)流量的時(shí)代，多一個(gè)用戶(hù)就是多一份底氣；Loader的樣式非常豐富，我們?cè)赑interest、dribble上，可以看到很多優(yōu)秀的Loader。

常見(jiàn)的形式有：

1）圓形

Loading animation by Oleg Frolov

2）線性

Loading animation byAllen ZhangforAlpha Team

3）Loading 文字

Loading animation by Oleg Frolov

4）圖形

Loading animationby Gur Margalit

5）骨架屏

骨架屏（Skeleton screens）的加載形式，是我的偶像Luke Wroblewski提出的：

在頁(yè)面加載出來(lái)之前，預(yù)先展示網(wǎng)頁(yè)的低保真，讓用戶(hù)看到頁(yè)面漸漸加載的過(guò)程；這種加載方式如今在YouTube、Facebook、Linkedln和微博等等的頁(yè)面上都有運(yùn)用。

二、HOW &?如何提高用戶(hù)的期待心理？

1. 一個(gè)視覺(jué)中心

設(shè)計(jì)Loader的時(shí)候，需要以一個(gè)視覺(jué)中心為原則；讓用戶(hù)的視線停留在一個(gè)焦點(diǎn)上，可以有效的減少用戶(hù)的視覺(jué)混亂和壓力，提高用戶(hù)的專(zhuān)注度和耐心。

Loader的視覺(jué)效果有元素精簡(jiǎn)的、也有相對(duì)豐富既有趣味的；兩者沒(méi)有優(yōu)勝者，因?yàn)橹灰鼈儽３忠粋€(gè)視覺(jué)中心的原則，都可以是很好的Loader。

有一些設(shè)計(jì)總是希望Loader更有趣一些，更豐富一些，例如有一個(gè)豐富的圖像動(dòng)效，還要加上一個(gè)loading字符的動(dòng)效；這樣用戶(hù)的注意力一下子就被分散了，用戶(hù)無(wú)法集中注意力，又如何保持耐心呢？

Loading animation byYup Nguyen

2. 展示后臺(tái)進(jìn)行的狀態(tài)

告訴用戶(hù)為什么需要等待是非常重要的！用戶(hù)在等待的時(shí)候，會(huì)想到現(xiàn)在它在干什么？進(jìn)行到哪一步了？還要多久？

這時(shí)，Loader的設(shè)計(jì)可以體現(xiàn)當(dāng)前正在進(jìn)行的任務(wù)進(jìn)度：

展示后臺(tái)發(fā)送郵件的任務(wù)

3. 傳播品牌

用戶(hù)等待的時(shí)間是品牌視覺(jué)傳播的好時(shí)機(jī)。

除了告訴用戶(hù)進(jìn)行狀態(tài)之外，還可以是和產(chǎn)品業(yè)務(wù)相關(guān)的動(dòng)效，也可以是品牌元素的運(yùn)用，給用戶(hù)加深產(chǎn)品的業(yè)務(wù)和品牌印象。

例如以下兩個(gè)例子，我們可以很清楚的了解該頁(yè)面的產(chǎn)品業(yè)務(wù)：

無(wú)線符號(hào)“∞”為元素設(shè)計(jì)的loader，很好的貼合了“Infinity（無(wú)限）”的品牌形象：

在用戶(hù)等待的時(shí)間里，將信息以風(fēng)趣的方式展示給用戶(hù)，將會(huì)大大提高用戶(hù)的期待心理，更為重要的是，提高了品牌傳播的力度。

例如Google的loader設(shè)計(jì)：

“ Google”

“ Google chrome”

“ Google drive”

三、HOW MUCH & 設(shè)計(jì)要做到什么程度？

1. 動(dòng)效流暢

雖然這是屁話，僅僅只考驗(yàn)設(shè)計(jì)師的手活和耐心；但是這短短的幾秒真的需要打磨，因?yàn)榻z滑的設(shè)計(jì)是不會(huì)被察覺(jué)的，但是一旦有哪里不流暢，及其容易被用戶(hù)感知到，從而降低耐心，造成用戶(hù)流失。

2. 簡(jiǎn)單還是豐富？

設(shè)計(jì)需要考慮投入比，不同地方使用Loader的需求是不一樣的，有些簡(jiǎn)簡(jiǎn)單單就可以了，有些則要復(fù)雜一些。那使用簡(jiǎn)單或復(fù)雜的Loader最重要的區(qū)別是什么？

“占位空間” >“ 加載時(shí)間”

Loader的大小，取決于它的占位空間大小，也取決于平均加載時(shí)間，原則上優(yōu)先級(jí)為：“占位空間”>“加載時(shí)間”。

在占位空間相同的情況下，后臺(tái)加載時(shí)間在1s左右，不超過(guò)3s的，使用loader應(yīng)盡量精簡(jiǎn)：

后臺(tái)加載時(shí)間在3s左右甚至是以上的，則需要豐富一些的loader：

3. Loader的文件大小

沒(méi)有絕對(duì)的數(shù)據(jù)，這需要設(shè)計(jì)師和前端具體溝通。

文件的大小和實(shí)際運(yùn)用密切相關(guān)，設(shè)計(jì)師在設(shè)計(jì)loader的時(shí)候一定要考慮用戶(hù)實(shí)際使用情況。

你不希望因?yàn)長(zhǎng)oader的gif大小太大，導(dǎo)致用戶(hù)使用時(shí)，loader出現(xiàn)卡頓吧？更不希望頁(yè)面都快加載出來(lái)了Loader還沒(méi)出來(lái)吧？

這種糟糕的體驗(yàn)就不要讓它存在了！

參考文獻(xiàn)：

Everything you need to know about Loading Animations>by Lisa Dziuba

本文@家祺 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。