中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語(yǔ)：彈窗，不只是“彈出式廣告”，它是一把雙刃劍，用得好能使用戶更加聚焦，用得不好則可能使用戶不快甚至擊退潛在用戶。那么，彈窗要怎么設(shè)計(jì)呢？本文作者對(duì)彈窗進(jìn)行了詳細(xì)的分析，一起來(lái)看一下吧。

說到彈窗，很多人對(duì)彈窗的印象還停留在“彈出式廣告”: 網(wǎng)站為了獲利，廣告商為了增加點(diǎn)擊率，那時(shí)候的廣告就像槍林彈雨，用戶無(wú)處可躲，進(jìn)而惱羞成怒，甚至想要砸掉電腦。

廣告彈窗曾經(jīng)在2010年被《時(shí)代》雜志評(píng)為最糟糕的發(fā)明之一。

我們?nèi)缃裨偈煜げ贿^的淘寶曾經(jīng)為在電商領(lǐng)域存活下來(lái)，也不得已使用大量的“流氓廣告”，雖然這的確使得用戶惱怒，但是不得不說，淘寶也因此刷臉頻繁而讓大家更熟悉它。

彈窗是一把雙刃劍，用的好確實(shí)使用戶更加聚焦，而如果使用的不恰當(dāng)，可能會(huì)使用戶不快甚至擊退潛在用戶。在設(shè)計(jì)彈窗時(shí)，你有沒有遇到過下面的困惑？

• 該在什么時(shí)候選擇用彈窗，什么時(shí)候用頁(yè)面呢?
• 彈窗的標(biāo)題怎么起?
• 彈窗疊彈窗最多可以疊幾個(gè)?

可以說，彈窗設(shè)計(jì)的好不好，可以極大的體現(xiàn)一個(gè)設(shè)計(jì)師的基本功扎不扎實(shí)，別看一個(gè)小小的彈窗設(shè)計(jì)起來(lái)似乎非常容易，但面對(duì)不同的用戶場(chǎng)景、業(yè)務(wù)背景，彈窗背后的思考從未停止，今天就讓我們?nèi)轿坏亓私鈴棿啊?/p>

01 彈窗的定義

在正式認(rèn)識(shí)彈窗前，我們不妨設(shè)想以下的場(chǎng)景: 你正在家中做事情，但是這個(gè)時(shí)候電話鈴響了， 你不得不放下手中的事情去接電話， 但是假如在智能家居環(huán)境中，你可以通過人工智能自動(dòng)接電話，同時(shí)你手中的事情仍然在繼續(xù)中。

如果說把前者比喻成跳轉(zhuǎn)的頁(yè)面，那么后者就是彈窗，它能夠在吸引你當(dāng)下注意力的同時(shí)，不離開當(dāng)前的場(chǎng)景。

目前設(shè)計(jì)界對(duì)于彈窗的定義多種多樣， 從外觀布局上看，彈窗是頁(yè)面上層彈出的容器，容器中承載著文本、按鈕、選項(xiàng)、標(biāo)簽或表單等組合內(nèi)容；從設(shè)計(jì)目的上看，彈窗是用戶與產(chǎn)品間對(duì)話的一種方式，是對(duì)用戶注意力的一種引導(dǎo)形式，根據(jù)抓取用戶注意力的多少，可具體定義為Dialogue、Actionbar、Popover、Toast、Snackbar等等特定形式。

從廣義上講，彈窗其實(shí)并沒有如它的定義那樣框的那么死，有時(shí)候彈窗不一定有容器，比如追劇時(shí)常見的彈幕，也是一種新型彈窗； 再比方說新手引導(dǎo)，也是一種彈窗。不過，咱們?cè)谶@里談?wù)摰倪€是狹義上的大家在規(guī)范中所常見的彈窗，那些非典型的彈窗就不在今天討論的范圍之內(nèi)。

02 彈窗的組成

彈窗的基本組成可以拆解為：

• 遮罩
• 彈窗主體(容器、標(biāo)題、內(nèi)容、動(dòng)作按鈕)
• 關(guān)閉入口(不必要/模態(tài)彈窗沒有)

1. 遮罩

為了使用戶更聚焦于彈窗，我們會(huì)在彈窗容器下方頁(yè)面上方加一層遮罩， 通常這種遮罩是半透明黑色，如果遮罩顏色越深，用戶越能夠?qū)Ｗ⒂诋?dāng)前頁(yè)面； 遮罩顏色越淺，用戶的跳出感越小，產(chǎn)品也更親民。

當(dāng)頁(yè)面中出現(xiàn)多個(gè)彈窗時(shí)，也就意味著多個(gè)遮罩層，這個(gè)時(shí)候遮罩層的顏色該怎么確定呢?

根據(jù)各大規(guī)范，彈窗疊彈窗不建議超過三個(gè)，當(dāng)彈窗大于等于3個(gè)時(shí)，遮罩的顏色就不再改變。這里再補(bǔ)充一點(diǎn)， 當(dāng)彈窗數(shù)量過多，一個(gè)疊一個(gè)，用戶容易迷失放向，這時(shí)候可以采用位置錯(cuò)層的方法。

2. 彈窗主體

彈窗主體可以拆解為標(biāo)題、內(nèi)容、動(dòng)作按鈕。

彈窗的標(biāo)題和內(nèi)容的書寫規(guī)則，在后文中有詳細(xì)描述，這里不再贅述。

彈窗的動(dòng)作按鈕一般不超過3個(gè):

1個(gè)按鈕: 那一定是可以關(guān)閉彈窗的操作，比如信息公告類的彈窗的“我知道了”。

2個(gè)按鈕: 這是最常見的情況。一個(gè)是推進(jìn)任務(wù)進(jìn)程的動(dòng)作，一個(gè)是取消。

3個(gè)按鈕:這種情況比較少見，比如“了解更多”，但這會(huì)讓用戶離開彈窗，導(dǎo)致彈窗任務(wù)未完成，所以不推薦使用。 如果有更多內(nèi)容需要向用戶展示，可以內(nèi)嵌一個(gè)信息擴(kuò)展，點(diǎn)擊圖標(biāo)在彈窗下方展示更多信息，這樣了解更多信息的同時(shí)，也不用離開彈窗。

至于彈窗按鈕的位置擺放，有兩種常見的擺放規(guī)則:等分居中擺放和某一側(cè)擺放(右側(cè)居多)，不同平臺(tái)有不同的擺法，接下來(lái)舉例說明:

1）Material design中右對(duì)齊

2）IOS中等分居中擺放

3）在Fiori規(guī)范中，手機(jī)端的按鈕是等分居中擺放，但是在電腦端采用右對(duì)齊

3. 彈窗的關(guān)閉入口

對(duì)于模態(tài)和非模態(tài)的關(guān)閉方式，從根本上說是很不同的。

