軟件界面設(shè)計(jì)規(guī)范_V1.0-視覺(jué)部分

1、軟件界面設(shè)計(jì)規(guī)范 _V1.01 概要界面設(shè)計(jì)中一定要保持界面的 一致性 。一致性既包括使用 標(biāo)準(zhǔn)的控件 ，也指使用 相同的信息表現(xiàn)方法 ，如在字體、標(biāo)簽風(fēng)格、顏色、 術(shù)語(yǔ)、顯示錯(cuò)誤信息等方面確保一致。界面力求 簡(jiǎn)潔明了 ，保證系統(tǒng)功能設(shè)計(jì)的合理與明確，布局明確、交互操作合理、協(xié)調(diào)統(tǒng)一。 功能要表現(xiàn)清楚，分類清晰有條理，避免過(guò)多的控件嵌套導(dǎo)致的視覺(jué)混亂；單一功能的操作目的明 確，符合易用性原則， 避免不必要的信息顯示而對(duì)用戶造成視覺(jué)干擾 ；力求操作簡(jiǎn)單，簡(jiǎn)單的功能 一步完成，比較復(fù)雜的功能三步之內(nèi)，復(fù)雜的功能操作使用操作向?qū)?lái)輔助客戶完成。2 色調(diào)風(fēng)格2.1 色調(diào)：軟件界面設(shè)計(jì)中常用的主色調(diào)包括

2、：藍(lán)色、紅色、綠色、黑色藍(lán)色 ：運(yùn)用的行業(yè)較為廣泛，如通訊、電子、房產(chǎn)、鋼鐵、生產(chǎn)管理等行業(yè)大部分以藍(lán)色為主 色調(diào)來(lái)設(shè)計(jì)軟件。紅色 ：在政府單位運(yùn)用比較多。綠色 ：一般運(yùn)用于教育、醫(yī)療、農(nóng)林等行業(yè)。黑色：能源、石油、房地產(chǎn)行業(yè)有時(shí)候會(huì)用中性的黑色作為主色調(diào)。表現(xiàn)區(qū)：通常用淺色，如：白色、淡灰、或者淡藍(lán)之類，因?yàn)榇竺娣e的文字信息在淺色上便于 長(zhǎng)時(shí)間閱讀，不容易形成視覺(jué)疲勞。2.2風(fēng)格:軟件界面的風(fēng)格通常比較簡(jiǎn)約。不同行業(yè)，使用的環(huán)境不同稍有差異。3登錄界面基本元素：logo、系統(tǒng)名稱、輸入框、提交按鈕。如下:2 / 13# / 134頁(yè)面邏輯結(jié)構(gòu)首頁(yè)功能頁(yè)面功能頁(yè)面彈出頁(yè)面彈出頁(yè)面彈出頁(yè)面功能頁(yè)

3、面：查看某一功能模塊的全部數(shù)據(jù)，查看某一對(duì)象的各類相關(guān)數(shù)據(jù)首頁(yè)：宏觀預(yù)覽各項(xiàng)設(shè)備管理數(shù)據(jù)，快速訪問(wèn)期望的數(shù)據(jù)功能彈出頁(yè)面：填寫(xiě)和提交表單，對(duì)功能中的某一單項(xiàng)數(shù)據(jù)進(jìn)行增加軟件界面通常是上面這樣的邏輯結(jié)構(gòu)/刪除/查詢/修改/審核/打印/導(dǎo)出等 功能操作。5頁(yè)面的基本屬性頁(yè)面寬度：屬性值為auto，最小值1024像素。默認(rèn)狀況下無(wú)橫向滾動(dòng)條。注意：寬度、位置、邊距為不可變數(shù)據(jù)背景：頁(yè)面整體為白色背景#FFFFFF或者淺灰、淺藍(lán)等，總之是非常接近白色的顏色。注：白色為常用色值，對(duì)于特殊個(gè)性化頁(yè)面可根據(jù)特殊要求變更色彩；背景色彩盡量少用飽和度高 的顏色，減少用戶視覺(jué)疲勞；背景圖片遵循原則盡量選擇可復(fù)用的

