“中國數字科技館”可用性設計指南

1、“中國數字科技館”可用性設計指南 與評測標準版本號：V4.0日期：2007年10月25日網站可用性項目組說 明本指南的編寫旨在從“以用戶為中心”的設計思想出發(fā)，針對“中國數字科技館”的網站內容和用戶特點，提供若干定性原則和定量指標，以指導網站的可用性設計，并為網站的可用性評測提供依據。本指南分為正文和附錄兩個部分。正文部分結構化闡述了網站可用性設計中需要注意的方面，并分別給出相應的評測標準供網站設計人員參考。正文共四章：第1章首頁內容分別說明首頁必須呈現的六項內容：站點標識和功能說明、清晰的站點層次、導讀欄目、動態(tài)內容、瀏覽線索、版權及所有者信息，指導“中國數字科技館”網站的首頁設計。第2章功

2、能組件針對“中國數字科技館”網站特點提出六種功能組件：導航、搜索、文本縮放、友好打印、自選操作、用戶反饋單元，指導如何從輔助用戶瀏覽網站內容的角度提高網站的可用性。第3章網頁風格闡述網頁風格設計中必須注意的三個方面：一致性原則、頁面布局、配色方案，指導“中國數字科技館”網站的首頁和各類子網頁的網頁風格設計。第4章交互效能在對網站兼容性提出要求的基礎上，為“中國數字科技館”網站提供四種有助于提高交互效能的途徑：提高可瀏覽性、避免設置訪問障礙、縮短等待時間、針對特殊需求設計，并給出關于技術實現的注意事項，指導如何通過提高用戶訪問網頁的效率來增加用戶對網站的滿意度。附錄部分以列表形式給出若干有助于提

3、高網站可用性的測試工具及其下載鏈接。對正文中的評測標準說明如下：n 每項評測標準包括以下兩部分：l 滿足該項標準的要求l 該項評測內容的必備性（以“必備/可選”表示，若為“必備”則評分時大于0分才符合要求）n 評測標準僅供網站設計人員參考，不作為項目驗收時的網站可用性評分標準使用。本指南作為“中國數字科技館”網站建設的內部資料使用，適用于各子項目單位的網站設計人員。第1章 首頁內容首頁不僅僅是網站內容的濃縮版本，作為網站的入口，它肩負著類似“形象代言人”的重要使命。從內容上看，首頁的任務主要包括：n 給出站點標識和功能說明，告訴用戶網站“是什么”以及“能夠做什么”；n 給出清晰的站點層次，告訴

4、用戶網站包含的內容及其組織形式；n 給出導讀欄目，以將精彩內容推薦給用戶；n 給出動態(tài)內容，以保持網站的活躍性，吸引用戶經常訪問；n 給出瀏覽線索，以輔助用戶訪問網站內容，使用網站提供的服務；n 給出版權及所有者信息。1.1 站點標識和功能說明站點標識及其功能說明以醒目的圖文將網站的主要內容和重要功能呈現給用戶。站點標識：一般采用“標志名稱”，圖案及字體的表現形式應該符合首頁風格。功能說明：應該是能高度歸納網站內容和刻畫網站特點的短句。最好采用廣告口號的形式，短小精悍，使用盡可能吸引用戶的語言。評測標準要 求1.首頁有能夠高度歸納網站內容的站點標識2.首頁有能夠刻畫網站特點并吸引用戶的功能說明

5、必備性必備1.2 站點層次一般通過首頁導航來表現站點層次。首頁導航的作用是讓用戶了解網站包含的內容及其組織形式，并且提供到達相應子網頁的鏈接。好的首頁導航應該給用戶以正確的導引，減少誤操作。為此，在設計首頁導航之前，需要先對網站內容進行合理的分類和組織，然后再選用適當的形式來表現分類和組織。1.2.1 網站內容的分類和組織對于數字科技館而言，館藏（即內容）分類的角度很多，建議考慮兩個角度學科類別和受眾類型。這兩種分類各有優(yōu)勢：按照學科類別進行歸類，便于用戶查閱和檢索知識；按照受眾類型進行分類，更貼近用戶的使用偏好。將兩者相結合，可以實現優(yōu)勢互補，提高數字科技館的可用性。1.按照學科類別進行內容

