UI設(shè)計(jì)規(guī)范文件

1、UI設(shè)計(jì)規(guī)范UI設(shè)計(jì)目標(biāo)統(tǒng)一和規(guī)范公司產(chǎn)品形象，提高公司產(chǎn)品的用戶體驗(yàn)。UI設(shè)計(jì)原則 簡(jiǎn)潔，易用，日常習(xí)慣，靈活，使UI設(shè)計(jì)的流程規(guī)范化，保證UI設(shè)計(jì)流程的可操作性。UI設(shè)計(jì)理念專注界面設(shè)計(jì)規(guī)范框架布局1、 網(wǎng)頁(yè)設(shè)計(jì)的尺寸標(biāo)準(zhǔn) 面向1024-768顯示器分辨率開(kāi)發(fā)的網(wǎng)頁(yè)尺寸，寬910px 面向800-600顯示器分辨率開(kāi)發(fā)的網(wǎng)頁(yè)尺寸，寬778px 2、網(wǎng)頁(yè)設(shè)計(jì)中的畫布設(shè)定 尤其注意分辨率為 72像素/英寸3、基本的兩種 居中對(duì)齊； 居左對(duì)齊， （避免不同尋常的令人眼花繚亂的設(shè)計(jì)、密密麻麻的內(nèi)容，特別要注意的是整齊，和透氣）4、 管理信息系統(tǒng)常用的布局（日常辦公（不影響其他操作）、日常監(jiān)控（不能

2、進(jìn)行其他操作）、大屏幕顯示（單屏顯示、多屏顯示）主題色調(diào)u 傾向于工業(yè)軟件 工業(yè)軟件的軟件傾向于黃綠。 通用的主色調(diào)選用藍(lán)色調(diào)，表現(xiàn)時(shí)尚。比較暗的情況下，比如晚上，用暗色調(diào)（灰黑）暗色做背景使人不覺(jué)得累。還得再選一種。u 網(wǎng)頁(yè)都應(yīng)該有特定的2-3種主色調(diào)，輔助色調(diào)不適宜太多。藍(lán)色相對(duì)比較公正，適合的層次也相對(duì)廣泛一點(diǎn)。藍(lán)色是很好很強(qiáng)大的色調(diào)呢 接受度高：藍(lán)色是超過(guò)世界人口的一半最喜歡的顏色（它可用于任何主題的網(wǎng)站） 藍(lán)色的顏色象征如深度，穩(wěn)定，信任，忠誠(chéng)，智慧，信心，智力素質(zhì)，信仰，真理，天堂，安寧，平靜，平靜、穩(wěn)定，信用、信賴（源于海洋和天空） 權(quán)威、權(quán)利的顏色 理性：藍(lán)色的長(zhǎng)期作為企業(yè)顏色

3、，暗藍(lán)與智力有關(guān)(科技) 較適合的行業(yè)網(wǎng)站：科技，醫(yī)療產(chǎn)品，清潔，空氣，天空，水，海洋和汽車再細(xì)分深藍(lán)：強(qiáng)大/權(quán)威 淺藍(lán)（明度）：寧?kù)o/健康淡藍(lán)（純度）：微妙/優(yōu)雅皇家藍(lán)：如其名u，通用規(guī)范 字體u 中文字體 尤其注意“設(shè)置消除鋸齒的方法”選項(xiàng) 要選擇 “無(wú)” 宋體是最常用的網(wǎng)頁(yè)字體，12px是中文操作系統(tǒng)可以表現(xiàn)的最小的字體，內(nèi)容文字大小一般用兩種，12px或14px ，標(biāo)題需要加粗 ，文字的顏色要便于閱讀，背景顏色切勿與文字反差太小且雜亂。u 英文字體 其中英文字體最小表現(xiàn)為10px 字 verdana 字體是大多數(shù)網(wǎng)頁(yè)使用的英文字體，比起arial 字體更美觀和均衡。u 字體類型一般設(shè)置

4、為font-family:verdana,tahoma,helvetica，樣式；u 有鏈接的文字應(yīng)有所提示，如下劃線，文字色彩的變化等，行距；圖片、Ø 系統(tǒng)背景有漸變效果時(shí)，需采用圖片做背景；Ø 圖片一般采用png或者gif格式，jpg，同時(shí)圖片必須進(jìn)行alt屬性的賦值；Ø 圖片文件大小應(yīng)小于30KB;Ø 圖標(biāo)一般采用16*16,24*24,32*32,48*48這四種尺寸，列表表頭、按鈕左側(cè)的圖標(biāo)一般采用16*16，頁(yè)頭幫助、退出按鈕圖標(biāo)一般采用32*32，頁(yè)面功能圖標(biāo)一般采用48*48，logo圖標(biāo)(不同集團(tuán)有不同的logo)需要依據(jù)尺寸特征進(jìn)行縮

