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

1、 見龍在田軟軟件工程程研發(fā)中中心界面規(guī)范 目錄TOC o 1-5 h z u HYPERLINK l _Toc271016317 前言 PAGEREF _Toc271016317 h 3 HYPERLINK l _Toc271016318 1. 說明明 PAGEREF _Toc271016318 h 4 HYPERLINK l _Toc271016319 2. 細節(jié)節(jié) PAGEREF _Toc271016319 h 4 HYPERLINK l _Toc271016320 2.1 UI色色彩與字字體 PAGEREF _Toc271016320 h 4 HYPERLINK l _Toc271016

2、321 備注： PAGEREF _Toc271016321 h 55 HYPERLINK l _Toc271016322 外部主界界面 PAGEREF _Toc271016322 h 5 HYPERLINK l _Toc271016323 內部管理理主界面面 PAGEREF _Toc271016323 h 5 HYPERLINK l _Toc271016324 2.2 布局與與間距 PAGEREF _Toc271016324 h 6 HYPERLINK l _Toc271016325 2.3 按鈕 PAGEREF _Toc271016325 h 6 HYPERLINK l _Toc271016

3、326 2.4超鏈鏈接 PAGEREF _Toc271016326 h 7 HYPERLINK l _Toc271016327 2.5分頁頁控件 PAGEREF _Toc271016327 h 7 HYPERLINK l _Toc271016328 2.6 ggridd vieww PAGEREF _Toc271016328 h 7 HYPERLINK l _Toc271016329 2.7 驗驗證信息息提示 PAGEREF _Toc271016329 h 7 HYPERLINK l _Toc271016330 2.8 窗窗口 PAGEREF _Toc271016330 h 9 HYPERLI

4、NK l _Toc271016331 2.9日期期格式 PAGEREF _Toc271016331 h 9 HYPERLINK l _Toc271016332 2.10特特殊字符符 PAGEREF _Toc271016332 h 10 HYPERLINK l _Toc271016333 2.11 英文輸輸入 PAGEREF _Toc271016333 h 10 HYPERLINK l _Toc271016334 2.12 數值字字段 PAGEREF _Toc271016334 h 10 HYPERLINK l _Toc271016335 2.13字字符字段段 PAGEREF _Toc27101

5、6335 h 10 HYPERLINK l _Toc271016336 2.14單單行文本本框 PAGEREF _Toc271016336 h 10 HYPERLINK l _Toc271016337 2.15 密碼輸輸入 PAGEREF _Toc271016337 h 10 HYPERLINK l _Toc271016338 2.16鼠鼠標 PAGEREF _Toc271016338 h 11 HYPERLINK l _Toc271016339 2.17 光標標定位 PAGEREF _Toc271016339 h 11 HYPERLINK l _Toc271016340 2.18 TAAB鍵

6、 PAGEREF _Toc271016340 h 11前言界面是軟件件與用戶戶交互最最直接的的層，界界面的好好壞決定定用戶對對軟件的的第一印印象。設設計良好好的界面面能夠引引導用戶戶自己完完成相應應的操作作，起到到向導作作用。介介于見龍龍在田軟軟件工程程研發(fā)中中心內部部管理系系統(tǒng)，以以及外部部網站的的設計，對對于界面面做了以以下幾點點要求：目的：1、以用用戶為中中心。設設計由用用戶控制制的界面面，而不不是界面面控制用用戶。 2、清楚一一致的設設計。所所有界面面的風格格保持一一致，所所有具有有相同含含義的術術語保持持一致，且且易于理理解。3、擁有良良好的直直覺特征征。對用戶所所熟悉的的現(xiàn)實世世界

7、中的的事物進進行抽象象，來給用戶戶以暗示示，盡快快幫助用用戶學會會如何操操作軟件件。4、較快快的響應應速度。5、簡單單且美觀觀。 本規(guī)范的主主要設計計為：1 .對于于界面規(guī)規(guī)范的介介紹2 .對于于界面設設計的細細節(jié)部分分做了充充分的要要求與說說明1. 說明明設計由用戶戶控制的的界面，而而不是界界面控制制用戶。清清楚一致致的設計計，所有有界面的的風格保保持一致致，所有有具有相相同含義義的術語語保持一一致，且且易于理理解，擁擁有良好好的直覺覺特征，對用戶所熟悉的現(xiàn)實世界中的事物進行抽象，來給以用戶暗示和隱喻，來幫助用戶能迅速學會軟件的使用，整個系統(tǒng)能夠有較快的響應速度，簡單且美觀。界面規(guī)范是測試部