對(duì)于模態(tài)彈窗，它的關(guān)閉方式只有做出選項(xiàng)選擇后彈窗才會(huì)消失， 包括“取消”選項(xiàng)。 而非模態(tài)彈窗的關(guān)閉方式就很多了，總結(jié)下來(lái)有四種方式:

1)關(guān)閉按鈕(叉叉)

通常是位于右上角，少數(shù)規(guī)范把關(guān)閉按鈕放在左上角，只要保持一致即可。

2)取消按鈕

通常和“確認(rèn)”或者其他推進(jìn)任務(wù)完成的動(dòng)作按鈕放在一起，成對(duì)出現(xiàn)。

3)ESC鍵

敲擊ESC鍵，也可以退出非模態(tài)彈窗。 Esc鍵是英文單詞escape的縮寫， 在1960年由IBM的一位程序員創(chuàng)建，它的功能是“撤銷”、“退出”。

盡管如今使用鼠標(biāo)進(jìn)行交互的人占絕大多數(shù)，但是出于無(wú)障礙設(shè)計(jì)(包容性設(shè)計(jì))的需要， 通過鍵盤完成交互是必不可少的，所以ESC按鈕也是必需的。

而且這類快捷鍵上的優(yōu)化能夠大大提升用戶使用效率，減輕用戶的操作成本。

尤其在B端產(chǎn)品中，調(diào)用鍵盤進(jìn)行操作優(yōu)化，是一個(gè)不可忽視的用戶爽點(diǎn)。

4)點(diǎn)擊遮罩區(qū)域

遮罩區(qū)域就是彈窗背后的內(nèi)容區(qū)，通常為了使用戶更聚焦會(huì)加上一層暗色遮罩，當(dāng)用戶點(diǎn)擊遮罩區(qū)域后，非模態(tài)彈窗會(huì)自動(dòng)消失，不過為了避免用戶誤觸，如果彈窗是表單等需要用戶輸入的內(nèi)容時(shí)，這些內(nèi)容要自動(dòng)保存。

對(duì)于“取消”和“關(guān)閉”按鈕，這里想要再闡述更清楚一些:先舉個(gè)生活中常見的例子，假設(shè)你有一個(gè)愛問十萬(wàn)個(gè)為什么的小孩，你正在津津有味地追劇，結(jié)果他跑過來(lái)問你問題，他還沒張口呢，你就捂住耳朵不聽不聽，這個(gè)呢就相當(dāng)于彈窗右上角的關(guān)閉按鈕(叉叉)，不過關(guān)閉按鈕僅僅存在于非模態(tài)彈窗中，用戶可以不做任何選擇地關(guān)掉彈窗，而模態(tài)彈窗要求用戶必須做出某種選擇，不給用戶逃避的機(jī)會(huì)，所以模態(tài)彈窗是沒有關(guān)閉按鈕的。

然后小孩問你是雞生蛋還是蛋生雞，你聽了這個(gè)問題也不知道怎么解釋，只能和小孩說，這個(gè)問題我也不知道怎么回答，這個(gè)就相當(dāng)于彈窗的“取消”按鈕。

雖然“取消”按鈕和關(guān)閉按鈕(叉叉)最終都會(huì)導(dǎo)致彈窗關(guān)閉，但是從邏輯上而言，是不同的。

03 彈窗的類型

1. 模態(tài)&amp；非模態(tài)

彈窗可以分為模態(tài)彈窗和非模態(tài)彈窗兩種類型， 這兩個(gè)概念來(lái)源于開發(fā)人員的術(shù)語(yǔ)。

當(dāng)打開一個(gè)模態(tài)彈窗后，它所屬頁(yè)面的進(jìn)程被打斷了，必須等用戶處理完畢模態(tài)彈窗后，才能夠回到剛才正在進(jìn)行的頁(yè)面。

舉個(gè)例子，你準(zhǔn)備刪除一個(gè)重要的文件，系統(tǒng)彈出一個(gè)彈窗，問你確認(rèn)要?jiǎng)h除嗎?這個(gè)你時(shí)候你必須下一個(gè)明確的指令，選擇刪除或者不刪除，然后你才可以離開當(dāng)前界面，我們可以簡(jiǎn)單的把模態(tài)彈窗理解為用戶不得不做的選擇。

再來(lái)看非模態(tài)彈窗，非模態(tài)彈窗允許用戶在不打斷當(dāng)前頁(yè)面的同時(shí)，去處理其他任務(wù)，舉個(gè)例子，設(shè)計(jì)師們最熟悉不過的PS，你可以同時(shí)調(diào)用多個(gè)彈窗去更改畫面參數(shù)，因?yàn)樗囆g(shù)創(chuàng)作是一個(gè)多線過程，藝術(shù)家可以想到什么參數(shù)就改變什么參數(shù)。

模態(tài)和非模態(tài)只是一個(gè)比較概括性的概念，而且不同的規(guī)范里可能對(duì)相似的某一類彈窗的稱呼完全不同或者有輕微差異，接下來(lái)我分別根據(jù) Microsoft-Fluent UI、Google- Material Design、IOS 規(guī)范中拿出一些比較有代表性的彈窗類型詳細(xì)講一講。

2. 典型彈窗

1）Actionsheet

類型: 模態(tài)彈窗

參考規(guī)范: IOS Design

簡(jiǎn)介: Action sheet一次展示和當(dāng)前語(yǔ)境相關(guān)的兩個(gè)或者更多的動(dòng)作，非必要不要展示太多的動(dòng)作選項(xiàng)，以及避免在動(dòng)作列表中使用滾動(dòng)條。

關(guān)鍵點(diǎn):

• 動(dòng)作按鈕: 把危險(xiǎn)性選擇 (如清空、刪除)放在最上面， 把取消按鈕置于底部。
• 避免使用太多動(dòng)作按鈕讓Action Sheet列表產(chǎn)生滾動(dòng)條。
• 毀滅性操作需要在視覺上突出。

2）Modal

類型: 模態(tài)彈窗

參考規(guī)范: Microsoft-fluent UI

簡(jiǎn)介: Modals也是一種模態(tài)彈窗，它需要人們把注意力從當(dāng)前頁(yè)面短暫轉(zhuǎn)移到彈窗上，并且需要用戶的交互動(dòng)作。和Dialog不同的是， Modal 更適合長(zhǎng)文本內(nèi)容，如隱私條款、知情同意書等等，抑或是要求用戶進(jìn)行較為復(fù)雜的操作行為如更改頁(yè)面設(shè)置。

3）Dialog

類型: 模態(tài)彈窗

參考規(guī)范: Microsoft-fluent UI

簡(jiǎn)介: Dialog是一種模態(tài)彈窗，它需要人們把注意力從當(dāng)前頁(yè)面短暫轉(zhuǎn)移到彈窗上，并且需要用戶的交互動(dòng)作。它基本被用于較為簡(jiǎn)單的場(chǎng)景下，如確認(rèn)信息、刪除文檔、做出一個(gè)選擇。

