Web頁面設(shè)計規(guī)范

1、Web頁面設(shè)計規(guī)范編 號：版 本 號：受控狀態(tài)：作 者：分 發(fā) 號：文檔修改歷史記錄文檔修改記錄日 期版本號更改人更改內(nèi)容文檔審核記錄日 期版本號審核人審核意見目 錄1引言51.1目的51.2范圍51.3縮略術(shù)語51.4參考資料52WEB頁面框架內(nèi)容52.1頁面框架52.2頁面布局6布局原則6布局要求62.2.2.1頁面分割62.2.2.2頁面結(jié)構(gòu)72.2.2.3頁面展現(xiàn)82.2.2.4頁面美化82.3頁面字體92.4邊距92.5表格92.6段落排版102.7Frame102.8其他頁面元素113頁面風(fēng)格113.1風(fēng)格分類113.2頁面風(fēng)格應(yīng)用124WEB頁面交互124.1頁面元素焦點(diǎn)切換12

2、信息填寫12鼠標(biāo)交互響應(yīng)124.2頁面信息交互14操作結(jié)果確認(rèn)14其他規(guī)則144.3頁面信息提示144.4鍵盤響應(yīng)支持165WEB頁面通用規(guī)范175.1一般頁面功能17新增17修改17刪除17查詢17取消18保存18重置18返回18分頁18全選185.2一般頁面規(guī)則18默認(rèn)值18必填值19界面?zhèn)鬟f19窗口嵌套19輸入框操作19在線幫助功能19菜單功能要求20快捷鍵功能20快捷鍵的限制21頁面的規(guī)范性21系統(tǒng)易用性22輸入安全性要求22獨(dú)特性要求23多窗口的應(yīng)用與系統(tǒng)資源236頁面編程技術(shù)使用規(guī)范246.1頁面元素命名246.2DHTMLx控件256.3Flex控件267頁面資源規(guī)格說明267.

3、1圖標(biāo)267.2圖片267.3多媒體278附錄288.1基于DHX的CSS規(guī)格示例28表格CSS示例288.2典型應(yīng)用的頁面示例28引言目的本文用于規(guī)范我公司所開發(fā)的商業(yè)軟件中對于web頁面的設(shè)計工作，明確在設(shè)計中所要遵循的準(zhǔn)則和方法，web頁面中各個元素的規(guī)格要求，確保所實(shí)現(xiàn)的web頁面在風(fēng)格、結(jié)構(gòu)和功能上的統(tǒng)一，提升商業(yè)軟件的外在品質(zhì)。范圍本規(guī)范適用于公司所有的商業(yè)軟件產(chǎn)品。縮略術(shù)語DHMLX：web頁面的UI控件參考資料WEB頁面框架內(nèi)容頁面框架WEB的頁面框架是指構(gòu)成完整頁面的組織結(jié)構(gòu)。通常是由以下三部分構(gòu)成：Head，Main，F(xiàn)oot，有些時候出于布局的需要，在“Head”下面還會

4、加上用于頁面功能導(dǎo)航的“Menu”。如圖：圖 1頁面布局布局原則對于WEB應(yīng)用來說，頁面布局是和web應(yīng)用的功能區(qū)相對應(yīng)的，并且對于頁面中各個部分之間的切分比例也需要遵守一定的規(guī)則。頁面布局的設(shè)計，首先需要考慮用戶在瀏覽web頁面時視覺流向上的要求：圖 2從視覺流向上看，用戶首先看到的是頁面“Head”部分的左面，通常那里是標(biāo)識這個WEB應(yīng)用的Logo；然后是陳列WEB應(yīng)用主要功能的“Menu”來用于頁面導(dǎo)航；接下來用戶將看的是處于頁面左側(cè)的“sidebar”，通常這里也是用于頁面功能導(dǎo)航的，和“Menu”出的選擇相呼應(yīng)，這里的內(nèi)容可以通過類似樹狀結(jié)構(gòu)的方式展示更為詳細(xì)的功能；接下來是處于頁面

5、中心位置的內(nèi)容部分，最后用戶的視線落在WEB頁面的底部。布局要求頁面分割以上面圖示的布局方式為例，按照通常web頁面設(shè)計時所遵循的方法，并結(jié)合黃金分割比例的方法：首先，將頁面按照3*3的方式進(jìn)行分割，如下圖：在高度方向上，對上部1/3區(qū)域按照黃金分割的方法分出head和menu的區(qū)域；在寬度方向上，對中部左邊1/3區(qū)域按照黃金分割的方法分出sidebar的區(qū)域，剩下的空間留給content區(qū)域；在高度方向上，對下部1/3區(qū)域按照黃金分割的方法分出foot的區(qū)域；頁面結(jié)構(gòu)頁面的布局中，各個區(qū)域大小的定義方式是不同的，請見下圖：圖 3在頁面布局中，對各個功能區(qū)域的切分是按照“像素”和“比例”方式來