8、門對于提交的項目的界面所作測試的依據。2. 細節(jié)節(jié)2.1 UI色彩彩與字體體 導航欄的字字體均為14ppx。新聞詳細頁頁面標題題字體為為16ppx，正正文字體體為144px，副欄字字體122px，行間距距1500%。按鈕內字體體為144px。grid vieew控件件內的字字大小統(tǒng)統(tǒng)一用默默認即ssmalll即12ppx。新聞標題列列表字體體大小112pxx。超鏈接“返返回上一一級”字字體大小小14ppx。內部系統(tǒng)詳詳細、編編輯、高高級查詢詢、添加加、登記記、修改改頁面內內的字體體均為122px。時間字體大大小均為為12ppx。備注：外部主界面面：文字大?。╬xx）字體顏色14宋體#82c77

9、e716宋體#132aad712宋體#000000014宋體#132aad714宋體#000000012宋體# 93993933內部管理主主界面：文字大?。╬xx）字體顏色14宋體黑12.14#568ffb334.黑 (上班，下下班)14黑(背景顏色色#ebff7fdd)142.2 布局與與間距查詢時間文文本框 1000px ，高222px。下拉列表高高22ppx（寬寬根據字字數自動動控制）。grid vieew控件件寬6288px，特特殊地方方需要修修改詳情情請見22.6。兩個字buuttoon 高高度222px，寬寬60ppx，多多字Buuttoon根據據字數系系統(tǒng)自動動調節(jié)寬度度，需填寫

10、內容容的文本本框寬1140ppx ，高22ppx。Grid vieew的內內容（不不包括“姓名”、“工號號”標識識的那一一行）滿10行自自動分頁頁。不滿滿10行的的顯示分分頁控件件。（備備注：權權限列表表：FuuncttionnLisst.aaspxx，備忘錄錄： MMainnMemmos.asppx，給用戶戶組分配配權限：FunnctiionIImpoowerr.asspx，給給用戶組組分配用用戶：PPermmisssionnAsssignnmennt.aaspxx 不需要要分頁）如果新聞中中插入圖圖片，圖圖片高3300，寬寬60%。與上上下文相相距5ppx，新新聞內容容行間距距1500%。

11、Txtboox高1200，寬5220。Txtarrea高高3200，寬7220。以下三種情情況為按按鈕在除除了grrid vieew 內內的頁面面內。兩個按鈕在在一行，按按鈕相距距1233px，居居中。三個按鈕在在一行，按按鈕相距距40ppx，居居中。按鈕與上一一行控件件相距660pxx。若按按鈕上一一控件為為分頁控控件，與與分頁控控件相距距5pxx。2.3 按鈕 1）按按鈕風格格相同， 所有的確定，添加，取消，編輯，查詢等兩個字的按鈕的大小均為寬60像素，高22像素，字體14px。三個以上字段的按鈕根據字數自動確定按鈕寬度。2）griid vvieww 內的的按鈕位位置請參參照2.2原圖圖的

12、坐標標。以下三種情情況為按按鈕在除除了grrid vieew 內內的頁面面內。3）兩個按按鈕在一一行，按按鈕相距距1233px，居居中。4）三個按按鈕在一一行，按按鈕相距距40ppx，居居中。5）按鈕與與上一行行控件相相距600px。若若按鈕上上一控件件為分頁頁控件，與與分頁控控件相距距5pxx。2.4超鏈鏈接以特殊編碼碼的文本本或圖形形的形式式來實現(xiàn)現(xiàn)鏈接，如如果單擊擊該鏈接接，則相相當于指指示瀏覽覽器移至至同一網網頁內的的某個位位置，或或打開一一個新的的網頁，或或打開某某一個新新的WWWW網站站中的網網頁時使使用超鏈鏈接。當需要實現(xiàn)現(xiàn)鏈接并并需用易懂懂的符號號表示操操作時，請請使用動動作按

13、鈕鈕。用于激活一一些功能能時，請請使用動動作按鈕鈕。2.5分頁頁控件采用yahhoo styyle格格式，左左右居中中，始終終與上一一控件相相距600px。Gridd viiew的的內容（不不包括“姓姓名”、“工工號”標標識的那那一行）滿滿10行自自動分頁頁，不滿滿10行的的顯示分分頁控件件。（備備注：權權限列表表：FuuncttionnLisst.aaspxx，備忘錄錄： MMainnMemmos.asppx，給用戶戶組分配配權限：FunnctiionIImpoowerr.asspx，給給用戶組組分配用用戶：PPermmisssionnAsssignnmennt.aaspxx，部門門維護：A

