《網頁設計綜合指南》是一篇專業(yè)的網站建設指導性技術文章，不受地域限制、文化限制、技術限制，適用于國內任何一個城市，突破思維，設計出最好的版塊，打造出最好的網站。本期《網頁設計綜合指南》(I)的主題是網頁設計的設計用戶體驗圖，主要講的是網站設計的信息架構，幫助用戶瀏覽分析一組復雜的信息，通過結構層次創(chuàng)建符合用戶的層次結構，好的內容和直觀的導航可以幫助用戶快速獲取有用的信息。例如，《網頁設計綜合指南》的導航如下：

　　1.設計網頁設計的用戶體驗圖

　　1.1信息架構

　　1.2全球導航

　　1.3鏈接和導航選項

　　1.4瀏覽器的返回鍵

　　1.5面包屑導航

　　1.6搜索

　　二、頁面設計

　　第三，網頁設計的移動改編

　　4.網頁設計中的無障礙設計

　　動詞（verb的縮寫）網頁設計測試

　　不及物動詞網頁設計的發(fā)展與交接

　　七.網頁設計綜述

　　畫

　　1.設計網頁設計的用戶體驗圖

　　1.1信息架構

　　人們往往把網站上的內容列表視為“信息架構”。不，雖然它是信息架構的一部分，但它們只是其中的一個方面。

　　信息架構以清晰和邏輯的方式組織信息。信息架構有一個明確的目的：幫助用戶瀏覽一組復雜的信息。一個好的信息架構將創(chuàng)建一個滿足用戶期望的層次結構。但是好的內容層次和直觀的導航并不容易，只有通過用戶研究和測試才能實現。

　　研究用戶需求的方法有很多。通常信息架構師會利用用戶訪談或者卡片分類的方法來了解用戶的期望，或者了解潛在用戶是如何對信息進行分類的。信息架構師還需要知道可用性測試的結果，看看他們是否能夠高效地導航。

　　卡片分類是一種簡單的方法，可以根據用戶信息找到分類內容的最佳方式。信息架構師喜歡卡片排序的一個原因是他們可以清楚地得到模式。(Image  credit: FosterMilo)

　　對用戶訪談的結果進行分類，然后檢查卡片分類是否符合用戶的心理模型。UX還將使用“樹測試”的方法來測試其功能。信息架構要在設計具體頁面之前完成。

　　樹測試是一種可靠的方法來確定用戶是否可以通過所提出的信息結構來解決他們的需求。(影像學分：尼爾森諾曼集團)

　　1.2全球導航

　　導航是可用性的基石。如果用戶在網站上迷路了，你網站的內容好了也沒用。因此，網站導航應遵循幾個原則：簡單導航。導航應該允許用戶以最少的點擊次數訪問所需的內容。

　　安全。不應允許用戶猜測導航選項的含義；每個導航選項都應該是顯式的。

　　一致性：導航系統(tǒng)應該對網站上的所有頁面保持一致。

　　設計導航時需要考慮的一些事情：

　　根據用戶需求選擇導航模式。導航要滿足大多數用戶的大部分需求。如果目標群體期望與網站進行某種互動，那么就滿足他們的期望。例如，如果大多數用戶不熟悉圖標的含義，請避免使用漢堡菜單導航。

　　設置首選導航選項。對導航選項進行優(yōu)先排序的簡單方法——為用戶分配不同的優(yōu)先級選項進行測試，然后突出顯示導航中的高優(yōu)先級和常用路徑。

　　導航應該總是可見的。正如雅各布尼爾森所說，看到什么比記住什么更容易。通過使所有重要的導航選項可見，可以最小化用戶的內存。最重要的導航選項應該隨時可見和可用，而不僅僅是在我們期望用戶使用它們的時候。

　　顯示當前位置?！拔以谀睦铮俊边@是一個基本問題，用戶需要一個答案才能有效導航。不顯示當前位置是許多網站的常見問題。

　　1.3鏈接和導航選項

　　鏈接和導航選項是導航過程中的關鍵因素，直接影響用戶體驗。遵循這些交互元素的規(guī)則：

　　了解內部鏈接和外部鏈接的區(qū)別。用戶期望內部和外部鏈接行為不同。所有內部鏈接都應該在同一個選項卡中打開(以便用戶可以使用后退按鈕)。如果要在新標簽頁中打開外部鏈接，應該在打開前通知用戶，比如在鏈接文本中添加一段文字并顯示“(在新標簽頁中打開)”。

　　更改訪問鏈接的顏色。當訪問的鏈接沒有改變顏色時，用戶可能會無意中重新訪問同一個頁面。讓用戶知道哪些鏈接被訪問過，避免無意中再次訪問。

　　檢查所有鏈接。點擊鏈接并得到一個錯誤頁面會損害用戶體驗。當訪問者搜索內容時，他們希望每個鏈接都準確有效，而不是404頁或他們不想看到的頁面。

　　1.4瀏覽器的返回鍵

　　后退按鈕可能是瀏覽器中第二常用的按鈕(輸入地址后)。請確保“后退”按鈕按照用戶的預期工作。當用戶訪問頁面上的鏈接，然后單擊“后退”按鈕時，他們希望返回到原始頁面上的退出位置。避免單擊“上一步”將用戶帶到原始頁面的頂部，而不是頁面關閉的位置。因此，用戶需要滾動瀏覽他們所看到的內容，他們會感到失望，因為他們沒有適當的“返回位置”功能。1.5面包屑類型

　　廣度導航是一組上下文鏈接，可以幫助網站導航。這是一個二級導航方案，通常顯示用戶在網站上的位置。

　　雖然這個元素不需要太多解釋，但是有幾件事值得一提：

　　不要將其作為主要導航方案。主導航應該用導航選項來引導用戶，而面包屑是用戶引導的導航選項。以面包屑導航為主，而不是輔助功能，通常是導航失敗。

　　使用箭頭代替斜線(/)作為分隔符。為了清楚地分開每一層，建議(

　　)或者()，因為這些符號的指向可以幫助用戶理解。斜線(/)不建議作為電商網站的分隔符。如果您計劃使用它，請確保產品類別不會使用斜線：

　　對于以上類別，面包屑導航很難區(qū)分不同的級別。

　　1.6搜索

　　有些用戶來到一個網站尋找特定的內容。他們不想使用導航選項。他們希望在搜索框中輸入文本，提交搜索請求，然后找到他們正在尋找的頁面內容。

　　設計搜索框時，請考慮以下基本規(guī)則：

　　將搜索框放在用戶希望找到它的地方。下圖是基于A. Dawn  Shaikh和Keisi  Lenz的研究。根據對142名參與者的調查，用戶對搜索框的預期位置。發(fā)現最方便的位置是網頁的左上角或者右上角。用戶可以通過F形瀏覽模式輕松找到搜索框。

　　在有錢的網站上，搜索框一定要顯眼。如果搜索是一個網站的重要功能，那就突出它，因為它可以降低用戶找到它的難度。

　　輸入框的大小要合適。搜索框輸入區(qū)域太短是設計上的通病。當然，用戶可以在短字段輸入一個長查詢，但是只能看到部分文本，可用性不好，因為不能馬上看到整個查詢。事實上，當搜索框太短時，用戶被迫使用簡短和不精確的查詢。尼爾森諾曼集團推薦27個字符的長度，可以覆蓋90%的查詢。

　　在每個頁面上添加一個搜索框。每個頁面上都顯示一個搜索框，因為無論用戶在哪個頁面上，當他們無法導航到要查找的內容時，他們都會嘗試使用搜索。