建站常識(shí)
何處安放的Loading
2010-05-17 17:18:00
可用性研究表明,當(dāng)響應(yīng)時(shí)間超過(guò)一秒鐘時(shí),用戶便能夠有所察覺(jué)。
雖然在反饋系統(tǒng)中,當(dāng)用戶需要等待時(shí),更好的解決方案的是應(yīng)該采用確定性的進(jìn)度條。但對(duì)于一些耗時(shí)短,且用戶的帶寬為主要影響要素時(shí),卻使用Loading這種低成本實(shí)現(xiàn)的反饋。
Loading圖標(biāo)的歷史來(lái)源已經(jīng)無(wú)法考究(據(jù)傳是蘋(píng)果最先使用),但是,它的動(dòng)態(tài)效果,在視覺(jué)上剛好是一個(gè)重復(fù)循環(huán)的“風(fēng)火輪”。非常適合做不確定等待時(shí)間的進(jìn)度反饋。
Loading的主要作用,在于提供反饋給用戶表示當(dāng)前狀態(tài),并且讓用戶的命令的執(zhí)行和完成過(guò)渡得更加平滑。從這種角度上說(shuō),它和很多流動(dòng)式反饋沒(méi)有多大區(qū)別,如MAC系統(tǒng)中窗口最小化的漸進(jìn)動(dòng)畫(huà)。
Loading的圖標(biāo)僅僅在web應(yīng)用當(dāng)中產(chǎn)生,而在客戶端中,則較少使用,因?yàn)槭髽?biāo)手型能夠代替它的工作。
但是對(duì)比客戶端,web端的Loading反饋可控性更好,創(chuàng)意也更加。如以下幾種:
那么在設(shè)計(jì)中,如何放置Loading圖標(biāo),也應(yīng)該有所章法。但是無(wú)論如何放置,都有一個(gè)規(guī)則:確保用戶可以注意到。
1.靠近點(diǎn)擊區(qū)域
靠近點(diǎn)擊區(qū)域,能夠讓你的Loading反饋得到最直接的呈現(xiàn),也最利于被注意到。如果能配合按鈕的Enabled與Disabled狀態(tài)的切換,這是很好的反饋。
2.位于內(nèi)容刷新區(qū)域上層
當(dāng)用戶選擇刷新頁(yè)面內(nèi)某塊區(qū)域內(nèi)內(nèi)容時(shí),其視覺(jué)焦點(diǎn)也將聚焦于此,如果此時(shí)讓Loading反饋不適合放置在點(diǎn)擊區(qū)域,那么將其放在內(nèi)容刷新區(qū)域上層,也是一個(gè)很直觀的反饋。如QQ郵箱廣播的評(píng)論展開(kāi)區(qū)域:
但是需要注意的是,勿將Loading反饋采用模態(tài)形式,模態(tài)形式將導(dǎo)致用戶只能等待Loading完成而無(wú)法進(jìn)行其他操作,而且還有可能給用戶帶來(lái)?yè)p失。
如上圖,如果這個(gè)Loading反饋是模態(tài)形式,當(dāng)它出現(xiàn)時(shí),您就無(wú)法點(diǎn)擊頁(yè)面內(nèi)其他地方,萬(wàn)一不走運(yùn),這個(gè)時(shí)候你網(wǎng)絡(luò)斷線,這辛苦寫(xiě)的日志,你就可能再也找不回來(lái)了。(注:圖為Qzone發(fā)表日志截圖,其Loading反饋為非模態(tài)形式)
3.固定區(qū)域
固定區(qū)域呈現(xiàn),最好應(yīng)該是固定在瀏覽器窗口某位置(要確保用戶能很方便的注意到),而不是固定在頁(yè)面某位置。如同Gmail一樣,Loading反饋始終位于瀏覽器窗口頂端位置。
但也需切記,別把Loading反饋放置得離視覺(jué)焦點(diǎn)太遠(yuǎn)。這樣很難注意到。
Loading反饋雖然是一個(gè)小部件,但其能夠給用戶的,卻是系統(tǒng)可見(jiàn)性的有效提高,在平常的設(shè)計(jì)中,需對(duì)Loading反饋設(shè)計(jì)有所留意。
但Loading反饋不足的地方是,無(wú)法明確告知用戶具體等待時(shí)間。就像撥打客服電話中被告知的“稍等片刻”一樣。即使這樣我們依然能做得更好,像Gmail那樣。
當(dāng)用戶Loading了約10秒后,如果系統(tǒng)還在運(yùn)轉(zhuǎn),那么Gmail會(huì)自動(dòng)將Loading標(biāo)簽修改為Still Working,明確告知用戶,可能還需等待一段時(shí)間。
Loading反饋在實(shí)際設(shè)計(jì)中不容忽視,尤其是在用戶提交表單時(shí),Loading反饋和各控件的連鎖狀態(tài)變化場(chǎng)景當(dāng)中。忽視它的后果,將給用戶帶來(lái)嚴(yán)重的等待的焦灼感,給用戶帶來(lái)?yè)p失。
所以,請(qǐng)好好設(shè)計(jì)你們產(chǎn)品的Loading反饋。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺(jué)觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁(yè)設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺(tái)管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢(shì)?
延伸閱讀
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
搜索引擎蜘蛛 html和css 色彩心理學(xué) 青島高端網(wǎng)站建設(shè) IT資訊 青島網(wǎng)站建設(shè)基礎(chǔ)知識(shí) 搜索引擎 海信網(wǎng)絡(luò)科技 青島輪胎網(wǎng)站設(shè)計(jì)公司 網(wǎng)頁(yè)設(shè)計(jì) robots 網(wǎng)站推廣 輪胎網(wǎng)站設(shè)計(jì) 新的元素 php程序 青島高端網(wǎng)站建設(shè)公司哪家好 互聯(lián)網(wǎng) 頁(yè)面設(shè)計(jì) 微網(wǎng)站 交互設(shè)計(jì) 青島網(wǎng)頁(yè)設(shè)計(jì) 手機(jī)網(wǎng)站 微信營(yíng)銷的優(yōu)勢(shì) 網(wǎng)站規(guī)劃 網(wǎng)站交互設(shè)計(jì) 版面布局 青島黃島、紅島網(wǎng)站建設(shè)公司 微官網(wǎng) 空白和簡(jiǎn)潔的設(shè)計(jì) 網(wǎng)站動(dòng)畫(huà)