2022年Web頁面設計規(guī)范

1、web頁面設計規(guī)范編號：版 本 號：受控狀態(tài)：作者：分 發(fā) 號：精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 1 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 1 頁，共 28 頁 - - - - - - - - -文檔修改歷史記錄文檔修改記錄日 期版本號更改人更改內(nèi)容文檔審核記錄日 期版本號審核人審核意見精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 2 頁，共 28 頁 - - - - - - - - -

2、精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 2 頁，共 28 頁 - - - - - - - - -第 3 頁 共 28 頁目錄1引言 . 51.1目的 . 51.2范圍 . 51.3縮略術語 . 51.4參考資料 . 52web 頁面框架內(nèi)容 . 52.1頁面框架 . 52.2頁面布局 . 62.2.1布局原則 . 62.2.2布局要求 . 62.2.2.1頁面分割 . 62.2.2.2頁面結構 . 72.2.2.3頁面展現(xiàn) . 82.2.2.4頁面美化 . 82.3頁面字體 . 92.4邊距 . 92.5表格 . 92.6段落排版 . 102

3、.7frame. 102.8其他頁面元素 . 113頁面風格 . 113.1風格分類 . 113.2頁面風格應用 . 124web 頁面交互 . 124.1頁面元素焦點切換 . 124.1.1信息填寫 . 124.1.2鼠標交互響應 . 124.2頁面信息交互 . 144.2.1操作結果確認 . 144.2.2其他規(guī)則 . 144.3頁面信息提示 . 144.4鍵盤響應支持 . 165web 頁面通用規(guī)范 . 175.1一般頁面功能 . 175.1.1新增 . 175.1.2修改 . 175.1.3刪除 . 17精品學習資料 可選擇p d f - - - - - - - - - - - - -

4、 - 第 3 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 3 頁，共 28 頁 - - - - - - - - -第 4 頁 共 28 頁5.1.4查詢 . 175.1.5取消 . 185.1.6保存 . 185.1.7重置 . 185.1.8返回 . 185.1.9分頁 . 185.1.10全選 . 185.2一般頁面規(guī)則 . 185.2.1默認值 . 185.2.2必填值 . 195.2.3界面?zhèn)鬟f . 195.2.4窗口嵌套 . 195.2.5輸入框操作. 195.2.6在線幫助功能 .

5、205.2.7菜單功能要求 . 205.2.8快捷鍵功能. 215.2.9快捷鍵的限制 . 215.2.10頁面的規(guī)范性 . 215.2.11系統(tǒng)易用性. 225.2.12輸入安全性要求 . 235.2.13獨特性要求. 235.2.14多窗口的應用與系統(tǒng)資源 . 246頁面編程技術使用規(guī)范. 246.1頁面元素命名 . 246.2dhtmlx控件 . 266.3flex控件 . 267頁面資源規(guī)格說明. 267.1圖標 . 267.2圖片 . 277.3多媒體 . 278附錄 . 288.1基于 dhx 的 css 規(guī)格示例 . 288.1.1表格 css 示例 . 288.2典型應用的頁面

6、示例 . 28精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 4 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 4 頁，共 28 頁 - - - - - - - - -第 5 頁 共 28 頁1引言1.1 目的本文用于規(guī)范我公司所開發(fā)的商業(yè)軟件中對于web 頁面的設計工作，明確在設計中所要遵循的準則和方法，web 頁面中各個元素的規(guī)格要求，確保所實現(xiàn)的web 頁面在風格、結構和功能上的統(tǒng)一，提升商業(yè)軟件的外在品質(zhì)。1.2 范圍本規(guī)范適用于公司所有的商業(yè)軟

7、件產(chǎn)品。1.3 縮略術語dhmlx ：web 頁面的 ui 控件1.4 參考資料2web 頁面框架內(nèi)容2.1 頁面框架web 的頁面框架是指構成完整頁面的組織結構。通常是由以下三部分構成：head， main，foot，有些時候出于布局的需要，在“head”下面還會加上用于頁面功能導航的“menu” 。如圖：圖 1 精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 5 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 5 頁，共 28 頁 - - - - -

8、- - - -第 6 頁 共 28 頁2.2 頁面布局2.2.1 布局原則對于 web 應用來說， 頁面布局是和web 應用的功能區(qū)相對應的，并且對于頁面中各個部分之間的切分比例也需要遵守一定的規(guī)則。頁面布局的設計，首先需要考慮用戶在瀏覽web 頁面時視覺流向上的要求：圖 2 從視覺流向上看，用戶首先看到的是頁面“head”部分的左面，通常那里是標識這個web 應用的 logo；然后是陳列web 應用主要功能的“menu”來用于頁面導航；接下來用戶將看的是處于頁面左側的“sidebar” ，通常這里也是用于頁面功能導航的，和“menu”出的選擇相呼應， 這里的內(nèi)容可以通過類似樹狀結構的方式展示

