[版權(quán)聲明]:版權(quán)歸作者Alite所有，轉(zhuǎn)載時(shí)請(qǐng)以超鏈接形式標(biāo)明文章原始出處和作者信息及本聲明
:http://alite.aliued.cn

Balloons(氣球狀提示)

問(wèn)題摘要

氣球狀提示（Balloon）是一個(gè)小型的彈出窗口，用于通知用戶出現(xiàn)非關(guān)鍵性問(wèn)題或控件處于某種特殊情況。

實(shí)例

圖1

• 注: 氣球狀提示由圖標(biāo)、標(biāo)題、正文文本組成，且所有這些部分都是可選的。
• 注: 當(dāng)用戶試圖提交操作的時(shí)候，任何未處理的問(wèn)題都必須由其所有者用戶界面來(lái)處理。
• 注: 氣球狀提示通常與文本框或其他使用文本框來(lái)改變值的控件一起使用，如組合框、列表視圖、樹(shù)形視圖等等。
• 注: 保持控件之間的一致性.當(dāng)發(fā)現(xiàn)不一致性出現(xiàn)時(shí),氣球狀提示不再適用.
• 注: 如果其他類型的控件已經(jīng)進(jìn)行了很好的約束，就不再需要?dú)馇驙钐崾緛?lái)給出額外的反饋。

何時(shí)使用

• 注: 該信息描述的是一個(gè)問(wèn)題或者特殊情況。
• 注: 當(dāng)正在輸入時(shí)或所有者控件失去焦點(diǎn)時(shí),該問(wèn)題或特殊情況能被立即檢測(cè)到。
• 注: 這些問(wèn)題并非很關(guān)鍵。
• 注: 對(duì)于那些特殊情況，本身是合法的，但很可能并不是用戶期望的。
• 注: 該問(wèn)題或特殊情況能用準(zhǔn)確的語(yǔ)言進(jìn)行描述。
• 注: 這些信息描述的并非是鼠標(biāo)當(dāng)前指向的控件。
• 注: 這些信息與用戶當(dāng)前的活動(dòng)相關(guān)。在默認(rèn)情況下，氣球會(huì)在 10 秒后消失。
• 注: 這些信息具有單一、確定的來(lái)源。

輸入發(fā)生之前使用:
1.例如大寫(xiě)鎖定鍵(Caps Lock)開(kāi)啟狀態(tài),密碼框的氣球狀提示(參見(jiàn)圖1)。所有者控件處于某種影響輸入的狀態(tài)，該狀態(tài)可能不是用戶所期望的，但用戶也許沒(méi)有意識(shí)到其輸入所受的影響。當(dāng)出現(xiàn)特殊情況時(shí)（如超過(guò)最大輸入字符數(shù)或大寫(xiě)鎖定被啟用等），在第一時(shí)間使用氣球狀提示進(jìn)行警告可以防止用戶產(chǎn)生挫敗感。它在給出反饋信息的同時(shí)，不改變輸入焦點(diǎn)，不強(qiáng)迫用戶進(jìn)行操作。這一點(diǎn)非常重要，因?yàn)檫@些特殊情況有可能是故意為之的。這些氣球狀提示對(duì)于密碼框尤為重要，因?yàn)橛脩粼诿艽a框中輸入時(shí)只能得到很少的反饋。此類氣球狀提示帶有警告圖標(biāo)。

2.輸入提示:只接受數(shù)字輸入的文本框,最好在輸入前給予提示當(dāng)焦點(diǎn)移動(dòng)到文本框內(nèi)時(shí),出現(xiàn)氣球狀提示(如圖2).

圖2

這里用于報(bào)告非關(guān)鍵性用戶輸入錯(cuò)誤的氣球狀提示。使用氣球狀提示顯示錯(cuò)誤信息不會(huì)改變輸入焦點(diǎn)，即使當(dāng)所有者控件擁有輸入焦點(diǎn)時(shí)，它仍然非常醒目。 為了解決問(wèn)題，用戶可能需要進(jìn)行更改或重新輸入。但如果所有者控件忽略錯(cuò)誤的輸入，用戶也許可以完全不用修改。由于 問(wèn)題并非關(guān)鍵，因此不需要使用錯(cuò)誤圖標(biāo)。

輸入發(fā)生之后使用:
1.當(dāng)用戶試圖超出最大輸入長(zhǎng)度時(shí)彈出氣球狀提示。在下面圖3示例中，氣球狀提示指示用戶正試圖超出最大輸入長(zhǎng)度。

圖3

2.當(dāng)用戶輸入無(wú)效字符時(shí)彈出氣球狀提示。當(dāng)然，最好是沒(méi)有這樣的限制，因?yàn)檫@會(huì)削弱密碼的安全性。為了防止信息泄露，該氣球狀提示應(yīng)當(dāng)只提及那些已寫(xiě)入文檔的關(guān)于有效密碼字符的信息。在下面圖4示例中，氣球狀提示指示密碼只能包含數(shù)字。

圖4