6、歸類數字科技館可以看作一個在線知識庫，主要功能是供用戶查閱和檢索知識。用戶的查閱和檢索行為通?；趯W科進行，因此，有必要將館藏依據內容所屬的學科來組織和歸類，形成樹狀結構。建議參照學科分類規(guī)范將“中國數字科技館”網站包含的內容組織為樹狀結構，學科分類樹中的每個節(jié)點對應一項館藏內容。2.按照受眾類型組織內容分類用戶瀏覽網頁的行為受到其使用偏好的影響，使用偏好中很重要的一點就是網站的表現形式。為了提高可用性，有必要根據用戶對網站表現形式的偏好來劃分受眾類型，為每一類受眾設計具有不同表現形式的子網頁，這種劃分在首頁導航中也應當有所體現。建議以“中國數字科技館”原有的四個分館為基礎，將受眾類型劃分為“

7、少兒愛好者”、“青年愛好者”、“成人愛好者”、“科普工作者”四類，對應關系如下表：原有分館受眾類型受眾說明體 驗 館少兒愛好者有一定閱讀能力的小學生青年愛好者初中/高中/大學在校學生博 覽 館成人愛好者非科普/科教專業(yè)人士科普專欄資 源 館科普工作者科普/科教專業(yè)人士表 原有分館與受眾類型對應表受眾類型的劃分依據有三個：是否在校、文化程度、工作性質。用戶研究發(fā)現，這三個因素會在很大程度上影響用戶對中國數字科技館網站的需求。首先依據是否在校將受眾劃分為在校學生和成人兩大類；對于在校學生，依據文化程度劃分為“少兒愛好者”（有一定閱讀能力的小學生）和“青年愛好者”（初中/高中/大學在校學生）；對于成

8、人，依據工作性質劃分為“成人愛好者”（非科普/科教專業(yè)人士）和“科普工作者”（科普/科教專業(yè)人士）。此外，建議增加“所有”受眾類型，以方便以下兩類用戶的使用：a)不明確自己受眾類型的用戶；b)習慣于利用學科歸類進行檢索的用戶。受眾類型與學科類別的結合之處在于：每種受眾類型都包含多項館藏，但每項館藏僅與學科分類樹中的一個節(jié)點對應。因此，除“所有”類型完全覆蓋了整個學科分類樹外，其余四種受眾類型都只覆蓋了學科分類樹中的部分節(jié)點；它們之間的交集可能不為空，并集等于整棵學科分類樹。為“少兒愛好者”、“青年愛好者”、“成人愛好者”、“科普工作者”四種受眾類型組織學科分類子樹的方法是：在數字科技館的整棵學

9、科分類樹上執(zhí)行節(jié)點刪減，僅保留該受眾類型覆蓋的節(jié)點及其各級父節(jié)點。評測標準要 求1.網站內容有明確分類2.網站內容的分類完整且合理必備性必備1.2.2 分類和組織的表現形式在的基礎上，“中國數字科技館”的首頁導航應該設計為能夠同時提供兩種分類視圖的導航形式，以綜合表現基于學科類別的內容分類和基于受眾類型的內容組織。建議首頁導航采用“標簽”的結構形式：a)設計五個標簽，分別與五種受眾類型對應；b)為每個標簽設計相應的標簽頁面，采用級聯目錄的形式表現與該受眾類型對應的學科分類（子）樹。評測標準要 求1.首頁提供兩種分類視圖結合的導航形式2.兩種導航形式均易于用戶理解必備性必備1.3 導讀欄目導讀欄

10、目一般以網站上精彩內容片段的列表形式出現，與報刊、雜志的重點推薦欄目功能相當。建議在“中國數字科技館”網站的首頁設置“最新”和“熱點”兩個欄目，以將最新和最流行的館藏內容推薦給用戶。評測標準要 求1.首頁同時提供“最新”和“熱點”兩個欄目2.“最新”和“最熱”欄目具有統一且醒目的表現形式必備性可選1.4 動態(tài)內容“最新”和“熱點”的導讀欄目是動態(tài)內容的一部分。除此之外，網站首頁經常設置：1.“公告欄”和“建議欄”：前者用以發(fā)布最新消息，后者用以收集用戶反饋；2.“用戶調查”和“有獎競答”：都屬于網站定期推出的交互活動。設置動態(tài)內容可以在一定程度上保持網站的活躍性，增加用戶的信任感；設置交互活動