9、更為詳細的功能；接下來是處于頁面中心位置的內(nèi)容部分，最后用戶的視線落在web 頁面的底部。2.2.2 布局要求2.2.2.1 頁面分割以上面圖示的布局方式為例，按照通常web 頁面設計時所遵循的方法，并結合黃金分割比例的方法：首先，將頁面按照3*3 的方式進行分割，如下圖：精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 6 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 6 頁，共 28 頁 - - - - - - - - -第 7 頁 共 28 頁在高度

10、方向上，對上部1/3 區(qū)域按照黃金分割的方法分出head和 menu 的區(qū)域；在寬度方向上，對中部左邊1/3 區(qū)域按照黃金分割的方法分出sidebar 的區(qū)域，剩下的空間留給content 區(qū)域；在高度方向上，對下部1/3 區(qū)域按照黃金分割的方法分出foot 的區(qū)域；2.2.2.2 頁面結構頁面的布局中，各個區(qū)域大小的定義方式是不同的，請見下圖：圖 3 在頁面布局中，對各個功能區(qū)域的切分是按照“像素”和“比例”方式來進行的，以1024*768 的分辨率做為基準，其中：head 區(qū)域， 寬度是按照比例方式設置的，寬度按照 100%設置， 高度采用所占的固精品學習資料 可選擇p d f - - -

11、 - - - - - - - - - - - 第 7 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 7 頁，共 28 頁 - - - - - - - - -第 8 頁 共 28 頁定像素值來確定的，一般占？px，如果有menu 區(qū)，則調(diào)整為？px；menu 區(qū)域，和 “head” 的配置要求是一樣的，寬度按照100%設置，高度結合“head”的高度設置來確定，一般占？px；sidebar 區(qū)域，寬度是結合與“content”之間的黃金切分比例，按照固定像素的方式確定的，一般占？px；高度是按照比例

12、方式來設置的；content 區(qū)域，高度和寬度方向布局都是按照比例方式來設置的；foot 區(qū)域，寬度按照100%設置，高度采用所占的固定像素值來確定的，一般占？px；2.2.2.3 頁面展現(xiàn)對于頁面布局來說，除了上述要求外，還需要考慮如下要求：能自適應1024*768、 800*600 兩種分辨率；界面層次不超過3 層；默認窗口設置下，不應出現(xiàn)水平、垂直滾動條；當界面內(nèi)容超出顯示區(qū)域時，以浮動層的形式顯示；還有， 對于用戶的感官而言，屏幕對角線相交的位置是用戶直視的地方，而頁面正上方四分之一處為易吸引用戶注意力的位置，所以在放置頁面時要注意利用這兩個位置。要求：父頁面或主頁面的中心位置應該設計

13、在對角線焦點附近；子頁面的位置應該靠近主窗體的左上角或正中；需要多個子頁面彈出時，應該依次向右下方偏移，以顯示窗體出標題為宜；在頁面上方四分之一處放置用戶的logo 、主要功能導航和一些系統(tǒng)操作功能；2.2.2.4 頁面美化界面應該大小適合美學觀點，感覺協(xié)調(diào)舒適，能在有效的范圍內(nèi)吸引用戶的注意力。建議和要求：長寬接近黃金點比例，切忌長寬比例失調(diào)、或?qū)挾瘸^長度；布局要合理，不宜過于密集，也不能過于空曠，合理的利用空間；同一頁面上的按鈕大小應該一致，不同頁面的按鈕大小盡量相近，按鈕上忌用太長的名稱；按鈕的大小要與界面的大小和空間要協(xié)調(diào)；避免空曠的界面上放置很大的按鈕；放置完控件后界面不應有很大的

14、空缺位置；字體的大小要與界面的大小比例協(xié)調(diào)，通常使用的字體12px；前景與背景色搭配合理協(xié)調(diào)，反差不宜太大， 主色要柔和， 最好少用深色， 如大紅、大綠等，可以借用windows界面色調(diào)；大型系統(tǒng)常用的主色有#e1e1e1、#efefef、#c0c0c0等；界面風格要保持一致，字的大小、 顏色、 字體要相同， 需要藝術處理或有特殊要求的地方建議使用圖片表現(xiàn)；如果窗體支持最大化或放大時，窗體上的控件也要隨著窗體而縮放；切忌只放大窗體而忽略控件的縮放；系統(tǒng)對話框頁面不應該支持縮放，即右上角只有關閉功能；精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 8

