Web頁面設(shè)計(jì)規(guī)范標(biāo)準(zhǔn)（精編版）

1、web頁面設(shè)計(jì)規(guī)編號： 版 本 號 ： 受控狀態(tài)： 作者： 分 發(fā) 號 ：文檔修改歷史記錄文檔修改記錄日 期版本號更改人更改容文檔審核記錄日 期版本號審核人審核意見目錄1 引言51.1目的 51.2圍 51.3縮略術(shù)語51.4參考資料52web頁面框架容52.1頁面框架 52.2頁面布局 62.2.1布局原那么62.2.2布局要求 72.2.2.1頁面分割72.2.2.2頁面結(jié)構(gòu)72.2.2.3頁面展現(xiàn)82.2.2.4頁面美化92.3頁面字體 102.4邊距 102.5表格 102.6段落排版 112.7frame122.8其他頁面元素123 頁面風(fēng)格 133.1 風(fēng)格分類 133.2 頁面風(fēng)

2、格應(yīng)用13 4web頁面交互 134.1 頁面元素焦點(diǎn)切換144.1.1 信息填寫 144.1.2 鼠標(biāo)交互響應(yīng)144.2 頁面信息交互155 / 314.2.1 操作結(jié)果確認(rèn)164.2.2 其他規(guī)那么164.3 頁面信息提示164.4 鍵盤響應(yīng)支持18 5web頁面通用規(guī)185.1一般頁面功能185.1.1新增 185.1.2修改 185.1.3刪除 195.1.4查詢 195.1.5取消 195.1.6保存 195.1.7重置 195.1.8返回 205.1.9分頁 205.1.10全選 205.2一般頁面規(guī)那么205.2.1默認(rèn)值 205.2.2必填值 205.2.3界面?zhèn)鬟f 215.2

3、.4窗口嵌套 215.2.5輸入框操作215.2.6在線幫助功能215.2.7菜單功能要求225.2.8快捷鍵功能225.2.9快捷鍵的限制235.2.10頁面的規(guī)性235.2.11系統(tǒng)易用性245.2.12輸入安全性要求255.2.13 獨(dú)特性要求265.2.14 多窗口的應(yīng)用與系統(tǒng)資源26 6 頁面編程技術(shù)使用規(guī)276.1 頁面元素命名276.2 dhtmlx控件 296.3 flex 控件 297 頁面資源規(guī)格說明307.1 圖標(biāo) 307.2 圖片 307.3 多媒體 30 8 附錄 318.1 基于 dhx的 css規(guī)格示例 318.1.1 表格 css示例 318.2 典型應(yīng)用的頁面

4、示例31引言目的本文用于規(guī)我公司所開發(fā)的商業(yè)軟件中對于web 頁面的設(shè)計(jì)工作，明確在設(shè)計(jì)中所要遵循的準(zhǔn)那么和方法，web頁面中各個元素的規(guī)格要求，確保所實(shí)現(xiàn)的web 頁面在風(fēng)格、結(jié)構(gòu)和功能上的統(tǒng)一，提升商業(yè)軟件的外在品質(zhì)。圍本規(guī)適用于公司所有的商業(yè)軟件產(chǎn)品?？s略術(shù)語dhml：x web 頁面的 ui 控件參考資料web頁面框架容頁面框架web的頁面框架是指構(gòu)成完整頁面的組織結(jié)構(gòu)。通常是由以下三局部構(gòu)成： head， main，foot ，有些時候出于布局的需要，在“ head下面還會加上用于頁面功能導(dǎo)航的“ menu。如圖：圖 1頁面布局 布局原那么對于 web應(yīng)用來說，頁面布局是和web 應(yīng)

5、用的功能區(qū)相對應(yīng)的，并且對于頁面中各個局部之間的切分比例也需要遵守一定的規(guī)那么。頁面布局的設(shè)計(jì)，首先需要考慮用戶在瀏覽web 頁面時視覺流向上的要求：圖 26 / 31從視覺流向上看，用戶首先看到的是頁面“head局部的左面，通常那里是標(biāo)識這個web應(yīng)用的 logo；然后是列web應(yīng)用主要功能的“menu來用于頁面導(dǎo)航；接下來用戶將看的是處于頁面左側(cè)的“sidebar ，通常這里也是用于頁面功能導(dǎo)航的，和“menu出的選擇相呼應(yīng)，這里的容可以通過類似樹狀結(jié)構(gòu)的方式展示更為詳細(xì)的功能；接下來是處于頁面中心位置的容局部，最后用戶的視線落在web頁面的底部。布局要求頁面分割以上面圖示的布局方式為例，

