響應(yīng)式網(wǎng)站設(shè)計(jì)原則

2022-06-24    分類(lèi): 響應(yīng)式網(wǎng)站

創(chuàng)新互聯(lián),高端網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì)實(shí)時(shí)響應(yīng)的用戶(hù)體驗(yàn)時(shí)可能有用的幾個(gè)基本原則:

1、狀態(tài)清晰

用戶(hù)應(yīng)該清楚系統(tǒng)當(dāng)前所處的狀態(tài),任何時(shí)候,程序應(yīng)該向用戶(hù)傳達(dá)清楚當(dāng)前發(fā)生了什么并針對(duì)用戶(hù)的每一步操作給出清晰的反饋。

應(yīng)用程序本身建立在一個(gè)非結(jié)構(gòu)化的系統(tǒng)之上,其試圖向用戶(hù)提供結(jié)構(gòu)化的數(shù)據(jù)。雖然實(shí)時(shí)響應(yīng)的界面并不使用類(lèi)似于頁(yè)面刷新器這樣的固定標(biāo)識(shí)符,但它同樣可以使用恰當(dāng)?shù)男盘?hào)來(lái)標(biāo)識(shí)狀態(tài)的改變。

實(shí)例:網(wǎng)絡(luò)連接狀態(tài)

在我們使用移動(dòng)設(shè)備的時(shí)候,難免會(huì)碰到網(wǎng)絡(luò)掉線的情況,這時(shí)候最好告訴用戶(hù)是由于超出程序控制的某種因素導(dǎo)致了這種意外情況。


不好:網(wǎng)絡(luò)掉線后并沒(méi)有告訴用戶(hù)

好:出現(xiàn)清楚的通知告訴用戶(hù)網(wǎng)絡(luò)掉線,系統(tǒng)正在嘗試重新連接

實(shí)例:加載狀態(tài)

低帶寬(網(wǎng)絡(luò)環(huán)境差)、加載數(shù)據(jù)量大、多點(diǎn)連接等諸多因素都可能引起用戶(hù)在使用你的程序過(guò)程中需要花費(fèi)一定時(shí)間等待。應(yīng)對(duì)這種情況的方法是你要培養(yǎng)自己成為一個(gè)具有前瞻性的設(shè)計(jì)師,通過(guò)一定的方法凸顯出系統(tǒng)正在響應(yīng)用戶(hù)行為并嘗試加載新數(shù)據(jù),好讓用戶(hù)意識(shí)到這一過(guò)程。


不好:系統(tǒng)沒(méi)有告知用戶(hù)他在與列表項(xiàng)交互后,系統(tǒng)就開(kāi)始加載內(nèi)容了

好:頭部的進(jìn)度指示器向用戶(hù)標(biāo)明了加載過(guò)程,以及需要等待的時(shí)間

實(shí)例:確認(rèn)狀態(tài)

應(yīng)該積極響應(yīng)用戶(hù)的操作,并給出結(jié)果的反饋,讓用戶(hù)意識(shí)到系統(tǒng)對(duì)其行為目標(biāo)的狀態(tài)是關(guān)心的。


不好:用戶(hù)到新頁(yè)面后,系統(tǒng)并沒(méi)有告知其前面的刪除操作是否成功了

好:使用一個(gè)提示強(qiáng)化了系統(tǒng)對(duì)刪除操作的響應(yīng)

2、有預(yù)期的改變

用戶(hù)應(yīng)該清楚預(yù)期效果是怎樣的,就是說(shuō)程序應(yīng)該向用戶(hù)表明在他們操作就將發(fā)生什么。

在一套邏輯嚴(yán)謹(jǐn)(按部就班,模式固定)的系統(tǒng)里,出現(xiàn)一些驚喜(意外)并不會(huì)令人愉悅。對(duì)于一輛負(fù)責(zé)運(yùn)送乘客的普通汽車(chē),如果你關(guān)心的是其精密的機(jī)械結(jié)構(gòu),那么爆胎和發(fā)動(dòng)機(jī)歇火就是在你的關(guān)注點(diǎn)之外的意外驚喜。 跟汽車(chē)類(lèi)似的是,一個(gè)應(yīng)用程序通過(guò)其精細(xì)的設(shè)計(jì)(相比于汽車(chē)通過(guò)其精密的機(jī)械結(jié)構(gòu)滿(mǎn)足人們的需要)來(lái)滿(mǎn)足用戶(hù)的某種需求,然而不同于汽車(chē)的是,現(xiàn)在的數(shù)字媒體(應(yīng)用程序)允許我們預(yù)料到將要發(fā)生的變化并提前告訴用戶(hù)。

實(shí)例:(1)傳達(dá)結(jié)果