15、頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 8 頁，共 28 頁 - - - - - - - - -第 9 頁 共 28 頁通常父窗體支持縮放時，子窗體沒有必要縮放；如果能給用戶提供自定義界面風格，則由用戶自己選擇顏色、字體等；2.3 頁面字體頁面字體屬性的設置在相應的css 中進行定義，頁面文字編碼要求是utf-8 ，在規(guī)定字體屬性時，需要設置：中文采用“宋體”，英文采用“ arial ”或“ verdana” ， css 文件中的 font-family 里面必須保證有“宋體”。對于頁面屬性

16、中字體大小的設置，需要內(nèi)容的不同級別來設置，通常：“head”中標題文字，20px；“menu”中的導航文字，14px；“sidebar”中的文字， 12px；“content”中的正文， 12px 或 14px，標題；“foot”中的文字，12px 或 10px；有關頁面字體屬性的具體設置參見附錄中的css 示例。2.4 邊距web 頁面和其中的表格都應該設定邊距，避免頁面元素緊貼邊沿的情況發(fā)生，最小邊距值為“ 3px” ，默認邊距值應在css 中設定。例如：圖 4 2.5 表格對于表格，其屬性的設置同樣在css中進行定義。表格使用最多的情況是顯示裝在的數(shù)據(jù)，由于有很多表項需要在頁面中完整顯

17、示，因此原則上對于表格各個單元格寬度的設置應采用百分比方式來進行，這樣表格不僅能夠?qū)?shù)據(jù)完整地顯示， 而且還能夠適應不同分辨率的情況。但由于表格中存在不定長的內(nèi)容，所以為了保證表格的寬度不被擠變形，對于不定長的內(nèi)容，可固定顯示寬度， 當超出此顯示寬度后，以顯示，光標停留后，詳細內(nèi)容再在浮動層顯示。其他要求：精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 9 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 9 頁，共 28 頁 - - - - - - - -

18、 -第 10 頁 共 28 頁表頭中的數(shù)據(jù)應水平/垂直居中對齊。表單中內(nèi)容如為定長，則為居中顯示；如為不固定的中英文內(nèi)容，則為居左顯示；如為數(shù)值形式，則為居右顯示。表格的表頭應采用不同于表格內(nèi)容的背景顏色，并要求對比明顯；表格表頭的文字應采用加粗，或不同于表格內(nèi)容的字體；表格中相鄰行需要通過兩種有一定對比差異的淺色作為背景色；各個頁面的表格邊框風格需要統(tǒng)一，建議設置細邊框；表格中存在的鏈接文字需要采用不同于其他內(nèi)容的顏色或字體顯示；對于表格的嵌套盡量控制在三層以內(nèi)，并且禁止使用表格來進行頁面布局。有關表格屬性的具體設置請參見附錄中的css 示例。2.6 段落排版在 web 頁面中，“conte

19、nt”部分是展示頁面正文的區(qū)域，當段落是由純文字構成時：正文一行字數(shù)最好不超過50，首頁的標題文字以8-20 字為佳。行距建議用百分比來定義，常用的兩個行距的值是line-height:120% 或 150%；對于一段文字，尤其是正文部分，保證左右至少有15px 的留白，便于用戶換行時不受到干擾。文字和背景對比要足夠明顯，保證最弱文字的可讀性。在使用 標簽，需要對應有，并且要求設置margin，使得段落文字的前后左右能夠有合適的空白區(qū)?？稍赾ss 中設置： p margin: 18px 6px 6px 18px;，分別定義了上、右、下、左的空白區(qū)大小。首行縮進時， 禁止使用 “&nbs

20、p;” ，而是在 css 中設置 text-indent，例如： p text-indent: 2em; 。在一段完整的文字中請盡量不要使用 來人工干預分段；對于 margin，為了防止由于采用默認的margin 值而導致的頁面排版問題，推薦所有標簽定義為： margin: 0; 當采用豎排文字時，推薦使用writing-mode 。通過設置兩個屬性值：lr-tb 和 tb-rl ，并結合 direction 完成文字豎排，lr-tb 指的是文字方向為：左-右、上 -下， tb-rl 是指上 -下、右 -左。2.7 frame frame是能夠?qū)⒁粋€web 頁面切分成幾個窗口來顯示web 內(nèi)容

