2023-6-29 博博
底部彈出框控件，在移動(dòng)端設(shè)備上呈現(xiàn)出來(lái)的時(shí)候，對(duì)于設(shè)計(jì)師而言，是一個(gè)不小的挑戰(zhàn)。在小屏幕上設(shè)計(jì)這類(lèi)控件，需要做合理的取舍。
底部彈出框是一種部分覆蓋式的控件，特別適合移動(dòng)端設(shè)備，它適合呈現(xiàn)臨時(shí)但是重要的信息。
定義：底部彈出控件，或者說(shuō)底部彈出框/表單，是固定在屏幕底部邊緣的控件，它提供貼合上下文環(huán)境的詳細(xì)信息，或者疊加于頁(yè)面之上的交互。
底部彈出框是一種漸進(jìn)式的信息呈現(xiàn)方式，它們通常由用戶交互觸發(fā)，提供額外的詳細(xì)信息，它們通常會(huì)遮蓋掉部分屏幕內(nèi)容，因此不適合顯示始終都很重要的信息。
另一方面，它適合用來(lái)呈現(xiàn)額外的信息，對(duì)上下文環(huán)境進(jìn)行控制，或者兼顧兩者。底部彈出框的優(yōu)點(diǎn)在于，它無(wú)需跳轉(zhuǎn)到新的單獨(dú)頁(yè)面，讓用戶停留在當(dāng)前環(huán)境下進(jìn)行交互，用戶不會(huì)失去交互和獲取信息的語(yǔ)境。
底部彈出框和其他的彈出框控件類(lèi)似，然而和其他的彈出框相比，他保留了更強(qiáng)的信息可見(jiàn)性，因此用戶在和底部彈出框呈現(xiàn)的信息進(jìn)行交互的時(shí)候，可能需要參考背景里的基礎(chǔ)信息，而兩者的呼應(yīng)也更加貼合用戶當(dāng)下的需求。
使用底部彈出框的一個(gè)常見(jiàn)的理由是，它們提高了移動(dòng)端設(shè)備上用戶的交互可觸達(dá)性（也就是大家常說(shuō)的，用戶更容易點(diǎn)擊到屏幕底部的內(nèi)容和控件）。不幸的是，在實(shí)際的測(cè)試當(dāng)中，由于用戶握持移動(dòng)端設(shè)備的方式不同（單手、雙手以及握持位置上下差異），屏幕底部目前也不一定是最容易觸達(dá)的區(qū)域（屏幕中間一般才是用戶最容易點(diǎn)擊到的位置）。
模態(tài)和非模態(tài)底部彈出框
位于底部的彈出框可以是模態(tài)的，也可以是非模態(tài)的。
和經(jīng)典的模態(tài)控件設(shè)計(jì)類(lèi)似，底部彈出框可以迫使用戶在采取其他交互之前，強(qiáng)制和底部彈出框交互，點(diǎn)擊其中的控件或者關(guān)閉它。即使背景的內(nèi)容可見(jiàn)，彈出框依然會(huì)阻止用戶與之進(jìn)行交互。通常，在底部彈出框出現(xiàn)的時(shí)候，通常背景內(nèi)容會(huì)被半透明的疊加層蓋住，作為背景內(nèi)容「不可交互」的視覺(jué)標(biāo)識(shí)。
高手總結(jié)！UI 界面底部彈出框設(shè)計(jì)指南
網(wǎng)絡(luò)管理工具 UniFi 的彈出框設(shè)計(jì)，當(dāng)用戶的手機(jī)未能正確連接到網(wǎng)絡(luò)上的時(shí)候，會(huì)彈出一個(gè)底部表單，背景內(nèi)容通常顯示的是一些可供識(shí)別的基本界面細(xì)節(jié)，以及頁(yè)面骨架布局。用戶需要解決網(wǎng)絡(luò)問(wèn)題，才能接入網(wǎng)絡(luò)顯示背景的內(nèi)容，因此這一交互是合理的。
非模態(tài)的底部彈出框則不同，它們位于頁(yè)面的底部，用戶可以和背景內(nèi)容進(jìn)行交互，也能和彈出內(nèi)容交互。這個(gè)時(shí)候的底部彈出框控件適合呈現(xiàn)此時(shí)背景內(nèi)容相關(guān)的詳細(xì)信息。
高手總結(jié)！UI 界面底部彈出框設(shè)計(jì)指南
在 Google 地圖的 APP 當(dāng)中，非模態(tài)的底部彈出框會(huì)顯示和當(dāng)前選中地理區(qū)域相關(guān)的導(dǎo)航操作、圖片信息，同時(shí)，用戶可以和背景中的地圖進(jìn)行交互，詳細(xì)了解大致的環(huán)境信息。
有一些底部彈出框是可以展開(kāi)的。用戶可以通過(guò)點(diǎn)擊或者上滑彈出框，將其擴(kuò)展為全屏模式（有時(shí)候是接近全屏）。通常，底部彈出框在最小化模式下，開(kāi)始為非模態(tài)，展開(kāi)后變?yōu)槟B(tài)。
高手總結(jié)！UI 界面底部彈出框設(shè)計(jì)指南
Apple 播客：底部彈出框可以顯示當(dāng)前播放內(nèi)容的相關(guān)信息（左），可以點(diǎn)擊或者拖動(dòng)它至完整全屏尺寸，而點(diǎn)擊或者向下滑動(dòng)頂部的把手控件，則可以將其縮小折疊起來(lái)。
底部彈出框的可用性指南
在我們的研究當(dāng)中，我們觀察到用戶在使用底部彈出框的時(shí)候，遭遇的困難和使用別的彈出框的時(shí)候是類(lèi)似的，這些通常是由以下原因造成的：
缺少明確的關(guān)閉底部彈出框的指引
多個(gè)底部彈出框界面疊加在一起
底層相關(guān)的背景內(nèi)容被模糊了
下面我們針對(duì)性地來(lái)解決一下這些問(wèn)題。
允許使用「返回」按鈕來(lái)關(guān)閉底部彈出框
底部彈出框所存在的一個(gè)常見(jiàn)問(wèn)題，就是它看起來(lái)像是一個(gè)普通的界面控件，尤其當(dāng)他們擴(kuò)展為全屏的時(shí)候，一部分用戶可能還沒(méi)意識(shí)到他們所處的界面，其實(shí)是擴(kuò)展后的底部彈出框控件，而它通常是不遵循通常的交互邏輯的。用戶這個(gè)時(shí)候可能希望使用「后退」手勢(shì)或者按鈕來(lái)進(jìn)行交互，但是用戶這個(gè)時(shí)候點(diǎn)擊可能是不會(huì)得到預(yù)期中的反饋。
因此，在用戶歷程當(dāng)中，當(dāng)頁(yè)面當(dāng)中出現(xiàn)底部彈出框控件的時(shí)候，整個(gè)流程的交互模式可能會(huì)因此被破壞。但是，如果讓底部彈出框控件支持「后退」的按鈕和手勢(shì)，則可以規(guī)避這一問(wèn)題，讓用戶無(wú)縫回到上一界面。
在控件中包含「關(guān)閉」按鈕
盡管絕大多數(shù)的底部彈出框可以通過(guò)向下滑動(dòng)，或者點(diǎn)擊頂部手柄來(lái)關(guān)閉，但是這個(gè)組件本身就很容易被忽略。此外，還有一部分用戶壓根就不知道這個(gè)功能。而且，垂直滑動(dòng)關(guān)閉本身就具備某種模糊性，在交互過(guò)程中，用戶可能會(huì)關(guān)閉面板，也可能不小心打開(kāi)通知欄，或者打開(kāi)手機(jī)的控制中心等。
Pocket 的底部彈出框控件非常高，需要向下滑動(dòng)才能關(guān)閉，而因?yàn)榭丶氖直恢迷诓僮鞯臅r(shí)候很容易打開(kāi)手機(jī)的通知欄或控制中心。即使用戶從正確的位置觸發(fā)關(guān)閉控件的手柄，也可能需要多次嘗試才能真正關(guān)閉這一面板。這種靈活性挑戰(zhàn)對(duì)于操作精度要求過(guò)高，對(duì)于多數(shù)用戶而言都是挑戰(zhàn)。
為了確保用戶可以快速關(guān)閉底部彈出框控件，最好在控件內(nèi)添加常見(jiàn)的「關(guān)閉」按鈕，或者「X」按鈕。我們建議將這個(gè)按鈕放置在在底部彈出框的右上方之類(lèi)的位置，使用這一按鈕的另外一個(gè)好處是方便有視力障礙的用戶，使用屏幕閱讀器來(lái)關(guān)閉它。
高手總結(jié)！UI 界面底部彈出框設(shè)計(jì)指南
蘋(píng)果的備忘錄當(dāng)中的底部彈出框控件，就使用了「X」按鈕來(lái)方便用戶關(guān)閉它。
不要將多個(gè)底部彈出框堆疊起來(lái)
當(dāng) APP 內(nèi)將多個(gè)彈出框堆疊起來(lái)的時(shí)候，最大的麻煩就出現(xiàn)了。
當(dāng)多個(gè)底部彈出框堆疊在一起的時(shí)候，用戶不可避免會(huì)開(kāi)始迷惑自己到底處于流程的哪個(gè)位置，并且可能還需要了解到底哪個(gè)是第一個(gè)彈出框，而哪個(gè)是最后一個(gè)。就像下面的案例。
我們強(qiáng)烈建議不要使用底部彈出框控件來(lái)替代用戶流程中應(yīng)有的頁(yè)面。底部彈出框是一個(gè)臨時(shí)的 UI 控件，它并不是穩(wěn)定的位置，它的存在旨在打斷用戶流程，告知用戶重要的信息和重要的操作，它本身并不是帶來(lái)愉悅感的「快樂(lè)路徑」。
高手總結(jié)！UI 界面底部彈出框設(shè)計(jì)指南
沃爾瑪?shù)?APP 當(dāng)中，產(chǎn)品詳情頁(yè)是用底部彈出框控件來(lái)承載的，而非單獨(dú)的頁(yè)面，而其中任何一個(gè)鏈接都會(huì)觸發(fā)另外一個(gè)底部彈出框，比如用戶評(píng)價(jià)。而用戶想要關(guān)閉退出則需要一層一層關(guān)閉。而頂上的返回和關(guān)閉按鈕兩者也同樣可能會(huì)讓人迷惑，有時(shí)候是后退，有時(shí)候是直接關(guān)閉彈出框，交互過(guò)程中可能會(huì)超出用戶原有的預(yù)期。
使用底部彈出框承載簡(jiǎn)短交互
最后，當(dāng)用戶可能會(huì)花費(fèi)大量的時(shí)間查看底部彈出框所承載的信息時(shí)，我們建議不要使用底部彈出框來(lái)承載這類(lèi)信息。它本質(zhì)上是一個(gè)瞬間狀態(tài)下的 UI 控件，快速交互是它存在的意義，而非承載復(fù)雜的內(nèi)容。
高手總結(jié)！UI 界面底部彈出框設(shè)計(jì)指南
這個(gè)名為 Soundbrenner 的 APP 會(huì)在頁(yè)面「1」 的 Learn 中打開(kāi)「2」中的音樂(lè)教學(xué)列表，選擇特定課程時(shí)，會(huì)以底部彈出框的方式打開(kāi)詳細(xì)課程信息，隨后，向下滾動(dòng)「3」的時(shí)候，會(huì)意外將用戶帶回主頁(yè)「4」。這個(gè) APP 的問(wèn)題和之前沃爾瑪?shù)那闆r類(lèi)似，存在多個(gè)底部彈出框交疊的問(wèn)題。
總結(jié)
底部彈出框控件在 UI 設(shè)計(jì)當(dāng)中其實(shí)比較常見(jiàn)，它需要在保持上下文環(huán)境的情況下，提供額外的關(guān)鍵交互和信息說(shuō)明，但是它不應(yīng)該承載復(fù)雜的交互和過(guò)多的內(nèi)容。
作者：陳子木
來(lái)源：優(yōu)設(shè)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com