系統(tǒng)界面標準及規(guī)范

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

2、。2. 詳細原則詳細原則w2.1. 用戶控制用戶控制w用戶界面設計的一個重要原則是用戶應該總是感覺在控制軟件而不是感覺被軟件所控制。w操作上假設是用戶-而不是計算機或軟件-開始動作。用戶扮演主動角色，而不是扮演被動角色。w 提供用戶自定義設置。因為用戶的技能和喜好各不相同，因此他們必須能夠設置個性化界面的某些方面。w 采取交互式和易于感應的窗口。例如，用于在一個繪圖程序中選定一個特定感覺-請確保該模式是顯然的、可見的，是一個明確的用戶選定的結(jié)果，并且容易取消。w在后臺運行長進程時，保持前臺式交互。例如，當正在打印一個文檔，即使該文檔不能被改變，用戶也應該可以最小化該窗口。w 用戶喜歡探索一個界

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

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

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

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

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

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

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

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

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

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

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

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

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