21、的一種頁面設計方法，切分后的每個窗口內(nèi)容是通過指向url 來實現(xiàn)的。frame 的標記是 ，而在使用frame 時，通常需要將其放在網(wǎng)頁入口的html 文件中，而不必放入 標記。 是用以劃分框窗的，每一框窗由一個 標記所標示， 必須在 范圍中使用。其中： 稱框架標記，用以宣告html文件為框架模式，并設定視窗如何分割。精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 10 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 10 頁，共 28 頁 - - - -

22、 - - - - -第 11 頁 共 28 頁 則只是設定某一個框窗內(nèi)的參數(shù)屬性。使用 frame 分割頁面，需要按照 2.1 節(jié) “頁面布局”中所描述的要求來設置 和 ，以完成對頁面各個部分合理的切分。對于 和 中的一些屬性設置，要求有：name，表示 frame 的名字，必須有定義；framespacing，表示各個frame之間空白距離，要求設置為非零，通常設置為5；noresize，表示是否允許使用者通過拖拉改變frame 的大小，要求在frame設置此參數(shù)；scrolling ，表示是否要顯示卷軸，要求設置為“auto ”marginhight ，表示框架高度部分邊緣所保留的空間，要

23、求設置？marginwidth ，表示框架寬度部分邊緣所保留的空間，要求設置？2.8 其他頁面元素按鈕，要求按鈕上顯示的文字能夠準確表達功能含義；單選框，默認選擇一個，和所關聯(lián)的文字的間距應該在3px；多選框， 默認全不選， 所關聯(lián)的文字應該能夠準確表達選擇的含義，和控件的間距應該在 3px；下拉框，給出默認選擇，并且默認選擇顯示出“默認全部”或“請選擇”等文字提示；圖片，默認為顯示出代表圖片文件的圖標，或是縮略圖；多媒體，默認為顯示出代表多媒體文件的圖標；有關這些頁面元素的具體屬性設置請參見附錄中的css 示例。3頁面風格web 頁面的風格是指web 頁面通過對頁面布局、字體、配色、頁面元素

24、排列的融合來傳達給用戶的、含有主觀感受。頁面風格的選取除了需要考慮一般的用戶感受外，還需要將用戶所在環(huán)境的因素考慮進去，從而形成符合特定用戶要求的頁面風格。3.1 風格分類web 應用的頁面風格內(nèi)容包括：布局，不僅僅是系統(tǒng)入口主頁的布局，而是所有頁面；顏色，按照風格主題來設置頁面中包含的顏色及其表現(xiàn)；頁面元素，按照風格主題來確定頁面元素的大小、形狀和交互響應行為；圖標，按照風格主題來定制表示各類功能的圖標；精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 11 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d f - -

25、- - - - - - - - - - - - 第 11 頁，共 28 頁 - - - - - - - - -第 12 頁 共 28 頁提示窗口，是頁面交互的主要形式，需要按照風格主題來定制；具體風格分類的定義，待定。3.2 頁面風格應用具體風格應用的定義，待定。4web 頁面交互4.1 頁面元素焦點切換在 web 頁面中，為了提高和用戶之間的互動，需要在各類頁面元素獲得焦點和失去焦點的時候，在如下場景中采用頁面交互的方法有：4.1.1 信息填寫對輸入信息驗證：如果需要校驗填寫內(nèi)容，則需要在輸入框失去焦點時進行數(shù)據(jù)有效性的判斷，并在輸入框后給出提示。如圖：對輸入信息提示：在一組需要被驗證的數(shù)據(jù)

26、填寫時，如果有必填項， 需要在輸入框后面給出標志，并對填入的規(guī)則加以說明。如圖：如果輸入框內(nèi)有默認的文字，當輸入框獲得焦點時，需要將輸入框內(nèi)的文字處于全選狀態(tài)。如圖：4.1.2 鼠標交互響應對鼠標在頁面中所產(chǎn)生的事件進行處理，當頁面元素獲得焦點、被點擊、失去焦點時，精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 12 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 12 頁，共 28 頁 - - - - - - - - -第 13 頁 共 28 頁則需要控

27、件本身在顏色、大小或形狀上的變化給與響應，亦可以添加聲音響應。下面是各種情況下的鼠標交互示例：例如：- 按鈕 ：按鈕顏色改變、或形狀，或字體改變，如圖：鼠標放上獲得焦點前：鼠標放上獲得焦點后：- 鏈接 ：字體變粗、或字體變色、或背景變色，如圖：鼠標放上獲得焦點前：鼠標放上獲得焦點后：- 頁簽 ：獲得焦點的頁簽顏色變化，或頁簽的大小和里面的字體變大，如圖：鼠標放上獲得焦點前：鼠標放上獲得焦點后：- 輸入框 ，輸入框的邊框變色；鼠標放上獲得焦點前：鼠標放上獲得焦點后：- 表格 ，表格中行的底色改變；鼠標放上獲得焦點前：鼠標放上獲得焦點后：- 等待響應 ：當由于載入大量數(shù)據(jù)等原因，使得用戶需要等待一

