系統(tǒng)界面標(biāo)準(zhǔn)及規(guī)范 - 優(yōu)化版

1、系統(tǒng)界面標(biāo)準(zhǔn)及規(guī)范V1.0 第 30 頁(yè) 共 30 頁(yè)系統(tǒng)界面標(biāo)準(zhǔn)及規(guī)范 V1.0深圳市艾姆詩(shī)數(shù)碼科技有限公司2017.05目錄1. 規(guī)范說明31.1 目的31.2 原則32. 界面設(shè)計(jì)理念32.1 易用性32.2 安全性42.3 美觀與協(xié)調(diào)性52.4 一致性102.5 效率132.6 容錯(cuò)性143. 控件通用規(guī)范143.1 默認(rèn)值143.2 必填項(xiàng)163.3 提示語(yǔ)183.4 界面?zhèn)鬟f193.5 輸入框203.6 新增223.7 編輯223.8 刪除231. 規(guī)范說明1.1 目的以用戶為中心，將用戶體驗(yàn)細(xì)化到具體的可執(zhí)行的要求，建立界面設(shè)計(jì)理念及界面布局的通用規(guī)則及要求，提升系統(tǒng)公用組件復(fù)用

2、度及用戶體驗(yàn)，從而提高用戶工作效率。1.2 原則平衡原則：保證上下左右平衡，不要堆積數(shù)據(jù)；保證字體的選擇和大小保持一致；預(yù)期原則：屏幕上所有對(duì)象，如窗口、按鈕、菜單等處理應(yīng)一致化，保持清晰一致的頁(yè)面設(shè)計(jì)，所有界面的風(fēng)格以及具有相同含義的術(shù)語(yǔ)保持一致；順序原則：對(duì)象顯示的順序應(yīng)依需要排列，最小化用戶記憶和尋找的成本；規(guī) 則 化：顯示命令、對(duì)話及提示行在系統(tǒng)的設(shè)計(jì)中盡量統(tǒng)一規(guī)范；易用原則：界面應(yīng)該簡(jiǎn)單、易于學(xué)習(xí)、且易于使用；保持界面能很快對(duì)用戶操作做出反應(yīng)；美觀原則：美觀是系統(tǒng)界面的重要部分，可視屬性提供了非常好的印象，是傳達(dá)特定對(duì)象的交互行為的重要線索；2. 界面設(shè)計(jì)理念2.1 易用性l 可寫控

3、件檢測(cè)到非法輸入后程序應(yīng)給出說明，自動(dòng)獲得焦點(diǎn)；l 復(fù)選框和選項(xiàng)框按選擇幾率的高低而先后排列，如圖2.1-1； 圖2.1-1l 界面空間較小時(shí)使用下拉框而不用選項(xiàng)框；l 按鈕名稱用詞準(zhǔn)確、易懂；l 系統(tǒng)給予的提示、警告或錯(cuò)誤說明應(yīng)該清楚、明了、恰當(dāng)；l 如程序處理一些需要較長(zhǎng)時(shí)間才能完成的操作時(shí)，系統(tǒng)應(yīng)給予諸如“讀取中”的提示信息（避免用戶懷疑程序是否已經(jīng)“掛了”，或者驗(yàn)證鼠標(biāo)是否正常而瘋狂點(diǎn)擊）；l 當(dāng)對(duì)列表進(jìn)行數(shù)據(jù)操作，系統(tǒng)運(yùn)行讀取結(jié)果后，界面應(yīng)停留在被操作的數(shù)據(jù)所在頁(yè)。2.2 安全性l 對(duì)可能引起致命錯(cuò)誤或系統(tǒng)出錯(cuò)的輸入字符（如：數(shù)量、金額）或動(dòng)作（如：審核、刪除）要加限制或者屏蔽，如圖

4、2.2-1 ；圖2.2-1l 對(duì)可能發(fā)生嚴(yán)重后果的操作要有補(bǔ)救措施，通過補(bǔ)救措施用戶可以回到原來的正確狀態(tài)；（如：財(cái)務(wù)管理的撤審功能）2.3 美觀與協(xié)調(diào)性l 列寬的設(shè)計(jì)要合理，如圖2.3-1/2；圖2.3-1圖2.3-2（反例-列寬欠合理）l 布局要合理，不宜過于密集，也不能留白過多，合理地利用空間，如圖2.3-3/4；圖2.3-3圖2.3-4（反例-留白過多）l 界面各輸入框長(zhǎng)度切忌參差不齊；如圖2.3-5/6； 查詢欄各輸入框應(yīng)保持在同一水平線上；如圖2.3-7；圖2.3-5圖2.3-6（反例）圖2.3-7（反例-輸入框不在同一水平線）l 盡可能簡(jiǎn)潔用戶界面：突出重要的功能，隱藏復(fù)雜的，不