6、進(jìn)行的，以1024*768的分辨率做為基準(zhǔn)，其中：Head區(qū)域，寬度是按照比例方式設(shè)置的，寬度按照100%設(shè)置，高度采用所占的固定像素值來確定的，一般占？px，如果有menu區(qū)，則調(diào)整為？px；Menu區(qū)域，和“head”的配置要求是一樣的，寬度按照100%設(shè)置，高度結(jié)合“head”的高度設(shè)置來確定，一般占？px；Sidebar區(qū)域，寬度是結(jié)合與“content”之間的黃金切分比例，按照固定像素的方式確定的，一般占？px；高度是按照比例方式來設(shè)置的；Content區(qū)域，高度和寬度方向布局都是按照比例方式來設(shè)置的；Foot區(qū)域，寬度按照100%設(shè)置，高度采用所占的固定像素值來確定的，一般占？px

7、；頁面展現(xiàn)對于頁面布局來說，除了上述要求外，還需要考慮如下要求：能自適應(yīng)1024*768、800*600兩種分辨率；界面層次不超過3層；默認(rèn)窗口設(shè)置下，不應(yīng)出現(xiàn)水平、垂直滾動條；當(dāng)界面內(nèi)容超出顯示區(qū)域時，以浮動層的形式顯示；還有，對于用戶的感官而言，屏幕對角線相交的位置是用戶直視的地方，而頁面正上方四分之一處為易吸引用戶注意力的位置，所以在放置頁面時要注意利用這兩個位置。要求：父頁面或主頁面的中心位置應(yīng)該設(shè)計在對角線焦點(diǎn)附近；子頁面的位置應(yīng)該靠近主窗體的左上角或正中；需要多個子頁面彈出時，應(yīng)該依次向右下方偏移，以顯示窗體出標(biāo)題為宜；在頁面上方四分之一處放置用戶的logo、主要功能導(dǎo)航和一些系統(tǒng)

8、操作功能；頁面美化界面應(yīng)該大小適合美學(xué)觀點(diǎn)，感覺協(xié)調(diào)舒適，能在有效的范圍內(nèi)吸引用戶的注意力。建議和要求：長寬接近黃金點(diǎn)比例，切忌長寬比例失調(diào)、或?qū)挾瘸^長度；布局要合理，不宜過于密集，也不能過于空曠，合理的利用空間；同一頁面上的按鈕大小應(yīng)該一致，不同頁面的按鈕大小盡量相近，按鈕上忌用太長的名稱；按鈕的大小要與界面的大小和空間要協(xié)調(diào)；避免空曠的界面上放置很大的按鈕；放置完控件后界面不應(yīng)有很大的空缺位置；字體的大小要與界面的大小比例協(xié)調(diào)， 通常使用的字體12px；前景與背景色搭配合理協(xié)調(diào)，反差不宜太大，主色要柔和，最好少用深色，如大紅、大綠等，可以借用Windows界面色調(diào)；大型系統(tǒng)常用的主色有&

9、quot;#E1E1E1"、"#EFEFEF"、"#C0C0C0"等；界面風(fēng)格要保持一致，字的大小、顏色、字體要相同，需要藝術(shù)處理或有特殊要求的地方建議使用圖片表現(xiàn)；如果窗體支持最大化或放大時，窗體上的控件也要隨著窗體而縮放；切忌只放大窗體而忽略控件的縮放；系統(tǒng)對話框頁面不應(yīng)該支持縮放，即右上角只有關(guān)閉功能；通常父窗體支持縮放時，子窗體沒有必要縮放；如果能給用戶提供自定義界面風(fēng)格，則由用戶自己選擇顏色、字體等；頁面字體頁面字體屬性的設(shè)置在相應(yīng)的CSS中進(jìn)行定義，頁面文字編碼要求是UTF-8，在規(guī)定字體屬性時，需要設(shè)置：中文采用“宋體”，英文采用

10、“Arial”或“verdana”，CSS文件中的font-family里面必須保證有“宋體”。對于頁面屬性中字體大小的設(shè)置，需要內(nèi)容的不同級別來設(shè)置，通常：“Head”中標(biāo)題文字，20px；“Menu”中的導(dǎo)航文字，14px；“Sidebar”中的文字，12px；“Content”中的正文，12px或14px，標(biāo)題；“foot”中的文字，12px或10px；有關(guān)頁面字體屬性的具體設(shè)置參見附錄中的CSS示例。邊距WEB頁面和其中的表格都應(yīng)該設(shè)定邊距，避免頁面元素緊貼邊沿的情況發(fā)生，最小邊距值為“3px”，默認(rèn)邊距值應(yīng)在CSS中設(shè)定。例如：圖 4表格對于表格，其屬性的設(shè)置同樣在CSS中進(jìn)行定義。

