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

1、Web 頁面設(shè)計規(guī)范 第 2 頁 共 27 頁目目 錄錄1 1引言引言.4 41.1目的.41.2范圍.41.3縮略術(shù)語.41.4參考資料.42 2WEBWEB 頁面框架內(nèi)容頁面框架內(nèi)容 .4 42.1頁面框架.42.2頁面布局.52.2.1布局原則.52.2.2布局要求.52.2.2.1 頁面分割.52.2.2.2 頁面結(jié)構(gòu).62.2.2.3 頁面展現(xiàn).72.2.2.4 頁面美化.72.3頁面字體.82.4邊距.82.5表格.82.6段落排版.92.7FRAME.92.8其他頁面元素.103 3頁面風格頁面風格.10103.1風格分類.103.2頁面風格應(yīng)用.114 4WEBWEB 頁面交互

2、頁面交互 .11114.1頁面元素焦點切換.114.1.1信息填寫.114.1.2鼠標交互響應(yīng).114.2頁面信息交互.134.2.1操作結(jié)果確認.134.2.2其他規(guī)則.134.3頁面信息提示.134.4鍵盤響應(yīng)支持.155 5WEBWEB 頁面通用規(guī)范頁面通用規(guī)范 .16165.1一般頁面功能.165.1.1新增.165.1.2修改.165.1.3刪除.16 第 3 頁 共 27 頁5.1.4查詢.165.1.5取消.175.1.6保存.175.1.7重置.175.1.8返回.175.1.9分頁.175.1.10全選.175.2一般頁面規(guī)則.175.2.1默認值.175.2.2必填值.18

3、5.2.3界面?zhèn)鬟f.185.2.4窗口嵌套.185.2.5輸入框操作.185.2.6在線幫助功能.185.2.7菜單功能要求.195.2.8快捷鍵功能.195.2.9快捷鍵的限制.205.2.10頁面的規(guī)范性.205.2.11系統(tǒng)易用性.215.2.12輸入安全性要求.215.2.13獨特性要求.225.2.14多窗口的應(yīng)用與系統(tǒng)資源.226 6頁面編程技術(shù)使用規(guī)范頁面編程技術(shù)使用規(guī)范.23236.1頁面元素命名.236.2DHTMLX控件 .246.3FLEX控件.257 7頁面資源規(guī)格說明頁面資源規(guī)格說明.25257.1圖標.257.2圖片.257.3多媒體.268 8附錄附錄.27278

4、.1基于 DHX 的 CSS 規(guī)格示例.278.1.1表格 CSS 示例.278.2典型應(yīng)用的頁面示例.27 第 4 頁 共 27 頁1引言引言1.1 目的目的本文用于規(guī)范我公司所開發(fā)的商業(yè)軟件中對于 web 頁面的設(shè)計工作，明確在設(shè)計中所要遵循的準則和方法，web 頁面中各個元素的規(guī)格要求，確保所實現(xiàn)的 web 頁面在風格、結(jié)構(gòu)和功能上的統(tǒng)一，提升商業(yè)軟件的外在品質(zhì)。1.2 范圍范圍本規(guī)范適用于公司所有的商業(yè)軟件產(chǎn)品。1.3 縮略術(shù)語縮略術(shù)語DHMLX：web 頁面的 UI 控件1.4 參考資料參考資料2WEB 頁面框架內(nèi)容頁面框架內(nèi)容2.1 頁面框架頁面框架WEB 的頁面框架是指構(gòu)成完整頁

5、面的組織結(jié)構(gòu)。通常是由以下三部分構(gòu)成：Head，Main，F(xiàn)oot，有些時候出于布局的需要，在“Head”下面還會加上用于頁面功能導航的“Menu” 。如圖：圖 1 第 5 頁 共 27 頁2.2 頁面布局頁面布局2.2.1 布局原則布局原則對于 WEB 應(yīng)用來說，頁面布局是和 web 應(yīng)用的功能區(qū)相對應(yīng)的，并且對于頁面中各個部分之間的切分比例也需要遵守一定的規(guī)則。頁面布局的設(shè)計，首先需要考慮用戶在瀏覽 web 頁面時視覺流向上的要求：圖 2從視覺流向上看，用戶首先看到的是頁面“Head”部分的左面，通常那里是標識這個WEB 應(yīng)用的 Logo；然后是陳列 WEB 應(yīng)用主要功能的“Menu”來用

