工作中我們常常會(huì)聽到或在撰寫交互說明時(shí)提到“從底部向上出現(xiàn)彈層”、“出現(xiàn)浮層”、展示“對(duì)話框”、彈出“彈框”、“出現(xiàn)對(duì)話框”諸如此類的話術(shù)。我相信大家對(duì)“浮層、彈層、彈框、對(duì)話框……”等稱呼常常也會(huì)感到困惑。到底什么時(shí)候應(yīng)該稱呼為“對(duì)話框，什么時(shí)候稱呼彈框”，此類相似的組件又是如何分類的，應(yīng)該如何應(yīng)用、如何設(shè)計(jì)。

恰好筆者近期在設(shè)計(jì)彈出層組件，本篇文章將結(jié)合自己的實(shí)戰(zhàn)經(jīng)歷，自己對(duì)彈出層組件的理解和設(shè)計(jì)經(jīng)驗(yàn)分享給大家，希望幫助大家對(duì)彈出層組件有更清晰的認(rèn)知和理解。

彈出層組件的定義

首先我們看一下彈出層組件的定義：當(dāng)觸發(fā)某項(xiàng)操作時(shí)，在頁(yè)面上方展示的彈出層容器，容器內(nèi)可展示文本、按鈕、列表、標(biāo)簽、表單項(xiàng)等內(nèi)容，英文名稱定義為 Popup。

△ 彈出層組件的構(gòu)成

根據(jù)彈出位置的不同，我們又可以將 Popup 組件細(xì)分為如下 5 種樣式。

△彈出層組件的 5 種樣式

看到彈出層組件的樣式，想必大家已經(jīng)聯(lián)想到日常用的比較多的組件了，比如“Alert 確認(rèn)框，picker 選擇器、基于場(chǎng)景的篩選組件”等。彈出層組件是十分基礎(chǔ)的組件，基于該組件我們可以開發(fā)通用性組件以及場(chǎng)景組件。從“形式”角度來看，“浮層、彈層、彈框、對(duì)話框……”本質(zhì)上都是彈出層。

“浮層、彈層、彈框”是泛指的稱呼，兩大官方平臺(tái)也都根據(jù)自身的規(guī)范對(duì)相關(guān)組件進(jìn)行命名。Material Design 和 iOS 官方規(guī)范中的彈出層組件如下圖所示，并且筆者從“功能”角度出發(fā)整理了組件之間的對(duì)應(yīng)關(guān)系。后文會(huì)詳述每種組件的定義及應(yīng)用。

△MD 和 iOS 規(guī)范中的彈出層組件

在詳述組件之前，還需要向大家傳達(dá)一個(gè)概念“模態(tài)”，即平時(shí)我們常說的“模態(tài)彈框”（彈框可理解為是彈出層的一種樣式）。并非有一種組件的分類被稱作是“模態(tài)彈框”，而是當(dāng)彈框采用了“模態(tài)”的設(shè)計(jì)手法時(shí)，我們將其簡(jiǎn)稱為“模態(tài)彈窗”。

iOS 官方定義為：

“Modality is a design technique that presents content in a temporary mode that’s separate from the user’s previous current context and requires an explicit action to exit. Presenting content modally can:
Help people focus on a self-contained task or set of closely related options
Ensure that people receive and, if necessary, act on critical information”

翻譯過來即：模態(tài)是一種設(shè)計(jì)手法，它使用一種臨時(shí)性的模式將用戶之前看到的內(nèi)容與當(dāng)前看到的內(nèi)容進(jìn)行區(qū)分，并且需要通過明確的操作才能退出該模式。模態(tài)呈現(xiàn)的內(nèi)容可以：

幫助用戶專注于一個(gè)獨(dú)立的任務(wù)或一組緊密相關(guān)的選項(xiàng)，確保用戶收到關(guān)鍵信息，并在必要時(shí)采取行動(dòng)

