WEB頁(yè)面設(shè)計(jì)規(guī)范--整理ok

1、Web頁(yè)面設(shè)計(jì)規(guī)范 第 21 頁(yè) 共 21 頁(yè)目 錄1 引言22 WEB頁(yè)面框架內(nèi)容22.1 頁(yè)面框架22.2 頁(yè)面布局32.2.1 布局原則32.2.2 布局要求42.3 如果能給用戶提供自定義界面風(fēng)格，則由用戶自己選擇顏色、字體等；62.4 頁(yè)面字體62.5 邊距62.6 表格62.7 段落排版72.8 Frame72.9 其他頁(yè)面元素83 頁(yè)面風(fēng)格83.1 風(fēng)格分類84 WEB頁(yè)面交互84.1 頁(yè)面元素焦點(diǎn)切換84.1.1 信息填寫(xiě)84.1.2 鼠標(biāo)交互響應(yīng)94.2 頁(yè)面信息交互104.2.1 操作結(jié)果確認(rèn)104.2.2 其他規(guī)則104.3 頁(yè)面信息提示104.4 鍵盤(pán)響應(yīng)支持125 其

2、他快捷鍵的支持，需要根據(jù)項(xiàng)目的實(shí)際情況來(lái)定義。136 WEB頁(yè)面通用規(guī)范136.1 一般頁(yè)面功能136.1.1 新增136.1.2 修改136.1.3 刪除136.1.4 查詢136.1.5 取消136.1.6 保存136.1.7 重置146.1.8 返回146.1.9 分頁(yè)146.1.10 全選146.2 一般頁(yè)面規(guī)則146.2.1 默認(rèn)值146.2.2 單選按組鈕默認(rèn)值146.2.3 表單元素選擇146.2.4 必填值146.2.5 界面?zhèn)鬟f146.2.6 窗口嵌套146.2.7 輸入框操作156.2.8 在線幫助功能156.2.9 菜單功能要求156.2.10 快捷鍵功能166.2.11

3、 快捷鍵的限制166.2.12 頁(yè)面的規(guī)范性166.2.13 系統(tǒng)易用性176.2.14 輸入安全性要求176.2.15 獨(dú)特性要求186.2.16 多窗口的應(yīng)用與系統(tǒng)資源187 盡量防止對(duì)系統(tǒng)的獨(dú)占使用；188 頁(yè)面編程技術(shù)使用規(guī)范188.1 頁(yè)面元素命名189 頁(yè)面資源規(guī)格說(shuō)明209.1 圖標(biāo)209.2 圖片209.3 多媒體211 引言本文用于規(guī)范我們所開(kāi)發(fā)的商業(yè)軟件中對(duì)于web頁(yè)面的設(shè)計(jì)工作，明確在設(shè)計(jì)中所要遵循的準(zhǔn)則和方法，web頁(yè)面中各個(gè)元素的規(guī)格要求，確保所實(shí)現(xiàn)的web頁(yè)面在風(fēng)格、結(jié)構(gòu)和功能上的統(tǒng)一，提升商業(yè)軟件的外在品質(zhì)。2 WEB頁(yè)面框架內(nèi)容2.1 頁(yè)面框架WEB的頁(yè)面框架是

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

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

6、方向上，對(duì)下部1/3區(qū)域按照黃金分割的方法分出foot的區(qū)域；2.2.2.3 頁(yè)面結(jié)構(gòu)頁(yè)面的布局中，各個(gè)區(qū)域大小的定義方式是不同的，請(qǐng)見(jiàn)下圖：圖 2在頁(yè)面布局中，對(duì)各個(gè)功能區(qū)域的切分是按照“像素”和“比例”方式來(lái)進(jìn)行的，以1024*768的分辨率做為基準(zhǔn)，其中：l Head區(qū)域，寬度是按照比例方式設(shè)置的，寬度按照100%設(shè)置，高度采用所占的固定像素值來(lái)確定的，一般占？px，如果有menu區(qū)，則調(diào)整為？px；l Menu區(qū)域，和“head”的配置要求是一樣的，寬度按照100%設(shè)置，高度結(jié)合“head”的高度設(shè)置來(lái)確定，一般占？px；l Sidebar區(qū)域，寬度是結(jié)合與“content”之間的黃金

