網(wǎng)頁界面設(shè)計(jì)規(guī)范

網(wǎng)頁界面設(shè)計(jì)規(guī)范1.界面規(guī)范

1.1.總體原則

l以用戶為中心。設(shè)計(jì)由用戶控制的界面，而不是界面控制用戶。

l清楚一致的設(shè)計(jì)。所有界面的風(fēng)格保持一致，所有具有相同含義的術(shù)語保持一致，且易于理解

l擁有良好的直覺特征。以用戶所熟悉的現(xiàn)實(shí)世界事務(wù)的抽象來給用戶暗示和隱喻，來幫助用戶能迅速學(xué)會(huì)軟件的使用。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第1頁。l較快的響應(yīng)速度。

l簡(jiǎn)單且美觀。

1.2.原則詳述

1.2.1.用戶控制

用戶界面設(shè)計(jì)的一個(gè)重要原則是用戶應(yīng)該總是感覺在控制軟件而不是感覺被軟件所控制。

l操作上假設(shè)是用戶–而不是計(jì)算機(jī)或軟件–開始動(dòng)作。用戶扮演主動(dòng)角色，而不是扮演被動(dòng)角色。在需要自動(dòng)執(zhí)行任務(wù)時(shí)，要以允許用戶進(jìn)行選擇或控制它的方式來實(shí)現(xiàn)該自動(dòng)任務(wù)。

l提供用戶自定義設(shè)置。因?yàn)橛脩舻募寄芎拖埠酶鞑幌嗤?，因此他們必須能夠個(gè)性化界面的某些方面。Windows為用戶提供了對(duì)許多這方面的訪問。您的軟件應(yīng)該反應(yīng)不同的系統(tǒng)屬性–例如顏色、字體或其他選項(xiàng)的用戶設(shè)置。

l采取交互式和易于感應(yīng)的窗口，盡量避免使用模態(tài)對(duì)話框，而使用”非模式”輔助窗口。“模式”是一種狀態(tài)，它排除一般的交互，或者限制用戶只能進(jìn)行特定的交互。當(dāng)最好使用一個(gè)模式或該模式只是可替換的設(shè)計(jì)時(shí)–例如，用于在一個(gè)繪圖程序中選定一個(gè)特定感覺–請(qǐng)確保該模式是顯然的、可見的，是一個(gè)明確的用戶選定的結(jié)果，并且容易取消。

l在后臺(tái)運(yùn)行長(zhǎng)進(jìn)程時(shí)，保持前臺(tái)式交互。例如，當(dāng)正在打印一個(gè)文檔，即使該文檔不能被改變，用戶也應(yīng)該可以最小化該窗口。

l諒解。用戶喜歡探索一個(gè)界面，并經(jīng)常從嘗試和錯(cuò)誤中學(xué)習(xí)。一個(gè)有效的界面允許交互式的發(fā)現(xiàn)，它只提供一組合適的選擇，并在用戶可能破壞系統(tǒng)或數(shù)據(jù)的情況時(shí)發(fā)出警告。如果可行，還應(yīng)提供可逆轉(zhuǎn)或可還原的操作。即使在設(shè)計(jì)得很好得界面中，用戶也可能犯錯(cuò)誤。這些錯(cuò)誤既可以是物理上得（偶然地指向了錯(cuò)誤的命令或數(shù)據(jù)），也可以是邏輯上的（對(duì)選定哪一個(gè)命令或哪些數(shù)據(jù)做出了錯(cuò)誤的決定）。有效的設(shè)計(jì)避免很可能導(dǎo)致錯(cuò)誤的情況。它還包容潛在的用戶錯(cuò)誤，并且使用戶易于還原。

1.2.2.清楚一致的設(shè)計(jì)

一致允許用戶將已有的知識(shí)傳遞到新的任務(wù)中，更快地學(xué)習(xí)新事物，并將更多的注意力集中在任務(wù)上。這是因?yàn)樗麄儾槐鼗〞r(shí)間來嘗試記住交互中的不同。通過提供一種穩(wěn)定的感覺，一致使得界面熟悉而又可預(yù)測(cè)。一致在界面的所有方面都是很重要的，包括命令的名稱、信息的可視表示，操作行為，以及元素在屏幕和窗口內(nèi)部的放置。

l相同含義的詞使用統(tǒng)一的術(shù)語。比如對(duì)于倉(cāng)庫(kù)中存放的物料，不可同時(shí)又稱為物品、貨物、備品、產(chǎn)品和材料等等，而統(tǒng)一約定一個(gè)稱謂，且此稱謂是用戶熟悉的和易于理解的。

l使用一組一致的命令和界面來展示常見功能。例如，避免一個(gè)”復(fù)制”命令在一種情況下立刻執(zhí)行一個(gè)操作，但在另一種情況顯示一個(gè)對(duì)話框要求用戶鍵入目標(biāo)然后才執(zhí)行。應(yīng)該使用同樣的命令來執(zhí)行對(duì)用戶來說相似的功能。

l操作環(huán)境內(nèi)的一致。保持Windows提供的交互操作和界面約定之間的高度一致，用戶將能很快熟悉軟件的使用。

l使用隱喻的一致性。如果一個(gè)特定的行為更多的是一個(gè)不同的事物的特征，而不是它的隱喻的含義，那么用戶可能在學(xué)習(xí)將行為和該事物相關(guān)聯(lián)時(shí)遇到困難。例如，對(duì)于放在回收站中的對(duì)象而言，焚燒爐和廢紙籮代表不同的模型。

l建立項(xiàng)目保留字。通過建立保留字來明確和統(tǒng)一術(shù)語和操作命令。

l提供可視反饋。在后臺(tái)運(yùn)行長(zhǎng)進(jìn)程時(shí)（時(shí)間超過1～10秒，視具體情況而定），必須提供進(jìn)度條等信息指示。

l除非特別必要時(shí)，不要提供聲音反饋。在有嚴(yán)重的問題發(fā)生時(shí)，可以使用聲音來提示用戶，但是通常應(yīng)該允許用戶取消聲音。

l保持文字內(nèi)容清楚。信息的表達(dá)要言簡(jiǎn)意賅，易于理解而又不羅嗦；避免使用冗長(zhǎng)的文字給用戶反饋。

網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第2頁。1.2.3.有良好的直覺特征

l用熟悉的隱喻為用戶的任務(wù)提供直接而直觀的界面。通過允許用戶利用他們的知識(shí)和經(jīng)驗(yàn)，隱喻使得預(yù)測(cè)和學(xué)習(xí)基于軟件的表示的行為更加容易。

l在使用隱喻時(shí)，不需要將基于計(jì)算機(jī)的實(shí)現(xiàn)局限在真實(shí)世界的對(duì)應(yīng)物上范圍之內(nèi)。例如，與其基于紙張的對(duì)應(yīng)物不同，Windows桌面上的文件夾可以被用來組織各種對(duì)象，例如打印機(jī)、計(jì)算器、以及其他文件夾。同樣，Windows文件夾可以其真實(shí)世界對(duì)應(yīng)物不可能的方式被排序。在界面中使用隱喻的目的是提供一個(gè)認(rèn)知的橋梁；隱喻并不以其自身為最終目的。

l隱喻支持用戶認(rèn)知而不是記憶。用戶記起與一個(gè)熟悉的事物相關(guān)聯(lián)的意義要比他們記起一個(gè)特定命令的名稱要容易得多。

l同常見軟件保持一致性。出色的用戶界面在程序中將實(shí)現(xiàn)同用戶以前用過的其它成功軟件一致的動(dòng)作。

1.2.4.較快的響應(yīng)速度

l保持界面能很快對(duì)用戶操作作出反應(yīng)。

l提供快捷鍵。特別對(duì)于有大量錄入項(xiàng)的界面，能讓用戶不使用鼠標(biāo)即可完成快速數(shù)據(jù)錄入。在用戶界面中加入一些功能，這些功能可以讓熟練用戶在不同的區(qū)域快速的輸入數(shù)據(jù)。這些功能包括重復(fù)功能、快捷鍵、帶有有意義的圖標(biāo)的按鈕等等，所有這些可以使速度快的用戶可以控制界面并加快數(shù)據(jù)的輸入。

