UI設(shè)計(jì)規(guī)范方案說明書模板

1、UI設(shè)計(jì)規(guī)范說明書修訂歷史記錄日期版本說明作者1 前言1.1文檔簡介本文檔是對整個(gè)系統(tǒng)界面設(shè)計(jì)風(fēng)格進(jìn)行描述，和用戶交互的最終界面在詳細(xì)設(shè)計(jì)說明書中設(shè)計(jì)和解釋。1.2系統(tǒng)定義用戶界面：又稱人機(jī)界面，實(shí)現(xiàn)用戶與計(jì)算機(jī)之間得通信，以控制計(jì)算機(jī)或進(jìn)行用戶和計(jì)算機(jī)之間得數(shù)據(jù)傳送得系統(tǒng)部件。GUI:即圖形用戶界面，一種可視化得用戶界面，它使用圖形界面代替正文界面。1.3編寫目的統(tǒng)一圖形界面規(guī)范，為開發(fā)人員提供統(tǒng)一的標(biāo)準(zhǔn)，為用戶提供統(tǒng)一顯示效果、統(tǒng)一操作方式的界面，便于用戶識別與使用。2 界面設(shè)計(jì)準(zhǔn)則Rules2.1引言Introduction在界面設(shè)計(jì)中應(yīng)該保持界面的一致性。一致性既包括使用標(biāo)準(zhǔn)的控件，也

2、指使用相同的信息表現(xiàn)方法，如在字體、風(fēng)格、顏色、術(shù)語、提示信息等方面確保一致。2.2主要內(nèi)容Content2.2.1顯示信息一致性原則堅(jiān)持圖形用戶界面（GUI）設(shè)計(jì)原則，界面直觀、對用戶透明：用戶接觸軟件后對界面上對應(yīng)的功能一目了然、不需要多少培訓(xùn)就可以方便使用本應(yīng)用系統(tǒng)。明確用戶是所有處理的核心，不應(yīng)該有應(yīng)用程序來決定處理過程，所以用戶界面應(yīng)當(dāng)由用戶來控制應(yīng)用如何工作、如何響應(yīng)，而不是由開發(fā)者按自己的意愿把操作流程強(qiáng)加給用戶。界面設(shè)計(jì)必須經(jīng)過最終確認(rèn)才能完成。2.2.2布局合理化原則應(yīng)注意在一個(gè)窗口內(nèi)部所有控件的布局和信息組織的藝術(shù)性，使得用戶界面美觀。在一個(gè)窗口中按tab鍵，移動(dòng)聚焦的順序

3、不能雜亂無章，tab的順序是先從上至下，再從左至右。一屏中首先應(yīng)輸入的和重要信息的控件在tab順序中應(yīng)當(dāng)靠前，位置也應(yīng)放在窗口上較醒目的位置。布局力求簡潔、有序、易于操作。2.2.3鼠標(biāo)與鍵盤一致性原則盡量遵循可不用鼠標(biāo)的原則：應(yīng)用中的功能只用鍵盤也應(yīng)當(dāng)可以完成，即設(shè)計(jì)的應(yīng)用中還應(yīng)加入一些必要的按鈕和菜單項(xiàng)。但是，許多鼠標(biāo)的操作，如雙擊、拖動(dòng)對象等，并不能簡單地用鍵盤來模擬即可實(shí)現(xiàn)，此類操作可適當(dāng)增加操作按鈕。2.2.4向?qū)褂迷瓌t對于應(yīng)用中某些部分的處理流程是固定的，用戶必須按照指定的順序輸入操作信息，為了使用戶操作得到必要的引用應(yīng)該使用向?qū)?，使用戶使用功能時(shí)比較輕松明了，但是向?qū)П仨氂迷诠?/p>

4、定處理流程中，并且處理流程應(yīng)該不少于3個(gè)處理步驟。2.2.5系統(tǒng)響應(yīng)時(shí)間系統(tǒng)響應(yīng)時(shí)間應(yīng)該適中，響應(yīng)時(shí)間過長，用戶就會(huì)感到不安和沮喪，而響應(yīng)時(shí)間過快也會(huì)影響到用戶的操作節(jié)奏，并可能導(dǎo)致錯(cuò)誤。因此在系統(tǒng)響應(yīng)時(shí)間上堅(jiān)持如下原則：響應(yīng)時(shí)間長度界面設(shè)計(jì)：0-5秒鼠標(biāo)顯示成為沙漏；5秒以上顯示處理窗口，或顯示進(jìn)度條；一個(gè)長時(shí)間的處理完成時(shí)應(yīng)給予完成警告信息。2.2.6出錯(cuò)信息和警告出錯(cuò)信息和警告是指出現(xiàn)問題時(shí)系統(tǒng)給出的壞消息，對于出錯(cuò)信息和警告應(yīng)該遵循以下原則：信息以用戶可以理解的術(shù)語描述；信息簡明扼要，指出出錯(cuò)原因并提供解決辦法提示。2.2.7信息顯示原則信息顯示遵循以下原則：1）只顯示與當(dāng)前用戶語境環(huán)