5、常用的功能，如圖2.3-8/9；圖2.3-8圖2.3-92.4 一致性l 新增頁(yè)面、搜索欄、打印、導(dǎo)入導(dǎo)出模板與列表各字段名稱應(yīng)保持一致；l 同系統(tǒng)從頭至尾的外觀、行為、操作應(yīng)該是一致的。 （添加功能對(duì)應(yīng)“添加”和“關(guān)閉”按鍵、編輯功能對(duì)應(yīng)“保存”和“關(guān)閉”按鍵、刪除功能對(duì)應(yīng)“確定”和“取消”按鍵），如圖2.4-1/2/3；圖2.4-1圖2.4-2圖2.4-3l 相同功能按鈕的樣式應(yīng)該保持一致，當(dāng)下拉選項(xiàng)較多時(shí)，建議使用樣式2，如圖2.4-4；圖2.4-4l 凍結(jié)頁(yè)面搜索欄、功能欄、頁(yè)碼欄和滾動(dòng)條（視具體情況而定），如圖2.4-4/5圖2.4-4圖2.4-5（反例）2.5 效率l 完成同一功能

6、或者任務(wù)的元素固定放在集中位置，最小化用戶的眼和手的移動(dòng)幅度，如圖2.6-1；圖2.6-1l 盡可能簡(jiǎn)化用戶操作的步驟；l 滾動(dòng)條的長(zhǎng)度要根據(jù)顯示信息的長(zhǎng)度和寬度能及時(shí)變換；l 如列表存在較多功能按鍵，且沒有順序要求時(shí)，應(yīng)按照使用頻率和重要性排列，常用的放在開頭，不常用的靠后放置。重要的放在開頭，次要的放在后面；2.6 容錯(cuò)性l 對(duì)可能造成數(shù)據(jù)無(wú)法恢復(fù)的操作必須提供確認(rèn)信息，給用戶放棄選擇的權(quán)利，如圖2.7-1；圖2.7-1l 當(dāng)錯(cuò)誤操作發(fā)生時(shí)，提供妥善的應(yīng)對(duì)措施（具體情況參考用戶需求），如圖2.7-2；圖2.7-23. 控件通用規(guī)范3.1 默認(rèn)值l 打開一個(gè)新界面，光標(biāo)默認(rèn)停留在第一個(gè)待輸入

7、的文本框中，如圖4.1-1 ；圖4.1-1l 當(dāng)選擇下拉框不存在默認(rèn)值時(shí)，則默認(rèn)為空，如圖 ，倉(cāng)庫(kù)默認(rèn)為空，提示“請(qǐng)選擇倉(cāng)庫(kù)”，如圖4.1-2；圖4.1-2l 當(dāng)存在默認(rèn)值時(shí)，請(qǐng)綁定顯示默認(rèn)值，如圖4.1-3；圖4.1-33.2 必填項(xiàng)l 界面的必填項(xiàng)必須在輸入框后以紅色 * 號(hào)標(biāo)識(shí)出來，并與文本框保持一定間距，如圖4.2-1/2/3；圖4.2-1圖4.2-2（反例- * 號(hào)過于緊湊）圖4.2-3（反例-必填項(xiàng)無(wú)標(biāo)識(shí)）l 必填項(xiàng)沒填時(shí)，光標(biāo)移開則在輸入框旁邊或下方給出提示，如圖4.2-4；圖4.2-43.3 提示語(yǔ)l 提示信息中如有標(biāo)點(diǎn)符號(hào)，請(qǐng)統(tǒng)一使用半角符號(hào)；l 不要用或者少用專業(yè)術(shù)語(yǔ)，且杜

