介面設計的行業標準總結— GUI設計的相關行業標準

1.2  GUI所包含各類元素標準的定製

GUI的元素大致可分為以下幾個方面:
1.         視窗
2.         選單
3.         圖示
4.         控制元件
5.         滑鼠
6.         文字
7.         聯機幫助
一、GUI視窗的標準
視窗是顯示裝置中的一個區域,用於觀看物件、物件相關資訊以及應用與物件的動作進行互動。從外觀上來說,通常視窗是由標題、邊框、選單、工作區、滾動條等組成。視窗的標題欄可以進行開啟、關閉、建立、縮放、移動、刪除、重疊等操作
好的GUI視窗應該具備以下標準:
1.視窗控制元件的大小、對齊方向、顏色、背景等屬性的設定和程式設計規約相一致
2.顯示相關的下拉選單、工具條、滾動條、對話方塊、按鈕、圖示和其他控制,既能正確顯示又能呼叫
3.若視窗無法顯示,所有內容能夠改變大小、移動和滾動
4.活動視窗能夠反顯加亮
5.視窗能夠正確的關閉
6.多個視窗疊加時視窗的名稱正確顯示
7.視窗的資料能夠利用滑鼠、功能鍵、方向前頭和鍵盤操作
8.當視窗被覆蓋並重新呼叫後,視窗能夠正確再生
9.如果使用多工,所有的視窗能夠被實時更新
10.視窗支援最小化和最大化或放大
11.視窗上的控制元件隨著窗體的縮放而縮放
12.父窗體支援縮放時,子窗體也應該支援縮放
13. 一個視窗中按Tab鍵,移動聚焦按順序移動。先從左至右,再從上到下
14.子視窗位置在父視窗的左上角或正中,正上方1/4處為易吸引使用者注意力的位。父視窗或主視窗的中心位置應該在對角線焦點附近,如下圖2-1-2所示
15.當多個子視窗彈出時依次向右下方偏移,並且顯示出視窗標題,如下圖2-1-3所示
16.重要的命令按鈕與使用頻繁的按鈕放在了介面醒目的位置
17.與正在進行的操作無關的按鈕應該加以遮蔽
18.按鈕大小要與介面的大小和空間協調
19.視窗中所包含的標籤左對齊排列
20.多視窗的切換響應時間不宜過長
二、GUI選單的標準
選單是否易用主要體現在它能否提供線索幫助使用者識別,而不用強迫使用者去記憶,一個好的選單設定可以分為以下幾個方面:
1.選單設定符合軟體的需求
2.選單項的措詞準確,能夠表達出所要進行設定的功能
3.選單項的順序合理,具有邏輯關聯的專案集中放置
4.圖形佈局一致
5.選單設定在窗體標題欄的下方
三、GUI圖示的標準
圖示是表示實體資訊簡潔、抽象的符號,它還可以作為可視按鈕項,當被選中啟用時,可以完成指定的功能。那麼圖示的設計當中應該著重考慮哪些問題呢,以下提供幾點可供參考:
1.圖示的設定符合常規的表達習慣
2.不同的目標採用不同的圖示
3.圖示具有清晰的輪廓,輪廓清晰的圖示可保證影像在不同背景色上都具有較好的效果
4.選擇合適的尺寸來定義圖示。Windows XP系統的圖示有四種尺寸(以畫素為單位)可作為參考: 48×48 32×3224×24以及16×16,圖示大小的選取決定於工具欄所定義的寬度
5.圖示的外形與實際功能相似,應儘量避免抽象。這樣的圖示可以使使用者很輕鬆、容易地認識圖示的作用
6.在圖示上加以標註,用來說明圖示所完成的功能
7.圖示放置在選單欄的下方
四、GUI中控制元件的標準
軟體系統功能的實現與控制元件是密不可分的,各控制元件位置的擺放直接影響到軟體的使用,及其美觀程度。下面舉例說明軟體系統中最常用到的控制元件對其元素間距、擺放位置進行說明:
1.控制元件元素的間距
a.單個元素間距
l  輸入框之間垂直間距為5px
l  Label文字標籤和輸入元素之間水平間距為8-22px
l  核取方塊、單選按鈕之間垂直間距為8px
l  多種元素混合垂直排列時,核取方塊和單選按鈕邊上的間距無論在什麼情況下都為8px
b.元素分組間距
l  視窗邊框和內容區域的四周邊距為11px
l  父組和子組之間的四周間距為10px
l  分組框邊框和內部內容區域的四周邊距為5px
l  核取方塊組、單選框組的組水平間距為15px

 