7、切分比例，按照固定像素的方式確定的，一般占？px；高度是按照比例方式來(lái)設(shè)置的；l Content區(qū)域，高度和寬度方向布局都是按照比例方式來(lái)設(shè)置的；2.2.2.4 Foot區(qū)域，寬度按照100%設(shè)置，高度采用所占的固定像素值來(lái)確定的，一般占？px；2.2.2.5 頁(yè)面展現(xiàn)對(duì)于頁(yè)面布局來(lái)說(shuō)，除了上述要求外，還需要考慮如下要求：l 能自適應(yīng)1024*768、800*600兩種分辨率；l 界面層次不超過(guò)3層；l 默認(rèn)窗口設(shè)置下，不應(yīng)出現(xiàn)水平、垂直滾動(dòng)條；當(dāng)界面內(nèi)容超出顯示區(qū)域時(shí)，以浮動(dòng)層的形式顯示；還有，對(duì)于用戶的感官而言，屏幕對(duì)角線相交的位置是用戶直視的地方，而頁(yè)面正上方四分之一處為易吸引用戶注意力

8、的位置，所以在放置頁(yè)面時(shí)要注意利用這兩個(gè)位置。要求：l 父頁(yè)面或主頁(yè)面的中心位置應(yīng)該設(shè)計(jì)在對(duì)角線焦點(diǎn)附近；l 子頁(yè)面的位置應(yīng)該靠近主窗體的左上角或正中；l 需要多個(gè)子頁(yè)面彈出時(shí)，應(yīng)該依次向右下方偏移，以顯示窗體出標(biāo)題為宜；2.2.2.6 在頁(yè)面上方四分之一處放置用戶的logo、主要功能導(dǎo)航和一些系統(tǒng)操作功能；2.2.2.7 頁(yè)面美化界面應(yīng)該大小適合美學(xué)觀點(diǎn)，感覺(jué)協(xié)調(diào)舒適，能在有效的范圍內(nèi)吸引用戶的注意力。建議和要求：l 長(zhǎng)寬接近黃金點(diǎn)比例，切忌長(zhǎng)寬比例失調(diào)、或?qū)挾瘸^(guò)長(zhǎng)度；l 布局要合理，不宜過(guò)于密集，也不能過(guò)于空曠，合理的利用空間；l 同一頁(yè)面上的按鈕大小應(yīng)該一致，不同頁(yè)面的按鈕大小盡量相近

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

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

11、導(dǎo)航文字，14px；n “Sidebar”中的文字，12px；n “Content”中的正文，12px或14px，標(biāo)題；n “foot”中的文字，12px或10px；2.5 邊距WEB頁(yè)面和其中的表格都應(yīng)該設(shè)定邊距，避免頁(yè)面元素緊貼邊沿的情況發(fā)生，最小邊距值為“3px”，默認(rèn)邊距值應(yīng)在CSS中設(shè)定。例如：2.6 表格對(duì)于表格，其屬性的設(shè)置同樣在CSS中進(jìn)行定義。表格使用最多的情況是顯示裝在的數(shù)據(jù)，由于有很多表項(xiàng)需要在頁(yè)面中完整顯示，因此原則上對(duì)于表格各個(gè)單元格寬度的設(shè)置應(yīng)采用百分比方式來(lái)進(jìn)行，這樣表格不僅能夠?qū)?shù)據(jù)完整地顯示，而且還能夠適應(yīng)不同分辨率的情況。但由于表格中存在不定長(zhǎng)的內(nèi)容，所以為

12、了保證表格的寬度不被擠變形，對(duì)于不定長(zhǎng)的內(nèi)容，可固定顯示寬度，當(dāng)超出此顯示寬度后，以顯示，光標(biāo)停留后，詳細(xì)內(nèi)容再在浮動(dòng)層顯示。其他要求：l 表頭中的數(shù)據(jù)應(yīng)水平/垂直居中對(duì)齊。l 表單中內(nèi)容如為定長(zhǎng)，則為居中顯示；如為不固定的中英文內(nèi)容，則為居左顯示；如為數(shù)值形式，則為居右顯示。l 表格的表頭應(yīng)采用不同于表格內(nèi)容的背景顏色，并要求對(duì)比明顯；l 表格表頭的文字應(yīng)采用加粗，或不同于表格內(nèi)容的字體；l 表格中相鄰行需要通過(guò)兩種有一定對(duì)比差異的淺色作為背景色；l 各個(gè)頁(yè)面的表格邊框風(fēng)格需要統(tǒng)一，建議設(shè)置細(xì)邊框；l 表格中存在的鏈接文字需要采用不同于其他內(nèi)容的顏色或字體顯示；l 對(duì)于表格的嵌套盡量控制在三