28、定時間，需要將鼠標指針的形狀變成時間漏斗的形狀、或其他表示鼠標不可操作的樣子來提醒用戶等待。如圖：精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 13 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 13 頁，共 28 頁 - - - - - - - - -第 14 頁 共 28 頁對于我們所使用的有關鼠標交互響應的規(guī)范，將結合頁面風格在附錄中給出說明。4.2 頁面信息交互4.2.1 操作結果確認在提交數(shù)據(jù)， 或是載有數(shù)據(jù)的頁面關閉，或其他需要和用戶進行確

29、認交互的場景，需要軟件能夠提供一個以彈出頁面形式，要求用戶確認執(zhí)行結果的對話框，包含的情況有：提示確認輸入信息正確：彈出對話框， 并將已填寫的內(nèi)容列出，要求用戶確認內(nèi)容的正確性，給出“確定”和“取消”的選擇按鈕；提示確認數(shù)據(jù)更改是否保存：彈出對話框， 提示當前頁面內(nèi)容已經(jīng)改變，要求用戶確認是否保存更改的信息，給出“是”和“否”的選擇按鈕；提示確認當前頁面的跳轉：彈出對話框， 提示用戶正在跳轉到另外一個頁面，要求用戶確認離開當前頁面，給出“是”和“否”的選擇按鈕；確認刪除數(shù)據(jù)內(nèi)容：彈出對話框， 提示用戶刪除了當前選擇的內(nèi)容，要求用戶確認是否繼續(xù)刪除的操作，給出“確定”和“取消”的選擇按鈕；4.2

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

31、作執(zhí)行失敗信息錯誤信息精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 14 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 14 頁，共 28 頁 - - - - - - - - -第 15 頁 共 28 頁幫助信息提示信息這些信息在當前頁面或彈出頁面上顯示。如果采用彈出對話框的形式，對話框的頁面結構如下圖：標題區(qū)：簡要給出此次提示信息的性質(zhì)，例如：警告：操作非法！圖標區(qū)：給出和此次提示信息性質(zhì)匹配的圖標；提示信息區(qū)：給出此次提示信息的具體內(nèi)容；按鈕區(qū)：給

32、出供用戶進行選擇的按鈕；對于對話框的背景顏色，要求和系統(tǒng)的整體風格選取的顏色一致，而右上角的操作區(qū)只保留關閉一個可操作功能，最小化和最大化的功能將不顯示。對應采用的圖標的圖例為：警告信息：禁止操作信息：操作成功信息：圖標區(qū)按鈕1 按鈕2 標題區(qū)提示信息區(qū)精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 15 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 15 頁，共 28 頁 - - - - - - - - -第 16 頁 共 28 頁操作失敗信息：錯誤信

33、息：幫助信息：提示信息：提示信息內(nèi)容要求：提示信息中如有標點符號，統(tǒng)一為全角符號；提示信息如有主語，統(tǒng)一為 您 ；在重要或復雜的操作成功后，給予提示信息；有后續(xù)操作的操作在成功后，也需給予提示信息，說明當前的狀態(tài)。提示信息不宜太長，寬度應不超過當前窗口寬度的1/2 ，當超過此比例時，請視具體情況進行換行；當功能按鈕為圖片按鈕時，光標停留需給予浮動提示信息；4.4 鍵盤響應支持由于用戶有時候還需要結合鍵盤進行操作，所以頁面需要提供一些簡單的鍵盤支持，例如：“ esc” 、 “enter” 、 “tab” “space” ，系統(tǒng)應對這些鍵值作出響應。其中：esc， “取消”當前操作；精品學習資料

34、可選擇p d f - - - - - - - - - - - - - - 第 16 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 16 頁，共 28 頁 - - - - - - - - -第 17 頁 共 28 頁enter， “確認”或進行下一步操作或提交；tab、或 shift+tab能夠在頁面元素中按照一定次序切換焦點，遵循從左上至右下的原則；其他快捷鍵的支持，需要根據(jù)項目的實際情況來定義。5web 頁面通用規(guī)范5.1 一般頁面功能5.1.1 新增當新增一條或多條記錄，要求：新增的記錄必須排

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