分類:

• Alert Dialogue: 因?yàn)榫o急信息、詳情展示或者動(dòng)作打斷用戶，用戶必須做出一個(gè)選擇才能關(guān)掉彈窗。
• Simple Dialogue: 展示會(huì)立即生效的列表選項(xiàng)，它不需要?jiǎng)幼靼粹o。
• Confirmation Dialogue: 需要用戶確認(rèn)當(dāng)前選擇，假如用戶反悔了，可以在這一步修改。
• Full-screen Dialogue: 全屏彈窗會(huì)充滿整個(gè)屏幕，包含需要完成一系列任務(wù)的動(dòng)作，只適用于手機(jī)端。

使用場(chǎng)景:

• 發(fā)生阻止程序運(yùn)行的錯(cuò)誤
• 需要向用戶展示完成某個(gè)特定任務(wù)的的關(guān)鍵信息， 如決定、聲明
• 需要最高程度地抓取用戶注意力

關(guān)鍵點(diǎn):

• 在當(dāng)前強(qiáng)制要求輸入的區(qū)域完成前，保存按鈕處于置灰狀態(tài)。
• 在全屏彈窗上層允許出現(xiàn)一些簡(jiǎn)單的彈窗。
• 標(biāo)題保持簡(jiǎn)潔，最多不超過兩行，假如長(zhǎng)度不確定或者更長(zhǎng)，把它們放在內(nèi)容區(qū)而不是標(biāo)題區(qū)。
• 盡量減少使用Dialogue，因?yàn)樗鼈兒翢o(wú)征兆的出現(xiàn)，會(huì)打斷用戶的進(jìn)程。
• 大多數(shù)彈窗內(nèi)容應(yīng)當(dāng)盡量避免使用滾動(dòng)條， 如果非使用不可(如選擇時(shí)間日期)，保持標(biāo)題和底部的動(dòng)作按鈕區(qū)域固定，遮罩區(qū)域的背景也不動(dòng)。

4）Drawer

類型: 模態(tài)彈窗

參考規(guī)范: Material Design

簡(jiǎn)介: Drawer是一種容器， 它的性質(zhì)和生活中的抽屜很像， 通常用來(lái)放置和某個(gè)特定窗口相關(guān)的一些信息或者選項(xiàng)。默認(rèn)情況下， Drawer是隱藏的， 它通常是通過一個(gè)按鈕或者菜單觸發(fā)， 從父級(jí)界面的一側(cè)滑出來(lái)，所以它不能夠脫離父級(jí)界面而單獨(dú)存在。

關(guān)鍵點(diǎn): 避免使用drawer，現(xiàn)在流行的軟件已經(jīng)很少會(huì)使用drawer了，而且也不提倡使用。如果你想展示補(bǔ)充性的內(nèi)容的話，不妨嘗試一下panel、popover、sidebars、split views。

5）Popover

類型: 模態(tài)、非模態(tài)

參考規(guī)范: IOS Design

簡(jiǎn)介: 當(dāng)你輕觸一個(gè)區(qū)域時(shí)，Popover會(huì)短暫的出現(xiàn)在其他內(nèi)容的上層， 通常來(lái)說，一個(gè)Popover包含一個(gè)箭頭，指向它彈出來(lái)的位置。當(dāng)你點(diǎn)擊屏幕中的其他區(qū)域或者Popover上的按鈕時(shí)，一個(gè)非模態(tài)的popover會(huì)取消顯示。而模態(tài)的popover只能通過點(diǎn)擊它上面的cancel或者其他按鈕而取消顯示。

Popover更最適合大屏幕的設(shè)備， 并且可以容納很多元素，包括導(dǎo)航欄、工具欄、tab欄、表格、圖片、地圖、傳統(tǒng)視圖等等。當(dāng)Popover可見時(shí)，在它消失前，當(dāng)前頁(yè)面的其他交互是不能進(jìn)行的。

關(guān)鍵點(diǎn):

• 避免在iPhone中使用Popover：一般來(lái)說，Popover 會(huì)在ipad中使用。在iphone中，通常會(huì)通過把信息展示在一個(gè)全屏的模態(tài)視圖中來(lái)優(yōu)化屏幕空間，而不是使用Popover。
• 使用一個(gè)關(guān)閉按鈕來(lái)確認(rèn)。一個(gè)關(guān)閉按鈕是值得加上去的，比如“取消”或者“完成”，當(dāng)然如果空間不擁擠的情況下，還可以加上“保存然后退出”“不保存然后退出”這樣的選項(xiàng)。一般來(lái)說，當(dāng)Popover沒必要再展示的情況下，它應(yīng)當(dāng)能夠自動(dòng)退出。在大多數(shù)情況下，當(dāng)用戶點(diǎn)擊了它區(qū)域之外的范圍或者是對(duì)Popover做出某種選擇后，它會(huì)關(guān)閉。如果需要在Popover上做出多個(gè)選擇時(shí)，Popover應(yīng)當(dāng)一直顯示直到用戶做出明確的關(guān)閉行為。
• 自動(dòng)關(guān)閉非模態(tài)Popover時(shí)，總是自動(dòng)保存。 用戶容易誤碰到某個(gè)區(qū)域關(guān)掉非模態(tài)的Popover，除非是用戶點(diǎn)擊了明確的“取消”的按鈕，這種時(shí)候才不保存工作。
• 在屏幕上適當(dāng)?shù)姆胖肞opover。 一個(gè)Popover的箭頭應(yīng)當(dāng)直接指向觸發(fā)它的地方，因?yàn)镻opover不能在屏幕上拖來(lái)拖去挪動(dòng)位置，所以它不可以遮擋住屏幕上用戶重要的內(nèi)容，當(dāng)然它也不能擋住觸發(fā)它的元件。
• 一次只展示一個(gè)Popover。 同時(shí)展示很多的popover，會(huì)增加畫面的噪聲，致使用戶疑惑。不要使用瀑布或者階梯式的Popover，就是那種一個(gè)接一個(gè)的彈出來(lái)的。如果你想展示一個(gè)新彈窗，那就把打開著的先關(guān)掉。
• 不要在Popover 的上層再展示其他彈窗，除了Alert。
• 如果可能的話，讓用戶點(diǎn)擊一下就能再打開一個(gè)新的Popover，避免多余的點(diǎn)擊步驟。
• 不要讓Popover展示的太大。一個(gè)Popover不應(yīng)該占據(jù)整個(gè)屏幕，只讓它達(dá)到可以剛好可以容納其中的內(nèi)容，并且指向彈出它的方向就可以了。
• 確保Popover看上去像Popover。 盡管用戶可以個(gè)性化改變一個(gè)Popover的視覺外觀，但是還是要避免設(shè)計(jì)用戶識(shí)別不出的Popover。當(dāng)Popover包含標(biāo)準(zhǔn)的控件和視圖時(shí)往往用戶體驗(yàn)最佳。

