Windows桌面應用程序設計指南(控件篇19-工具提示和信息提示)

工具提示是一個用于指示沒有文字標簽控件的彈出窗口,如未標記的工具欄控件或命令按鈕等。

工具欄按鈕上的典型工具提示

實踐中工具提示非常有價值,因此引申出了一種與之類似的信息提示控件,它比工具提示包含更多的描述性文字。
一個典型的信息提示

在本篇中,工具提示和信息提示統(tǒng)稱為提示。


提示能夠幫助用戶理解在界面中沒有直接給出描述的未知以及不熟悉的對象。當用戶將鼠標劃過對象時,對象的提示會自動展示,當用戶點擊對象、將鼠標指針從對象上移走、或者顯示時間結束時,提示會自動消失。


何時使用該控件?

思考以下問題再做決定:

  • 信息的展示需要基于指針的hover操作嗎?如果不是,使用其它控件。提示的展示需要基于用戶的交互動作,而不是自動展示。相對應的,氣球狀提示是可以自動展示的(這一點和通知Notifications一樣),因此它們會帶有一個指明源控件的小尾巴。
  • 該控件本身是否帶有文字標簽?如果沒有,提示可以很好地提供文字信息。注意大多數(shù)控件都是有文字標簽的,因此不需要提示控件。工具欄控件以及命令按鈕因為標簽為圖片,所以需要提示控件展示文字標簽。
  • 對象會因為補充性的描述和更進一步的信息展示得到優(yōu)化嗎?如果這樣,使用信息提示。但是補充性的文字對于該控件要執(zhí)行的主要任務不應該是必須的。如果是必備信息,應直接在界面中進行展示,用戶不應該通過探索和尋找才能看到該信息。
  • 用戶需要與提示信息交互嗎?如果是這樣,使用其他控件,例如氣球狀提示(氣球狀提示,用戶點擊即消失)。因為移開鼠標提示就會消失,用戶無法與之進行交互操作。
  • 用戶會有需要打印出補充信息的需求嗎?如果這樣,使用其他控件,例如靜態(tài)評論框。但你仍然可以使用信息提示,告訴用戶如何進行這一操作。
    Word中可供用戶打印的靜態(tài)評論框
  • 提示中的內(nèi)容會讓用戶感覺厭煩和被打擾嗎?如果這樣,考慮使用其它方式或者不要設計任何操作。如果一定要在該情況下使用提示,確保用戶可以關掉它。

只要使用得當,提示可以提高與用戶間的溝通效率。永遠不要用提示來代替好的設計。如果圖片、按鈕或其他表達方式,需要用戶查看其提示才能夠理解,那就是糟糕的設計,需要對其進行修改。

設計思路

提示是一種簡化用戶界面的有效方式。它們以用戶最輕松的方法,提供給用戶需要的信息。提示能夠幫助你更有效率地利用屏幕空間,避免浪費。但是,設計不佳的提示也會令人厭煩、分散用戶注意、毫無幫助、喧賓奪主,甚至妨礙用戶進行操作。下面的設計概念旨在展示好壞設計的不同之處。

可見性

信息提示會在用戶將鼠標hover在某一目標上一段時間后自動展示出來。這種延時顯示機制會讓用戶感覺比較能接受,但是也會降低其可見性。

經(jīng)過一段時間的使用,用戶能領會到一些特定的對象,例如工具欄按鈕、圖標按鈕、開始菜單項目以及通知區(qū)域的圖標等會帶有提示,所以可以默認這些地方的提示是能被用戶看到的。

但是在非常規(guī)區(qū)域的提示則需要用戶花更長的時間去發(fā)現(xiàn)。沒有任何類似熱點或鼠標指針變化的視覺線索能表明某個對象含有提示。更糟糕的是,一些用戶經(jīng)常移動鼠標,特別是當他們在學習瀏覽界面UI的時候。用戶需要通過體驗或嘗試,才能知道對象是否含有提示。

可以通過對對象統(tǒng)一使用提示來提升其可見性,這也增強了其可預見性。如果為某些對象提供了提示,那么也應該為所有用戶可能需要補充信息的類似對象提供這些提示。有時候這樣做是很有挑戰(zhàn)性的,因為必須確保這些建議是有用的,而不是畫蛇添足。

如果提供易于發(fā)現(xiàn)的、始終有效的提示有困難,可以考慮其他設計,比如自解釋的控制標簽或就近補充文本。

適當?shù)男畔?/h3>

