系統(tǒng)界面標(biāo)準(zhǔn)及規(guī)范

1、系統(tǒng)界面標(biāo)準(zhǔn)及規(guī)范系統(tǒng)界面標(biāo)準(zhǔn)及規(guī)范1.總體原則2.原則詳述 2.1. 用戶控制 2.2. 清楚一致的設(shè)計(jì) 2.3. 較快的響應(yīng)速度 2.4. 簡(jiǎn)潔美觀3.界面通用規(guī)范4.控件通用規(guī)范5.主要功能的規(guī)范6.軟件界面規(guī)范列舉 6.1通用規(guī)范 6.2 登錄頁(yè) 6.3首頁(yè)/主界面 6.4 主體/細(xì)節(jié)模式 6.5 分欄瀏覽 6.6 列表模式 6.7表單模式 6.8 彈出模式 6.9 提示信息符：公式定義頁(yè)面1. 總體原則總體原則w以用戶為中心，設(shè)計(jì)出由用戶控制的界面，而不是界面控制用戶。w清晰一致的頁(yè)面設(shè)計(jì)，所有界面的風(fēng)格保持一致，所有具有相同含義的術(shù)語(yǔ)保持一致.w易于理解,較快的響應(yīng)速度。w簡(jiǎn)單美觀

2、。2. 詳細(xì)原則詳細(xì)原則w2.1. 用戶控制用戶控制w用戶界面設(shè)計(jì)的一個(gè)重要原則是用戶應(yīng)該總是感覺(jué)在控制軟件而不是感覺(jué)被軟件所控制。w操作上假設(shè)是用戶-而不是計(jì)算機(jī)或軟件-開(kāi)始動(dòng)作。用戶扮演主動(dòng)角色，而不是扮演被動(dòng)角色。w 提供用戶自定義設(shè)置。因?yàn)橛脩舻募寄芎拖埠酶鞑幌嗤虼怂麄儽仨毮軌蛟O(shè)置個(gè)性化界面的某些方面。w 采取交互式和易于感應(yīng)的窗口。例如，用于在一個(gè)繪圖程序中選定一個(gè)特定感覺(jué)-請(qǐng)確保該模式是顯然的、可見(jiàn)的，是一個(gè)明確的用戶選定的結(jié)果，并且容易取消。w在后臺(tái)運(yùn)行長(zhǎng)進(jìn)程時(shí)，保持前臺(tái)式交互。例如，當(dāng)正在打印一個(gè)文檔，即使該文檔不能被改變，用戶也應(yīng)該可以最小化該窗口。w 用戶喜歡探索一個(gè)界

3、面，并經(jīng)常從嘗試和錯(cuò)誤中學(xué)習(xí)。一個(gè)有效的界面允許交互式的發(fā)現(xiàn)，它只提供一組合適的選擇，并在用戶可能破壞系統(tǒng)或數(shù)據(jù)的情況時(shí)發(fā)出警告。如果可行，還應(yīng)提供可逆轉(zhuǎn)或可還原的操作。有效的設(shè)計(jì)避免很可能導(dǎo)致錯(cuò)誤的情況。它還包容潛在的用戶錯(cuò)誤，并且使用戶易于還原。2. 詳細(xì)原則詳細(xì)原則w2.2. 清楚一致的設(shè)計(jì)清楚一致的設(shè)計(jì)w一致允許用戶將已有的知識(shí)傳遞到新的任務(wù)中，更快地學(xué)習(xí)新事物，并將更多的注意力集中在任務(wù)上。這是因?yàn)樗麄儾槐鼗〞r(shí)間來(lái)嘗試記住交互中的不同。通過(guò)提供一種穩(wěn)定的感覺(jué)，一致使得界面熟悉而又可預(yù)測(cè)。一致在界面的所有方面都是很重要的，包括命令的名稱、信息的可視表示，操作行為，以及元素在屏幕和窗口內(nèi)