13、層以內(nèi)，并且禁止使用表格來(lái)進(jìn)行頁(yè)面布局。2.7 段落排版在WEB頁(yè)面中，“content”部分是展示頁(yè)面正文的區(qū)域，當(dāng)段落是由純文字構(gòu)成時(shí)：l 正文一行字?jǐn)?shù)最好不超過(guò)50，首頁(yè)的標(biāo)題文字以8-20字為佳。l 行距建議用百分比來(lái)定義，常用的兩個(gè)行距的值是line-height:120%或150%；l 對(duì)于一段文字，尤其是正文部分，保證左右至少有15px的留白，便于用戶換行時(shí)不受到干擾。文字和背景對(duì)比要足夠明顯，保證最弱文字的可讀性。在使用<p>標(biāo)簽，需要對(duì)應(yīng)有</p>，并且要求設(shè)置margin，使得段落文字的前后左右能夠有合適的空白區(qū)?？稍贑SS中設(shè)置：p margin:

14、 18px 6px 6px 18px;，分別定義了上、右、下、左的空白區(qū)大小。首行縮進(jìn)時(shí)，禁止使用“&nbsp;”，而是在CSS中設(shè)置text-indent，例如：p text-indent: 2em; 。在一段完整的文字中請(qǐng)盡量不要使用<br> 來(lái)人工干預(yù)分段；對(duì)于margin，為了防止由于采用默認(rèn)的margin值而導(dǎo)致的頁(yè)面排版問(wèn)題，推薦所有標(biāo)簽定義為：margin: 0; 當(dāng)采用豎排文字時(shí)，推薦使用writing-mode。通過(guò)設(shè)置兩個(gè)屬性值：lr-tb和tb-rl，并結(jié)合direction完成文字豎排，lr-tb指的是文字方向?yàn)椋鹤?右、上-下，tb-rl是指上-下

15、、右-左。2.8 FrameFrame是能夠?qū)⒁粋€(gè)WEB頁(yè)面切分成幾個(gè)窗口來(lái)顯示W(wǎng)EB內(nèi)容的一種頁(yè)面設(shè)計(jì)方法，切分后的每個(gè)窗口內(nèi)容是通過(guò)指向URL來(lái)實(shí)現(xiàn)的。Frame的標(biāo)記是<FRAMESET> <FRAME> ，而在使用Frame時(shí)，通常需要將其放在網(wǎng)頁(yè)入口的html文件中，而不必放入 <BODY> 標(biāo)記。<FRAMESET> 是用以劃分框窗的，每一框窗由一個(gè) <FRAME> 標(biāo)記所標(biāo)示，<FRAME>必須在<FRAMESET>范圍中使用。其中：l <FRAMESET> 稱框架標(biāo)記，用以宣告HTM

16、L文件為框架模式，并設(shè)定視窗如何分割。 <FRAME> 則只是設(shè)定某一個(gè)框窗內(nèi)的參數(shù)屬性。使用Frame分割頁(yè)面，需要按照2.1節(jié)“頁(yè)面布局”中所描述的要求來(lái)設(shè)置<FRAMESET> 和<FRAME>，以完成對(duì)頁(yè)面各個(gè)部分合理的切分。對(duì)于<FRAMESET> 和<FRAME>中的一些屬性設(shè)置，要求有：l Name，表示Frame的名字，必須有定義；l Framespacing，表示各個(gè)Frame之間空白距離，要求設(shè)置為非零，通常設(shè)置為5；l Noresize，表示是否允許使用者通過(guò)拖拉改變Frame的大小，要求在Frame設(shè)置此參數(shù)；

17、 l Scrolling，表示是否要顯示卷軸，要求設(shè)置為“AUTO”l Marginhight，表示框架高度部分邊緣所保留的空間，要求設(shè)置？l Marginwidth，表示框架寬度部分邊緣所保留的空間，要求設(shè)置？2.9 其他頁(yè)面元素l 按鈕，要求按鈕上顯示的文字能夠準(zhǔn)確表達(dá)功能含義；l 單選框，默認(rèn)選擇一個(gè)，和所關(guān)聯(lián)的文字的間距應(yīng)該在3px；l 多選框，默認(rèn)全不選，所關(guān)聯(lián)的文字應(yīng)該能夠準(zhǔn)確表達(dá)選擇的含義，和控件的間距應(yīng)該在3px；l 下拉框，給出默認(rèn)選擇，并且默認(rèn)選擇顯示出“默認(rèn)全部”或“請(qǐng)選擇”等文字提示；l 圖片，默認(rèn)為顯示出代表圖片文件的圖標(biāo)，或是縮略圖；l 多媒體，默認(rèn)為顯示出代表多媒