l除非必要，不要重繪屏幕。

1.2.5.簡(jiǎn)單且美觀

l簡(jiǎn)單。界面應(yīng)該很簡(jiǎn)單（不是過分單純化）、易于學(xué)習(xí)、并且易于使用。它還必須提供對(duì)應(yīng)用程序的所有功能的訪問。在界面中，擴(kuò)大功能和保持簡(jiǎn)單是相互矛盾的。一個(gè)有效的設(shè)計(jì)應(yīng)該平衡這些目標(biāo)。支持簡(jiǎn)單性的一種方法是將信息的表示減少到進(jìn)行充分交流所需的最少信息。例如，避免命令名和消息的文字描述。不相關(guān)或冗長(zhǎng)的句子擾亂了您的設(shè)計(jì)，使得用戶難以很容易地提取重要信息。另一個(gè)設(shè)計(jì)簡(jiǎn)單而有用的界面的方法是使用自然的映射和語意。界面元素的排列和表示影響它們的意義和關(guān)聯(lián)。簡(jiǎn)單還與熟悉相互關(guān)聯(lián)。熟悉的事物通常似乎更簡(jiǎn)單。盡可能嘗試建立利用用戶已有的知識(shí)和經(jīng)歷的聯(lián)系。您可以使用漸進(jìn)揭示來幫助用戶管理復(fù)雜的事物?！睗u進(jìn)揭示”涉及到仔細(xì)的信息組織，以便只在恰當(dāng)網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第3頁。的時(shí)候才顯示信息。通過隱藏向用戶表達(dá)的信息，您減少了用戶必須處理的信息數(shù)量。例如，您可以使用菜單來顯示操作或選擇的列表，還可以使用對(duì)話框來顯示一組選項(xiàng)。漸進(jìn)揭示并不意味著對(duì)顯示信息使用非傳統(tǒng)的技術(shù)，例如需要一個(gè)修飾鍵作為訪問基本功能的唯一方法，或者強(qiáng)迫用戶通過一個(gè)更長(zhǎng)的分級(jí)交互序列。這會(huì)使用戶界面更加復(fù)雜和麻煩。

l美觀?？梢曉O(shè)計(jì)是應(yīng)用程序界面的重要部分?？梢晫傩蕴峁┝朔浅：玫挠∠?，并傳達(dá)特定對(duì)象的交互行為的重要線索。同時(shí)，出現(xiàn)在屏幕上的每一個(gè)可視元素也是很重要的，它們可能競(jìng)爭(zhēng)用戶的注意。提供清楚地促進(jìn)用戶對(duì)表達(dá)的信息的理解的連貫環(huán)境。圖形或可視設(shè)計(jì)器的技巧對(duì)于這一方面是無價(jià)的。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第1頁。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第2頁。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第3頁。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第4頁。1.3.細(xì)節(jié)約定

1.3.1.界面風(fēng)格

1.3.1.1.普通外觀

l使用一致性一致的外觀將使用戶界面更易于理解和使用。用戶界面控件看起來應(yīng)該是一致的。

l使用安排和流程在西方文化中（包括中國(guó)），人們習(xí)慣于從左到右，從上到下進(jìn)行閱讀，因此，應(yīng)該將重要信息放在上面和左邊。左上角最容易吸引起人們的注意力。

l使用對(duì)齊通常，使用左對(duì)齊來使用戶界面控件更易于瀏覽。對(duì)于數(shù)值文本，應(yīng)該使用小數(shù)點(diǎn)對(duì)齊或右對(duì)齊。對(duì)于非數(shù)值文本，應(yīng)該避免使用右對(duì)齊或居中對(duì)齊。不必對(duì)什么都使用中間對(duì)齊，或者使它們保持對(duì)稱形式。在右邊或底部保留空白區(qū)域更適合習(xí)慣。

l使用分組將相關(guān)的用戶界面控件分成組，以體現(xiàn)它們之間的關(guān)系。同時(shí)，還要顯示相關(guān)信息。將控件放在它所作用的對(duì)象旁。使用空格、分組框、線條和標(biāo)簽，或者其它分隔符對(duì)用戶界面控件進(jìn)行分組。

l使用強(qiáng)調(diào)使用焦點(diǎn)、位置、分組、層次、啟用/禁用、大小、顏色或者字體等，來將注意力集中在需要首先看到的用戶界面控件上。盡量以可視的方式指明用戶接下來應(yīng)該進(jìn)行的操作。

l使用可視的提示盡量使用近似的大小和間距來指出用戶界面控件是相似的，而使用不同的大小和間距來指出用戶界面控件視是不同的。

l使用空格使用空格來創(chuàng)建一個(gè)”透氣室”，以使窗口布局更易于理解，并且查看起來更舒服?？崭竦亩嗌僖m當(dāng)，不要顯得太分散。但是，要避免過多地使用空格。如果可能，盡量使窗口小一些。

l警惕空洞不要到處粘貼公司或產(chǎn)品的名稱及徽標(biāo)。雖然在啟動(dòng)屏或”關(guān)于”框中出現(xiàn)公司或產(chǎn)品名稱及徽標(biāo)是完全可以接受的，但其他窗口中的可用空間應(yīng)該出現(xiàn)其他內(nèi)容。如果沒有其他內(nèi)容，那么應(yīng)盡量使窗口小一些。

l注意大小使用用戶界面控件的分辨率具有獨(dú)立性。使用系統(tǒng)規(guī)格（使用GetGystemMetricsAPI函數(shù)）或文本規(guī)格（使用GetTextMetrics或GetTextExtentPoint32API函數(shù)）來確定用戶界面控件的大小。任何顯示文本的對(duì)象（如對(duì)話框或定義的文本文檔）都應(yīng)該使用文本規(guī)格。

l考慮使用資源或預(yù)定義的布局網(wǎng)格資源模板或預(yù)定義的布局網(wǎng)格有助于您在不同的窗口之間實(shí)現(xiàn)一致性。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第4頁。注意，下頁所示圖的第二個(gè)對(duì)話框，與第一個(gè)不同，它有一個(gè)緊湊、從左到右、從上到下的流程，并且，左對(duì)齊的標(biāo)簽很便于瀏覽；通過對(duì)齊編輯框并調(diào)整其大小，使它顯得更有組織，更加平衡。不合理的網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第5頁。平衡的對(duì)話框

1.3.1.2.Windows的可視提示

暗示與用戶只需通過查看可視提示來確定對(duì)象的使用方式的能力有關(guān)。在Windows中，請(qǐng)保持使用下面的可視提示：

l可以單擊凸起的項(xiàng)目。

l可以單擊當(dāng)鼠標(biāo)從其上移過時(shí)突出顯示的項(xiàng)目。

l不能單擊下凹的項(xiàng)目。

l可以編輯具有白色背景和閃爍垂直條（光標(biāo)）的項(xiàng)目。

l不能編輯具有灰色背景的項(xiàng)目。

l灰色項(xiàng)目是被禁用的。

l可以拖動(dòng)凸起的項(xiàng)目。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第5頁。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第6頁。1.3.1.3.交互

l盡量提供對(duì)所有功能的鍵盤訪問理想情況下，除了繪圖這樣的圖形功能，其他所有的功能都應(yīng)該只能通過鍵盤來訪問。

l盡量提供對(duì)所有功能的鼠標(biāo)訪問理想情況下，除了文本輸入外，其他所有功能都應(yīng)該只能通過鼠標(biāo)來訪問。

l確保具有明顯后果的操作要求用戶進(jìn)行明確的選擇*用戶需要完全明確他將要進(jìn)行危險(xiǎn)性操作或破壞性操作。

l對(duì)于使有耗時(shí)的操作都給出反饋*在進(jìn)行長(zhǎng)時(shí)間的操作時(shí)，要確保有等待光標(biāo)、進(jìn)度表或其他的可視反饋。用戶應(yīng)該能夠取消長(zhǎng)時(shí)間的操作。如果可以取消未完成的操作，那么將按鈕標(biāo)記為”取消”，否則將按鈕標(biāo)記為”停止”。

l可視的指示模式*向用戶提供一種可視的反饋，以指出用戶進(jìn)入一種模式，通?？梢酝ㄟ^更改光標(biāo)或標(biāo)題欄文本來做到這一點(diǎn)。

