網(wǎng)頁設(shè)計中的細節(jié)交互

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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