6）Snackbar &amp； Toast

類型: 非模態(tài)

參考規(guī)范: Material Design

簡(jiǎn)介: 此處將Snackbar和Toast放在一起講，因?yàn)檫@兩者十分相似但是又有所差異。

Toast屬于一種輕量級(jí)的反饋，它比Snack bar的提示程度輕， 常常以小彈框的形式出現(xiàn)，一般出現(xiàn)1到2秒會(huì)自動(dòng)消失， 但為了保持一致性，同個(gè)產(chǎn)品盡量使用同一位置。 和Snack bar有所區(qū)別的是，Toast常常被用作系統(tǒng)提示消息，不包含動(dòng)作按鈕，可以出現(xiàn)在屏幕上中下任意位置， 并且只有安卓中有Toast。

Snack bar被用來(lái)通知用戶該程序正在發(fā)生或者即將發(fā)生的進(jìn)程，也就是說Snack bar的內(nèi)容一定是和用戶當(dāng)前操作相關(guān)的，而Toast彈出的內(nèi)容和當(dāng)前操作沒有任何關(guān)系，只是一個(gè)系統(tǒng)提示，比如說“你收到了一條消息”這種。

Snack bar同樣短暫的出現(xiàn)在屏幕的底部，不中斷用戶體驗(yàn)，也不需要用戶任何操作，自己就會(huì)消失。它繼承了Toast的所有基礎(chǔ)屬性，但是不同的是:

• 它常常只出現(xiàn)在屏幕底部
• 可以出現(xiàn)0-1個(gè)動(dòng)作按鈕(不包括“取消”按鈕)
• 點(diǎn)擊Snack bar之外的區(qū)域，它會(huì)消失

這里值得注意的一點(diǎn)，Material design中已經(jīng)不再推薦使用Toast而是更推薦Snack bar了，但是目前Toast在安卓應(yīng)用上仍然在被廣泛使用。

下面著重介紹一下Snack bar。

使用場(chǎng)景: 既想要展示信息，又想最小程度地打斷用戶注意。

關(guān)鍵點(diǎn):

• 文案內(nèi)容和當(dāng)前程序的進(jìn)程直接相關(guān)。
• Snackbar中不能包含圖標(biāo)。
• 盡量使用不透明純色背景， 也可以加一點(diǎn)點(diǎn)的透明度，只要文案清晰可見即可。
• 為了和文案區(qū)別，動(dòng)作按鈕用不同的顏色強(qiáng)調(diào)。
• 使用優(yōu)先級(jí)最低的按鈕樣式，通常是文字按鈕。
• 動(dòng)作按鈕不是必須的， 因?yàn)榧词故裁匆膊蛔?，snack bar也會(huì)自行消失， 最多加一個(gè)動(dòng)作按鈕， 通常是“取消”。
• 最快4秒鐘，最慢10秒鐘， Snack bar會(huì)自行消失。
• 當(dāng)同時(shí)有多個(gè)snack bar需要出現(xiàn)時(shí)，它們是一個(gè)一個(gè)出現(xiàn)的，前一個(gè)snack bar消失后，下一個(gè)才會(huì)出現(xiàn)。
• 通常出現(xiàn)在界面的底部，并且要避免它遮住導(dǎo)航、頻繁使用的交互組件等等重要的UI元素。
• 只有當(dāng)界面底部沒有常駐的導(dǎo)航元件如底部tab欄時(shí)， snack bar才可以和屏幕等寬顯示。
• 當(dāng)界面中有懸浮動(dòng)作按鈕(FAB)時(shí)，snack bar不可以和FAB重疊，而是位于FAB的上方，底部有常駐導(dǎo)航元件時(shí)同理。

7）Tooltip

類型: 非模態(tài)

參考規(guī)范: Material Design

簡(jiǎn)介: 當(dāng)Tooltip通過鼠標(biāo)懸停、聚焦、或者觸摸后被激活，它會(huì)識(shí)別一個(gè)與之對(duì)應(yīng)的元素然后在該元素附近顯示簡(jiǎn)短、描述性的文案，通常是對(duì)該元素的功能解釋，在停留短暫的時(shí)長(zhǎng)后，Tooltip會(huì)自行消失。

關(guān)鍵點(diǎn):

• 通常為了避免歧義和補(bǔ)充說明，Tooltip用來(lái)解釋圖像、圖標(biāo)、相似相關(guān)的元素，不會(huì)用來(lái)解釋本來(lái)意思就顯而易見的文字。
• 文案只用文字，不要添加任何富文本信息如圖標(biāo)、圖像。
• 完整展示整個(gè)Tooltip的元件，避免因?yàn)榭拷吘壎徊们小?/li>
• 只要用戶的鼠標(biāo)還停留在目標(biāo)元素內(nèi)部，Tooltip就不會(huì)自己消失，當(dāng)用戶離開目標(biāo)元素后，Tooltip會(huì)停留1。5秒后消失。

8）Andriod Notification

類型: 非模態(tài)

參考規(guī)范: Material Design

簡(jiǎn)介: 在軟件不被使用期間，Notifications提供關(guān)于軟件簡(jiǎn)短、時(shí)不時(shí)的的相關(guān)資訊。這種資訊可以是來(lái)自其他用戶的交流信息或者提供任務(wù)提醒。

Notifications如何被用戶注意到:

• 顯示狀態(tài)欄圖標(biāo)
• 在鎖屏界面被展示
• 發(fā)出聲音或者震動(dòng)
• 在當(dāng)前屏幕短暫的出現(xiàn)
• 設(shè)備的屏幕閃爍一下

9）Message bar

類型: 非模態(tài)

參考規(guī)范: Microsoft Fluent UI react 8.65.1

簡(jiǎn)介: 顯示軟件或者文件的錯(cuò)誤、警告、重要的信息。比如說，一個(gè)文檔上傳失敗，那么錯(cuò)誤的messabe bar就會(huì)出現(xiàn)。

關(guān)鍵點(diǎn):

• 通常一個(gè)Message bar會(huì)顯示在軟件頂部，主操作欄的下面。比如說office的Message bar就是在ribbon的下面，在文檔畫布的上面。
• 多條信息可以同時(shí)出現(xiàn)，但是一個(gè)場(chǎng)景或者相關(guān)一系列場(chǎng)景應(yīng)當(dāng)一個(gè)只展示一個(gè)Message bar。 Message bar很少是關(guān)于一個(gè)操作的直接反饋，而是展示一個(gè)用戶應(yīng)當(dāng)了解的關(guān)于軟件或者文檔的總體的信息。
• 使用圖標(biāo)來(lái)暗示Message的類型: 比如說， 信息圖表就代表咨詢類的message；盾牌的圖標(biāo)就代表和安全相關(guān)的message；警告圖標(biāo)代表非阻塞型錯(cuò)誤警告；

10）Coachmark &amp； Teaching bubble