當(dāng)系統(tǒng)可能出現(xiàn)較強(qiáng)烈的狀態(tài)變化時(shí),應(yīng)該提前向用戶(hù)預(yù)示其行為操作所將帶來(lái)的結(jié)果,這樣也就給了用戶(hù)自己來(lái)把控即將發(fā)生的事情的機(jī)會(huì),進(jìn)而避免發(fā)生出其不意的“驚喜”。


不好:沒(méi)有任何跡象或動(dòng)作,新的信息就出現(xiàn)在列表中

好:當(dāng)新的信息準(zhǔn)備好加載后,系統(tǒng)出現(xiàn)提示,用戶(hù)與之交互后方插入到列表中

實(shí)例:(2)使用骨骼框架

為了緩解用戶(hù)在等待數(shù)據(jù)加載時(shí)的長(zhǎng)耗時(shí),并讓頁(yè)面間的轉(zhuǎn)換過(guò)渡更為流暢,可以考慮在數(shù)據(jù)加載出來(lái)之前先向用戶(hù)顯示一個(gè)內(nèi)容框架,讓用戶(hù)能夠預(yù)期到新頁(yè)面將要填充的數(shù)據(jù)類(lèi)型和復(fù)雜度。這樣做帶來(lái)的另一個(gè)好處就是會(huì)讓用戶(hù)感覺(jué)到你的程序在響應(yīng)用戶(hù)操作時(shí)還是相對(duì)及時(shí)的。


不好:在頁(yè)面內(nèi)容未加載完全之前,用戶(hù)不得不在第一個(gè)頁(yè)面一直等待

好:在頁(yè)面內(nèi)容未加載完全之前,頁(yè)面便跳轉(zhuǎn),使用占位符向用戶(hù)標(biāo)明即將加載的數(shù)據(jù)類(lèi)型和復(fù)雜度

3. 保持上下文環(huán)境統(tǒng)一協(xié)調(diào)

用戶(hù)應(yīng)該清楚他們看到的內(nèi)容從何而來(lái),是屬于哪里的。

在實(shí)時(shí)響應(yīng)類(lèi)型的應(yīng)用程序中,通常情況下我們不可能看到系統(tǒng)的所有響應(yīng)變化(有一些中間態(tài)可能在某些條件下才能觸發(fā)),這時(shí)候,我們?cè)O(shè)定并強(qiáng)調(diào)一條緩沖帶就顯得非常重要,它用來(lái)揭示每個(gè)頁(yè)面和按鈕跟其他元素的關(guān)系。這種做法就意味著我們創(chuàng)建了很多個(gè)標(biāo)示,用戶(hù)依賴(lài)它可以在這些關(guān)聯(lián)的頁(yè)面、元素間流暢切換。

實(shí)例:(1)保持布局一致

所有新的內(nèi)容應(yīng)該出現(xiàn)在一個(gè)可預(yù)期的位置,要讓用戶(hù)習(xí)慣于在程序中特定的關(guān)鍵位置點(diǎn)間穿梭轉(zhuǎn)換,盡量避免提供多種方式給用戶(hù)來(lái)做同一件事情的做法,這會(huì)稀釋用戶(hù)對(duì)各個(gè)行為路徑的關(guān)注度和適應(yīng)性。


不好:新的信息出現(xiàn)在不可預(yù)期的位置

好:新信息自當(dāng)前列表頂部插入。用戶(hù)便漸漸意識(shí)到新信息出現(xiàn)在列表上部

實(shí)例:(2)保持良好的狀態(tài)變化姿勢(shì)

如果關(guān)聯(lián)信息間的狀態(tài)改變出現(xiàn)在一個(gè)不可預(yù)期的位置, 可以使用設(shè)計(jì)精巧的動(dòng)效來(lái)向用戶(hù)傳達(dá)新內(nèi)容的出現(xiàn)及對(duì)周?chē)畔⒌挠绊?。這種做法一定程度上延緩了用戶(hù)的體驗(yàn)過(guò)程,但能使得狀態(tài)的變化過(guò)程非常清晰明了。


不好:一條信息插入列表后導(dǎo)致相鄰的信息依次移位

好:使用一個(gè)精細(xì)的動(dòng)畫(huà)效果凸顯新內(nèi)容的出現(xiàn)和相鄰內(nèi)容的動(dòng)位,給用戶(hù)一定的反應(yīng)時(shí)間

實(shí)例:(3)記錄保存滾動(dòng)位置

當(dāng)在兩屏內(nèi)容間來(lái)回切換時(shí),要確保用戶(hù)回到的是返回前在當(dāng)前頁(yè)面的最后瀏覽位置。

當(dāng)前文章:響應(yīng)式網(wǎng)站設(shè)計(jì)原則
網(wǎng)站路徑:http://www.muchs.cn/news23/170973.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有響應(yīng)式網(wǎng)站

廣告

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

成都定制網(wǎng)站建設(shè)