軟件UI設(shè)計標(biāo)準(zhǔn)規(guī)范

軟件UI設(shè)計規(guī)范

目錄UI規(guī)范 11 用戶界面設(shè)計理念 51.1 美觀 51.2 易理解 71.3 鼓勵 71.4 一致 71.5 交互 101.6 效率 131.7 熟悉 141.8 靈活 151.9 容錯 161.10 可預(yù)測 171.11 簡潔 171.12 透明 171.13 權(quán)衡 172 通用設(shè)計原則 182.1 字體使用原則 182.1.1 中文字體 182.1.2 英文字體 182.2 文字對齊原則 182.3 界面配色原則 202.4 按鈕設(shè)計原則 212.5 文本校驗原則 232.6 兼容性和個性化原則 262.7 鍵盤響應(yīng) 272.7.1 TAB鍵 272.7.2 Enter鍵 282.7.3 導(dǎo)航鍵（上下左右） 282.7.4 DEL鍵 282.8 鼠標(biāo) 283 各模塊設(shè)計原則 293.1 啟動/登錄界面 293.2 主界面 303.3 導(dǎo)航 303.4 窗體布局 323.5 提示信息 333.6 文本框 353.7 彈出框/彈出窗口 373.8 下拉框/單選框/復(fù)選框 383.9 列表頁面 393.10 報表規(guī)范 423.11 附件 423.12 各類控件的標(biāo)準(zhǔn)大小 43建立UI規(guī)范目標(biāo)將陽春白雪式用戶體驗細(xì)化到具體可實施要求，建立各行業(yè)線相關(guān)界面元素設(shè)計及界面布局通用規(guī)則及要求，提升公用組件復(fù)用度及用戶體驗，從而增加浪潮軟件產(chǎn)品競爭力。用戶界面設(shè)計理念美觀使用可視元素圖1.1.1對元素進行分組圖1.1.2

對齊圖1.1.3圖1.1.4（反例）易了解一個系統(tǒng)應(yīng)該很輕易被用戶學(xué)會和了解，用戶應(yīng)該知道：1、看什么2、做什么3、何時做4、在哪做5、為何做6、怎樣做信息放置次序應(yīng)該經(jīng)過深思熟慮，最小化用戶記憶和尋求成本必需時候，一步步引導(dǎo)用戶進行操作圖1.2.1激勵一旦用戶完成了某個關(guān)鍵操作，要立即通知用戶，提升用戶信心圖1.3.1一致一個系統(tǒng)從頭到尾外觀，行為，操作應(yīng)該是一致圖1.4.1（反例）圖1.4.2（反例）一樣行為，應(yīng)該總是產(chǎn)生一樣結(jié)果圖1.4.3（反例）圖1.4.4（反例）相同功效按鈕視覺上保持一致，不一樣功效按鈕視覺上有所區(qū)分圖1.4.5（反例）交互用戶在交互過程中占有絕對主動權(quán)1、動作必需是用戶請求結(jié)果2、耗時較長動作必需能夠被打斷圖1.5.1

從用戶需求出發(fā)展現(xiàn)上下文圖1.5.2圖1.5.3（反例）系統(tǒng)能夠?qū)τ脩粽埱罂焖俚刈鞒鲰憫?yīng)對用戶全部動作提供可視化反饋信息達(dá)成目標(biāo)方法應(yīng)該是靈活，并和用戶技能，習(xí)慣，經(jīng)驗，偏好相適應(yīng)圖1.5.4圖1.5.5提供反悔或取消機會（undocancel）圖1.5.6效率最小化用戶眼和手移動幅度圖1.6.1

