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