10個小細節大大改善用戶體驗-架站經驗教程

2010/11/06

以下是我做美工的兩年生活中一條條總結出來的經驗，每一點都是我常用的，雖然不是什麼大學問，但我覺得要互相學習才能提高，所以現在拿出來和大家一起分享，如果你覺得實用就拿去試試，然後留個評論，我就很高興了，不喜歡的可以路過。費話少說，下面正式開始。

1.加載大圖片時，顯示loading小圖片。

這招是我最常用的。當我們要加載一張比較大的圖片時，如果能加載圖片的同時，顯示loading的小圖片，那樣看起來就人性化很多。當加載完成時，圖片會蓋住loading小圖片，這是一個很有用的小技巧，我的每個網站都加上了這個功能，不信你可以到這個頁面看，http：//www.82xuexi.cn/html/2008-09/245.htm這個頁面是我專門做來演示這個示例的，上面我放了一張很大的圖片，應該可以看清加載過程。要實現這個小功能，只要在網站的公共樣式表上添加下面這個樣式，就可以實現了。

img {
background-image：url（loading.gif）;
background-position：center;
background-repeat：no-repeat;
}

解釋一下上面的代碼，懂CSS的站長可以略去這段。第一行“img”指向頁面的全體圖片元素（看到樣式表的優勢了吧，只要一句，就能作用於網站的全體同類元素，不是DIV+CSS的網站站長是不是有想法了？呵呵）。第二行“background-image：url（loading.gif）;”是指為圖片添加一個以圖片為背景的背景（讀起來有點拗口）。這個loading.gif是你要你自己上傳的加載小圖片。不過有些網站的images文件夾裡已經有這個圖片了，直接用就行，如果你確實不想到處找的話，我這裡有一堆，選一個你喜歡的玩玩吧：http：//www.82xuexi.cn/html/2008-09/333.htm。第三行：background-position：center;把背景圖片居中，這樣看起來比較順眼。第四行：background-repeat：no-repeat;就是讓loading.gif小圖片只顯示一個，如果沒有這句，就用出現很多排列起來的loading.gif小圖片，這要注意一下。

2.選填表單右邊顯示“可不填”。

這是我最初在QQ網站的留言本上看到的，當時看到個人信息的一些表單旁邊寫著“可不埴”的時候，真的是感覺非常舒服，你想想，人家好不容易有空給你留言，你還想人家慢慢看你的留言說明嗎？給你留言，當然想簡要完事啦。你卻動不動跳出個“表單內容不能有空”這不把人家嚇跑才怪。這個小技巧可以應用於各大論壇的用戶註冊，留言本等地方，不要只在必填框旁邊加個紅*就算了，這樣對於熟悉網站的人來說當然沒問題，但你要考慮到各種各樣的網民。“可不填”三個字，就能大大提高用戶體驗，為什麼不試試呢。

3.保證每個頁面都有回首頁的連接。

為什麼要主這個呢？因為我看到很多網站都沒注意到這個小細節，有一次我在一個論壇上登陸，成功後，他跳轉到另一個頁面提示登陸成功，等了十幾秒它都不自動返回，但我又已經順手把多的頁面關掉了，所以，只剩下一個頁面了，我又不能返回，他又沒有返回首頁的鏈接，一氣之下，我就關掉瀏覽器走人了。所以，建議站長朋友們有空多檢查一下自己的網站，看是不是有些頁面是孤獨的。

4.在執行AJAX操作時，如果響應時間過長，應提示用戶加載超時。

這個在AJAX中，可以使你的程序更人性化的小技巧，不多說了，你看下面的代碼就明白。如果你看不明白的話，就不要亂改網站，會出錯的。這是一個用戶驗證的程序片段，注意紅色部分。

var timeLast;
//發送信息
function submitSelectItem（）
{
var postStr=“uid=”+document.getElementById（“userName”）.value+“&pwd=”+hex_md5
（document.getElementById（“passWord”）.value）;
timeLast=window.setTimeout（“show_timeout（）”，15000 ）;//超過15000毫秒後顯示超時
show_waitting（）;
createXMLHTTP（）;//創建XMLHttpRequest對象
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）;
}
//回調函數
function getResponseRusult（）
{
if（xmlHttp.readyState==4）//判斷對象狀態
{
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.可能的不良後果提前提醒用戶。

如果你的頁面很大，特別是要用到很多表格時，加載時間可能會很長，這時候要提前告訴用戶。“頁面可能加載時間比較長，請耐心等待。..。”之類的。

6.拿到美工做給你的頁面，一定要測試不同的瀏覽器。

這主要是有些美工不太負責，你不要求他就不測試。所以要自己測試一下，發現在其它瀏覽器顯示不正常時，要求美工修改。我做的頁面都經過火孤，IE6，IE7，OPERA等測試才交給客戶的。我覺得交給客戶不成熟的東西會對自己形像不好。

7.文章標題採用縮略時，要在“title“有完整描述。

這點在很多SEO教程中都說過的，我就不分析了。

8.用戶人性關懷。

如果網站使用了註冊制度，主頁應該為新用戶和老用戶登錄提供鏈接。並且要有某種方式讓我知道自己已經登錄了，友好方法（“歡迎回到不愛學習網，lanmeng”）。

9.讓我看到自己正在尋找東西。

主頁應該讓我想要任何東西顯而易見——如果它在站內某個地方話。。.. 。.. 還有我沒有尋找。同時，主頁也應該讓我看到一些很精彩，我也許感興趣內容——就算我並沒有尋找它們。

10.告訴我從哪裡開始。

在一個新網站裡，無從下手感覺糟糕透了。這點對新用戶比較有效。可以這樣判斷下：

if（session.isNewSession）{
//新用戶嚮導。
}