設(shè)計(jì)規(guī)范說明書

1、UI設(shè)計(jì)規(guī)范說明書修訂歷史記錄日期版本說明作者1 前言1.1 文檔簡介本文檔是對整個系統(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)

2、準(zhǔn)的控件，也指使用相同的信息表現(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)注意在一個窗口內(nèi)部所有控件的布局和信息組織的藝術(shù)性，使得用戶界面美觀。在一個窗口中按t

3、ab鍵，移動聚焦的順序不能雜亂無章，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)的操作，如雙擊、拖動對象等，并不能簡單地用鍵盤來模擬即可實(shí)現(xiàn)，此類操作可適當(dāng)增加操作按鈕。2.2.4 向?qū)褂迷瓌t對于應(yīng)用中某些部分的處理流程是固定的，用戶必須按照指定的順序輸入操作信息，為了使用戶操作得到必要的引用應(yīng)該使用向?qū)?，使用戶使用功能時(shí)比較輕

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

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

6、過不必要的動作、改變所需動作的順序（如果允許的話）以及在不退出系統(tǒng)的情況下從錯誤狀態(tài)中恢復(fù)；6）為所有輸入的動作提供幫助；7）消除冗余輸入?？赡艿脑捥峁┠J(rèn)值、絕不要讓用戶提供程序中可以自動獲取或計(jì)算出來的信息。3 界面實(shí)施細(xì)則 Detail3.1 概述界面設(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)致的視覺混亂；單一功能的操作目的明確，符合易用性原則，避免不必要的信

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 文本框 SingleL

8、ineEdit3.5.11 下拉選擇框 DropDownList3.5.12 樹形視圖 TreeView3.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)

9、中使用快捷鍵可以讓使用鍵盤的用戶操作得更快一些，在Windows及其應(yīng)用軟件中快捷鍵的使用大多是一致的。應(yīng)用的快捷鍵在各個配置項(xiàng)上語義必須保持一致。 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）用戶可以通過幫助菜單、F1鍵和幫助按鈕（如果有的話）訪問幫助；3）表示幫助時(shí)根據(jù)需要提供三種方式的選擇：另一個窗體、微幫助和指出參考某個文檔；4）用戶如何回到正常交互方式有兩種選擇：返回鍵和功能鍵。幫助信息的構(gòu)造：采用分層式幫助。3.9.2 微幫