l確保單擊和雙擊的一致性*單擊用于非按鈕選定，而雙擊用于選定并執(zhí)行默認(rèn)操作。換句話說，雙擊（在列表框、組合框，或其他接受雙擊的控件中）的效果應(yīng)該與選定控件中的一個(gè)項(xiàng)目，然后按下Enter鍵的效果一樣。

l鼠標(biāo)右鍵僅用于快捷菜單*確保鼠標(biāo)右鍵僅用于快捷菜單，而不要用于其他用途。

l不要使用鼠標(biāo)中鍵*如果用戶的鼠標(biāo)有中鍵，那么讓用戶使用”控制面板”中的”鼠標(biāo)”實(shí)用程序自己分配中鍵的行為。

l保持分配的快捷鍵的一致性組合功能鍵和Ctrl鍵用于快捷鍵。習(xí)慣上不將Alt鍵用于組合鍵，業(yè)務(wù)Alt鍵常常被用于訪問鍵。盡量避免使用Alt鍵和Ctrl鍵，因?yàn)檫@種組合會(huì)使快捷鍵非常麻煩，而且也很不方便。

l將快捷鍵作為補(bǔ)充方式*千萬不要將快捷鍵作為訪問命令的唯一方法。應(yīng)該讓用戶有更多的明顯選擇。

l避免水平滾動(dòng)條與垂直滾動(dòng)條不同，水平滾動(dòng)條并不受歡迎，因?yàn)樗鼤?huì)使項(xiàng)目閱讀起來比較困難。解決的辦法有：盡量使用垂直滾動(dòng)條、加寬窗口、減小文本的寬度，或者使文本自動(dòng)換行等。當(dāng)然，如果確實(shí)需要，還可以使用水平滾動(dòng)條。

1.3.1.4.程序

l只有主程序窗口才有標(biāo)題欄圖標(biāo)、菜單欄、工具欄和狀態(tài)欄*因?yàn)閱螕糁鞔翱诘娜蝿?wù)欄按鈕也會(huì)激活二級(jí)窗口，所以二級(jí)窗口絕對(duì)不要顯示在任務(wù)欄中。二級(jí)窗口不要因?yàn)槭褂貌藛螜?、工具欄或狀態(tài)欄而使其變得復(fù)雜。可以使用標(biāo)題欄圖標(biāo)來明顯區(qū)分主窗口和二級(jí)窗口。另外，絕對(duì)不要使用默認(rèn)的Windows圖標(biāo)(飄動(dòng)的窗口圖標(biāo))作為窗口圖標(biāo)。

l簡(jiǎn)化默認(rèn)配置讓用戶按自己的速度來學(xué)習(xí)和使用程序。

l應(yīng)用程序應(yīng)該使用多文檔界面（MDI）或單文檔（SDI）這些程序界面應(yīng)該與應(yīng)用程序的使用模式匹配。

l默認(rèn)情況下，應(yīng)用程序應(yīng)該保持為最大化當(dāng)應(yīng)用程序占用整個(gè)屏幕時(shí)，常常能夠提高用戶的工作效率。

l實(shí)用程序應(yīng)該使用SDI或?qū)υ捒蚪缑孢@些程序界面應(yīng)該與實(shí)用程序的使用模式匹配。對(duì)于實(shí)用程序，建議不要使用MDI界面，因?yàn)楣芾磉@些窗口需要付出很多努力。

l實(shí)用程序應(yīng)該在小屏幕范圍內(nèi)運(yùn)行實(shí)用程序常常與其他程序一起運(yùn)行，因此它們需要在小屏幕范圍內(nèi)運(yùn)行。實(shí)用程序應(yīng)該有靈活的窗口布局，以適應(yīng)多種不同的大小。實(shí)用程序很少以最大化的形式運(yùn)行。

l使用實(shí)際文檔的SDI程序必須支持運(yùn)行多個(gè)實(shí)例*運(yùn)行多個(gè)實(shí)例使用戶能夠同時(shí)操作多個(gè)文檔。

l使用”退出”命令終止程序使用”退出”終止程序；使用”關(guān)閉”移走主窗口和非模式對(duì)話框；使用”取消”移走模式對(duì)話框。當(dāng)關(guān)閉主窗口并不表示終止進(jìn)程時(shí)，對(duì)于主窗口使用”關(guān)閉”來代替使用”退出”。例如：關(guān)閉打印機(jī)狀態(tài)窗口不會(huì)取消打印任務(wù)。

1.3.1.5.默認(rèn)

l保存和恢復(fù)用戶選擇程序應(yīng)該能夠能夠恢復(fù)到其最后退出的狀態(tài)。MDI程序應(yīng)該能夠恢復(fù)文檔窗口的大小和位置。對(duì)話框通常應(yīng)該使用最后輸入的值作為默認(rèn)值。

l提供適當(dāng)?shù)哪J(rèn)值提供提供適當(dāng)?shù)哪J(rèn)值來減少用戶不必要的操作，從而幫助用戶完成工作。提供最可能使用并給出設(shè)置實(shí)際使用方式的默認(rèn)值。通常，最網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第7頁。好的默認(rèn)值是用戶最后輸入的值。

l考慮選擇默認(rèn)值時(shí)的安全性*不應(yīng)該將不可恢復(fù)或破壞性的操作設(shè)置為默認(rèn)值。不要使用令用戶感到莫名其妙的默認(rèn)值。

1.3.1.6.窗體

對(duì)話框窗體大小盡量不要超過640*460，留20給任務(wù)欄。并且高和寬（或W寬和高）的比應(yīng)該大致保持為3:4（或4：3）。一般應(yīng)該將窗體的“Position”屬性定義為“poDesktopCenter”，”WindowState”屬性為”wsNormal”，某些主界面設(shè)置為”wsMaximized”?！癝howHint”屬性設(shè)為”True”。如果是模式對(duì)話框，則將”BorderStyle”屬性設(shè)置為”bsDialog”。

窗體文件(*.dfm)保存為文本格式，以便在VSS中比較不同版本之間的差別。如果窗體大小超過屏幕大小，則在Delphi開發(fā)環(huán)境中打開時(shí)，大小會(huì)有改變，并且影響到運(yùn)行時(shí)刻效果。由于每個(gè)人的屏幕大小設(shè)置不一樣，有些是1024*768，有些是800*600，因此在設(shè)計(jì)期間請(qǐng)注意窗體大小，盡量不要超過800*600，以免出現(xiàn)上述問題。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第6頁。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第7頁。1.3.1.7.布局和間距

窗體控件布局和間距盡量保持與Windows標(biāo)準(zhǔn)一致。控件與窗體的上、下、左、右邊距為7象素。右下角主命令按鈕之間的間距為6象素，如果主命令按鈕在右上角，之間的間距則為4象素。主命令按鈕一般情況為75×21象素，如果按鈕的文本很長(zhǎng)，應(yīng)該適當(dāng)加寬按鈕的寬度。如下圖。其它詳細(xì)資料請(qǐng)完全參照錯(cuò)誤！書簽自引用無效。和命令按鈕?？丶摹盩abOrder”屬性值應(yīng)該與控件排列順序一致，即遵循從上到下、從左到右這樣一個(gè)流程。如果在PageControl的多個(gè)頁面中存在類似的控件，應(yīng)該盡量使得它們?cè)诟鱾€(gè)頁面中出現(xiàn)的位置/大小比較一致，以免在頁面間切換時(shí)產(chǎn)生閃爍感。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第8頁。1.3.1.8.圖標(biāo)、圖片

不同界面中的同一功能應(yīng)該使用同樣的圖標(biāo)和圖片。圖標(biāo)、圖片的色調(diào)、風(fēng)格盡量保持一致。圖標(biāo)、圖片的隱喻應(yīng)能確切表示功能的含義，如果不能，就直接使用文本，以免混淆用戶。如果功能是一個(gè)動(dòng)作時(shí)，可能比較難找到確切表示該功能的圖標(biāo)，這時(shí)應(yīng)該盡量采用此動(dòng)作相關(guān)的名詞做圖標(biāo)。例如Windows中的”剪切”功能就是用一把剪刀來表示的。