類型: 非模態(tài)

參考規(guī)范: Microsoft Fluent UI react 8.65.1

簡(jiǎn)介: Coachmark 是為了吸引用戶注意力并且增加用戶使用他們的機(jī)會(huì)，當(dāng)鼠標(biāo)懸?；蛘哌x擇Coachmark時(shí)，Teaching bubble就會(huì)顯示。

關(guān)鍵點(diǎn):

• 一次一個(gè)Coachmark只可以和一個(gè)Teaching bubble組合。
• Coachmark可以是單個(gè)的，也可以是連續(xù)的。應(yīng)當(dāng)減少使用連續(xù)的coachmark， 它只在復(fù)雜多步驟的交互中會(huì)被使用，連續(xù)coachmark最好不超過3步。
• Coachmark只被設(shè)計(jì)來(lái)放Teaching bubble。
• 不可以改變Coachmark的尺寸、顏色和動(dòng)畫。 打開彈出窗口時(shí)，這個(gè)操作會(huì)減少用戶。

04 彈窗的設(shè)計(jì)原則

1. 什么時(shí)候選用彈窗

彈窗作為一種容器，在選用時(shí)常常和抽屜、頁(yè)面一起比較，那么在給定一個(gè)內(nèi)容時(shí)，我們?cè)摳鶕?jù)什么來(lái)選擇使用哪種類型的容器呢?

首先，我們先把這三個(gè)容器的定義搞清楚。

• 彈窗：在不離開當(dāng)前頁(yè)面的情況下，完成對(duì)某個(gè)任務(wù)的聚焦。
• 抽屜：建立在父級(jí)頁(yè)面的基礎(chǔ)上的一個(gè)附加面板，在被需要時(shí)呼出。
• 頁(yè)面：處于最下層的容器，也是我們最常見的容器形式。

接著，在我們被給定一個(gè)需求時(shí)，要先分析這個(gè)需求，從一下幾個(gè)方面去判斷:

1）信息承載量

既然是容器，必然有容量這一說，在這里用信息承載量可能更合適，信息承載量包括圖片、視頻、文本、表格等等各種形式的信息量，當(dāng)信息量非常大，密密麻麻十分惱人時(shí)，彈窗自然是不被推薦使用的了，通常來(lái)說信息承載量大小有這么一個(gè)規(guī)律: 頁(yè)面 &gt； 抽屜 &gt； 彈窗。

不過信息承載量只是考慮的第一步，是一個(gè)比較宏觀的方面，不是決定性因素。

2）頁(yè)面獨(dú)立性

獨(dú)立性可以理解為與前一個(gè)或者當(dāng)前頁(yè)面的聯(lián)系是否緊密。 頁(yè)面的獨(dú)立性最高，當(dāng)你不斷打開一個(gè)又一個(gè)新的頁(yè)面，常常會(huì)記不得上一個(gè)頁(yè)面的內(nèi)容，這就是因?yàn)檫@些頁(yè)面的內(nèi)容相對(duì)獨(dú)立，關(guān)聯(lián)性不大。

而我們僅僅是從定義上不難看出，彈窗和抽屜的獨(dú)立性較低， 彈窗的前提是不離開當(dāng)前頁(yè)面內(nèi)容，甚至彈窗的主體不能夠遮住當(dāng)前頁(yè)面的重要內(nèi)容；抽屜是建立在父級(jí)頁(yè)面基礎(chǔ)上的，它是對(duì)父級(jí)頁(yè)面內(nèi)容的補(bǔ)充。

大多數(shù)彈窗是與當(dāng)前用戶正在執(zhí)行的操作內(nèi)容相關(guān)的，比如在表單錄入的場(chǎng)景下，選擇時(shí)間會(huì)彈出時(shí)間彈窗，選擇地址時(shí)會(huì)彈出地址簿彈窗。

抽屜比較適合內(nèi)容度較深、邏輯緊密、概括性簡(jiǎn)短的內(nèi)容但不是時(shí)時(shí)必須展示的內(nèi)容， 如購(gòu)物網(wǎng)站的目錄導(dǎo)航、safari收藏夾等等。

而頁(yè)面和頁(yè)面之間的邏輯性不強(qiáng)甚至可以毫無(wú)邏輯，比如跳轉(zhuǎn)到一個(gè)莫名其妙的廣告頁(yè)面。

3）頁(yè)面切換成本

當(dāng)用戶因?yàn)槟硞€(gè)業(yè)務(wù)需求需要頻繁在A和B頁(yè)面間切換時(shí)，這個(gè)時(shí)候我們就要考慮切換成本。

抽屜有一個(gè)固定位置的觸發(fā)按鈕，所以當(dāng)需要頻繁操作時(shí)，用戶能夠快速找到并彈出抽屜，減少學(xué)習(xí)成本。

彈窗回到頁(yè)面的速度也很快， 如果是非模態(tài)彈窗，它可能會(huì)自行消失、點(diǎn)擊遮罩區(qū)域消失或者點(diǎn)擊關(guān)閉按鈕消失，對(duì)于模態(tài)彈窗來(lái)說，只要用戶做出了明確的操作后，彈窗就會(huì)消失，自然的回到當(dāng)前頁(yè)面。

頁(yè)面是切換成本最高的，一般需要點(diǎn)擊返回按鈕，返回上一級(jí)頁(yè)面，這個(gè)時(shí)候頁(yè)面加載需要一定的時(shí)間，用戶需要快速認(rèn)知一個(gè)全新的頁(yè)面需要一定的適應(yīng)時(shí)間，所以頁(yè)面的切換成本最高。

2. 彈窗文案怎么寫

1）UX Writing規(guī)則

• 說人話：彈窗應(yīng)與現(xiàn)實(shí)世界相關(guān)連彈窗應(yīng)該使用用戶的語(yǔ)言（用戶熟悉的文字，短語(yǔ)和概念），而不是一些系統(tǒng)特有的專有名詞。
• 表述清晰無(wú)歧義：在彈窗中使用語(yǔ)意清晰的問題和選項(xiàng)，而不是讓用戶產(chǎn)生疑惑，令用戶猶豫不決。
• 簡(jiǎn)潔：在表述清晰的前提下，盡量減少字?jǐn)?shù)，一方面是因?yàn)閺棿暗某叽绱笮∮邢?，無(wú)法承載太多的字?jǐn)?shù)；另一方面， 任何人都不喜歡長(zhǎng)篇大論，彈窗做的就是幫助用戶高效率理解問題、解決問題。
• 一致性：同樣的意思、同樣的操作所使用的詞語(yǔ)句子保持相同，比如說“編輯”和“修改”是差不多的意思，那么在這個(gè)系統(tǒng)中只能出現(xiàn)其中一個(gè)詞語(yǔ)。

2）標(biāo)題

標(biāo)題是用戶第一眼注意到的內(nèi)容，用戶掃一眼標(biāo)題來(lái)快速了解這個(gè)彈窗是做什么的，所以標(biāo)題的重要性不言而喻。