6、按照通常割比例的方法：web 頁面設(shè)計(jì)時所遵循的方法，并結(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ū)域大小的定義方式是不同的，請見下列圖：7 / 31圖 3在頁面布局中，對各個功能區(qū)域的切分是按照“像素和“比例方式來進(jìn)展的，以1024*768 的分辨率做為基準(zhǔn)，其中：head 區(qū)域，寬度

7、是按照比例方式設(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；頁面展現(xiàn)對于頁面布局來說，除了上述要求外，還需要考慮如下要求：

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

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

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

11、 ， css文件中的 font-family里面必須保證有“宋體。對于頁面屬性中字體大小的設(shè)置，需要容的不同級別來設(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)展定義。13 / 31表格使

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

13、容的字體；表格中相鄰行需要通過兩種有一定比照差異的淺色作為背景色； 各個頁面的表格邊框風(fēng)格需要統(tǒng)一，建議設(shè)置細(xì)邊框；表格中存在的文字需要采用不同于其他容的顏色或字體顯示；對于表格的嵌套盡量控制在三層以，并且禁止使用表格來進(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 的留白，便于用

14、戶換行時不受到干擾。文字和背景比照要足夠明顯，保證最弱文字的可讀性。在使用 <p>標(biāo)簽，需要對應(yīng)有 </p> ，并且要求設(shè)置 margin ，使得段落文字的前后左右能夠有適宜的空白區(qū)。可在 css中設(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 值而

15、導(dǎo)致的頁面排版問題，推薦所有標(biāo)簽定義為： margin: 0;當(dāng)采用豎排文字時，推薦使用 writing-mode 。通過設(shè)置兩個屬性值： lr-tb 和 tb-rl ， 并結(jié)合 direction 完成文字豎排， lr-tb 指的是文字方向?yàn)椋鹤?- 右、上 - 下， tb-rl 是指上 - 下、右 - 左。frameframe 是能夠?qū)⒁粋€web頁面切分成幾個窗口來顯示web容的一種頁面設(shè)計(jì)方法，切分后的每個窗口容是通過指向url來實(shí)現(xiàn)的。frame 的標(biāo)記是 <frameset> <frame，>而在使用 frame 時，通常需要將其放在網(wǎng)頁入口的 html 文件

16、中，而不必放入 <body>標(biāo)記。 <frameset>是用以劃分框窗的，每一框窗由一個 <frame> 標(biāo)記所標(biāo)示， <frame必> 須在 <frameset圍>中使用。其中：<frameset>稱框架標(biāo)記，用以宣告html文件為框架模式，并設(shè)定視窗如何分割。<frame>那么只是設(shè)定某一個框窗的參數(shù)屬性。使用 frame分割頁面，需要按照2.1 節(jié)“頁面布局中所描述的要求來設(shè)置<frameset>和<frame，> 以完成對頁面各個局部合理的切分。對于 <frameset和&

17、gt; <frame中> 的一些屬性設(shè)置，要求有：name，表示 frame 的名字，必須有定義；framespacing ，表示各個 frame 之間空白距離，要求設(shè)置為非零，通常設(shè)置為5；noresize ，表示是否允許使用者通過拖拉改變frame的大小，要求在frame設(shè)置此參數(shù)；scrolling，表示是否要顯示卷軸，要求設(shè)置為“auto marginhight，表示框架高度局部邊緣所保存的空間，要求設(shè)置？ marginwidth，表示框架寬度局部邊緣所保存的空間，要求設(shè)置？其他頁面元素按鈕，要求按鈕上顯示的文字能夠準(zhǔn)確表達(dá)功能含義；單項(xiàng)選擇框，默認(rèn)選擇一個，和所關(guān)聯(lián)的文字

18、的間距應(yīng)該在3px；多項(xiàng)選擇框，默認(rèn)全不選，所關(guān)聯(lián)的文字應(yīng)該能夠準(zhǔn)確表達(dá)選擇的含義，和控件的間距應(yīng)該在 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)格容包括：

