見龍在田研發(fā)中心界面規(guī)范

1、 見龍在田軟件工程研發(fā)中心界面規(guī)范 目錄前言31. 說明42. 細節(jié)42.1 UI色彩與字體4備注：5l外部主界面5l內(nèi)部管理主界面52.2 布局與間距62.3 按鈕62.4超鏈接72.5分頁控件72.6 grid view72.7 驗證信息提示72.8 窗口92.9日期格式92.10特殊字符102.11 英文輸入102.12 數(shù)值字段102.13字符字段102.14單行文本框102.15 密碼輸入102.16鼠    標112.17 光標定位112.18 TAB鍵11前言界面是軟件與用戶交互最直接的層，界面的好壞決定用戶對軟件的第一印象。設(shè)計良好的界面

2、能夠引導(dǎo)用戶自己完成相應(yīng)的操作，起到向?qū)ё饔?。介于見龍在田軟件工程研發(fā)中心內(nèi)部管理系統(tǒng)，以及外部網(wǎng)站的設(shè)計，對于界面做了以下幾點要求：目的：1、 以用戶為中心。設(shè)計由用戶控制的界面，而不是界面控制用戶。 2、清楚一致的設(shè)計。所有界面的風格保持一致，所有具有相同含義的術(shù)語保持一致，且易于理解。3、擁有良好的直覺特征。對用戶所熟悉的現(xiàn)實世界中的事物進行抽象，來給用戶以暗示，盡快幫助用戶學會如何操作軟件。 4、較快的響應(yīng)速度。 5、簡單且美觀。 本規(guī)范的主要設(shè)計為：1 .對于界面規(guī)范的介紹2 .對于界面設(shè)計的細節(jié)部分做了充分的要求與說明1. 說明設(shè)計由用戶控制的界面，而

3、不是界面控制用戶。清楚一致的設(shè)計，所有界面的風格保持一致，所有具有相同含義的術(shù)語保持一致，且易于理解，擁有良好的直覺特征，對用戶所熟悉的現(xiàn)實世界中的事物進行抽象，來給以用戶暗示和隱喻，來幫助用戶能迅速學會軟件的使用，整個系統(tǒng)能夠有較快的響應(yīng)速度，簡單且美觀。界面規(guī)范是測試部門對于提交的項目的界面所作測試的依據(jù)。2. 細節(jié)2.1 UI色彩與字體 1) 導(dǎo)航欄的字體均為14px。2) 新聞詳細頁面標題字體為16px，正文字體為14px，副欄字體12px，行間距150%。3) 按鈕內(nèi)字體為14px。4) grid view控件內(nèi)的字大小統(tǒng)一用默認即small即12px。5) 新聞標題列表字體大小12

4、px。6) 超鏈接“返回上一級”字體大小14px。7) 內(nèi)部系統(tǒng)詳細、編輯、高級查詢、添加、登記、修改頁面內(nèi)的字體均為12px。8) 時間字體大小均為12px。備注：l 外部主界面：文字大?。╬x）字體顏色14宋體#82c7e716宋體#132ad712宋體#00000014宋體#132ad714宋體#00000012宋體# 939393l 內(nèi)部管理主界面：文字大小（px）字體顏色14宋體黑12.14#568fb334.黑 (上班，下班)14黑(背景顏色#ebf7fd)142.2 布局與間距1) 查詢時間文本框 100px ，高22px。2) 下拉列表高22px（寬根據(jù)字數(shù)自動控制）。3) g

5、rid view控件寬628px，特殊地方需要修改詳情請見2.6。4) 兩個字button 高度22px，寬60px，多字Button根據(jù)字數(shù)系統(tǒng)自動調(diào)節(jié)寬度，5) 需填寫內(nèi)容的文本框?qū)?40px ，高22px。6) Grid view的內(nèi)容（不包括“姓名”、“工號”標識的那一行）滿10行自動分頁。不滿10行的顯示分頁控件。（備注：權(quán)限列表：FunctionList.aspx，備忘錄： MainMemos.aspx，給用戶組分配權(quán)限：FunctionImpower.aspx，給用戶組分配用戶：PermissionAssignment.aspx 不需要分頁）7) 如果新聞中插入圖片，圖片高300

6、，寬60%。與上下文相距5px，新聞內(nèi)容行間距150%。8) Txtbox高120，寬520。9) Txtarea高320，寬720。10) 以下三種情況為按鈕在除了grid view 內(nèi)的頁面內(nèi)。a) 兩個按鈕在一行，按鈕相距123px，居中。b) 三個按鈕在一行，按鈕相距40px，居中。c) 按鈕與上一行控件相距60px。若按鈕上一控件為分頁控件，與分頁控件相距5px。2.3 按鈕 1）  按鈕風格相同， 所有的確定，添加，取消，編輯，查詢等兩個字的按鈕的大小均為寬60像素，高22像素，字體14px。三個以上字段的按鈕根據(jù)字數(shù)自動確定按鈕寬度。2）grid view 內(nèi)

7、的按鈕位置請參照2.2原圖的坐標。以下三種情況為按鈕在除了grid view 內(nèi)的頁面內(nèi)。3）兩個按鈕在一行，按鈕相距123px，居中。4）三個按鈕在一行，按鈕相距40px，居中。5）按鈕與上一行控件相距60px。若按鈕上一控件為分頁控件，與分頁控件相距5px。2.4超鏈接以特殊編碼的文本或圖形的形式來實現(xiàn)鏈接，如果單擊該鏈接，則相當于指示瀏覽器移至同一網(wǎng)頁內(nèi)的某個位置，或打開一個新的網(wǎng)頁，或打開某一個新的WWW網(wǎng)站中的網(wǎng)頁時使用超鏈接。當需要實現(xiàn)鏈接并需用易懂的符號表示操作時，請使用動作按鈕。用于激活一些功能時，請使用動作按鈕。2.5分頁控件采用yahoo style格式，左右居中，始終與上

