Windows桌面應用程序設計指南(控件篇1-氣球狀提示)

手工碼字翻譯供交互學習之用,進度異常緩慢,歡迎小伙伴們批評指正&溝通交流!

氣球狀提示是一個小型的彈出窗口,用以提示用戶出現了非關鍵性的問題,或控件出現非常規狀態。

氣球狀提示示例

標準的氣球狀提示包含一個icon、標題和主體文本,但這些都非必須項。和工具提示及消息提示
不同,氣球狀提示有一個用于指明提示源的小尾巴。這個源通常是一個控件,通常這樣的控件就叫做owner control(源控件)。
盡管合理操作源控件有可能解決出現的問題,氣球狀提示卻只能提示問題,并不能處理問題。如果用戶想響應出現的問題,應該與源控件的界面系統進行交互。
氣球狀提示通常和文本框或包含文本框以承載動態數據的控件,例如combo boxes 組合框、 list views 列表視圖或 tree views 樹狀圖等組合使用。其他種類的控件通常都經過嚴格的限制設計,不需要氣球狀提示的額外反饋來補充信息。就算其他種類的控件交互出現問題,也通常是因為牽涉到多種不同控件之間的沖突,而這種情況下僅靠氣球狀提示也解決不了問題。只有文本輸入類控件,既沒辦法嚴格限制輸入內容,也是常見的單一錯誤源,所以和氣球狀提示能很好搭配。

Notification 通知 是一種特殊的氣球狀提示,由通知區域icon展示


消息欄
notification

何時使用該控件?

思考以下問題,再做決定:

  • 文本信息是否有描述問題或特殊情況?如果不是,請不要使用氣球狀提示。不要用氣球狀提示來展現控件的補充信息。可以考慮使用靜態文字、infotips 信息提示progressive disclosure 漸進展示控件
    或即時提示代替。

  • 在輸入時或者主控件剛剛失去輸入焦點時,問題或特殊情況會即時被檢測到嗎?如果不是,用 task dialog 任務對話框或 message box 消息彈框來展示錯誤信息。

  • 出現的問題是否嚴重?如果是,用任務對話框或消息彈框等能立刻交互以解決問題的形式來展示問題信息。

  • 若出現的是特殊情況,這種特殊情況有特殊意義嗎?是不是用戶在無意中導致的情況?如果符合這兩種情況,可以使用氣球狀提示。如果特殊情況沒什么本質意義,就應該避免出現這種特殊狀態。對用戶有意觸發的特殊情況,則不需要作任何提示。

  • 錯誤或情況能否進行簡明描述?如果不能,請使用其他控件。氣球狀提示不能承載細節闡述和補充信息。

  • 信息是否用于描述正處于焦點懸停狀態下的控件?除非用戶需要與懸停控件的信息交互,否則這種情況應該使用tip提示控件來對懸停控件進行說明。

  • 提示信息和用戶當前行為有關聯嗎?如果沒有,考慮使用 notification 通知或 dialog box 對話框。用戶有忽略掉和當前行為無關的氣球狀提示的傾向,而且氣球狀提示默認狀態下10秒后會消失。

  • 提示信息來源于單一的、確定的源嗎?如果問題或情況是由多個或不確定的源控件引發,用就地展示信息 in-place message對各控件分別提示或用 dialog box 對話框來作說明。

錯誤示例:在這個例子中,問題情況有可能是由用戶名填寫或者密碼填寫錯誤兩種情況引發,但氣球狀提示報錯,從視覺上來看是指出了密碼填寫有問題導致登錄失敗。如果問題出在用戶名輸入有誤,反饋便會產生誤導。

氣球狀提示和 infotips 消息提示, dialog boxes 對話框以及 in-place messages 就地展示信息等控件功用相似。與 tooltips 工具提示和 infotips 消息提示相比較:

  • 氣球狀提示獨立于當前光標焦點展示,所以有一個指明源的小尾巴。
  • 氣球狀提示有標題、正文和一個icon。
  • 氣球狀提示有交互性,但是并沒有一個供點擊的落點。

和 modal dialog boxes 模態對話框相比較:

  • 氣球狀提示不會獲取輸入焦點,也不強制需要交互。
  • 氣球狀提示指示一個單一的、確定的源。模態對話框的信息提示則可以指示多源,或沒有確定的源。

和 in-place messages 就地展示信息相比:

  • 氣球狀提示視覺上更明顯。
  • 氣球狀提示不像就地展示信息一樣,需要在控件內預留空間或使用動態布局來展示內容。
  • 氣球狀提示一定時間后會自動消失。

應用范例

氣球狀提示有這些應用形式:

  • 輸入信息引發的問題:在單一控件中出現的、用戶輸入引發的非關鍵性輸入問題,通常來源于輸入框。
    氣球狀提示不會帶走輸入焦點,在源控件仍可進行輸入操作的時候,提示也非常顯眼。要解決出現的問題,用戶可能要更改或重新輸入內容;但如果源控件忽略了不正確的輸入,用戶就無需更改。因為問題不嚴重,不需附帶錯誤icon標志。
指示非關鍵性輸入問題的氣球狀提示
  • 特殊情況的問題:源控件處于會影響輸入信息的特殊狀態。這種情況可能是用戶無意中引發的,也不知道會影響輸入內容。
    氣球狀提示可以在特殊情況發生之時警告用戶,以避免操作失誤(例如超過最大輸入字符限制或無意中打開了大寫鍵)。此時有必要在不打擾輸入焦點的情況下作提示,不要強迫用戶進行修正操作,因為有可能用戶是有意這樣操作的。對于密碼輸入框和PIN碼輸入的情況來說,氣球狀提示非常必要,不然用戶操作的反饋就極小了。這時的氣球狀提示帶有警告標志。