19、布局，不僅僅是系統(tǒng)入口主頁的布局，而是所有頁面； 顏色，按照風(fēng)格主題來設(shè)置頁面中包含的顏色與其表現(xiàn)；頁面元素，按照風(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)的時候，在如下場景中采用頁面交互的方法有：信息填寫對輸入信息驗(yàn)證：如果需要校驗(yàn)填寫容，那么需要在輸入框失去焦點(diǎn)時進(jìn)展數(shù)據(jù)有效性的判斷，并在輸入框后給出提示。如圖

20、：對輸入信息提示：在一組需要被驗(yàn)證的數(shù)據(jù)填寫時，如果有必填項(xiàng)，需要在輸入框后面給出標(biāo)志，并對填入的規(guī)那么加以說明。如圖：如果輸入框有默認(rèn)的文字，當(dāng)輸入框獲得焦點(diǎn)時，需要將輸入框的文字處于全選狀態(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)后：- ：字體變粗、或字體變色、或背景變色，如圖：14 / 31鼠標(biāo)放上獲得焦點(diǎn)前：鼠標(biāo)放上獲得焦點(diǎn)后：-頁

21、簽 ：獲得焦點(diǎn)的頁簽顏色變化，或頁簽的大小和里面的字體變大，如圖：鼠標(biāo)放上獲得焦點(diǎn)前：鼠標(biāo)放上獲得焦點(diǎn)后：-輸入框 ，輸入框的邊框變色；鼠標(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)格在附錄中給出說明。頁面信息交互15 / 31操作結(jié)果確認(rèn)在提交數(shù)據(jù)，或是載有數(shù)據(jù)的頁面關(guān)閉，或其他需要和用戶進(jìn)展確認(rèn)交互的場景，需要軟件能夠提供

22、一個以彈出頁面形式，要求用戶確認(rèn)執(zhí)行結(jié)果的對話框，包含的情況有：提示確認(rèn)輸入信息正確：彈出對話框，并將已填寫的容列出，要求用戶確認(rèn)容的正確性，給出“確定和“取消的選擇按鈕；提示確認(rèn)數(shù)據(jù)更改是否保存：彈出對話框，提示當(dāng)前頁面容已經(jīng)改變，要求用戶確認(rèn)是否保存更改的信息，給出“是和“否的選擇按鈕；提示確認(rèn)當(dāng)前頁面的跳轉(zhuǎn)：彈出對話框，提示用戶正在跳轉(zhuǎn)到另外一個頁面，要求用戶確認(rèn)離開當(dāng)前頁面，給出“是和“否的選擇按鈕；確認(rèn)刪除數(shù)據(jù)容：彈出對話框，提示用戶刪除了當(dāng)前選擇的容，要求用戶確認(rèn)是否繼續(xù)刪除的操作，給出“確定和“取消的選擇按鈕；其他規(guī)那么對于信息交互過程中，其他需要遵守的規(guī)那么有：重要的命令按鈕與

23、使用較頻繁的按鈕要放在界面上相對固定的位置上；容易引起操作錯誤或使程序退出、關(guān)閉的按鈕應(yīng)不醒目，放在不易點(diǎn)位置； 與正在進(jìn)展的操作無關(guān)的按鈕應(yīng)該加以屏蔽，例如：按鈕背景為灰色顯示； 對可能造成數(shù)據(jù)無法恢復(fù)的操作必須提供確認(rèn)信息，給用戶放棄選擇的機(jī)會； 非法的輸入或操作應(yīng)有足夠的提示說明；對運(yùn)行過程中出現(xiàn)問題而引起錯誤的地方要有提示，讓用戶明白錯誤出處，防止形成無限期的等待；頁面信息提示在 web 頁面提供的功能中，很多情況需要系統(tǒng)發(fā)送一些必要的提示信息到頁面顯示給用戶，這些信息的分類有：警告信息禁止信息操作執(zhí)行成功信息操作執(zhí)行失敗信息錯誤信息幫助信息提示信息16 / 31這些信息在當(dāng)前頁面或彈