11、尤其有利于增強用戶的參與性，提高網站的吸引力。評測標準要 求1.同時設置發(fā)布消息和收集用戶反饋兩種動態(tài)內容2.動態(tài)內容能夠增加用戶對網站的好感必備性可選1.5 瀏覽線索在首頁導航之外，首頁上有必要提供其它瀏覽線索，以輔助用戶訪問網站內容和使用網站服務。在不同的內容需求和瀏覽習慣的驅使下，用戶可能并不滿足于通過首頁導航來發(fā)現目標，例如：用戶可能并不習慣使用導航提供的分類形式、不清楚網站結構、不知道如何使用導航、等等，類似情況時有發(fā)生。建議“中國數字科技館”網站的首頁提供兩種瀏覽線索：1.搜索目的是方便用戶快速檢索館藏內容。輸入形式為單個關鍵詞或多個關鍵詞的組合，輸出形式為模糊匹配或精確匹配的館藏

12、內容列表。站內搜索功能的設計建議參見。2.幫助包含“使用說明”和“問題解答”兩個部分，后者尤其重要?！笆褂谜f明”應當言簡意賅；“問題解答”應當全面，并且用詞口語化。評測標準要 求1.首頁提供幫助功能，幫助內容易于理解2.首頁提供搜索組件，搜索組件易于用戶使用必備性必備1.6 版權及所有者信息所有正式發(fā)布的網站都必須包含此項內容。通常的表現形式為：版權信息 所有者信息 所有者電子郵件（包括有效超鏈接）評測標準要 求1.首頁提供包含版權信息、所有者信息及所有者電子郵件的說明2.該說明中包含的所有者電子郵件超鏈接有效3.該說明的表現形式符合網絡習慣必備性必備第2章 功能組件從能否吸引用戶和留住用戶的

13、角度來看，網站的可用性和網站內容的精彩程度同等重要。為網站設計一些功能組件，可以輔助用戶瀏覽網站內容，提高網站的可用性。對“中國數字科技館”網站來說，有兩種必備的功能組件：“導航”和“搜索”。除此之外，建議再增加四種功能組件：“文本縮放”、“自選操作”、“友好打印”和“用戶反饋單元”。2.1 導航分為首頁導航和固定導航。首頁導航的設計方法參見，這里關注固定導航的設計。一般來說，固定導航出現在除首頁外的所有子網頁上。固定導航至少包含三個元素：網站標識、欄目、公共服務（如：搜索、幫助、打印等）。設計固定導航時應該遵循以下原則：1.欄目的分類和排列順序必須便于用戶理解，一般可將相關欄目排列在一起；2

14、.必須給出返回首頁的鏈接，表現形式可以是網站標識或者文本超鏈接；3.必須標明當前子網頁在網站中的位置，為用戶提供反饋信息；4.必須保證所有鏈接有效，包括返回首頁的鏈接和欄目中指向子網頁的鏈接；5.用戶找到所需內容的鏈接點擊次數盡可能少，一般不應超過3次。對于原則1，需要注意兩點：a)分類層次不宜過深，盡量扁平化；b)當欄目過多且相關性不大時，建議按照漢字聲母的首字母進行排列。對于原則2，建議同時采用兩種表現形式：a)突出顯示欄目中的相應子項；b)顯示“當前訪問路徑”， 一般采用“”作為層級分隔符，并給出各層網頁鏈接（尤其是首頁鏈接），以當前網頁的標題作為訪問路徑的最后一項。對于原則5，一種減少

15、鏈接點擊次數的有效方法是采用圖形化的目錄形式呈現網站的整體結構，最常用的例如：導航地圖。評測標準要 求1.導航的欄目分類明確，層數小于等于32.導航的欄目排列順序易于用戶理解3.導航中的所有鏈接均真實有效4.導航中包含返回首頁的鏈接和當前訪問路徑必備性必備2.2 搜索“中國數字科技館”擁有豐富的館藏內容，是一個具有大量數據信息的網站，搜索功能的重要性不言而喻。搜索結果的衡量指標有兩個：速度和質量。速度即“能否幫助用戶盡快查找到需要的信息”，質量即結果的精確性和完備性。建議“中國數字科技館”網站的站內搜索實現以下功能：1.在保證全文搜索的基礎上提供高級搜索，形式包括：關鍵字搜索、標題搜索、類別搜