由此可見，彈層是否為模態(tài)彈層可以根據(jù)具體的使用場(chǎng)景進(jìn)行定義。在 iOS 官方中定義的模態(tài)彈層通常包括：Alerts, Activity Views ,Share sheets, and Action Sheets .iOS 13 及后續(xù)的系統(tǒng)中將 Fullsreen 也作為模態(tài)彈層進(jìn)行使用。MD 中的 Dialogs 組件均為模態(tài)，而 sheets 組件不采用模態(tài)設(shè)計(jì)手法。

彈出層組件的分類與應(yīng)用

1. 警示型彈框

警示型彈框均采用從頁(yè)面中間進(jìn)行彈層的方式，MD 和 iOS 中組件的樣式略有不同，但其使用場(chǎng)景和功能相同。都是在重要信息提示、需要用戶確認(rèn)的操作、以及破壞性操作之前進(jìn)行提示，警示型彈窗會(huì)中斷用戶的任務(wù)流程，影響用戶體驗(yàn)，因此需注意其使用頻率。

△警示型彈框 Alert Dialog

使用場(chǎng)景：通常在系統(tǒng)級(jí)信息的提示，例如權(quán)限的獲取、系統(tǒng)通知，需要明確告知用戶的信息，以及破壞性操作前使用。

△警示型彈框應(yīng)用

2. 任務(wù)型彈層

根據(jù)用戶在彈層中需要完成的任務(wù)內(nèi)容和任務(wù)數(shù)量，又可分為簡(jiǎn)單型和復(fù)雜型彈層。

簡(jiǎn)單型彈層

常用于在彈層中展示內(nèi)容，需要用戶進(jìn)行選擇的場(chǎng)景，該場(chǎng)景通常只需要用戶完成一種任務(wù)，比如通過點(diǎn)擊的方式，完成信息的選擇或分享。在 iOS 中采用從底部向上彈層的方式，而安卓平臺(tái)多使用在頁(yè)面中間彈層的方式。

彈層中是否存在操作按鈕可根據(jù)實(shí)際應(yīng)用場(chǎng)景去確定。通常選擇項(xiàng)條目較少或內(nèi)容簡(jiǎn)單易于識(shí)別時(shí)，可不需要「確認(rèn)」按鈕。而在選擇項(xiàng)條目較多時(shí)或需要用戶作短暫的思考才能確認(rèn)選項(xiàng)時(shí)，可增加「確認(rèn)」按鈕，允許用戶有修改選項(xiàng)的機(jī)會(huì)。

△簡(jiǎn)單型任務(wù)彈層的組件樣式

△簡(jiǎn)單型任務(wù)彈層的組件樣式

彈層中信息的呈現(xiàn)方式又可分為“列表”和“網(wǎng)格”兩種，大多種場(chǎng)景下，均可使用列表展示內(nèi)容，更加符合用戶從上到下的閱讀習(xí)慣；而在分享場(chǎng)景下多通過網(wǎng)格的方式將分享渠道展示出來，增加屏顯的內(nèi)容，同時(shí)提高用戶查看信息的效率，具體樣式可參考上圖。

使用場(chǎng)景：簡(jiǎn)單型彈層多用在信息的篩選、排序和信息確認(rèn)的場(chǎng)景下使用。且在目前市面上的絕大多數(shù)應(yīng)用中，除原生的安卓應(yīng)用外，大部分應(yīng)用都采用從底部向上彈層和從頂部向下彈層的方式。

△簡(jiǎn)單型任務(wù)彈層的應(yīng)用

復(fù)雜型彈層

復(fù)雜型彈層中通常承載的信息量更豐富，包含多種組件，需要用戶完成一系列的任務(wù)。

涉及到信息篩選時(shí)，通常采用側(cè)邊彈層組件進(jìn)行展示，且彈層上的信息僅支持垂直滾動(dòng)查看，不支持水平滾動(dòng)查看，且通常采用“非模態(tài)”的手法，方便用戶快速取消當(dāng)前彈層。在 iOS 中并無“Sheets:side”組件，但是在 iOS 系統(tǒng)中，很多 APP 應(yīng)用在復(fù)雜的篩選場(chǎng)景下也都采用側(cè)邊彈層的方式。

