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

1、UI設(shè)計(jì)規(guī)范說明書修訂歷史記錄精選日期版本說明作者丄、廠.1 刖言1.1文檔簡(jiǎn)介本文檔是對(duì)整個(gè)系統(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)一操作方式的界面，便于用戶識(shí)別與使用。2 界面設(shè)計(jì)準(zhǔn)則 Rules2.1 引言 Introduction在界面設(shè)計(jì)中應(yīng)該保持界面的一致性。一致性

2、既包括使用標(biāo)準(zhǔn)的控件，也指使用相同的信息表現(xiàn)方法，如在字體、風(fēng)格、顏色、術(shù)語、提示信息等方面確保一致。2.2 主要內(nèi)容 Content2.2.1 顯示信息一致性原則堅(jiān)持圖形用戶界面（ GUI ）設(shè)計(jì)原則，界面直觀、對(duì)用戶透明：用戶接觸軟件后對(duì)界面上對(duì)應(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)注意在一個(gè)窗口內(nèi)部所有控件的布局和信息組織的藝術(shù)性，使得用戶界面美觀。

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

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

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

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

7、嵌套導(dǎo)致的視覺混亂；單一功能的操作目的明確，符合易用性原則，避免不必要的信息顯示而對(duì)用戶造成視覺干擾；力求操作簡(jiǎn)單，簡(jiǎn)單的功能一步完成，比較復(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)文本 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對(duì)齊 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用戶簡(jiǎn)單交互 Action在菜單項(xiàng)中使用快捷鍵可以讓使用鍵盤的用戶操作得更快一些，用軟件中快捷鍵的使用大多是一致的。應(yīng)用的快捷鍵在各個(gè)配置項(xiàng)上語義必須保持一致。3.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ù)需要提供三種方式的選擇：另一個(gè)窗體、 微幫助和指出參考某個(gè)文檔；4）用戶如何回到正常交互方式有兩種選擇：返回鍵和功能鍵。幫助信息的構(gòu)造：采用分層式幫助。3.9.2