16、索；2.結合“中國數字科技館”的館藏內容，提供針對Flash和圖片的搜索；3.返回詳盡的館藏信息作為結果，包括：內容摘要、關鍵詞、類別、指向內容的鏈接、其它描述信息。功能2的實現需要對館藏內容中的Flash和圖片加以文字描述并提取關鍵詞，基于這些文字和關鍵詞進行搜索。在設計搜索功能組件時，應該注意到：1.在站內所有網頁中，搜索組件應當出現在大體相同的位置；2.輸入界面和輸出界面都應當提供一定的附加選擇方式，例如：對于輸入界面，采用下拉菜單，讓用戶指定當前搜索模式（關鍵字/標題/類別/全文搜索）；對于輸出界面，同樣采用下拉菜單，讓用戶自定義結果排序方式（類型/時間/閱讀次數）。評測標準要 求1.

17、對于館藏內容的搜索結果命中率為100%2.搜索功能易于用戶使用必備性必備備 注關于搜索功能的實現，建議：由平臺開發(fā)搜索功能，為二級子項目預留接口；各二級子項目根據項目辦的要求提供對頁面和媒體資源的標注2.3 文本縮放文本縮放功能是為對字號有特殊要求的用戶（如視力有障礙的用戶）而設計的，應該位于網頁上較為顯著的位置。建議“中國數字科技館”的所有純文本網頁均提供文本縮放功能，文本縮放功能組件可以采用如下設計：HTML和CSS代碼參考如下：1.HTML代碼Change text size: A A A2.CSS代碼#normalFontFont:xxxxx;#midFont:xx

18、xxx;#largeFont:xxxxx;評測標準要 求1.以文字說明為主的網頁均提供完善的文字縮放功能2.文本縮放組件的表現形式醒目必備性可選2.4 友好打印友好打印功能可以自動將待打印的大段文本重新排版，便于用戶閱讀。建議“中國數字科技館”網站為每項館藏的說明性文本添加友好打印功能，表現形式為：指向該功能組件的“友好打印”文字。評測標準要 求1.網頁中每項館藏的說明性文本均提供友好打印功能組件2.友好打印的結果文件內容完整且排版美觀3.友好打印功能組件易于用戶使用必備性可選2.5 自選操作比較常用的自選操作包括：1.輸出格式選擇；2.打印格式選擇；3.語言選擇。評測標準要 求1.網頁提供不

19、少于3種自選操作2.所有自選操作都易于用戶使用必備性可選2.6 用戶反饋單元為網站設計用戶反饋單元與定期推出交互活動（參見）有類似功效，可以增強用戶的參與性，提高網站的吸引力，并且有利于網站的推廣。用戶反饋單元可有多種形式，例如：自由討論區(qū)、留言欄、BBS、BLOG等。建議“中國數字科技館”網站設計如下形式的用戶反饋單元：1.為每項館藏內容設置留言欄，主要目的是收集用戶的評論和建議；2.在首頁和每個分館設置問答區(qū)，方便用戶提出問題并在短期內給出專家解答；3.如果有與網站相伴的BBS或BLOG，則在每項館藏內容之后加入超鏈接，指向與館藏內容對應的BBS討論區(qū)內容或BLOG。評測標準要 求1.網頁

20、上設置留言欄和問答區(qū)2.留言欄和問答區(qū)表現形式統一且易于用戶使用必備性必備第3章 網頁風格“科技感”風格符合數字科技館的展示內容并能凸現其特點，很適合作為網站的整體風格基調。“科技感”風格是和“科技感”視覺效果對應的。每個網頁元素都具有若干可以通過視覺感知的特征，在用戶瀏覽網頁的過程中，不同特征的聚類就形成了該用戶認識的某種視覺效果。能夠制造“科技感”視覺效果的就是“科技感”風格。能夠體現“科技感”風格的視覺特征很多，例如：明快的色調、尖角矩形等。建議將“科技感”風格設定為“中國數字科技館”網站的整體風格：對于首頁，尤其需要體現此風格；對于子網頁，應該在遵從“科技感”風格的基礎上針對受眾類型設