全屏彈層會(huì)將當(dāng)前頁(yè)面中的全部信息遮擋，更方便用戶聚焦于當(dāng)前需要完成的任務(wù)，避免用戶的注意力被分散。通常采用模態(tài)的設(shè)計(jì)手法，僅當(dāng)用戶觸發(fā)確認(rèn)、取消或關(guān)閉操作時(shí)，彈層才會(huì)消失。一般全屏彈層中需要包含標(biāo)題、操作按鈕、內(nèi)容區(qū)域。用戶在全屏彈層中需要完成多個(gè)任務(wù)，因此內(nèi)容區(qū)域中也會(huì)包含多個(gè)組件。例如“按鈕、輸入框、標(biāo)簽、開關(guān)、列表、日期選擇”等。

△復(fù)雜型任務(wù)彈層的組件樣式

使用場(chǎng)景：通常用于完成復(fù)雜任務(wù)的表單信息填寫、內(nèi)容篩選、搜索和內(nèi)容展示。

△復(fù)雜型任務(wù)彈層的應(yīng)用

需要單獨(dú)說明氣泡框組件

在 iOS 的官方定義中，氣泡框組件應(yīng)用于 iPad 應(yīng)用程序，在 iPhone 應(yīng)用程序中，通過以全屏模態(tài)視圖而非彈出框形式顯示信息，來利用所有可用的屏幕空間。但是，組件被定義后并不是一成不變的，而是隨實(shí)際場(chǎng)景進(jìn)行應(yīng)用的。例如，在手機(jī)端，氣泡框組件更多被用于簡(jiǎn)單信息的展示與選擇。

△Popovers 氣泡框的應(yīng)用

小結(jié)：

筆者按照使用場(chǎng)景、信息的復(fù)雜度、功能的相似度等，將彈出層組件歸納為兩大類“警示型和任務(wù)型”，并且枚舉了常用的 MD（安卓系統(tǒng)遵循的規(guī)范）和 iOS 兩大規(guī)范中定義的彈出層組件，方便讀者對(duì)彈出層組件有更清晰的了解。需要說明的是，由于業(yè)務(wù)場(chǎng)景是復(fù)雜的、多樣的，各位設(shè)計(jì)師也需要結(jié)合實(shí)際的業(yè)務(wù)場(chǎng)景和設(shè)計(jì)目標(biāo)，靈活的使用組件。

△彈出層組件的類型與使用場(chǎng)景

如何設(shè)計(jì)彈出層組件

1. 設(shè)計(jì)目的

首先需要理解我們?yōu)槭裁匆O(shè)計(jì)組件，組件最終設(shè)計(jì)的目標(biāo)是什么，筆者從“設(shè)計(jì)側(cè)和技術(shù)側(cè)”兩方面談?wù)勛约旱睦斫狻?

設(shè)計(jì)側(cè)：規(guī)范的組件設(shè)計(jì)，對(duì)內(nèi)有利于全公司的設(shè)計(jì)師對(duì)組件的使用有統(tǒng)一的認(rèn)知，明確組件的使用場(chǎng)景，避免誤用和錯(cuò)用組件，并且方便新人設(shè)計(jì)師快速學(xué)習(xí)和上手，提高設(shè)計(jì)效率。對(duì)外也有利于保證設(shè)計(jì)上線后的一致性和規(guī)范性，方便用戶對(duì)本公司產(chǎn)品建立統(tǒng)一的心理認(rèn)知。

技術(shù)側(cè)：通用的基礎(chǔ)組件，具有可復(fù)用性，能夠減少重復(fù)開發(fā)，大大提高開發(fā)效率。

組件設(shè)計(jì)的最終目標(biāo)可歸納為保持設(shè)計(jì)的統(tǒng)一性，提升用戶體驗(yàn)，同時(shí)提高設(shè)計(jì)和開發(fā)的效率。因此，組件設(shè)計(jì)是非常有必要的，那么到底如何從 0-1 開始設(shè)計(jì)組件呢，下面我們來看組件設(shè)計(jì)的詳細(xì)思路。