11、表格使用最多的情況是顯示裝在的數(shù)據(jù)，由于有很多表項需要在頁面中完整顯示，因此原則上對于表格各個單元格寬度的設(shè)置應(yīng)采用百分比方式來進(jìn)行，這樣表格不僅能夠?qū)?shù)據(jù)完整地顯示，而且還能夠適應(yīng)不同分辨率的情況。但由于表格中存在不定長的內(nèi)容，所以為了保證表格的寬度不被擠變形，對于不定長的內(nèi)容，可固定顯示寬度，當(dāng)超出此顯示寬度后，以顯示，光標(biāo)停留后，詳細(xì)內(nèi)容再在浮動層顯示。其他要求：表頭中的數(shù)據(jù)應(yīng)水平/垂直居中對齊。表單中內(nèi)容如為定長，則為居中顯示；如為不固定的中英文內(nèi)容，則為居左顯示；如為數(shù)值形式，則為居右顯示。表格的表頭應(yīng)采用不同于表格內(nèi)容的背景顏色，并要求對比明顯；表格表頭的文字應(yīng)采用加粗，或不同于表

12、格內(nèi)容的字體；表格中相鄰行需要通過兩種有一定對比差異的淺色作為背景色；各個頁面的表格邊框風(fēng)格需要統(tǒng)一，建議設(shè)置細(xì)邊框；表格中存在的鏈接文字需要采用不同于其他內(nèi)容的顏色或字體顯示；對于表格的嵌套盡量控制在三層以內(nèi)，并且禁止使用表格來進(jìn)行頁面布局。有關(guān)表格屬性的具體設(shè)置請參見附錄中的CSS示例。段落排版在WEB頁面中，“content”部分是展示頁面正文的區(qū)域，當(dāng)段落是由純文字構(gòu)成時：正文一行字?jǐn)?shù)最好不超過50，首頁的標(biāo)題文字以8-20字為佳。行距建議用百分比來定義，常用的兩個行距的值是line-height:120%或150%；對于一段文字，尤其是正文部分，保證左右至少有15px的留白，便于用戶

13、換行時不受到干擾。文字和背景對比要足夠明顯，保證最弱文字的可讀性。在使用<p>標(biāo)簽，需要對應(yīng)有</p>，并且要求設(shè)置margin，使得段落文字的前后左右能夠有合適的空白區(qū)?？稍贑SS中設(shè)置：p margin: 18px 6px 6px 18px;，分別定義了上、右、下、左的空白區(qū)大小。首行縮進(jìn)時，禁止使用“&nbsp;”，而是在CSS中設(shè)置text-indent，例如：p text-indent: 2em; 。在一段完整的文字中請盡量不要使用<br> 來人工干預(yù)分段；對于margin，為了防止由于采用默認(rèn)的margin值而導(dǎo)致的頁面排版問題，推薦所有

14、標(biāo)簽定義為：margin: 0; 當(dāng)采用豎排文字時，推薦使用writing-mode。通過設(shè)置兩個屬性值：lr-tb和tb-rl，并結(jié)合direction完成文字豎排，lr-tb指的是文字方向為：左-右、上-下，tb-rl是指上-下、右-左。FrameFrame是能夠?qū)⒁粋€WEB頁面切分成幾個窗口來顯示W(wǎng)EB內(nèi)容的一種頁面設(shè)計方法，切分后的每個窗口內(nèi)容是通過指向URL來實(shí)現(xiàn)的。Frame的標(biāo)記是<FRAMESET> <FRAME> ，而在使用Frame時，通常需要將其放在網(wǎng)頁入口的html文件中，而不必放入 <BODY> 標(biāo)記。<FRAMESET>

15、; 是用以劃分框窗的，每一框窗由一個 <FRAME> 標(biāo)記所標(biāo)示，<FRAME>必須在<FRAMESET>范圍中使用。其中：<FRAMESET> 稱框架標(biāo)記，用以宣告HTML文件為框架模式，并設(shè)定視窗如何分割。 <FRAME> 則只是設(shè)定某一個框窗內(nèi)的參數(shù)屬性。使用Frame分割頁面，需要按照2.1節(jié)“頁面布局”中所描述的要求來設(shè)置<FRAMESET> 和<FRAME>，以完成對頁面各個部分合理的切分。對于<FRAMESET> 和<FRAME>中的一些屬性設(shè)置，要求有：Name，表示Fr

16、ame的名字，必須有定義；Framespacing，表示各個Frame之間空白距離，要求設(shè)置為非零，通常設(shè)置為5；Noresize，表示是否允許使用者通過拖拉改變Frame的大小，要求在Frame設(shè)置此參數(shù)； Scrolling，表示是否要顯示卷軸，要求設(shè)置為“AUTO”Marginhight，表示框架高度部分邊緣所保留的空間，要求設(shè)置？Marginwidth，表示框架寬度部分邊緣所保留的空間，要求設(shè)置？其他頁面元素按鈕，要求按鈕上顯示的文字能夠準(zhǔn)確表達(dá)功能含義；單選框，默認(rèn)選擇一個，和所關(guān)聯(lián)的文字的間距應(yīng)該在3px；多選框，默認(rèn)全不選，所關(guān)聯(lián)的文字應(yīng)該能夠準(zhǔn)確表達(dá)選擇的含義，和控件的間距應(yīng)該