21、計專門的風格。設計要領是：遵循一致性原則，通過頁面布局和配色方案來體現“科技感”風格。3.1 保持一致性保持風格的一致性是提高網站可用性的有效手段。關于風格的一致性原則主要體現在：1.頁面布局與配色方案：首頁與子網頁具有相似的頁面布局與配色方案，所有子網頁具有一致的頁面布局，相同類型的子網頁采用相同的配色方案；2.文本：首頁和針對不同受眾的子網頁中文本的文字字型、字體、顏色分別保持一致；3.語言：網站中所有文字（包括按鈕標簽）統一采用中文表述，針對不同受眾的子網頁應當采用相同的語言風格；4.功能組件：所有功能組件（如：導航、搜索）的表現形式保持一致，位置基本相同；5.網站標識：所有子網頁在同一

22、位置放置網站標識。為了實現風格的一致性，建議參考工業(yè)化的網頁設計流程，采用模板方式設計子網頁。要點包括：1.給出包含第2章中各功能組件的子類網頁模板（HTML）以及建議配色方案；2.采用CSS配置，對首頁和所有子網頁的字號、字距、行距等作出統一規(guī)定。評測標準要 求1.采用模板方式設計子網頁2.頁面布局和配色方案：網站首頁與各子網頁具有相似的頁面布局與配色方案，相同類型的子網頁具有一致的頁面布局并采用相同的配色方案3.文本：網站首頁和針對不同受眾類型的子網頁中文本的文字字型、字體、顏色分別保持一致4.語言：網站首頁和所有子網頁中的文字（包括控件標簽）均統一采用中文描述，針對不同受眾類型的子網頁應

23、采用相同的語言風格5.網站標識：所有子網頁都在統一位置放置網站標識必備性必備3.2 頁面布局頁面布局設計是網頁設計流程的關鍵步驟之一。網頁內容通過布局呈現給用戶，網頁風格也受到布局的約束。設計頁面布局的要領是：掌握合適的空間比例，劃分清晰的視覺層次。3.2.1 掌握合適的空間比例對于空間比例，一般來說，展示內容應該占據網頁60%-80%的空間，導航等功能組件不應該超過20%。評測標準要 求1.網頁上展示內容的空間比例均介于60%-80%之間2.網頁上導航、搜索等功能組件占據的總空間均不超過20%3.網頁的空間利用充分，避免出現大塊的空白區(qū)域必備性必備3.2.2 劃分清晰的視覺層次為什么需要劃分

24、清晰的視覺層次？一般情形下，用戶瀏覽網頁的過程可以描述為：首先，快速掃描網頁，看能否找到與當前任務一致或相似的內容，或者是符合自己興趣的內容；然后，如果找到，則閱讀該內容或是點擊其中包含的鏈接，否則離開網頁。那些與用戶任務一致或相似的內容，或者是符合用戶興趣的內容，正是用戶在瀏覽網頁時想要關注的內容。那么，網頁能否吸引用戶，關鍵就在于能否讓用戶快速掃描的過程中迅速找到想要關注的內容。在看到網頁的瞬間，用戶會將網頁元素劃分為不同的視覺層次。層次越高的網頁元素，用戶在掃描時停留的時間越長；層次越低的網頁元素，用戶在掃描時停留的時間越短，或者根本略過不看?；谝陨戏治觯诰W頁設計時，有必要將網頁元素

25、劃分為清晰的、符合用戶邏輯習慣的視覺層次，以便讓用戶在快速掃描的過程中迅速找到任務或興趣相關的內容，達到提高交互效能、吸引用戶的目的。如何劃分清晰且符合邏輯習慣的視覺層次？1.劃分明確的區(qū)域把網頁在空間上劃分成明確定義的區(qū)域。在劃分區(qū)域之前需要考察網頁內容的邏輯關系（主次關系、相關性、包含關系），并由此確定區(qū)域的個數、大小和位置關系。為了使劃分結果整齊而富有層次感，建議選用規(guī)則的矩形作為區(qū)域形狀，并采用如下方法進行劃分：第一步：在網頁中添加第一條水平/豎直分隔線；第二步：如果還存在需要劃分的區(qū)域，為所有這些區(qū)域各添加一條水平/豎直分隔線；第三步：重復第二步，直到網頁中不存在需要劃分的區(qū)域。注意