• 如果彈窗是用戶主動(dòng)觸發(fā)，彈窗標(biāo)題應(yīng)當(dāng)包含觸發(fā)該彈窗的動(dòng)作按鈕的文案，通常采用“動(dòng)詞+名詞”的格式，這樣用戶才能通過標(biāo)題確認(rèn)自己進(jìn)入了正確的模塊。
• 彈窗標(biāo)題和內(nèi)容是總-分關(guān)系。標(biāo)題一般是陳述問題、詢問行為或者做出行為建議，通常比較簡(jiǎn)短概括；內(nèi)容是一個(gè)較為詳細(xì)的說明解釋以及操作的后果等等。
• 標(biāo)題中不要使用諸如“錯(cuò)誤!”“警告!”這種帶有強(qiáng)烈情緒的詞語(yǔ)， 而是使用帶有信息的中性的句子，比如“某某任務(wù)終止”。

3）內(nèi)容

• 用戶不喜歡被責(zé)怪。避免使用針對(duì)性措辭，比如:你出錯(cuò)了!
• 生僻專業(yè)詞匯附加解釋，尤其像金融類產(chǎn)品，里面涉及了大量專業(yè)詞匯，非專業(yè)人士小白可能會(huì)一頭霧水，這時(shí)候可以采用Tooltip形式，當(dāng)用戶懸停在該詞匯上，顯示對(duì)該詞匯的解釋。
• 內(nèi)容不必再重復(fù)標(biāo)題中的文案。
• 使用具體的可以付諸行動(dòng)的語(yǔ)言，把重要的信息寫在開頭。
• 可以在內(nèi)容中添加一些可供用戶參考的有用信息。

4）如何優(yōu)化按鈕文案

操作清晰可預(yù)測(cè)。 減少使用中性詞， 從而避免用戶停頓思考，讓用戶看到文本的瞬間就明白按鈕時(shí)會(huì)發(fā)生什么。

優(yōu)先考慮“動(dòng)詞+名詞”的形式，如果不能夠這樣表達(dá)，再去考慮“確認(rèn)”“取消”“關(guān)閉”這些中性詞。

5）反饋

操作后的反饋對(duì)于用戶體驗(yàn)也很重要，正如你打游戲通關(guān)時(shí)，系統(tǒng)會(huì)發(fā)出喝彩的聲音，比如你提交了一個(gè)表單彈窗，當(dāng)你提交后，應(yīng)當(dāng)顯示提交成功的反饋。

• 成功: 告知用戶結(jié)果或者當(dāng)前進(jìn)程
• 失敗: 告知用戶失敗的結(jié)果、失敗的原因、如何解決問題

3. 滾動(dòng)條

首先要明確的一點(diǎn)，在各大規(guī)范中都不推薦使用滾動(dòng)條，因?yàn)槭紫葟棿暗膬?nèi)容承載量就不大，如果是業(yè)務(wù)場(chǎng)景復(fù)雜的彈窗，我們可以采用Tab或者分步彈窗，盡量去避免在彈窗中使用滾動(dòng)條。

那么，如果不得不使用滾動(dòng)條的情況下，有幾點(diǎn)要注意:

• 內(nèi)嵌表格彈窗:當(dāng)表格數(shù)據(jù)很少時(shí)，表格中不含滾動(dòng)條；當(dāng)表格數(shù)據(jù)列較多，出現(xiàn)水平滾動(dòng)條；當(dāng)表格數(shù)據(jù)行過多時(shí)，設(shè)定固定高度的表格，出現(xiàn)垂直滾動(dòng)條。
• 一般彈窗: 禁止使用水平滾動(dòng)條，垂直滾動(dòng)條出現(xiàn)時(shí)，要保證遮罩內(nèi)容區(qū)的滾動(dòng)條保持靜止，否則局面會(huì)變得混亂不堪。當(dāng)關(guān)閉彈窗后，內(nèi)容區(qū)的滾動(dòng)條恢復(fù)運(yùn)動(dòng)。

4. 彈窗尺寸

1) Web端

調(diào)查市面上的電腦分辨率， 從數(shù)據(jù)圖中可見，分辨率900 * 1080是主流，最小的分辨率是1024 * 768。

俗話說“一個(gè)水桶，盛水量得看最短的那塊木板”， 所以理論上來(lái)說， 只要彈窗能滿足1024*768的分辨率，就可以適配市面上所有的電腦。

• 寬度: 最大寬度一般在1000px左右。最小寬度由各個(gè)平臺(tái)制定
• 高度: 最大高度是600px左右。具體計(jì)算: 768px-瀏覽欄頂部高度(60~100px)-系統(tǒng)底部工具欄高度(40px)=628~668px， 再加上彈窗不能像個(gè)充氣的氣球一樣擠滿整個(gè)屏幕，肯定還要留一些安全邊距(每個(gè)平臺(tái)的安全邊距不一樣)，我們?cè)偃€(gè)整——600px左右是最大高度。

各個(gè)平臺(tái)根據(jù)自身業(yè)務(wù)量和需求的差異性，可以根據(jù)內(nèi)容量再給彈窗的尺寸分類，常見的可以分為: 超級(jí)大、大、中、小尺寸，比如螞蟻中臺(tái)的Alert的幾種尺寸:

2) 手機(jī)端

手機(jī)端的彈窗一般都是全屏顯示，除了一些特殊的彈窗類型如Alert， Error， Notification會(huì)有固定的尺寸規(guī)范。

5. 彈窗的兩種生效模式

彈窗中有兩種生效模式: 即時(shí)提交模式(immediate commit model)和延遲提交模式(delayed commit model)

舉個(gè)例子，如mac的偏好設(shè)置中的桌面屏保，當(dāng)你選中后立即生效，這里沒有提交也沒有確認(rèn)按鈕，這種就是即時(shí)提交模式；而延遲提交模式更為常見，比如注冊(cè)網(wǎng)站會(huì)員時(shí)，你需要填好所有的信息，然后確認(rèn)一遍，最后提交。

即時(shí)提交模式更適合本身操作量不大，但是切換頻繁的操作，尤其對(duì)于視覺聽覺上的效果改變，即時(shí)提交是非常高效的，常見的比如更換手機(jī)鈴聲、選擇照片濾鏡、更換電腦壁紙等等。

延遲提交模式在B端中非常普遍，它需要用戶仔細(xì)斟酌輸入的內(nèi)容，用戶修改編輯滿意后再確認(rèn)提交，比起效率，它更重視質(zhì)量、減少出錯(cuò)率。

6. 彈窗的交互

1) 彈窗內(nèi)的導(dǎo)航:

當(dāng)彈窗內(nèi)有次級(jí)彈窗(同一個(gè)容器，不同的內(nèi)容)時(shí)，在次級(jí)彈窗標(biāo)題部分，有一個(gè)返回按鈕，可以返回主彈窗。