4、圖片，減少頁(yè)面文件量頁(yè)面位置：居中頁(yè)面邊距： 上 Opx;下 Opx;左 0 px;右 0 px;注意：有時(shí)候會(huì)專門(mén)設(shè)置一定數(shù)值的邊距，這時(shí)通常 與模塊間的間距相同，如上下左右都是5px。4 / 136導(dǎo)航菜單windows標(biāo)準(zhǔn)的定制導(dǎo)航常見(jiàn)的軟件導(dǎo)航菜單有：左側(cè)樹(shù)狀菜單、左側(cè)伸縮菜單、6.1左側(cè)樹(shù)狀菜單適用于多級(jí)結(jié)構(gòu)龐大的軟件架構(gòu)。丄倉(cāng)庫(kù)管【里原村料基本信息維護(hù) 益維護(hù)期初庫(kù)存萱看期初庫(kù)存 =最低最喬庫(kù)存設(shè)置 B在途童理 G）到貨管理 匚原村料入庫(kù) P原材料出庫(kù) E原材料幀妁 國(guó)半成品入庫(kù) 國(guó)半就品出庫(kù) 0咸品入庫(kù) £威品出棒查看采購(gòu)計(jì)劃 匸查看籠料計(jì)劃 圖移聶側(cè)垛 R查洞位墨與曄

5、存不脣童詢物品在倉(cāng)庫(kù)中的 丄查伺統(tǒng)計(jì)*曰半咸品 二半成品庫(kù)存半咸品入庫(kù)明學(xué) 品岀障明纟 半弱品超定額t 豈半成品超訂單； 半成品超訂單t > Cj咸品6.2左側(cè)手風(fēng)琴式菜單這種菜單適用于相對(duì)小規(guī)模的軟件架構(gòu)，簡(jiǎn)單舒適型。規(guī)范 1）菜單深度一般不要超過(guò)兩層1024*768。2）導(dǎo)航如不是客戶特別要求的定制，均制成類似以上的導(dǎo)航，其中默認(rèn)分辨率為,盂訶一緇蘋(píng).竽一級(jí)菜單：圖標(biāo) 32px_32px，字體14px、不加粗、#000000 ；二級(jí)菜單：圖標(biāo) 20px_20px，字體12px、不加粗、#333333 ；6.3 Windows標(biāo)準(zhǔn)的定制導(dǎo)航-W住咅注*爛亙EE丹雪片百左二鴉薰單6 /

6、137頁(yè)面結(jié)構(gòu)7.1基本結(jié)構(gòu)：標(biāo)準(zhǔn)頭、內(nèi)容區(qū)、標(biāo)準(zhǔn)尾頭部和底部具體的的內(nèi)容不同的軟件設(shè)置有所差異，如有些軟件將菜單欄設(shè)在標(biāo)準(zhǔn)頭里邊，而有些軟件則設(shè)置在內(nèi)容區(qū)的左側(cè)，但在不同的同時(shí)，有很多的地方是相同的。 這里我們所說(shuō)的就是共性。7.2標(biāo)準(zhǔn)頭logo&系統(tǒng)名稱|基本操作區(qū)適用范圍：所有常規(guī)頁(yè)面尺寸：寬100%高60px80px7.3標(biāo)準(zhǔn)尾技術(shù)支持&版本情況|版權(quán)信息適用范圍：所有常規(guī)頁(yè)面 尺寸：寬100%高30px50px7.4內(nèi)容區(qū)版塊元素之間間距為 5px200px100%-200px-5窗口風(fēng)格窗口風(fēng)格要注意表現(xiàn)的一致性。1）報(bào)錯(cuò)頁(yè)面的風(fēng)格一致，最好有統(tǒng)一的報(bào)錯(cuò)頁(yè)面2）類似