6、于頁面導航；接下來用戶將看的是處于頁面左側(cè)的“sidebar” ，通常這里也是用于頁面功能導航的，和“Menu”出的選擇相呼應(yīng)，這里的內(nèi)容可以通過類似樹狀結(jié)構(gòu)的方式展示更為詳細的功能；接下來是處于頁面中心位置的內(nèi)容部分，最后用戶的視線落在 WEB 頁面的底部。2.2.2 布局要求布局要求2.2.2.1 頁面分割頁面分割以上面圖示的布局方式為例，按照通常 web 頁面設(shè)計時所遵循的方法，并結(jié)合黃金分割比例的方法：首先，將頁面按照 3*3 的方式進行分割，如下圖： 第 6 頁 共 27 頁在高度方向上，對上部 1/3 區(qū)域按照黃金分割的方法分出 head 和 menu 的區(qū)域；在寬度方向上，對中部

7、左邊 1/3 區(qū)域按照黃金分割的方法分出 sidebar 的區(qū)域，剩下的空間留給 content 區(qū)域；在高度方向上，對下部 1/3 區(qū)域按照黃金分割的方法分出 foot 的區(qū)域；2.2.2.2 頁面結(jié)構(gòu)頁面結(jié)構(gòu)頁面的布局中，各個區(qū)域大小的定義方式是不同的，請見下圖：圖 3在頁面布局中，對各個功能區(qū)域的切分是按照“像素”和“比例”方式來進行的，以1024*768 的分辨率做為基準，其中：Head 區(qū)域，寬度是按照比例方式設(shè)置的，寬度按照 100%設(shè)置，高度采用所占的 第 7 頁 共 27 頁固定像素值來確定的，一般占？px，如果有 menu 區(qū)，則調(diào)整為？px；Menu 區(qū)域，和“head”的

8、配置要求是一樣的，寬度按照 100%設(shè)置，高度結(jié)合“head”的高度設(shè)置來確定，一般占？px；Sidebar 區(qū)域，寬度是結(jié)合與“content”之間的黃金切分比例，按照固定像素的方式確定的，一般占？px；高度是按照比例方式來設(shè)置的；Content 區(qū)域，高度和寬度方向布局都是按照比例方式來設(shè)置的；Foot 區(qū)域，寬度按照 100%設(shè)置，高度采用所占的固定像素值來確定的，一般占？px；2.2.2.3 頁面展現(xiàn)頁面展現(xiàn)對于頁面布局來說，除了上述要求外，還需要考慮如下要求：能自適應(yīng) 1024*768、800*600 兩種分辨率；界面層次不超過 3 層；默認窗口設(shè)置下，不應(yīng)出現(xiàn)水平、垂直滾動條；當界

9、面內(nèi)容超出顯示區(qū)域時，以浮動層的形式顯示；還有，對于用戶的感官而言，屏幕對角線相交的位置是用戶直視的地方，而頁面正上方四分之一處為易吸引用戶注意力的位置，所以在放置頁面時要注意利用這兩個位置。要求：父頁面或主頁面的中心位置應(yīng)該設(shè)計在對角線焦點附近；子頁面的位置應(yīng)該靠近主窗體的左上角或正中；需要多個子頁面彈出時，應(yīng)該依次向右下方偏移，以顯示窗體出標題為宜；在頁面上方四分之一處放置用戶的 logo、主要功能導航和一些系統(tǒng)操作功能；2.2.2.4 頁面美化頁面美化界面應(yīng)該大小適合美學觀點，感覺協(xié)調(diào)舒適，能在有效的范圍內(nèi)吸引用戶的注意力。建議和要求：長寬接近黃金點比例，切忌長寬比例失調(diào)、或?qū)挾瘸^長度

10、；布局要合理，不宜過于密集，也不能過于空曠，合理的利用空間；同一頁面上的按鈕大小應(yīng)該一致，不同頁面的按鈕大小盡量相近，按鈕上忌用太長的名稱；按鈕的大小要與界面的大小和空間要協(xié)調(diào)；避免空曠的界面上放置很大的按鈕；放置完控件后界面不應(yīng)有很大的空缺位置；字體的大小要與界面的大小比例協(xié)調(diào)， 通常使用的字體 12px；前景與背景色搭配合理協(xié)調(diào)，反差不宜太大，主色要柔和，最好少用深色，如大紅、大綠等，可以借用 Windows 界面色調(diào)；大型系統(tǒng)常用的主色有#E1E1E1、#EFEFEF、#C0C0C0等；界面風格要保持一致，字的大小、顏色、字體要相同，需要藝術(shù)處理或有特殊要求的地方建議使用圖片表現(xiàn)；如果窗

