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

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

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

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è)計的應(yīng)用中還應(yīng)加入一些必要的按鈕和菜單項。但是，許多鼠標(biāo)的操作，如雙擊、拖動對象等，并不能簡單地用鍵盤來模擬即可實現(xiàn)，此類操作可適當(dāng)增加操作按鈕。2.2.4 向?qū)褂迷瓌t對于應(yīng)用中某些部分的處理流程是固定的，用戶必須按照指定的順序輸入操作信息，為了使用戶操作得到必要的引用應(yīng)該使用向?qū)?，使用戶使用功能時比較輕松明了，

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

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

6、必要的動作、改變所需動作的順序（如果允許的話）以及在不退出系統(tǒng)的情況下從錯誤狀態(tài)中恢復(fù)；6）為所有輸入的動作提供幫助；7）消除冗余輸入?？赡艿脑捥峁┠J(rèn)值、絕不要讓用戶提供程序中可以自動獲取或計算出來的信息。3 界面實施細(xì)則Detail3.1 概述界面設(shè)計中保持界面的一致性。一致性既包括使用標(biāo)準(zhǔn)的控件，也指使用相同的信息表現(xiàn)方法，如在字體、標(biāo)簽風(fēng)格、顏色、術(shù)語、顯示錯誤信息等方面確保一致。界面力求簡潔明了，保證系統(tǒng)功能設(shè)計的合理與明確，布局明確、交互操作合理、協(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 下拉選

8、擇框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在菜單項中使用快捷鍵可以讓使用鍵盤的用戶操作得更快一些，

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