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

1、1 / 10見龍在田軟件工程研發(fā)中心界面規(guī)范目錄前言 .31.說明 .42 / 102.細(xì)節(jié) .42.1UI色彩與字體 .4備注： .4外部主界面 .4內(nèi)部管理主界面 .52.2布局與間距 .52.3按鈕 .62.4超鏈接 .62.5分頁控件 .62.6GRID VIEW.72.7驗證信息提示 .72.8窗口 .92.9日期格式 .92.10特殊字符 .92.11英文輸入 .92.12數(shù)值字段 .92.13字符字段 .92.14單行文本框 .92.15密碼輸入 .102.16鼠標(biāo). 102.17光標(biāo)定位 .102.18 TAB鍵. 103 / 10、八 、亠前言界面是軟件與用戶交互最直接的層，

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

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

4、即small即12px。5）新聞標(biāo)題列表字體大小12px。6）超鏈接“返回上一級”字體大小14px。7）內(nèi)部系統(tǒng)詳細(xì)、編輯、高級查詢、添加、登記、修改頁面內(nèi)的字體均為12px。8）時間字體大小均為12px。備注：外部主界面：文字大?。╬x）字體顏色戯見龍在0D勲故簡介14宋體#82c7e7中心公告16宋體#132ad712宋體#000000友14宋體#132ad7洛陽艾克科抹臺限於司14宋體#0000005 / 10槪根所祈匕潯眶見龍花田軟髀理匚；：躱屮c12宋體#939393內(nèi)部管理主界面：文字大?。╬x）字體顏色留言。條新14宋體黑1 個人失去機(jī)會并不町怕112.陸用14#568fb31

5、C * O 4 .Ar I丄D必遷m34.黑八、（上班，下班）14黑八、攏的ft務(wù)（背景顏色#ebf7fd）14 2.2 布局與間距1）查詢時間文本框100px，高22px。2）下拉列表高22px（寬根據(jù)字?jǐn)?shù)自動控制）。3） grid view控件寬628px，特殊地方需要修改詳情請見2.6。4）兩個字button高度22px，寬60px，多字Button根據(jù)字?jǐn)?shù)系統(tǒng)自動調(diào)節(jié)寬 度，5）需填寫內(nèi)容的文本框?qū)?40px，高22px。6） Grid view的內(nèi)容（不包括“姓名”、“工號”標(biāo)識的那一行）滿10行自動分頁。不滿10行的顯示分頁控件。（備注：權(quán)限列表：FunctionList.aspx

6、， 備忘錄：MainMemos.aspx，給用戶組分配權(quán)限：Functionlmpower.aspx，給用戶組分配用戶：PermissionAssignment.aspx不需要分頁）7）如果新聞中插入圖片，圖片高300，寬60%。與上下文相距5px，新聞內(nèi)容 行間距150%。8） Txtbox高120，寬520。9） Txtarea高320，寬720。6 / 1010）以下三種情況為按鈕在除了grid view內(nèi)的頁面內(nèi)。a）兩個按鈕在一行，按鈕相距123px，居中。b）三個按鈕在一行，按鈕相距40px，居中。c）按鈕與上一行控件相距60px。若按鈕上一控件為分頁控件，與分頁 控件相距5px。

7、2.3按鈕1） 按鈕風(fēng)格相同，所有的確定，添加，取消，編輯，查詢等兩個字的按鈕的 大小均為寬60像素，高22像素，字體14px。三個以上字段的按鈕根據(jù)字 數(shù)自動確定按鈕寬度。2）grid view內(nèi)的按鈕位置請參照2.2原圖的坐標(biāo)。以下三種情況為按鈕在除了grid view內(nèi)的頁面內(nèi)。3） 兩個按鈕在一行，按鈕相距123px，居中。4） 三個按鈕在一行，按鈕相距40px，居中。5） 按鈕與上一行控件相距60px。若按鈕上一控件為分頁控件，與分頁控件相距5px。2.4 超鏈接以特殊編碼的文本或圖形的形式來實現(xiàn)鏈接， 如果單擊該鏈接， 則相當(dāng)于指 示瀏覽器移至同一網(wǎng)頁內(nèi)的某個位置， 或打開一個新的網(wǎng)頁， 或打開某一個新的WWW網(wǎng)站中的網(wǎng)頁時使用超鏈接。當(dāng)需要實現(xiàn)鏈接并需用易懂的符號表示操作時，請使用動作按鈕。 用于激活一些功能時，請使用動作按鈕。2.5 分頁控件采用yahoo style格式，左右居中，始終與上一控件相距60px。Grid view的內(nèi)容（不包括“姓名”、“工號”標(biāo)識的那一行）滿10行自動分頁，不滿10行的顯示分頁控件。（備注：權(quán)限列表：FunctionList.a