24、出頁面上顯示。如果采用彈出對話框的形式，對話框的頁面結(jié)構(gòu)如下列圖：標(biāo)題區(qū)圖標(biāo)區(qū)提示信息區(qū)按鈕 1按鈕 2標(biāo)題區(qū)：簡要給出此次提示信息的性質(zhì)，例如：警告：操作非法！ 圖標(biāo)區(qū)：給出和此次提示信息性質(zhì)匹配的圖標(biāo)；提示信息區(qū)：給出此次提示信息的具體容； 按鈕區(qū)：給出供用戶進(jìn)展選擇的按鈕；對于對話框的背景顏色，要求和系統(tǒng)的整體風(fēng)格選取的顏色一致，而右上角的操作區(qū)只保存關(guān)閉一個可操作功能，最小化和最大化的功能將不顯示。對應(yīng)采用的圖標(biāo)的圖例為： 警告信息：禁止操作信息： 操作成功信息： 操作失敗信息： 錯誤信息：幫助信息： 提示信息：提示信息容要求：31 / 31提示信息中如有標(biāo)點(diǎn)符號，統(tǒng)一為全角符號； 提

25、示信息如有主語，統(tǒng)一為您；在重要或復(fù)雜的操作成功后，給予提示信息；有后續(xù)操作的操作在成功后，也需給予提示信息，說明當(dāng)前的狀態(tài)。提示信息不宜太長，寬度應(yīng)不超過當(dāng)前窗口寬度的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)，遵循從左上至

26、右下的原那么；其他快捷鍵的支持，需要根據(jù)項(xiàng)目的實(shí)際情況來定義。web頁面通用規(guī)一般頁面功能新增當(dāng)新增一條或多條記錄，要求： 新增的記錄必須排在首頁首行。提交失敗后必須保存用戶已經(jīng)輸入的容，以便再次提交。 提交時需對主要標(biāo)識字段進(jìn)展重復(fù)值、空值空格判斷。新增容提交失敗后，須保存用戶修改的容，以便再次修改提交；需對主標(biāo)識字段進(jìn)展重復(fù)值、空值空格判斷； 修改當(dāng)進(jìn)展單條或多條記錄的修改時，要求：如界面存在復(fù)選按鈕，勾選多條記錄進(jìn)展修改時，每次只能對一條記錄進(jìn)展修改，默認(rèn)修改容為第一條的提示信息；修改后加載的容應(yīng)為的實(shí)際容，而不再為默認(rèn)值；修改完成后須回到原記錄所在位置，且刷新顯示修改后的值； 修改容提

27、交失敗后，須保存用戶修改的容，以便再次修改提交； 在查詢條件下修改后返回，如不滿足查詢條件那么不顯示；需對主標(biāo)識字段進(jìn)展重復(fù)值、空值空格判斷； 刪除當(dāng)刪除一條或多條記錄，要求：必須有確認(rèn)刪除的提示信息；刪除成功后刷新，不顯示刪除的記錄；刪除成功后，返回到原記錄所在頁面，如果原記錄所在頁不存在時，那么返回上一頁。當(dāng)被刪除的記錄與其他記錄存在關(guān)聯(lián)時，請示需求界面給予不允許刪除、更明細(xì)提示等信息；查詢當(dāng)按照條件查詢時，要求： 每次查詢后定位到原頁面；每次查詢后保存當(dāng)前查詢條件；當(dāng)查詢條件較多時，需要配置“重置按鈕提供使用；當(dāng)未查詢到任何記錄時，需給予未查找到相關(guān)記錄的提示信息； 除了用戶明確要求不需

28、要外，需提供模糊查詢與組合查詢功能； 取消當(dāng)進(jìn)展取消當(dāng)前修改并返回時，要求：在數(shù)據(jù)量較多的頁面中，當(dāng)進(jìn)展了修改后，取消請給予提示； 取消返回到原記錄所在狀態(tài)；保存當(dāng)保存容時，要求：當(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)在一個頁面上存在多個同類容的復(fù)選框時，

29、需要提供全選的功能，要求： 勾選全選，那么選中當(dāng)前頁面所有記錄；去掉當(dāng)前頁面某個記錄的勾選，那么全選也去掉勾選； 刷新頁面后，自動去掉已勾選的記錄與全選的勾選； 一般頁面規(guī)那么默認(rèn)值各個頁面都會存在默認(rèn)值。要求：打開一個新界面，光標(biāo)默認(rèn)停留在第一個待輸入的文本框中；當(dāng)選擇下拉框不存在默認(rèn)值時，那么默認(rèn)為“請選擇，當(dāng)存在默認(rèn)值時，請顯示默認(rèn)值；單項(xiàng)選擇按組鈕默認(rèn)值表單元素選擇表單元素選擇要求主要集中在 select,radio ： 性別， 5 個以下類別列表選擇用 radio 比擬適宜部門列表，用 select 比擬適宜必填值對界面必填項(xiàng)的要求：界面的必填項(xiàng)必須以紅色* 號標(biāo)識出來。當(dāng)必填項(xiàng)沒有