4、部的放置。2. 詳細(xì)原則詳細(xì)原則w2.3. 較快的響應(yīng)速度較快的響應(yīng)速度w保持界面能很快對(duì)用戶操作作出反應(yīng)。在提交操作上時(shí)候，統(tǒng)一使用顯示處理進(jìn)度條，提示不要切換窗口,在自動(dòng)跳轉(zhuǎn)未成功時(shí)應(yīng)顯示具體信息。2. 詳細(xì)原則詳細(xì)原則w2.4. 簡(jiǎn)潔美觀簡(jiǎn)潔美觀w界面應(yīng)該很簡(jiǎn)單、易于學(xué)習(xí)、并且易于使用，它還必須提供對(duì)應(yīng)用程序的所有功能的訪問(wèn)；美觀是應(yīng)用程序界面的重要部分，可視屬性提供了非常好的印象，并傳達(dá)特定對(duì)象的交互行為的重要線索。w.布局的原則w屏幕布局因功能不同考慮的側(cè)重點(diǎn)不同。各功能區(qū)要重點(diǎn)突出，功能明顯。無(wú)論哪一種功能設(shè)計(jì)，其屏幕布局都應(yīng)遵循如下五項(xiàng)原則：w平衡原則。注意屏幕上下左右平衡。不要

5、堆擠數(shù)據(jù)，過(guò)分擁擠的顯示也會(huì)產(chǎn)生視覺(jué)疲和接收錯(cuò)誤。 w預(yù)期原則。屏幕上所有對(duì)象，如窗口、按鈕、菜單等處理應(yīng)一致化，使對(duì)象的動(dòng)作可預(yù)期。w經(jīng)濟(jì)原則。即在提供足夠的信息量的同時(shí)還要注意簡(jiǎn)明，清昕。特別是媒體，要運(yùn)用好媒體選擇原則。w順序原則。對(duì)象顯示的順序應(yīng)依需要排列。通常應(yīng)最先出現(xiàn)對(duì)話，然后通過(guò)對(duì)話將系統(tǒng)分段實(shí)現(xiàn)。w規(guī)則化。畫(huà)面應(yīng)對(duì)稱，顯示命令、對(duì)話及提示行在一個(gè)應(yīng)用系統(tǒng)的設(shè)計(jì)中盡量統(tǒng)一規(guī)范。3. 界面通用規(guī)范界面通用規(guī)范序序號(hào)號(hào)名稱名稱簡(jiǎn)述簡(jiǎn)述規(guī)范要求規(guī)范要求1.默認(rèn)值各個(gè)頁(yè)面都會(huì)存在默認(rèn)值打開(kāi)一個(gè)新界面，光標(biāo)默認(rèn)停留在第一個(gè)待輸入的文本框中。如果打開(kāi)的新界面內(nèi)容為空，應(yīng)給出相應(yīng)的操作提示。例

6、：“點(diǎn)擊左側(cè)列表開(kāi)始操作”當(dāng)選擇下拉框不存在默認(rèn)值時(shí)，則默認(rèn)為空；當(dāng)存在默認(rèn)值時(shí)，請(qǐng)綁定顯示默認(rèn)值。單選框要有默認(rèn)選項(xiàng)2.必填項(xiàng)對(duì)界面必填項(xiàng)的一些規(guī)范界面的必填項(xiàng)必須以紅色*號(hào)標(biāo)識(shí)出來(lái)。當(dāng)界面排列緊湊時(shí)，必填項(xiàng)沒(méi)有填時(shí)，最后提交應(yīng)彈出警告；但確定后必須停留在相應(yīng)待輸入的文本框中。當(dāng)界面排列空間比較寬松時(shí)，必填項(xiàng)沒(méi)填時(shí)光標(biāo)移開(kāi)則在輸入框旁邊給出提示。3. 界面通用規(guī)范界面通用規(guī)范序序號(hào)號(hào)名稱名稱簡(jiǎn)述簡(jiǎn)述規(guī)范要求規(guī)范要求3.提示語(yǔ)提示信息的規(guī)范提示信息中標(biāo)點(diǎn)符號(hào)請(qǐng)統(tǒng)一為全角符號(hào)。提示信息如有主語(yǔ)，請(qǐng)統(tǒng)一為您。提示信息不宜太長(zhǎng)，寬度不宜超過(guò)當(dāng)前窗口的1/2；當(dāng)超過(guò)此比例時(shí)，請(qǐng)視具體情況進(jìn)行換行。提示