17、在3px；下拉框，給出默認(rèn)選擇，并且默認(rèn)選擇顯示出“默認(rèn)全部”或“請選擇”等文字提示；圖片，默認(rèn)為顯示出代表圖片文件的圖標(biāo)，或是縮略圖；多媒體，默認(rèn)為顯示出代表多媒體文件的圖標(biāo)；有關(guān)這些頁面元素的具體屬性設(shè)置請參見附錄中的CSS示例。頁面風(fēng)格WEB頁面的風(fēng)格是指WEB頁面通過對頁面布局、字體、配色、頁面元素排列的融合來傳達(dá)給用戶的、含有主觀感受。頁面風(fēng)格的選取除了需要考慮一般的用戶感受外，還需要將用戶所在環(huán)境的因素考慮進(jìn)去，從而形成符合特定用戶要求的頁面風(fēng)格。風(fēng)格分類Web應(yīng)用的頁面風(fēng)格內(nèi)容包括：布局，不僅僅是系統(tǒng)入口主頁的布局，而是所有頁面；顏色，按照風(fēng)格主題來設(shè)置頁面中包含的顏色及其表現(xiàn)；

18、頁面元素，按照風(fēng)格主題來確定頁面元素的大小、形狀和交互響應(yīng)行為；圖標(biāo)，按照風(fēng)格主題來定制表示各類功能的圖標(biāo)；提示窗口，是頁面交互的主要形式，需要按照風(fēng)格主題來定制；具體風(fēng)格分類的定義，待定。頁面風(fēng)格應(yīng)用具體風(fēng)格應(yīng)用的定義，待定。WEB頁面交互頁面元素焦點(diǎn)切換在WEB頁面中，為了提高和用戶之間的互動，需要在各類頁面元素獲得焦點(diǎn)和失去焦點(diǎn)的時候，在如下場景中采用頁面交互的方法有：信息填寫對輸入信息驗證：如果需要校驗填寫內(nèi)容，則需要在輸入框失去焦點(diǎn)時進(jìn)行數(shù)據(jù)有效性的判斷，并在輸入框后給出提示。如圖：對輸入信息提示：在一組需要被驗證的數(shù)據(jù)填寫時，如果有必填項，需要在輸入框后面給出標(biāo)志，并對填入的規(guī)則加

19、以說明。如圖：如果輸入框內(nèi)有默認(rèn)的文字，當(dāng)輸入框獲得焦點(diǎn)時，需要將輸入框內(nèi)的文字處于全選狀態(tài)。如圖：鼠標(biāo)交互響應(yīng)對鼠標(biāo)在頁面中所產(chǎn)生的事件進(jìn)行處理，當(dāng)頁面元素獲得焦點(diǎn)、被點(diǎn)擊、失去焦點(diǎn)時，則需要控件本身在顏色、大小或形狀上的變化給與響應(yīng)，亦可以添加聲音響應(yīng)。下面是各種情況下的鼠標(biāo)交互示例：例如：- 按鈕：按鈕顏色改變、或形狀，或字體改變，如圖：鼠標(biāo)放上獲得焦點(diǎn)前：鼠標(biāo)放上獲得焦點(diǎn)后：- 鏈接：字體變粗、或字體變色、或背景變色，如圖：鼠標(biāo)放上獲得焦點(diǎn)前：鼠標(biāo)放上獲得焦點(diǎn)后：- 頁簽：獲得焦點(diǎn)的頁簽顏色變化，或頁簽的大小和里面的字體變大，如圖：鼠標(biāo)放上獲得焦點(diǎn)前：鼠標(biāo)放上獲得焦點(diǎn)后：- 輸入框，輸

20、入框的邊框變色；鼠標(biāo)放上獲得焦點(diǎn)前：鼠標(biāo)放上獲得焦點(diǎn)后：- 表格，表格中行的底色改變；鼠標(biāo)放上獲得焦點(diǎn)前：鼠標(biāo)放上獲得焦點(diǎn)后：- 等待響應(yīng)：當(dāng)由于載入大量數(shù)據(jù)等原因，使得用戶需要等待一定時間，需要將鼠標(biāo)指針的形狀變成時間漏斗的形狀、或其他表示鼠標(biāo)不可操作的樣子來提醒用戶等待。如圖：對于我們所使用的有關(guān)鼠標(biāo)交互響應(yīng)的規(guī)范，將結(jié)合頁面風(fēng)格在附錄中給出說明。頁面信息交互操作結(jié)果確認(rèn)在提交數(shù)據(jù)，或是載有數(shù)據(jù)的頁面關(guān)閉，或其他需要和用戶進(jìn)行確認(rèn)交互的場景，需要軟件能夠提供一個以彈出頁面形式，要求用戶確認(rèn)執(zhí)行結(jié)果的對話框，包含的情況有：提示確認(rèn)輸入信息正確：彈出對話框，并將已填寫的內(nèi)容列出，要求用戶確認(rèn)內(nèi)

