Web應用界面設計規范

文檔標識：comtop-std-webUI

深圳市康拓普信息技術有限公司

Shenzhen Comtop Information Technology Co.,Ltd.

修訂記錄

版本	修訂說明	作者	審核	審核日期
1.0	?	羅星衡	?	?
1.1	修訂：增加了對查詢界面、文本框等的要求	李勛紅	林鎮鋒	2006-3-13
1.2	修訂	李勛紅	林鎮鋒	2006-5-10
1.3	修訂：樹的底色改成白色，編輯頁面的備注寫在表格里面	李勛紅	林鎮鋒	2006-5-30
1.4	2006-11-16 增加：對數字加千分位符的要求（1.4中5的c）)	李勛紅	?	?
1.5	修改文檔格式	張洪艷	?	?

所有權聲明：

深圳市康拓普信息技術有限公司

版權所有 不得復制

Copyright ? 2006 by Shenzhen Comtop Information Technology Co.，Ltd.

目 錄

Web應用界面設計規范.... 1

1 示例與說明.... 1

1.1 登錄界面... 1

1.2 桌面... 2

1.3 總體界面... 3

1.4 列表界面... 4

1.5 編輯界面... 6

1.5.1 上下結構主從式編輯界面... 6

1.5.2 左右結構主從式編輯頁面... 7

1.5.3 一般編輯界面... 9

1.6 查詢界面... 9

1.7 彈出窗口... 10

1.8 控件... 10

1.8.1 文本框... 10

1.8.2 下拉選擇框... 11

1.8.3 單選按鈕... 11

1.9 提示信息... 11

2 待確定問題列表.... 11

1 示例與說明

1.1 登錄界面

如上圖例所示：登錄界面的內容應該包括：

1. 用戶單位的名稱和LOGO圖案

2. 應用系統的中文名稱(也可加入英文名稱)

3. 用戶名和密碼輸入框

4. 本公司版權說明（中英文）

1.2 桌面

如上圖例所示：桌面的內容應該包括：

1. 桌面的文字標識

2. 個人需要緊急處理的事務提醒

3. 整個系統的信息公告滾動框（可選）

4. 各種工具入口

5. 本公司客戶服務電話，傳真，EMAIL提示

1.3 總體界面

如上圖例所示：總體界面的內容應該包括：

1. 用戶單位的名稱和LOGO圖案

2. 應用系統的中文名稱(也可加入英文名稱)

3. 系統功能入口(比如回到桌面， 重新登錄等功能)

4. 功能菜單區域

5. 主工作區

1.4 列表界面

1. 所在的菜單層次：說明本模塊所在位置的文字，所在的位置必須對應功能菜單

比如點擊菜單上的；則模塊位置說明文字必須對應起來:

2. 選中的TAB頁(每個tab頁所包含的頁面可以稱之為一個卡片):

a) 卡片的底色必須是白色的，卡片外的顏色是灰色的；

b) 選中的tab按鍵的顏色必須和未選中的tab按鍵區別開來，未選中的按鍵上的字體是黑色的，而選中按鍵上的字體是藍色加粗的

如右圖所示：

3. 按鈕說明：

a) 按鈕的顏色是統一的;

b) 按鈕上如果只有兩個字，則這兩個字之間和兩個字的兩邊都需要一個空格；

c) 如果是兩個字以上的則只需要在字兩邊加一個空格；

d) 按鈕的最右端必須和列表的最右端對齊；

e) 按鈕之間沒有空格；

如右圖所示：

4. 文字顯示多個記錄說明：

a) 列表必須提供對多個記錄操作的功能，必須有一個選擇本頁所有記錄的按鈕；如右圖所示：；

b) 列表下面必須注明記錄總數，如“共有15條記錄”；

5. 記錄文字說明：

a) 如果列表前選擇框使用的是Radio Button，則應該默認選中第1條;

b) 選中的記錄必須和未選中的記錄區分開來；

c) 列表中數量數字必須靠右顯示；金額數字采用千分位分隔符的形式，分隔符為西文逗號“,”如：。

d) 列表中字數固定的文字（比如日期，圖片等）居中顯示；

e) 字數不規則的記錄靠左顯示；

6. 如果沒有選中列表中的項，在點擊功能操作按鈕時，必須有提示“沒有選擇……”。例如：沒有選擇項目列表中的項目時，按功能按鈕彈出窗口提示：“沒有選擇項目！”。

7. 在列表的字段中，有被截短的，鼠標放上去，必須顯示出全部的值，如圖所示。

8. 選中的行顯示為藍色。

