網頁設計中的細節(jié)交互

1、2011年11月（上）［摘要］本文通過對以往網頁交互設計原則的梳理，結合網頁設計具體細節(jié)和網頁一般性的結構，系統(tǒng)全面的整理出了網頁交互設計原則。分別在頁面布局，導航設計，搜索功能，網頁組成元素等維度對網頁中的交互設計做了明確說明，有效指導網頁設計人員設計或走查網頁中存在的交互問題，提高產品的好用性水平。［關鍵詞］網頁；交互設計；交互細節(jié)網頁設計中的細節(jié)交互紀芳磊侯文君（北京郵電大學人文學院，北京市100876）隨著互聯(lián)網和移動通信技術的

2、快速發(fā)展，網頁作為信息的主要載體，承擔著將各類信息展現和傳達的任務。網頁設計的使命是直接有效地傳達信息給用戶。現在網頁用戶群體復雜，層次多樣，對網頁的好用性要求越來越高，要求一個網頁在很好的需求戰(zhàn)略，功能規(guī)格，信息架構的基礎上更多的關注交互細節(jié)設計。一、網頁設計結構構成用戶體驗咨詢公司AdaptivePath的創(chuàng)始人JesseJamesGarrett總結了網站界面設計的一般流程，即站點目標設計，內容要求設計，信息架構設計（交互設計），導

3、航設計，視覺設計。盡管良好的用戶體驗貫穿始終，但是交互設計的工作重點卻多數集中在信息架構，導航設計兩部分。體現在具體的網頁中是頁面布局，信息組織，導航設計，搜索功能設計，反饋設計還有其他一下細節(jié)上。本文就從網頁的常用構成元素出發(fā)，總結交互設計上的注意事項。二、網頁設計中的交互細節(jié)（一）頁面布局設計網頁布局設計要以最舒適的瀏覽方式，展現頁面上的主要信息。同濟大學的張媛媛從整體布局出發(fā)提出一種“Web設計的黃金分割”法進行指導。本文不同，在

4、細處著手總結交互設計：1）網站首頁是一個網站的“門面”，包含整個網站的主要內容，而且設計上也要求新穎精美首頁承載者所有主要選項交互上要求：a.確保從任何頁面都能訪問首頁；b.首頁面長度應盡可能限定在1屏的長度；c.避免強行顯示不必要的彈出窗口或者圖形圖像；d.首頁的說明文字應簡潔明了，提供網站變化的說明，引導用戶適用改版后的網站設計；e.具備常用工具、FAQ等。2）重要項目放置在固定的位置。頁面的中上位置放置重要內容。3）限制導航頁內文

5、字數量，避免使用大量的文字。4）確保網頁之間元素視覺一致，圖片、標題、字體位置與大小，都應保持視覺一致。5）避免內容密度過大，適度留白。內容相似性高時，應當確保頁面的結構易于內容比較。避免滾屏停止，確保標題和其他頁面元素的位置不會讓用戶誤以為已到達頁頂或頁低。6）從視覺上區(qū)分突出用戶關注的關鍵數據，必要時提供友好打印功能。（二）導航設計合理的導航是網頁擁有良好用戶體驗的前提。網頁中常見的導航有全局導航，局部導航，輔助導航，上下文導航，友

6、好導航，遠程導航等。在網頁設計中實現良好的導航設計需要注意以下細節(jié)：1）每個頁面都要包含全局導航，這會增加用戶的可控感，無論什么情況發(fā)生用戶都有從新開始或找到路徑的機會。2）全局導航標簽選項應放置在頁面頂部，且分類標簽的樣式常規(guī)，明顯可點擊。3）對于導航中的選項。主要導航里的導航選項盡量不超過7個，以減小用戶的記憶負擔。區(qū)分并分組導航元素，名稱上避免使用太相似的字眼，確保典型用戶能理解區(qū)分類別。4）以面包屑導航、標題等形式，告訴用戶當前