8、一控件相距60px。Grid view的內(nèi)容（不包括“姓名”、“工號”標識的那一行）滿10行自動分頁，不滿10行的顯示分頁控件。（備注：權(quán)限列表：FunctionList.aspx，備忘錄： MainMemos.aspx，給用戶組分配權(quán)限：FunctionImpower.aspx，給用戶組分配用戶：PermissionAssignment.aspx，部門維護：AdminMain.aspx不需要添加分頁控件。）2.6 grid view1) grid view控件采用自動套用格式：傳統(tǒng)型，width 628px，rowstyle-hight 默認22px，把grid view的第一行的字改為黑色

9、，第一行的背景改為白色，字一般是默認即small，加粗,gridline為 vertical。2) 若沒有查詢那一行，grid view控件采用自動套用格式：傳統(tǒng)型，width 628px，rowstyle-hight默認22px，把grid view的第一行rowstyle-hight 設(shè)置為35px，顏色為#72bbec，字改為黑色，加粗，字一般是默認即smal,gridline為 vertical l。3) Grid view的內(nèi)容（不包括“姓名”、“工號”標識的那一行）滿10行自動分頁。2.7 驗證信息提示分級：A窗口提示禁止操作1) 窗口提示：禁止提示。2) “禁止執(zhí)行此操作！”。B

10、窗口提示1) 窗口大小是根據(jù)字段確定，統(tǒng)一用16字段，如不夠16字段請用空格補足。文字大小:12px。2) 提示信息：“確定此信息嗎？”。詳情請見備注。C當前頁面提示1) 給出限制提示項標識符*紅色，標識放在文本框的后邊，驗證提示內(nèi)容顏色為宋體紅色，12px，遵循的原則是驗證提示內(nèi)容盡量簡短。2) 若為必填項，在文本框后加“*”，并在頁面的第一行給予注釋“ ”，紅色，12px。3) 提示信息：“成功！”、“失?。　?。詳情請見備注。4) 提示時機：一般情況下按總體從上到下，同時行間從左到右的優(yōu)先級著一單獨顯示。D頁面跳轉(zhuǎn)提示提示添加成功，超鏈接：“繼續(xù)添加”or“返回管理頁面”。E不提示不與提示

11、事件：封存、查詢、確定、取消、保存、重置、添加、生成報表、登記設(shè)備信息、刪除、上傳、分配、更新、取消、轉(zhuǎn)發(fā)、上班下班、密碼有誤、列表為空、時間前后錯誤、格式錯誤，系統(tǒng)繁忙。備注：a) 上班：“簽到成功，朋友努力工作吧！”。b) 下班：“簽退成功，好好休息，明天見！”c) 為空：grid view內(nèi)列表為空的提示信息統(tǒng)一為12px，red，樣式“*提示信息”，居表格中間，表格高170px，寬628，提示信息距表格80px，左右居中。“*無查詢結(jié)果！”形如：d) 密碼有誤：“賬號不存在或密碼錯誤，請重輸。”e) 時間前后錯誤：“起始時間應(yīng)該小于結(jié)束時間！”f) 頁面提示：i. “成功！”、“失敗！

12、”，所在位置緊挨上一控件頁面居中。如圖：ii. 格式錯誤：“*應(yīng)該為”，12px，red。在文本框后。g) 系統(tǒng)忙：服務(wù)器繁忙，請稍后重試！2.8 窗口單擊新聞、通知、中心日志標題，在彈出新窗口上顯示新聞、通知、中心日志內(nèi)容。2.9日期格式   1）  日期顯示由控件決定，格式統(tǒng)一為 ：1988-8-24 00:00:00 2）  使用日期控件，則不可手工錄入。 3）  對于日期段，需在截止日期小于開始日期時給出提示，詳情請參照2.4驗證信息提示。2.10特殊字符輸入?yún)^(qū)域輸入特殊字符，插入數(shù)據(jù)庫時不出錯或提示不允許

13、輸入特殊字符。特殊字符包括：  “ =        $  %    % ￥ & #  等 。2.11 英文輸入 英文輸入不區(qū)分大小寫，不可輸入漢字、數(shù)字及特殊字符。2.12 數(shù)值字段   只能輸入+ ， ，09及功能鍵(BackSpace 光標) 。數(shù)值不能為負數(shù)。2.13字符字段   字符字段中只能輸入字符，非法字符如單引號、數(shù)字均不可輸入   2.14單行文本框       長度合適，可以容納相應(yīng)文字，但不能超過輸入框允許輸入的最大字段長度，將可以輸入的最大字符數(shù)（*加宋體紅色，12px）標在旁邊單行文本框中當輸入的字符超過一定長度時再輸入無效。 查詢時間文本框 100px 。需填寫內(nèi)容的文本框?qū)?40px ，高22px。2.15 密碼輸入 程序中應(yīng)給出文字說明密碼的可輸入長度， 48個。 2.16鼠    標 系統(tǒng)正常情況下，鼠標顯示箭頭。當鼠標放置在