26、：不同區(qū)域塊應該表現形式上有所區(qū)分，一般使用不同的背景圖片或背景色來區(qū)分區(qū)域塊。背景圖片通常會帶來一些視覺噪聲，干擾視覺層次的劃分。相比而言，采用背景色的形式更能凸現視覺層次。因此，建議盡量少用背景圖片，多采用色塊來表現區(qū)域。2.突出表現重點內容按照網頁內容在邏輯上的主次關系（重要程度），確定相應網頁元素的表現形式，以及相應區(qū)域的大小和位置。內容的重要性與表現形式及區(qū)域大小、位置的對應關系應該符合邏輯習慣，并盡可能與用戶進行視覺層次劃分的結果一致。一般來說，重要內容宜采用醒目的表現形式、占據的區(qū)域較大、位置靠上。以最重要的標題為例，通常都是加大、加粗的字體，具有鮮亮的顏色，用較多的空白隔開，并

27、且靠近頁面的頂部或某些組合的上部。3.正確表達相關性和包含關系在布局設計中正確表達網頁內容的相關性和包含關系，以符合用戶的邏輯習慣。正確的表達有兩層含義：其一，在劃分區(qū)域和安排區(qū)域內容時的正確表達。對于邏輯相關的內容，可以分類組合或集中放在一個清晰明確的區(qū)域內；對于邏輯包含關系，一般采用形象的嵌套形式表達。例如：將功能相近的按鈕放在一起，并在樣式上與其他功能的按鈕區(qū)別開。其二，在表現形式上的正確表達。建議采用明確的圖案分隔有相關性或包含關系的區(qū)域，例如：繪制出邊框。評測標準要 求1.網頁的區(qū)域劃分明確2.網頁的區(qū)域劃分能夠正確表達內容的相關性和包含關系3.網頁的區(qū)域劃分能夠突出表現重點內容必備

28、性必備3.2.3 首頁布局參考下面給出“中國數字科技館”網站的首頁布局參考： 首頁布局參考示意圖首頁布局元素首頁內容Logo + Title站點標識和功能說明All, C1, C2, C3, C4首頁導航的標簽Menu + Sub-menus首頁導航的標簽頁Search站內搜索Login登錄/注冊欄Notice公告欄Advice建議欄Hot“熱點”欄目Latest“最新”欄目Information + Help版權及所有者信息+幫助表 首頁布局元素與首頁內容對應表（評測標準請參考第1章及本章前兩節(jié)）3.2.4 子網頁布局參考下面給出與首頁風格統一的子網頁的統一布局參考：圖 3.2 子網頁布局參

29、考示意圖布局元素子網頁內容Logo + Title站點標識和功能說明Navigation導航欄Path當前訪問路徑Search站內搜索Content子網頁主要內容Hot子網頁的“熱點”欄目Latest子網頁的“最新”欄目Information + Help版權及所有者信息+幫助表 3.2 子網頁布局元素與子網頁內容對應表（評測標準請參考本章前兩節(jié)）3.3 配色方案配色方案是區(qū)分網頁風格的重要因素之一。關于配色方案的設計原則有四個：1.整體配色方案包含的顏色個數不宜過多，最多4-7種；2.不同類型子網頁可以使用不同的配色方案。例如：針對“青少年”受眾的子網頁選用活潑的配色方案，針對“科普工作者”

30、受眾的子網頁選用比較沉穩(wěn)的配色方案；3.背景色和前景色（尤其是文字的顏色）的顏色對比度要大，比較理想的搭配效果是“淺色背景深色正文”；4.正文區(qū)域和其他功能區(qū)域應該采用不同的背景顏色；5.降低色純度，增加網頁的清晰度，照顧色盲者的需求。為了使配色方案更加合理，建議參照下表中顏色象征的意義進行設計：顏 色象征的意義紅 色熱情、奔放、喜悅、莊嚴黃 色高貴、富有、燦爛、活潑黑 色嚴肅、夜晚、沉著白 色純潔、簡單、潔凈藍 色天空、清爽、科技綠 色植物、生命、生機灰 色莊重、沉穩(wěn)紫 色浪漫、富貴棕 色大地、厚樸表 顏色象征的意義評測標準要 求1.整體配色方案包含的顏色個數不宜過多，最多4-7種2.面向不

