web功能界面設(shè)計規(guī)范參考模板

1、1 / 7Web 頁面通用規(guī)范XXXX 軟件技術(shù)有限公司修訂記錄版本版本修訂說明修訂說明作者作者審核審核審核日期審核日期1.0目 錄WEB 頁面通用規(guī)范頁面通用規(guī)范.11引言引言.11.1目的.11.2范圍.12一般頁面功能說明一般頁面功能說明.12.1新增.12.2修改.12.3刪除.12.4查詢.22.5取消.22.6提交.22.7重置.22.8返回.22.9分頁.22.10全選.33一般頁面規(guī)則說明一般頁面規(guī)則說明.33.1默認(rèn)值.33.2必填項.33.3界面?zhèn)鬟f.33.4窗口嵌套.33.5輸入框.44頁面元素交互頁面元素交互.44.1操作結(jié)果確認(rèn).44.2其他規(guī)則.41 引言引言1.1

2、 目的目的本文用于規(guī)范我公司所開發(fā)的產(chǎn)品中對于頁面的通用需求設(shè)計工作，明確在設(shè)計中所要遵循的準(zhǔn)則和方法，web 頁面中各個通用功能元素的規(guī)格要求，確保所實現(xiàn)的通用功能按鈕在結(jié)構(gòu)和功能上的統(tǒng)一，提升軟件產(chǎn)品的品質(zhì)。1.2 范圍范圍本規(guī)范適用于公司所有的軟件產(chǎn)品。2 一般頁面功能說明一般頁面功能說明2.1 新增新增當(dāng)新增一條或多條記錄，要求：新增的記錄必須排在首頁首行；必填項字段必須有特殊標(biāo)示；提交時需對必填項字段進(jìn)行重復(fù)值、空值（空格）判斷；新增內(nèi)容提交失敗后，須保留用戶修改的內(nèi)容，以便再次修改提交；新增成功后必須有成功提示。2.2 修改修改當(dāng)進(jìn)行單條或多條記錄的修改時，要求：如界面存在復(fù)選按鈕

3、，勾選多條記錄進(jìn)行修改時，每次只能對一條記錄進(jìn)行修改，默認(rèn)修改內(nèi)容為第一條的提示信息；必填項字段必須有特殊標(biāo)示；修改后加載的內(nèi)容應(yīng)為的實際內(nèi)容，而不再為默認(rèn)值；修改完成后須回到原記錄所在位置，且刷新顯示修改后的值；修改內(nèi)容提交失敗后，須保留用戶修改的內(nèi)容，以便再次修改提交；在查詢條件下修改后返回，如不滿足查詢條件則不顯示；需對主標(biāo)識字段進(jìn)行重復(fù)值、空值（空格）判斷；修改成功后必須有成功提示。2.3 刪除刪除當(dāng)刪除一條或多條記錄，要求：必須有確認(rèn)刪除的提示信息；刪除成功后刷新，不顯示刪除的記錄；當(dāng)被刪除的記錄與其他記錄存在關(guān)聯(lián)時，提示界面給予不允許刪除、更明細(xì)提示等信息；刪除成功后必須有成功提示

4、。2.4 查詢查詢當(dāng)按照條件查詢時，要求：每次查詢后保留當(dāng)前輸入的查詢條件；當(dāng)未查詢到任何記錄時，需給予未查找到相關(guān)記錄的提示信息；除了用戶明確要求不需要外，需提供模糊查詢功能；2.5 取消取消當(dāng)進(jìn)行取消當(dāng)前修改并返回時，要求：取消請給予提示；取消返回到原記錄所在狀態(tài)；2.6 提交提交當(dāng)提交內(nèi)容時，要求：當(dāng)提交所費的時間較長時，需給出等待的提示，如：沙漏；提交成功后不可重復(fù)提交；2.7 重置重置重置是恢復(fù)變更前的狀態(tài)，要求：必須保證重置后與初始進(jìn)入此頁面時一致性；2.8 返回返回當(dāng)需要返回前一個頁面時，要求：當(dāng)從一個頁面點擊按鈕或鏈接進(jìn)入子頁面時，子頁面必須提供返回按鈕；2.9 分頁分頁當(dāng)需要

