編輯導語：你知道什么是彈框嗎？彈框都有什么使用場景呢？本文作者就針對彈窗，闡述了她關于別名配置使用彈框交互應用的思考，讓我們一起來交流學習吧。

我在思考功能實現需求的時候，會斟酌和判斷使用什么樣的功能和交互樣式供用戶使用，功能路徑既可以完成需求閉環，又滿足用戶習慣，設計的功能和交互方便用戶操作使用。

前陣子我接到這樣一個需求：就是需要提供一個給標準名配置別名的入口。

比如我的姓名是趙大奕，我的別名是叮叮、禾暮、三三等等，當前的邏輯是業務系統中會將我的姓名和別名統統展示給業務方，但是我的別名如果有100個的時候，業務方需要選擇就不會那么方便了。

他們希望，現在只在他們的業務系統中看到我的姓名和我叫“叮?！钡膭e名，但是以后，可能會希望在他們的業務系統中看到我的姓名和我叫“叮?！?、“禾暮”的別名。

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

也可以做成用戶觸發后新開一個網頁，用戶在詳情頁中對別名進行重新配置保存。

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

下面我們就來認識認識彈框：

一、彈框的定義

彈框是一個因點擊而觸發產生的信息承載框，是人機通過信息交互的常見方式，它在原有頁面的最上層出現，不會使頁面發生跳轉，主要為了聚焦用戶的注意力，讓用戶關注框中所承載的信息內容。

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

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

二、彈框的使用場景

1. 當修改簡單的信息內容時，可以使用彈框

有人會說，那我修改一個信息內容時新開一個網頁去修改也可以滿足修改的需求呀。

彈框和網頁有啥區別呢？

彈框和網頁最大的區別是：彈框和新網頁內容顯示區域顯示的大小不同——彈框顯示區域較小，新網頁顯示區域為整個頁面。

在操作體驗上彈框相對新網頁會更便捷，當彈框被觸發后，彈框的出現不會讓頁面發生跳轉，是在頁面最上層展示一個信息承載框。

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

在一個新的頁面在修改簡單的內容時，彈框比網頁更快。但彈框相對應的是顯示區域較小，彈框的承載空間內容較少，彈框的承載能力有限，修改的信息數量和承載的內容量是也是受限的。

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

下圖為這個需求的彈框樣式：

別名的配置的流程為：當點擊配置別名時，彈出的彈框展示當前展示的別名，如果用戶不再需要某一個別名展示出來，就點擊已選中的別名進行取消勾選的操作，再勾選本次需要展示的別名，點擊保存，就完成了別名的重新配置的流程了。

有的名字，它的別名有十幾條，也有的名字別名有幾十條。這時我們會使用彈框展示，因為彈框裝的下這些別名。試想，如果一個名字，它有幾萬條別名，這時我們會不會使用用彈框？

答案是：不會。

原因是別名數量太多、內容量大、彈框承載不下，這時我們會使用新開網頁承載這些內容，因為新網頁承載的空間是最大的。

使用彈框，也方便用戶二次確認彈框背后主頁面的信息內容，不因為來回切換頁面而造成時間上的浪費。

2. 用戶錄入并提交簡單的信息內容，可以使用彈框進行交互

信息簡單開一個新頁面的時間會比直接彈出彈框讓用戶錄入信息的時間長，使用彈框進行交互是因為它更加便捷。

打顆栗子：

產品中有一個環節的流程是為用戶指定的郵箱傳一份資料，在產品中當用戶觸發了這個服務功能，就會出現一個入口引導用戶填寫接收資料的郵箱地址。

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

相比頁面的跳轉和等待，彈框更加輕便簡單，用戶填寫完，點擊確定后業務流程就完成了。

3. 消息提示時可以使用彈框

消息提示:消息提示是給予用戶的強提示，當用戶在操作重要的內容或有風險的內容時會使用彈框給予用戶提示，引起用戶注意，讓用戶進行判斷。

彈框的出現會中斷用戶繼續操作的行為，讓用戶注意力聚焦到彈框中的文字內容。所以在希望用戶引起注意的節點時，會使用彈框來達到提醒的目標。

比如我們在付款前、錄入信息未保存點擊退出按鈕時，都會出現一個消息提示彈框。

它們的出現，都是為了提醒我們如果繼續操作行為會有什么樣的結果。彈框設置按鈕的原因是因為，我們點擊按鈕也是要花費時間的，點擊按鈕的過程，也是為了給我們留出一定的緩沖考慮的時間。

現在我們也可以很容易的總結出彈框的優缺點：優點是相比于網頁，彈框具有便捷性，用戶體驗會更好；彈框的缺點是相比于網頁，彈框顯示區域具有局限性，承載數據量有限。

三、總結

是否使用彈框作為交互，是產品經理根據業務需求，結合當下場景思考判斷的。

設計后產品經理可以做一個原型交互，把自己當成用戶小白，重新打開原型圖，自己給自己提需求，走完一遍交互流程，來驗證彈框是否適用，是否滿足需求和場景。

#專欄作家#

暮暮，公眾號：財務產品人，人人都是產品經理專欄作家。擁有好奇心且極度認真的產品同學。擁有財務理論知識和財務產品經驗，目前在醫療健康領域，擅長中臺產品設計。

本文原創發布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議