簡化用戶操作步驟圖1.6.2（反例）圖1.6.3盡可能預(yù)料用戶想法和需求圖1.6.4熟悉盡可能使用用戶熟悉概念和語言盡可能使界面自然，模擬用戶行為模式完美地兼容老產(chǎn)品靈活系統(tǒng)必需對不一樣用戶需求很敏銳，而且提供不一樣層次類型功效，基于：1、用戶知識和技能2、用戶經(jīng)驗3、用戶個人偏好4、用戶習(xí)慣5、當(dāng)初條件圖1.8.1容錯對于常見人為失誤有妥善應(yīng)對方法圖1.9.1當(dāng)錯誤發(fā)生時，提供建設(shè)性提醒圖1.9.2不管發(fā)生什么錯誤，盡最大努力確保用戶不丟失工作結(jié)果圖1.9.3可估計用戶能夠估計到每個任務(wù)正常進度圖1.10.1全部用戶期望達(dá)成目標(biāo)全部應(yīng)該完成簡練盡可能簡練用戶界面：突出關(guān)鍵功效，隱藏復(fù)雜，不常見功效圖1.11.1透明讓用戶關(guān)注她任務(wù)而不是實現(xiàn)機制計算機內(nèi)部工作內(nèi)容應(yīng)該是不可見權(quán)衡最終設(shè)計應(yīng)該是基于一系列設(shè)計標(biāo)準(zhǔn)相互權(quán)衡結(jié)果大家需求總是凌駕于技術(shù)之上通用設(shè)計標(biāo)準(zhǔn)字體使用標(biāo)準(zhǔn)漢字字體同級菜單，字體大小格式統(tǒng)一。圖2.1.1.1使用字體大小要規(guī)范：正文通常采取12px。圖形字體和標(biāo)題字體通常采取14px。圖2.1.1.2推薦使用“微軟雅黑”和“華文細(xì)黑”字體。不宜使用藝術(shù)字體，如華文彩云、隸書。圖2.1.1.3英文字體默認(rèn)字體使用“Tahoma”，大小12px。標(biāo)題字體使用“TrebuchetMS?！眻D2.1.2.1文字對齊標(biāo)準(zhǔn)表單字段名左對齊，或中線對齊。圖2.2.1圖2.2.2界面配色標(biāo)準(zhǔn)產(chǎn)品背景色表現(xiàn)浪潮品牌藍(lán)色；項目產(chǎn)品背景色表現(xiàn)用戶行業(yè)品牌色，如深圳藥監(jiān)天藍(lán)色。圖2.3.1圖2.3.2要統(tǒng)一色調(diào)，顏色使用要正確：如安全軟件用黃色；高科技軟件使用藍(lán)色；環(huán)境保護軟件易用用綠色。界面配色要有對比，在淺色背景上使用深色文字，深色背景上使用淺色文字同一頁面，不宜采取3種以上顏色。圖2.3.3鏈接應(yīng)該有3種顏色：未點擊，點擊中，點擊后。圖2.3.4按鈕設(shè)計標(biāo)準(zhǔn)宜使用圓角圖標(biāo)、漸變效果。圖標(biāo)大小通常為8倍數(shù)，最小圖標(biāo)12px、16px，頂部24px或32px圖片。圖2.4.1圖標(biāo)樹大小是16px，樹大小適合寬度為210px。保持和系統(tǒng)整體特點和風(fēng)格一致。使用讓用戶輕易聯(lián)想到事物，按鈕能清楚表示意思。圖2.4.2內(nèi)頁中按鈕使用平面效果、不使用三維效果圖。按鈕應(yīng)含有簡練圖示效果，應(yīng)能夠讓使用者產(chǎn)生功效關(guān)聯(lián)反應(yīng)，群組內(nèi)按鈕應(yīng)該風(fēng)格統(tǒng)一，大小相同，標(biāo)題字體保持一致，在整個系統(tǒng)中顯示位置要統(tǒng)一。功效差異大按鈕應(yīng)該有所區(qū)分。圖2.4.3按鈕應(yīng)該最少有4種狀態(tài)效果：點擊前鼠標(biāo)未放在上面時狀態(tài)；鼠標(biāo)放在上面但未點擊狀態(tài)；點擊時狀態(tài)；不能點擊時狀態(tài)。圖2.4.4按鈕上若沒有文字，必需提供鼠標(biāo)懸停提醒信息；按鈕上有文字不過不足以正確傳達(dá)按鈕功效時，也應(yīng)該提供鼠標(biāo)懸停提醒信息。圖2.4.5操作功效按鈕向左對齊，根據(jù)使用頻度（關(guān)鍵程度）從左到右排列；設(shè)置功效按鈕和幫助按鈕向右對齊。圖2.4.6折疊菜單標(biāo)題欄應(yīng)該做成”展開/折疊”響應(yīng)區(qū)域，方便鼠標(biāo)點擊。圖2.4.7有圖標(biāo)和功效說明文字，實現(xiàn)點擊圖片和說明文字，全部能夠達(dá)成預(yù)期頁面圖2.4.8相同功效按鈕描述一致性表2.4.1統(tǒng)一名稱操作描述增加對“新增”“添加”統(tǒng)一描述修改對“修改”、“管理”、“維護”統(tǒng)一描述文本校驗標(biāo)準(zhǔn)必填項給出必填標(biāo)識，使用校驗機制確保不為空（包含僅有空格情況）。若必輸項未填寫完成或填寫不符合規(guī)則就提交，應(yīng)給出說明信息并能自動取得焦點。圖2.5.1非必填項字段，Null插入數(shù)據(jù)庫不會犯錯，讀取顯示為正常留空（不能顯示為Null）。焦點從目前輸入框移開后，立即對目前輸入框進行校驗，不合格則給出提醒，引導(dǎo)用戶更正。身份證號、電子郵箱地址等特定字段格式須符合需求要求。圖2.5.2全部字段必需有長度限制，并在激活輸入框時給出明確提醒，直到焦點從目前輸入框移開。若用戶在輸入字符達(dá)成最大許可長度后繼續(xù)輸入，則不再響應(yīng)超出字符。（粘貼超出給出提醒）密碼輸入框內(nèi)容顯示為”*”或”?”。圖2.5.3用戶名輸入框應(yīng)注明是否許可輸入漢字等。圖2.5.4日期顯示格式為：yyyy-mm-dd。盡可能使用時間控件，并屏蔽手動輸入。假如許可手動輸入，則不許可字符串、漢字、特殊字符等。不許可截止日期小于開始日期。圖2.5.5圖2.5.6（反例）圖2.5.7圖2.5.8（反例）沒有類型限制輸入?yún)^(qū)域，應(yīng)可錄入漢字、字母、數(shù)字、*&%$#@!~等全部類型字符。數(shù)值字段只能輸入0~9，視情況決定是否能夠輸入”-”和”.”。兼容性和個性化標(biāo)準(zhǔn)表2.6.1類別操作項基礎(chǔ)規(guī)范優(yōu)先級兼容性產(chǎn)品功效向后兼容樓上5各產(chǎn)品兼容樓上3各產(chǎn)品高瀏覽器兼容IE內(nèi)核類（IE6、IE8）火狐瀏覽器Chrome瀏覽器高Java平臺兼容JDK5.0高操作系統(tǒng)兼容Windows（XP、、7）Unix、Linux高應(yīng)用服務(wù)器兼容WebSphere（6.1及以后）WebLogic（9.2及以后）高數(shù)據(jù)庫服務(wù)器兼容Oracle（10g及以后）DB2（9.1及以后）SQLServer（及以后）高分辨率兼容1024x7681440x9001366x7681280x800高個性化需求個性化皮膚定制提供2套以上皮膚個性化門戶定制提供可定制門戶界面常見功效個性化定制提供可定制常見功效鍵盤響應(yīng)TAB鍵界面支持TAB鍵自動切換功效。Tab鍵切換次序和控件排列次序要一致，通常情況下采取總體從上到下，行內(nèi)從左到右方法。Enter鍵焦點在文本輸入框時，按下Enter能夠觸發(fā)查詢/提交/確定/實施等操作。導(dǎo)航鍵（上下左右）選中下拉框某一項后，上下鍵能夠切換鄰近選項。選中某一單選項/復(fù)選項后，上下左右鍵能夠切換到鄰近項。DEL鍵選中一條或多條能夠刪除條目，按DEL鍵能夠觸發(fā)刪除事件。鼠標(biāo)鼠標(biāo)為不可點擊狀態(tài)時顯示為，可點擊狀態(tài)顯示為，系統(tǒng)忙時顯示為，經(jīng)過文本框顯示為。系統(tǒng)除了文本輸入外，其它全部功效全部應(yīng)該能經(jīng)過鼠標(biāo)來完成。

