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

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

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

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

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

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

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

7、嵌套導致的視覺混亂；單一功能的操作目的明確，符合易用性原則，避免不必要的信息顯示而對用戶造成視覺干擾；力求操作簡單，簡單的功能一步完成，比較復雜的功能三步之內(nèi)，復雜的功能操作使用操作向?qū)磔o助客戶完成。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)文本 Sta

8、tictext3.5.10文本框 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 衍生布局 3 3.6.7 彈出式窗口布局3.6.7.1 業(yè)務(wù)模塊彈出式窗口3.6.7.2 管理模塊彈出式窗口3.6.7.3 彈出式窗口上數(shù)據(jù)窗口3.7

9、快捷鍵 ShortCuekey在 Windows 及其應(yīng)3.8用戶簡單交互 Action在菜單項中使用快捷鍵可以讓使用鍵盤的用戶操作得更快一些，用軟件中快捷鍵的使用大多是一致的。應(yīng)用的快捷鍵在各個配置項上語義必須保持一致。3.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