11、體支持最大化或放大時，窗體上的控件也要隨著窗體而縮放；切忌只放大窗體而忽略控件的縮放；系統(tǒng)對話框頁面不應(yīng)該支持縮放，即右上角只有關(guān)閉功能； 第 8 頁 共 27 頁通常父窗體支持縮放時，子窗體沒有必要縮放；如果能給用戶提供自定義界面風格，則由用戶自己選擇顏色、字體等；2.3 頁面字體頁面字體頁面字體屬性的設(shè)置在相應(yīng)的 CSS 中進行定義，頁面文字編碼要求是 UTF-8，在規(guī)定字體屬性時，需要設(shè)置：中文采用“宋體” ，英文采用“Arial”或“verdana” ，CSS 文件中的 font-family 里面必須保證有“宋體” 。對于頁面屬性中字體大小的設(shè)置，需要內(nèi)容的不同級別來設(shè)置，通常：“H

12、ead”中標題文字，20px；“Menu”中的導航文字，14px；“Sidebar”中的文字，12px；“Content”中的正文，12px 或 14px，標題；“foot”中的文字，12px 或 10px；有關(guān)頁面字體屬性的具體設(shè)置參見附錄中的 CSS 示例。2.4 邊距邊距WEB 頁面和其中的表格都應(yīng)該設(shè)定邊距，避免頁面元素緊貼邊沿的情況發(fā)生，最小邊距值為“3px” ，默認邊距值應(yīng)在 CSS 中設(shè)定。例如：圖 42.5 表格表格對于表格，其屬性的設(shè)置同樣在 CSS 中進行定義。表格使用最多的情況是顯示裝在的數(shù)據(jù)，由于有很多表項需要在頁面中完整顯示，因此原則上對于表格各個單元格寬度的設(shè)置應(yīng)采

13、用百分比方式來進行，這樣表格不僅能夠?qū)?shù)據(jù)完整地顯示，而且還能夠適應(yīng)不同分辨率的情況。但由于表格中存在不定長的內(nèi)容，所以為了保證表格的寬度不被擠變形，對于不定長的內(nèi)容，可固定顯示寬度，當超出此顯示寬度后，以顯示，光標停留后，詳細內(nèi)容再在浮動層顯示。其他要求： 第 9 頁 共 27 頁表頭中的數(shù)據(jù)應(yīng)水平/垂直居中對齊。表單中內(nèi)容如為定長，則為居中顯示；如為不固定的中英文內(nèi)容，則為居左顯示；如為數(shù)值形式，則為居右顯示。表格的表頭應(yīng)采用不同于表格內(nèi)容的背景顏色，并要求對比明顯；表格表頭的文字應(yīng)采用加粗，或不同于表格內(nèi)容的字體；表格中相鄰行需要通過兩種有一定對比差異的淺色作為背景色；各個頁面的表格邊框

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

15、最弱文字的可讀性。在使用標簽，需要對應(yīng)有，并且要求設(shè)置 margin，使得段落文字的前后左右能夠有合適的空白區(qū)。可在 CSS 中設(shè)置：p margin: 18px 6px 6px 18px;，分別定義了上、右、下、左的空白區(qū)大小。首行縮進時，禁止使用“ ” ，而是在 CSS 中設(shè)置 text-indent，例如：p text-indent: 2em; 。在一段完整的文字中請盡量不要使用 來人工干預(yù)分段；對于 margin，為了防止由于采用默認的 margin 值而導致的頁面排版問題，推薦所有標簽定義為：margin: 0; 當采用豎排文字時，推薦使用 writing-mode

16、。通過設(shè)置兩個屬性值：lr-tb 和 tb-rl，并結(jié)合 direction 完成文字豎排，lr-tb 指的是文字方向為：左-右、上-下，tb-rl 是指上-下、右-左。2.7 FrameFrame 是能夠?qū)⒁粋€ WEB 頁面切分成幾個窗口來顯示 WEB 內(nèi)容的一種頁面設(shè)計方法，切分后的每個窗口內(nèi)容是通過指向 URL 來實現(xiàn)的。Frame 的標記是 ，而在使用 Frame 時，通常需要將其放在網(wǎng)頁入口的 html 文件中，而不必放入 標記。 是用以劃分框窗的，每一框窗由一個 標記所標示，必須在范圍中使用。其中： 稱框架標記，用以宣告 HTML 文件為框架模式，并設(shè)定視窗如 第 10 頁 共 2

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

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