適合放在提示中的信息有以下特點:

  • 簡明。提示使用的彈出窗口非常適合短語和句子片段,以及格式化的文本。大塊未格式化的文本難以閱讀和理解。

  • 對用戶有幫助。提示文字必須包含信息,不能太直白描述,或者只是重復屏幕上已經(jīng)顯示的內(nèi)容。

  • 補充的性質(zhì)。因為提示文本并不總是可見的,所以它應該是用戶非必須閱讀的補充信息。重要信息應使用自解釋的控制標簽或就近補充文本展示。

  • 靜態(tài)穩(wěn)定。用戶不希望提示經(jīng)常改變,所以他們不太可能注意到動態(tài)內(nèi)容的變化,比如狀態(tài)信息。通知區(qū)域圖標提示是一個明顯的例外: 用戶更有可能在那里發(fā)現(xiàn)提示信息的變化,因為這些圖標主要就是用來表明狀態(tài)的。

合適的消失時間

適當?shù)淖詣语@示和消除提示對于用戶保持其對UI環(huán)境的控制至關重要。提示有三個超時值:

  • 初始時間。鼠標指針必須保持靜止以使提示出現(xiàn)的時間。默認時間為0.5秒。
  • 再現(xiàn)時間。當鼠標指針從一個目標移動到另一個目標時,其必須保持靜止的時間。默認時間為0.1秒。
  • 消失時間。提示自動消失的時間。默認時間為5秒。

太短的初始值和重現(xiàn)值會導致一種惱人的、破壞性的體驗,因為它們的出現(xiàn)是不期而至的;而太長的反應時間又會導致提示沒有反饋或者無法被用戶發(fā)現(xiàn)。默認的提示消失時間適用于短文本提示,例如工具提示中使用的文字信息。信息提示如果有更長的文本,則需要更長的顯示時間。

合適的放置位置

提示應該放置在鼠標懸停的對象附近,盡量將其放在指針的尾巴或頭部。然而,它們絕不應該遮擋用戶正在關注的對象,這樣會干擾用戶將要進行的操作進程。為了防止這種情況發(fā)生,可能需要將提示從指針移開,但是要靠近對象。只要對象和它的提示之間的關系明確,就沒有問題。確保用戶不會僅僅為了看到對象的提示而移動指針。

可達性

提示對可達性有非同尋常的影響。將指針懸停在對象上通常會觸發(fā)這些提示,對于具有鍵盤訪問權限的控件,屏幕閱讀器會處理這些提示。當適當?shù)厥褂煤啙?、有用、靜態(tài)、補充性的信息時,提示可以提高整體的可訪問性。事實上,替代文本提示模式是使圖形可訪問的首選方式。然而,如果使用不當,它們會使重要或動態(tài)信息更難獲取,從而影響可達性。

如果某個控件的提示不具有鍵盤訪問權限,則提供多種訪問該控件的方法。

該例中,用戶可以點擊按鈕(鍵盤無法實現(xiàn)該操作)或使用快捷鍵進行打印操作

只需記住一件事
在適當?shù)臅r間,適當?shù)奈恢谜故竞啙?、有用、靜態(tài)的補充性信息。

應用范例

提示有以下幾種應用范例:

工具提示:顯示未標記的控件或標志符號的標簽文字信息。因為這些提示充當標簽,所以它們的文本遵循源控件的標簽顯示指南。

充當命令標簽的工具提示

為圖標按鈕提供標簽的工具提示

為圖標按鈕提供標簽的工具提示
為標志符號提供標簽的工具提示

信息提示:為對象或控件提供補充性的解釋或描述。這一用法常見于工具欄控件、圖標(包括疊層圖標)、鏈接、標簽、漸進展示控件和自定義控件等。


示例

替代文本信息提示:對圖形進行描述以提高可達性。該模式主要適用于那些有視力障礙的用戶,并且可以使用屏幕閱讀器。

該例中,信息提示描述了開始菜單圖標

縮略圖信息提示:展示項目的縮略圖??s略圖使得窗口或文件能夠被輕松識別。

任務欄中的項目縮略圖提示
相冊中的縮略圖提示

細節(jié)信息提示:展示項目的細節(jié)信息。這是種展示項目細節(jié)和數(shù)據(jù)的有效方式。

示例

開始菜單信息提示:描述開始菜單中的項目。開始菜單由程序名和重要的功能窗口(如文檔、圖片和控制面板)組成。信息提示通常通過給出程序或目標項目的簡短描述,以及用戶可以用它執(zhí)行的主要任務,描述開始菜單項。這些描述也能被開始菜單搜索框索引,進一步幫助用戶找到他們需要的程序。

該例中的信息提示描述了開始菜單中項目的功能

控制面板信息提示:描述控制面板的類別或任務。這里的提示能提供補充信息,幫助用戶選擇正確的控制面板類別和項目。

該例中,信息提示描述了用戶賬戶面板的性質(zhì)內(nèi)容

