用戶界面設(shè)計(jì)規(guī)范軟件用戶界面的重要性不言而喻。成功的Web應(yīng)用軟件必須滿足以下三個(gè)要素：符合用戶需求的功能、易于使用的界面、美觀的界面設(shè)計(jì)。其中，用戶界面設(shè)計(jì)是關(guān)鍵工作之一，而不是次要工作。本文旨在以用戶界面(UI)設(shè)計(jì)理念和用戶操作習(xí)慣為原則，提出WEB應(yīng)用軟件用戶界面設(shè)計(jì)的原則、標(biāo)準(zhǔn)、約束和界面元素等詳細(xì)要求，以保證界面設(shè)計(jì)的一致性、美觀性、擴(kuò)展性、安全性等。同時(shí)，本文規(guī)范界面(UI)開發(fā)人員在設(shè)計(jì)、制作、開發(fā)用戶界面行為，避免頁面效果不統(tǒng)一、不協(xié)調(diào)等問題。本規(guī)范適用于Web應(yīng)用系統(tǒng)用戶界面(UI)的設(shè)計(jì)、開發(fā)和測(cè)試評(píng)估工作。具體范圍包括Web軟件用戶界面(UI)設(shè)計(jì)原則、要素和具體細(xì)則內(nèi)容，以及頁面元素的應(yīng)用范圍、樣式等詳細(xì)定義。使用人員包括：界面設(shè)計(jì)人員、制作開發(fā)人員、界面測(cè)試評(píng)估人員。用戶界面是人與軟件系統(tǒng)進(jìn)行交互的接口，實(shí)現(xiàn)用戶與計(jì)算機(jī)之間的通信，以控制計(jì)算機(jī)或進(jìn)行用戶和計(jì)算機(jī)之間的數(shù)據(jù)傳送的系統(tǒng)部件，是軟件系統(tǒng)成功與否的一個(gè)很重要因素。本文所指的頁面，均基于1024×768的屏幕分辨率，并使用Pixel(像素)作為描述單位。參考資料包括《用戶界面設(shè)計(jì)--有效的人機(jī)交互策略(第三版)》、《Web軟件用戶界面設(shè)計(jì)指南》、《GUI設(shè)計(jì)禁忌》、《軟件人機(jī)界面設(shè)計(jì)》等。在頁面設(shè)計(jì)方面，我們應(yīng)該以用戶界面(UI)設(shè)計(jì)理念和用戶操作習(xí)慣為原則，盡可能地提高用戶體驗(yàn)。Web軟件的用戶界面設(shè)計(jì)應(yīng)該以易用性為首要考慮因素，始終從用戶操作的角度出發(fā)，最大限度地保證用戶界面的易用性。相比于網(wǎng)站頁面的設(shè)計(jì)，Web軟件用戶界面設(shè)計(jì)要求界面一致、美觀，即系統(tǒng)中的所有頁面應(yīng)在布局、樣式等達(dá)到統(tǒng)一。同時(shí)，為了降低開發(fā)和維護(hù)成本，開發(fā)者需要盡可能將頁面元素、布局、樣式和行為四大要素分離，實(shí)現(xiàn)頁面設(shè)計(jì)的復(fù)用性。在用戶界面設(shè)計(jì)方面，有幾個(gè)關(guān)鍵要點(diǎn)需要注意。首先，用戶界面應(yīng)該適合軟件功能，即界面與軟件功能相融洽的程度。其次，用戶界面中的所有元素應(yīng)該容易理解，沒有錯(cuò)誤文字或令人費(fèi)解的文字，圖標(biāo)按鈕的含義應(yīng)該直觀明了，最好圖標(biāo)加文字說明，界面結(jié)構(gòu)能夠清晰地反映工作流程，以便用戶按部就班地操作。此外，系統(tǒng)應(yīng)該能夠及時(shí)反饋信息，提示用戶操作的處理情況。還需要提供防錯(cuò)處理，包括對(duì)數(shù)據(jù)進(jìn)行校驗(yàn)功能，將在某些情況下不應(yīng)該使用的菜單項(xiàng)、按鈕變成灰色，提供用戶確認(rèn)對(duì)話框等。界面的總體布局應(yīng)當(dāng)有一定的邏輯性，最好能夠與工作流程吻合，元素放置布局應(yīng)當(dāng)整齊清爽。顏色的使用也應(yīng)該合理，不應(yīng)該使用過多數(shù)目的顏色，應(yīng)當(dāng)根據(jù)對(duì)象的重要性來選擇顏色，使用顏色時(shí)應(yīng)當(dāng)保持一致性。最后，同一軟件的用戶界面應(yīng)當(dāng)有一定程度的相似性，同類的界面元素應(yīng)當(dāng)有相同的視覺和相同的操作方式，風(fēng)格一致的界面可以減少用戶的記憶量、減少出錯(cuò)幾率、并且迅速積累操作經(jīng)驗(yàn)。3.8最少操作步驟（最高效率）為了提高工作效率，界面設(shè)計(jì)應(yīng)根據(jù)用戶需求，盡可能地減少操作步驟。3.9可復(fù)用為了提高質(zhì)量、開發(fā)效率和降低成本，應(yīng)該利用現(xiàn)成的界面組件。界面組件應(yīng)包括代碼、應(yīng)用示例和相關(guān)文檔。4界面設(shè)計(jì)原則用戶界面的設(shè)計(jì)需要考慮以下原則（按照重要程度高低進(jìn)行排列）。4.1以用戶為中心原則軟件是為用戶服務(wù)的，因此設(shè)計(jì)的界面應(yīng)該得到用戶的認(rèn)可。4.2界面美觀、合理、一致性原則一個(gè)軟件系統(tǒng)的所有界面應(yīng)采用統(tǒng)一的布局和風(fēng)格樣式，包括對(duì)齊、顏色、大小等。頁面布局要求結(jié)構(gòu)清晰、層次分明，頁面元素不應(yīng)過于擁擠，也不應(yīng)過于空曠。4.3操作易用性原則頁面應(yīng)具有很強(qiáng)的可操作性，符合用戶操作習(xí)慣，主要體現(xiàn)在以下幾個(gè)方面：簡(jiǎn)單易學(xué)、合理的錯(cuò)誤避免和糾正（如檢驗(yàn)、警告等）、靈活性（如提供快捷鍵、數(shù)字鍵盤錄入等）。4.4幫助引導(dǎo)性原則幫助是軟件系統(tǒng)必不可少的內(nèi)容，當(dāng)用戶不能進(jìn)行操作時(shí)，要提供幫助支持，正確地引導(dǎo)用戶進(jìn)行操作。4.5界面模板化、組件化原則為了快速開發(fā)和減少維護(hù)成本，同時(shí)也為了保持界面一致性，界面應(yīng)采用頁面模板和復(fù)用組件來定義。5界面設(shè)計(jì)一般性規(guī)范5.1.1合理性細(xì)則1.父窗口或主窗口的中心位置應(yīng)該在屏幕對(duì)角線焦點(diǎn)附近。2.子窗口位置應(yīng)該在主窗口的左上角或正中。3.重要的命令按鈕和使用頻率較高的按鈕應(yīng)該放在界面上顯眼的位置。4.頁面的尺寸應(yīng)該合適，界面元素不應(yīng)過于擁擠，邊界處需要留有一定的空間，也不可過于寬松，顯得零亂。5.界面元素需要一致的對(duì)齊方式，以避免參差不齊的視覺效果。6.同類的界面元素盡量保持大小一致，至少保持高度或?qū)挾鹊囊恢拢壿嬒嚓P(guān)的界面元素要就近放置，便于用戶操作。7.與正在進(jìn)行的操作無關(guān)的按鈕應(yīng)該被禁用（失去功能），但應(yīng)該顯示。8.對(duì)可能造成數(shù)據(jù)無法恢復(fù)的操作必須提供確認(rèn)操作對(duì)話框。9.對(duì)運(yùn)行過程中出現(xiàn)問題而引起錯(cuò)誤的，應(yīng)有提示。10.提示、警告或錯(cuò)誤說明應(yīng)該清楚、明了、恰當(dāng)。5.1.2協(xié)調(diào)性細(xì)則1.頁面長(zhǎng)寬應(yīng)接近黃金點(diǎn)比例，切忌長(zhǎng)寬比例失調(diào)或?qū)挾瘸^長(zhǎng)度。2)避免使用過長(zhǎng)的按鈕名稱，以免占用過多的界面空間。3)不要在空曠的界面上放置過大的按鈕，以保持界面整潔。4)在放置控件后，應(yīng)盡量避免出現(xiàn)大量空白區(qū)域，以充分利用界面空間。5)字體大小應(yīng)與界面大小相協(xié)調(diào)，通常使用宋體12px比較美觀。6)前景和背景色應(yīng)合理搭配，反差不宜過大，最好避免使用深色，如大紅、大綠等。常用顏色應(yīng)考慮使用Windows界面色調(diào)。7)如果使用其他顏色，主色應(yīng)柔和、具有親和力和吸引力，切勿使用刺眼的顏色。8)大型系統(tǒng)常用的主色有"R225,G225,B225″、"R239,G239,B239″、"R192,G192,B192″等。效果如圖所示。9)界面風(fēng)格應(yīng)保持一致，字體大小、顏色和字體應(yīng)相同，除非需要進(jìn)行藝術(shù)處理或有特殊要求。10)如果能夠提供給用戶自定義界面風(fēng)格，則更好，以便用戶自行選擇顏色、字體等。5.1.3.易用性細(xì)則1)常用按鈕應(yīng)支持快捷方式。2)完成同一功能或任務(wù)的元素應(yīng)放在集中位置，以減少鼠標(biāo)移動(dòng)的距離。3)將界面按功能劃分為局域塊，并應(yīng)提供功能說明或標(biāo)題。4)界面應(yīng)支持鍵盤自動(dòng)瀏覽按鈕功能，即按Tab鍵可自動(dòng)切換。5)界面上首先應(yīng)輸入的和重要信息的控件應(yīng)在Tab順序中靠前，并放在窗口上較醒目的位置。6)Tab鍵的順序應(yīng)與控件排列順序一致，通常從上到下，同時(shí)行間從左到右。7)同一界面上的控件數(shù)量最好不要超過10-15個(gè)（不包括LABEL控件），超過10-15個(gè)時(shí)可以考慮使用分頁界面顯示。8)分頁界面應(yīng)支持快速切換頁面，常用組合快捷鍵為Ctrl+Tab。9)默認(rèn)按鈕應(yīng)支持Enter鍵操作，即按Enter后可自動(dòng)執(zhí)行默認(rèn)按鈕對(duì)應(yīng)操作。10)可寫控件應(yīng)檢測(cè)到非法輸入后給出說明，并能自動(dòng)獲取焦點(diǎn)。5.1.4.健壯性細(xì)則1)最重要的是排除可能導(dǎo)致應(yīng)用程序非正常中止的錯(cuò)誤。2)應(yīng)盡可能避免用戶無意錄入無效數(shù)據(jù)。3)對(duì)可能導(dǎo)致嚴(yán)重后果的操作應(yīng)有補(bǔ)救措施，以便回到原來的正確狀態(tài)。4)應(yīng)對(duì)一些特殊符號(hào)的輸入、與系統(tǒng)使用的符號(hào)相沖突的字符進(jìn)行判斷，并阻止用戶輸入該字符。常見的特殊字符有：；'",`'："["{、\|}]+=)-(_*&&^%$#@！~,.。?/以及空格。5)最好支持可逆性處理，以便取消一些系列操作。6)在輸入有效字符之前，應(yīng)阻止用戶進(jìn)行只有輸入之后才可進(jìn)行的操作。7.1.5常用菜單命名應(yīng)結(jié)合業(yè)務(wù)，使用與業(yè)務(wù)相關(guān)的動(dòng)賓短語，如：辭退人員、錄用人員等。層次樹的層次不能太深，以不超出4層為標(biāo)準(zhǔn)。名稱字?jǐn)?shù)不應(yīng)超過10個(gè)字。分組菜單要根據(jù)業(yè)務(wù)進(jìn)行分組，把業(yè)務(wù)相近的放在一個(gè)組內(nèi)。圖片菜單組與菜單項(xiàng)前的圖片要有區(qū)別，圖片應(yīng)放置在名稱前邊，高度要與菜單的字一樣高，且要和文字的間隔為5px。當(dāng)某一節(jié)點(diǎn)處于激活狀態(tài)時(shí)，要有明確的提示效果。示例：常用菜單：-錄用人員-辭退人員-顯示待辦-打印7.1.6頁面標(biāo)題(PageTitle)頁面標(biāo)題是能夠描述頁面功能的說明性文字，如："錄用國(guó)家公務(wù)員"、"辭退人員"。頁面標(biāo)題的名稱與系統(tǒng)樹節(jié)點(diǎn)項(xiàng)的名稱保持一致。位置在頁面的左上角，縮進(jìn)20px。字體為宋體，大小為14px。水平對(duì)齊為左對(duì)齊。為了頁面美觀，名稱前應(yīng)有圖片；所有頁面采用統(tǒng)一的圖片；圖片與名稱之間間隔為5px；圖片不應(yīng)過大，以免占用太多的頁面空間。示例：錄用國(guó)家公務(wù)員7.1.7組名(GroupName)組名用于標(biāo)識(shí)不同的信息分組。位置在組開始的左上角，縮進(jìn)20px，左對(duì)齊。大小為14px，字體為宋體。示例：基本信息工作經(jīng)歷7.1.8域名稱(FieldName)域名稱也可以稱為標(biāo)簽，輸入項(xiàng)的語義，如：姓名、性別、年齡等。命名以業(yè)務(wù)語義來定義，文字內(nèi)容應(yīng)該明了。位置在輸入項(xiàng)的左側(cè)，縮進(jìn)20px。水平對(duì)齊為左對(duì)齊，垂直對(duì)齊為居中。字?jǐn)?shù)限制最長(zhǎng)8個(gè)漢字(極個(gè)別的可超過8個(gè)漢字)。示例：姓名：性別：年齡：7.1.9單行文本框(SingleTextInput)單行文本框用于在頁面中接收或顯示文本信息，以單行形式體現(xiàn)的錄入框。外觀為3D效果(仿真WindowXP)，可編輯狀態(tài)和不可編輯狀態(tài)顏色應(yīng)顯示不同，建議不可編輯時(shí)"灰掉"。寬度以實(shí)際錄入需要確定寬度，分兩種情況：1、默認(rèn)情況為198px，如：姓名，性別等；2、在表單型錄入頁面中，如果實(shí)際錄入文字較長(zhǎng)，需單獨(dú)成為一行的文本輸入域，寬度為550px，如：籍貫、地址等。示例：姓名：[輸入框]性別：[輸入框]籍貫：[輸入框，寬度為550px]地址：[輸入框，寬度為550px]日期框(DateInput)是一種錄入框，其內(nèi)容為日期類型。規(guī)范要求其外觀為3D效果(仿真WindowXP)，寬度為180px，高度為20px，水平對(duì)齊為左對(duì)齊，垂直對(duì)齊為中對(duì)齊。日期格式為年4位，月2位，日期2位。日期的錄入格式為YYYY-MM-DD，顯示格式也為YYYY-MM-DD。錄入方式可以激活日歷面板返回日期值，也可以手動(dòng)錄入日期。日期要有一個(gè)默認(rèn)值，應(yīng)根據(jù)業(yè)務(wù)需要設(shè)置，有的是當(dāng)前日期，也可能是某一時(shí)刻日期。對(duì)于只讀的日期框，日期內(nèi)容應(yīng)灰掉，表示不可修改。對(duì)于業(yè)務(wù)上必須填寫的日期框，背景顏色應(yīng)與一般不同。日歷面板激活圖片放置于日期框右邊，中間沒有間隔；圖片長(zhǎng)為15px，高為20px。數(shù)值框(NumberInput)是一種錄入框，其內(nèi)容為數(shù)值類型。規(guī)范要求其外觀為3D效果(仿真WindowXP)，寬度為198px，高度為20px，水平對(duì)齊為左對(duì)齊，垂直對(duì)齊為中對(duì)齊。數(shù)值格式采用"千位記數(shù)"格式顯示，每三位用","分隔。對(duì)于只讀的數(shù)值框，應(yīng)將內(nèi)容灰掉，表示不可修改。對(duì)于業(yè)務(wù)上必須填寫的數(shù)值框，背景顏色應(yīng)與一般不同。多行文本框(Textarea)是一種能夠進(jìn)行多行錄入或顯示的文本框。原則上，其不能因?yàn)樘厥獾亩嘈形谋据斎肟蚨绊懻麄€(gè)頁面的效果，也不能引起位置錯(cuò)亂現(xiàn)象。規(guī)范項(xiàng)：規(guī)范內(nèi)容外觀，3D寬度不應(yīng)過高，可根據(jù)頁面實(shí)際需要和美觀效果來定義放置。一般要單獨(dú)占一行，除非有特殊需要。水平對(duì)齊左對(duì)齊垂直對(duì)齊中對(duì)齊。只讀的灰掉，表示不可修改。必填的背景顏色應(yīng)與一般不同。滾動(dòng)條3D效果，顏色與多行文本框一致，忌用反差較大的顏色。回車鍵回車換行進(jìn)行下一行錄入，不進(jìn)行焦點(diǎn)轉(zhuǎn)換。7.1.13.下拉框(Select)規(guī)范項(xiàng)：規(guī)范內(nèi)容效果，3D效果(仿真WindowXP)寬度。下拉框的寬度要以"顯示完整性"的重要程度，來分別定義，根據(jù)下拉框中最長(zhǎng)列表項(xiàng)的字?jǐn)?shù)確定寬度，以15個(gè)漢字為標(biāo)準(zhǔn)，可以按以下規(guī)范進(jìn)行。1)字?jǐn)?shù)小于等于15個(gè)漢字的：寬度設(shè)為198px；2)字?jǐn)?shù)大于15的，寬度設(shè)為550px；3)字?jǐn)?shù)大于15小于等于18的，如果"顯示完整性"的程度比較低，則可以按(1)執(zhí)行；字?jǐn)?shù)大于15小于等于18的，如果"顯示完整性"的程度比較高，則可以按(2)執(zhí)行；高度20px水平對(duì)齊左對(duì)齊垂直對(duì)齊中對(duì)齊。下拉項(xiàng)目標(biāo)題文字緊湊排列，之間不加空格。下拉項(xiàng)目水平對(duì)齊左對(duì)齊。只讀的灰掉，表示不可修改。必填的背景顏色應(yīng)與一般不同。字體默認(rèn)設(shè)置。7.1.14.列表框(List)規(guī)范項(xiàng)：規(guī)范內(nèi)容外觀，3D效果(仿真WindowXP)寬度。同下拉框水平對(duì)齊左對(duì)齊垂直對(duì)齊中對(duì)齊。只讀的灰掉，表示不可修改。必填的背景顏色應(yīng)與一般不同。字體默認(rèn)設(shè)置(不作另行設(shè)置)。滾動(dòng)條3D效果，顏色與多行文本框一致，忌用反差較大的顏色。7.1.15.單選按鈕(Radio)規(guī)范項(xiàng)：規(guī)范內(nèi)容外觀，3D效果(仿真WindowXP)寬度20px高度20px。選項(xiàng)標(biāo)題文字緊湊排列，之間不加空格。應(yīng)該帶有明白的文字解釋。避免兩個(gè)單選按鈕表示同一內(nèi)容的兩種狀態(tài)(例如YES/NO)。使用場(chǎng)景在表單錄入型頁面中，選項(xiàng)一般不應(yīng)超過6個(gè)，如果需要更多不使用單選按扭，可轉(zhuǎn)化為下拉框。水平對(duì)齊左對(duì)齊垂直對(duì)齊中對(duì)齊。默認(rèn)置必須有一個(gè)選項(xiàng)是選中的。放置在表單錄入頁面中，單獨(dú)成行，集中水平放置。在信自列表中應(yīng)集中豎排放置。7.1.19數(shù)據(jù)網(wǎng)格(DataGrid)數(shù)據(jù)網(wǎng)格是用來顯示多行記錄的數(shù)據(jù)集合。一般來說，表格的行用來顯示記錄的名稱，表格的列用來顯示屬性。點(diǎn)擊列標(biāo)題可以實(shí)現(xiàn)排序，并顯示排序方式的圖像提示。表頭應(yīng)該使用宋體字體，大小為12px，左對(duì)