10個(gè)小細(xì)節(jié)大大改善用戶體驗(yàn)_建站經(jīng)驗(yàn)教程
推薦:更換域名對(duì)網(wǎng)站帶來(lái)的影響及補(bǔ)救措施繼上次發(fā)表自己社區(qū)門戶一月運(yùn)行盤點(diǎn)后,我站面臨換域名的問(wèn)題,本人把換域名的問(wèn)題心得總結(jié)起來(lái),希望對(duì)各位有點(diǎn)作用。由于網(wǎng)站的發(fā)展需要,更換了一個(gè).COM域名,換域名給網(wǎng)站所帶來(lái)的風(fēng)險(xiǎn)很大
以下是我做美工的兩年生活中一條條總結(jié)出來(lái)的經(jīng)驗(yàn),每一點(diǎn)都是我常用的,雖然不是什么大學(xué)問(wèn),但我覺得要互相學(xué)習(xí)才能提高,所以現(xiàn)在拿出來(lái)和大家一起分享,如果你覺得實(shí)用就拿去試試,然后留個(gè)評(píng)論,我就很高興了,不喜歡的可以路過(guò)。費(fèi)話少說(shuō),下面正式開始。
1.加載大圖片時(shí),顯示loading小圖片。
這招是我最常用的。當(dāng)我們要加載一張比較大的圖片時(shí),如果能加載圖片的同時(shí),顯示loading的小圖片,那樣看起來(lái)就人性化很多。當(dāng)加載完成時(shí),圖片會(huì)蓋住loading小圖片,這是一個(gè)很有用的小技巧,我的每個(gè)網(wǎng)站都加上了這個(gè)功能,不信你可以到這個(gè)頁(yè)面看,http://www.82xuexi.cn/html/2008-09/245.htm這個(gè)頁(yè)面是我專門做來(lái)演示這個(gè)示例的,上面我放了一張很大的圖片,應(yīng)該可以看清加載過(guò)程。要實(shí)現(xiàn)這個(gè)小功能,只要在網(wǎng)站的公共樣式表上添加下面這個(gè)樣式 ,就可以實(shí)現(xiàn)了。
img {
background-image:url(loading.gif);
background-position:center;
background-repeat:no-repeat;
}
解釋一下上面的代碼,懂CSS的站長(zhǎng)可以略去這段。第一行“img”指向頁(yè)面的全體圖片元素(看到樣式表的優(yōu)勢(shì)了吧,只要一句,就能作用于網(wǎng)站的全體同類元素,不是DIV+CSS的網(wǎng)站站長(zhǎng)是不是有想法了?呵呵)。第二行“background-image:url(loading.gif);”是指為圖片添加一個(gè)以圖片為背景的背景(讀起來(lái)有點(diǎn)拗口)。這個(gè)loading.gif是你要你自己上傳的加載小圖片。不過(guò)有些網(wǎng)站的images文件夾里已經(jīng)有這個(gè)圖片了,直接用就行,如果你確實(shí)不想到處找的話,我這里有一堆,選一個(gè)你喜歡的玩玩吧:http://www.82xuexi.cn/html/2008-09/333.htm。第三行:background-position:center;把背景圖片居中,這樣看起來(lái)比較順眼。第四行:background-repeat:no-repeat;就是讓loading.gif小圖片只顯示一個(gè),如果沒(méi)有這句,就用出現(xiàn)很多排列起來(lái)的loading.gif小圖片,這要注意一下。
2.選填表單右邊顯示“可不填”。
這是我最初在QQ網(wǎng)站的留言本上看到的,當(dāng)時(shí)看到個(gè)人信息的一些表單旁邊寫著“可不埴”的時(shí)候,真的是感覺非常舒服,你想想,人家好不容易有空給你留言,你還想人家慢慢看你的留言說(shuō)明嗎?給你留言,當(dāng)然想簡(jiǎn)要完事啦。你卻動(dòng)不動(dòng)跳出個(gè)“表單內(nèi)容不能有空”這不把人家嚇跑才怪。這個(gè)小技巧可以應(yīng)用于各大論壇的用戶注冊(cè),留言本等地方,不要只在必填框旁邊加個(gè)紅*就算了,這樣對(duì)于熟悉網(wǎng)站的人來(lái)說(shuō)當(dāng)然沒(méi)問(wèn)題,但你要考慮到各種各樣的網(wǎng)民。“可不填”三個(gè)字,就能大大提高用戶體驗(yàn),為什么不試試呢。
3.保證每個(gè)頁(yè)面都有回首頁(yè)的連接。
為什么要主這個(gè)呢?因?yàn)槲铱吹胶芏嗑W(wǎng)站都沒(méi)注意到這個(gè)小細(xì)節(jié),有一次我在一個(gè)論壇上登陸,成功后,他跳轉(zhuǎn)到另一個(gè)頁(yè)面提示登陸成功,等了十幾秒它都不自動(dòng)返回,但我又已經(jīng)順手把多的頁(yè)面關(guān)掉了,所以,只剩下一個(gè)頁(yè)面了,我又不能返回,他又沒(méi)有返回首頁(yè)的鏈接,一氣之下,我就關(guān)掉瀏覽器走人了。所以,建議站長(zhǎng)朋友們有空多檢查一下自己的網(wǎng)站,看是不是有些頁(yè)面是孤獨(dú)的。
4.在執(zhí)行AJAX操作時(shí),如果響應(yīng)時(shí)間過(guò)長(zhǎng),應(yīng)提示用戶加載超時(shí)。
這個(gè)在AJAX中,可以使你的程序更人性化的小技巧,不多說(shuō)了,你看下面的代碼就明白。如果你看不明白的話,就不要亂改網(wǎng)站,會(huì)出錯(cuò)的。這是一個(gè)用戶驗(yàn)證的程序片段,注意紅色部分。
var timeLast;
//發(fā)送信息
function submitSelectItem()
{
var postStr=“uid=”+document.getElementById(“userName”).value+“&pwd=”+hex_md5
(document.getElementById(“passWord”).value);
timeLast=window.setTimeout(“show_timeout()”,15000 );//超過(guò)15000毫秒后顯示超時(shí)
show_waitting();
createXMLHTTP();//創(chuàng)建XMLHttpRequest對(duì)象
var url=“ajax/chcekUser.aspx?time=”+TimeDemo();
xmlHttp.open(“POST”,url,true);
xmlHttp.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded:charset=UTF-8”);
xmlHttp.onreadystatechange=getResponseRusult;
xmlHttp.send(postStr);
}
//回調(diào)函數(shù)
function getResponseRusult()
{
if(xmlHttp.readyState==4)//判斷對(duì)象狀態(tài)
{
if(xmlHttp.status==200)//信息成功返回,開始處理信息
{
clearTimeout(window.timeLast);
var reint=xmlHttp.responseText;
switch (reint) {
case “1”:
show_success();break ;
case “2” :
show_tryCountOut();break ;
default :
show_error();break ;
}
}
}
}
5.可能的不良后果提前提醒用戶。
如果你的頁(yè)面很大,特別是要用到很多表格時(shí),加載時(shí)間可能會(huì)很長(zhǎng),這時(shí)候要提前告訴用戶。“頁(yè)面可能加載時(shí)間比較長(zhǎng),請(qǐng)耐心等待。..。”之類的。
6.拿到美工做給你的頁(yè)面,一定要測(cè)試不同的瀏覽器。
這主要是有些美工不太負(fù)責(zé),你不要求他就不測(cè)試。所以要自己測(cè)試一下,發(fā)現(xiàn)在其它瀏覽器顯示不正常時(shí),要求美工修改。我做的頁(yè)面都經(jīng)過(guò)火孤,IE6,IE7,OPERA等測(cè)試才交給客戶的。我覺得交給客戶不成熟的東西會(huì)對(duì)自己形像不好。
7.文章標(biāo)題采用縮略時(shí),要在“title“有完整描述。
這點(diǎn)在很多SEO教程中都說(shuō)過(guò)的,我就不分析了。
8.用戶人性關(guān)懷。
如果網(wǎng)站使用了注冊(cè)制度,主頁(yè)應(yīng)該為新用戶和老用戶登錄提供鏈接。并且要有某種方式讓我知道自己已經(jīng)登錄了,友好方法(“歡迎回到不愛學(xué)習(xí)網(wǎng),lanmeng”)。
9.讓我看到自己正在尋找東西。
主頁(yè)應(yīng)該讓我想要任何東西顯而易見——如果它在站內(nèi)某個(gè)地方話。。.. 。.. 還有我沒(méi)有尋找。同時(shí),主頁(yè)也應(yīng)該讓我看到一些很精彩,我也許感興趣內(nèi)容——就算我并沒(méi)有尋找它們。
10.告訴我從哪里開始。
在一個(gè)新網(wǎng)站里,無(wú)從下手感覺糟糕透了。這點(diǎn)對(duì)新用戶比較有效�?梢赃@樣判斷下:
if(session.isNewSession){
//新用戶向?qū)А?/p>
}
分享:詳談網(wǎng)站改版的五個(gè)重要因素網(wǎng)站改版,如何改?如果只是設(shè)計(jì)、功能和欄目等的稍微變動(dòng),這些很簡(jiǎn)單,從技術(shù)上說(shuō)并沒(méi)有多少難度。只是對(duì)于網(wǎng)站本身的發(fā)展來(lái)說(shuō),沒(méi)有多大的作用從運(yùn)行網(wǎng)站管理網(wǎng)站來(lái)看,每過(guò)2年網(wǎng)站改版,是
- 雙十二電商促銷思路淺析
- Matt Cutts:不要把注意力放在PR上
- 百度要革自己的命?移動(dòng)搜索或取消PC網(wǎng)頁(yè)收錄
- Google adsense帳戶被封到解封全過(guò)程
- 菜鳥如何通過(guò)競(jìng)價(jià)賺取第一桶金?
- 不接電話會(huì)讓你的備案號(hào)注銷
- 盧松松:搜搜已停止收錄網(wǎng)頁(yè)
- 你懂得:百度文庫(kù)也玩?zhèn)人+V認(rèn)證了
- 頭腦風(fēng)暴:為什么搜索引擎不在乎我們?
- 搜狗聯(lián)盟:360 X 300的廣告位變現(xiàn)能力強(qiáng)
- 盧松松:做這樣的資源站,長(zhǎng)不了
- 盧松松:一個(gè)小學(xué)教師建站的不惑與困惑
- 相關(guān)鏈接:
- 教程說(shuō)明:
建站經(jīng)驗(yàn)教程-10個(gè)小細(xì)節(jié)大大改善用戶體驗(yàn)
。