在B端產(chǎn)品中彈窗已經(jīng)被更多的設(shè)計(jì)師關(guān)注和使用。彈窗作為常見的表現(xiàn)形式不僅與當(dāng)下流行的卡片式設(shè)計(jì)形式接近，而且它也是展現(xiàn)在用戶界面頁面之上的一種容器，能在不影響當(dāng)前頁面信息堆積的情況下更好的擴(kuò)展更多的信息內(nèi)容。由于內(nèi)容集中在彈層上并且彈窗以彈出或平滑展開的動(dòng)作出現(xiàn)，所以他較吸引用戶視覺，并且用戶在操作時(shí)不用離開當(dāng)前頁面即可完成某項(xiàng)任務(wù)。
彈窗交互形式分為「模態(tài)彈窗」和「非模態(tài)彈窗」兩種，使用場景類型也可以分為「任務(wù)」、「內(nèi)容反饋」、「信息提示」三種。其中「模態(tài)彈窗」大多數(shù)情況下都出現(xiàn)在用戶處理問題的關(guān)鍵時(shí)刻，突然吊起「模態(tài)彈窗」的交互形式如果使用不恰當(dāng)，那么極易中斷用戶操作導(dǎo)致用戶產(chǎn)生厭惡感。反之彈窗可幫助用戶更加有效的完成界面中的復(fù)雜任務(wù)，所以設(shè)計(jì)師還需合理正確選擇使用。用戶界面中彈窗中的按鈕文案也是設(shè)計(jì)師經(jīng)常拿捏不準(zhǔn)的地方，比如「確定」與「確認(rèn)」、「提交」與「發(fā)布」、「關(guān)閉」與「取消」它們的區(qū)別是什么？它們分別用在什么場景下最準(zhǔn)確？根據(jù)以上概要我們聊聊關(guān)于彈窗的一些設(shè)計(jì)思考以及如何正確選擇彈窗。
1. 彈窗交互類型
我們先介紹一下彈窗的組件，彈窗的組件類型有多種，通常形式為一個(gè)容器卡片承載對應(yīng)的信息內(nèi)容。在網(wǎng)頁中應(yīng)用中常用的彈窗基礎(chǔ)組件有「對話框（Modal）」、「氣泡（Popover）」、「文字提示（Tooltip）」、「通知提示（Notification）」、「抽屜（Drawer）」、「氣泡確認(rèn)框（Popconfirm）」、「全局提示（Message）」、「警告提示（Alert）」。彈窗交互形式分為模態(tài)、非模態(tài)兩大類，如下圖所示：
模態(tài)
「模態(tài)彈窗」的形式極易破壞用戶操作流，強(qiáng)制用戶必須回應(yīng)并操作，否則不能進(jìn)行其他操作。「流」在《最優(yōu)體驗(yàn)的心理學(xué)》中概括是「當(dāng)人們?nèi)硇耐度肽硞(gè)活動(dòng)時(shí)，會(huì)對周邊視而不見」。當(dāng)使用「模態(tài)彈窗」時(shí)如果使用不恰當(dāng)會(huì)影響用戶操作界面時(shí)的「控制權(quán)」，容易產(chǎn)生厭惡感，尤其是在用戶被動(dòng)且無前提感知的情況下出現(xiàn)時(shí)極為明顯。因?yàn)，?dāng)一個(gè)「模態(tài)彈窗」打開時(shí)，其實(shí)是強(qiáng)制讓用戶與該對話框進(jìn)行交互，而用戶界面中其它內(nèi)容是不可操作的，它限制了用戶使用界面的自由權(quán)。如下圖所示是用戶對模態(tài)彈窗的處理流程。
非模態(tài)
「非模態(tài)彈窗」我們可以大概理解它為不影響用戶體驗(yàn)，用戶可以不作回應(yīng)。特點(diǎn)是不會(huì)打斷用戶正常的操作，更不會(huì)破壞用戶「操作流」，用戶更享受界面中「控制權(quán)」，并且它能夠在關(guān)鍵時(shí)刻幫助用戶的任務(wù)狀態(tài)、信息提示，如：成功、失敗、錯(cuò)誤、功能操作提示、暗提示等。當(dāng)頁面中出現(xiàn)「非模態(tài)彈窗」時(shí)用戶依然可以操作主界面。大部分「非模態(tài)彈窗」通常都有時(shí)間限制，出現(xiàn)一段時(shí)間后就會(huì)自動(dòng)消失。當(dāng)然也有部分需要操作行為動(dòng)作才會(huì)消失。比如，「文字提示」它需要用戶懸停在某個(gè)焦點(diǎn)時(shí)出現(xiàn)，移除才消失！笟馀荽_認(rèn)彈窗」它需要用戶點(diǎn)擊某個(gè)操作出現(xiàn)，也需要用戶點(diǎn)擊指定動(dòng)作才可消失。下圖所示是用戶對「非模態(tài)彈窗」的處理流程。
在艾倫·庫珀在《About Face》中提到過一個(gè)概念就是「富視覺非模態(tài)反饋」，它的「富」在于能夠讓用戶深入全面的感知信息，讓用戶了解一個(gè)進(jìn)程的狀態(tài)或者屬性。它的「視覺」是指按用戶習(xí)慣的方式使用界面中的元素。它的「非模態(tài)」在于不打斷用戶的情況下信息能及時(shí)地顯示出來，即不需要用戶做特殊動(dòng)作或者轉(zhuǎn)換模式，就能看到和理解這些反饋。它存在的意義在于，幫助用戶更加有效的完成界面中的復(fù)雜任務(wù)。
「非模態(tài)彈窗」大部分是一些內(nèi)容反饋和信息提示，如：「文字提示」、「通知提示」、「全局提示等」，我們這邊統(tǒng)稱它為「信息反饋」。「信息反饋」存在的意義是及時(shí)有效的目的幫助用戶完成任務(wù)目標(biāo)，其中「有效」包含了「提供有用的信息反饋，提高任務(wù)的操作效率和可理解程度」。
有用
有用的「信息反饋」：
- 告訴用戶發(fā)生了什么，剛剛做了什么以及前面的操作導(dǎo)致現(xiàn)所處的狀態(tài)，讓用戶感受到一切都在掌握之中；
- 告訴用戶哪些過程正在進(jìn)行中，需要下一步需要做什么，及時(shí)告訴這一步哪些地方操作有誤。
效率
提高用戶的操作效率：
- 在不打斷用戶行為操作的前提下提供良好的反饋機(jī)制，用戶看到反饋后可繼續(xù)操作當(dāng)前頁面；
- 在用戶出現(xiàn)錯(cuò)誤之前及時(shí)制止，盡量避免出現(xiàn)錯(cuò)誤后才的告知用戶；
- 減少用戶出錯(cuò)率，設(shè)計(jì)師必須清楚不出錯(cuò)不代表用戶總是正確的，而是杜絕「自以為是」地糾錯(cuò)用戶錯(cuò)誤，正確引導(dǎo)用戶形成良好的操作環(huán)境。
彈窗的使用場景類型我大致的把他們分為三大類，分別是：任務(wù)；內(nèi)容反饋；信息提示。
任務(wù)類型
在用戶需操作相對復(fù)雜的擴(kuò)展功能時(shí)更常見的是用「模態(tài)彈窗」，它承載當(dāng)前頁面的擴(kuò)展內(nèi)容，所以常常用到「對話框」、「抽屜」兩種類型，他們除了有標(biāo)題、按鈕之外通常還會(huì)有一些任務(wù)表單，它是給予當(dāng)前主頁面之上的一種目標(biāo)任務(wù)，承載了用戶明確目標(biāo)的擴(kuò)展應(yīng)用。
內(nèi)容反饋類型
用戶輸入信息或操作用戶界面時(shí)，系統(tǒng)給出相應(yīng)的提示時(shí)出現(xiàn)內(nèi)容反饋機(jī)制，它屬于「非模態(tài)彈窗」類型，在設(shè)計(jì)師設(shè)計(jì)界面時(shí)常常用到「全局提示」、「通知提示」、「氣泡確認(rèn)框」三種類型作為反饋消息。它的「非模態(tài)」在于用戶操作后不打斷用戶的情況下及時(shí)地顯示出來，明確告知用戶的一些反饋結(jié)果，幫助用戶更加有效的完成界面中的復(fù)雜任務(wù)。
信息提示類型
對于「內(nèi)容反饋」及「信息提示」我把這兩種類型都統(tǒng)稱為「信息反饋」，因?yàn)樗鼈儍煞N類型很相似，都屬于「非模態(tài)彈窗」類型。并且他們存在的意義都是及時(shí)有效的幫助用戶完成任務(wù)目標(biāo)，提高任務(wù)的操作效率和可理解程度」。信息提示常常用到「文字提示」、「氣泡」、「警告提示」三種形式展現(xiàn)給用戶。
小結(jié)
根據(jù)上文我們可總結(jié)到，彈窗是信息反饋、內(nèi)容展示等基礎(chǔ)組件的統(tǒng)稱。各類組件可以根據(jù)類型屬性進(jìn)行分類，如：彈窗的交互形式分可為「模態(tài)彈窗類型」和「非模態(tài)彈窗類型」兩大類。根據(jù)其功能屬性和使用場景我們大致可以把他們分為三大類，分別是為：任務(wù)；內(nèi)容反饋；信息提示。其中「模態(tài)彈窗類型」阻斷性較強(qiáng)，用戶使用容易被動(dòng)阻斷，但是其優(yōu)點(diǎn)是更加的突出，幾乎不被用戶忽略！阜悄B(tài)彈窗類型」阻斷性更弱，用戶操作時(shí)界面時(shí)不會(huì)被打斷，但是往往它很容易被用戶忽略。所以，它們各有優(yōu)劣勢，設(shè)計(jì)師可根據(jù)它們的特點(diǎn)靈活運(yùn)用，為了讓大家更加清楚理解，下面我們可以針對「模態(tài)彈窗類型」進(jìn)行實(shí)際的案例分析（非模態(tài)彈窗類型下篇詳析）。
1. 對話框
對話框在我們?nèi)粘ＴO(shè)計(jì)用戶界面時(shí)最為頻繁的彈窗形式之一。該組件既可以用作簡單的任務(wù)填寫，也可以作為提示控件中的一種。使用時(shí)吸引用戶注意力程度較強(qiáng)，并且用戶必須執(zhí)行對應(yīng)操作后才可以對其進(jìn)行關(guān)閉。對話框最初用作于重要或高風(fēng)險(xiǎn)操作時(shí)彈出的一個(gè)對話框，它有著較強(qiáng)醒目的警示作用，只有在傳遞非常重要，且可操作的信息時(shí)才需要使用它。隨著B端產(chǎn)品的不斷發(fā)展，對話框既可以用作簡單的任務(wù)填寫，如：登錄注冊、表單錄入、信息修改、信息展示等，也可以是一個(gè)超強(qiáng)的信息提示，如：成功、失敗、警示等。
因?yàn)椤笇υ捒颉古c「抽屜」的交互類型都屬于「模態(tài)彈窗類型」，并且他們都屬于任務(wù)類型彈窗，所以在這里我們先針對「模態(tài)彈窗類型」（對話框、抽屜）舉幾個(gè)較為典型例子，看看他們實(shí)際應(yīng)用場景的效果及使用特點(diǎn)。我們可以先看看對話框，對話框在Web端的應(yīng)用中可分為：確認(rèn)對話框；操作反饋；表單編輯；內(nèi)容展示這四大類型。
確認(rèn)對話框類型
下圖為Google郵箱中的授權(quán)確認(rèn)對話框，當(dāng)你點(diǎn)擊「發(fā)起會(huì)議」，如果用戶第一次使用此功能并且系統(tǒng)沒有得到用使用攝像頭、麥克風(fēng)等授權(quán)功能時(shí)，系統(tǒng)為了最大程度提高用戶權(quán)限的開啟率（不開啟此視頻會(huì)議功能幾乎沒法用），那么這時(shí)候會(huì)彈出蘋果系統(tǒng)「確認(rèn)對話框」快速讓用戶進(jìn)行操作，減少用戶需要關(guān)閉當(dāng)前頁面后再去尋找相關(guān)設(shè)置的這種不必要的操作。以及Google郵箱系統(tǒng)同時(shí)也會(huì)對應(yīng)的彈出對話框，建議用戶必須授權(quán)，不然會(huì)導(dǎo)致其他參與者看不到你并聽不到你的聲音。
下圖為Facebook Ads平臺(tái)截圖，此平臺(tái)主要針對的人群是想要在Facebook上投放廣告的廣告主們，廣告主可以進(jìn)行廣告版位選擇、人群定向、地域定向選擇等操作進(jìn)行廣告創(chuàng)建以及廣告投后效果追蹤。并且可以把廣告投在Facebook、Instagram、Messenger等產(chǎn)品中，它是一款典型的B端類產(chǎn)品。在Facebook Ads的主要?jiǎng)?chuàng)編流程中「確認(rèn)對話框」就起到較大作用（注：創(chuàng)編主流程屬于業(yè)務(wù)邏輯相當(dāng)復(fù)雜的表單），當(dāng)廣告主創(chuàng)建廣告時(shí)可能把整個(gè)創(chuàng)建流程都設(shè)置完成，在沒有點(diǎn)擊確認(rèn)按鈕完成創(chuàng)建廣告時(shí)廣告主可能誤操作、也可能是中途想要跳轉(zhuǎn)至其它頁面，這時(shí)候會(huì)彈出「對話框」讓用戶確認(rèn)是否要退出創(chuàng)建，退出后可能導(dǎo)致更改的內(nèi)容未保存而丟失的后果。就因?yàn)檫@個(gè)確認(rèn)對話框大大減少了用戶的出錯(cuò)率。因?yàn)椋?dāng)用戶在未保存設(shè)置時(shí)如果退出的話沒有一個(gè)確認(rèn)彈窗，用戶是無感、預(yù)期而帶來的影響的后果。所以在較重要或者是某操作會(huì)給用戶帶一系列后果的話，需要一個(gè)「對話框」提示用戶。
操作反饋類型
「操作反饋」的目的是告訴用戶其操作的結(jié)果、預(yù)期帶來的影響或后果，它是產(chǎn)品與用戶交互的重要觸點(diǎn)，如果設(shè)計(jì)師能夠合理的使用反饋設(shè)計(jì)，那么可以使得產(chǎn)品與用戶之間建立一個(gè)良好循環(huán)的互動(dòng)，并且可以幫助用戶更好的了解產(chǎn)品，避免或減少困惑及錯(cuò)誤，提升用戶的整體使用體驗(yàn)。如下圖所示為Google郵箱「視頻會(huì)議」在未授權(quán)情況下的「反饋對話框」，當(dāng)用戶第一打開此功能時(shí)用戶未授予給系統(tǒng)攝像頭和麥克風(fēng)權(quán)限后，那么導(dǎo)致系統(tǒng)無法獲取到攝像頭和麥克風(fēng)權(quán)限導(dǎo)致這兩個(gè)功能處于禁用狀態(tài)，并同時(shí)彈出反饋類型對話告知用戶攝像頭與麥克風(fēng)已被屏蔽狀態(tài)，引導(dǎo)用戶開啟授權(quán)路徑。
表單編輯類型
上一篇文章有介紹過關(guān)于表單的內(nèi)容，它的核心功能是采集、傳遞、提交數(shù)據(jù)信息，其作為獲取用戶輸入的重要交互方式，也承擔(dān)著將問題和答案進(jìn)行配對的角色。當(dāng)頁面中有些擴(kuò)展操作需要用戶填寫時(shí)，但又不想用戶跳出當(dāng)前頁面時(shí)可使用彈窗的方式進(jìn)行操作，它能夠有效減少頁面跳轉(zhuǎn)頻率。如下圖中實(shí)際用場景有西瓜視頻的登錄注冊、谷歌加入會(huì)議填寫會(huì)議代碼、站酷文件上傳、Facebook Ads視頻制作工具中都屬于表單類對話框的應(yīng)用。
在這里我們引入一個(gè)思考點(diǎn)，為什么有些網(wǎng)站需要登錄注冊以后才可訪問頁面，而有些網(wǎng)站需要完成登陸才可以訪問主頁面呢？
其實(shí)這是由產(chǎn)品特性決定的產(chǎn)品策略，先講下不必登錄就能使用的業(yè)務(wù)場景。就拿優(yōu)酷視頻來舉例子吧，優(yōu)酷視頻屬于大型視頻分享類網(wǎng)站，主要內(nèi)容體系由劇集、綜藝等四大頭部內(nèi)容矩陣和新聞、文化財(cái)經(jīng)等八大垂直內(nèi)容構(gòu)成，它不需要用登錄作為一個(gè)身份門檻，它注重內(nèi)容的質(zhì)量、數(shù)量達(dá)到吸引用戶、留住用戶的作用。所以，從產(chǎn)品的形態(tài)、產(chǎn)品的屬性、業(yè)務(wù)的需求上來講它并不需要用戶來登錄注冊。既然登錄注冊不那么重要不如直接降低用戶使用產(chǎn)品的門檻，讓用戶直接進(jìn)入產(chǎn)品就能使用、瀏覽、操作。當(dāng)用戶對產(chǎn)生興趣以后想進(jìn)行下一步操作時(shí)，比方播放記錄同步、體驗(yàn)高清等功能時(shí)，才有必要去讓用戶登錄注冊，獲取用戶的身份等信息，達(dá)到用戶轉(zhuǎn)化作用。
我們再來講講必須登錄的業(yè)務(wù)場景。工具類、設(shè)計(jì)類產(chǎn)品大部分是需要登錄之后才能使用很多，因?yàn)榇祟惍a(chǎn)品更強(qiáng)調(diào)角色、身份。就拿飛書舉例，飛書屬于工具協(xié)作類產(chǎn)品，當(dāng)用戶未登錄時(shí)只能看到產(chǎn)品介紹頁。它屬于典型的工具類的溝通協(xié)作產(chǎn)品，它與新聞閱讀類產(chǎn)品不同的是，使用它的用戶群體目的比較明確，所以首頁做成一個(gè)功能介紹頁面，引導(dǎo)查看者了解產(chǎn)品核心功能從而達(dá)到轉(zhuǎn)化成用戶群體。其中，功能介紹頁也是一個(gè)網(wǎng)站的門面，首頁想要出彩，不僅需要在布局上做的合理還需要考慮如何提高網(wǎng)站的色彩、插圖等元素的亮點(diǎn)、統(tǒng)一性達(dá)到加強(qiáng)用戶的印象。在設(shè)計(jì)網(wǎng)站時(shí)，首頁的功能介紹頁一定要充分突出自身產(chǎn)品特色，強(qiáng)調(diào)出自身產(chǎn)品的優(yōu)勢和亮點(diǎn)，如飛書首頁主要是想突出其產(chǎn)品能夠提高工作效率，所以直接把「飛書向所有組織與企業(yè)免費(fèi)開放」slogan這句話放在了首頁的第一屏，輔助文案詳細(xì)的介紹了產(chǎn)品的核心功能，直接抓住用戶的痛點(diǎn)。用戶完成注冊以后，進(jìn)入到功能頁面。
內(nèi)容展示類型
把重要并且需要強(qiáng)調(diào)的信息推送給用給用戶時(shí)，我這里把它歸類為「內(nèi)容展示類型」。它常常被用在產(chǎn)品功能更新升級、用戶協(xié)議等場景。比如：有些網(wǎng)站涉及一些法務(wù)內(nèi)容確認(rèn)時(shí)，在用戶使用產(chǎn)品時(shí)一般會(huì)以彈窗的形式提醒用戶查看或確認(rèn)，由于用戶協(xié)議往往是以傳遞內(nèi)容為主，因此設(shè)計(jì)時(shí)建議采用純文本形式嵌套在對話框中。注：一般情況下用戶額協(xié)議由于內(nèi)容較多，設(shè)計(jì)師應(yīng)當(dāng)考慮到對話框的高度適配內(nèi)容的展示，需要設(shè)置一個(gè)最高值內(nèi)容超過后以內(nèi)部滾動(dòng)的形式展示，下圖為淘寶的注冊協(xié)議。
比如說還有一些場景是表單的信息回填展示，它能夠幫助用戶快速記憶或需要用戶對信息進(jìn)行校驗(yàn)時(shí)會(huì)用到此類型。如下圖為Facebook Ad創(chuàng)編主流程中的信息展示類彈窗，場景是廣告主在創(chuàng)建廣告中，由于上一次創(chuàng)建廣告時(shí)中途可能中途出現(xiàn)了各種原因而導(dǎo)致退出完成編輯，所以當(dāng)用戶再此進(jìn)入到創(chuàng)建流程時(shí)會(huì)彈窗對話框告訴用戶是否繼續(xù)編輯還是重新開始，在這里對話框用的很巧妙，它給予用戶記憶與選擇，當(dāng)用戶選擇繼續(xù)創(chuàng)建時(shí)那么用戶就不必重復(fù)編輯上一次已經(jīng)編輯過的內(nèi)容，大大提升了戶的整體使用效率。
2. 抽屜
「抽屜」作為模態(tài)類彈窗的擴(kuò)展應(yīng)用的一種，它與對話框在功能上很相似，都屬于任務(wù)型彈窗，并且都屬于「模態(tài)形式」。但是「抽屜」的出現(xiàn)形式與「對話框」完全不一樣，對話框是在主頁面中以彈出的方式出現(xiàn)，而抽屜是與主頁面有著相對位置關(guān)系平滑展開出現(xiàn)。抽屜出現(xiàn)的形式可以分為四種類型，分別是：向左平移；橫向右平移；底部向上平移；頂部向下平移，常規(guī)情況下設(shè)計(jì)師在Web端中使用橫向左平移頻率最高。
與「對話框」對比，「抽屜」在使用場景也有它的優(yōu)劣勢。優(yōu)勢：「抽屜」的頁面空間更大，它能夠承載更多的內(nèi)容、信息，它與主頁面親密度更高；劣勢：「抽屜」的靈活度比較低，比如「對話框」可以根據(jù)業(yè)務(wù)的內(nèi)容多少去變化它的寬度與高度，而抽屜只能橫向/縱向降低尺寸。所以，「抽屜」適用范圍更小，大部分場景下都用在較復(fù)雜的表單及字段較多詳情頁。「抽屜」在Web端的應(yīng)用中可分為：內(nèi)容展示；表單編輯這兩大類型。
內(nèi)容展示類型
說到「內(nèi)容展示抽屜」我們可以拿分享銷客作為案例分享。此平臺(tái)針對的人群各企業(yè)銷售人員，主要核心功能特點(diǎn)是為企業(yè)提供內(nèi)部銷售一站式管理。下圖所示為分享銷客客戶詳情截圖，在這里它選擇了使用「抽屜」作為承載內(nèi)容，主要原因是因?yàn)榭蛻粼敿?xì)的字段、內(nèi)容較多，信息較為龐大，剛剛在上面也有講到「抽屜」最大特點(diǎn)是空間較大，能夠比「對話框」更友好的承載龐大信息內(nèi)容，并且「抽屜」是由平滑展開出現(xiàn)它比對話框跳出感更弱。在這里分享銷客使用「抽屜」可方便銷售能快速能看到客戶全量的詳情數(shù)據(jù)，例如：客戶聯(lián)系人報(bào)表，跟進(jìn)動(dòng)態(tài)等內(nèi)容，此使用場景屬于比較典型的抽屜用法。
表單編輯類型
巨量引擎廣告投放平臺(tái)中「創(chuàng)意工作臺(tái)」用到過此類型「抽屜」，此功能是為了解決在創(chuàng)建廣告時(shí)素材制作成高等問題，平臺(tái)專門為優(yōu)化師提供了高效和便捷的素材制作工具。如圖所示為「創(chuàng)意工作臺(tái)」其中的「批量制圖」功能，在此場景下用戶在只需編輯和上傳一些必填字段即可批量生成多個(gè)不同風(fēng)格的視頻。其中，因?yàn)樯梢曨l時(shí)間會(huì)比較漫長，所以用戶可以暫時(shí)收起「抽屜」繼續(xù)操作其它內(nèi)容，當(dāng)用戶有需要時(shí)再點(diǎn)擊展開即可，這也是屬于抽屜的獨(dú)有一種特性。所以，這時(shí)候使用「抽屜」會(huì)比使用「對話框」更加合適。
小結(jié)
總結(jié)上文，模態(tài)彈窗包含了兩種基礎(chǔ)組件，分別是「對話框」與「抽屜」。其中「對話框」根據(jù)它在Web端實(shí)際的應(yīng)用場景我們把它分為成4大類型，分別為：確認(rèn)對話框；操作反饋；表單編輯；內(nèi)容展示這四大類型。它的應(yīng)用范圍更廣，靈活度更高。而「抽屜」頁面空間足夠大，它們承載更多內(nèi)容，可進(jìn)行更復(fù)雜的操縱，在Web端由于它的靈活度較低，所以可應(yīng)用的的場景較少，分別：內(nèi)容展示；表單編輯這兩大類型。
在用戶界面中文案是用戶與產(chǎn)品的溝通方式，其中「達(dá)意」是最終目的，也是最重要的宗旨。如果用戶無法理解你想要傳達(dá)的意思，那么用戶將無法良好的使用產(chǎn)品，文案也失去了存在的意義。在這里我們重點(diǎn)分析一下關(guān)于彈窗中按鈕容易發(fā)生歧義的幾個(gè)具體代表性的案例，比如確定與確認(rèn)、提交與發(fā)布、關(guān)閉與取消，它們的區(qū)別是什么，它們分別用在什么場景下最準(zhǔn)確？
確定or確認(rèn)？
我們先講講彈窗中常常容易被忽視、也容易被混淆的「確定」和「確認(rèn)」按鈕，它們常常與「取消」按鈕組合使用。從表面的中文字符上看他們很接近，所以造成很多產(chǎn)品設(shè)計(jì)師傻傻分不清導(dǎo)致把二者混合著用。導(dǎo)致界面中不僅文案不統(tǒng)一，也容易混淆用戶的認(rèn)知。
在確認(rèn)彈窗場景中，「確定」對應(yīng)的場景是用戶在前置場景中對頁面中進(jìn)行了配置或某項(xiàng)重要操作，并且這個(gè)是操作不可逆，需要彈出確認(rèn)彈窗告訴用戶這次的操作會(huì)造成后續(xù)一些影響，需要用戶進(jìn)行抉擇。如下圖為Facebook Ads的賬戶設(shè)置，當(dāng)用戶更改推廣目的選項(xiàng)時(shí)，這時(shí)彈出確認(rèn)彈窗并告訴用戶是否確定更改，如果用戶確定后修改將生效，取消則不做更改。
「確認(rèn)」對應(yīng)的場景是用戶在彈窗中進(jìn)行了選擇、信息填寫等配置操作，需要用戶進(jìn)行信息校驗(yàn)確認(rèn)的情況下使用。如下圖所示為知乎的富文本編輯頁面，當(dāng)用戶需要進(jìn)行一些擴(kuò)展操作場景時(shí)。比如用戶使用要插入文本鏈接時(shí)彈出表單類彈窗，并且用戶需要在彈窗中進(jìn)行內(nèi)容填寫和內(nèi)容核實(shí)，這時(shí)彈窗中的按鈕需使用「確認(rèn)」比較合適。
提交or發(fā)布？
「提交」與「發(fā)布」按鈕文案因?yàn)槭褂脠鼍敖疲步?jīng)常容易被混用，所以設(shè)計(jì)師不僅需要捋清楚這兩個(gè)文案的不同使用場景，還需要在日常設(shè)計(jì)中了解產(chǎn)品的策略即可減少錯(cuò)誤。下面我們來分析一下「提交」與「發(fā)布」差異點(diǎn)，以及它們用在哪個(gè)場景下最為合適。
「提交」對應(yīng)的場景是用戶需要對某個(gè)權(quán)限進(jìn)行申請，并需要進(jìn)行一些信息填寫。在用戶填寫內(nèi)容時(shí)符合字段要求即可其，相關(guān)信息不需要后臺(tái)審核。如下圖為菜鳥全球供應(yīng)鏈服務(wù)合作申請，用戶只需要將一些相關(guān)信息填寫即可，不用等待系統(tǒng)的審批，表單提交后相關(guān)營銷會(huì)主動(dòng)聯(lián)系。
在一些用戶反饋、用戶評價(jià)場景中，使用「提交」比「發(fā)布」更加的輕松愉悅。其中「發(fā)布」給人帶來的感覺是會(huì)顯得更加的莊重，對后續(xù)影響力更大，格式要求更高，而「提交」給人即時(shí)性、快速反饋的感覺。下圖為美團(tuán)外賣與京東的商品評價(jià)頁面，由于評價(jià)對正常運(yùn)營影響較小，更多的是給其它消費(fèi)者輔助決策和意見參考。他們在商品評價(jià)頁面都使用了「提交」作為按鈕文案。
「發(fā)布」常用在工單、作品、資料等內(nèi)容發(fā)布到公共場景，部分場景甚至需要系統(tǒng)后置信息內(nèi)容審核，再反饋給用戶審核是否通過。如下圖所示為Facebook Ads廣告創(chuàng)編的功能，由于廣告發(fā)布權(quán)重較高，當(dāng)用戶發(fā)布廣告會(huì)涉及到后面影響一系列影響，這時(shí)候不僅使用了「發(fā)布」作為按鈕文案，同時(shí)彈出「確認(rèn)對話框」對用戶進(jìn)行事件強(qiáng)調(diào)。
如下圖分別為淘寶（左）和京東（右）的商品評價(jià)頁。其中，淘寶使用「發(fā)布」而京東使用的是「提交」，在商品評價(jià)頁整體看功能好像并沒有多大的區(qū)別，但二者最大的區(qū)別不在頁面展示的內(nèi)容上，而在于評分背后的產(chǎn)品策略。
我們先分析一下淘寶的評價(jià)體系，淘寶屬于B2B電商平臺(tái)，主要以心、鉆石、皇冠等形式作為信用評價(jià)等級劃分，所以淘寶比較看重評價(jià)結(jié)果。其中，淘寶還根據(jù)評分做了一些機(jī)制，比如評價(jià)高直接影響信用評分，評分影響了其店鋪的搜索排序、產(chǎn)品的搜索排序、金牌賣家考核等等，用戶更愿意選擇評分高、信譽(yù)度高的店鋪進(jìn)行商品交易？偟膩碚f，淘寶更看重用戶所發(fā)表的評價(jià)，甚至淘寶會(huì)使用紅包的形式激勵(lì)購買者進(jìn)行評價(jià)。
我們再來看看京東。相對于淘寶，京東的評價(jià)更多的作用在于指導(dǎo)用戶決策，其評價(jià)只針對客戶能反應(yīng)出買家對商品的直觀感受，它評分機(jī)制不影響店鋪正常運(yùn)營。因?yàn)榫〇|屬于B2C電商平臺(tái)，主要針對京東自營和第三方店鋪，產(chǎn)品本身的質(zhì)量較高，沒必要使用評級影響店鋪的運(yùn)營？偟膩碚f，京東的評價(jià)一方面是給買家一個(gè)表達(dá)看法的作用，另一方面對其它購買者產(chǎn)生部分輔助決策作用，京東更弱化評價(jià)力度。
關(guān)閉or取消？
「關(guān)閉」與「取消」在我們?nèi)粘ＴO(shè)計(jì)界面時(shí)出現(xiàn)的頻率也相當(dāng)?shù)母，我們先拋出兩個(gè)發(fā)自靈魂的拷問：為什么有些彈窗，在設(shè)計(jì)時(shí)，有「取消」按鈕，右上角也有「關(guān)閉」Icon；「關(guān)閉」與「取消」按鈕在使用上的區(qū)別是什么？那么我們根據(jù)這兩個(gè)問題簡單分析一下。
在彈窗中，很多時(shí)候不僅僅提供了「取消」按鈕，還在對話框右上角提供「關(guān)閉」入口。如下圖所示為云鳳蝶編輯器頁面，簡單介紹一下，云鳳蝶是阿里旗下一個(gè)基于SaaS模式的智能建站平臺(tái)，主要提供給無設(shè)計(jì)能力的廣告主自助制作落地頁的一個(gè)工具平臺(tái)，當(dāng)用戶刪除編輯器中模版中的某個(gè)內(nèi)容模塊時(shí)，彈出「確認(rèn)對話框」，咱們可以看到對話框中既有「取消」按鈕，也有「關(guān)閉」 入口。其中 「取消」是對于對話框內(nèi)容的反饋，它的含義是取消之前的操作，保持原樣/我不同意此操作」。「關(guān)閉」是對于彈窗頁面的一種反饋，它的含義是「關(guān)閉當(dāng)前彈窗，暫對之前彈窗暫時(shí)不做處理」。
下圖為谷歌Meet頁面，當(dāng)系統(tǒng)無法訪問用戶攝像頭和麥克風(fēng)時(shí)出現(xiàn)「提示反饋對話框」，對話框中的「關(guān)閉」是對話框頁面的反饋。
下圖為Facebook受眾人群包保存頁面，其中右上角「關(guān)閉」是對話框的反饋，下面的「取消」按鈕是對當(dāng)前對框框操作內(nèi)容的反饋，表示我對此操作放棄，不保存。
小結(jié)
文案也是用戶體驗(yàn)的一部分，其中按鈕的文字不僅需要清晰、簡潔、統(tǒng)一，還需要根據(jù)實(shí)際的業(yè)務(wù)場景準(zhǔn)確的進(jìn)行表述。有時(shí)候兩個(gè)文案相當(dāng)接近，這時(shí)候設(shè)計(jì)師往往需要設(shè)計(jì)師在日常的設(shè)計(jì)中了解產(chǎn)品的策略和文案的差異性即可減少錯(cuò)誤。
本文整體從分析彈窗的不同類型，到模態(tài)彈窗類型的實(shí)際應(yīng)用分析，再到彈窗中容易產(chǎn)生分歧的按鈕文案進(jìn)行內(nèi)容闡述。其中也多次強(qiáng)調(diào)不同類型的彈窗有其的利弊，所需要設(shè)計(jì)們靈活使用，當(dāng)設(shè)計(jì)師把彈窗應(yīng)用的恰當(dāng)好處時(shí)，它將會(huì)是非常有效率的界面元素，并且能夠快速幫助用戶達(dá)成目標(biāo)。然而設(shè)計(jì)師在使用不恰當(dāng)時(shí)，它將困惱用戶進(jìn)而使得用戶對彈窗產(chǎn)生厭惡。所以，設(shè)計(jì)師搞明白不同類型的彈窗使用規(guī)則和特性，可以幫助其良好的設(shè)計(jì)界面避免那些錯(cuò)誤而造成用戶的困擾。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。