18、體文件的圖標(biāo)；3 頁(yè)面風(fēng)格WEB頁(yè)面的風(fēng)格是指WEB頁(yè)面通過(guò)對(duì)頁(yè)面布局、字體、配色、頁(yè)面元素排列的融合來(lái)傳達(dá)給用戶的、含有主觀感受。頁(yè)面風(fēng)格的選取除了需要考慮一般的用戶感受外，還需要將用戶所在環(huán)境的因素考慮進(jìn)去，從而形成符合特定用戶要求的頁(yè)面風(fēng)格。3.1 風(fēng)格分類Web應(yīng)用的頁(yè)面風(fēng)格內(nèi)容包括：l 布局，不僅僅是系統(tǒng)入口主頁(yè)的布局，而是所有頁(yè)面；l 顏色，按照風(fēng)格主題來(lái)設(shè)置頁(yè)面中包含的顏色及其表現(xiàn)；l 頁(yè)面元素，按照風(fēng)格主題來(lái)確定頁(yè)面元素的大小、形狀和交互響應(yīng)行為；l 圖標(biāo)，按照風(fēng)格主題來(lái)定制表示各類功能的圖標(biāo)；4 WEB頁(yè)面交互4.1 頁(yè)面元素焦點(diǎn)切換在WEB頁(yè)面中，為了提高和用戶之間的互動(dòng)，

19、需要在各類頁(yè)面元素獲得焦點(diǎn)和失去焦點(diǎn)的時(shí)候，在如下場(chǎng)景中采用頁(yè)面交互的方法有：4.1.1 信息填寫(xiě)對(duì)輸入信息驗(yàn)證：如果需要校驗(yàn)填寫(xiě)內(nèi)容，則需要在輸入框失去焦點(diǎn)時(shí)進(jìn)行數(shù)據(jù)有效性的判斷，并在輸入框后給出提示。如圖：對(duì)輸入信息提示：在一組需要被驗(yàn)證的數(shù)據(jù)填寫(xiě)時(shí)，如果有必填項(xiàng)，需要在輸入框后面給出標(biāo)志，并對(duì)填入的規(guī)則加以說(shuō)明。如圖：如果輸入框內(nèi)有默認(rèn)的文字，當(dāng)輸入框獲得焦點(diǎn)時(shí)，需要將輸入框內(nèi)的文字處于全選狀態(tài)。如圖：4.1.2 鼠標(biāo)交互響應(yīng)對(duì)鼠標(biāo)在頁(yè)面中所產(chǎn)生的事件進(jìn)行處理，當(dāng)頁(yè)面元素獲得焦點(diǎn)、被點(diǎn)擊、失去焦點(diǎn)時(shí)，則需要控件本身在顏色、大小或形狀上的變化給與響應(yīng)，亦可以添加聲音響應(yīng)。下面是各種情況下的

20、鼠標(biāo)交互示例：例如：- 按鈕：按鈕顏色改變、或形狀，或字體改變，如圖：鼠標(biāo)放上獲得焦點(diǎn)前：鼠標(biāo)放上獲得焦點(diǎn)后：- 鏈接：字體變粗、或字體變色、或背景變色，如圖：鼠標(biāo)放上獲得焦點(diǎn)前：鼠標(biāo)放上獲得焦點(diǎn)后：- 頁(yè)簽：獲得焦點(diǎn)的頁(yè)簽顏色變化，或頁(yè)簽的大小和里面的字體變大，如圖：鼠標(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ù)等原因，使得用戶需要等待一定時(shí)間，需要將鼠標(biāo)指針的形狀變成時(shí)間漏斗的形狀、或其他表示鼠標(biāo)不可操作的樣子來(lái)提醒用戶等待。

21、如圖：4.2 頁(yè)面信息交互4.2.1 操作結(jié)果確認(rèn)在提交數(shù)據(jù)，或是載有數(shù)據(jù)的頁(yè)面關(guān)閉，或其他需要和用戶進(jìn)行確認(rèn)交互的場(chǎng)景，需要軟件能夠提供一個(gè)以彈出頁(yè)面形式，要求用戶確認(rèn)執(zhí)行結(jié)果的對(duì)話框，包含的情況有：l 提示確認(rèn)輸入信息正確：彈出對(duì)話框，并將已填寫(xiě)的內(nèi)容列出，要求用戶確認(rèn)內(nèi)容的正確性，給出“確定”和“取消”的選擇按鈕；l 提示確認(rèn)數(shù)據(jù)更改是否保存：彈出對(duì)話框，提示當(dāng)前頁(yè)面內(nèi)容已經(jīng)改變，要求用戶確認(rèn)是否保存更改的信息，給出“是”和“否”的選擇按鈕；l 提示確認(rèn)當(dāng)前頁(yè)面的跳轉(zhuǎn)：彈出對(duì)話框，提示用戶正在跳轉(zhuǎn)到另外一個(gè)頁(yè)面，要求用戶確認(rèn)離開(kāi)當(dāng)前頁(yè)面，給出“是”和“否”的選擇按鈕；l 確認(rèn)刪除數(shù)據(jù)內(nèi)容