7、信息盡量給出用戶下一步操作的提示，避免只提示“您的操作已成功”等。J舉例：可改為“您已成功導(dǎo)出數(shù)據(jù)，導(dǎo)出數(shù)量XXX，請(qǐng)點(diǎn)擊返回進(jìn)行下一步操作”標(biāo)點(diǎn)符號(hào)的使用:提示語(yǔ)為陳述句時(shí)用嘆號(hào)結(jié)尾,例:您的操已成功!如果提示語(yǔ)為疑問(wèn)句,則用問(wèn)號(hào)結(jié)尾,例:是否確認(rèn)刪除XX表?當(dāng)功能按鈕為圖片按鈕時(shí)，要加alt屬性防治圖片不能正確加載出來(lái)時(shí),用戶不了解圖片按扭的作用.無(wú)記錄情況a) 刪除 （請(qǐng)選擇需要?jiǎng)h除的XXX !） b) 導(dǎo)出（當(dāng)前列表無(wú)記錄?。ヽ) 備份（請(qǐng)選擇需要備份的XXX !） d) 修改（請(qǐng)選擇需要修改的XXX !）7. 有記錄情況未選擇記錄刪除（請(qǐng)選擇需要?jiǎng)h除的XXX !） 其它類同單個(gè)與批量

8、刪除（確定要?jiǎng)h除所選擇的XXX嗎？）；如果有再次確認(rèn)的，提示最后變成（您將要?jiǎng)h除XXX表，是否繼續(xù)？）全部刪除（確定要?jiǎng)h除本表的所有XXX嗎？）；如果是根據(jù)通用查詢條件，查詢出的結(jié)果集全部刪除（確定要?jiǎng)h除當(dāng)前查詢出的數(shù)據(jù)嗎？共計(jì)XXX條。）如有其它情況，酌情處理8 . 操作復(fù)雜頁(yè)面要提供必要的提示信息和幫助 ，可以加入flash操作效果。9. 提示信息超過(guò)三條時(shí)應(yīng)該將其分成獨(dú)立的區(qū)域。3. 界面通用規(guī)范界面通用規(guī)范序序號(hào)號(hào)名稱名稱簡(jiǎn)述簡(jiǎn)述規(guī)范要求規(guī)范要求4提示框?qū)π畔⒎祷氐奶崾菊宫F(xiàn)方式對(duì)于頻繁操作的功能，不要使用alert提示，使用div提示，停頓幾秒鐘(自定義幾秒)后自動(dòng)消失；如添加主賓欄。

9、類似下圖： ，此處應(yīng)封裝成一個(gè)統(tǒng)一的調(diào)用。停頓時(shí)間默認(rèn)為2秒鐘，可自己定義對(duì)可能造成數(shù)據(jù)無(wú)法恢復(fù)的操作必須提供確認(rèn)信息,給用戶放棄選擇的機(jī)會(huì)當(dāng)前操作完成后，如果有必要請(qǐng)給予用戶下一步操作的“入口鏈接”。舉例：系統(tǒng)表式維護(hù)完畢，應(yīng)提供“維護(hù)年度表式入口”，方便用戶快捷操作。5.界面?zhèn)鬟f父窗體與彈出窗口。頁(yè)面內(nèi)容過(guò)少；對(duì)該頁(yè)面進(jìn)行操作時(shí)，父級(jí)頁(yè)面不可操做；頁(yè)面功能是按流程操作，針對(duì)某個(gè)功能需額外進(jìn)行設(shè)置；如上情況請(qǐng)使用彈出頁(yè)。當(dāng)子窗體的任何操作影響了父窗體的數(shù)據(jù)時(shí)，子窗體關(guān)閉返回必須更新父窗體的數(shù)據(jù)。彈出頁(yè)內(nèi)容少則不加最大化、最小化按扭。彈出窗口最大化后有意義則可加最大化按扭。彈出窗口最小化后放在