7、功能的窗口打開(kāi)的風(fēng)格要一致3）相同功能在不同模塊的名稱要一致4）子窗體應(yīng)盡量在顯示在主窗體的左上或居中放置5）彈出式窗口盡量在不借助滾動(dòng)條的情況下顯示所有內(nèi)容6）框邊界要與背景有區(qū)分，邊界要清楚。7）彈出框的文字要有對(duì)齊，當(dāng)不同長(zhǎng)度文字的排版出現(xiàn)對(duì)對(duì)齊不一致的時(shí)候，上下文字必須統(tǒng)一右對(duì)齊， 輸入框統(tǒng)一左對(duì)齊，如果文字對(duì)其空間不夠，可考慮換行。9頁(yè)面留白無(wú)論是在頁(yè)面中還是在彈出層中，內(nèi)容距離上下左右的邊距都不能太近，這樣有助于用戶的瀏覽，給用戶瀏覽以喘息的空間。如下圖：頂部留白10px15px,上下邊距10px15px，左右邊距15px20px，行與行輸入框距離 5px10px。具體留白大小可根

8、據(jù)軟件的具體情況統(tǒng)一設(shè)定，整體保持統(tǒng)一性即可，不可同一軟件中不同標(biāo)準(zhǔn)執(zhí)行。10字體規(guī)范10.1字體：軟件中所用字體一般是電腦系統(tǒng)的默認(rèn)字體。漢字：宋體、黑體、微軟雅黑。英文： Arial, Verda na。10.2字號(hào)：軟件中一般用14px和12px，14px文字主要用于一級(jí)菜單和板塊的標(biāo)題區(qū)標(biāo)題，12px文字10.3 字體顏色：通常情況：黑色( #000000 )深色背景中：白色( #ffffff )白色背景中：深灰( #333333 )表格中鏈接的默認(rèn)色：天藍(lán)色( #0059D5) 鏈接的鼠標(biāo)滑過(guò) hover 色：紅色( #ff0000 ) 警示性文字的顏色：紅色( #ff0000 )如

9、：必選項(xiàng)的提示符號(hào) “*“。11 頁(yè)面元素11.1 按鈕按鈕風(fēng)格相同，大小相似，字體一致 無(wú)效按鈕要屏蔽。高： 24 像素，寬：根據(jù)文字長(zhǎng)度定；按鈕 的文字居中，字體統(tǒng)一大小 12px、右、下、左的邊距分別為：6x,12x,6x,12px，按鈕之間的間距統(tǒng)-為 8px；11.2 表格表格整體色調(diào)采用灰調(diào)，便于用戶長(zhǎng)時(shí)間操作部視覺(jué)疲勞，表格分為標(biāo)題部分，主體內(nèi)容部分。標(biāo) 題部分應(yīng)該用相應(yīng)的顏色加以區(qū)別， 表格隔行應(yīng)用不同的顏色加以區(qū)別。 表格選中行應(yīng)用色調(diào)區(qū)分， 表格的行高為25像素。表格四周的文字要有空隙padding屬性2px。不同表格之間必須有對(duì)齊。如(圖 19)三個(gè)表格之間表格的頂部、底

10、部都應(yīng)該有對(duì)齊，表格之間應(yīng)有空隙，空隙。11.3 輸入框11.3.1必輸項(xiàng)1) 必輸項(xiàng)中不可為空，不可輸入空格2) 必輸項(xiàng)給出必輸項(xiàng)標(biāo)識(shí)( * )11.3.2字段長(zhǎng)度超過(guò)數(shù)據(jù)庫(kù)規(guī)定長(zhǎng)度時(shí)不允許輸入11.3.3 多行文本輸入、文本區(qū)域尺寸：自定義內(nèi)邊距上下左右皆為 5px行距為 1.5em邊框：寬度 1px，顏色#66666611.3.4格式校驗(yàn)1）身份證號(hào)、E-MAIL、郵箱等特定字段的格式要符合需求的規(guī)定11.3.5日期格式1 ）日期顯示格式一致，如 ： yyyy-mm-dd2）使用日期控件，盡量不是手工錄入3）如需要限制日期選擇范圍，則超出范圍的日期應(yīng)為灰色不可選狀態(tài)。'"