30、填寫時，可在光標(biāo)準(zhǔn)備移走時，在文本框后以“請輸入紅色文字標(biāo)識；當(dāng)界面排列較緊時，如果必填項(xià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)閉；子窗體的大小不能超過父窗體，且不要遮住父窗體的主要信息； 窗口嵌套針對多層頁面窗口的嵌套情況，要求：如果存在多層嵌套

31、頁面窗口，每層頁面窗口彈出時都自動往右下移動一點(diǎn)點(diǎn)，以保證不遮蓋上層頁面窗口標(biāo)題為準(zhǔn)；頁面窗口嵌套層次最好不超過3 層； 輸入框操作對于輸入框操作的限制，規(guī)那么是：只允許輸入數(shù)字的輸入框需要控制其它字符的輸入，或在輸入非法值時給予提示，或在輸入框不再捕獲非法值；只允許輸入日期、時間的輸入框需要通過格式化方式約束輸入，而不是輸入非法值后給出提示；當(dāng)輸入的容達(dá)到了字段的長度限制時，不顯示新輸入的的數(shù)值，并提示不允許再輸入，而不是保存后自動截?cái)?；在線幫助功能系統(tǒng)應(yīng)該提供詳盡而可靠的在線幫助文檔，在用戶使用產(chǎn)生迷惑時可以自己尋求解決方法。要求：幫助文檔中的性能介紹與說明要與系統(tǒng)性能配套一致；更新系統(tǒng)版

32、本時，對作了修改的地方在幫助文檔中要做相應(yīng)的修改； 操作時要提供與時調(diào)用幫助的快捷方式，常用f1；在界面上即時調(diào)用幫助時，應(yīng)該能夠與時定位到與該操作相對應(yīng)的幫助位置，也就是說幫助要有即時的針對性；最好提供目前流行的聯(lián)機(jī)幫助格式或html幫助格式；用戶可以用關(guān)鍵詞在幫助索引中搜索所要的幫助，當(dāng)然也應(yīng)該提供幫助索引； 如果沒有提供軟件書面的幫助文檔，最好能夠有打印幫助的功能；在幫助中應(yīng)該提供我們的技術(shù)支持方式，一旦用戶難以自己解決可以方便的尋求新的幫助方式； 菜單功能要求菜單是界面上最重要的元素，菜單位置按照按功能來組織。要求：菜單通常采用“常用- 主要 - 次要 - 工具 - 幫助的位置排列，符

33、合windows風(fēng)格的要求；常用的有“文件、“編輯，“查看等，需要系統(tǒng)有這些選項(xiàng)；下拉菜單要根據(jù)菜單項(xiàng)選擇項(xiàng)的含義進(jìn)展分組，并切按照一定的規(guī)那么進(jìn)展排列，用橫線隔開；一組菜單的使用有先后要求或有向?qū)ё饔脮r，應(yīng)該按先后次序排列；沒有順序要求的菜單項(xiàng)按使用頻率和重要性排列，常用的放在開頭，不常用的靠后放置；重要的放在開頭，次要的放在后邊；如果菜單項(xiàng)選擇項(xiàng)較多，應(yīng)該采用加長菜單的長度而減少深度的原那么排列； 菜單深度一般要求最多控制在三層以；對常用的菜單要有快捷命令方式，組合原那么見5.2.8 ；最好能夠?qū)驼谶M(jìn)展的操作無關(guān)的菜單項(xiàng)能夠屏蔽，也可采用動態(tài)加載方式即只有需要的菜單才顯示；菜單前的圖標(biāo)

34、不宜太大，與和相應(yīng)的字高保持一致； 主菜單的寬度要接近，字?jǐn)?shù)最好不應(yīng)多于四個；主菜單數(shù)目不應(yīng)太多，最好為單排布置；快捷鍵功能在菜單與按鈕中使用快捷鍵可以讓喜歡使用鍵盤的用戶操作得更快一些在windows 與其應(yīng)用軟件中的快捷鍵功能大多是一致的，可以根據(jù)實(shí)際情況考慮實(shí)現(xiàn)。要求：面向事務(wù)的組合有: ctrl-d刪除、 ctrl-f尋找、 ctrlh 替換、 ctrl-i插入、ctrl-n新記錄、 ctrl-s保存、 ctrl-o打開；列表 : ctrl-r、ctrl-g定位； ctrl-tab下一分頁窗口或反序?yàn)g覽同一頁面控件；編輯 : ctrl-a全選； ctrl-c拷貝； ctrl-v粘貼；