10、頁(yè)面右下角。關(guān)閉父窗體必須連同子窗體一同關(guān)閉。子窗體的大小最好不要超過(guò)父窗體，且最好不要遮住父窗體的主要信息。彈出窗口最好不要超過(guò)兩層3. 界面通用規(guī)范界面通用規(guī)范序序號(hào)號(hào)名稱名稱簡(jiǎn)述簡(jiǎn)述規(guī)范要求規(guī)范要求6.表單對(duì)表單的相關(guān)規(guī)范。表單內(nèi)元素過(guò)多，必須要將元素分類，屬性相近的放到一起。表單詳細(xì)頁(yè)盡量不要出現(xiàn)滾動(dòng)條，如果內(nèi)容過(guò)多，長(zhǎng)度超過(guò)一屏半時(shí)，上下都加保存按扭。7.Table表格列表頁(yè)面通用規(guī)則表格的寬度應(yīng)為百分比顯示，對(duì)于不定長(zhǎng)的內(nèi)容，可固定顯示寬度，當(dāng)超出此顯示寬度后，以顯示，光標(biāo)停留后，詳細(xì)內(nèi)容以Title顯示。表格的寬度如果過(guò)窄的情況下可以設(shè)固定寬度，但要保證有完全的css樣式。如果沒(méi)

11、有明顯的層次關(guān)系的多行記錄，可以使用列表形式展現(xiàn)，不要使用樹(shù)展現(xiàn)；字?jǐn)?shù)不規(guī)則的記錄靠左顯示，數(shù)量數(shù)字居右，列表中字?jǐn)?shù)固定的文字（比如日期，圖片等）居中顯示,并且距左、右邊框留有10px邊距。如果列表前選擇框使用的是Radio Button，則應(yīng)該默認(rèn)選中第1條;如果沒(méi)有選中列表中的項(xiàng)，在點(diǎn)擊功能操作按鈕時(shí)，必須有提示“請(qǐng)選擇需要XXX的記錄“3. 界面通用規(guī)范界面通用規(guī)范序序號(hào)號(hào)名稱名稱簡(jiǎn)述簡(jiǎn)述規(guī)范要求規(guī)范要求8.界面布局對(duì)界面布局、分辨率的規(guī)范界面層次不宜超過(guò)3層。默認(rèn)窗口設(shè)置下，界面內(nèi)容盡量用百分比顯示.不應(yīng)出現(xiàn)水平、垂直滾動(dòng)條。完成同一功能或任務(wù)的元素放在集中位置，減少鼠標(biāo)移動(dòng)的距離無(wú)論

12、在什么位置，用戶都可以選擇返回當(dāng)前功能主界面頁(yè)面可用面積最大化要對(duì)復(fù)雜頁(yè)面加入引導(dǎo)性提示和幫助信息入口如果各模塊需要出現(xiàn)滾動(dòng)條，嵌套不可以超過(guò)兩層。打印及匯總模板左側(cè)樹(shù)采用QQ界面貼近屏幕邊緣的顯示效果.鼠標(biāo)經(jīng)過(guò)展開(kāi)，鼠標(biāo)移走收起。上面加固定顯示按扭,點(diǎn)擊按扭則樹(shù)固定在界面左側(cè)。4. 控件通用規(guī)范控件通用規(guī)范序序號(hào)號(hào)名稱名稱簡(jiǎn)述簡(jiǎn)述規(guī)范要求規(guī)范要求9.Button按鈕對(duì)按鈕樣式的一些限制不允許用戶操作的按鈕應(yīng)該置灰，特別要防止用戶對(duì)按鈕進(jìn)行“連擊”。按鈕的顏色是統(tǒng)一的。如果按扭為多個(gè)并且按扭字?jǐn)?shù)不同時(shí)，按鈕上如果只有兩個(gè)字，則這兩個(gè)字之間和兩個(gè)字的兩邊都需要一個(gè)空格，如果多個(gè)按扭上字?jǐn)?shù)同為兩個(gè)