7、在網站中所處位置，提供位置反饋。5）純導航頁面應保持簡短，理想的純導航頁面不超過1屏的長度，無需使用滾動條即可全覽，限制導航頁內文字數量，避免使用大量的文字。6）每個頁面都有唯一的描述性標題，并與引導的描述內容相關。網頁的瀏覽器名稱和頁面內容區(qū)的標題始終保持一致。7）增加狀態(tài)反饋，層疊結構菜單的下一級選項使用鼠標“即指即現”的打開方式。另外，使用網站地圖導航展示網站整體概況，顯示網站的層級。8）緊急出口。這是導航設計中必不可少的部分，無

8、論何時允許用戶隨時終止或退出操作。（三）搜索功能設計網頁設計中，搜索功能十分重要，絕大多數種類的網頁都設有搜索功能，尤其是門戶網站，購物網站，空間論壇等。最基本的搜索功能由輸入框和搜索按鈕組成，搜索可以視為一種特殊的導航方式，長期以來形成了一定交互規(guī)范：1）內容豐富的網站，每頁都在固定的位置提供搜索功能。2）不同頁面的搜索功能可以有所差別，不同頁面層級使用不同級別的搜索功能，提供與當前任務相關的搜索功能為最佳。3）在同一頁面上，避免使用

9、有爭議的多個搜索框、搜索按鈕。否則容易對用戶造成混淆。4）很多網頁提供多種形式的搜索，如北郵論壇中的版塊搜索，內容搜索等。當有多種搜索供選擇時，應明確告訴用戶所有搜索類型。5）可以以預設灰色提示語等形式為用戶提供搜索預設標簽，方便用戶定義合理的關鍵詞來使用搜索。搜索框提示語要簡潔，以少數關鍵字提示。6）必要時，允許用戶更改搜索條件，或者具備高級搜索功能。7）圍繞用戶語言設計搜索，建議加入聯(lián)想記憶功能響應用戶關鍵詞，同時可以適應常見拼寫錯

10、誤、額外空格等常見用戶搜索錯誤。（四）交互反饋設計反饋一詞最初來源于控制論，其概念是將輸出回輸到系統(tǒng)當中。人機交互中借用了傳播學中的概念，將反饋定義為對已經發(fā)生的操作行為指示或者說是回應。基于此，產品人機交互中的反饋信息就是用戶在使用某個產品過程中，得到的產品的提示或信息。網頁交互設計中反饋可以遵循以下原則：1）響應用戶操作的反饋應及時且明顯，反饋時間通常應低于0.1秒，給用戶立即反饋的印象。2）有必要的信息聯(lián)想記憶功能，以減少用戶輸入

11、，如輸入用戶名，關鍵詞等信息時。3）當需要用戶必須等待時，務必提供進度條之類的反饋告訴用戶當前進展信息。并且長進度過程中，允許用戶可以隨時取消當前進度。4）涉及下載任務時，提前告訴用戶下載量的大小和預計時間，下載完成后，指向相關鏈接。5）為所有有交互作用的鏈接設置反饋，文字，地址等連接有明顯的可點擊特征，如下劃線，加粗處理等方式，有鏈接的圖片在鼠標滑過時有狀態(tài)變化反饋。6）當頁面出錯或操作出錯時，給出的反饋信息應該包含簡單的錯誤分析和處

12、理建議。三、總結本文結合設計經驗和以往理論研究，總結了網頁設計過程中交互細節(jié)需要注意的問題，將各種可用性原則分解融入到網頁的細節(jié)設計中，注重實踐增強指導性。即使是網頁設計的初學者也可以根據此篇總結性的文章設計網頁，或對網頁進行啟發(fā)式走查，發(fā)現糾正可用性問題。作者簡介：紀芳磊，學生，北京郵電大學人文學院，09級設計藝術學專業(yè)碩士，跟隨侯文君導師從事交互設計與用戶研究方向的學習；侯文君，教授，北京郵電大學自動化學院，交互設計與數字媒體實驗室