14、dmminMMainn.asspx不不需要添添加分頁頁控件。）2.6 ggridd viiewgrid vieew控件件采用自自動套用用格式：傳統(tǒng)型型，wiidthh 6228pxx，rowwstyyle-higght 默認222px，把把griid vvieww的第一一行的字字改為黑黑色，第第一行的的背景改改為白色色，字一一般是默默認即ssmalll，加加粗,ggriddlinne為 verrticcal。若沒有查詢詢那一行行，grrid vieew控件件采用自自動套用用格式：傳統(tǒng)型型，wiidthh 6228pxx，rowwstyyle-higght默默認222px，把把griid vvi

15、eww的第一一行roowsttylee-hiightt 設置置為355px，顏顏色為#72bbbecc，字改改為黑色色，加粗粗，字一一般是默默認即ssmall,grridllinee為 veertiicall l。Grid vieew的內內容（不不包括“姓姓名”、“工工號”標標識的那那一行）滿滿10行自自動分頁頁。2.7 驗驗證信息息提示分級：A窗口提示禁禁止操作作窗口提示：禁止提提示?！敖箞?zhí)行行此操作作！”。B窗口提示窗口大小是是根據字字段確定定，統(tǒng)一一用166字段，如如不夠116字段段請用空空格補足足。文字字大小:12ppx。提示信息：“確定定此信信息嗎？”。詳情請請見備注注。C當前頁面

16、提提示給出限制提提示項標標識符*紅色，標標識放在在文本框框的后邊邊，驗證證提示內內容顏色色為宋體體紅色，12px，遵循的原則是驗證提示內容盡量簡短。若為必填項項，在文文本框后后加“*”，并在在頁面的的第一行行給予注注釋“ ”，紅色色，122px。提示信息：“成成功！”、“失?。　?。詳情請請見備注注。提示時機：一般情情況下按按總體從從上到下下，同時時行間從從左到右右的優(yōu)先先級著一一單獨顯示示。D頁面跳轉提提示提示添加成成功，超超鏈接：“繼續(xù)續(xù)添加”or“返回管理頁面”。E不提示不與提示事件：封存存、查詢詢、確定定、取消消、保存存、重置置、添加加、生成成報表、登登記設備備信息、刪刪除、上上傳、分分

17、配、更更新、取取消、轉轉發(fā)、上上班下班班、密碼碼有誤、列列表為空空、時間間前后錯錯誤、格格式錯誤誤，系統(tǒng)統(tǒng)繁忙。備注：上班：“簽簽到成功功，朋友友努力工工作吧！”。下班：“簽簽退成功功，好好好休息，明明天見！”為空：grrid vieew內列列表為空空的提示示信息統(tǒng)統(tǒng)一為112pxx，redd，樣式式“*提示信信息”，居居表格中中間，表表格高1170ppx，寬寬6288，提示示信息距距表格880pxx，左右右居中。“*無查詢結果！”形如：密碼有誤：“賬號號不存在在或密碼碼錯誤，請請重輸。”時間前后錯錯誤：“起起始時間間應該小于結結束時間間！”頁面提示：“成功！”、“失??！”，所所在位置置緊挨上

18、上一控件件頁面居居中。如如圖：格式錯誤：“*應該該為”，12px，red。在文本框后。系統(tǒng)忙：服服務器繁繁忙，請請稍后重重試！2.8 窗窗口單擊新聞、通通知、中中心日志志標題，在在彈出新新窗口上上顯示新新聞、通通知、中中心日志志內容。2.9日期期格式 1）日期期顯示由由控件決決定，格格式統(tǒng)一一為：19888-88-244 000:000:000 2）使用日日期控件件，則不不可手工工錄入。 3）對于日日期段，需需在截止止日期小小于開始始日期時時給出提提示，詳詳情請參參照2.4驗證證信息提提示。2.10特特殊字符符輸入區(qū)域輸輸入特殊殊字符，插插入數據據庫時不不出錯或或提示不不允許輸輸入特殊殊字符。特殊字符包包括：“=$%￥&#等 。2.11 英文輸輸入