13、時(shí)，則不需要。11。圖片關(guān)于頁(yè)面上圖片的規(guī)范頁(yè)面上所有的圖片需加alt屬性（以確保在圖片沒(méi)加載出來(lái)時(shí)了解其作用）4. 控件通用規(guī)范控件通用規(guī)范序序號(hào)號(hào)名稱名稱簡(jiǎn)述簡(jiǎn)述規(guī)范要求規(guī)范要求13.文本域多行記錄的限制如果有“清空”功能，再清空之前要進(jìn)行提示文本域要加入字?jǐn)?shù)限制提示，動(dòng)態(tài)提示還可輸入多少字符；格式為：此處可輸入的字?jǐn)?shù)為38/300個(gè)14.輸入框輸入框的狀態(tài)和限制可以輸入的和需要選擇的文本框以白色為背景；不可輸入不可選擇的文本框以灰色為背景；對(duì)于不可輸入/選擇框，通過(guò)鼠標(biāo)或鍵盤(pán)都不可以讓光標(biāo)定位至此控件。在界面上明確各個(gè)文本框的TAB鍵的順序；只允許輸入數(shù)字的輸入框根據(jù)輸入結(jié)果，非法給予提

14、示。以在輸入框旁出現(xiàn)浮動(dòng)層的形式顯示。只允許輸入日期、時(shí)間的輸入框請(qǐng)?jiān)试S可輸可選。當(dāng)輸入的內(nèi)容達(dá)到了字段的長(zhǎng)度限制時(shí)，請(qǐng)控制不允許再輸入，而不是保存后自動(dòng)截?cái)嗷虮４鏁r(shí)給予提示。對(duì)于有限制使用的字符。顯示明確的提示信息，（如、|、”、:、*、?）輸入框的長(zhǎng)度由CSS文件統(tǒng)一限定，非特殊情況，不得更改。5. 主要功能的規(guī)范主要功能的規(guī)范序號(hào)序號(hào) 功能名稱功能名稱功能簡(jiǎn)述功能簡(jiǎn)述規(guī)范要求規(guī)范要求15.新增增加一條或多條記錄新增記錄分情況排列，例：主賓欄按序號(hào)排列，新增記錄添加完后，跳轉(zhuǎn)到新增記錄所在頁(yè)。提交失敗時(shí)必有保留用戶已輸入的內(nèi)容，以便再次提交；并且提供用戶必要的引導(dǎo)，使用戶明白失敗后應(yīng)該如何

15、處理。提交時(shí)需對(duì)主要標(biāo)識(shí)字段進(jìn)行重復(fù)值、空值（空格）判斷。當(dāng)已明確知道信息不能新增時(shí)，新增按鈕應(yīng)該置灰。16.修改修改單條記錄從列表進(jìn)入修改完成后必須回到原記錄所在頁(yè)，且刷新顯示修改后的值。提交失敗后有明顯的提示信息，保留用戶已修改的內(nèi)容，以便再次提交。提交失敗時(shí)向隱藏頁(yè)提交，并給出提示。-刪除它當(dāng)已明確知道信息不能修改時(shí)，應(yīng)將不可操作的功能按鈕置灰。所有向后臺(tái)提交為防止連續(xù)點(diǎn)擊，當(dāng)前頁(yè)鎖屏，操作完成后解鎖。（做出示例）17.刪除刪除一條或多條記錄刪除重要信息時(shí)必須有二次確認(rèn)刪除的提示信息，提示的格式見(jiàn)界面規(guī)范提示語(yǔ).刪除成功后刷新不顯示被刪除的記錄。在列表刪除時(shí)，只要列表數(shù)據(jù)沒(méi)刪完，直接停留當(dāng)前頁(yè)，已刪除的數(shù)據(jù)不顯示且不刷新列表，若列表數(shù)據(jù)全部刪除，則刷新列表；在明細(xì)刪除時(shí)，成功后返回列表。-刪除它當(dāng)被刪除的記錄與其它記錄存在關(guān)聯(lián)時(shí)，請(qǐng)按需求界定，給予不允許刪除提示信息。當(dāng)已明確知道信息不能刪除時(shí)，應(yīng)將刪除按鈕置灰。5. 主要功能的規(guī)范主要功能的規(guī)范序號(hào)序號(hào) 功能名稱功能名稱功能簡(jiǎn)述功能簡(jiǎn)述規(guī)范要求規(guī)范要求18.查詢按各條件查詢。列表查詢后定位到列表第一頁(yè)。報(bào)表查詢后定位到報(bào)表第一頁(yè)。刪除這一句每次查詢后盡量保留當(dāng)前查詢條件,（當(dāng)查詢和列表在一個(gè)面時(shí)，保留，不在不保留。）當(dāng)未查詢到任何記錄時(shí)，需給予未查找相