36、段進行重復值、空值（空格）判斷；5.1.3 刪除當刪除一條或多條記錄，要求：必須有確認刪除的提示信息；刪除成功后刷新，不顯示刪除的記錄；刪除成功后， 返回到原記錄所在頁面，如果原記錄所在頁不存在時，則返回上一頁。當被刪除的記錄與其他記錄存在關聯(lián)時，請示需求界面給予不允許刪除、更明細提示等信息；5.1.4 查詢當按照條件查詢時，要求：每次查詢后定位到原頁面；每次查詢后保留當前查詢條件；精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 17 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d f - - - - - - - -

37、- - - - - - 第 17 頁，共 28 頁 - - - - - - - - -第 18 頁 共 28 頁當查詢條件較多時，需要配置“重置”按鈕提供使用；當未查詢到任何記錄時，需給予未查找到相關記錄的提示信息；除了用戶明確要求不需要外，需提供模糊查詢及組合查詢功能；5.1.5 取消當進行取消當前修改并返回時，要求：在數(shù)據(jù)量較多的頁面中，當進行了修改后，取消請給予提示；取消返回到原記錄所在狀態(tài)；5.1.6 保存當保存內(nèi)容時，要求：當保存所費的時間較長時，需給出保存進度界面的提示；須控制不可以重復保存；5.1.7 重置重置是恢復變更前的狀態(tài)，要求：必須保證重置后與初始進入此頁面時一致性；5.

38、1.8 返回當需要返回前一個頁面時，要求：當從一個頁面點擊按鈕或鏈接進入子頁面時，子頁面必須提供返回按鈕；5.1.9 分頁當需要分頁顯示數(shù)據(jù)時，要求：當對查詢結果進行分頁時，分頁的同時需要能夠執(zhí)行查詢功能；當頁數(shù)較多時，允許輸入具體頁數(shù)進行查詢；5.1.10 全選當在一個頁面上存在多個同類內(nèi)容的復選框時，需要提供全選的功能，要求：勾選全選，則選中當前頁面所有記錄；去掉當前頁面某個記錄的勾選，則全選也去掉勾選；刷新頁面后，自動去掉已勾選的記錄及全選的勾選；5.2 一般頁面規(guī)則5.2.1 默認值各個頁面都會存在默認值。要求：精品學習資料 可選擇p d f - - - - - - - - - - -

39、 - - - 第 18 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 18 頁，共 28 頁 - - - - - - - - -第 19 頁 共 28 頁打開一個新界面，光標默認停留在第一個待輸入的文本框中；當選擇下拉框不存在默認值時，則默認為 “ 請選擇 ” ，當存在默認值時，請顯示默認值；單選按組鈕默認值5.2.2 表單元素選擇表單元素選擇要求主要集中在select,radio：性別， 5 個以下類別列表選擇用radio比較合適部門列表，用select比較合適5.2.3 必填值對界面必填項的要

40、求：界面的必填項必須以紅色*號標識出來。當必填項沒有填寫時，可在光標準備移走時，在文本框后以“ 請輸入 ” 紅色文字標識；當界面排列較緊時，如果必填項沒有填，可以通過彈出信息的方式來提示，或者光標移走時彈出， 或者最后提交時彈出。但確定后必須停留在第一個待輸入的文本框中；5.2.4 界面?zhèn)鬟f對于程序執(zhí)行過程中，會出現(xiàn)父窗體與子窗體參數(shù)同步傳遞的情況，規(guī)則是：當父窗體與子窗體都存在同樣的查詢條件時，父窗體已輸入的查詢條件必須被帶到子窗體中；當子窗體的任何操作影響了父窗體的數(shù)據(jù)時，子窗體關閉返回， 但必須刷新父窗體的數(shù)據(jù)；關閉父窗體必須連同子窗體一同關閉；子窗體的大小不能超過父窗體，且不要遮住父窗

41、體的主要信息；5.2.5 窗口嵌套針對多層頁面窗口的嵌套情況，要求：如果存在多層嵌套頁面窗口，每層頁面窗口彈出時都自動往右下移動一點點，以保證不遮蓋上層頁面窗口標題為準；頁面窗口嵌套層次最好不超過3 層；5.2.6 輸入框操作對于輸入框操作的限制，規(guī)則是：只允許輸入數(shù)字的輸入框需要控制其它字符的輸入，或在輸入非法值時給予提示，或在輸入框內(nèi)不再捕獲非法值；只允許輸入日期、時間的輸入框需要通過格式化方式約束輸入，而不是輸入非法值精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 19 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p