13、負責人。［參考文獻］[1]龔玨.淺談網頁的交互設計[M].大眾文藝2010.[2]張帆.基于用戶體驗的購物網站設計中可信賴感研究[D].上海:上海交通大學2008.[3]張媛媛.淺談網頁布局優(yōu)化[J].中小企業(yè)管理與科技(下旬刊)2011.[4]萬百五韓崇昭蔡遠利.控制論:概念.方法與應用[M].北京:清華大學出版社2009.[5]李世國.體驗與挑戰(zhàn)[M].南京:江蘇美術出版社2008.2302011年11月（上）［摘要］本文通過對以往

14、網頁交互設計原則的梳理，結合網頁設計具體細節(jié)和網頁一般性的結構，系統(tǒng)全面的整理出了網頁交互設計原則。分別在頁面布局，導航設計，搜索功能，網頁組成元素等維度對網頁中的交互設計做了明確說明，有效指導網頁設計人員設計或走查網頁中存在的交互問題，提高產品的好用性水平。［關鍵詞］網頁；交互設計；交互細節(jié)網頁設計中的細節(jié)交互紀芳磊侯文君（北京郵電大學人文學院，北京市100876）隨著互聯(lián)網和移動通信技術的快速發(fā)展，網頁作為信息的主要載體，承擔著將各

15、類信息展現和傳達的任務。網頁設計的使命是直接有效地傳達信息給用戶?，F在網頁用戶群體復雜，層次多樣，對網頁的好用性要求越來越高，要求一個網頁在很好的需求戰(zhàn)略，功能規(guī)格，信息架構的基礎上更多的關注交互細節(jié)設計。一、網頁設計結構構成用戶體驗咨詢公司AdaptivePath的創(chuàng)始人JesseJamesGarrett總結了網站界面設計的一般流程，即站點目標設計，內容要求設計，信息架構設計（交互設計），導航設計，視覺設計。盡管良好的用戶體驗貫穿始終

16、，但是交互設計的工作重點卻多數集中在信息架構，導航設計兩部分。體現在具體的網頁中是頁面布局，信息組織，導航設計，搜索功能設計，反饋設計還有其他一下細節(jié)上。本文就從網頁的常用構成元素出發(fā)，總結交互設計上的注意事項。二、網頁設計中的交互細節(jié)（一）頁面布局設計網頁布局設計要以最舒適的瀏覽方式，展現頁面上的主要信息。同濟大學的張媛媛從整體布局出發(fā)提出一種“Web設計的黃金分割”法進行指導。本文不同，在細處著手總結交互設計：1）網站首頁是一個網站

17、的“門面”，包含整個網站的主要內容，而且設計上也要求新穎精美首頁承載者所有主要選項交互上要求：a.確保從任何頁面都能訪問首頁；b.首頁面長度應盡可能限定在1屏的長度；c.避免強行顯示不必要的彈出窗口或者圖形圖像；d.首頁的說明文字應簡潔明了，提供網站變化的說明，引導用戶適用改版后的網站設計；e.具備常用工具、FAQ等。2）重要項目放置在固定的位置。頁面的中上位置放置重要內容。3）限制導航頁內文字數量，避免使用大量的文字。4）確保網頁之間

18、元素視覺一致，圖片、標題、字體位置與大小，都應保持視覺一致。5）避免內容密度過大，適度留白。內容相似性高時，應當確保頁面的結構易于內容比較。避免滾屏停止，確保標題和其他頁面元素的位置不會讓用戶誤以為已到達頁頂或頁低。6）從視覺上區(qū)分突出用戶關注的關鍵數據，必要時提供友好打印功能。（二）導航設計合理的導航是網頁擁有良好用戶體驗的前提。網頁中常見的導航有全局導航，局部導航，輔助導航，上下文導航，友好導航，遠程導航等。在網頁設計中實現良好的導

19、航設計需要注意以下細節(jié)：1）每個頁面都要包含全局導航，這會增加用戶的可控感，無論什么情況發(fā)生用戶都有從新開始或找到路徑的機會。2）全局導航標簽選項應放置在頁面頂部，且分類標簽的樣式常規(guī)，明顯可點擊。3）對于導航中的選項。主要導航里的導航選項盡量不超過7個，以減小用戶的記憶負擔。區(qū)分并分組導航元素，名稱上避免使用太相似的字眼，確保典型用戶能理解區(qū)分類別。4）以面包屑導航、標題等形式，告訴用戶當前在網站中所處位置，提供位置反饋。5）純導航頁