2) 用戶改變彈窗的顯示大小

比如一些長(zhǎng)列表，里面的條目很多，有一些字段因?yàn)楸容^長(zhǎng)，被隱藏住了一部分，用戶需要滾動(dòng)滑動(dòng)條，來(lái)查看更多的條目，而當(dāng)彈窗的大小可以被改變時(shí)，用戶就可以增大彈窗，從而每滾動(dòng)一次，就能查看更多的條目，減少滾動(dòng)條的操作次數(shù)，更大的視野也讓用戶的體驗(yàn)感更好。

這里有兩個(gè)小細(xì)節(jié)值得注意:

1. 要設(shè)定一個(gè)最大/最小寬度，保證彈窗始終可以被看見，不影響彈窗最基本功能的實(shí)現(xiàn)。
2. 給一個(gè)暗示的符號(hào)，比如小三角符號(hào)，告知用戶這個(gè)頁(yè)面是可以被拉伸的。

3) 拖拽移動(dòng)彈窗

有時(shí)候一個(gè)彈窗彈出來(lái)正好遮擋住了底部頁(yè)面的重要內(nèi)容，所以彈窗需要有被移動(dòng)和拖拽的功能:

4) 彈窗的防錯(cuò)功能

在填寫表單場(chǎng)景下，比方說用戶已經(jīng)花費(fèi)了二十分鐘填寫表單，但是他不小心碰到了鍵盤上的Esc鍵，彈窗自動(dòng)退出，那么他的內(nèi)容就消失了，這對(duì)用戶來(lái)說是十分糟糕的，有如五雷轟頂!

所以對(duì)于一些彈窗而言，添加防錯(cuò)功能是很有必要的，在不小心誤觸后，彈窗不會(huì)立刻關(guān)閉，而是彈出一個(gè)確認(rèn)彈窗“你確定要離開嗎?你的內(nèi)容將會(huì)丟失”，這個(gè)確認(rèn)彈窗可以大大的降低誤觸帶來(lái)糟糕后果，畢竟很少人會(huì)連續(xù)誤觸兩次嘛。

確認(rèn)彈窗確實(shí)是防錯(cuò)的一個(gè)思路，還有一個(gè)思路是為彈窗添加自動(dòng)保存功能，當(dāng)彈窗不小心關(guān)閉后再打開時(shí)，剛才的內(nèi)容還在，不過新用戶的心情會(huì)經(jīng)歷一個(gè)跌宕起伏: “糟糕了!我的心血沒了!(哭泣)”–奧!!它們竟然還在，太驚喜了!”

7. 多個(gè)彈窗

需要明確的一點(diǎn)，在各大規(guī)范中，都不推薦彈窗疊彈窗，即使必要情況下，也會(huì)限制彈窗的數(shù)量，至于為什么這樣限制，打個(gè)比方你就懂了:大家小時(shí)候玩過俄羅斯套娃吧，每打開一個(gè)娃娃會(huì)發(fā)現(xiàn)里面還藏著一個(gè)娃娃，試想把娃娃換成彈窗，彈窗中還有彈窗。

1. 這樣會(huì)讓用戶迷失在當(dāng)前彈窗中，彈窗越多，用戶需要更多的時(shí)間和操作回到主彈窗(最外面的娃娃)。
2. 最里面的彈窗因?yàn)殡[藏的過深，不容易找到； 三， 過多的彈窗加大視覺工作量，增加視覺噪音，導(dǎo)致糟糕的用戶體驗(yàn)，所以彈窗不推薦多層級(jí)堆疊。

但是在復(fù)雜的大型企業(yè)軟件中，不可避免的會(huì)出現(xiàn)多個(gè)彈窗的情況，我們又該怎么解決呢?

根據(jù)用戶的目標(biāo)和任務(wù)的對(duì)應(yīng)關(guān)系，彈窗和彈窗之間的關(guān)系可以分為線性和非線性關(guān)系。

1）非線形關(guān)系

比如Photoshop，里面的大量窗口都是非線形關(guān)系，我可以調(diào)一下這個(gè)參數(shù)，再跳到另一個(gè)窗口改變另一個(gè)參數(shù)，這些參數(shù)本身并不存在什么邏輯關(guān)系，所以Photoshop的工作臺(tái)可以將窗口隨意的打開、隱藏、關(guān)閉，可以根據(jù)設(shè)計(jì)師的使用頻率自定義工作臺(tái)的內(nèi)容窗口，而面對(duì)復(fù)雜大量的功能，PS給了諸如搜索的工具，讓用戶自主的快速找到自己需要的功能。

對(duì)于多個(gè)非線形彈窗，與其耗費(fèi)心機(jī)的建立一個(gè)復(fù)雜的結(jié)構(gòu)導(dǎo)航，不如給他們工具，讓用戶找到他們自己想要的東西。

2）線形關(guān)系

當(dāng)彈窗和彈窗之間存在緊密的邏輯關(guān)系時(shí)，常見的有三種形態(tài):

1. A容器中彈出B容器
2. 同一容器不同內(nèi)容
3. 關(guān)閉A容器后，彈出B容器

舉個(gè)例子，叮叮的“新建項(xiàng)目”:

假設(shè)用戶的目標(biāo)是想要從已有項(xiàng)目中復(fù)制一個(gè)模版: 點(diǎn)擊全部模版后，跳到模版界面，這一步就是“A容器中彈出B容器”。

進(jìn)入模版彈窗后，點(diǎn)擊新建模版，選擇“從已有項(xiàng)目中新建”，可以看出這一步的彈窗的容器沒有變化，只是將彈窗的內(nèi)容區(qū)域進(jìn)行改變，這就是“同一容器不同內(nèi)容”。

而“關(guān)閉A容器后，彈出B容器”，這個(gè)就不太常見，比如通常我們卸載一些流氓軟件時(shí)，會(huì)確認(rèn)卸載之后，再確認(rèn)一次，使得用戶十分惱怒，這些流氓軟件為了留下來(lái)真的費(fèi)盡心機(jī) ； 還有就是在填寫非常重要的信息時(shí)，系統(tǒng)為了提醒用戶“你一定要填寫正確，因?yàn)檫@是不可更改的哦”所以會(huì)確認(rèn)兩次。

這個(gè)場(chǎng)景不常見，所以絕大多數(shù)彈窗只要一個(gè)確認(rèn)彈窗就可以了。

05 彈窗的使用場(chǎng)景

我們從對(duì)話框傳遞的信息的性質(zhì)和來(lái)源， 可以將對(duì)話框分為系統(tǒng)彈窗、信息展示彈窗、操作彈窗?！禔bout Face 4》一書中將彈窗更細(xì)致地分為屬性、功能、通知、公告、進(jìn)度彈窗，其實(shí)理解起來(lái)是一樣的: 進(jìn)度和公告是系統(tǒng)彈窗，通知屬于信息展示彈窗，功能彈窗就是操作彈窗。