1.3.1.9.提示信息（Hint）

工具欄按鈕應(yīng)該設(shè)置工具提示“Hint”屬性。Hint能幫助用戶更方便地理解和使用。詳細(xì)資料可以參照工具欄、工具提示。

如果使用了”TSpeedButton”控件，并且只有圖標(biāo)，同樣應(yīng)對(duì)它設(shè)置”Hint”屬性。如果不是特殊情況，應(yīng)盡量避免使用”TSpeedButton”控件，而使用”TButton”控件代替。

1.3.1.10.標(biāo)點(diǎn)符號(hào)

在標(biāo)識(shí)控件用途的標(biāo)簽文本（Label）和提示信息（Hint）中，應(yīng)使用半角符號(hào)。如果是指導(dǎo)性標(biāo)簽文本（如解釋按鈕功能的句子），則使用全角符號(hào)，并且句子應(yīng)遵循中文標(biāo)點(diǎn)符號(hào)標(biāo)準(zhǔn)。如下圖Microsoft標(biāo)準(zhǔn)對(duì)話框例子。其他詳細(xì)資料可參照靜態(tài)文本。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第8頁。1.3.1.11.對(duì)話框

l對(duì)話框應(yīng)該在所有視頻模式下都能夠正確顯示當(dāng)在VGA模式（640×480）下顯示時(shí)，對(duì)話框應(yīng)該不超過640×460（留20像素給任務(wù)欄）。這將確保對(duì)話框能夠顯示在所有的視頻模式下。

l確保模式對(duì)話框的模式*確保使用具有父窗口的模式對(duì)話框都提供正確的父窗口句柄，而不時(shí)提供NULL句柄。如果沒有提供父窗口句柄，那么父窗口仍處于活動(dòng)狀態(tài)，因此該對(duì)話框?qū)嶋H上并不是模式對(duì)話框。

l不要使用可滾動(dòng)的對(duì)話框*也就是說，不要使用需要滾動(dòng)條來進(jìn)行完全查看的對(duì)話框。這種對(duì)話框使用起來非常不方便，并且也時(shí)完全不必要的。應(yīng)該重新設(shè)計(jì)這種對(duì)話框。

l不要在作為二級(jí)窗口的對(duì)話框中使用菜單欄*使用這種對(duì)話框需要付出很多努力。注意，在用作主窗口的對(duì)話框（如”查找”實(shí)用工具）中，菜單欄時(shí)可以接受的。還要注意的是，在所有對(duì)話框中，快捷菜單和菜單按鈕都是可以接受的。二級(jí)對(duì)話框不要使用菜單欄，但可以使用菜單按鈕。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第9頁。l不要在作為二級(jí)窗口的對(duì)話框中使用標(biāo)題欄圖標(biāo)*標(biāo)題欄圖標(biāo)用于區(qū)別主窗口和二級(jí)窗口。

l不要在任務(wù)欄上顯示作為二級(jí)窗口的對(duì)話框*注意，單擊主窗口的的任務(wù)欄圖標(biāo)也將激活二級(jí)窗口。

l對(duì)話框中使用下頁圖所示的頁面布局和間距。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第9頁。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第10頁。l對(duì)于相似的對(duì)話框，使用控件位置來強(qiáng)調(diào)其相似性。如果意義相同的同一控件出現(xiàn)在一些相似的對(duì)話框中，那么它應(yīng)該顯示在相同的位置。另一方面，應(yīng)避免將可能會(huì)產(chǎn)生混淆的不同控件放在同一位置。

l對(duì)非模式對(duì)話框最好使用可停放的對(duì)話框可停放對(duì)話框在功能上與非模式對(duì)話框是等效的，但其位置設(shè)置更為靈活。

l策略地設(shè)置輸入焦點(diǎn)將最初的輸入焦點(diǎn)設(shè)置在最可能首先使用的控件上。

l在對(duì)話框標(biāo)題文本中不要出現(xiàn)省略號(hào)例如，作為選擇”打印選項(xiàng)…”命令結(jié)果而顯示地對(duì)話框的標(biāo)題應(yīng)該為”對(duì)于選項(xiàng)”。但是，表示命令正在執(zhí)行過程中菜單對(duì)話框（如”連接到Internet…”對(duì)話框）是一種例外情況。

l為所有可處理訪問鍵的控件分配訪問鍵*訪問鍵可以使用戶的手保持在鍵盤上，從而使訪問程序更加方便。您可以直接在其標(biāo)題中為諸如命令按鈕、單選按鈕、復(fù)選框等控件分配訪問鍵。通過提供靜態(tài)文本標(biāo)簽或帶有訪問鍵、在Tab順序上先于控件的組框，您可以為諸如編輯框、列表框、組合框等控件分配訪問鍵。在其他情況下不要為組框分配訪問鍵–這會(huì)使人產(chǎn)生混淆?！贝_定”按鈕沒有訪問鍵，因?yàn)樵谧鳛槟J(rèn)按鈕時(shí)，它通過提Enter鍵來選定的。”取消”按鈕也沒有訪問鍵，因?yàn)镋sc鍵預(yù)覽清除模式對(duì)話框。如果可能，避免使用小寫的g、j、p、q或y作訪問鍵，也避免使用這些字母前后的字母作為訪問鍵。下劃線不能與這些字母的下行字母分開。當(dāng)然，訪問鍵必須是唯一的。

l避免使用粗體文本盡量少使用粗體文本。在Windows3.1的對(duì)話框中，粗體文本用于在舊式的視頻硬件上繪制被禁用的文本（即抖動(dòng)的灰色文本）。因?yàn)楝F(xiàn)在的視頻硬件可以繪制沒有抖動(dòng)的灰色文本，所以Windows為了使外觀更加清潔，現(xiàn)在Windows在對(duì)話框中使用正常文本。粗體文本僅用于強(qiáng)調(diào)。對(duì)于大多數(shù)對(duì)話框不要粗體文本。

l提供環(huán)境敏感的幫助對(duì)于復(fù)雜的對(duì)話框，應(yīng)該為整個(gè)對(duì)話框提供環(huán)境敏感的幫助（通過幫助按鈕或F1鍵訪問），或者為個(gè)別控件提供控件特定的幫助（通過”這是什么？”按鈕或Shift＋F1鍵來訪問），或者同時(shí)提供這兩種幫助。

1.3.1.12.對(duì)話框的主要命令按鈕

l將主命令按鈕與對(duì)話框主體分開*主命令按鈕包括像”確定”、”取消”、”關(guān)閉”、”幫助”、”停止”、”隱藏”，以及其他相關(guān)按鈕的等命令按鈕。這種分開使主命令按鈕更易于查找和識(shí)別。

l認(rèn)真選擇對(duì)話框的方向在西方文化中，人們習(xí)慣于從左到右、從上到下進(jìn)行閱讀，因此，將主命令按鈕靠底部或右邊放置更容易被發(fā)現(xiàn)。您應(yīng)該選擇對(duì)話框的外觀比例與屏幕的外觀比例（通常高與寬的比例為3：4）相似的方向。這將使對(duì)話框的外觀看起來更加舒服，并且更易于在屏幕上進(jìn)行定位。如果按鈕具有不同的大小，那么可以將它們放在對(duì)話框菜單底部。當(dāng)不能確定時(shí)，也可以將按鈕放在底部，因?yàn)檫@種定位方式最為常見，也更易于閱讀。

l將排列在底部的主命令按鈕右對(duì)齊右對(duì)齊主命令按鈕適合從左到右的閱讀習(xí)慣。當(dāng)只有一個(gè)主命令按鈕時(shí)，您或許希望例外地將其居中放置。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第10頁。右對(duì)齊主命令按鈕網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第11頁。l避免使用多行或多列的主命令按鈕多行或多列的主命令按鈕對(duì)用戶是一個(gè)打擊。如果有許多主命令按鈕，那么注意，通常在右邊排成一列與在底部排成一行相比可以放置更多的按鈕。另外，您可以考慮使用命令菜單。如果必須使用很多按鈕，那么注意使用多行別使用多列的效果好。