20、面應保持簡短，理想的純導航頁面不超過1屏的長度，無需使用滾動條即可全覽，限制導航頁內文字數量，避免使用大量的文字。6）每個頁面都有唯一的描述性標題，并與引導的描述內容相關。網頁的瀏覽器名稱和頁面內容區(qū)的標題始終保持一致。7）增加狀態(tài)反饋，層疊結構菜單的下一級選項使用鼠標“即指即現”的打開方式。另外，使用網站地圖導航展示網站整體概況，顯示網站的層級。8）緊急出口。這是導航設計中必不可少的部分，無論何時允許用戶隨時終止或退出操作。（三）搜索

21、功能設計網頁設計中，搜索功能十分重要，絕大多數種類的網頁都設有搜索功能，尤其是門戶網站，購物網站，空間論壇等。最基本的搜索功能由輸入框和搜索按鈕組成，搜索可以視為一種特殊的導航方式，長期以來形成了一定交互規(guī)范：1）內容豐富的網站，每頁都在固定的位置提供搜索功能。2）不同頁面的搜索功能可以有所差別，不同頁面層級使用不同級別的搜索功能，提供與當前任務相關的搜索功能為最佳。3）在同一頁面上，避免使用有爭議的多個搜索框、搜索按鈕。否則容易對用戶

22、造成混淆。4）很多網頁提供多種形式的搜索，如北郵論壇中的版塊搜索，內容搜索等。當有多種搜索供選擇時，應明確告訴用戶所有搜索類型。5）可以以預設灰色提示語等形式為用戶提供搜索預設標簽，方便用戶定義合理的關鍵詞來使用搜索。搜索框提示語要簡潔，以少數關鍵字提示。6）必要時，允許用戶更改搜索條件，或者具備高級搜索功能。7）圍繞用戶語言設計搜索，建議加入聯(lián)想記憶功能響應用戶關鍵詞，同時可以適應常見拼寫錯誤、額外空格等常見用戶搜索錯誤。（四）交互反

23、饋設計反饋一詞最初來源于控制論，其概念是將輸出回輸到系統(tǒng)當中。人機交互中借用了傳播學中的概念，將反饋定義為對已經發(fā)生的操作行為指示或者說是回應?；诖?，產品人機交互中的反饋信息就是用戶在使用某個產品過程中，得到的產品的提示或信息。網頁交互設計中反饋可以遵循以下原則：1）響應用戶操作的反饋應及時且明顯，反饋時間通常應低于0.1秒，給用戶立即反饋的印象。2）有必要的信息聯(lián)想記憶功能，以減少用戶輸入，如輸入用戶名，關鍵詞等信息時。3）當需要用

24、戶必須等待時，務必提供進度條之類的反饋告訴用戶當前進展信息。并且長進度過程中，允許用戶可以隨時取消當前進度。4）涉及下載任務時，提前告訴用戶下載量的大小和預計時間，下載完成后，指向相關鏈接。5）為所有有交互作用的鏈接設置反饋，文字，地址等連接有明顯的可點擊特征，如下劃線，加粗處理等方式，有鏈接的圖片在鼠標滑過時有狀態(tài)變化反饋。6）當頁面出錯或操作出錯時，給出的反饋信息應該包含簡單的錯誤分析和處理建議。三、總結本文結合設計經驗和以往理論研

25、究，總結了網頁設計過程中交互細節(jié)需要注意的問題，將各種可用性原則分解融入到網頁的細節(jié)設計中，注重實踐增強指導性。即使是網頁設計的初學者也可以根據此篇總結性的文章設計網頁，或對網頁進行啟發(fā)式走查，發(fā)現糾正可用性問題。作者簡介：紀芳磊，學生，北京郵電大學人文學院，09級設計藝術學專業(yè)碩士，跟隨侯文君導師從事交互設計與用戶研究方向的學習；侯文君，教授，北京郵電大學自動化學院，交互設計與數字媒體實驗室負責人。［參考文獻］[1]龔玨.淺談網頁的交