21、容的正確性，給出“確定”和“取消”的選擇按鈕；提示確認(rèn)數(shù)據(jù)更改是否保存：彈出對話框，提示當(dāng)前頁面內(nèi)容已經(jīng)改變，要求用戶確認(rèn)是否保存更改的信息，給出“是”和“否”的選擇按鈕；提示確認(rèn)當(dāng)前頁面的跳轉(zhuǎn)：彈出對話框，提示用戶正在跳轉(zhuǎn)到另外一個頁面，要求用戶確認(rèn)離開當(dāng)前頁面，給出“是”和“否”的選擇按鈕；確認(rèn)刪除數(shù)據(jù)內(nèi)容：彈出對話框，提示用戶刪除了當(dāng)前選擇的內(nèi)容，要求用戶確認(rèn)是否繼續(xù)刪除的操作，給出“確定”和“取消”的選擇按鈕；其他規(guī)則對于信息交互過程中，其他需要遵守的規(guī)則有：重要的命令按鈕與使用較頻繁的按鈕要放在界面上相對固定的位置上；容易引起操作錯誤或使程序退出、關(guān)閉的按鈕應(yīng)不醒目，放在不易點(diǎn)位置；

22、與正在進(jìn)行的操作無關(guān)的按鈕應(yīng)該加以屏蔽，例如：按鈕背景為灰色顯示；對可能造成數(shù)據(jù)無法恢復(fù)的操作必須提供確認(rèn)信息，給用戶放棄選擇的機(jī)會；非法的輸入或操作應(yīng)有足夠的提示說明；對運(yùn)行過程中出現(xiàn)問題而引起錯誤的地方要有提示，讓用戶明白錯誤出處，避免形成無限期的等待；頁面信息提示在web頁面提供的功能中，很多情況需要系統(tǒng)發(fā)送一些必要的提示信息到頁面顯示給用戶，這些信息的分類有：警告信息禁止信息操作執(zhí)行成功信息操作執(zhí)行失敗信息錯誤信息幫助信息提示信息這些信息在當(dāng)前頁面或彈出頁面上顯示。如果采用彈出對話框的形式，對話框的頁面結(jié)構(gòu)如下圖：圖標(biāo)區(qū)按鈕 1按鈕 2標(biāo)題區(qū)提示信息區(qū)標(biāo)題區(qū)：簡要給出此次提示信息的性質(zhì)

23、，例如：警告：操作非法！圖標(biāo)區(qū)：給出和此次提示信息性質(zhì)匹配的圖標(biāo)；提示信息區(qū)：給出此次提示信息的具體內(nèi)容；按鈕區(qū)：給出供用戶進(jìn)行選擇的按鈕；對于對話框的背景顏色，要求和系統(tǒng)的整體風(fēng)格選取的顏色一致，而右上角的操作區(qū)只保留關(guān)閉一個可操作功能，最小化和最大化的功能將不顯示。對應(yīng)采用的圖標(biāo)的圖例為：警告信息：禁止操作信息：操作成功信息：操作失敗信息：錯誤信息：幫助信息：提示信息：提示信息內(nèi)容要求：提示信息中如有標(biāo)點(diǎn)符號，統(tǒng)一為全角符號；提示信息如有主語，統(tǒng)一為您；在重要或復(fù)雜的操作成功后，給予提示信息；有后續(xù)操作的操作在成功后，也需給予提示信息，說明當(dāng)前的狀態(tài)。提示信息不宜太長，寬度應(yīng)不超過當(dāng)前窗口

24、寬度的1/2，當(dāng)超過此比例時，請視具體情況進(jìn)行換行；當(dāng)功能按鈕為圖片按鈕時，光標(biāo)停留需給予浮動提示信息；鍵盤響應(yīng)支持由于用戶有時候還需要結(jié)合鍵盤進(jìn)行操作，所以頁面需要提供一些簡單的鍵盤支持，例如：“Esc”、“Enter”、“Tab”“Space”，系統(tǒng)應(yīng)對這些鍵值作出響應(yīng)。其中：Esc，“取消”當(dāng)前操作；Enter，“確認(rèn)”或進(jìn)行下一步操作或提交；Tab、或Shift+tab能夠在頁面元素中按照一定次序切換焦點(diǎn)，遵循從左上至右下的原則；其他快捷鍵的支持，需要根據(jù)項目的實(shí)際情況來定義。WEB頁面通用規(guī)范一般頁面功能新增當(dāng)新增一條或多條記錄，要求：新增的記錄必須排在首頁首行。提交失敗后必須保存用

25、戶已經(jīng)輸入的內(nèi)容，以便再次提交。提交時需對主要標(biāo)識字段進(jìn)行重復(fù)值、空值（空格）判斷。新增內(nèi)容提交失敗后，須保留用戶修改的內(nèi)容，以便再次修改提交；需對主標(biāo)識字段進(jìn)行重復(fù)值、空值（空格）判斷；修改當(dāng)進(jìn)行單條或多條記錄的修改時，要求：如界面存在復(fù)選按鈕，勾選多條記錄進(jìn)行修改時，每次只能對一條記錄進(jìn)行修改，默認(rèn)修改內(nèi)容為第一條的提示信息；修改后加載的內(nèi)容應(yīng)為的實(shí)際內(nèi)容，而不再為默認(rèn)值；修改完成后須回到原記錄所在位置，且刷新顯示修改后的值；修改內(nèi)容提交失敗后，須保留用戶修改的內(nèi)容，以便再次修改提交；在查詢條件下修改后返回，如不滿足查詢條件則不顯示；需對主標(biāo)識字段進(jìn)行重復(fù)值、空值（空格）判斷；刪除當(dāng)刪除一