2. 設(shè)計(jì)思路

其實(shí)組件設(shè)計(jì)的基本思路是通用的，不僅適用于彈出層組件，還適用于其他基礎(chǔ)組件的設(shè)計(jì)。通常我們會(huì)從組件的定義、用法、構(gòu)成、種類、行為與狀態(tài)五個(gè)方面進(jìn)行組件的設(shè)計(jì)。

△組件設(shè)計(jì)的思路

• 定義：通過精準(zhǔn)的話術(shù)描寫組件的內(nèi)容與目的。
• 用法：組件包含的內(nèi)容、出現(xiàn)的位置、信息展示的規(guī)則等。
• 構(gòu)成：通過示意圖展示組件包含的具體信息，例如標(biāo)題、按鈕、內(nèi)容區(qū)等。
• 種類：根據(jù)一定的規(guī)則對(duì)組件進(jìn)行分類。
• 行為與狀態(tài)：使用組件的整個(gè)交互流程與交互邏輯說明；組件的狀態(tài)說明，例如 normal 態(tài)、click 態(tài)，disable 態(tài)，滾動(dòng)時(shí)的頁(yè)面狀態(tài)等。

回歸到本文所講的移動(dòng)端彈出層組件，組件設(shè)計(jì)時(shí)需要考慮其“通用性和可復(fù)用性”?；诖嗽瓌t，將彈出層組件進(jìn)行拆解，如下圖所示。它包括：

• 遮罩層：覆蓋底部頁(yè)面上的內(nèi)容，方便用戶聚焦當(dāng)前彈層上的信息
• 容器層：承載內(nèi)容的容器
• 內(nèi)容層：容器里的內(nèi)容，不同區(qū)塊的內(nèi)容可單獨(dú)封裝

△彈出層組件的拆解

從上圖中可看出，本文第一部分提出的 Popup 組件是最基本的彈出層組件，基于該組件可進(jìn)行任何彈層組件的開發(fā)。因此，在彈層組件設(shè)計(jì)時(shí)將 Popup 組件抽離出來作為最基礎(chǔ)的組件進(jìn)行開發(fā)， 還可以進(jìn)一步開發(fā)通用的彈層組件和高頻使用的場(chǎng)景組件。由于上文中已講 Popoup 組件的構(gòu)成與樣式，且由于該組件相對(duì)來講比較簡(jiǎn)單，因此不過多贅述。下面以通用組件“Picker 選擇器”和篩選場(chǎng)景下的高頻組件“篩選器 Filter”為例進(jìn)行說明。

設(shè)計(jì)實(shí)戰(zhàn)

1. Picker 選擇器

定義：用于從一組預(yù)設(shè)數(shù)據(jù)中進(jìn)行選擇的控件。

用法：

• 選擇器通常顯示在屏幕底部或彈出窗口中。
• 通常包含 2 個(gè)操作按鈕“取消和確定”，按鈕名稱支持修改。
• 可自定義設(shè)置是否顯示標(biāo)題。
• 支持單列選擇和多列選擇，多列選擇一般不超過 4 列，且多列值之間可配置其級(jí)聯(lián)關(guān)系。

構(gòu)成：標(biāo)題、按鈕、內(nèi)容（當(dāng)前選項(xiàng)和其他選項(xiàng)）

△Picker 選擇器組件的構(gòu)成

種類：根據(jù)選項(xiàng)間是否存在級(jí)聯(lián)關(guān)系可將其分為 2 類，普通選擇和級(jí)聯(lián)選擇。

△Picker 選擇器組件的分類

行為與狀態(tài)：狀態(tài)，給出單列選項(xiàng)和多列選項(xiàng)的常態(tài)頁(yè)面以及選項(xiàng)被禁用的狀態(tài)頁(yè)面。行為，需要定義完整的組件交互邏輯，從入口->彈層出現(xiàn)->選項(xiàng)查看->選擇目標(biāo)選項(xiàng)->彈層消失的完整邏輯進(jìn)行說明。