31、同受眾類型的子網頁可以使用不同的配色方案3.背景色和前景色的顏色對比度要大，前景是文字時以“淺色背景深色正文”為最佳4.正文區(qū)域和其它功能區(qū)域采用不同的背景色5.降低色純度，增加網頁的清晰度，照顧色盲者的需求必備性必備第4章 交互效能提高交互效能的目的是為了讓用戶以較高效率訪問網頁，增加用戶對網站的滿意度。提高交互效能需要在保證兼容性的基礎上進行，一般通過四種途徑來提高交互效能：1.提高可瀏覽性2.避免設置訪問障礙3.縮短等待時間4.針對特殊需求設計交互效能包含很多方面的因素，某些因素直接關聯到技術細節(jié)。為了提高交互效能，在對網站進行技術實現時有一些注意事項需要考慮。4.1 保證兼容性這是網站

32、設計的基本要求，包括兩個方面：1.支持分辨率的調整，不同分辨率下內容均能正確顯示，建議針對1024768設計，同時為800600的分辨率設計縮放機制，當使用更高分辨率時則居中顯示；2.考慮瀏覽器版本和種類的兼容性，至少保證網站可以在IE的不同版本下正常瀏覽并盡量支持其它常用瀏覽器（如Firefox）；評測標準要 求1.支持分辨率的調整，至少保證1024768和800600兩種分辨率下內容的正確顯示2.3.兼容IE以外的其它瀏覽器，至少保證兼容Firefox必備性必備4.2 提高可瀏覽性建議從五個方面著手，提高“中國數字科技館”網站的可瀏覽性：標題、排版、語言、圖標、文字。4.2.1 標題每個子

33、網頁都有明確的標題，且標題要能清楚表明該子網頁的內容。標題必須表義明確并具有醒目的表現形式。評測標準要 求1.所有子網頁均設置標題2.標題表義明確3.標題具有醒目的表現形式必備性必備4.2.2 排版排版設計的兩個要點是：a)參照排版印刷的設計風格，將信息橫向排列，以符合用戶的閱讀習慣；b)盡量避免內容寬度大于窗口寬度的情況發(fā)生。當內容的實際大小超出窗口大小時，必須采用與用戶思維習慣一致的瀏覽方式控制內容的滾動，例如：滾動條、手抓式移動。評測標準要 求1.網頁上信息排列方式清晰2.在瀏覽器窗口最大化并采用最佳分辨率條件下，不存在網頁內容寬度大于瀏覽器窗口寬度的情況必備性必備4.2.3 語言考慮受

34、眾需要，應當采用便于用戶理解的語言進行表述。具體應當遵循以下原則：a)盡量使用用戶語言表述，避免使用網絡語言、文學色彩濃厚或專業(yè)性過強的詞匯；c)給生僻字加以注音；d)給生僻詞匯、專業(yè)詞匯或縮略語加以注釋。評測標準要 求1.網頁上的所有文字都盡量使用用戶語言表述，避免使用網絡語言、文學色彩濃厚或專業(yè)性過強的詞匯2.若內容需要必須使用生僻字時，為其加以注音3.若內容需要必須使用生僻詞匯、專業(yè)詞匯或縮略語時，為其加以注釋必備性必備4.2.4 圖標遵循以下原則來設計圖標：a)大小適中；b)位置和顏色醒目；c)采用表義明確的形狀或圖片作為表現形式。評測標準要 求1.網頁上所有圖標都表義明確2.網頁上所