26、條或多條記錄，要求：必須有確認(rèn)刪除的提示信息；刪除成功后刷新，不顯示刪除的記錄；刪除成功后，返回到原記錄所在頁面，如果原記錄所在頁不存在時，則返回上一頁。當(dāng)被刪除的記錄與其他記錄存在關(guān)聯(lián)時，請示需求界面給予不允許刪除、更明細(xì)提示等信息；查詢當(dāng)按照條件查詢時，要求：每次查詢后定位到原頁面；每次查詢后保留當(dāng)前查詢條件；當(dāng)查詢條件較多時，需要配置“重置”按鈕提供使用；當(dāng)未查詢到任何記錄時，需給予未查找到相關(guān)記錄的提示信息；除了用戶明確要求不需要外，需提供模糊查詢及組合查詢功能；取消當(dāng)進(jìn)行取消當(dāng)前修改并返回時，要求：在數(shù)據(jù)量較多的頁面中，當(dāng)進(jìn)行了修改后，取消請給予提示；取消返回到原記錄所在狀態(tài)；保存當(dāng)

27、保存內(nèi)容時，要求：當(dāng)保存所費(fèi)的時間較長時，需給出保存進(jìn)度界面的提示；須控制不可以重復(fù)保存；重置重置是恢復(fù)變更前的狀態(tài)，要求：必須保證重置后與初始進(jìn)入此頁面時一致性；返回當(dāng)需要返回前一個頁面時，要求：當(dāng)從一個頁面點(diǎn)擊按鈕或鏈接進(jìn)入子頁面時，子頁面必須提供返回按鈕；分頁 當(dāng)需要分頁顯示數(shù)據(jù)時，要求：當(dāng)對查詢結(jié)果進(jìn)行分頁時，分頁的同時需要能夠執(zhí)行查詢功能；當(dāng)頁數(shù)較多時，允許輸入具體頁數(shù)進(jìn)行查詢； 全選當(dāng)在一個頁面上存在多個同類內(nèi)容的復(fù)選框時，需要提供全選的功能，要求：勾選全選，則選中當(dāng)前頁面所有記錄；去掉當(dāng)前頁面某個記錄的勾選，則全選也去掉勾選；刷新頁面后，自動去掉已勾選的記錄及全選的勾選；一般頁面

28、規(guī)則默認(rèn)值各個頁面都會存在默認(rèn)值。要求：打開一個新界面，光標(biāo)默認(rèn)停留在第一個待輸入的文本框中；當(dāng)選擇下拉框不存在默認(rèn)值時，則默認(rèn)為“請選擇”，當(dāng)存在默認(rèn)值時，請顯示默認(rèn)值；單選按組鈕默認(rèn)值表單元素選擇表單元素選擇要求主要集中在select,radio：性別，5個以下類別列表選擇用radio比較合適部門列表，用select比較合適必填值對界面必填項的要求：界面的必填項必須以紅色*號標(biāo)識出來。當(dāng)必填項沒有填寫時，可在光標(biāo)準(zhǔn)備移走時，在文本框后以“請輸入”紅色文字標(biāo)識；當(dāng)界面排列較緊時，如果必填項沒有填，可以通過彈出信息的方式來提示，或者光標(biāo)移走時彈出，或者最后提交時彈出。但確定后必須停留在第一個待

29、輸入的文本框中；界面?zhèn)鬟f對于程序執(zhí)行過程中，會出現(xiàn)父窗體與子窗體參數(shù)同步傳遞的情況，規(guī)則是：當(dāng)父窗體與子窗體都存在同樣的查詢條件時，父窗體已輸入的查詢條件必須被帶到子窗體中；當(dāng)子窗體的任何操作影響了父窗體的數(shù)據(jù)時，子窗體關(guān)閉返回，但必須刷新父窗體的數(shù)據(jù)；關(guān)閉父窗體必須連同子窗體一同關(guān)閉；子窗體的大小不能超過父窗體，且不要遮住父窗體的主要信息；窗口嵌套針對多層頁面窗口的嵌套情況，要求：如果存在多層嵌套頁面窗口，每層頁面窗口彈出時都自動往右下移動一點(diǎn)點(diǎn)，以保證不遮蓋上層頁面窗口標(biāo)題為準(zhǔn)；頁面窗口嵌套層次最好不超過3層；輸入框操作對于輸入框操作的限制，規(guī)則是：只允許輸入數(shù)字的輸入框需要控制其它字符的