2.按鈕的位置,如下表2-4-1對按鈕擺放位置的規則做了總結
指向物件

物件舉例

按鈕位置

單個物件

輸入框

按鈕僅靠在輸入框的右邊

多個物件

介面元素組

按鈕與最底部的物件左對齊,如果空間允許則僅靠在最底部物件的右邊

視窗區域,頁籤皮膚,分組框

分組框

按鈕位於分組框左下角,並和分組框內其它元素左對齊

表格,網格

表格 按鈕

位於表格下方,並和表格左對齊

 

五、滑鼠在GUI中的標準
使用者會把滑鼠移進、移出視窗,或當游標在視窗,或當游標在視窗中,使用者按下、釋放滑鼠鍵,滑鼠是否準確、靈活,對一個軟體系統來說也很重要。以下幾點標準可作為在軟體系統中滑鼠設計的參考:
1.在整個互動的過程中,可以識別滑鼠操作
2.多次點選滑鼠後,仍能夠正確識別
3.滑鼠有多個按鈕的情況下,能夠正確識別每個按鈕所要完成的功能
4.游標、處理指示器和識別指標隨操作恰當的改變
5.點選選中時,滑鼠指標停留在選中內容上,而不會滑動
6.支援滑鼠滑輪上下翻動操作
7.對於相同種類的元素採用相同的操作啟用
8.採用動態圖示形象的表示出當前的操作,如用水漏表示系統忙,用手型表示可以點選等
9.滑鼠無規則點選時不會產生不良後果
10.單擊滑鼠右鍵彈出快捷選單,取消右鍵後該選單隱藏
11.滑鼠游標樣式統一,儘量使用系統標準,杜絕出現重複的情況
六、GUI文字的標準
文字在視覺上向使用者傳達各種資訊,介面文字包括介面文字的字型和介面文字的用語兩個方面,那這兩方面都有哪些要求呢?以下分別闡述。
1.字型
a.使用統一字型,如規定軟體系統的中文字型為“宋體”,英文及資料採用“Times New Roman”
b.所有控制元件、描述資訊儘量使用大小統一的字型屬性,除了特殊提示資訊、加強顯示等例外情況
2.文字表達
提示資訊、幫助文件文字表達遵循以下準則:
a.口語化描述,用詞客氣多用您、請,不要用或少用專業術語,杜絕錯別字
b.標點符號(斷句、逗號、句號、頓號、分號)的用法要統一, 提示資訊比較多的話要進行分段
c.警告、資訊、錯誤 使用對應的表示方法
d.使用統一的語言描述,例如一個關閉功能按鈕,可以描述為退出、返回、關閉,則應該統一規定
e.根據使用者不同採用相應的詞語語氣語調
七、GUI聯機幫助的標準
幫助文件適用於以下三種情況:
l  系統預設、行業標準的控制元件操作不需要逐一描述,只需要對特殊控制元件加以描述
l  特殊操作、特殊功能介面,在介面上加控制元件直接連線到對應的幫助檔案中
l  特殊設定的詳細資訊,除了應該在介面上用簡潔明瞭的語句說明外,還可以在介面上加控制元件直接連線到對應的幫助檔案中

幫助文件的標準要求:
l  結構化,按功能模組劃分
l  必須闡述功能通過什麼方法可以在軟體中實現
l  措詞恰當、簡捷、通俗易懂,明瞭的幫助使用者解決問題
l  不在幫助文件中做廣告宣傳