交互設計實例:淺析windows系統對話框規范 

 

 

http://www.inspirr.com 
 

 


 

 

 

 

“對話框”是讓用戶執行命令、向用戶提問、向用戶提供信息或進度反饋的輔助窗口。對話框由標題欄(用于標識對話框所來自的命令、特性或程序)、主標題說明(以解釋用戶在該對話框中的目標)、一些位于內容區域的控件(用于呈現選項)及提交按鈕(以指出用戶如何能夠提交任務)組成。典型的對話框形式如下圖1所示:

(圖1)

在Windows操作系統中運行的軟件應該遵照Windows UX規范。但目前主流的很多客戶端軟件并未完全遵照Windows UX規范,并且發展出了較多新的表現形式(也就意味著不符合Windows規范),也漸漸被人們所接受。盡管Windows UX規范并非評價對話框優劣的標準,但一些違反Windows UX規范的對話框的形式也勢必會給交互體驗上造成一定不良影響。以下將基于Windows UX規范針對客戶端軟件對話框進行解析。

1、標題

標題是用來表示對話框所來自的命令、特性或程序。通常以名詞形式出現。命令形式以冠以“確認”“提示”的用法最為常見,其具有明確的任務導向,如圖2,圖3所示。特性主要是指類似于“設置”“屬性”等作為標題。以程序名稱作為標題形式,表示了對話框的出處,如圖4所示。在標題形式中,并不提倡簡單地使用“提示”作為標題。如圖5所示。

 

(圖2)

 

(圖3)

 

 

(圖4)

 

(圖5)

2、主標題說明

主標題說明文本應使用顯著的主標題說明來簡要解釋對話框需要做的事情。說明應當是明確的陳述句、祈使句式的指導,或是疑問句。文本應頂格左對齊,在有圖標的情況下,以圖標左對齊。如圖6所示。主標題說明文本是陳述句的話,在末尾使用句號。如果說明文本是問句的話,則需要在末尾添加問號。對于進度對話框,應當使用動名詞短語來簡要地說明正在進行的操作,并以省略號結尾。例如:“正在打印圖片…”。必要時,可以使用補充說明來提供額外的有助于理解或使用對話框的信息。補充說明用于詳細解釋主標題說明,而不是簡單地換個說法(如圖7所示)。如果主標題說明只會導致重復或者在上下文中顯而易見的話,則不要硬是加上主標題說明。

順帶提一下,對于主標題說明中的人稱問題,使用“您”為尊稱,表達了軟件作為工具的謙遜。也有人從平等的角度來將人稱命為“你”亦可。

 

(圖6)

(圖7)

3、圖標

對話框上的圖標可分為兩種,一種是程序、特性、對象圖標。還有一種是標準圖標。程序、特性、對象圖標能幫助用戶從視覺上認出程序的功能,或者是幫助用戶識別問題中的對象,使用圖標也能使功能具備自描述性。如下圖8所示。

 

 

(圖8)

標準圖標有如下四種,錯誤圖標、警告圖標、信息圖標和幫助圖標,其說明和使用場景見圖9。只有關鍵錯誤和警告才能使用錯誤圖標和警告圖標,用戶需要一目了然地辨別信息的性質以及他們響應的后果,因此我們必須區分關鍵和非關鍵錯誤和警告。

關鍵錯誤和警告具有下列特征:(1)丟失重要的資料,如財務或其他數據。(2)無法訪問系統或系統受損。(3)泄露隱私或失去機密信息的控制。(4)用戶時間(大量時間,例如30 秒或是更多等)。(5)其后果不可預料。(6)需要立即采取正確措施,因為問題無法被輕易修復,而且很可能無法恢復。

對于錯誤圖標和警告圖標的區分使用主要界定點為錯誤是否已經發生,對發生的錯誤或問題使用錯誤圖標,對在未來可能引發問題的情形使用警告圖標。

 

(圖9)

常見的圖標錯誤使用有如下幾種情況:

1)濫用錯誤圖標和警告圖標

對已經造成的錯誤應該使用錯誤圖標。不嚴重的提示信息,應不使用警告圖標。圖10左右兩圖分別皆為警告圖標錯誤使用。圖11為錯誤圖標使用錯誤。

 

(圖10)

 

(圖11)

2)濫用信息圖標和幫助圖標