30、輸入，或在輸入非法值時給予提示，或在輸入框內(nèi)不再捕獲非法值；只允許輸入日期、時間的輸入框需要通過格式化方式約束輸入，而不是輸入非法值后給出提示；當(dāng)輸入的內(nèi)容達(dá)到了字段的長度限制時，不顯示新輸入的的數(shù)值，并提示不允許再輸入，而不是保存后自動截斷；在線幫助功能系統(tǒng)應(yīng)該提供詳盡而可靠的在線幫助文檔，在用戶使用產(chǎn)生迷惑時可以自己尋求解決方法。要求：幫助文檔中的性能介紹與說明要與系統(tǒng)性能配套一致；更新系統(tǒng)版本時，對作了修改的地方在幫助文檔中要做相應(yīng)的修改；操作時要提供及時調(diào)用幫助的快捷方式，常用F1；在界面上即時調(diào)用幫助時，應(yīng)該能夠及時定位到與該操作相對應(yīng)的幫助位置，也就是說幫助要有即時的針對性；最好提

31、供目前流行的聯(lián)機(jī)幫助格式或HTML幫助格式；用戶可以用關(guān)鍵詞在幫助索引中搜索所要的幫助，當(dāng)然也應(yīng)該提供幫助索引；如果沒有提供軟件書面的幫助文檔，最好能夠有打印幫助的功能；在幫助中應(yīng)該提供我們的技術(shù)支持方式，一旦用戶難以自己解決可以方便的尋求新的幫助方式；菜單功能要求菜單是界面上最重要的元素，菜單位置按照按功能來組織。要求：菜單通常采用“常用-主要-次要-工具-幫助”的位置排列，符合Windows風(fēng)格的要求；常用的有“文件”、“編輯”，“查看”等，需要系統(tǒng)有這些選項；下拉菜單要根據(jù)菜單選項的含義進(jìn)行分組，并切按照一定的規(guī)則進(jìn)行排列，用橫線隔開；一組菜單的使用有先后要求或有向?qū)ё饔脮r，應(yīng)該按先后次

32、序排列；沒有順序要求的菜單項按使用頻率和重要性排列，常用的放在開頭， 不常用的靠后放置；重要的放在開頭，次要的放在后邊；如果菜單選項較多，應(yīng)該采用加長菜單的長度而減少深度的原則排列；菜單深度一般要求最多控制在三層以內(nèi)；對常用的菜單要有快捷命令方式，組合原則見；最好能夠?qū)驼谶M(jìn)行的操作無關(guān)的菜單項能夠屏蔽，也可采用動態(tài)加載方式即只有需要的菜單才顯示；菜單前的圖標(biāo)不宜太大，與和相應(yīng)的字高保持一致；主菜單的寬度要接近，字?jǐn)?shù)最好不應(yīng)多于四個；主菜單數(shù)目不應(yīng)太多，最好為單排布置；快捷鍵功能在菜單及按鈕中使用快捷鍵可以讓喜歡使用鍵盤的用戶操作得更快一些 在Windows及其應(yīng)用軟件中的快捷鍵功能大多是一

33、致的，可以根據(jù)實(shí)際情況考慮實(shí)現(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工具；AltW窗口；AltH幫助。MS Windows保留鍵: Ctrl

34、-Esc 任務(wù)列表 ；Ctrl-F4 關(guān)閉窗口； Alt-F4 結(jié)束應(yīng)用；Alt-Tab 下一應(yīng)用 ；Enter 缺省按鈕/確認(rèn)操作 ；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本身的一些原因，需要避免一些不必要的錯誤，故對其進(jìn)行攔截限制。要求：在用戶沒有提供明確需求情

35、況下，限制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ù)用戶的要求自己選擇定制。相同或相近功能的工具欄放在一起。工具欄中的每一個按鈕要有及時提示信息。一

36、條工具欄的長度最長不能超出屏幕寬度。工具欄的圖標(biāo)能直觀的代表要完成的操作。系統(tǒng)常用的工具欄設(shè)置默認(rèn)放置位置。工具欄太多時可以考慮使用工具廂。工具廂要具有可增減性，由用戶自己根據(jù)需求定制。工具廂的默認(rèn)總寬度不要超過屏幕寬度的1/5。狀態(tài)條要能顯示用戶切實(shí)需要的信息，常用的有：目前的操作、系統(tǒng)狀態(tài)、用戶位置、用戶信息、提示信息、錯誤信息等，如果某一操作需要的時間較長，還應(yīng)該顯示進(jìn)度條和進(jìn)程提示。滾動條的長度要根據(jù)顯示信息的長度或?qū)挾饶芗皶r變換，以利于用戶了解顯示信息的位置和百分比。狀態(tài)條的高度以放置五好字為宜，滾動條的寬度比狀態(tài)條的略窄。菜單和工具條要有清楚的界限;菜單要求凸出顯示，這樣在移走工具