△Picker 選擇器組件的狀態(tài)

△Picker 選擇器組件的交互流程與行為說明

當(dāng)完成以上全部?jī)?nèi)容的撰寫時(shí)，可對(duì)本組件開發(fā)出的效果進(jìn)行說明。例如：

• 普通選擇（以單列選擇示例，默認(rèn)項(xiàng)為第一個(gè)選項(xiàng)）
• 普通選擇（以 2 列選擇示例，默認(rèn)項(xiàng)為每列的第一個(gè)選項(xiàng)）
• 多列選擇無級(jí)聯(lián)關(guān)系（以日期選擇年、月、日示例，3 列選擇，默認(rèn)項(xiàng)為當(dāng)天）
• 多列選擇存在級(jí)聯(lián)關(guān)系（以城市選擇為例，3 列選擇，默認(rèn)項(xiàng)為每列的第一個(gè)選項(xiàng)）。如此的說明會(huì)讓技術(shù)同學(xué)本次組件的產(chǎn)出示例更加清晰，可減少開發(fā)過程中的溝通成本。

2. Filter 篩選器

Filter 組件是基于公司移動(dòng)端產(chǎn)品均存在的高頻“篩選”場(chǎng)景而總結(jié)的場(chǎng)景（業(yè)務(wù)）組件，其設(shè)計(jì)思路和上方描述的通用組件的設(shè)計(jì)思路相同，筆者此處只強(qiáng)調(diào) 2 個(gè)重點(diǎn)注意事項(xiàng)。

場(chǎng)景組件在設(shè)計(jì)時(shí)遵循“加法”邏輯，從而提升組件的復(fù)用率。組件內(nèi)容分區(qū)塊進(jìn)行封裝，從而增加組件的靈活性。

△篩選器組件

在上圖所示的篩選場(chǎng)景中，單類目和多類目篩選若均為高頻的使用場(chǎng)景，那么單類目和多類目篩選組件均可以抽離成組件并進(jìn)行開發(fā)，且多類目篩選可基于單類目篩選組件進(jìn)行開發(fā)。但是多類目篩選組件是無法覆蓋單類目篩選組件的，組件開發(fā)不同于設(shè)計(jì)稿，設(shè)計(jì)稿可將多個(gè)類目刪除掉只剩余單個(gè)類目，但是組件的代碼邏輯不遵循此刪除邏輯。在原有組件的代碼上修改的開發(fā)成本要高于重新開發(fā)組件。因此，如果要修改多類目篩選組件的邏輯，不如重新開發(fā)出單類目篩選的組件。這也是需要我們牢記的，組件設(shè)計(jì)需要從“原子組件到復(fù)雜組件”，遵循由“簡(jiǎn)單到復(fù)雜”的加法邏輯。

而在組件開發(fā)時(shí)通過“goup”的形式進(jìn)行封裝，可使組件更加靈活。例如，當(dāng)業(yè)務(wù)場(chǎng)景是需要通過“輸入框”組件輸入篩選條件，只要將 Group 中的內(nèi)容改為“輸入框組件”，即只需修改該 group 下的代碼即可，篩選器組件的其他邏輯仍然可復(fù)用，這就提高了組件的通用性和復(fù)用率。

當(dāng)然，F(xiàn)ilter 組件還需要考慮很多設(shè)計(jì)細(xì)節(jié)，例如類目名稱是否顯示為當(dāng)前篩選項(xiàng)名稱、重置的邏輯是什么、確認(rèn)篩選后頁(yè)面信息會(huì)如何變化、篩選項(xiàng)支持單選還是多選等等。復(fù)雜的場(chǎng)景組件通常是由多個(gè)原子組件組合而成，因此組件的邏輯也更為復(fù)雜，組件設(shè)計(jì)的整體流程和交互細(xì)節(jié)也應(yīng)考慮的更加全面。

文章來源：優(yōu)設(shè)網(wǎng)   作者：土撥鼠

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)