各模塊設(shè)計標(biāo)準(zhǔn)開啟/登錄界面軟件開啟封面要高清楚度圖像軟件開啟封面大小多為主流顯示器分辨率1/6大(微軟標(biāo)準(zhǔn))LOGO要弱化、系統(tǒng)名要強化圖3.1.1插圖要有意義、象征性強使用字體大小要規(guī)范：通常正文使用12px，圖標(biāo)文字或標(biāo)題使用14px圖像格式宜使用gif和png插圖宜使用獨立版權(quán)圖片使用攝影圖像時應(yīng)該進行數(shù)位處理，比如做高斯模糊處理等打開新增（修改）頁面時，光標(biāo)初始定位在第一個待輸入文本區(qū)。圖3.1.2主界面遵照總體規(guī)則為：導(dǎo)航優(yōu)先、分層顯示、功效按關(guān)鍵度排序。主界面百分比狹長型為宜，最好百分比為16:9界面配色要形成對比：背景和前景要對比，如背景復(fù)雜+前景簡單，前景深色+背景白色（或是淺色系）banner圖標(biāo)宜用平面圖圖3.2.1色調(diào)使用：宜使用白色、淺色，如淺藍(lán)色、淺綠色等；不提議大范圍使用深色系純色導(dǎo)航導(dǎo)航方法有純頭部導(dǎo)航、頭部導(dǎo)航+左側(cè)導(dǎo)航、頭部+右側(cè)導(dǎo)航、圖標(biāo)導(dǎo)航等導(dǎo)航中顯示關(guān)鍵功效，最多不超出8個；不常見功效加“更多…”來顯示假如有下級菜單應(yīng)該有下級箭頭符號標(biāo)示圖3.3.1導(dǎo)航中有選中狀態(tài)和未選中狀態(tài)要有區(qū)分，選中狀態(tài)要突出、高亮或不一樣顏色顯示不一樣功效區(qū)間應(yīng)該用線條分割或是用空白分割圖3.3.2菜單深度通常盡可能不超出三層，菜單層次太多時，應(yīng)給出返回主窗口、主分支快捷鏈接。目錄樹中，鼠標(biāo)懸停于非葉子節(jié)點時出現(xiàn)子節(jié)點，降低用戶點擊數(shù)。圖3.3.3將關(guān)鍵信息放在上邊和左邊，左上角最輕易吸引用戶注意力。圖3.3.4窗體布局窗體進行最大化操作和最小化操作和任意更改窗體大小時，頁面排版均正常。窗體縮放時，窗體內(nèi)控件也要隨窗體進行縮放。窗體有最小化、最大、關(guān)閉按鈕控件對齊：控件水平排列成一行時，采取水平中對齊，控件間隔按要求基礎(chǔ)保持一致；行和行之間間隔相同；窗體邊界距離應(yīng)大于行間間隔圖3.4.1控件對窗體覆蓋率以不高于75%為宜按鈕和窗體上、下、左、右之間間距為14px，按鈕之間間距為6px圖3.4.2并列關(guān)系控件間應(yīng)該左對齊，同行控件應(yīng)該橫向?qū)R，有隸屬關(guān)系應(yīng)該縮進。圖3.4.3提醒信息提醒消息盡可能不搶奪用戶操作權(quán)利，盡可能不強制用戶進行操作。通知類消息（不需要用戶反饋信息），不能強制用戶進行操作。圖3.5.1（正反例對比）用戶進行危險性操作或破壞性操作、運行狀態(tài)錯誤時，系統(tǒng)應(yīng)該有簡練易懂、口語化提醒信息。一切含有計算機專業(yè)術(shù)語提醒信息全部應(yīng)該杜絕（尤其是諸如SQL錯誤，空指針異常等信息）。圖3.5.2（正反例對比）同一系統(tǒng)內(nèi)同類交互信息（提醒信息、問詢信息、警告信息、錯誤信息）風(fēng)格要統(tǒng)一，避免大量使用大紅色。圖3.5.3（反例）耗時操作系統(tǒng)有反饋信息，在進行長時間操作時，要有等候光標(biāo)、進度條或其它可視反饋。圖3.5.4四種類型交互信息顏色選擇a) 系統(tǒng)提醒信息：提醒需要讓用戶注意問題。用藍(lán)色b) 問詢信息：如是否繼續(xù)某個操作。用藍(lán)色圖3.5.5c) 警告信息：如提醒某個安全問題。用橙色d) 錯誤信息：系統(tǒng)運行時出現(xiàn)錯誤信息。用紅色文本框假如單行文本框能夠滿足需求，就不采取多行文本框。圖3.6.1（反例）單行文本框不宜過長或過短，以可完整顯示最大可輸入內(nèi)容為最好。圖3.6.2多行文本框錄入內(nèi)容超出文本框?qū)挾饶軌蜃詣訐Q行。圖3.6.3圖3.6.4（反例）多行文本框錄入內(nèi)容超出頁面顯示區(qū)域，顯示滾動條，可滾動顯示。圖3.6.5交互信息頁面風(fēng)格一致，最好有統(tǒng)一交互頁面。不可修改字段，統(tǒng)一使用灰色文字顯示。圖3.6.6輸入域無特殊說明一律左對齊（金額可右對齊）。搜索框顯示搜索提議。圖3.6.7彈出框/彈出窗口交互不復(fù)雜情況下，盡可能不使用彈出窗口，而在目前頁面完成交互。圖3.7.1圖3.7.2（反例）彈出式窗口應(yīng)盡可能在不借助水平和垂直滾動條情況下顯示全部內(nèi)容。圖3.7.3下拉框/單選框/復(fù)選框下拉框長度和實際顯示數(shù)目一致，不能有空白行。下拉框不能超出20行，假如選項超出20個，應(yīng)該在下拉框中加入滾動條，或根據(jù)層級關(guān)系采取多個下拉框聯(lián)動方法實現(xiàn)。下拉框?qū)挾群蛯嶋H需求匹配，不可出現(xiàn)某行內(nèi)容顯示不全情況，也不可出現(xiàn)寬度大大超出需求情況。圖3.8.1下拉框要有默認(rèn)選項，假如確實不需要默認(rèn)選項，則默認(rèn)選中“請選擇”或“-”。圖3.8.2列表中，單選框和復(fù)選框不能同時利用在同一區(qū)域中。圖3.8.3（反例）下拉內(nèi)容少于等于3項，用單選框替換。界面空間擁擠時，使用下拉框而不用單選框。假如下拉框能夠輸入，則下拉框中內(nèi)容要依據(jù)輸入內(nèi)容進行動態(tài)調(diào)整。圖