3.對(duì)于關(guān)鍵的、短的文本框，當(dāng)用戶試圖超出最大輸入長(zhǎng)度時(shí)，應(yīng)當(dāng)考慮為新用戶顯示氣球狀提示。在下面圖5示例中，氣球狀提示指示用戶試圖超出最大輸入長(zhǎng)度。

圖5

注:不要將氣球狀提示用作顯示控件的附加信息，而應(yīng)當(dāng)考慮換用靜態(tài)文本（Static Text）、信息提示（Infotip）、漸進(jìn)展開(kāi)控件（Progressive Disclosure）或提示文本（Prompt）。

解決辦法

交互方式:當(dāng)用戶單擊氣球狀提示時(shí)，直接關(guān)閉提示，不要顯示其他任何 UI 或效果。與通知不同，氣球狀提示沒(méi)有關(guān)閉按鈕。如圖6它就不是氣球狀提示。

圖6

但是在阿里旺旺的登陸界面就應(yīng)用了很純正的氣球狀提示,如圖7.

圖7

前面講到的大部分是表單上對(duì)控件Balloons(氣球狀提示)的應(yīng)用,現(xiàn)在舉一個(gè)在評(píng)論上的應(yīng)用,如圖8.

圖8

這里觸發(fā)條件是鼠標(biāo)hover時(shí),觸發(fā)Balloons(氣球狀提示).顯示評(píng)論者的相關(guān)信息.這里的應(yīng)用是信息提示,但卻是應(yīng)用了氣球狀提示的形式.在Amazon的商品評(píng)論里也有類似的提示,不過(guò)它不是氣球狀提示,在那里它承載了更多的交互和文字鏈.如圖9.

圖9

靜下心來(lái)找,發(fā)現(xiàn)電子商務(wù)網(wǎng)站利用控件Balloons(氣球狀提示)的形式的也很多,例如EBAY首頁(yè)的兩塊區(qū)域都有體現(xiàn),如圖10,11.

圖10

圖11

這種形象的提示大量的被應(yīng)用在網(wǎng)頁(yè)界面元素中,也體現(xiàn)了它的靈活與實(shí)用.作為幫助和輔助提示.控件Balloons(氣球狀提示)確實(shí)給我們了很多不錯(cuò)的用戶體驗(yàn).

輔助功能:
? 僅顯示與用戶當(dāng)前活動(dòng)相關(guān)的氣球狀提示。
? 使提示文本盡可能簡(jiǎn)要。這對(duì)于視力不好的用戶來(lái)說(shuō)更容易閱讀，且使得因屏幕閱讀程序的閱讀而產(chǎn)生的打斷減到最小。
? 當(dāng)問(wèn)題或情況再次發(fā)生時(shí)重新顯示氣球狀提示。
文本文案:
? 標(biāo)題使用清晰、平實(shí)、簡(jiǎn)要、確切的語(yǔ)言作為標(biāo)題文本，簡(jiǎn)要概括輸入問(wèn)題或特殊情況。
? 標(biāo)題使用不帶句末標(biāo)點(diǎn)的文本片斷或完整句子。
? 標(biāo)題使用句子大寫(xiě)風(fēng)格。(英文版)
? 標(biāo)題使用不超過(guò) 48 個(gè)字符（英文）以適應(yīng)本地化的需要。
? 正文文本的第一句話應(yīng)當(dāng)以與用戶明確相關(guān)的方式陳述問(wèn)題或情況。
? 正文第二句話應(yīng)陳述用戶如何做才能解決問(wèn)題或恢復(fù)狀態(tài)。
? 正文解釋如何解決問(wèn)題或恢復(fù)狀態(tài)，即使這種解釋顯而易見(jiàn)，但應(yīng)省略問(wèn)題描述與其解決方案之間的重復(fù)。
? 正文使用包含句末標(biāo)點(diǎn)的完整句子。
? 正文使用句子大寫(xiě)樣式。(英文版)
? 正文使用不超過(guò) 200 個(gè)字符（英文）以適應(yīng)本地化的需要。

小結(jié):

總體來(lái)講氣球狀提示,在表單中的應(yīng)用是非常多的,首先它本身可以讓用戶參與交互也可以不參與,并沒(méi)有強(qiáng)制性。顯示時(shí)間可以控制,并且可以設(shè)置處理完錯(cuò)誤后消失,這為它在表單提示方面的靈活性,做了很好的鋪墊。由于它是浮動(dòng)覆蓋在頁(yè)面上的,所以可以節(jié)省一定的空間.也是因?yàn)樗歉?dòng)覆蓋在版面上,提示效果更明顯,更容易引起用戶的注意!雖然文中已經(jīng)把氣球狀提示的每個(gè)狀態(tài)與使用場(chǎng)景做了最詳細(xì)的描述,由于實(shí)例筆者并沒(méi)有找到更多特別有代表性的,使文章的解析效果并不明顯,希望通過(guò)更多對(duì)Balloons(氣球狀提示)有思考和研究的讀者給予更多的實(shí)例資源.謝謝大家的支持,筆者也將繼續(xù)收集更多更好的實(shí)例與UED朋友分享!

原文：http://alite.aliued.cn/archives/837