DIV CSS 佈局教程網

最近讀了一篇關於導航的壓力測試的文章，覺得挺有幫助的，所以想把裡面的一些方法推薦給大家。當一個用戶到達一個頁面時，經常會遇到下面的問題：

• 我在哪兒？
• 這是什麼?
• 我可以去哪兒?

怎麼樣測試這個頁面的導航能力呢?

1. 隨機的從你的網站上選擇一個頁面；
2. 把這個頁面打印成黑白的，並把頁面頭部的浏覽器地址欄和下面的版權及公司信息部份去掉；
3. 假裝你是第一次進入這個網站，並試圖回答下面的問題(詳見下列問題列表)；
4. 在一張紙上寫下你所想的和答案；

讓你們團隊的其它成員或熟悉你網站的朋友也與你做同一試驗，大家象跳傘一樣的進入網站中的任意一個頁面，然後把回答記在紙上，你就可以看到網站上什麼是你同意的，什麼是你不同意的。

問題列表:

壓力測試 紙上記錄 這個頁面是寫什麼內容的？ 在頁面的標題處畫一個方形或在紙上寫清楚； 這是個什麼樣的網站? 把網站的名字用圈圈起來，或者自己寫在紙上； 這個網站主要的版塊是什麼? 用x標識； 這個頁面中主要的版塊是什麼？ 用三角形圍著x來標識； 我怎麼樣到達這個網站的首頁？ 用H標識； 我怎麼樣才能到達網站的頂部呢? T來標識； 每一組鏈接分別代表什麼? 把頁面上的主要鏈接圈出來，並寫下標識；
D:用來標識更多，詳細介紹及這個版塊的子頁面等；
N:在同一版塊的其它相鄰頁面；
S:在同一網站上但不相鄰的頁面；
O:離開這個網站的頁面； 你是通過怎麼樣的路徑到達這個頁面的呢？ 請寫出你到達這個頁面的路徑，選擇1>選擇2>選擇3…

作者提供了一些樣例給大家參考：

• example1-plain.gif （點擊查看）
• example1-markup.gif （點擊查看）
• example1.ppt（點擊下載）

原文鏈接：http://instone.org/navstress,以上的文章是我翻譯原文的，可能會有些用詞生疏，請大家原諒!

我自已也用這種簡單實用的方法測試過前一陣我所修改的淘寶禮物頻道，發現了一些問題：

1. 禮物頻道沒有“回到頂部”的鏈接，也就是要標識為“T”的部份；我看了許多國內的網站，包括一些國外的大型網站包括yahoo,ebay等等，都沒有這樣的一個“回到頂部”的鏈接，但是Amazon有這樣的一個鏈接，這點值得其它網站學習，當用戶浏覽一些過長的頁面時，為用戶提供一種便捷方式，重回到頂部的全局導航位置，以讓用戶重新開始他的網站漫游。
2. 禮物頻道的頁面url太長了，真的不是一般人能記住的“http://www.taobao.com/vertical/present/index.php”,為什麼不叫“http://gift.taobao.com”呢？這樣方便用戶對這個頻道進行記憶，也方便用戶將來不需要通過太多的“選擇1>選擇2>…”的方式進入網站，而是直接輸入“http://gift.taobao.com”進入網站；

建議大家也用上面的方法對自己的網站進行測試，看看自己的每個頁面到底存在著哪些導航的問題！希望能對大家的網站有所改進。

補充一下：

我覺得象這樣的測試，最好幾個人一起做，然後按上面的問題列表去找到相應的部份，因為每個人到一個頁面尋找到上面這些部份的能力與時間都不同，這樣作為設計者就可以看看自己的設計有什麼問題，比如：“是不是沒有到首頁的鏈接呀？”“是不是沒有到頂部的鏈接呀？”頁面的主要部份是不是不明顯不夠好找呀？”“各種類型的鏈接是不是容易找到並區分它們之間的差異呀？”等等！