22、：彈出對(duì)話框，提示用戶刪除了當(dāng)前選擇的內(nèi)容，要求用戶確認(rèn)是否繼續(xù)刪除的操作，給出“確定”和“取消”的選擇按鈕；4.2.2 其他規(guī)則對(duì)于信息交互過(guò)程中，其他需要遵守的規(guī)則有：l 重要的命令按鈕與使用較頻繁的按鈕要放在界面上相對(duì)固定的位置上；l 容易引起操作錯(cuò)誤或使程序退出、關(guān)閉的按鈕應(yīng)不醒目，放在不易點(diǎn)位置；l 與正在進(jìn)行的操作無(wú)關(guān)的按鈕應(yīng)該加以屏蔽，例如：按鈕背景為灰色顯示；l 對(duì)可能造成數(shù)據(jù)無(wú)法恢復(fù)的操作必須提供確認(rèn)信息，給用戶放棄選擇的機(jī)會(huì)；l 非法的輸入或操作應(yīng)有足夠的提示說(shuō)明；l 對(duì)運(yùn)行過(guò)程中出現(xiàn)問(wèn)題而引起錯(cuò)誤的地方要有提示，讓用戶明白錯(cuò)誤出處，避免形成無(wú)限期的等待；4.3 頁(yè)面信息提

23、示在web頁(yè)面提供的功能中，很多情況需要系統(tǒng)發(fā)送一些必要的提示信息到頁(yè)面顯示給用戶，這些信息的分類有：l 警告信息l 禁止信息l 操作執(zhí)行成功信息l 操作執(zhí)行失敗信息l 錯(cuò)誤信息l 幫助信息提示信息這些信息在當(dāng)前頁(yè)面或彈出頁(yè)面上顯示。如果采用彈出對(duì)話框的形式，對(duì)話框的頁(yè)面結(jié)構(gòu)如下圖：圖標(biāo)區(qū)按鈕 1按鈕 2標(biāo)題區(qū)提示信息區(qū)l 標(biāo)題區(qū)：簡(jiǎn)要給出此次提示信息的性質(zhì)，例如：警告：操作非法！l 圖標(biāo)區(qū)：給出和此次提示信息性質(zhì)匹配的圖標(biāo)；l 提示信息區(qū)：給出此次提示信息的具體內(nèi)容；l 按鈕區(qū)：給出供用戶進(jìn)行選擇的按鈕；對(duì)于對(duì)話框的背景顏色，要求和系統(tǒng)的整體風(fēng)格選取的顏色一致，而右上角的操作區(qū)只保留關(guān)閉一個(gè)

24、可操作功能，最小化和最大化的功能將不顯示。對(duì)應(yīng)采用的圖標(biāo)的圖例為：警告信息：禁止操作信息：操作成功信息：操作失敗信息：錯(cuò)誤信息：幫助信息：提示信息：提示信息內(nèi)容要求：l 提示信息中如有標(biāo)點(diǎn)符號(hào)，統(tǒng)一為全角符號(hào)；l 提示信息如有主語(yǔ)，統(tǒng)一為您；l 在重要或復(fù)雜的操作成功后，給予提示信息；l 有后續(xù)操作的操作在成功后，也需給予提示信息，說(shuō)明當(dāng)前的狀態(tài)。l 提示信息不宜太長(zhǎng)，寬度應(yīng)不超過(guò)當(dāng)前窗口寬度的1/2，當(dāng)超過(guò)此比例時(shí)，請(qǐng)視具體情況進(jìn)行換行；l 當(dāng)功能按鈕為圖片按鈕時(shí)，光標(biāo)停留需給予浮動(dòng)提示信息；4.4 鍵盤(pán)響應(yīng)支持由于用戶有時(shí)候還需要結(jié)合鍵盤(pán)進(jìn)行操作，所以頁(yè)面需要提供一些簡(jiǎn)單的鍵盤(pán)支持，例如：