8、絕錯(cuò)別字；l 提示信息如有主語(yǔ)，請(qǐng)統(tǒng)一為“您”；l 提示信息不宜過長(zhǎng)，請(qǐng)簡(jiǎn)單扼要突出重點(diǎn)；反例-這也太簡(jiǎn)潔了.l 提示信息盡量給出用戶下一步操作的提示。避免只提示“質(zhì)檢失敗”等，可改為“質(zhì)檢失敗，只能對(duì)狀態(tài)為已入庫(kù)的數(shù)據(jù)進(jìn)行操作”；l 如果空間較小的情況下，提示信息放在輸入框下方（切勿把其他輸入框/按鍵擠走；切勿分兩行進(jìn)行提示）如圖3.3-1； 圖3.3-1（反例）l 標(biāo)點(diǎn)符號(hào)的使用：提示語(yǔ)為陳述句時(shí)用句號(hào)/嘆號(hào)結(jié)尾，如：“掃描入庫(kù)成功?！碧崾菊Z(yǔ)為疑問句時(shí)用問號(hào)結(jié)尾，如：“確定要?jiǎng)h除所選擇的行嗎？”l 刪除： 未勾選數(shù)據(jù)時(shí)：請(qǐng)選擇數(shù)據(jù)行。勾選單條或多條時(shí)：您確定要?jiǎng)h除所選擇的行嗎？l 編輯：未

9、勾選數(shù)據(jù)或勾選多條數(shù)據(jù)時(shí)：請(qǐng)選擇單條記錄進(jìn)行操作。l 文本域要加入字?jǐn)?shù)限制提示，動(dòng)態(tài)提示還可輸入多少個(gè)字符,如圖3.3-2。例：此處可輸入的字?jǐn)?shù)為38/200個(gè)。 圖3.3-23.4 界面?zhèn)鬟f l 當(dāng)子窗體的任何操作影響了父窗體的數(shù)據(jù)時(shí)，子窗體關(guān)閉返回更新父窗體的數(shù)據(jù)；l 關(guān)閉父窗體必須連同子窗體一同關(guān)閉；l 子窗體的大小最好不要超過父窗體，且最好不要遮住父窗體的主要信息；l 彈出窗口最好不要超過兩層；l 子窗體大小設(shè)計(jì)應(yīng)合理，反例如圖3.4-1；圖3.4-1（反例）3.5 輸入框l 可以輸入的和需求選擇的文本框以白色為背景。不可輸入和不可選擇的文本框以灰色為背景；對(duì)于不可輸入/選擇框，通過鼠

10、標(biāo)或鍵盤都不可以讓光標(biāo)定位至此控件。如圖3.5-1；圖3.5-1l 只允許輸入數(shù)字（金額、數(shù)量和重量等）的輸入框根據(jù)輸入結(jié)果，對(duì)非法輸入給予提示。以在輸入框旁出現(xiàn)浮動(dòng)層的形式顯示，如圖3.5-2；當(dāng)用戶根據(jù)提示修改有效值時(shí)，提示信息自動(dòng)隱藏；圖3.5-2l 在讀入用戶所輸入的信息時(shí)，根據(jù)需要選擇是否去掉前后空格.如圖3.5-3；圖3.5-3l 只允許輸入日期、時(shí)間的輸入框請(qǐng)?jiān)试S可輸可選，并合理判斷日期的有效值；l 長(zhǎng)度、重量、金額等請(qǐng)標(biāo)識(shí)單位，如圖3.5-4；圖3.5-3l 當(dāng)輸入的內(nèi)容達(dá)到了字段的長(zhǎng)度限制時(shí)，請(qǐng)控制不可輸入，而不是保存后自動(dòng)截?cái)嗷蛘弑４婧蠼o予提示；l 對(duì)于有限制使用的字符，顯示明確的提示信息，（特殊符號(hào)包含；;”><,：“”、|+=)-(_*&&%$#!,.。?/ 以及空格）；3.6 新增l 新增記錄添加完成后，自動(dòng)跳轉(zhuǎn)到新增記錄所在頁(yè)；l 提交失敗，系統(tǒng)給出提示信息，保留用戶已輸入的內(nèi)容，以便編輯后再次提交。并且提供用戶必要的引導(dǎo)，使用戶明白失敗后應(yīng)該如何處理；l 新增提交時(shí)，需對(duì)主要標(biāo)識(shí)字段進(jìn)行重復(fù)值、空值（空格）判斷；l 必須控制不可重復(fù)新增，如圖3.6-1；圖3.6-13.7 編輯l