19、來傳達給用戶的、含有主觀感受。頁面風格的選取除了需要考慮一般的用戶感受外，還需要將用戶所在環(huán)境的因素考慮進去，從而形成符合特定用戶要求的頁面風格。3.1 風格分類風格分類Web 應(yīng)用的頁面風格內(nèi)容包括：布局，不僅僅是系統(tǒng)入口主頁的布局，而是所有頁面；顏色，按照風格主題來設(shè)置頁面中包含的顏色及其表現(xiàn)；頁面元素，按照風格主題來確定頁面元素的大小、形狀和交互響應(yīng)行為； 第 11 頁 共 27 頁圖標，按照風格主題來定制表示各類功能的圖標；提示窗口，是頁面交互的主要形式，需要按照風格主題來定制；具體風格分類的定義，待定。3.2 頁面風格應(yīng)用頁面風格應(yīng)用具體風格應(yīng)用的定義，待定。4WEB 頁面交互頁面交

20、互4.1 頁面元素焦點切換頁面元素焦點切換在 WEB 頁面中，為了提高和用戶之間的互動，需要在各類頁面元素獲得焦點和失去焦點的時候，在如下場景中采用頁面交互的方法有：4.1.1 信息填寫信息填寫對輸入信息驗證對輸入信息驗證：如果需要校驗填寫內(nèi)容，則需要在輸入框失去焦點時進行數(shù)據(jù)有效性的判斷，并在輸入框后給出提示。如圖：對輸入信息提示對輸入信息提示：在一組需要被驗證的數(shù)據(jù)填寫時，如果有必填項，需要在輸入框后面給出標志，并對填入的規(guī)則加以說明。如圖：如果輸入框內(nèi)有默認的文字，當輸入框獲得焦點時，需要將輸入框內(nèi)的文字處于全選狀態(tài)。如圖： 第 12 頁 共 27 頁4.1.2 鼠標交互響應(yīng)鼠標交互響應(yīng)

21、對鼠標在頁面中所產(chǎn)生的事件進行處理，當頁面元素獲得焦點、被點擊、失去焦點時，則需要控件本身在顏色、大小或形狀上的變化給與響應(yīng)，亦可以添加聲音響應(yīng)。下面是各種情況下的鼠標交互示例：例如：- 按鈕按鈕：按鈕顏色改變、或形狀，或字體改變，如圖：鼠標放上獲得焦點前：鼠標放上獲得焦點后：- 鏈接鏈接：字體變粗、或字體變色、或背景變色，如圖：鼠標放上獲得焦點前：鼠標放上獲得焦點后：- 頁簽頁簽：獲得焦點的頁簽顏色變化，或頁簽的大小和里面的字體變大，如圖：鼠標放上獲得焦點前：鼠標放上獲得焦點后：- 輸入框輸入框，輸入框的邊框變色；鼠標放上獲得焦點前：鼠標放上獲得焦點后：- 表格表格，表格中行的底色改變；鼠標

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

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

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

25、區(qū)按鈕 1按鈕 2標題區(qū)標題區(qū)提示信息區(qū)提示信息區(qū)標題區(qū)：簡要給出此次提示信息的性質(zhì)，例如：警告：操作非法！圖標區(qū)：給出和此次提示信息性質(zhì)匹配的圖標；提示信息區(qū)：給出此次提示信息的具體內(nèi)容；按鈕區(qū)：給出供用戶進行選擇的按鈕；對于對話框的背景顏色，要求和系統(tǒng)的整體風格選取的顏色一致，而右上角的操作區(qū)只保留關(guān)閉一個可操作功能，最小化和最大化的功能將不顯示。對應(yīng)采用的圖標的圖例為：警告信息：禁止操作信息：操作成功信息： 第 15 頁 共 27 頁操作失敗信息：錯誤信息：幫助信息：提示信息：提示信息內(nèi)容要求：提示信息中如有標點符號，統(tǒng)一為全角符號；提示信息如有主語，統(tǒng)一為您；在重要或復(fù)雜的操作成功后，