信息圖標并不在對話框中使用。幫助圖標往往被作為疑問圖標來用。對于用戶來講在對話框中將問號作為幫助圖標來用并不常見,相反用問號來表示疑問卻深得人心,也廣受中國軟件人的喜愛,包括微軟的Office軟件也這么使用。已經無法劃清其對錯的界限。

 

(圖12)

3)非標準圖標的使用

非標準圖標的使用,這種情況下不能說它錯。只能說是圖標發展的一種多元化。大家都認可的圖標所表達的含義,并且圖標能很好的傳達意思。這兩點的具備已經足夠說明這個圖標的可存在性。如圖13所示。

 

(圖13)

4、提交按鈕

常見的提交按鈕的使用情況如下圖14所示。

 

(圖14)

規則并不一一羅列,選取關鍵的幾條:

1),提交按鈕向右對齊排成一行,置于對話框底部。應當以下列順序呈現提交按鈕:確定/[做某事]/是 、[不做某事]/否 、取消 、應用(如果有的話)、幫助(如果有的話)

2),對于主標題文本內容為“您確定要……嗎”的句式的問題對話框,可使用“確定”“取消”組合,亦可以直接使用“是”“否”組合。但不要使用“確定”和“取消”來回答是否判斷問題。除了上述情況外,“確定”“取消”組合時,“確定”的含義等同于“提交”,并且可更換為“提交”、“打開”等。如圖15為錯誤例子。

 

(圖15)

3),不要為錯誤或警告信息使用“確定”按鈕,應當改用“關閉”。如圖16所示,出了問題一點也不 OK。應當改用“關閉”。

 

(圖16)

同時若只是一些信息的呈現,也應該使用“關閉”,而不是“確定”。圖17為Microsoft Office Word中的對話框,其使用了“確定”。然而特別是在中文語境中“確定”與“OK”的差異還是很大的,用“確定”表示“哦,我明白了”似乎也么有覺得不妥的地方。

 

(圖17)

4),關于提交按鈕焦點。由用戶啟動的對話框在顯示時應當始終具有輸入焦點。由程序啟動的對話框則不應具有輸入焦點,因為用戶可能正在操作其他窗口,這種因對話框誤導的操作可能會產生非預期的結果。同時將起始輸入焦點賦予用戶最有可能首先操作的控件。 這往往是(但并不總是)第一個交互控件。

5),在這里特別要提一下的是間接對話框的提交按鈕。間接對話框是脫離上下文出現的,要么是某任務的間接結果,要么是系統或后臺進程出現了問題而導致的。對于間接對話框來說,“取消”按鈕存在歧義,因為它既可以表示取消該對話框,也可以表示取消整個任務。

如果用戶需要將取消對話框和取消任務兩個命令分開,應當提供取消按鈕,將“取消對話框”的按鈕標注為主標題說明的否定回答,將“取消整個任務”的按鈕標注為“取消”,如圖18例。在該圖中,是用戶點擊關閉時出現的對話框,該對話框即為間接對話框,是一個與關閉沒有直接聯系的對話框。“不保存”的含義是關閉畫圖不保存。“取消”的含義是取消整個任務,即取消關閉。

如果用戶只是需要取消對話框而非整個任務的話,應當使用明確針對主標題說明的否定回答按鈕,并不需要“取消”。如圖19例。該對話框是在安裝程序時系統自動彈出的對話框,此時放置“取消”按鈕的話其功能與“don’t run”重合。

這兩者之間的差別關鍵點在于是否需要將取消對話框和取消任務兩個命令分開。一個是用戶自主觸發的,一個是系統響應的。

 

(圖18)

 

(圖19)

在對話框的使用中,我們鼓勵對話框窗體使用系統自帶模式,其在各系統上的自適應性可減少界面UI定制所帶來的復雜。

話說回來,不論遵循Windows UX規范也好,不遵循也罷,符合用戶習慣并具有良好的交互體驗才是判斷對話框優劣的最佳標準。

更多內容參見http://www.uxguide.net/wiki/windows:Windows/dialog-boxes#.E6.8F.90.E4.BA.A4.E6.8C.89.E9.92.AE

上文僅為個人理解,有不妥之處,還請大家不吝指教。

感謝enno、喵喵對本文的貢獻!

 

 

   

 

  Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |

arrow
arrow

    beangte 發表在 痞客邦 留言(0) 人氣()