25、“Esc”、“Enter”、“Tab”“Space”，系統(tǒng)應(yīng)對(duì)這些鍵值作出響應(yīng)。其中：l Esc，“取消”當(dāng)前操作；l Enter，“確認(rèn)”或進(jìn)行下一步操作或提交；l Tab、或Shift+tab能夠在頁(yè)面元素中按照一定次序切換焦點(diǎn)，遵循從左上至右下的原則；5 其他快捷鍵的支持，需要根據(jù)項(xiàng)目的實(shí)際情況來(lái)定義。6 WEB頁(yè)面通用規(guī)范6.1 一般頁(yè)面功能6.1.1 新增當(dāng)新增一條或多條記錄，要求：l 新增的記錄必須排在首頁(yè)首行。l 提交失敗后必須保存用戶已經(jīng)輸入的內(nèi)容，以便再次提交。l 提交時(shí)需對(duì)主要標(biāo)識(shí)字段進(jìn)行重復(fù)值、空值（空格）判斷。l 新增內(nèi)容提交失敗后，須保留用戶修改的內(nèi)容，以便再次修改提

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

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

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

29、則全選也去掉勾選；l 刷新頁(yè)面后，自動(dòng)去掉已勾選的記錄及全選的勾選；6.2 一般頁(yè)面規(guī)則6.2.1 默認(rèn)值各個(gè)頁(yè)面都會(huì)存在默認(rèn)值。要求：l 打開(kāi)一個(gè)新界面，光標(biāo)默認(rèn)停留在第一個(gè)待輸入的文本框中；l 當(dāng)選擇下拉框不存在默認(rèn)值時(shí)，則默認(rèn)為“請(qǐng)選擇”，當(dāng)存在默認(rèn)值時(shí)，請(qǐng)顯示默認(rèn)值；6.2.2 單選按組鈕默認(rèn)值6.2.3 表單元素選擇表單元素選擇要求主要集中在select,radio：l 性別，5個(gè)以下類別列表選擇用radio比較合適l 部門列表，用select比較合適6.2.4 必填值對(duì)界面必填項(xiàng)的要求：l 界面的必填項(xiàng)必須以紅色*號(hào)標(biāo)識(shí)出來(lái)。l 當(dāng)必填項(xiàng)沒(méi)有填寫(xiě)時(shí)，可在光標(biāo)準(zhǔn)備移走時(shí)，在文本框后以

30、“請(qǐng)輸入”紅色文字標(biāo)識(shí)；l 當(dāng)界面排列較緊時(shí)，如果必填項(xiàng)沒(méi)有填，可以通過(guò)彈出信息的方式來(lái)提示，或者光標(biāo)移走時(shí)彈出，或者最后提交時(shí)彈出。但確定后必須停留在第一個(gè)待輸入的文本框中；6.2.5 界面?zhèn)鬟f對(duì)于程序執(zhí)行過(guò)程中，會(huì)出現(xiàn)父窗體與子窗體參數(shù)同步傳遞的情況，規(guī)則是：l 當(dāng)父窗體與子窗體都存在同樣的查詢條件時(shí)，父窗體已輸入的查詢條件必須被帶到子窗體中；l 當(dāng)子窗體的任何操作影響了父窗體的數(shù)據(jù)時(shí)，子窗體關(guān)閉返回，但必須刷新父窗體的數(shù)據(jù)；l 關(guān)閉父窗體必須連同子窗體一同關(guān)閉；l 子窗體的大小不能超過(guò)父窗體，且不要遮住父窗體的主要信息；6.2.6 窗口嵌套針對(duì)多層頁(yè)面窗口的嵌套情況，要求：l 如果存在多

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

32、的性能介紹與說(shuō)明要與系統(tǒng)性能配套一致；l 更新系統(tǒng)版本時(shí)，對(duì)作了修改的地方在幫助文檔中要做相應(yīng)的修改；l 操作時(shí)要提供及時(shí)調(diào)用幫助的快捷方式，常用F1；l 在界面上即時(shí)調(diào)用幫助時(shí)，應(yīng)該能夠及時(shí)定位到與該操作相對(duì)應(yīng)的幫助位置，也就是說(shuō)幫助要有即時(shí)的針對(duì)性；l 最好提供目前流行的聯(lián)機(jī)幫助格式或HTML幫助格式；l 用戶可以用關(guān)鍵詞在幫助索引中搜索所要的幫助，當(dāng)然也應(yīng)該提供幫助索引；l 如果沒(méi)有提供軟件書(shū)面的幫助文檔，最好能夠有打印幫助的功能；l 在幫助中應(yīng)該提供我們的技術(shù)支持方式，一旦用戶難以自己解決可以方便的尋求新的幫助方式；6.2.9 菜單功能要求菜單是界面上最重要的元素，菜單位置按照按功能來(lái)

