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

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

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

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

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

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

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

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

下面我們就來認(rèn)識認(rèn)識彈框：

一、彈框的定義

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

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

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

二、彈框的使用場景

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

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

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

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

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

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

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

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

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

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

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

答案是：不會。

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

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

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

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

打顆栗子：

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

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

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

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

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

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

比如我們在付款前、錄入信息未保存點(diǎn)擊退出按鈕時(shí)，都會出現(xiàn)一個(gè)消息提示彈框。

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

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

三、總結(jié)

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

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

#專欄作家#

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

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

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