35、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 完畢應(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刪除； al

36、t-q退出； alt-a添加； alt-e編輯； alt-b瀏覽； alt-r讀； alt-w 寫。這些快捷鍵也可以作為開發(fā)中文應(yīng)用軟件的標(biāo)準(zhǔn)，但亦可使用漢語拼音的開頭字母；快捷鍵的限制由于 ie 本身的一些原因，需要防止一些不必要的錯誤，故對其進(jìn)展攔截限制。要求：在用戶沒有提供明確需求情況下，限制f5、ie 工具欄、退格鍵僅限頁面不限輸入框、 ctrl+n的使用；根據(jù)功能需要，限制右鍵菜單的使用；頁面的規(guī)性通常界面設(shè)計(jì)都按windows 界面的規(guī)來設(shè)計(jì)，即包含“菜單條、工具欄、工具廂、狀態(tài)欄、滾動條、右鍵快捷菜單的標(biāo)準(zhǔn)格式，可以說：界面遵循規(guī)化的程度越高，那 么易用性相應(yīng)的就越好。小型軟件一

37、般不提供工具廂。規(guī)要求：常用菜單要有命令快捷方式。完成一樣或相近功能的菜單用橫線隔開放在同一位置。菜單前的圖標(biāo)能直觀的代表要完成的操作。菜單深度一般要求最多控制在三層以。工具欄要求可以根據(jù)用戶的要求自己選擇定制。一樣或相近功能的工具欄放在一起。工具欄中的每一個按鈕要有與時提示信息。一條工具欄的長度最長不能超出屏幕寬度。工具欄的圖標(biāo)能直觀的代表要完成的操作。系統(tǒng)常用的工具欄設(shè)置默認(rèn)放置位置。工具欄太多時可以考慮使用工具廂。工具廂要具有可增減性，由用戶自己根據(jù)需求定制。工具廂的默認(rèn)總寬度不要超過屏幕寬度的 1/5 。狀態(tài)條要能顯示用戶切實(shí)需要的信息，常用的有：目前的操作、系統(tǒng)狀態(tài)、用戶位置、用戶信

38、息、提示信息、錯誤信息等，如果某一操作需要的時間較長，還應(yīng)該顯示進(jìn)度條和進(jìn)程提示。滾動條的長度要根據(jù)顯示信息的長度或?qū)挾饶芘c時變換，以利于用戶了解顯示信息的位置和百分比。狀態(tài)條的高度以放置五好字為宜，滾動條的寬度比狀態(tài)條的略窄。菜單和工具條要有清楚的界限; 菜單要求凸出顯示，這樣在移走工具條時仍有立體感。菜單和狀態(tài)條常使用5 號字體。工具條一般比菜單要寬，但不要寬的太多，否那么看起來很不協(xié)調(diào)。右鍵快捷菜單采用與菜單一樣的準(zhǔn)那么。系統(tǒng)易用性易用性是指頁面上的功能遵從慣例，例如：按鈕名稱易懂，用詞準(zhǔn)確，并與同一界面上的其他按鈕易于區(qū)分，能望文知意。這樣，使得用戶不用查閱幫助就能知道該頁面上的功能并

39、進(jìn)展相關(guān)的正確操作。要求：打開一個新界面，光標(biāo)默認(rèn)停留在第一個待輸入的文本框中；完成一樣或相近功能的按鈕放置在一起，減少鼠標(biāo)移動的距離，常用按鈕要支持快捷方式；按功能將界面劃分局域塊，用frame 框括起來，并要有功能說明或標(biāo)題； 界面要支持鍵盤自動瀏覽按鈕功能，即按tab 鍵的自動切換功能；界面上首先應(yīng)輸入的和重要信息的控件在tab 順序中應(yīng)當(dāng)靠前，位置也應(yīng)放在窗口上較醒目的位置；同一界面上的控件數(shù)最好不要超過10 個，多于 10 個時可以考慮使用分頁界面顯示； 分頁界面要支持在頁面間的快捷切換，常用組合快捷鍵ctrl+tab ；默認(rèn)按鈕要支持enter操作，即按enter后自動執(zhí)行默認(rèn)按鈕