42、 d f - - - - - - - - - - - - - - 第 19 頁，共 28 頁 - - - - - - - - -第 20 頁 共 28 頁后給出提示；當輸入的內(nèi)容達到了字段的長度限制時，不顯示新輸入的的數(shù)值，并提示不允許再輸入，而不是保存后自動截斷；5.2.7 在線幫助功能系統(tǒng)應該提供詳盡而可靠的在線幫助文檔，在用戶使用產(chǎn)生迷惑時可以自己尋求解決方法。要求：幫助文檔中的性能介紹與說明要與系統(tǒng)性能配套一致；更新系統(tǒng)版本時，對作了修改的地方在幫助文檔中要做相應的修改；操作時要提供及時調(diào)用幫助的快捷方式，常用f1；在界面上即時調(diào)用幫助時，應該能夠及時定位到與該操作相對應的幫助位置，也

43、就是說幫助要有即時的針對性；最好提供目前流行的聯(lián)機幫助格式或html 幫助格式；用戶可以用關鍵詞在幫助索引中搜索所要的幫助，當然也應該提供幫助索引；如果沒有提供軟件書面的幫助文檔，最好能夠有打印幫助的功能；在幫助中應該提供我們的技術支持方式，一旦用戶難以自己解決可以方便的尋求新的幫助方式；5.2.8 菜單功能要求菜單是界面上最重要的元素，菜單位置按照按功能來組織。要求：菜單通常采用“ 常用 - 主要 - 次要 - 工具 - 幫助 ” 的位置排列， 符合 windows風格的要求；常用的有 “ 文件 ” 、“ 編輯 ” ，“ 查看 ” 等，需要系統(tǒng)有這些選項；下拉菜單要根據(jù)菜單選項的含義進行分組

44、，并切按照一定的規(guī)則進行排列，用橫線隔開；一組菜單的使用有先后要求或有向?qū)ё饔脮r，應該按先后次序排列；沒有順序要求的菜單項按使用頻率和重要性排列，常用的放在開頭，不常用的靠后放置；重要的放在開頭，次要的放在后邊；如果菜單選項較多，應該采用加長菜單的長度而減少深度的原則排列；菜單深度一般要求最多控制在三層以內(nèi)；對常用的菜單要有快捷命令方式，組合原則見5.2.8 ；最好能夠?qū)驼谶M行的操作無關的菜單項能夠屏蔽，也可采用動態(tài)加載方式即只有需要的菜單才顯示；菜單前的圖標不宜太大，與和相應的字高保持一致；主菜單的寬度要接近，字數(shù)最好不應多于四個；主菜單數(shù)目不應太多，最好為單排布置；精品學習資料 可選擇

45、p d f - - - - - - - - - - - - - - 第 20 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 20 頁，共 28 頁 - - - - - - - - -第 21 頁 共 28 頁5.2.9 快捷鍵功能在菜單及按鈕中使用快捷鍵可以讓喜歡使用鍵盤的用戶操作得更快一些在windows及其應用軟件中的快捷鍵功能大多是一致的，可以根據(jù)實際情況考慮實現(xiàn)。要求：面向事務的組合有: ctrl-d 刪除、 ctrl-f 尋找、 ctrl h替換、 ctrl-i 插入、ctrl-n 新記

46、錄、 ctrl-s 保存、 ctrl-o 打開；列表 : ctrl-r 、 ctrl-g定位； ctrl-tab下一分頁窗口或反序瀏覽同一頁面控件；編輯 : ctrl-a全選；ctrl-c 拷貝；ctrl-v 粘貼； ctrl-x 剪切；ctrl-z撤消操作；ctrl-y恢復操作；文件操作 : ctrl-p 打?。?ctrl-w 關閉；系統(tǒng)菜單 :alt-a文件； alt-e編輯； alt-t工具； alt w窗口； alt h幫助。ms windows保留鍵 : ctrl-esc 任務列表；ctrl-f4 關閉窗口； alt-f4 結束應用；alt-tab 下一應用；enter 缺省按鈕 /

47、 確認操作；esc 取消按鈕 / 取消操作；shift-f1 上下文相關幫助；按鈕中： 可以根據(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ā)中文應用軟件的標準，但亦可使用漢語拼音的開頭字母；5.2.10 快捷鍵的限制由于 ie本身的一些原因，需要避免一些不必要的錯誤，故對其進行攔截限制。要求：在用戶沒有提供明確需求情況下，限制f5、ie 工具欄、退格鍵（僅限頁面不限輸入框）、 ctrl+n 的使用；