35、有圖標的大小都適中3.網頁上所有圖標都具有醒目的位置和顏色必備性必備4.2.5 文字遵循以下原則進行文字設計：a)盡量精簡文字，確保：每個段落不含有多余的句子，每條句子不含有多余的文字；b)使用靜態(tài)的文字，避免使用文字動效（例如：移動、閃爍）；c)標題區(qū)、標題行和正文的文字分別采用不同表現形式，但各自的表現形式相同；d)用顏色變換或者大小變化來表現需要強調的文字；e)使用統一的字體；f)字體尺寸最好大于10個像素，建議選擇相對尺寸。關于文字的設計原則a) 作補充說明：實際上，最理想的文字設計原則是：強調有用文字，去掉其余文字。因為，對用戶來說，有用的文字可以作為視覺層次劃分的依據，其余文字只能

36、起到干擾效果。然而，關于文字是否“有用”的判定依據因人而異，上述設計原則是實際上是無法使用的。因此，更加實際的設計原則只有一句話：去掉多余文字。多余文字指那些沒有信息量或信息量極少的文字。去掉多余文字有兩個理由：一方面，多余文字的存在會分散用戶的注意力，干擾視覺層次劃分的過程；另一方面，文字過多會使網頁變得雜亂，給用戶帶來視覺負擔，增加視覺層次劃分的難度。評測標準要 求1.網頁中的文字精煉，確保無多余的字句2.網頁中盡量使用靜態(tài)文字，避免使用文字動效3.網頁中的標題和正文可以采用不同的文字表現形式，但各自的表現形式保持一致4.網頁中用文字的顏色變換或大小變化來表現需要強調的內容必備性必備4.3

37、 避免設置訪問障礙在點擊指向網頁的鏈接時，用戶總是希望能迅速跳轉到目標網頁。在這一點上，用戶對交互效能的要求很苛刻：不愿意接受表義不明的鏈接，不能原諒任何無效或指向錯誤網頁的鏈接，也不能容忍耗時過長的跳轉過程。表義不明、無效或錯誤的鏈接是造成訪問障礙的主要因素。為了避免設置訪問障礙，必須合理設計鏈接。有三點值得考慮：1.保證鏈接的有效性對于無效鏈接或者指向錯誤網頁的鏈接，用戶的容忍度為0。建議在網頁設計完成之后，檢查所有鏈接的有效性，避免出現上述情況。2.讓鏈接表義明確能夠明確表述信息的鏈接可以采用兩種方式：a)本身就是文字或者表義明確的圖片；b)鼠標懸停時彈出工具條顯示表述信息。3.區(qū)分不同

38、狀態(tài)的鏈接點擊過的鏈接應該標識成已經訪問過，并且要采用常規(guī)的方式。例如：對于文字連接，一般訪問前用藍色表示，一旦訪問過就用紅色表示。4.顯示附加信息針對特殊鏈接和數據量較大的鏈接而言。例如：對于“文件下載”鏈接，一般會注明文件大小，幫助用戶預測下載時間。評測標準要 求1.網頁上的所有鏈接都有效且表義明確2.網頁上能夠區(qū)分不同狀態(tài)的鏈接3.網頁上的特殊鏈接和數據量較大的鏈接均顯示附加信息必備性必備4.4 縮短等待時間用戶是沒有耐性的。在等待進入新網頁時，用戶對網站的好感指數會隨著時間遞減，并且遞減速率越來越快；當好感指數下降到某一預設指標時，用戶就會終止新網頁的連接過程。不同用戶的預設指標可能不

39、同，同一用戶在不同時刻的預設指標也可能不同。進行網頁設計時不能期待用戶改變此預設指標，唯有縮短等待時間，滿足預設指標盡可能低的用戶需求。通?？梢圆扇∪缦聝蓚€措施來縮短等待時間：1.提高網頁連接速度需要考慮兩個方面：a)數據量應該折衷考慮網頁的視覺效果和所需要的數據量，盡量減少網頁連接時需要本地下載的數據量。建議嚴格控制打開新網頁時需要本地下載的數據量。較其它方式相比，使用Flash會增大數據量，從這個方面考慮，不宜采用純Flash設計網頁。對于導航和加載頁面，應當盡量避免使用Flash；對于表現網頁內容的Flash，建議盡量采用替代形式，例如GIF圖片。對于必須包含Flash的網頁，原則上來說，Flash不能過大，最好200k byte以內。作為一條經驗，一個只包含靜態(tài)內容的標準網頁不應大于60K。一般來說，用戶不能忍受超過8秒10秒的頁面加載等待時間