9. 如果列表沒有數據時，顯示“本 列 表 暫 無 記 錄 ！” 用藍色字體，白色背景。

10. 列表中顯示查詢結果時，“查詢”按鈕變藍。如圖所示

11. 備注描述－如：“紅色表示回退的記錄.”的描述寫在表格外面。

12. 從詳細頁面返回到列表頁面時，光標應該定位到剛才選擇的記錄。

13. 當彈出一個窗口的目的是為了返回選擇的行時，雙擊列表中的某一行上的數據，選中行前的單選或復選框。進入詳細信息的途徑為點擊列表最右邊的圖標。如圖所示：

1.5 編輯界面

1.5.1 上下結構主從式編輯界面

2. 界面說明文字：主從式界面必須有說明文字，且主頁面和從頁面的字體必須是一樣的，如右圖所示：

3. 文本框說明：

a) 只讀的文本框和可輸入的文本框在顏色上必須區分；

b) 文本框上下或者左右對齊；

c) 數字靠右顯示；

d) 字數相等的文字居中顯示；

e) 字數不等的文字靠左顯示；

如右圖所示：

4. 編輯頁面表格必須和界面兩端有一定距離

1.5.2 左右結構主從式編輯頁面

左右結構的頁面中，工作區所屬模塊說明部分必須包括左右兩部分；

每個填項或者選項的說明文字必須靠左顯示；

1.5.3 一般編輯界面

?	?	?	?
?		?
?

1. 彈出窗口說明：彈出式窗口應居中顯示；必須有關閉窗口的按鈕，否則則必須有返回上一頁的按鈕。如果是關閉按鈕，名稱必須叫做“關閉”，不能寫成“取消”或其他類似的名字。

2. 必填項說明：編輯頁面中的必填項必須有標識，如右圖：

也要有標識的說明，如右圖所示：

3. 多行文本框說明：多行的文本框必須有提示剩余輸入字數的功能，且文字是黑色的，數字必須是突出的紅色字體

如右圖所示：

4. 人員選擇使用；部門選擇使用；其它選擇使用。

1.6 查詢界面

1. 功能按鈕：查詢、全部數據、清空、關閉，放在頁面底部中間位置。

2. 清空：指清空查詢條件。

3. 執行查詢時將輸入的查詢條件的前后空格過濾掉。

4. 查詢條件的名稱的文字統一為左對齊。

1.7 彈出窗口

1． 彈出新的可編輯窗口、查看信息窗口、查詢窗口的位置在中間。

2． 彈出選擇部門、日期等窗口時位置在編輯框旁邊。

1.8 控件

暫時不可用的控件應該灰掉

1.8.1 文本框

1.可以輸入的文本框以白色為背景，如：

2.需要選擇的文本框都以白色為背景，如：

3. 不可輸入不可選擇的文本框以灰色為背景，如：

4.在界面上明確各個文本框的TAB鍵的順序。

1.8.2 下拉選擇框

1. 未選中時顯示的值為“--請選擇--”。

1.8.3 單選按鈕

點擊按鈕的值，應能選中按鈕。

如圖：用戶點擊“暫緩”二字，選中前面的單選按鈕。

1.9 提示信息

需要用戶確認的信息一定要用對話框，例如：警告信息，而保存成功，新增成功等信息可以使用浮動的文本框

2 待確定問題列表

1.“工作區所屬模塊說明”、“模塊位置說明文字”層次和命名不規范。（Web界面設計規范上要求所在的菜單層次：說明本模塊所在位置的文字，所在的位置必須對應功能菜單。目前的系統中一般只對應到第二級，從第三級開始，有的會把前二級的名稱都帶著，有的則只顯示第三級的名稱。）

2. 列表如果超過一頁（有時一條記錄有多行，又不能用省略號）時，怎么加滾動條，鎖定題頭？鎖定分頁條？

3.在線幫助？建議至少在業務邏輯比較復雜的界面增加幫助按鈕，點擊彈出當頁的幫助內容。

5. 每種控件用哪個CSS類希望定下來

6. 404,500出錯頁面需要規定一下。現在使用的太粗糙了。

7. 規范最好有代碼，頁面怎么布局？用多少table定位，不然每個項目組或不同開發人員各自一種寫法，對維護不方便。（希望有一個怎么寫html頁包括css、布局等代碼級的規范）

8. 最好能提供頁面template

轉載于:https://www.cnblogs.com/hqr9313/archive/2012/08/06/2624593.html

總結

以上是生活随笔為你收集整理的Web应用界面设计规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。