48、根據(jù)功能需要，限制右鍵菜單的使用；5.2.11 頁面的規(guī)范性通常界面設計都按windows界面的規(guī)范來設計，即包含“ 菜單條、工具欄、工具廂、狀態(tài)欄、滾動條、右鍵快捷菜單” 的標準格式，可以說：界面遵循規(guī)范化的程度越高，則易用性相應的就越好。小型軟件一般不提供工具廂。規(guī)范要求：常用菜單要有命令快捷方式。完成相同或相近功能的菜單用橫線隔開放在同一位置。菜單前的圖標能直觀的代表要完成的操作。菜單深度一般要求最多控制在三層以內(nèi)。工具欄要求可以根據(jù)用戶的要求自己選擇定制。相同或相近功能的工具欄放在一起。工具欄中的每一個按鈕要有及時提示信息。一條工具欄的長度最長不能超出屏幕寬度。工具欄的圖標能直觀的代表

49、要完成的操作。精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 21 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 21 頁，共 28 頁 - - - - - - - - -第 22 頁 共 28 頁系統(tǒng)常用的工具欄設置默認放置位置。工具欄太多時可以考慮使用工具廂。工具廂要具有可增減性，由用戶自己根據(jù)需求定制。工具廂的默認總寬度不要超過屏幕寬度的1/5 。狀態(tài)條要能顯示用戶切實需要的信息，常用的有：目前的操作、系統(tǒng)狀態(tài)、用戶位置、用戶信息、提示信息、錯誤信

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

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

52、鈕對應操作；可寫控件檢測到非法輸入后應給出說明并能自動獲得焦點；按鈕鍵的順序與控件排列順序要一直，目前流行總體從上到下，同時行間從左到右的方式；復選框和選項框按選擇幾率的高底而先后排列；復選框和選項框要有默認選項，并支持tab 選擇；選項數(shù)相同時多用選項框而不用下拉列表框；界面空間較小時使用下拉框而不用選項框；選項數(shù)較少時使用選項框，相反使用下拉列表框；專業(yè)性強的軟件要使用相關的專業(yè)術語，通用性界面則提倡使用通用性詞眼；精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 22 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d

53、 f - - - - - - - - - - - - - - 第 22 頁，共 28 頁 - - - - - - - - -第 23 頁 共 28 頁5.2.13 輸入安全性要求在界面上需要建立一些規(guī)則來控制輸入的出錯幾率，會大大減少系統(tǒng)因用戶人為的錯誤引起的破壞，開發(fā)者應當盡量周全地考慮到各種可能發(fā)生的問題，使出錯的可能降至最小，例如： 當程序出現(xiàn)保護性錯誤而退出系統(tǒng)，會使用戶對軟件失去信心，因為這意味著用戶要中斷思路， 并費時費力地重新登錄，而且已進行的操作也會因沒有存盤而全部丟失。因此需要在頁面設計時應對輸入按照規(guī)則進行校驗。要求：排除可能會使程序非正常中止的錯誤；應當檢查用戶錄入無效的

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

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

56、于 中應有版權和產(chǎn)品信息；公司的系列產(chǎn)品要保持一致的界面風格，如背景色、字體、菜單排列方式、圖標、安裝過程、按鈕用語等應該大體一致；精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 23 頁，共 28 頁 - - - - - - - - -精品學習資料 可選擇p d f - - - - - - - - - - - - - - 第 23 頁，共 28 頁 - - - - - - - - -第 24 頁 共 28 頁5.2.15 多窗口的應用與系統(tǒng)資源設計良好的軟件不僅要有完備的功能，而且要盡可能的占用最低限度的資源，因此在出現(xiàn)多窗口的情況下需要避免下述一些情況。要求：在多窗口系統(tǒng)中，有些界面要求必須保持在最頂層，避免用戶在打開多個窗口時，不停的切換甚至最小化其他窗口來顯示該窗口；在主界面載入完畢后自動卸出內(nèi)存，讓出所占用的windows 系統(tǒng)資源；關閉所有窗體，系統(tǒng)退出后要釋放所占的所有系統(tǒng)資源，除非是需要后臺運行的系統(tǒng)；盡量防止對系統(tǒng)的獨占使用；6頁面編程技術使用規(guī)范6.1 頁面元素命名在使用 javascript 來進行頁面動態(tài)控制編程時，需要對程序中的頁面元素和功能操作的名稱引用進行約定：頁 頭：header 外 套：wrap 頁 腳：foot 內(nèi) 容：c