編輯導(dǎo)語(yǔ)：你知道什么是彈框嗎？彈框都有什么使用場(chǎng)景呢？本文作者就針對(duì)彈窗，闡述了她關(guān)于別名配置使用彈框交互應(yīng)用的思考，讓我們一起來(lái)交流學(xué)習(xí)吧。

我在思考功能實(shí)現(xiàn)需求的時(shí)候，會(huì)斟酌和判斷使用什么樣的功能和交互樣式供用戶使用，功能路徑既可以完成需求閉環(huán)，又滿足用戶習(xí)慣，設(shè)計(jì)的功能和交互方便用戶操作使用。

前陣子我接到這樣一個(gè)需求：就是需要提供一個(gè)給標(biāo)準(zhǔn)名配置別名的入口。

比如我的姓名是趙大奕，我的別名是叮叮、禾暮、三三等等，當(dāng)前的邏輯是業(yè)務(wù)系統(tǒng)中會(huì)將我的姓名和別名統(tǒng)統(tǒng)展示給業(yè)務(wù)方，但是我的別名如果有100個(gè)的時(shí)候，業(yè)務(wù)方需要選擇就不會(huì)那么方便了。

他們希望，現(xiàn)在只在他們的業(yè)務(wù)系統(tǒng)中看到我的姓名和我叫“叮叮”的別名，但是以后，可能會(huì)希望在他們的業(yè)務(wù)系統(tǒng)中看到我的姓名和我叫“叮叮”、“禾暮”的別名。

別名的配置需求，我們可以將配置的入口做在列表頁(yè)的操作功能中，一點(diǎn)開就是一個(gè)彈框，用彈框支持別名的配置。

也可以做成用戶觸發(fā)后新開一個(gè)網(wǎng)頁(yè)，用戶在詳情頁(yè)中對(duì)別名進(jìn)行重新配置保存。

在我們判斷是否可以使用彈框作為交互方式時(shí)，需要我們對(duì)彈框有一定理解，清楚明白在什么時(shí)候使用彈框，最后根據(jù)需求判斷是否選用彈框作為交互功能。

下面我們就來(lái)認(rèn)識(shí)認(rèn)識(shí)彈框：

一、彈框的定義

彈框是一個(gè)因點(diǎn)擊而觸發(fā)產(chǎn)生的信息承載框，是人機(jī)通過(guò)信息交互的常見方式，它在原有頁(yè)面的最上層出現(xiàn)，不會(huì)使頁(yè)面發(fā)生跳轉(zhuǎn)，主要為了聚焦用戶的注意力，讓用戶關(guān)注框中所承載的信息內(nèi)容。

適合展示較為簡(jiǎn)單的內(nèi)容，多用于消息提示、確認(rèn)消息或提交用戶填寫和修改的簡(jiǎn)單內(nèi)容。

通過(guò)彈框的定義，我們對(duì)于網(wǎng)頁(yè)中再熟悉不過(guò)的彈框有了更深一點(diǎn)的了解，那我們就一起思考下定義中所說(shuō)的彈框適合出沒(méi)的場(chǎng)景吧。

二、彈框的使用場(chǎng)景

1. 當(dāng)修改簡(jiǎn)單的信息內(nèi)容時(shí)，可以使用彈框

有人會(huì)說(shuō)，那我修改一個(gè)信息內(nèi)容時(shí)新開一個(gè)網(wǎng)頁(yè)去修改也可以滿足修改的需求呀。

彈框和網(wǎng)頁(yè)有啥區(qū)別呢？

彈框和網(wǎng)頁(yè)最大的區(qū)別是：彈框和新網(wǎng)頁(yè)內(nèi)容顯示區(qū)域顯示的大小不同——彈框顯示區(qū)域較小，新網(wǎng)頁(yè)顯示區(qū)域?yàn)檎麄€(gè)頁(yè)面。

在操作體驗(yàn)上彈框相對(duì)新網(wǎng)頁(yè)會(huì)更便捷，當(dāng)彈框被觸發(fā)后，彈框的出現(xiàn)不會(huì)讓頁(yè)面發(fā)生跳轉(zhuǎn)，是在頁(yè)面最上層展示一個(gè)信息承載框。

信息承載框的內(nèi)容和原有的頁(yè)面中的信息有層級(jí)關(guān)系，能讓用戶直接聚焦需要修改的部分是哪里。

在一個(gè)新的頁(yè)面在修改簡(jiǎn)單的內(nèi)容時(shí)，彈框比網(wǎng)頁(yè)更快。但彈框相對(duì)應(yīng)的是顯示區(qū)域較小，彈框的承載空間內(nèi)容較少，彈框的承載能力有限，修改的信息數(shù)量和承載的內(nèi)容量是也是受限的。

那么文中開頭我接到的配置別名需求，最后可以判斷出來(lái)最后使用了彈框的交互。

下圖為這個(gè)需求的彈框樣式：