5、放調(diào)整，調(diào)整后盡量滿足48*48。Ø 統(tǒng)一的色調(diào)、對(duì)比度、色階，以及圖片風(fēng)格Ø 底圖應(yīng)該融于底圖，使用淺色, 低對(duì)比，盡量少的使用顏色。 Ø 圖標(biāo)、圖像應(yīng)該很清晰的表達(dá)出意思，遵循常用標(biāo)準(zhǔn)，或者用戶機(jī)器容易聯(lián)想的到物件，絕對(duì)不允許畫出默認(rèn)奇妙的圖案。 公司LOGO、傳統(tǒng)的排版方式是放在公司名稱的簽名或者中上，如果LOGO放在名字后面排版效果好的話，也可以，沒(méi)有硬性規(guī)定，企業(yè)網(wǎng)站的話最好放在前面，顯得嚴(yán)肅莊重。 公司聯(lián)系方式、圖標(biāo)，（矩形代表正直，圓形代表團(tuán)結(jié)溫暖安全，三角形代表權(quán)威牢固，菱形代表平衡協(xié)調(diào)公平等）按鈕樣式、（圓形，長(zhǎng)方形，圓角矩形，橢圓形，正方形，水

6、晶按鈕，漸變性按鈕）滾動(dòng)條、視覺(jué)中心界面元素列舉常用的頁(yè)面元素 Ø 超鏈接：超鏈接默認(rèn)顯示下滑線，字體藍(lán)色，鼠標(biāo)放在超鏈接上字體要進(jìn)行變色(如紅色)。Ø 智能搜索窗口、Ø 列表、Ø 菜單、表單/格導(dǎo)航條、狀態(tài)顯示關(guān)鍵頁(yè)面1、 登錄頁(yè)面2、 系統(tǒng)主頁(yè)v 需要五部分組成：1 頁(yè)頭（使用單位logo、系統(tǒng)名稱、幫助圖標(biāo)、最大化最小化退出圖標(biāo)；）2 導(dǎo)航欄、3 菜單欄、4 內(nèi)容區(qū)、5 狀態(tài)欄，如下圖所示:系統(tǒng)框架布局需要做到：Ø 頁(yè)頭區(qū)域信息需包含：Ø 導(dǎo)航區(qū)信息需包含：瀏覽頁(yè)面的具體位置(頁(yè)面的深度不能超過(guò)3級(jí))、登錄用戶名、系統(tǒng)當(dāng)前時(shí)間；

7、Ø 菜單欄應(yīng)以功能模塊劃分，以樹(shù)狀層次組織，菜單的深度不應(yīng)超過(guò)3級(jí)；Ø 狀態(tài)欄應(yīng)顯示系統(tǒng)的版本信息，以及我公司服務(wù)電話；Ø 內(nèi)容區(qū)域的布局需要結(jié)合具體的應(yīng)用系統(tǒng)，先明白客戶需要顯示的數(shù)據(jù)，再考慮布局的方式；Ø 用戶最關(guān)注的內(nèi)容必須在第一屏呈現(xiàn)。交互設(shè)計(jì)規(guī)范本文中的交互設(shè)計(jì)規(guī)范與具體的業(yè)務(wù)需求無(wú)關(guān)，是通用的交互設(shè)計(jì)規(guī)范。如涉及到具體的應(yīng)用，其交互設(shè)計(jì)要滿足用戶需求外，要遵循第二、三章節(jié)的UI設(shè)計(jì)原則和設(shè)計(jì)理念。常用操作包括增刪改查存、登錄退出 注意事項(xiàng)、保存、導(dǎo)出、打印、返回、關(guān)閉（表單數(shù)據(jù)錄入的一致性檢查）觸摸技術(shù)，虛擬鍵盤，手勢(shì)定義排序方式快捷鍵 en

8、ter 、esc、tab 右鍵菜單 刷新鼠標(biāo)觸發(fā)事件 鼠標(biāo)跟隨鼠標(biāo)光標(biāo)樣式統(tǒng)一，盡量使用系統(tǒng)標(biāo)準(zhǔn)，杜絕出現(xiàn)重復(fù)的情況，例如某些軟件中一個(gè)手的形狀就有4鐘不同的樣子 多窗口排列（待定）縮放與不可縮放，自適應(yīng)選擇方式，多選，選擇狀態(tài)鍵盤操作 TAB鍵 ENTER鍵 ESC退出等錯(cuò)誤反饋錯(cuò)誤頁(yè)面的一般處理方法404頁(yè)面提示信息等待提示、導(dǎo)航提示（工作流程提示），當(dāng)前位置提示 幫助保存登陸用戶名密碼 光標(biāo)提示響應(yīng)時(shí)間操作的響應(yīng)時(shí)間2，5，8 進(jìn)度條操作日志操作時(shí)間 用戶 事件 設(shè)計(jì)詳細(xì)規(guī)范1 產(chǎn)品包裝2 產(chǎn)品LOGO3 ioc圖標(biāo)4 軟件打開(kāi)引導(dǎo)頁(yè)（等待條，加載條）5 登陸界面（背景圖及顏色，結(jié)合產(chǎn)品特點(diǎn)，用戶名，密碼，驗(yàn)證字符，光標(biāo)及光標(biāo)背景色，確認(rèn)登陸按鈕）6 進(jìn)入首頁(yè)（