第5節(jié)web頁面通用規(guī)范
一般頁面功能
新增
當(dāng)新增一條或多條記錄，要求：
新增的記錄必須排在首頁首行。
提交失敗后必須保存用戶已經(jīng)輸入的內(nèi)容，以便再次提交。
提交時需對主要標(biāo)識字段進行重復(fù)值、空值（空格）判斷。
新增內(nèi)容提交失敗后，須保留用戶修改的內(nèi)容，以便再次修改提交；
需對主標(biāo)識字段進行重復(fù)值、空值（空格）判斷；
修改
當(dāng)進行單條或多條記錄的修改時，要求：
如界面存在復(fù)選按鈕，勾選多條記錄進行修改時，每次只能對一條記錄進行修改，默認修改內(nèi)容為第一條的提示信息；
修改后加載的內(nèi)容應(yīng)為的實際內(nèi)容，而不再為默認值；
修改完成后須回到原記錄所在位置，且刷新顯示修改后的值；
修改內(nèi)容提交失敗后，須保留用戶修改的內(nèi)容，以便再次修改提交；
在查詢條件下修改后返回，如不滿足查詢條件則不顯示；
需對主標(biāo)識字段進行重復(fù)值、空值（空格）判斷；
刪除
當(dāng)刪除一條或多條記錄，要求：
必須有確認刪除的提示信息；
刪除成功后刷新，不顯示刪除的記錄；
刪除成功后，返回到原記錄所在頁面，如果原記錄所在頁不存在時，則返回上一頁。
當(dāng)被刪除的記錄與其他記錄存在關(guān)聯(lián)時，請示需求界面給予不允許刪除、更明細提示等信息；
查詢
當(dāng)按照條件查詢時，要求：
每次查詢后定位到原頁面；
每次查詢后保留當(dāng)前查詢條件；
當(dāng)查詢條件較多時，需要配置“重置”按鈕提供使用；
當(dāng)未查詢到任何記錄時，需給予未查找到相關(guān)記錄的提示信息；
除了用戶明確要求不需要外，需提供模糊查詢及組合查詢功能；
取消
當(dāng)進行取消當(dāng)前修改并返回時，要求：
在數(shù)據(jù)量較多的頁面中，當(dāng)進行了修改后，取消請給予提示；
取消返回到原記錄所在狀態(tài)；
保存
當(dāng)保存內(nèi)容時，要求：
當(dāng)保存所費的時間較長時，需給出保存進度界面的提示；
須控制不可以重復(fù)保存；
重置
重置是恢復(fù)變更前的狀態(tài)，要求：
必須保證重置后與初始進入此頁面時一致性；
返回
當(dāng)需要返回前一個頁面時，要求：
當(dāng)從一個頁面點擊按鈕或鏈接進入子頁面時，子頁面必須提供返回按鈕；
全選
當(dāng)在一個頁面上存在多個同類內(nèi)容的復(fù)選框時，需要提供全選的功能，要求：
勾選全選，則選中當(dāng)前頁面所有記錄；
去掉當(dāng)前頁面某個記錄的勾選，則全選也去掉勾選；
刷新頁面后，自動去掉已勾選的記錄及全選的勾選；
一般頁面規(guī)則
默認值
各個頁面都會存在默認值。
要求：
打開一個新界面，光標(biāo)默認停留在第一個待輸入的文本框中；
當(dāng)選擇下拉框不存在默認值時，則默認為“請選擇”，當(dāng)存在默認值時，請顯示默認值；
單選按組鈕默認值
表單元素選擇
表單元素選擇要求主要集中在select,radio：
性別，5個以下類別列表選擇用radio比較合適
部門列表，用select比較合適
必填值
對界面必填項的要求：
界面的必填項必須以紅色*號標(biāo)識出來。
當(dāng)必填項沒有填寫時，可在光標(biāo)準(zhǔn)備移走時，在文本框后以“請輸入”紅色文字標(biāo)識；
當(dāng)界面排列較緊時，如果必填項沒有填，可以通過彈出信息的方式來提示，或者光標(biāo)移走時彈出，或者最后提交時彈出。但確定后必須停留在第一個待輸入的文本框中；
界面?zhèn)鬟f
對于程序執(zhí)行過程中，會出現(xiàn)父窗體與子窗體參數(shù)同步傳遞的情況，規(guī)則是：
當(dāng)父窗體與子窗體都存在同樣的查詢條件時，父窗體已輸入的查詢條件必須被帶到子窗體中；
當(dāng)子窗體的任何操作影響了父窗體的數(shù)據(jù)時，子窗體關(guān)閉返回，但必須刷新父窗體的數(shù)據(jù)；
關(guān)閉父窗體必須連同子窗體一同關(guān)閉；
子窗體的大小不能超過父窗體，且不要遮住父窗體的主要信息；
窗口嵌套
針對多層頁面窗口的嵌套情況，要求：
如果存在多層嵌套頁面窗口，每層頁面窗口彈出時都自動往右下移動一點點，以保證不遮蓋上層頁面窗口標(biāo)題為準(zhǔn)；
頁面窗口嵌套層次最好不超過3層；
輸入框操作
對于輸入框操作的限制，規(guī)則是：
只允許輸入數(shù)字的輸入框需要控制其它字符的輸入，或在輸入非法值時給予提示，或在輸入框內(nèi)不再捕獲非法值；
只允許輸入日期、時間的輸入框需要通過格式化方式約束輸入，而不是輸入非法值后給出提示；
當(dāng)輸入的內(nèi)容達到了字段的長度限制時，不顯示新輸入的的數(shù)值，并提示不允許再輸入，而不是保存后自動截斷；
在線幫助功能
系統(tǒng)應(yīng)該提供詳盡而可靠的在線幫助文檔，在用戶使用產(chǎn)生迷惑時可以自己尋求解決方法。
要求：
幫助文檔中的性能介紹與說明要與系統(tǒng)性能配套一致；
更新系統(tǒng)版本時，對作了修改的地方在幫助文檔中要做相應(yīng)的修改；
操作時要提供及時調(diào)用幫助的快捷方式，常用F1；
在界面上即時調(diào)用幫助時，應(yīng)該能夠及時定位到與該操作相對應(yīng)的幫助位置，也就是說幫助要有即時的針對性；
最好提供目前流行的聯(lián)機幫助格式或HTML幫助格式；
用戶可以用關(guān)鍵詞在幫助索引中搜索所要的幫助，當(dāng)然也應(yīng)該提供幫助索引；
如果沒有提供軟件書面的幫助文檔，最好能夠有打印幫助的功能；
在幫助中應(yīng)該提供我們的技術(shù)支持方式，一旦用戶難以自己解決可以方便的尋求新的幫助方式；
菜單功能要求
菜單是界面上最重要的元素，菜單位置按照按功能來組織。
要求：
菜單通常采用“常用--主要--次要--工具--幫助”的位置排列，符合Windows風(fēng)格的要求；
常用的有“文件”、“編輯”，“查看”等，需要系統(tǒng)有這些選項；
下拉菜單要根據(jù)菜單選項的含義進行分組，并切按照一定的規(guī)則進行排列，用橫線隔開；
一組菜單的使用有先后要求或有向?qū)ё饔脮r，應(yīng)該按先后次序排列；
沒有順序要求的菜單項按使用頻率和重要性排列，常用的放在開頭， 不常用的靠后放置；重要的放在開頭，次要的放在后邊；
如果菜單選項較多，應(yīng)該采用加長菜單的長度而減少深度的原則排列；
菜單深度一般要求最多控制在三層以內(nèi)；
對常用的菜單要有快捷命令方式，組合原則見5.2.8；
最好能夠?qū)驼谶M行的操作無關(guān)的菜單項能夠屏蔽，也可采用動態(tài)加載方式——即只有需要的菜單才顯示；
菜單前的圖標(biāo)不宜太大，與和相應(yīng)的字高保持一致；
主菜單的寬度要接近，字數(shù)最好不應(yīng)多于四個；
主菜單數(shù)目不應(yīng)太多，最好為單排布置；
快捷鍵功能
在菜單及按鈕中使用快捷鍵可以讓喜歡使用鍵盤的用戶操作得更快一些在Windows及其應(yīng)用軟件中的快捷鍵功能大多是一致的，可以根據(jù)實際情況考慮實現(xiàn)。
要求：
面向事務(wù)的組合有: Ctrl-D 刪除、Ctrl-F 尋找、Ctrl –H替換、Ctrl-I 插入、Ctrl-N 新記錄、Ctrl-S 保存、 Ctrl-O 打開；
列表: Ctrl-R 、Ctrl-G定位；Ctrl-Tab下一分頁窗口或反序瀏覽同一頁面控件；
編輯: Ctrl-A全選；Ctrl-C 拷貝；Ctrl-V 粘貼；Ctrl-X 剪切；Ctrl-Z撤消操作；Ctrl-Y恢復(fù)操作；
文件操作: Ctrl-P 打印；Ctrl-W 關(guān)閉；
系統(tǒng)菜單:Alt-A文件；Alt-E編輯；Alt-T工具；Alt－W窗口；Alt－H幫助。
MS Windows保留鍵: Ctrl-Esc 任務(wù)列表 ；Ctrl-F4 關(guān)閉窗口； Alt-F4 結(jié)束應(yīng)用；Alt-Tab 下一應(yīng)用 ；Enter 缺省按鈕/確認操作 ；Esc 取消按鈕/取消操作 ；Shift-F1 上下文相關(guān)幫助；
按鈕中：可以根據(jù)系統(tǒng)需要而調(diào)節(jié)，以下只是常用的組合。Alt-Y確定(是)；Alt-C取消；Alt-N 否；Alt-D刪除；Alt-Q退出；Alt-A添加；Alt-E編輯；Alt-B瀏覽；Alt-R讀；Alt-W寫。這些快捷鍵也可以作為開發(fā)中文應(yīng)用軟件的標(biāo)準(zhǔn)，但亦可使用漢語拼音的開頭字母；
快捷鍵的限制
由于IE本身的一些原因，需要避免一些不必要的錯誤，故對其進行攔截限制。
要求：
在用戶沒有提供明確需求情況下，限制F5、IE工具欄、退格鍵（僅限頁面不限輸入框）、Ctrl+N的使用；
根據(jù)功能需要，限制右鍵菜單的使用；
頁面的規(guī)范性
通常界面設(shè)計都按Windows界面的規(guī)范來設(shè)計，即包含“菜單條、工具欄、工具廂、狀態(tài)欄、滾動條、右鍵快捷菜單”的標(biāo)準(zhǔn)格式，可以說：界面遵循規(guī)范化的程度越高，則易用性相應(yīng)的就越好。小型軟件一般不提供工具廂。
規(guī)范要求：
常用菜單要有命令快捷方式。
完成相同或相近功能的菜單用橫線隔開放在同一位置。
菜單前的圖標(biāo)能直觀的代表要完成的操作。
菜單深度一般要求最多控制在三層以內(nèi)。
工具欄要求可以根據(jù)用戶的要求自己選擇定制。
相同或相近功能的工具欄放在一起。
工具欄中的每一個按鈕要有及時提示信息。
一條工具欄的長度最長不能超出屏幕寬度。
工具欄的圖標(biāo)能直觀的代表要完成的操作。
系統(tǒng)常用的工具欄設(shè)置默認放置位置。
工具欄太多時可以考慮使用工具廂。
工具廂要具有可增減性，由用戶自己根據(jù)需求定制。
工具廂的默認總寬度不要超過屏幕寬度的1/5。
狀態(tài)條要能顯示用戶切實需要的信息，常用的有：
目前的操作、系統(tǒng)狀態(tài)、用戶位置、用戶信息、提示信息、錯誤信息等，如果某一操作需要的時間較長，還應(yīng)該顯示進度條和進程提示。
滾動條的長度要根據(jù)顯示信息的長度或?qū)挾饶芗皶r變換，以利于用戶了解顯示信息的位置和百分比。
狀態(tài)條的高度以放置五好字為宜，滾動條的寬度比狀態(tài)條的略窄。
菜單和工具條要有清楚的界限;菜單要求凸出顯示，這樣在移走工具條時仍有立體感。
菜單和狀態(tài)條中通常使用5號字體。工具條一般比菜單要寬，但不要寬的太多，否則看起來很不協(xié)調(diào)。
右鍵快捷菜單采用與菜單相同的準(zhǔn)則。
系統(tǒng)易用性
易用性是指頁面上的功能遵從慣例，例如：按鈕名稱易懂，用詞準(zhǔn)確，并與同一界面上的其他按鈕易于區(qū)分，能望文知意。這樣，使得用戶不用查閱幫助就能知道該頁面上的功能并進行相關(guān)的正確操作。
要求：
打開一個新界面，光標(biāo)默認停留在第一個待輸入的文本框中；
完成相同或相近功能的按鈕放置在一起，，減少鼠標(biāo)移動的距離，常用按鈕要支持快捷方式；
按功能將界面劃分局域塊，用Frame框括起來，并要有功能說明或標(biāo)題；
界面要支持鍵盤自動瀏覽按鈕功能，即按Tab鍵的自動切換功能；
界面上首先應(yīng)輸入的和重要信息的控件在Tab順序中應(yīng)當(dāng)靠前，位置也應(yīng)放在窗口上較醒目的位置；
同一界面上的控件數(shù)最好不要超過10個，多于10個時可以考慮使用分頁界面顯示；
分頁界面要支持在頁面間的快捷切換，常用組合快捷鍵Ctrl+Tab；
默認按鈕要支持Enter操作，即按Enter后自動執(zhí)行默認按鈕對應(yīng)操作；
可寫控件檢測到非法輸入后應(yīng)給出說明并能自動獲得焦點；
按鈕鍵的順序與控件排列順序要一直，目前流行總體從上到下，同時行間從左到右的方式；
復(fù)選框和選項框按選擇幾率的高底而先后排列；
復(fù)選框和選項框要有默認選項，并支持Tab選擇；
選項數(shù)相同時多用選項框而不用下拉列表框；
界面空間較小時使用下拉框而不用選項框；
選項數(shù)較少時使用選項框，相反使用下拉列表框；
專業(yè)性強的軟件要使用相關(guān)的專業(yè)術(shù)語，通用性界面則提倡使用通用性詞眼；
輸入安全性要求
在界面上需要建立一些規(guī)則來控制輸入的出錯幾率，會大大減少系統(tǒng)因用戶人為的錯誤引起的破壞，開發(fā)者應(yīng)當(dāng)盡量周全地考慮到各種可能發(fā)生的問題，使出錯的可能降至最小，例如：當(dāng)程序出現(xiàn)保護性錯誤而退出系統(tǒng)，會使用戶對軟件失去信心，因為這意味著用戶要中斷思路，并費時費力地重新登錄，而且已進行的操作也會因沒有存盤而全部丟失。因此需要在頁面設(shè)計時應(yīng)對輸入按照規(guī)則進行校驗。
要求：
排除可能會使程序非正常中止的錯誤；
應(yīng)當(dāng)檢查用戶錄入無效的數(shù)據(jù)；
采用相關(guān)控件限制用戶輸入值的種類；
當(dāng)用戶面臨的選擇是兩個或多個選一時，請采用單選框，而當(dāng)選擇的可能再多一些時，可以采用復(fù)選框；
當(dāng)選項特別多時，可以采用列表框，下拉式列表框；
確保未經(jīng)授權(quán)或沒有意義的操作不能進行；
對可能引起致命錯誤或系統(tǒng)出錯的輸入字符或動作要加限制或屏蔽；
對可能發(fā)生嚴重后果的操作要有補救措施。通過補救措施用戶可以回到原來的正確狀態(tài)；
對一些特殊符號的輸入，與系統(tǒng)使用的符號相沖突的字符等進行判斷并阻止用戶輸入該字符，并提前給出輸入提示；
對錯誤操作最好支持可逆性處理，如取消系列操作；
在輸入有效性字符之前應(yīng)該阻止用戶進行只有輸入之后才可進行的操作；
對可能造成等待時間較長的操作應(yīng)該提供取消功能；
特殊字符常有；;'"><，｀'："［"｛、\|｝］+=)-(_*&&^%$#@!~，.。?/還有空格；
在讀入用戶所輸入的信息時，應(yīng)根據(jù)需要選擇是否去掉前后空格，例如：有些讀入數(shù)據(jù)庫的字段不支持中間有空格，但用戶切實需要輸入中間空格，這時要在程序中加以處理；
獨特性要求
如果一味的遵循業(yè)界的界面標(biāo)準(zhǔn)，則會喪失自己的個性.在框架符合以上規(guī)范的情況下，設(shè)計具有自己獨特風(fēng)格的界面尤為重要。尤其在商業(yè)軟件流通中有著很好的遷移默化的廣告效用
要求：
安裝界面上應(yīng)有單位介紹或產(chǎn)品介紹，并有自己的圖標(biāo)；
主界面，最好是大多數(shù)界面上要有公司圖標(biāo)；
登錄界面上要有本產(chǎn)品的標(biāo)志，同時包含公司圖標(biāo)；
幫助菜單的"關(guān)于"中應(yīng)有版權(quán)和產(chǎn)品信息；
公司的系列產(chǎn)品要保持一致的界面風(fēng)格，如背景色、字體、菜單排列方式、圖標(biāo)、安裝過程、按鈕用語等應(yīng)該大體一致；
多窗口的應(yīng)用與系統(tǒng)資源
設(shè)計良好的軟件不僅要有完備的功能，而且要盡可能的占用最低限度的資源，因此在出現(xiàn)多窗口的情況下需要避免下述一些情況。
要求：
在多窗口系統(tǒng)中，有些界面要求必須保持在最頂層，避免用戶在打開多個窗口時，不停的切換甚至最小化其他窗口來顯示該窗口；
在主界面載入完畢后自動卸出內(nèi)存，讓出所占用的WINDOWS系統(tǒng)資源；
關(guān)閉所有窗體，系統(tǒng)退出后要釋放所占的所有系統(tǒng)資源 ，除非是需要后臺運行的系統(tǒng)；
盡量防止對系統(tǒng)的獨占使用；
