軟件界面設(shè)計規(guī)范-V0---視覺部分

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

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

3、訪問期望的數(shù)據(jù)功能功能頁面：查看某一功能模塊的全部數(shù)據(jù)，查看某一對象的各類相關(guān)數(shù)據(jù)彈出頁面：填寫和提交表單，對功能中的某一單項數(shù)據(jù)進行增加 /刪除/查詢/修改/審核/打印/導出等功能操作。5頁面的基本屬性頁面寬度：屬性值為auto，最小值1024像素。默認狀況下無橫向滾動條。注意：寬度、位置、邊距為不可變數(shù)據(jù) 背景：頁面整體為白色背景#FFFFFF 或者淺灰、淺藍等，總之是非常接近白色的顏色。注：白色為常用色值，對于特殊個性化頁面可根據(jù)特殊要求變更色彩；背景色彩盡量少用飽和度高的顏色，頁面位置:頁面邊距:減少用戶視覺疲勞；背景圖片遵循原則盡量選擇可肓居中上 Opx ； 下 0px ； 左 0

4、px ； 右 0 px ；復用的圖片，減:少頁面文件量注意：有時候會專門設(shè)置一定數(shù)值的邊距，這時通常與模塊間的間距相同，如上下左右都是5px?？删庉?導航菜單常見的軟件導航菜單有：左側(cè)樹狀菜單、左側(cè)伸縮菜單、win dows標準的定制導航6.1左側(cè)樹狀菜單適用于多級結(jié)構(gòu)龐大的軟件架構(gòu)。j ,倉庫管i里原村料基本信息維護 G維護期初庫存 E）查看期初庫存最低最喜庫存設(shè)蠱在途世理31到貨苣瑾E原村料入庫-原材料岀庫原村料傾約半兩品入庫 匚半戰(zhàn)品岀庫 O感品入庫 匚成品出屋童看乘敗計劃I-查看驢料計劃 咼移庫例垛1=查聞位墨與曄存不竊查洵擁品在倉庫中的已）董詢統(tǒng)計：匸原材料*匕i半肅品口半成品庫存半

5、咸品入薛明纟 因半成品出庫明堂 B半咸品超定額上 口半成品老訂單匚 囿半咸品超訂單上戰(zhàn)品6.2左側(cè)手風琴式菜單這種菜單適用于相對小規(guī)模的軟件架構(gòu)，簡單舒適型。規(guī)范 1）菜單深度一般不要超過兩層1024*768 。2）導航如不是客戶特別要求的定制，均制成類似以上的導航，其中默認分辨率為#333333 ；二級菜單：圖標 20px_20px，字體12px、不加粗、6.3 Windows標準的定制導航7頁面結(jié)構(gòu)7.1基本結(jié)構(gòu)：標準頭、內(nèi)容區(qū)、標準尾頭部和底部具體的的內(nèi)容不同的軟件設(shè)置有所差異，如有些軟件將菜單欄設(shè)在標準頭里邊，而有些軟件則設(shè)置在內(nèi)容區(qū)的左側(cè)，但在不同的同時，有很多的地方是相同的。 這里

6、我們所說的就是共性。7.2標準頭logo&系統(tǒng)名稱 |基本操作區(qū)適用范圍：所有常規(guī)頁面尺寸：寬100% 高60px80px7.3標準尾技術(shù)支持&版本情況 |版權(quán)信息適用范圍：所有常規(guī)頁面 尺寸：寬100% 高30px50px7.4內(nèi)容區(qū)版塊元素之間間距為 5px8窗口風格窗口風格要注意表現(xiàn)的一致性。1）報錯頁面的風格一致，最好有統(tǒng)一的報錯頁面2）類似功能的窗口打開的風格要一致3）相同功能在不同模塊的名稱要一致4）子窗體應盡量在顯示在主窗體的左上或居中放置5）彈出式窗口盡量在不借助滾動條的情況下顯示所有內(nèi)容6 ）框邊界要與背景有區(qū)分，邊界要清楚。7）彈出框的文字要有對齊， 當不同長度文字的排版出

7、現(xiàn)對對齊不一致的時候，上下文字必須統(tǒng)一右對齊， 輸入框統(tǒng)一左對齊，如果文字對其空間不夠，可考慮換行。9頁面留白無論是在頁面中還是在彈出層中，內(nèi)容距離上下左右的邊距都不能太近，這樣有助于用戶的瀏覽，給用戶瀏覽以喘息的空間。如下圖：頂部留白10px15px ，上下邊距10px15px ，左右邊距15px20px ，行與行輸入框距離 5px10px。具體留白大小可根據(jù)軟件的具體情況統(tǒng)一設(shè)定，整體保持統(tǒng)一性即可，不可同一軟件中不同標準執(zhí)行。點檢計劃-計劃明細頂 10PX上 15PX左 20PX.昱否停機：-計劃部門:集団集團驗收部門：隼團-計劃名稱；2014-02-13*昱否目動生成計的:計劃負奏人:

8、氐行負奎人:驗收負妻人；右 20PX01402-13標準用時：下 15PX10 字體規(guī)范10.1 字體：軟件中所用字體一般是電腦系統(tǒng)的默認字體。漢字：宋體、黑體、微軟雅黑。英文： Arial, Verdana 。10.2 字號：軟件中一般用 14px 和 12px ， 14px 文字主要用于一級菜單和板塊的標題區(qū)標題， 12px 文字10.3 字體顏色：通常情況：黑色( #000000 )深色背景中：白色( #ffffff )白色背景中：深灰( #333333 ) 表格中鏈接的默認色：天藍色( #0059D5 )鏈接的鼠標滑過 hover 色：紅色( #ff0000 ) 警示性文字的顏色：紅色

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

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

11、則超出范圍的日期應為灰色不可選狀態(tài)。11.3.6特殊字符1 ）輸入?yún)^(qū)域輸入特殊字符，插入數(shù)據(jù)庫時不出錯或提示不允許輸入特殊字符。特殊字符包括：”=$%A% &# 等11.3.7英文輸入英文輸入不區(qū)分大小寫，不可輸入漢字、數(shù)字及特殊字符11.3.8數(shù)值字段只能輸入 + - 09 及功能鍵 （BackSpace 光標）11.3.9字符字段1 ）如果支持日韓文字，則要判斷全角假名/ 半角假名單行文本框 / 多行文本框1）長度合適，可以容納相應文字，但不能超過數(shù)據(jù)庫該字段長度，最好將可以輸入的最大字符數(shù)標在旁邊。 建議單行文本框中當輸入的字符超過一定長度時再輸入無效； 對于多行文本框給出最大字符數(shù)標識

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

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