37、條時仍有立體感。菜單和狀態(tài)條中通常使用5號字體。工具條一般比菜單要寬，但不要寬的太多，否則看起來很不協(xié)調(diào)。右鍵快捷菜單采用與菜單相同的準(zhǔn)則。系統(tǒng)易用性易用性是指頁面上的功能遵從慣例，例如：按鈕名稱易懂，用詞準(zhǔn)確，并與同一界面上的其他按鈕易于區(qū)分，能望文知意。這樣，使得用戶不用查閱幫助就能知道該頁面上的功能并進(jìn)行相關(guān)的正確操作。要求：打開一個新界面，光標(biāo)默認(rèn)停留在第一個待輸入的文本框中；完成相同或相近功能的按鈕放置在一起，減少鼠標(biāo)移動的距離，常用按鈕要支持快捷方式；按功能將界面劃分局域塊，用Frame框括起來，并要有功能說明或標(biāo)題；界面要支持鍵盤自動瀏覽按鈕功能，即按Tab鍵的自動切換功能；界面

38、上首先應(yīng)輸入的和重要信息的控件在Tab順序中應(yīng)當(dāng)靠前，位置也應(yīng)放在窗口上較醒目的位置；同一界面上的控件數(shù)最好不要超過10個，多于10個時可以考慮使用分頁界面顯示；分頁界面要支持在頁面間的快捷切換，常用組合快捷鍵Ctrl+Tab；默認(rèn)按鈕要支持Enter操作，即按Enter后自動執(zhí)行默認(rèn)按鈕對應(yīng)操作；可寫控件檢測到非法輸入后應(yīng)給出說明并能自動獲得焦點(diǎn)；按鈕鍵的順序與控件排列順序要一直，目前流行總體從上到下，同時行間從左到右的方式；復(fù)選框和選項框按選擇幾率的高底而先后排列；復(fù)選框和選項框要有默認(rèn)選項，并支持Tab選擇；選項數(shù)相同時多用選項框而不用下拉列表框；界面空間較小時使用下拉框而不用選項框；選

39、項數(shù)較少時使用選項框，相反使用下拉列表框；專業(yè)性強(qiáng)的軟件要使用相關(guān)的專業(yè)術(shù)語，通用性界面則提倡使用通用性詞眼；輸入安全性要求在界面上需要建立一些規(guī)則來控制輸入的出錯幾率，會大大減少系統(tǒng)因用戶人為的錯誤引起的破壞，開發(fā)者應(yīng)當(dāng)盡量周全地考慮到各種可能發(fā)生的問題，使出錯的可能降至最小，例如：當(dāng)程序出現(xiàn)保護(hù)性錯誤而退出系統(tǒng)，會使用戶對軟件失去信心，因為這意味著用戶要中斷思路，并費(fèi)時費(fèi)力地重新登錄，而且已進(jìn)行的操作也會因沒有存盤而全部丟失。因此需要在頁面設(shè)計時應(yīng)對輸入按照規(guī)則進(jìn)行校驗。要求：排除可能會使程序非正常中止的錯誤；應(yīng)當(dāng)檢查用戶錄入無效的數(shù)據(jù)；采用相關(guān)控件限制用戶輸入值的種類；當(dāng)用戶面臨的選擇是

40、兩個或多個選一時，請采用單選框，而當(dāng)選擇的可能再多一些時，可以采用復(fù)選框；當(dāng)選項特別多時，可以采用列表框，下拉式列表框；確保未經(jīng)授權(quán)或沒有意義的操作不能進(jìn)行；對可能引起致命錯誤或系統(tǒng)出錯的輸入字符或動作要加限制或屏蔽；對可能發(fā)生嚴(yán)重后果的操作要有補(bǔ)救措施。通過補(bǔ)救措施用戶可以回到原來的正確狀態(tài)；對一些特殊符號的輸入，與系統(tǒng)使用的符號相沖突的字符等進(jìn)行判斷并阻止用戶輸入該字符，并提前給出輸入提示；對錯誤操作最好支持可逆性處理，如取消系列操作；在輸入有效性字符之前應(yīng)該阻止用戶進(jìn)行只有輸入之后才可進(jìn)行的操作；對可能造成等待時間較長的操作應(yīng)該提供取消功能；特殊字符常有；;'">

41、<，'：""、|+=)-(_*&&%$#!，.。?/還有空格；在讀入用戶所輸入的信息時，應(yīng)根據(jù)需要選擇是否去掉前后空格，例如：有些讀入數(shù)據(jù)庫的字段不支持中間有空格，但用戶切實(shí)需要輸入中間空格，這時要在程序中加以處理；獨(dú)特性要求如果一味的遵循業(yè)界的界面標(biāo)準(zhǔn)，則會喪失自己的個性.在框架符合以上規(guī)范的情況下，設(shè)計具有自己獨(dú)特風(fēng)格的界面尤為重要。尤其在商業(yè)軟件流通中有著很好的遷移默化的廣告效用要求：安裝界面上應(yīng)有單位介紹或產(chǎn)品介紹，并有自己的圖標(biāo)；主界面，最好是大多數(shù)界面上要有公司圖標(biāo)；登錄界面上要有本產(chǎn)品的標(biāo)志，同時包含公司圖標(biāo)；幫助菜單的"

42、;關(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)資源 ，除非是需要后臺運(yùn)行的系統(tǒng)；盡量防止對系統(tǒng)的獨(dú)占使用；頁面編程技術(shù)使用規(guī)范頁面元素命名在使用javaScript來進(jìn)