系統(tǒng)彈窗:這是由應(yīng)用程序直接啟動(dòng)，而不是用戶請(qǐng)求發(fā)出的，比如“版本升級(jí)到2.0”“頁(yè)面崩潰了”。

信息展示彈窗: 顧名思義，就是展示信息的彈窗，這個(gè)信息可以是來(lái)自其他用戶的消息、也可以是查看詳情等等。

操作彈窗: 用戶需要對(duì)彈窗執(zhí)行具體的動(dòng)作，比如常見的表單錄入、確認(rèn)刪除、上傳信息等等。

一般的簡(jiǎn)單場(chǎng)景下，不需要再搭建額外的層級(jí)關(guān)系， 用常見的簡(jiǎn)單的方式就可以完成需求， 但是在復(fù)雜的業(yè)務(wù)場(chǎng)景下，我們可能會(huì)遇到各種各樣棘手的問題，如信息太多、信息太復(fù)雜.

于是我們將一些頁(yè)面中會(huì)用到的層級(jí)框架運(yùn)用到彈窗中，但是切記彈窗的承載量是很小的，不要濫用這些手段(比如說彈窗中又有Tabbar，又有側(cè)邊欄，這樣是很忌諱的)，這里提供幾種解決思路:

1. Tab導(dǎo)航彈窗

Tab是一種導(dǎo)航控件，當(dāng)頁(yè)面的內(nèi)容眼花繚亂時(shí)，我們可以將內(nèi)容分類然后放入不同的Tab頁(yè)面中，如Mac中的系統(tǒng)偏好設(shè)置的顯示器設(shè)置。

Tab選項(xiàng)卡的形式是多樣化的， 包括僅文字、僅圖標(biāo)、圖標(biāo)+文字、帶有次級(jí)選項(xiàng)的Tab選項(xiàng)、帶數(shù)字/角標(biāo)等等，設(shè)計(jì)師根據(jù)業(yè)務(wù)場(chǎng)景選擇最合適的。

當(dāng)Tab和底部操作區(qū)同時(shí)存在時(shí)，操作區(qū)的層級(jí)永遠(yuǎn)是最高的，所以說當(dāng)點(diǎn)擊操作區(qū)按鈕時(shí)，其生效的范圍是所有Tab，而不是當(dāng)前Tab。

如果用戶想在當(dāng)前tab頁(yè)面完成操作的話，這個(gè)時(shí)候可以刪掉底部的操作區(qū)，推薦使用選擇控件如單選框/復(fù)選框， 當(dāng)勾選選項(xiàng)的瞬間，這個(gè)行為生效。

在使用Tabbar時(shí)有幾個(gè)小細(xì)節(jié)要注意:

• 使用盡量少的tab，并且保證每一個(gè)Tab始終可見。
• 當(dāng)在某些情況下，某個(gè)Tab下的內(nèi)容是空的或者不可見的，也要顯示這個(gè)tab，原因是保持系統(tǒng)的穩(wěn)定性和可預(yù)測(cè)性，你可以在空白的頁(yè)面中解釋為什么當(dāng)前頁(yè)面是空白的，避免讓用戶一頭霧水。

2. 側(cè)邊欄導(dǎo)航彈窗

由于彈窗的寬度限制， Tabbar可承受的數(shù)量有限， 當(dāng)Tab數(shù)量太多時(shí)，不妨考慮用Sidebar，以騰訊會(huì)議的設(shè)置彈窗舉例。 Sidebar和Tabbar類似，都是導(dǎo)航控件， 所以同樣地，如果用戶想在當(dāng)前sidebar選項(xiàng)頁(yè)面完成操作的話，推薦使用選擇控件如單選框/復(fù)選框，它也是立刻生效。

3. 分組彈窗

在表單錄入場(chǎng)景中， 當(dāng)信息又多又亂的時(shí)候，往往會(huì)降低用戶的閱讀效率，增加用戶的認(rèn)知成本，分組就是一個(gè)很好的解決辦法。將同類的信息歸納成一組，可以給每個(gè)組加上一個(gè)標(biāo)題，也可以只是在組和組之間加上分割線，界面更加清晰，操作流程更加高效。

4. 分步彈窗

分步彈窗適用于有一定的先后邏輯的操作步驟，必須完成第一步才能進(jìn)行第二步，不可以像Tabbar或者Sidebar一樣隨心所欲地去任意位置，最常見的就是網(wǎng)站注冊(cè)。

這樣做有幾個(gè)好處:

• 用戶一次只要專注于一個(gè)步驟，降低用戶認(rèn)知，提高操作效率。
• 由于必須先完成第一步才可以進(jìn)行下一個(gè)步驟，上一步正確了才能進(jìn)行下一步，大大降低了整體的出錯(cuò)率。
• 步驟條也是一種進(jìn)度條，能為用戶提供正向反饋，用戶有一種“一切盡在掌握之中”的感覺，帶給用戶的體驗(yàn)感很好。
• 試想如果一上來(lái)用戶就被告知要寫一大堆的東西(用戶是非常討厭做輸入內(nèi)容的工作的)，很可能面對(duì)大量?jī)?nèi)容時(shí)被勸退，但是分解到多個(gè)步驟中后，看上去就沒有那么多了，減少用戶的壓力。

5. 側(cè)邊欄作為參考

彈窗使我們不得不聚焦于當(dāng)前任務(wù)中，但是在一些信息錄入場(chǎng)景中，我們錄入的信息并不像我們的身份信息一樣信手拈來(lái)，比如商品信息的錄入，這個(gè)時(shí)候可以采用側(cè)邊欄的形式將參考信息放在旁邊。

以叮叮的“新建工作待辦”——添加執(zhí)行人舉例子: 為了減輕用戶的記憶壓力，叮叮在右側(cè)提供一個(gè)常駐的側(cè)邊欄，用戶可以通過“最近聊天”“我的好友”“我的群組”等方式查詢到自己好友的姓名，這個(gè)側(cè)邊欄于左邊的頁(yè)面是相對(duì)獨(dú)立的。

06 結(jié)語(yǔ)

彈窗規(guī)范雖然目前來(lái)說已經(jīng)比較完善了，但是隨著業(yè)務(wù)場(chǎng)景的復(fù)雜化和多元化，我相信還會(huì)有更多新的規(guī)則產(chǎn)生， 這就要求設(shè)計(jì)師不僅僅要了解并合理運(yùn)用規(guī)范，更要勇于質(zhì)疑和思考，去不斷地完善規(guī)范。

以上是我對(duì)彈窗的一些思考和總結(jié)，如果你有不同的想法，歡迎與我交流! 期待聽到你的聲音!

本文由郝小七指導(dǎo)http：//www.aharts.cn/u/917803

作者：自來(lái)卷夏憶

本文由 @自來(lái)卷夏憶 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議