用于報告特殊情況的氣球狀提示

設計指南

何時展示

  • 在問題或特殊情況出現時立即彈出氣球狀提示,甚至可以多次彈出,不要出現視覺上的延遲。
  1. 如果需要顯示關于單個字符及最大輸入值的提示,需要在用戶開始輸入時立刻提示;
  2. 如果是關于輸入字段類型的提示(包括不能輸入空格等等),要在當源控件失去輸入焦點時顯示氣球狀提示。否則,在用戶正輸入數據時彈出彈框會讓人分心和煩躁(用戶的輸入值很有可能是有效的)。
  • 一次只顯示一個氣球狀提示。一次展示多個氣球狀提示會顯得情況十分嚴重。如果單個事件引發了多個問題,要么在一次提示中說明所有問題,要么只報告最重要的問題。
錯誤示例:不要同時展示多個氣球狀提示

展示時長

  • 當出現以下情況時停止展示:
  1. 問題已解決或特殊情況已不存在。
  2. 針對輸入問題,用戶輸入的是有效值。
  3. 氣球狀提示時效已到。氣球狀提示默認10s后會自行消失,用戶也可以在SPI_MESSAGEDURATION system parameter里自行更改設置。

如何展示

  1. 在源控件的下方展示氣球狀提示。這樣能夠讓用戶看清上下文環境,包括源控件以及標簽。Microsoft Windows會自適應氣球狀提示的位置,讓它們完全展示。錯誤的展示方式是讓氣球狀提示展示在它的源控件上方,notification 提示也是如此。
正確示例
錯誤示例

密碼和PIN碼輸入框

  • 用氣球狀提示表示大寫按鈕已打開, 如下圖示例:
氣球狀提示顯示PIN碼輸入框中大寫按鈕已打開
  • 當用戶的輸入有可能超過最大字長時,給予氣球狀提示。將要超過最大字長的情況在輸入密碼和PIN碼的時候,比一般輸入情形更為不明顯。
示例
  • 當用戶輸入字符類型不符合要求時,給予提示。但是,一般情況下不建議對字符類型進行限制,因為這樣會降低密碼或PIN碼的安全性。為防止信息泄露,氣球狀提示只能提到關于有效密碼和PIN碼的類型描述。
示例

其他類型的文本框

  • 當用戶的輸入快要超過最大字長臨界值時,考慮給于氣球狀提示,對于新手用戶,設置長度恰好合適的文本輸入框,例如需要輸入用戶名或者賬戶名的情況。當輸入超過臨界字長時系統會發出警告聲,但初學用戶有可能無法理解警告聲的指向含義。
快超過字數限制時的氣球狀提示示例

交互效果

  • 當用戶點擊氣球狀提示,它會直接消失。和 notifications 通知不同,氣球狀提示沒有關閉按鈕。

圖標

  • 根據應用場景選擇圖標
  1. 輸入問題: 不用icon。不要使用不符合Windows風格的錯誤指示icon。

  2. 特殊情況: 標準的16*16像素警告icon

    警告

易用性

應用適宜,氣球狀提示就能增加易用性。要做到這一點,氣球狀提示應該:

  • 只在發生的情況和當前用戶行為相關時,展示氣球狀提示。
  • 保持提示文字簡明。這樣有助視力不佳的用戶閱讀,也能使使用屏幕閱讀器的殘障人士不受過多干擾,更方便閱讀理解主要內容。
  • 當問題或特殊情況再次出現時,也要再次彈出氣球狀提示。

文字

標題文字

  • 標題應簡潔準確地總結描述當前情況或問題,要能讓用戶快速方便地理解提示的意圖。
  • 標題可使用文字片段或完整句子,但是不要加句號。
  • 遵守完整句子書寫的大小寫規范。
  • 將字符(英文)限制在48個以內以適應本地化翻譯的布局。標題的最大長度為63個字符,必須能夠擴展至少30%以適應本地化翻譯。

主體文字

  • 用第一句話清楚陳述當前情況或問題,并使用戶感到切實與自己相關。不要重復源控件標題中的信息。如果沒有標題之外的補充信息,這部分可以省略。
  • 第二句話讓用戶了解如何操作能夠解決問題或改變當前狀況。這句里面不需用“請”這樣的禮貌用語,語句規范參見 Style and Tone。第一句話和第二句話之間需要空兩行。
標準氣球狀提示文字示例
  • 如果解決方法很容易理解,就向用戶解釋告知,但情況陳述和解決方法部分重復的冗余要略去。以下情況除外:
  1. 如果解決方法不能簡明表達,或冗余部分很重要不能省去,就略掉解決方法的闡述。
  2. 當沒什么需要用戶做的時候(例如系統自動忽略了不正確字符的輸入),略掉解決方法的闡述。
  • 使用帶句號的完整句子。
  • 使用句法大小寫書寫規范。
  • 將字符(英文)限制在200個以內以適應本地化翻譯。正文的最大長度為225個字符,必須能夠擴展至少30%以適應本地化翻譯的需求。

說明

提到氣球狀提示時:

  • 引用準確的標題文字,包括其大小寫規范。
  • 明確該控件叫做氣球狀提示,不要與 notification 提示和 alert 警告混淆。
  • 盡可能用粗體顯示標題或者用引號包圍標題,防止標題和正文文意混淆引起誤解。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,622評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,716評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,746評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,991評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,706評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,036評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,029評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,203評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,725評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,451評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,677評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,161評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,857評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,266評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,606評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,407評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,643評論 2 380

推薦閱讀更多精彩內容