見(jiàn)龍?jiān)谔镅邪l(fā)中心界面規(guī)范

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

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

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

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

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

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

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

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

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

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

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

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

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