26、給予提示信息；有后續(xù)操作的操作在成功后，也需給予提示信息，說明當前的狀態(tài)。提示信息不宜太長，寬度應(yīng)不超過當前窗口寬度的1/2，當超過此比例時，請視具體情況進行換行；當功能按鈕為圖片按鈕時，光標停留需給予浮動提示信息；4.4 鍵盤響應(yīng)支持鍵盤響應(yīng)支持由于用戶有時候還需要結(jié)合鍵盤進行操作，所以頁面需要提供一些簡單的鍵盤支持，例如：“Esc” 、 “Enter” 、 “Tab” “Space” ，系統(tǒng)應(yīng)對這些鍵值作出響應(yīng)。其中：Esc， “取消”當前操作； 第 16 頁 共 27 頁Enter， “確認”或進行下一步操作或提交；Tab、或 Shift+tab 能夠在頁面元素中按照一定次序切換焦點，遵

27、循從左上至右下的原則；其他快捷鍵的支持，需要根據(jù)項目的實際情況來定義。5WEB 頁面通用規(guī)范頁面通用規(guī)范5.1 一般頁面功能一般頁面功能5.1.1 新增新增當新增一條或多條記錄，要求：新增的記錄必須排在首頁首行。提交失敗后必須保存用戶已經(jīng)輸入的內(nèi)容，以便再次提交。提交時需對主要標識字段進行重復(fù)值、空值（空格）判斷。新增內(nèi)容提交失敗后，須保留用戶修改的內(nèi)容，以便再次修改提交；需對主標識字段進行重復(fù)值、空值（空格）判斷；5.1.2 修改修改當進行單條或多條記錄的修改時，要求：如界面存在復(fù)選按鈕，勾選多條記錄進行修改時，每次只能對一條記錄進行修改，默認修改內(nèi)容為第一條的提示信息；修改后加載的內(nèi)容應(yīng)為

28、的實際內(nèi)容，而不再為默認值；修改完成后須回到原記錄所在位置，且刷新顯示修改后的值；修改內(nèi)容提交失敗后，須保留用戶修改的內(nèi)容，以便再次修改提交；在查詢條件下修改后返回，如不滿足查詢條件則不顯示；需對主標識字段進行重復(fù)值、空值（空格）判斷；5.1.3 刪除刪除當刪除一條或多條記錄，要求：必須有確認刪除的提示信息；刪除成功后刷新，不顯示刪除的記錄；刪除成功后，返回到原記錄所在頁面，如果原記錄所在頁不存在時，則返回上一頁。當被刪除的記錄與其他記錄存在關(guān)聯(lián)時，請示需求界面給予不允許刪除、更明細提示等信息；5.1.4 查詢查詢當按照條件查詢時，要求：每次查詢后定位到原頁面； 第 17 頁 共 27 頁每次

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

30、子頁面時，子頁面必須提供返回按鈕；5.1.9 分頁分頁 當需要分頁顯示數(shù)據(jù)時，要求：當對查詢結(jié)果進行分頁時，分頁的同時需要能夠執(zhí)行查詢功能；當頁數(shù)較多時，允許輸入具體頁數(shù)進行查詢；5.1.10 全選全選當在一個頁面上存在多個同類內(nèi)容的復(fù)選框時，需要提供全選的功能，要求：勾選全選，則選中當前頁面所有記錄；去掉當前頁面某個記錄的勾選，則全選也去掉勾選；刷新頁面后，自動去掉已勾選的記錄及全選的勾選；5.2 一般頁面規(guī)則一般頁面規(guī)則5.2.1 默認值默認值各個頁面都會存在默認值。 第 18 頁 共 27 頁要求：打開一個新界面，光標默認停留在第一個待輸入的文本框中；當選擇下拉框不存在默認值時，則默認為

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

32、據(jù)；關(guān)閉父窗體必須連同子窗體一同關(guān)閉；子窗體的大小不能超過父窗體，且不要遮住父窗體的主要信息；5.2.4 窗口嵌套窗口嵌套針對多層頁面窗口的嵌套情況，要求：如果存在多層嵌套頁面窗口，每層頁面窗口彈出時都自動往右下移動一點點，以保證不遮蓋上層頁面窗口標題為準；頁面窗口嵌套層次最好不超過 3 層；5.2.5 輸入框操作輸入框操作對于輸入框操作的限制，規(guī)則是：只允許輸入數(shù)字的輸入框需要控制其它字符的輸入，或在輸入非法值時給予提示，或在輸入框內(nèi)不再捕獲非法值；只允許輸入日期、時間的輸入框需要通過格式化方式約束輸入，而不是輸入非法值后給出提示；當輸入的內(nèi)容達到了字段的長度限制時，不顯示新輸入的的數(shù)值，并

