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

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

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

3、在一個窗口中按tab鍵，移動聚焦的順序不能雜亂無章，tab的順序是先從上至下，再從左至右。一屏中首先應輸入的和重要信息的控件在tab順序中應當靠前，位置也應放在窗口上較醒目的位置。布局力求簡潔、有序、易于操作。2.2.3 鼠標與鍵盤一致性原則盡量遵循可不用鼠標的原則：應用中的功能只用鍵盤也應當可以完成，即設計的應用中還應加入一些必要的按鈕和菜單項。但是，許多鼠標的操作，如雙擊、拖動對象等，并不能簡單地用鍵盤來模擬即可實現(xiàn)，此類操作可適當增加操作按鈕。2.2.4 向導使用原則對于應用中某些部分的處理流程是固定的，用戶必須按照指定的順序輸入操作信息，為了使用戶操作得到必要的引用應該使用向導，使用戶

4、使用功能時比較輕松明了，但是向導必須用在固定處理流程中，并且處理流程應該不少于3個處理步驟。2.2.5 系統(tǒng)響應時間系統(tǒng)響應時間應該適中，響應時間過長，用戶就會感到不安和沮喪，而響應時間過快也會影響到用戶的操作節(jié)奏，并可能導致錯誤。因此在系統(tǒng)響應時間上堅持如下原則：響應時間長度界面設計：0-5秒鼠標顯示成為沙漏；5秒以上顯示處理窗口，或顯示進度條；一個長時間的處理完成時應給予完成警告信息。2.2.6 出錯信息和警告出錯信息和警告是指出現(xiàn)問題時系統(tǒng)給出的壞消息，對于出錯信息和警告應該遵循以下原則：信息以用戶可以理解的術語描述；信息簡明扼要，指出出錯原因并提供解決辦法提示。2.2.7 信息顯示原則

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

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

7、，避免不必要的信息顯示而對用戶造成視覺干擾；力求操作簡單，簡單的功能一步完成，比較復雜的功能三步之內，復雜的功能操作使用操作向導來輔助客戶完成。3.2 顏色搭配 Corlor3.3 字體 Font3.4 資源 Resources3.5 控件風格 Style3.5.1 窗體 Window3.5.2 菜單 Menu3.5.3 工具欄 ToolBar3.5.4 狀態(tài)欄 StatusBar3.5.5 導航欄 OutlookBar3.5.6 數(shù)據(jù)窗口 DataWindow3.5.7 按鈕 Button3.5.8 單選框 RadioButton3.5.9 靜態(tài)文本 Statictext3.5.10 文本框

8、 SingleLineEdit3.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è)務模塊彈出式窗口3.6.7.2 管理模塊彈出式窗口3.6.7.3 彈出式窗口上數(shù)據(jù)窗口3.7 快捷鍵 ShortCu

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