l對(duì)模式對(duì)話框，通常提供”確定”和”取消”按鈕*要使用對(duì)話框，用戶需要能夠方便地識(shí)別前進(jìn)（使用”確定”按鈕）和后退（使用”取消”按鈕）的方式。您可以使用更明確的按鈕代替”確定”按鈕，但絕對(duì)不要在模式對(duì)話框中替換”取消”按鈕，除非用”停止”來表明正在進(jìn)行的操作無法取消。

l對(duì)于非模式對(duì)話框或或作為主窗口的對(duì)話框，提供”關(guān)閉”按鈕而不提供”確定”和”取消”按鈕*將”確定”和”取消”按鈕用于非模式對(duì)話框或作為主窗口的對(duì)話框可以使對(duì)話框看起來像是模式對(duì)話框。而且，當(dāng)用于非模式環(huán)境中時(shí)，”確定”和”取消”時(shí)沒有什么意義的。使用”關(guān)閉”按鈕可以消除這種混淆。

l通常將”確定”按鈕排第一，”取消”其次，”幫助”最后*”確定”或其等價(jià)按鈕通常作為第一個(gè)主命令按鈕?！比∠卑粹o應(yīng)該位于”確定”的右邊或下面。將”確定”和”取消”按鈕放在一起?！睅椭卑粹o應(yīng)該時(shí)最后一個(gè)按鈕。如果沒有”確定”按鈕，那么應(yīng)該將”取消”按鈕放在”幫助”按鈕的前面。這可以使主命令按鈕更易于查找和識(shí)別。

l確?！比∠卑粹o真正用于取消操作*當(dāng)取消時(shí)，程序的狀態(tài)欄應(yīng)該與之前顯示的模式對(duì)話框完全相同。如果不是這樣，那么應(yīng)該用”停止”按鈕來代替”取消”按鈕。模式對(duì)話框中的”取消”按鈕應(yīng)該與標(biāo)題欄中的”關(guān)閉”按鈕效果相同。而屬性表是個(gè)例外，因?yàn)椤比∠卑粹o不會(huì)取消已經(jīng)應(yīng)用的更改。

1.3.1.13.屬性表和屬性頁

l讓屬性頁獨(dú)立工作避免使一個(gè)屬性頁的行為或操作受其他屬性頁的限止。用戶不可能發(fā)現(xiàn)屬性頁之間的這種獨(dú)立關(guān)系。在屬性頁的使用順序方面應(yīng)該沒有限止。用戶應(yīng)該能夠隨時(shí)查看任意的屬性頁。

l屬性頁的布局相互獨(dú)立一些屬性頁通常不會(huì)占用同樣大小的空間。占用空間較小的屬性頁應(yīng)該與最大的屬性頁的布局的格式方式不同，因?yàn)閷?huì)產(chǎn)生額外的空間（見下圖）。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第11頁。屬性頁的布局保持獨(dú)立，避免居中。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第12頁。l用屬性表代替使用帶選項(xiàng)卡的對(duì)話框使用屬性表而不使用帶選項(xiàng)卡的對(duì)話框除了具有一致性之外，沒有什么明顯的實(shí)用性優(yōu)勢(shì)。另外，對(duì)于實(shí)際顯示對(duì)象屬性的對(duì)話框使用屬性表，而對(duì)于其他用途，所有帶選項(xiàng)卡的對(duì)話框。

l對(duì)屬性顯示總采用屬性表，即使僅有一個(gè)頁*采用屬性表能夠明確告訴用戶查看的使屬性而不是一般的對(duì)話框。屬性表有一個(gè)”應(yīng)用”按鈕來幫助用戶測(cè)試設(shè)置。

l絕對(duì)不要使用兩行以上的標(biāo)簽*最好使用一行標(biāo)簽，但兩行也是可接受的，兩行以上就太多了，可用級(jí)連屬性設(shè)置或多個(gè)對(duì)話框代替。

l總為屬性提供”應(yīng)用”按鈕再說一次，提供”應(yīng)用”按鈕幫助用戶對(duì)設(shè)置進(jìn)行測(cè)試。

l對(duì)顯示屬性的屬性表總是在其標(biāo)題中寫上”屬性”一詞和對(duì)象的名稱*請(qǐng)注意，不是所有的屬性表都是用來顯示屬性的。

l總將命令按鈕放在右邊*適用于所有頁的命令按鈕必須置于標(biāo)簽頁區(qū)域的外面，而僅適用于單個(gè)頁的命令按鈕必須置于該標(biāo)簽頁的里面。

1.3.1.14.向?qū)?/p>

l對(duì)高級(jí)的、復(fù)雜的或不常用的任務(wù)使用向?qū)驅(qū)?duì)非常高級(jí)或復(fù)雜的任務(wù)十分有用，省去了用戶許多麻煩的操作。當(dāng)向?qū)в糜诓怀Ｓ玫娜蝿?wù)時(shí)，其效果最好。對(duì)常用任務(wù)使用向?qū)t顯得大而不當(dāng)。

1.3.1.15.控件

l盡量采用標(biāo)準(zhǔn)控件盡可能采用標(biāo)準(zhǔn)控件（6個(gè)最早的控件和新的Win32常用控件）。采用非標(biāo)準(zhǔn)控件的程序與絕大多數(shù)Windows程序看起來不一致。只用完全合理時(shí)才使用自定義控件。

l定制標(biāo)準(zhǔn)控件時(shí)要小心改變標(biāo)準(zhǔn)控件的標(biāo)準(zhǔn)外觀或行為時(shí)一定要小心，這是個(gè)常常出錯(cuò)的地方。

l將無效控件置為不可用*將不適用于當(dāng)前程序狀態(tài)的控件置為不可用。

l取消不必要滾動(dòng)條盡量使控件的尺寸足夠大，避免使用滾動(dòng)條。

1.3.1.16.命令按鈕

l采用最小的寬度和標(biāo)準(zhǔn)的高度帶文字的命令按鈕應(yīng)該采用50個(gè)對(duì)話單位（75個(gè)像素點(diǎn)）的最小寬度、14個(gè)對(duì)話單位(21個(gè)像素點(diǎn))的標(biāo)準(zhǔn)高度。盡量將不同大小的帶文字命令按鈕的個(gè)數(shù)控制在兩個(gè)以內(nèi)。對(duì)父窗口拖動(dòng)（owner-draw）按鈕或無文字的按鈕（如”…”），其大小可以任意設(shè)置，原則是使命令按鈕外觀簡(jiǎn)樸一致。高度大于14個(gè)對(duì)話單位(21個(gè)像素點(diǎn))的按鈕看起來不夠?qū)I(yè)。盡管不限制命令按鈕的最大寬度，但寬度超過200個(gè)對(duì)話單位的按鈕使不妥當(dāng)?shù)?。?qǐng)參閱下圖所示關(guān)于命令按鈕的實(shí)例。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第12頁。命令按鈕大小示例網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第13頁。l針對(duì)國(guó)際化適當(dāng)加寬按鈕盡管50個(gè)對(duì)話單位（75個(gè)像素點(diǎn)）的寬度是適合英語文字的最小寬度，但對(duì)需要針對(duì)其他語言進(jìn)行本地化的程序來說，可能就太小了。對(duì)于需要翻譯為其他語言的程序，將命令按鈕的最小寬度定為60個(gè)對(duì)話單位可能更適合。

l將無效按鈕置為不可用，以取消報(bào)錯(cuò)*絕對(duì)不要使可用的按鈕僅產(chǎn)生一條出錯(cuò)信息。

l總采用省略號(hào)來表示需要更多信息*命令中的省略號(hào)表示執(zhí)行命令時(shí)需要更多信息，而不是簡(jiǎn)單的確認(rèn)。省略號(hào)并不表示一定會(huì)出現(xiàn)對(duì)話框。

l絕對(duì)不要指定雙擊行為*用戶意料不到命令按鈕會(huì)響應(yīng)雙擊，因此不可能發(fā)現(xiàn)這樣的行為。

命令按鈕大小使用Window標(biāo)準(zhǔn)75×21象素。一般情況下，”確定”和”取消”按鈕的屬性設(shè)置如下：

btnOk:TButton

Caption=‘確定’

Default=True

ModalResult=mrOk

end