5、境有關(guān)的信息；2）不要用數(shù)據(jù)將用戶包圍，使用便于用戶迅速吸取信息的方式表現(xiàn)信息；3）使用一致的標(biāo)記、標(biāo)準(zhǔn)縮寫和顏色，顯示信息的含義應(yīng)該非常明確，用戶不必再參考其它信息源；4）產(chǎn)生有意義的出錯(cuò)信息；5）使用縮進(jìn)和文本來輔助理解；6）使用窗口分隔控件分隔不同類型的信息；7）高效地使用顯示器的顯示空間，但要避免空間過于擁擠。2.2.8數(shù)據(jù)輸入原則數(shù)據(jù)輸入遵循以下原則：1）盡量減少用戶輸入動(dòng)作的數(shù)量；2）維護(hù)信息顯示和數(shù)據(jù)輸入的一致性；3）交互應(yīng)該時(shí)靈活的，對鍵盤和鼠標(biāo)輸入的靈活性提供支持；4）在當(dāng)前動(dòng)作的語境中使不合適的命令不起作用；5）讓用戶控制交互流，用戶可以跳過不必要的動(dòng)作、改變所需動(dòng)作的順序

6、（如果允許的話）以及在不退出系統(tǒng)的情況下從錯(cuò)誤狀態(tài)中恢復(fù)；6）為所有輸入的動(dòng)作提供幫助；7）消除冗余輸入?？赡艿脑捥峁┠J(rèn)值、絕不要讓用戶提供程序中可以自動(dòng)獲取或計(jì)算出來的信息。3 界面實(shí)施細(xì)則Detail3.1概述界面設(shè)計(jì)中保持界面的一致性。一致性既包括使用標(biāo)準(zhǔn)的控件，也指使用相同的信息表現(xiàn)方法，如在字體、標(biāo)簽風(fēng)格、顏色、術(shù)語、顯示錯(cuò)誤信息等方面確保一致。界面力求簡潔明了，保證系統(tǒng)功能設(shè)計(jì)的合理與明確，布局明確、交互操作合理、協(xié)調(diào)統(tǒng)一。功能要表現(xiàn)清楚，分類清晰有條理，避免過多的控件嵌套導(dǎo)致的視覺混亂；單一功能的操作目的明確，符合易用性原則，避免不必要的信息顯示而對用戶造成視覺干擾；力求操作簡

7、單，簡單的功能一步完成，比較復(fù)雜的功能三步之內(nèi)，復(fù)雜的功能操作使用操作向?qū)磔o助客戶完成。3.2顏色搭配Corlor3.3字體Font3.4資源Resources3.5控件風(fēng)格Style3.5.1窗體Window3.5.2菜單Menu3.5.3工具欄ToolBar3.5.4狀態(tài)欄StatusBar3.5.5導(dǎo)航欄OutlookBar3.5.6數(shù)據(jù)窗口DataWindow3.5.7按鈕Button3.5.8單選框RadioButton3.5.9靜態(tài)文本Statictext3.5.10 文本框SingleLineEdit3.5.11 下拉選擇框DropDownList3.5.12 樹形視圖Tree

8、View3.5.13 圖片PictureBox3.6界面布局Layout3.6.1引言Introduction3.6.2間距Distance3.6.3對齊Align3.6.4分辨率3.6.5主界面布局3.6.6用戶主要工作區(qū)布局3.6.6.1衍生布局13.6.6.2衍生布局23.6.6.3衍生布局33.6.7彈出式窗口布局3.6.7.1業(yè)務(wù)模塊彈出式窗口3.6.7.2管理模塊彈出式窗口3.6.7.3彈出式窗口上數(shù)據(jù)窗口3.7快捷鍵ShortCuekey在菜單項(xiàng)中使用快捷鍵可以讓使用鍵盤的用戶操作得更快一些，在Windows及其應(yīng)用軟件中快捷鍵的使用大多是一致的。應(yīng)用的快捷鍵在各個(gè)配置項(xiàng)上語義必

9、須保持一致。3.8用戶簡單交互Action3.8.1消息框MessageBox3.9聯(lián)機(jī)幫助Help3.9.1幫助Help常用的幫助有兩種：集成的和附加的。集成的幫助一開始就是設(shè)計(jì)在軟件中的，它與語境有關(guān)，用戶可以直接選擇與所要執(zhí)行操作相關(guān)的主題。通過集成幫助可以縮短用戶獲得幫助的時(shí)間，增加界面的友好性。附加的幫助在系統(tǒng)建好以后再加進(jìn)去的。通常是一種查詢能力比較弱的聯(lián)機(jī)幫助。提供這兩種幫助，設(shè)計(jì)和實(shí)現(xiàn)時(shí)遵循以下原則：1）進(jìn)行系統(tǒng)交互時(shí)，提供部分幫助功能，即：提供主要操作的幫助；2）用戶可以通過幫助菜單、Fl鍵和幫助按鈕（如果有的話）訪問幫助；3）表示幫助時(shí)根據(jù)需要提供三種方式的選擇：另一個(gè)窗體、微幫助和指出參考某個(gè)文檔；4）用戶如何回到正常交互方式有兩種選擇：返回鍵和功能鍵。幫助信息的構(gòu)造：采用分層式幫助。3.9.2微幫助Mic