33、組織。要求：l 菜單通常采用“常用-主要-次要-工具-幫助”的位置排列，符合Windows風(fēng)格的要求；l 常用的有“文件”、“編輯”，“查看”等，需要系統(tǒng)有這些選項(xiàng)；l 下拉菜單要根據(jù)菜單選項(xiàng)的含義進(jìn)行分組，并切按照一定的規(guī)則進(jìn)行排列，用橫線隔開(kāi)；l 一組菜單的使用有先后要求或有向?qū)ё饔脮r(shí)，應(yīng)該按先后次序排列；l 沒(méi)有順序要求的菜單項(xiàng)按使用頻率和重要性排列，常用的放在開(kāi)頭， 不常用的靠后放置；重要的放在開(kāi)頭，次要的放在后邊；l 如果菜單選項(xiàng)較多，應(yīng)該采用加長(zhǎng)菜單的長(zhǎng)度而減少深度的原則排列；l 菜單深度一般要求最多控制在三層以內(nèi)；l 對(duì)常用的菜單要有快捷命令方式，組合原則見(jiàn)5.2.8；l 最好能

34、夠?qū)驼谶M(jìn)行的操作無(wú)關(guān)的菜單項(xiàng)能夠屏蔽，也可采用動(dòng)態(tài)加載方式即只有需要的菜單才顯示；l 菜單前的圖標(biāo)不宜太大，與和相應(yīng)的字高保持一致；l 主菜單的寬度要接近，字?jǐn)?shù)最好不應(yīng)多于四個(gè)；l 主菜單數(shù)目不應(yīng)太多，最好為單排布置；6.2.10 快捷鍵功能在菜單及按鈕中使用快捷鍵可以讓喜歡使用鍵盤(pán)的用戶操作得更快一些 在Windows及其應(yīng)用軟件中的快捷鍵功能大多是一致的，可以根據(jù)實(shí)際情況考慮實(shí)現(xiàn)。要求：l 面向事務(wù)的組合有: Ctrl-D 刪除、Ctrl-F 尋找、Ctrl H替換、Ctrl-I 插入、Ctrl-N 新記錄、Ctrl-S 保存、 Ctrl-O 打開(kāi)；l 列表: Ctrl-R 、Ctrl

35、-G定位；Ctrl-Tab下一分頁(yè)窗口或反序?yàn)g覽同一頁(yè)面控件；l 編輯: Ctrl-A全選；Ctrl-C 拷貝；Ctrl-V 粘貼；Ctrl-X 剪切；Ctrl-Z撤消操作；Ctrl-Y恢復(fù)操作；l 文件操作: Ctrl-P 打印；Ctrl-W 關(guān)閉；l 系統(tǒng)菜單:Alt-A文件；Alt-E編輯；Alt-T工具；AltW窗口；AltH幫助。l MS Windows保留鍵: Ctrl-Esc 任務(wù)列表 ；Ctrl-F4 關(guān)閉窗口； Alt-F4 結(jié)束應(yīng)用；Alt-Tab 下一應(yīng)用 ；Enter 缺省按鈕/確認(rèn)操作 ；Esc 取消按鈕/取消操作 ；Shift-F1 上下文相關(guān)幫助；l 按鈕中：可以

36、根據(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寫(xiě)。這些快捷鍵也可以作為開(kāi)發(fā)中文應(yīng)用軟件的標(biāo)準(zhǔn)，但亦可使用漢語(yǔ)拼音的開(kāi)頭字母；6.2.11 快捷鍵的限制由于IE本身的一些原因，需要避免一些不必要的錯(cuò)誤，故對(duì)其進(jìn)行攔截限制。要求：l 在用戶沒(méi)有提供明確需求情況下，限制F5、IE工具欄、退格鍵（僅限頁(yè)面不限輸入框）、Ctrl+N的使用；l 根據(jù)功能需要，限制右鍵菜單的使用；6.2.12 頁(yè)面的規(guī)范性通常界面設(shè)計(jì)都按Windows界面的規(guī)范來(lái)設(shè)計(jì)，即包

37、含“菜單條、工具欄、工具廂、狀態(tài)欄、滾動(dòng)條、右鍵快捷菜單”的標(biāo)準(zhǔn)格式，可以說(shuō)：界面遵循規(guī)范化的程度越高，則易用性相應(yīng)的就越好。小型軟件一般不提供工具廂。規(guī)范要求：l 常用菜單要有命令快捷方式。l 完成相同或相近功能的菜單用橫線隔開(kāi)放在同一位置。l 菜單前的圖標(biāo)能直觀的代表要完成的操作。l 菜單深度一般要求最多控制在三層以內(nèi)。l 工具欄要求可以根據(jù)用戶的要求自己選擇定制。l 相同或相近功能的工具欄放在一起。l 工具欄中的每一個(gè)按鈕要有及時(shí)提示信息。l 一條工具欄的長(zhǎng)度最長(zhǎng)不能超出屏幕寬度。l 工具欄的圖標(biāo)能直觀的代表要完成的操作。l 系統(tǒng)常用的工具欄設(shè)置默認(rèn)放置位置。l 工具欄太多時(shí)可以考慮使用

38、工具廂。l 工具廂要具有可增減性，由用戶自己根據(jù)需求定制。l 工具廂的默認(rèn)總寬度不要超過(guò)屏幕寬度的1/5。l 狀態(tài)條要能顯示用戶切實(shí)需要的信息，常用的有：l 目前的操作、系統(tǒng)狀態(tài)、用戶位置、用戶信息、提示信息、錯(cuò)誤信息等，如果某一操作需要的時(shí)間較長(zhǎng)，還應(yīng)該顯示進(jìn)度條和進(jìn)程提示。l 滾動(dòng)條的長(zhǎng)度要根據(jù)顯示信息的長(zhǎng)度或?qū)挾饶芗皶r(shí)變換，以利于用戶了解顯示信息的位置和百分比。l 狀態(tài)條的高度以放置五好字為宜，滾動(dòng)條的寬度比狀態(tài)條的略窄。l 菜單和工具條要有清楚的界限;菜單要求凸出顯示，這樣在移走工具條時(shí)仍有立體感。l 菜單和狀態(tài)條中通常使用5號(hào)字體。工具條一般比菜單要寬，但不要寬的太多，否則看起來(lái)很不