11、;=$% 人11.3.6特殊字符1 ）輸入?yún)^(qū)域輸入特殊字符， 插入數(shù)據(jù)庫(kù)時(shí)不出錯(cuò)或提示不允許輸入特殊字符。 特殊字符包括：¥ &#等11.3.7英文輸入英文輸入不區(qū)分大小寫(xiě)，不可輸入漢字、數(shù)字及特殊字符11.3.8數(shù)值字段只能輸入 + - 09及功能鍵 （BackSpace 光標(biāo)）11.3.9字符字段1）如果支持日韓文字，則要判斷全角假名/ 半角假名單行文本框 / 多行文本框1） 長(zhǎng)度合適，可以容納相應(yīng)文字，但不能超過(guò)數(shù)據(jù)庫(kù)該字段長(zhǎng)度，最好將可以輸入的最大字符數(shù)標(biāo)在旁邊。 建議單行文本框中當(dāng)輸入的字符超過(guò)一定長(zhǎng)度時(shí)再輸入無(wú)效； 對(duì)于多行文本框給出最大字 符數(shù)標(biāo)識(shí)11.4 附件

12、1）可正常添加符合格式的附件2）附件可正常打開(kāi)和保存，附件名較長(zhǎng)時(shí)可正常操作3）直接輸入錯(cuò)誤的附件地址，保存時(shí)應(yīng)給出提示信息4）附件打開(kāi) / 保存到本地時(shí)，文件名要顯示原文件文件名11.5 密碼輸入1）需在需求中定義密碼是否允許為空或空格；密碼是否允許特殊字符；是否區(qū)分大小寫(xiě)，密碼的可 輸入長(zhǎng)度2）程序中應(yīng)給出文字說(shuō)明密碼的可輸入長(zhǎng)度入無(wú)效；對(duì)于多行文本框給出最大字符數(shù)標(biāo)11.6 Tab 標(biāo)簽圓角5px背景色分設(shè)當(dāng)前選中與非選中狀態(tài)，邊框#ccc片基本信息計(jì)劃胡堀如：11.7圖片格式：原則上盡量使用png格式圖片，特殊圖片可使用JPG質(zhì)量：圖片畫(huà)面顯示清晰，不采用改變顯示尺寸的放大或縮小。圖片

13、畫(huà)面（尤其是人物圖像）不允 許變形。文件大?。嚎刂圃?0KB內(nèi)為宜。命名規(guī)則：圖片按照?qǐng)D片描述直接命名。圖片名稱均由小寫(xiě)字母、數(shù)字和“”組成，不能有空格或其他字符，放置于images文件夾中。11.8框架當(dāng)框架界面長(zhǎng)度超過(guò)顯示終端最大分辨率高度，提供下拉滾動(dòng)條；框架部分的設(shè)計(jì)應(yīng)考慮節(jié)省屏幕空間，各種分辨率的大小，縮放時(shí)的狀態(tài)和原則，并且為將來(lái)設(shè)計(jì)的按鈕、菜單、標(biāo)簽、滾動(dòng)條及狀態(tài)欄預(yù)留位置；主菜單放在左邊或上邊，滾動(dòng)條放在右邊，以符合用戶使用中的視覺(jué)流程。列表均采用表格或框架呈現(xiàn)，默認(rèn)狀況下盡量不出現(xiàn)橫向滾動(dòng)。12用戶界面行為12.1鼠標(biāo)1）鼠標(biāo)為不可點(diǎn)擊狀態(tài)時(shí)顯示箭頭，可點(diǎn)擊狀態(tài)顯示手型;12.2 系統(tǒng)響應(yīng)時(shí)間系統(tǒng)響應(yīng)時(shí)間應(yīng)該適中，響應(yīng)時(shí)間過(guò)長(zhǎng)，用戶就會(huì)感到不安和沮喪，而響應(yīng)時(shí)間過(guò)快也會(huì)影響到用 戶的操作節(jié)奏，并可能導(dǎo)致錯(cuò)誤。因此在系統(tǒng)響應(yīng)時(shí)間上堅(jiān)持如下原則： 響應(yīng)時(shí)間長(zhǎng)度界面設(shè)計(jì)：1） 0-5 秒鼠標(biāo)顯示成為沙漏；2）5 秒以上顯示處理窗口，或顯示進(jìn)度條；3）一個(gè)長(zhǎng)時(shí)間的處理完成時(shí)應(yīng)給予完成警告信息。12.3 光標(biāo)定位1）打開(kāi)新增（修改