objectbtnCancel:TButton

Cancel=True

Caption=‘取消’

ModalResult=mrCancel

End

“確定”和”取消”按鈕一般被映射為Enter鍵和Esc鍵，因此不應(yīng)該對(duì)它們指定訪問鍵，除此以外的命令按鈕都應(yīng)該指定一個(gè)訪問鍵。如下圖：網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第13頁。主命令按鈕在下如果主命令按鈕在右上角，應(yīng)該布置為這樣。主命令按鈕在上網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第14頁。如有其他不明，請(qǐng)參照命令按鈕。

如果設(shè)計(jì)期間未指定”ModalResult”，注意一定要在按鈕的”O(jiān)nClick”事件代碼中為”ModalResult”賦值。

1.3.1.17.復(fù)選框

l用復(fù)選框開關(guān)選項(xiàng)，用單選按鈕改變模式*用復(fù)選框進(jìn)行選項(xiàng)的開關(guān)操作是很有效的，但如果用來將模式改變?yōu)榱硗庖环N狀態(tài)就難免讓人迷惑了。例如，可用一個(gè)復(fù)選框來表示是否顯示工具欄，但若用復(fù)選框來切換打印機(jī)的橫向模式和縱向模式就會(huì)使人糊涂，對(duì)橫向和縱向模式應(yīng)該用一組單選按鈕代替。

l避免一組復(fù)選框中選項(xiàng)個(gè)數(shù)超過8個(gè)應(yīng)該考慮用復(fù)選框列表代替，它占用的空間更少，但復(fù)選框列表需要滾動(dòng)時(shí)使用就稍稍麻煩了。盡管控件足夠或保持與同一窗口中其他復(fù)選框一致時(shí)，采用復(fù)選框時(shí)可取的，但大于8個(gè)左右的復(fù)選框就未免太多了。

l考慮將修改組的復(fù)選框置于應(yīng)該分組框中這樣的分組使得復(fù)選框之間的關(guān)系更為明顯。

l寧可豎向?qū)R雖然更合適的情況下采用橫向?qū)R或直角對(duì)齊也是可以接受的，但豎向?qū)R的一組復(fù)選框更易于瀏覽。

1.3.1.18.單選按鈕

l避免一組單選按鈕中的選項(xiàng)個(gè)數(shù)超過8個(gè)考慮用列表或組合框代替，它們占用的空間更少，但要記住控件使用更麻煩些。盡管控件足夠或保持與同一窗口中其他單選按鈕一致時(shí)，采用單選按鈕是可取的，但多于8個(gè)的單選按鈕未免太多了。

l避免使用單選按鈕進(jìn)行開/關(guān)或是/否選擇用復(fù)選框代替。

l總將單選按鈕置于一個(gè)分組框中*由于單選按鈕是一組相互排斥的選項(xiàng)，所以分組框使選擇更為明確。

l寧可豎向?qū)R雖然更合適的情況下采用橫向?qū)R或直角對(duì)齊也是可以接受的，但豎向?qū)R的一組單選按鈕更易于瀏覽。

1.3.1.19.組合框

l總給組合框提供一個(gè)標(biāo)簽*必須用標(biāo)簽來表明組合框的用途。

l使組合框的下拉列表最少有5行長(zhǎng)少于5行的列表就沒有可用的滑塊，不易于滾動(dòng)。請(qǐng)注意，如果組合框沒有足夠的列項(xiàng)來填滿列表，那么將自動(dòng)縮短列表的長(zhǎng)度。

l避免組合框的列項(xiàng)少于4考慮用單選按鈕代替，它們雖然多占空間，但更易于操作。如果空間更為重要或?yàn)榱吮３峙c同一窗口中的其它組合框一致時(shí)，采用組合框則更為可取。

網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第15頁。1.3.1.20.編輯框

l總給編輯框提供一個(gè)標(biāo)簽*必須用標(biāo)簽來標(biāo)明編輯框的用途。如果標(biāo)簽在左邊，將標(biāo)簽文字與編輯框文本垂直對(duì)齊。

l避免有輸入限制的編輯框?qū)⒕庉嬁蛴糜谟脩魧?duì)任何文本的輸入或數(shù)字編輯框用于數(shù)字的編輯。對(duì)于輸入受限的情況，使用其他的控件，如組合框、列表、滑塊和微調(diào)框。對(duì)于日期和時(shí)間，使用日期和時(shí)間拾取控件。

l用微調(diào)框和瀏覽按鈕使編輯框可視微調(diào)框和瀏覽按鈕是簡(jiǎn)單的可視機(jī)制，它們幫助用戶在編輯框中進(jìn)行有效的輸入。避免讓用戶必須輸入。僅對(duì)數(shù)字編采用帶微調(diào)框的編輯框，對(duì)于文本，使用組合框代替。

l按期望輸入來設(shè)置編輯框的寬度編輯框的寬度是對(duì)期望輸入的可視提示。例如，如果用戶是輸入地址，兩個(gè)字符寬的State字段明顯暗示用戶輸入兩個(gè)字符的州名縮寫。如果期望的輸入沒有特別的大小，就選擇與其他編輯框或控件一致的寬度。

l總采用數(shù)字編輯框用于數(shù)字輸入*當(dāng)用戶在數(shù)字字段中輸入非數(shù)字文本時(shí)，不應(yīng)該有任何出錯(cuò)消息。

1.3.1.21.滑塊

l總給滑塊提供一個(gè)標(biāo)簽*必須用標(biāo)簽來標(biāo)明滑塊的用途。而且，滑塊還應(yīng)該有標(biāo)明高、低值意義和當(dāng)前選擇的標(biāo)簽–當(dāng)然都不帶冒號(hào)。

1.3.1.22.靜態(tài)文本

l左對(duì)齊靜態(tài)文本標(biāo)簽左對(duì)齊使得標(biāo)簽外觀更有條理，且易于瀏覽。

l寧可將靜態(tài)文本標(biāo)簽置于相關(guān)控件的左邊，而不是上面這樣對(duì)齊使標(biāo)簽更易于被發(fā)現(xiàn)，且方便了標(biāo)簽和控件的瀏覽。很明顯，長(zhǎng)控件是例外情況，如列表視圖、樹形視圖（Tree）和多行編輯框。

l總在用于標(biāo)識(shí)控件的靜態(tài)文本標(biāo)簽后帶上冒號(hào)*使用冒號(hào)明顯表示為控件標(biāo)簽的文本。為控件提供附加信息的標(biāo)簽不應(yīng)該有冒號(hào)，如用來解釋滑塊控件的標(biāo)簽。標(biāo)簽也可作為屏幕讀出器的輸入信息。

l對(duì)非標(biāo)簽文本總用只讀編輯框*只讀編輯框允許用戶將文本復(fù)制到剪貼板上，并在文本比控件長(zhǎng)時(shí)可進(jìn)行滾動(dòng)。

l不要把靜態(tài)文本置于凸起的邊界上*在凸起邊界上的靜態(tài)文看起來像按鈕，網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第16頁。因而用戶會(huì)試圖單擊它。

1.3.1.23.列表框

l總給列表框提供一個(gè)標(biāo)簽*必須用標(biāo)簽來標(biāo)明列表框的用途。

l使列表框至少5行長(zhǎng)少于5行的列表沒有滑塊，不便于滾動(dòng)。如果列表框沒有滾動(dòng)條，那么使用一個(gè)更短的列表框也是可以接受的。

l對(duì)多個(gè)選擇考慮采用復(fù)選框復(fù)選框列表可以突出其多個(gè)選擇的能力。如果不能接受復(fù)選框列表，那么可以采用多選列表，并用靜態(tài)文本表示選項(xiàng)個(gè)數(shù)，清楚指明可進(jìn)行多項(xiàng)選擇。

l對(duì)多選列表考慮提供”全部選中”和”全部取消選中”命令由于希望全部選中或全部取消使常見的事情，所以這兩個(gè)命令方便了用戶進(jìn)行多項(xiàng)選擇。

1.3.1.24.列表視圖

l總給列表視圖提供一個(gè)標(biāo)簽*必須用標(biāo)簽來標(biāo)明列表視圖的用途。