全稱信息提示:在名稱被縮略或不能完整顯示時,信息提示用于展示項目的全名。這種提示能讓設計者在更緊湊的空間中顯示項目,同時減少了水平滾動。這在內(nèi)容長度未知時尤其重要,因為它是動態(tài)的。與其他模式不同,在列表和樹型結構中使用時,這些提示直接顯示在源對象上。

該例中,鼠標hover時信息提示展示項目全名

狀態(tài)信息提示:展示通知欄圖標的狀態(tài)信息。通常情況下,提示應該是靜態(tài)的,因為用戶不希望它們常常變動。通知區(qū)域圖標是一個例外,因為這些圖標就是用來顯示狀態(tài)的,并且沒有其他屏幕空間可用于狀態(tài)的文本描述展示。

通知欄圖標的狀態(tài)信息提示

設計指南

消失時間

  • 除以下特殊情況,請使用默認的出現(xiàn)時間和消失時間:
    不冗余且顯示在相關對象一側的縮略圖提示可以立即顯示(無任何時間延遲)。對于沒必要展示的縮略圖(例如小圖形對象的放大縮略圖)或覆蓋源對象的縮略圖,使用默認的縮略圖展示和消失時間。

  • 對于工具提示,使用默認的5秒后消失。

  • 對于消息提示,關閉消息提示超時設置。針對開發(fā)人員的建議:如果不能在技術上關閉超時消失,那么把它設定為最大值。

  • 為了保證可訪問性,如果超時值設置需要超過最大值,請將它們設置為 spi _ getmousefortime 和 spi _ getessageduration 系統(tǒng)參數(shù)的倍數(shù),而不是固定的時間值。這樣做可以根據(jù)用戶的速度調(diào)整超時。

出現(xiàn)位置

  • 避免遮擋用戶想要看到以及交互的對象。就算需要將提示和鼠標焦點分開,也要將提示放置在對象的旁邊。只要對象以及它的提示之間的關系看起來很明確,有一些距離上的間隔也是可以的。
    例外情況:在列表和樹狀視圖中使用的全稱工具提示。
    錯誤示例

    正確示例:提示放在輸入框的一側,盡管其與輸入光標之間有一定距離

    錯誤示例

    正確示例:因為下方文字比提示上的文字更重要,所以提示被遠遠地放在了另一邊以避免遮擋
  • 對于一系列項目的集合,避免遮擋用戶可能查看或交互的其他對象。水平排列的項目,不要在右方放置提示;垂直排列的項目,不要在下方放置提示。
    錯誤示例

    正確示例
  • 對于可能分散用戶注意力的提示(通常這些提示尺寸很大),確保它們對大多數(shù)用戶有幫助。如果不是,要么讓它們選擇性展示,要么直接去除。不然大多數(shù)用戶不得不將指針移開目標對象,以消除提示的遮擋。

工具提示

  • 使用工具提示為不含標簽的對象提供標簽文字。一般工具欄的圖標、圖像按鈕以及漸進式展示控件會包含工具提示。含有文字提示的控件,例如文本框和組合框等,會被認為是含有文字標簽的。其他所有的控件都應該含有明確的標簽文字。

  • 使用不含標點符號的句式短語。

  • 使用句式大小寫規(guī)則。

  • 對于需要進一步操作的功能項,在提示文字結尾加上省略號。

  • 相對于一般的標簽文字,工具提示文字更為簡潔,一般在五個字以內(nèi),簡潔的同時保證明確、無歧義。

    可接受示例

    優(yōu)化示例

    最佳示例

    錯誤示例

  • 如有必要,工具提示也可以為有標簽的工具欄按鈕提供更詳細的細節(jié)說明。不要重復或是單純用文字重新解釋標簽文字。

    正確示例

    錯誤示例

  • 但也不用為了保持一致性,為所有帶標簽的控件加上工具提示。

    示例:沒標簽的工具欄按鈕有工具提示,有標簽的則沒有工具提示

  • 如果可以,盡量通過展示鍵盤快捷鍵和默認值的方式,提升工具提示的效用。把這些附加信息放在括號中。這樣即使單純重復標簽文字,工具提示也是有用的。但在評估工具提示的簡潔性時,不要考慮該附加文本。

    展示默認值和鍵盤快捷鍵的工具欄按鈕工具提示

