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

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

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

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

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

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

7、單，簡單的功能一步完成，比較復雜的功能三步之內，復雜的功能操作使用操作向導來輔助客戶完成。3.2顏色搭配Corlor3.3字體Font3.4資源Resources3.5控件風格Style3.5.1窗體Window3.5.2菜單Menu3.5.3工具欄ToolBar3.5.4狀態欄StatusBar3.5.5導航欄OutlookBar3.5.6數據窗口DataWindow3.5.7按鈕Button3.5.8單選框RadioButton3.5.9靜態文本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用戶主要工作區布局3.6.6.1衍生布局13.6.6.2衍生布局23.6.6.3衍生布局33.6.7彈出式窗口布局3.6.7.1業務模塊彈出式窗口3.6.7.2管理模塊彈出式窗口3.6.7.3彈出式窗口上數據窗口3.7快捷鍵ShortCuekey在菜單項中使用快捷鍵可以讓使用鍵盤的用戶操作得更快一些，在Windows及其應用軟件中快捷鍵的使用大多是一致的。應用的快捷鍵在各個配置項上語義必

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