39、協(xié)調(diào)。l 右鍵快捷菜單采用與菜單相同的準(zhǔn)則。6.2.13 系統(tǒng)易用性易用性是指頁(yè)面上的功能遵從慣例，例如：按鈕名稱易懂，用詞準(zhǔn)確，并與同一界面上的其他按鈕易于區(qū)分，能望文知意。這樣，使得用戶不用查閱幫助就能知道該頁(yè)面上的功能并進(jìn)行相關(guān)的正確操作。要求：l 打開(kāi)一個(gè)新界面，光標(biāo)默認(rèn)停留在第一個(gè)待輸入的文本框中；l 完成相同或相近功能的按鈕放置在一起，減少鼠標(biāo)移動(dòng)的距離，常用按鈕要支持快捷方式；l 按功能將界面劃分局域塊，用Frame框括起來(lái)，并要有功能說(shuō)明或標(biāo)題；l 界面要支持鍵盤(pán)自動(dòng)瀏覽按鈕功能，即按Tab鍵的自動(dòng)切換功能；l 界面上首先應(yīng)輸入的和重要信息的控件在Tab順序中應(yīng)當(dāng)靠前，位置也應(yīng)

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

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

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

43、 特殊字符常有；;'"><，'：""、|+=)-(_*&&%$#!，.。?/還有空格；l 在讀入用戶所輸入的信息時(shí)，應(yīng)根據(jù)需要選擇是否去掉前后空格，例如：有些讀入數(shù)據(jù)庫(kù)的字段不支持中間有空格，但用戶切實(shí)需要輸入中間空格，這時(shí)要在程序中加以處理；6.2.15 獨(dú)特性要求如果一味的遵循業(yè)界的界面標(biāo)準(zhǔn)，則會(huì)喪失自己的個(gè)性.在框架符合以上規(guī)范的情況下，設(shè)計(jì)具有自己獨(dú)特風(fēng)格的界面尤為重要。尤其在商業(yè)軟件流通中有著很好的遷移默化的廣告效用要求：l 安裝界面上應(yīng)有單位介紹或產(chǎn)品介紹，并有自己的圖標(biāo)；l 主界面，最好是大多數(shù)界面上要有公司圖標(biāo)；l 登錄界面上要有本產(chǎn)品的標(biāo)志，同時(shí)包含公司圖標(biāo)；l 幫助菜單的"關(guān)于"中應(yīng)有版權(quán)和產(chǎn)品信息；l 公司的系列產(chǎn)品要保持一致的界面風(fēng)格，如背景色、字體、菜單排列方式、圖標(biāo)、安裝過(guò)程、按鈕用語(yǔ)等應(yīng)該大體一致；6.2.16 多窗口的應(yīng)用與系統(tǒng)資源設(shè)計(jì)良好的軟件不僅要有完備的功能，而且要盡可能的占用最低限度的資源，因此在出現(xiàn)多窗口的情況下需要避免下述一些情況。要求：l 在多窗口系統(tǒng)中，有些界面要求必須保持在最頂層，避免用戶在打開(kāi)多個(gè)窗口時(shí)，不停的切換甚至最小化其他窗口來(lái)顯示該窗口；l 在主界面載入完畢后自動(dòng)卸出內(nèi)存，讓出所占用的WINDOW