33、提示不允許再輸入，而不是保存后自動截斷； 第 19 頁 共 27 頁5.2.6 在線幫助功能在線幫助功能系統(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)鍵詞在幫助索引中搜索所要的幫助，當然也應(yīng)該提供幫助索引；如果沒有提供軟件書面的幫助文檔，最

34、好能夠有打印幫助的功能；在幫助中應(yīng)該提供我們的技術(shù)支持方式，一旦用戶難以自己解決可以方便的尋求新的幫助方式；5.2.7 菜單功能要求菜單功能要求菜單是界面上最重要的元素，菜單位置按照按功能來組織。要求：菜單通常采用“常用-主要-次要-工具-幫助”的位置排列，符合 Windows 風格的要求；常用的有“文件”、“編輯”，“查看”等，需要系統(tǒng)有這些選項；下拉菜單要根據(jù)菜單選項的含義進行分組，并切按照一定的規(guī)則進行排列，用橫線隔開；一組菜單的使用有先后要求或有向?qū)ё饔脮r，應(yīng)該按先后次序排列；沒有順序要求的菜單項按使用頻率和重要性排列，常用的放在開頭， 不常用的靠后放置；重要的放在開頭，次要的放在后邊

35、；如果菜單選項較多，應(yīng)該采用加長菜單的長度而減少深度的原則排列；菜單深度一般要求最多控制在三層以內(nèi)；對常用的菜單要有快捷命令方式，組合原則見 5.2.8；最好能夠?qū)驼谶M行的操作無關(guān)的菜單項能夠屏蔽，也可采用動態(tài)加載方式即只有需要的菜單才顯示；菜單前的圖標不宜太大，與和相應(yīng)的字高保持一致；主菜單的寬度要接近，字數(shù)最好不應(yīng)多于四個；主菜單數(shù)目不應(yīng)太多，最好為單排布置；5.2.8 快捷鍵功能快捷鍵功能在菜單及按鈕中使用快捷鍵可以讓喜歡使用鍵盤的用戶操作得更快一些 在Windows及其應(yīng)用軟件中的快捷鍵功能大多是一致的，可以根據(jù)實際情況考慮實現(xiàn)。要求：面向事務(wù)的組合有: Ctrl-D 刪除、Ctr

36、l-F 尋找、Ctrl H 替換、Ctrl-I 插入、Ctrl-N 新記錄、Ctrl-S 保存、 Ctrl-O 打開； 第 20 頁 共 27 頁列表: 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-Esc 任務(wù)列表 ；Ctrl-

37、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)用軟件的標準，但亦可使用漢語拼音的開頭字母；5.2.9 快捷鍵的限制快捷鍵的限制由于IE本身的一些原因，需要避免一些不必要的錯誤，故對其進行攔截限制。要求：在用戶沒有提供

38、明確需求情況下，限制 F5、IE 工具欄、退格鍵（僅限頁面不限輸入框）、Ctrl+N 的使用；根據(jù)功能需要，限制右鍵菜單的使用；5.2.10 頁面的規(guī)范性頁面的規(guī)范性通常界面設(shè)計都按Windows界面的規(guī)范來設(shè)計，即包含“菜單條、工具欄、工具廂、狀態(tài)欄、滾動條、右鍵快捷菜單”的標準格式，可以說：界面遵循規(guī)范化的程度越高，則易用性相應(yīng)的就越好。小型軟件一般不提供工具廂。規(guī)范要求：常用菜單要有命令快捷方式。完成相同或相近功能的菜單用橫線隔開放在同一位置。菜單前的圖標能直觀的代表要完成的操作。菜單深度一般要求最多控制在三層以內(nèi)。工具欄要求可以根據(jù)用戶的要求自己選擇定制。相同或相近功能的工具欄放在一起