別名的配置的流程為：當(dāng)點(diǎn)擊配置別名時(shí)，彈出的彈框展示當(dāng)前展示的別名，如果用戶不再需要某一個(gè)別名展示出來(lái)，就點(diǎn)擊已選中的別名進(jìn)行取消勾選的操作，再勾選本次需要展示的別名，點(diǎn)擊保存，就完成了別名的重新配置的流程了。

有的名字，它的別名有十幾條，也有的名字別名有幾十條。這時(shí)我們會(huì)使用彈框展示，因?yàn)閺椏蜓b的下這些別名。試想，如果一個(gè)名字，它有幾萬(wàn)條別名，這時(shí)我們會(huì)不會(huì)使用用彈框？

答案是：不會(huì)。

原因是別名數(shù)量太多、內(nèi)容量大、彈框承載不下，這時(shí)我們會(huì)使用新開網(wǎng)頁(yè)承載這些內(nèi)容，因?yàn)樾戮W(wǎng)頁(yè)承載的空間是最大的。

使用彈框，也方便用戶二次確認(rèn)彈框背后主頁(yè)面的信息內(nèi)容，不因?yàn)閬?lái)回切換頁(yè)面而造成時(shí)間上的浪費(fèi)。

2. 用戶錄入并提交簡(jiǎn)單的信息內(nèi)容，可以使用彈框進(jìn)行交互

信息簡(jiǎn)單開一個(gè)新頁(yè)面的時(shí)間會(huì)比直接彈出彈框讓用戶錄入信息的時(shí)間長(zhǎng)，使用彈框進(jìn)行交互是因?yàn)樗颖憬荨?/p>

打顆栗子：

產(chǎn)品中有一個(gè)環(huán)節(jié)的流程是為用戶指定的郵箱傳一份資料，在產(chǎn)品中當(dāng)用戶觸發(fā)了這個(gè)服務(wù)功能，就會(huì)出現(xiàn)一個(gè)入口引導(dǎo)用戶填寫接收資料的郵箱地址。

這個(gè)流程中使用彈框交互，觸發(fā)了這個(gè)服務(wù)功能，頁(yè)面就會(huì)彈出讓用戶輸入信息的彈框，如下圖所示：

相比頁(yè)面的跳轉(zhuǎn)和等待，彈框更加輕便簡(jiǎn)單，用戶填寫完，點(diǎn)擊確定后業(yè)務(wù)流程就完成了。

3. 消息提示時(shí)可以使用彈框

消息提示:消息提示是給予用戶的強(qiáng)提示，當(dāng)用戶在操作重要的內(nèi)容或有風(fēng)險(xiǎn)的內(nèi)容時(shí)會(huì)使用彈框給予用戶提示，引起用戶注意，讓用戶進(jìn)行判斷。

彈框的出現(xiàn)會(huì)中斷用戶繼續(xù)操作的行為，讓用戶注意力聚焦到彈框中的文字內(nèi)容。所以在希望用戶引起注意的節(jié)點(diǎn)時(shí)，會(huì)使用彈框來(lái)達(dá)到提醒的目標(biāo)。

比如我們?cè)诟犊钋?、錄入信息未保存點(diǎn)擊退出按鈕時(shí)，都會(huì)出現(xiàn)一個(gè)消息提示彈框。

它們的出現(xiàn)，都是為了提醒我們?nèi)绻^續(xù)操作行為會(huì)有什么樣的結(jié)果。彈框設(shè)置按鈕的原因是因?yàn)?，我們點(diǎn)擊按鈕也是要花費(fèi)時(shí)間的，點(diǎn)擊按鈕的過(guò)程，也是為了給我們留出一定的緩沖考慮的時(shí)間。

現(xiàn)在我們也可以很容易的總結(jié)出彈框的優(yōu)缺點(diǎn)：優(yōu)點(diǎn)是相比于網(wǎng)頁(yè)，彈框具有便捷性，用戶體驗(yàn)會(huì)更好；彈框的缺點(diǎn)是相比于網(wǎng)頁(yè)，彈框顯示區(qū)域具有局限性，承載數(shù)據(jù)量有限。

三、總結(jié)

是否使用彈框作為交互，是產(chǎn)品經(jīng)理根據(jù)業(yè)務(wù)需求，結(jié)合當(dāng)下場(chǎng)景思考判斷的。

設(shè)計(jì)后產(chǎn)品經(jīng)理可以做一個(gè)原型交互，把自己當(dāng)成用戶小白，重新打開原型圖，自己給自己提需求，走完一遍交互流程，來(lái)驗(yàn)證彈框是否適用，是否滿足需求和場(chǎng)景。

#專欄作家#

暮暮，公眾號(hào)：財(cái)務(wù)產(chǎn)品人，人人都是產(chǎn)品經(jīng)理專欄作家。擁有好奇心且極度認(rèn)真的產(chǎn)品同學(xué)。擁有財(cái)務(wù)理論知識(shí)和財(cái)務(wù)產(chǎn)品經(jīng)驗(yàn)，目前在醫(yī)療健康領(lǐng)域，擅長(zhǎng)中臺(tái)產(chǎn)品設(shè)計(jì)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

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