信息提示

  • 對于非常規(guī)位置的工具提示,為了提升可見性,相比于提示的有效性、要更看重展現(xiàn)的一致性。即使一些對象的含義很明顯,也要為所有對象提供有可能需要補充信息的提示。這樣能避免讓用戶等待不會出現(xiàn)的信息提示。
    特例:如果只有少數(shù)對象的信息提示有意義,那么就徹底不要使用信息提示。使用能自解釋的控件標簽或就近補充文本。

  • 使用帶有結束符號的完整句式結構。
    特例:通知欄的圖標信息提示不要含有結尾標點符號

  • 使用句式大小寫規(guī)則。

  • 使用現(xiàn)在時態(tài)、而非將來時態(tài)描述。

  • 使用相同的語法結構組織句子,這要求具有相同功能的詞和短語具有相同的形式。
    特例:對于全稱信息提示,它們的信息提示實際上需要匹配的是源控件的措辭、大寫和標點符號規(guī)則。

  • 避免使用尺寸過大的信息提示。這樣的信息提示很難閱讀,也很難在不干擾源控件的情況下定位。

  • 信息提示內(nèi)容的排版要讓用戶方便閱讀和瀏覽。大塊未格式化的文本是很難閱讀的。

    錯誤示例

    正確示例

  • 第一次出現(xiàn)的信息提示,先寫出縮略詞的全稱,然后在括號中附上首字母縮寫。例如:Dynamic Host Configuration Protocol (DHCP)。


開始菜單信息提示

  • 使用開始菜單信息提示簡潔地描述項目,并列出用戶能使用項目執(zhí)行的主要任務。
  • 切實幫助到用戶。關注用戶目標。不要只是重復項目名稱,甚至在描述中照搬使用。
  • 描述盡量具體。避免使用通用動詞和諸如“其他任務”之類的籠統(tǒng)短語。如果信息很重要,請清晰陳述;否則,假設用戶能理解信息提示中并不會列出所有內(nèi)容。
  • 簡明扼要。不要超過25個字。太長的信息提示不利于閱讀。
  • 用現(xiàn)在時、祈使動詞開頭,例如創(chuàng)建、編輯、顯示和發(fā)送。盡量使用特定的動詞,而不是通用動詞,例如管理和打開,這些動詞實際上適用于大多數(shù)開始菜單項。直截了當?shù)攸c出要點。
    錯誤示例

    優(yōu)化示例
  • 不要使用有營銷感的文字描述。
    錯誤示例
  • 因為這些信息提示會被開始菜單搜索框索引,用用戶最有可能搜索的術語描述程序的重要任務。考慮使用關鍵詞和常見的同義詞。

    錯誤示例

    正確示例

  • 使用句式大小寫規(guī)則。

快速啟動工具提示

  • 工具提示使用的格式為:啟動(完整程序名)

  • 不要使用結尾標點符號。

  • 不要使用附加文本來描述程序或它做什么。因為用戶是在快速啟動欄中選擇的程序,他們已經(jīng)知道自己的目的。

控制面板信息提示

  • 使用控制面板信息提示簡明地描述控制面板任務以及所配置的硬件和軟件。
  • 控制面板名稱和圖標必須有信息提示。單個任務沒有工具提示。
  • 信息提示要能產(chǎn)生幫助。關注于用戶能做什么。不要只是重復控制面板的項目名稱,甚至在描述中重復使用。

  • 描述盡量具體。避免使用通用動詞和短語,比如“其他硬件”。如果這些信息很重要,那就特別列出來; 否則,假設用戶理解并不是所有的信息都列在這些信息提示中。

    錯誤提示

    正確提示

  • 保持簡潔。使用25個以內(nèi)的單詞描述。過長的信息提示不利于閱讀。

  • 以現(xiàn)在時、祈使動詞開始句子。

  • 直奔主題。不要使用適用于任何控制面板選項的語言,例如“用于查看和配置您的... 外觀和功能的設置”或“為您提供... 的選項”。

  • 不要使用營銷措辭語氣。


  • 因為這些信息提示會被控制面板搜索框索引,所以請使用用戶最有可能搜索的術語來描述項目。考慮使用大眾使用的常用任務和對象的同義詞。

  • 如果控制面板中的項目容易被混淆,使用信息提示解釋它們的獨特與不同之處。

錯誤示例

正確示例

圖標

和之前版本的Windows不同,Windows Vista允許提示帶有圖標。

  • 對于工具提示,不能使用圖標。

  • 對于信息提示,只在圖標有助于用戶識別、理解或提供內(nèi)容的情況下使用它。大多數(shù)信息提示是不需要使用圖標的。


    該例中,信息提示的圖標幫助解釋了項目的含義
  • 圖標必須使用aero風格,并且外觀不過于突出。

說明

在提到提示時:

  • 在編程和其他技術文檔中,請說明提示的類型(工具提示或信息提示)。在其他任何地方,簡單地稱之為提示。

  • 以下書寫形式是不正確的: tool tip, Tooltip, &ToolTip。

  • 要描述用戶交互,可以使用hover。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容