軟件界面設(shè)計(jì)規(guī)范V視覺部分

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

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

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

4、上 0px；下 0px；左 0 px；右 0 px；注意：有時候會專門設(shè)置一定數(shù)值的邊距，這時通常與模塊間的間距相同，如上下左右都是5px。6 導(dǎo)航菜單常見的軟件導(dǎo)航菜單有：左側(cè)樹狀菜單、左側(cè)伸縮菜單、windows標(biāo)準(zhǔn)的定制導(dǎo)航6.1 左側(cè)樹狀菜單適用于多級結(jié)構(gòu)龐大的軟件架構(gòu)。6.2 左側(cè)手風(fēng)琴式菜單這種菜單適用于相對小規(guī)模的軟件架構(gòu)，簡單舒適型。規(guī)范1）菜單深度一般不要超過兩層 2） 導(dǎo)航如不是客戶特別要求的定制，均制成類似以上的導(dǎo)航，其中默認(rèn)分辨率為1024*768。一級菜單：圖標(biāo)32px_32px，字體14px、不加粗、#000000；二級菜單：圖標(biāo)20px_20px，字體12px、不

5、加粗、#333333； 6.3 Windows標(biāo)準(zhǔn)的定制導(dǎo)航7 頁面結(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è)，但在不同的同時，有很多的地方是相同的。這里我們所說的就是共性。7.2 標(biāo)準(zhǔn)頭logo&系統(tǒng)名稱 | 基本操作區(qū) 適用范圍：所有常規(guī)頁面 尺寸：寬100% 高60px80px7.3 標(biāo)準(zhǔn)尾 技術(shù)支持&版本情況 | 版權(quán)信息 適用范圍：所有常規(guī)頁面 尺寸：寬100% 高30px50px7.4 內(nèi)容區(qū)版塊元素之間間距為5px200px100%-200px

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

7、5px，上下邊距10px15px，左右邊距15px20px，行與行輸入框距離5px10px。具體留白大小可根據(jù)軟件的具體情況統(tǒng)一設(shè)定，整體保持統(tǒng)一性即可，不可同一軟件中不同標(biāo)準(zhǔn)執(zhí)行。頂10PX右20PX左20PX上15PX下15PX10 字體規(guī)范10.1 字體：軟件中所用字體一般是電腦系統(tǒng)的默認(rèn)字體。漢字：宋體、黑體、微軟雅黑。英文：Arial, Verdana。10.2 字號：軟件中一般用14px和12px，14px文字主要用于一級菜單和板塊的標(biāo)題區(qū)標(biāo)題，12px文字10.3 字體顏色：通常情況：黑色（#000000）深色背景中：白色（#ffffff）白色背景中：深灰（#333333）表格中

8、鏈接的默認(rèn)色：天藍(lán)色（#0059D5）鏈接的鼠標(biāo)滑過hover色：紅色（#ff0000）警示性文字的顏色：紅色（#ff0000）如：必選項(xiàng)的提示符號“*“。11 頁面元素11.1 按鈕按鈕風(fēng)格相同，大小相似，字體一致 無效按鈕要屏蔽。高：24像素，寬：根據(jù)文字長度定；按鈕的文字居中，字體統(tǒng)一大小12px、右、下、左的邊距分別為：6x,12x,6x,12px，按鈕之間的間距統(tǒng)一為8px； 11.2 表格表格整體色調(diào)采用灰調(diào)，便于用戶長時間操作部視覺疲勞，表格分為標(biāo)題部分，主體內(nèi)容部分。標(biāo)題部分應(yīng)該用相應(yīng)的顏色加以區(qū)別，表格隔行應(yīng)用不同的顏色加以區(qū)別。表格選中行應(yīng)用色調(diào)區(qū)分，表格的行高為25像素。

9、表格四周的文字要有空隙padding屬性2px。不同表格之間必須有對齊。如（圖19）三個表格之間表格的頂部、 底部都應(yīng)該有對齊，表格之間應(yīng)有空隙，空隙。11.3 輸入框11.3.1 必輸項(xiàng) 1）必輸項(xiàng)中不可為空，不可輸入空格 2）必輸項(xiàng)給出必輸項(xiàng)標(biāo)識（*） 11.3.2 字段長度 超過數(shù)據(jù)庫規(guī)定長度時不允許輸入 11.3.3 多行文本輸入、文本區(qū)域尺寸：自定義內(nèi)邊距上下左右皆為5px行距為1.5em邊框：寬度1px，顏色#66666611.3.4 格式校驗(yàn) 1）身份證號、E-MAIL、郵箱等特定字段的格式要符合需求的規(guī)定 11.3.5 日期格式 1）日期顯示格式一致，如 ：yyyy-mm-dd

10、 2）使用日期控件，盡量不是手工錄入 3）如需要限制日期選擇范圍，則超出范圍的日期應(yīng)為灰色不可選狀態(tài)。11.3.6 特殊字符 1）輸入?yún)^(qū)域輸入特殊字符，插入數(shù)據(jù)庫時不出錯或提示不允許輸入特殊字符。特殊字符包括：'"=$%￥&#等 11.3.7 英文輸入 英文輸入不區(qū)分大小寫，不可輸入漢字、數(shù)字及特殊字符 11.3.8 數(shù)值字段 只能輸入+ - 09及功能鍵(BackSpace 光標(biāo)) 11.3.9 字符字段 1）如果支持日韓文字，則要判斷全角假名/半角假名 單行文本框/多行文本框 1) 長度合適，可以容納相應(yīng)文字，但不能超過數(shù)據(jù)庫該字段長度，最好將可以輸入的最大字符數(shù)

11、標(biāo)在旁邊。建議單行文本框中當(dāng)輸入的字符超過一定長度時再輸入無效；對于多行文本框給出最大字符數(shù)標(biāo)識 11.4 附件 1）可正常添加符合格式的附件 2）附件可正常打開和保存，附件名較長時可正常操作 3）直接輸入錯誤的附件地址，保存時應(yīng)給出提示信息 4）附件打開/保存到本地時，文件名要顯示原文件文件名 11.5 密碼輸入 1）需在需求中定義密碼是否允許為空或空格；密碼是否允許特殊字符；是否區(qū)分大小寫，密碼的可輸入長度 2）程序中應(yīng)給出文字說明密碼的可輸入長度入無效；對于多行文本框給出最大字符數(shù)標(biāo)11.6 Tab標(biāo)簽圓角5px 背景色分設(shè)當(dāng)前選中與非選中狀態(tài)， 邊框#ccc 如：11.7 圖片格式：原

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