39、。工具欄中的每一個按鈕要有及時提示信息。一條工具欄的長度最長不能超出屏幕寬度。工具欄的圖標能直觀的代表要完成的操作。系統(tǒng)常用的工具欄設(shè)置默認放置位置。工具欄太多時可以考慮使用工具廂。工具廂要具有可增減性，由用戶自己根據(jù)需求定制。工具廂的默認總寬度不要超過屏幕寬度的 1/5。狀態(tài)條要能顯示用戶切實需要的信息，常用的有：目前的操作、系統(tǒng)狀態(tài)、用戶位置、用戶信息、提示信息、錯誤信息等，如果某 第 21 頁 共 27 頁一操作需要的時間較長，還應(yīng)該顯示進度條和進程提示。滾動條的長度要根據(jù)顯示信息的長度或?qū)挾饶芗皶r變換，以利于用戶了解顯示信息的位置和百分比。狀態(tài)條的高度以放置五好字為宜，滾動條的寬度比狀

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

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

42、列；復(fù)選框和選項框要有默認選項，并支持 Tab 選擇；選項數(shù)相同時多用選項框而不用下拉列表框；界面空間較小時使用下拉框而不用選項框；選項數(shù)較少時使用選項框，相反使用下拉列表框；專業(yè)性強的軟件要使用相關(guān)的專業(yè)術(shù)語，通用性界面則提倡使用通用性詞眼；5.2.12 輸入安全性要求輸入安全性要求在界面上需要建立一些規(guī)則來控制輸入的出錯幾率，會大大減少系統(tǒng)因用戶人為的錯誤引起的破壞，開發(fā)者應(yīng)當盡量周全地考慮到各種可能發(fā)生的問題，使出錯的可能降至最小，例如：當程序出現(xiàn)保護性錯誤而退出系統(tǒng)，會使用戶對軟件失去信心，因為這意味著用戶要中斷思路，并費時費力地重新登錄，而且已進行的操作也會因沒有存盤而全部丟失。 第

43、 22 頁 共 27 頁因此需要在頁面設(shè)計時應(yīng)對輸入按照規(guī)則進行校驗。要求：排除可能會使程序非正常中止的錯誤；應(yīng)當檢查用戶錄入無效的數(shù)據(jù)；采用相關(guān)控件限制用戶輸入值的種類；當用戶面臨的選擇是兩個或多個選一時，請采用單選框，而當選擇的可能再多一些時，可以采用復(fù)選框；當選項特別多時，可以采用列表框，下拉式列表框；確保未經(jīng)授權(quán)或沒有意義的操作不能進行；對可能引起致命錯誤或系統(tǒng)出錯的輸入字符或動作要加限制或屏蔽；對可能發(fā)生嚴重后果的操作要有補救措施。通過補救措施用戶可以回到原來的正確狀態(tài)；對一些特殊符號的輸入，與系統(tǒng)使用的符號相沖突的字符等進行判斷并阻止用戶輸入該字符，并提前給出輸入提示；對錯誤操作最

44、好支持可逆性處理，如取消系列操作；在輸入有效性字符之前應(yīng)該阻止用戶進行只有輸入之后才可進行的操作；對可能造成等待時間較長的操作應(yīng)該提供取消功能；特殊字符常有；;，：、|+=)-(_*&%$#!，.。?/還有空格；在讀入用戶所輸入的信息時，應(yīng)根據(jù)需要選擇是否去掉前后空格，例如：有些讀入數(shù)據(jù)庫的字段不支持中間有空格，但用戶切實需要輸入中間空格，這時要在程序中加以處理；5.2.13 獨特性要求獨特性要求如果一味的遵循業(yè)界的界面標準，則會喪失自己的個性.在框架符合以上規(guī)范的情況下，設(shè)計具有自己獨特風格的界面尤為重要。尤其在商業(yè)軟件流通中有著很好的遷移默化的廣告效用要求：安裝界面上應(yīng)有單位介紹或產(chǎn)品介紹，并有自己的圖標；主界面，最好是大多數(shù)界面上要有公司圖標；登錄界面上要有本產(chǎn)品的標志，同時包含公司圖標；幫助菜單的關(guān)于中應(yīng)有版權(quán)和產(chǎn)品信息；公司的系列產(chǎn)品要保持一致的界面風格，如背景色、字體、菜單排列方式、圖標、安裝過程、按鈕用語等應(yīng)該大體一致；5.2.14 多窗口的應(yīng)用與系統(tǒng)資源多窗口的應(yīng)用與系統(tǒng)資源設(shè)計良好的軟件不僅要有完備的功能，而且要盡可能的占用最低限度的資源，因此在出現(xiàn)多窗口的情況下需要避免下述一些情況。要求：在多窗口