見龍在田研發(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. 細(xì)節(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 內(nèi)部管理理主界面面 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 數(shù)值字字段 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鼠鼠標(biāo) PAGEREF _Toc271016338 h 11 HYPERLINK l _Toc271016339 2.17 光標(biāo)標(biāo)定位 PAGEREF _Toc271016339 h 11 HYPERLINK l _Toc271016340 2.18 TAAB鍵

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

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

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

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

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

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

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

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

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

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

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

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

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