40、對應(yīng)操作； 可寫控件檢測到非法輸入后應(yīng)給出說明并能自動獲得焦點(diǎn)；按鈕鍵的順序與控件排列順序要一直，目前流行總體從上到下，同時行間從左到右的方式；復(fù)選框和選項(xiàng)框按選擇幾率的高底而先后排列；復(fù)選框和選項(xiàng)框要有默認(rèn)選項(xiàng)，并支持tab 選擇； 選項(xiàng)數(shù)一樣時多用選項(xiàng)框而不用下拉列表框；界面空間較小時使用下拉框而不用選項(xiàng)框；選項(xiàng)數(shù)較少時使用選項(xiàng)框，相反使用下拉列表框；專業(yè)性強(qiáng)的軟件要使用相關(guān)的專業(yè)術(shù)語，通用性界面那么提倡使用通用性詞眼；輸入安全性要求在界面上需要建立一些規(guī)那么來控制輸入的出錯幾率，會大大減少系統(tǒng)因用戶人為的錯誤引起的破壞，開發(fā)者應(yīng)當(dāng)盡量周全地考慮到各種可能發(fā)生的問題，使出錯的可能降至最小，

41、例如：當(dāng)程序出現(xiàn)保護(hù)性錯誤而退出系統(tǒng)，會使用戶對軟件失去信心，因?yàn)檫@意味著用戶要中斷思路，并費(fèi)時費(fèi)力地重新登錄，而且已進(jìn)展的操作也會因沒有存盤而全部丟失。因此需要在頁面設(shè)計(jì)時應(yīng)對輸入按照規(guī)那么進(jìn)展校驗(yàn)。要求：排除可能會使程序非正常中止的錯誤； 應(yīng)當(dāng)檢查用戶錄入無效的數(shù)據(jù)；采用相關(guān)控件限制用戶輸入值的種類；當(dāng)用戶面臨的選擇是兩個或多個選一時，請采用單項(xiàng)選擇框，而當(dāng)選擇的可能再多一些時，可以采用復(fù)選框；當(dāng)選項(xiàng)特別多時，可以采用列表框，下拉式列表框； 確保未經(jīng)授權(quán)或沒有意義的操作不能進(jìn)展；對可能引起致命錯誤或系統(tǒng)出錯的輸入字符或動作要加限制或屏蔽；對可能發(fā)生嚴(yán)重后果的操作要有補(bǔ)救措施。通過補(bǔ)救措施用

42、戶可以回到原來的正確狀態(tài)；對一些特殊符號的輸入，與系統(tǒng)使用的符號相沖突的字符等進(jìn)展判斷并阻止用戶輸入該字符，并提前給出輸入提示；對錯誤操作最好支持可逆性處理，如取消系列操作；在輸入有效性字符之前應(yīng)該阻止用戶進(jìn)展只有輸入之后才可進(jìn)展的操作； 對可能造成等待時間較長的操作應(yīng)該提供取消功能；特殊字符常有； ;'"><， ' ：" " 、 | +=)-(_*&&%$#! ， . 。?/ 還有空格；在讀入用戶所輸入的信息時，應(yīng)根據(jù)需要選擇是否去掉前后空格，例如：有些讀入數(shù)據(jù)庫的字段不支持中間有空格，但用戶切實(shí)需要輸入中間空格，這時要在程序中加以處理；獨(dú)特性要求如果一味的遵循業(yè)界的界面標(biāo)準(zhǔn)，那么會喪失自己的個性. 在框架符合以上規(guī)的情況下，設(shè)計(jì)具有自己獨(dú)特風(fēng)格的界面尤為重要。尤其在商業(yè)軟件流通中有著很好的遷移默化的廣告效用要求：安裝界面上應(yīng)有單位介紹或產(chǎn)品介紹，并有自己的圖標(biāo)； 主界面，最好是大多數(shù)界面上要有公司圖標(biāo)；登錄界面上要有本產(chǎn)品的標(biāo)志，同時包含公司圖標(biāo)； 幫助菜單的 " 關(guān)于" 中應(yīng)有和產(chǎn)品信息；公司的系列產(chǎn)品要保持一致的界面風(fēng)格，如背