l使列表視圖至少5行長(zhǎng)少于5行的列表視圖沒有滑塊，不便于滾動(dòng)。如果列表視圖沒有滾動(dòng)條，那么使用一個(gè)更短的列表視圖也是可以接受的。

l僅在列表可排序時(shí)采用可單擊的表頭*可單擊的表頭只應(yīng)用于排序。首次單擊時(shí)應(yīng)按正序?qū)α斜磉M(jìn)行排序，而第二次單擊時(shí)按反序進(jìn)行排列。

l對(duì)列項(xiàng)大約超過30的列表視圖總使其可進(jìn)行排序*用戶能夠?qū)α斜磉M(jìn)行排序方便了對(duì)信息的查找。

1.3.1.25.滾動(dòng)條

l滾動(dòng)條僅用于滾動(dòng)*使用滑塊或微調(diào)框來設(shè)置數(shù)值。

l使?jié)L動(dòng)條足夠長(zhǎng)，保證有可用的滑塊。沒有滑塊的滾動(dòng)條不便于使用。

1.3.1.26.分組框

l利用分組框分組相關(guān)控件盡管分組框通常是用于單選按鈕的分組，但也可用于任何控件的分組。避免使用只有一個(gè)控件的分組框，除非是為了保持與同一對(duì)話框中其他分組框一致。

l考慮采用靜態(tài)線或文本標(biāo)簽來代替分組框分組框多時(shí)要占去許多空間。如果空間緊張的話，一個(gè)替代分組控件的好辦法是同時(shí)采用靜態(tài)文本標(biāo)簽和靜態(tài)線。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第14頁。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第15頁。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第16頁。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第17頁?？紤]采用靜態(tài)文本標(biāo)簽和靜態(tài)線代替分組框網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第17頁。l不要在分組框標(biāo)簽的后面使用冒號(hào)*分組框標(biāo)簽的意思明白，使用冒號(hào)完全沒有必要且讓人糊涂。網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第18頁。1.3.1.27.菜單

l總用單個(gè)單詞作為菜單標(biāo)題*菜單欄上多個(gè)單詞的菜單標(biāo)題看起來像多個(gè)菜單標(biāo)題。

l不要在菜單欄的文本間留有空隙*不一至的菜單欄文本既無用，又難看。

l避免占多行的菜單欄*盡管將父窗口縮小到足夠窄時(shí)，任何菜單欄都要占用幾行，當(dāng)要避免正常使用時(shí)因菜單項(xiàng)都而占用幾行的菜單欄。

l保持菜單穩(wěn)定*將無效菜單置為不可用，而不要?jiǎng)h除它們。但是，對(duì)整個(gè)程序?qū)嵗紵o效的菜單，就應(yīng)該刪除。

l合理安排菜單項(xiàng)的順序?qū)⑾嚓P(guān)菜單項(xiàng)組合在一起。重要的命令應(yīng)該位于菜單的頂部，而不重要的菜單則位于菜單的底部。

l將無效菜單置為不可用來代替報(bào)錯(cuò)*菜單絕不應(yīng)該有僅產(chǎn)生出錯(cuò)消息的可用命令。

l分配訪問鍵*訪問鍵使用戶可以手不離開鍵盤進(jìn)行操作，并提供程序的可訪問性。盡可能避免用小寫字母g、j、p、q、y或單詞中與它們靠近的字母來分配訪問鍵，因?yàn)橄聞澗€與下一行的字母不好區(qū)分。當(dāng)然，一個(gè)菜單中的訪問鍵應(yīng)該是唯一的。

l總采用省略號(hào)來表示需要更多信息*命令中的省略號(hào)表示執(zhí)行時(shí)需要更多的信息，而不是簡(jiǎn)單確認(rèn)。省略號(hào)不表示一定有對(duì)話框出現(xiàn)。

l使用標(biāo)準(zhǔn)菜單避免不提供”文件”、”編輯”和”幫助”菜單。由于這些是標(biāo)準(zhǔn)菜單，所以用戶會(huì)期望它們出現(xiàn)。例如，期望在”文件”菜單中發(fā)現(xiàn)像”打印”和“退出”這樣的命令，雖然這些命令可能與”文件”無關(guān)。同樣，用戶期望在”編輯”菜單中發(fā)現(xiàn)”剪切”、”復(fù)制”和”粘貼”命令，至少要在”幫助”菜單中發(fā)現(xiàn)”關(guān)于”命令。

l統(tǒng)一放置”查找”和”選項(xiàng)”命令總將”查找”命令放在”編輯”菜單中，而有”工具”菜單時(shí)，總將”選項(xiàng)”置于其中，否則置于”查看”菜單中。

l用復(fù)選標(biāo)記來開關(guān)選項(xiàng)，用單選組來改變模式*用復(fù)選標(biāo)記進(jìn)行選項(xiàng)的開關(guān)操作是有效的，但如果用來將模式改變?yōu)榱硗庖环N狀態(tài)就難免讓人迷惑了。例如，可用一個(gè)復(fù)選標(biāo)記來表示是否顯示工具欄，但若用復(fù)選框來切換打印機(jī)的橫向模式和縱向模式就會(huì)使人糊涂，對(duì)橫向和縱向模式應(yīng)該用一個(gè)單選組來代替。

l不要使用多列的下拉菜單*多列增加了菜單不必要的復(fù)雜性。

l不要使用”Bang”（爆炸的聲音）菜單*Bang菜單是菜單欄上那些看起來像下拉菜單，但實(shí)際是選擇后立即執(zhí)行的命令，如”退出”！顯然，用戶希望菜單標(biāo)題就只是菜單，而不是命令。

l不要右對(duì)齊菜單標(biāo)題*這樣的菜單風(fēng)格陳舊且不易于使用。

1.3.1.28.上下文菜單

l考慮將上下文菜單作為冗余使用上下文才菜單不應(yīng)該是訪問命令的唯一方式。通常上下文菜單中的命令應(yīng)該在菜單欄中也提供，使用上下文菜單是為了提高訪問效率。

l避免在上下文菜單中包含快捷鍵應(yīng)該將快捷鍵分配在菜單欄中，上下文菜單的快速訪問是通過鼠標(biāo)進(jìn)行，而不是通過鍵盤。

1.3.1.29.工具欄

l保持工具欄穩(wěn)定*將無效的工具欄按鈕置為不可用，而不是將它刪除。但是，應(yīng)該考慮刪除用戶進(jìn)入一種模式用不到的整個(gè)工具欄。

l將無效命令置為不可用，而不是報(bào)錯(cuò)*工具欄絕不應(yīng)該包含只出現(xiàn)錯(cuò)誤消息的命令。

l對(duì)實(shí)用程序采用大工具欄按鈕好的使用程序工具欄常常與應(yīng)用程序的按鈕不同，其按鈕更簡(jiǎn)樸，更大。實(shí)用程序工具欄應(yīng)該只包含幾個(gè)帶有描述性文字和圖形的顯眼命令。

l對(duì)應(yīng)用程序采用可移動(dòng)的、可定制的工具欄，而對(duì)實(shí)用程序采用固定的工具欄應(yīng)用程序需要靈活的工具欄來支持其典型的使用方式。用戶使用實(shí)用程序的時(shí)間一般不長(zhǎng)，因而不需要定制工具欄。

l提供顯示或隱藏工具欄選項(xiàng)如果有多個(gè)工具欄，分別為它們提供顯示或隱藏的選項(xiàng)。

l總使用工具提示*工具提示幫助用戶了解工具欄按鈕的作用。

1.3.1.30.工具提示

網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第19頁。l用工具欄的工具提示來提供信息，但要簡(jiǎn)短避免提示很明顯的事情?？紤]采用省略號(hào)來表示執(zhí)行命令時(shí)需要更多信息。如果該命令已分配有快捷鍵，則顯示該快捷鍵。

l使工具提示文本成為高級(jí)用戶的媒介工具提示用于簡(jiǎn)短的識(shí)別和提醒，而不是用來教學(xué)。

l用工具提示顯示有用信息不僅僅可在工具欄上使用工具提示，它的使用簡(jiǎn)單，能夠向用戶提供有用信息。但不可濫用–工具提示太多也就失去了其價(jià)值。不要對(duì)命令按鈕會(huì)靜態(tài)文本這樣的控件使用工具提示。