5、分頁顯示數(shù)據(jù)時，要求：當(dāng)對查詢結(jié)果進(jìn)行分頁時，分頁的同時需要能夠執(zhí)行查詢功能；當(dāng)頁數(shù)較多時，允許輸入具體頁數(shù)進(jìn)行查詢；2.10全選全選當(dāng)在一個頁面上存在多個同類內(nèi)容的復(fù)選框時，需要提供全選的功能，要求：勾選全選，則選中當(dāng)前頁面所有記錄；去掉當(dāng)前頁面某個記錄的勾選，則全選也去掉勾選；刷新頁面后，自動去掉已勾選的記錄及全選的勾選；3 一般頁面規(guī)則說明一般頁面規(guī)則說明3.1 默認(rèn)值默認(rèn)值各個頁面都會存在默認(rèn)值。要求：當(dāng)輸入框不存在默認(rèn)值時，默認(rèn)為空，當(dāng)存在默認(rèn)值時，請顯示默認(rèn)值當(dāng)選擇下拉框不存在默認(rèn)值時，則默認(rèn)為“請選擇”，當(dāng)存在默認(rèn)值時，請顯示默認(rèn)值；3.2 必填項必填項對界面必填項的要求：界面的

6、必填項必須以紅色*號標(biāo)識出來（或者有特殊提示說明）。當(dāng)必填項沒有填寫時，可在光標(biāo)準(zhǔn)備移走時，在文本框后以“請輸入”紅色文字標(biāo)識；如果必填項沒有填，可以通過彈出信息的方式來提示，或者光標(biāo)移走時彈出，或者最后提交時彈出。3.3 界面?zhèn)鬟f界面?zhèn)鬟f對于程序執(zhí)行過程中，會出現(xiàn)父窗體與子窗體參數(shù)同步傳遞的情況，規(guī)則是：當(dāng)父窗體與子窗體都存在同樣的查詢條件時，父窗體已輸入的查詢條件必須被帶到子窗體中；當(dāng)子窗體的任何操作影響了父窗體的數(shù)據(jù)時，子窗體關(guān)閉返回，但必須刷新父窗體的數(shù)據(jù)；關(guān)閉父窗體必須連同子窗體一同關(guān)閉；子窗體的大小不能超過父窗體，且不要遮住父窗體的主要信息；3.4 窗口嵌套窗口嵌套針對多層頁面窗口

7、的嵌套情況，要求：如果存在多層嵌套頁面窗口，每層頁面窗口彈出時都自動往右下移動一點點，以保證不遮蓋上層頁面窗口標(biāo)題為準(zhǔn)；頁面窗口嵌套層次最好不超過 3 層；3.5 輸入框輸入框?qū)τ谳斎肟虿僮鞯南拗?，?guī)則是：只允許輸入數(shù)字的輸入框需要控制其它字符的輸入，或在輸入非法值時給予提示，或在輸入框內(nèi)不再捕獲非法值；只允許輸入日期、時間的輸入框需要通過格式化方式約束輸入，而不是輸入非法值后給出提示；當(dāng)輸入的內(nèi)容達(dá)到了字段的長度限制時，不顯示新輸入的的數(shù)值，并提示不允許再輸入，而不是保存后自動截斷；4 頁面元素交互頁面元素交互4.1 操作結(jié)果確認(rèn)操作結(jié)果確認(rèn)在提交數(shù)據(jù)，或是載有數(shù)據(jù)的頁面關(guān)閉，或其他需要和用

8、戶進(jìn)行確認(rèn)交互的場景，需要軟件能夠提供一個以彈出頁面形式，要求用戶確認(rèn)執(zhí)行結(jié)果的對話框，包含的情況有：提示確認(rèn)輸入信息正確：彈出對話框，給出“確定”和“取消”的選擇按鈕；提示確認(rèn)數(shù)據(jù)更改是否保存：彈出對話框，提示當(dāng)前頁面內(nèi)容已經(jīng)改變，要求用戶確認(rèn)是否保存更改的信息，給出“是”和“否”的選擇按鈕；確認(rèn)刪除數(shù)據(jù)內(nèi)容：彈出對話框，提示用戶刪除了當(dāng)前選擇的內(nèi)容，要求用戶確認(rèn)是否繼續(xù)刪除的操作，給出“確定”和“取消”的選擇按鈕；4.2 其他規(guī)則其他規(guī)則對于信息交互過程中，其他需要遵守的規(guī)則有：重要的命令按鈕與使用較頻繁的按鈕要放在界面上相對固定的位置上；容易引起操作錯誤或使程序退出、關(guān)閉的按鈕應(yīng)不醒目，放在不易點位置；與正在