l不要自動(dòng)消去包含許多文字的工具欄提示默認(rèn)時(shí)，10秒種后工具提示將自動(dòng)消去。如果工具提示的文字很多，10秒鐘對(duì)用戶來說就看不完了。

1.3.1.31.文本

l避免不必要的縮寫詞要么給文本更多的空間，要么改寫文本使其占用更少的空間，縮寫詞使文本不易理解。

l避免不必要的大寫字母文本除非只去首字母構(gòu)成的縮寫詞，否則不要用字母全為大寫的單詞，這樣的單詞看起來像在沖用戶大喊大叫一樣。

l避免復(fù)雜的標(biāo)號(hào)盡量采用簡(jiǎn)單的標(biāo)點(diǎn)，如句號(hào)、逗號(hào)、問號(hào)，以及破折號(hào)。避免使用分號(hào)、感嘆號(hào)、圓括號(hào)、括號(hào)，等等。

l采用一致的大小寫規(guī)則*對(duì)窗口標(biāo)題、菜單、命令按鈕、列標(biāo)題屬性頁選項(xiàng)卡以及工具欄提示文字采用與書題一樣的大小寫規(guī)則，而對(duì)于標(biāo)題、單選按鈕、復(fù)選框、分組框和菜單項(xiàng)幫助中的文本采用與句子一致的大小寫規(guī)則。（對(duì)于標(biāo)題，除了不是標(biāo)題開頭和結(jié)尾的冠詞和介詞外，每個(gè)單詞的第一個(gè)字母大小。對(duì)于句子，每個(gè)句子的第一個(gè)單詞以及通常大寫的單詞–如專有名詞的首字母大寫。）

l避免不好的背景將文本放在實(shí)地、顏色適中的背景上，確保在文本和背景之間存在良好的對(duì)比。

l避免冒犯性語言避免激烈的詞語，如fatal（致命的）、execute（執(zhí)行）、kill（殺死、毀掉）、terminate（終止）、和abort（中止）。

1.3.1.32.消息框

l仔細(xì)選擇消息框的類型采用帶”確定”按鈕的信息消息框向用戶提供有關(guān)網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第20頁。命令結(jié)果的信息。采用帶”是”、”否”，以及可能”取消”按鈕的警告消息框在繼續(xù)進(jìn)行前需要用戶輸入的情形下告誡用戶。采用危急消息框通知用戶進(jìn)行工作前需要修改一個(gè)錯(cuò)誤。

l不要使用疑問消息框類型*不再推薦對(duì)消息框使用疑問標(biāo)記符（MB_ICONQUESTION），因?yàn)樗赪indows98后一致用來表示上下文修改幫助。

l避免不必要的消息框不要用出錯(cuò)消息來報(bào)告正常行為，而應(yīng)該用來報(bào)告不正?；虿黄谕慕Y(jié)果。不要對(duì)很容易恢復(fù)的操作進(jìn)行確認(rèn)。

l問用是/否回答的問題問用戶問題時(shí)，采用”是”和”否”按鈕代替”確定”和”取消”按鈕，這樣使問題易于理解。與對(duì)話框中不一樣，”確定”和”取消”按鈕很少同時(shí)用在消息框中。

l確保消息框選項(xiàng)按鈕與文本一致例如絕不要用”是”和”否”來作為非提問消息的響應(yīng)。同樣，不要使用多個(gè)效果相同的選項(xiàng)按鈕。例如，除非有不同的操作結(jié)果，否則不要同時(shí)提供”否”和”取消”按鈕。”否”按鈕應(yīng)該執(zhí)行操作，而”取消”應(yīng)該取消操作。

l仔細(xì)選擇默認(rèn)按鈕將最安全的或最常用的選項(xiàng)作為默認(rèn)按鈕。

l避免無用的幫助除非提供真正有用的附加信息，否則不要提供”幫助”按鈕。不要附加帶無用幫助信息的沒意義的消息框。

l對(duì)危急錯(cuò)誤考慮采用系統(tǒng)模式消息框采用系統(tǒng)模式消息框向用戶提示嚴(yán)重的、可能造成破壞性的、急需注意的錯(cuò)誤。系統(tǒng)消息框除了有WS_EX_TOPMOST樣式外，與應(yīng)用程序模式對(duì)話框完全一樣。與在16位Windows中不一樣的是，系統(tǒng)模式不影響用戶與其他程序的交互。

1.3.1.33.錯(cuò)誤消息

l避免錯(cuò)誤號(hào)除非這個(gè)錯(cuò)誤號(hào)對(duì)用戶真正有用，否則不要給出錯(cuò)誤號(hào)。

l避免責(zé)怪用戶避免在出錯(cuò)消息文字中出現(xiàn)單詞you（你）或your（你的）。如果需要，當(dāng)指用戶操作時(shí)使用被動(dòng)語氣。采用與”錯(cuò)誤發(fā)生了”等價(jià)的表達(dá)，比采用與”你捅漏子了”等價(jià)的表達(dá)要好得多。

l避免敵對(duì)性語言避免在錯(cuò)誤消息文字中使用詞語bad（糟糕的、壞的）、caution（小心）、error（錯(cuò)誤）、fatal（致命的）、illegal（非法）、invalid（無效）和warning（警告），而應(yīng)該使用更具體的描述性詞語。并且應(yīng)該盡量網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第21頁。解釋到底是什么出了錯(cuò)。

l在出錯(cuò)消息文字中使用平實(shí)的語句表達(dá)要簡(jiǎn)短、清楚、協(xié)調(diào)、具體。除非縮寫詞，否則不要使用全部大寫的單詞，那樣的單詞看起來像在沖用戶大喊大叫一樣。使用完整的句子和一般的現(xiàn)在或過去時(shí)態(tài)。避免縮寫詞。

l避免在用戶錯(cuò)誤消息文字中裝做有趣或高人一等用戶并不覺得錯(cuò)誤消息有趣，故裝幽默并不能被廣泛接受。

l允許用戶壓制非危急的錯(cuò)誤消息對(duì)經(jīng)常出現(xiàn)的非危急錯(cuò)誤，向用戶提供一個(gè)壓制該錯(cuò)誤消息的選項(xiàng)。

1.3.1.34.字體

字體統(tǒng)一使用以下設(shè)置：

Charset=GB2312_CHARSET

Name=‘宋體’

Size=9

Color=clWindowText

Style=[]

字符集不要使用ANSI_CHARSET或DEFAULT_CHARSET，否則可能導(dǎo)致不同的操作系統(tǒng)下字符集不一致。

l尊重用戶的字體選擇*Windows允許用戶為標(biāo)題欄、菜單、消息框和工具提示選擇字體。及時(shí)處理WM_SETTINGCHANGE消息以根據(jù)設(shè)置迅速而安全地改變字體。

l避免讓人分心地字體一般說來，應(yīng)避免使用Arial、Tahoma和MSSansSerif之外的字體。Verdana、TrebuchetMS和CenturyGothic也適合于輕微差別的外觀。即使文檔中的截線字體很不錯(cuò)，但界面中的任何截線字體都被認(rèn)為是讓人分心的。除了提示用戶輸入或模擬打字機(jī)外，不要采用等寬字體。

l避免使用粗體和斜體用粗體來吸引人的注意，用斜體表示著重，但要還少使用。

l避免混合字體任何不包含文檔的窗口最多包含兩種不同的字體。

1.3.1.35.顏色

l使用系統(tǒng)顏色*尊重用戶的顏色選擇，避免使用固定顏色。不要強(qiáng)迫用戶使網(wǎng)頁界面設(shè)計(jì)規(guī)范全文共25頁，當(dāng)前為第22頁。用您選擇的顏色。避免讓人分心的文本顏色，通常是黑色之外任何顏色，對(duì)文本使用系統(tǒng)顏色COLOR_BTNTEXT或COLOR_WINDOWTEXT。在白色（COLOR_WINDOW）背景上使用黑色（COLOR_WINDOWTEXT）文字是完全正確的。及時(shí)處理WM_SYSCOLORCHANGE消息以根據(jù)設(shè)置迅速而完全地改變顏色。

l