在日常使用和設(shè)計(jì)過程中，經(jīng)常會(huì)遇到各式各樣的彈框，也會(huì)從不同的產(chǎn)品或交互設(shè)計(jì)師手中接到不同的原型，里面涉及到的彈框結(jié)構(gòu)也是各有不同，到底彈框應(yīng)該怎么設(shè)計(jì)呢？我?guī)е@個(gè)疑問，去查閱整理出了這篇關(guān)于彈框背后涉及到的原理的文章。

常見的彈框根據(jù)其不同的使用場景主要分為警告框（Alert）和操作列表（Action sheet）這兩種形式，本文也主要針對這兩種彈框來展開說明。

彈框涉及到的結(jié)構(gòu)：標(biāo)題、內(nèi)容、否定性按鈕、肯定性按鈕或者操作性按鈕

首先了解下警告框（Alert）在各平臺(tái)上展示形式的不同之處：

一、警告框（Alert）——非用戶發(fā)起的

（1）蘋果系統(tǒng)的彈框

mac系統(tǒng):

ios系統(tǒng)：

通過上面這兩種可以看出，蘋果系統(tǒng)將自家的系統(tǒng)彈框都做到了統(tǒng)一性，將肯定性與操作性的按鈕放在右邊并通過加粗、顏色等視覺效果強(qiáng)調(diào)突出，同時(shí)在左邊提供否定性的按鈕，以便用戶可以安全地選擇退出破壞性操作。

為何蘋果系統(tǒng)會(huì)采用這種結(jié)構(gòu)的彈框？之前看到一篇文章，里面總結(jié)了以下的三點(diǎn)原因，特別具有說服性：

1、符合閱讀視線流

2、掃視時(shí)的閱讀順序

3、邏輯順序

理由一：符合閱讀視線流

按照閱讀習(xí)慣，會(huì)從左邊開始往右邊閱讀，將目標(biāo)按鈕放在右邊，可以在完成閱讀的同時(shí)觸達(dá)到這個(gè)需要引導(dǎo)用戶按下的按鈕。

理由二：掃視時(shí)的閱讀順序

警告框的出現(xiàn)會(huì)嚴(yán)重打斷用戶的當(dāng)前任務(wù)與操作，吸引用戶的注意力，所以要在盡可能短的時(shí)間里引導(dǎo)用戶完成操作。針對每次出現(xiàn)的彈框，用戶也希望在盡可能短的時(shí)間里完成操作。根據(jù)用戶從左上角往右下角掃視信息的閱讀順序習(xí)慣，采用了這種右置的布局按鈕。

理由三：邏輯順序

還可以根據(jù)頁面現(xiàn)有的狀態(tài)是否發(fā)生根本性的改變來分析這種按鈕布局的合理性?！叭∠狈抛髮?yīng)于“上一步”，而“確定”放右對應(yīng)于“下一步”，當(dāng)用戶點(diǎn)擊“確定”，頁面的現(xiàn)有狀態(tài)會(huì)發(fā)生變化，也符合點(diǎn)擊“下一步”的性質(zhì)。

這里順便也講一個(gè)特殊的情況：

ios10之前：

ios10之后：

在iOS10之前，當(dāng)操作涉及到風(fēng)險(xiǎn)時(shí)，兩個(gè)按鈕中的“取消”會(huì)放在右邊，而操作性的按鈕會(huì)放置在左邊，比如在ios桌面刪除一個(gè)應(yīng)用，“取消”放右邊，“刪除”放左邊同時(shí)不用常用的紅色作為警示，而是采用常規(guī)的藍(lán)色弱化這種警示的提示，以此來盡量減少點(diǎn)擊“刪除”的可能性來減少風(fēng)險(xiǎn)。但是在iOS10更新之后，這種情況有了變化，“刪除”像其它操作性按鈕一樣放在右邊，但是用紅色作為警示色強(qiáng)化了提示效果，“取消”放回左邊，這樣整個(gè)平臺(tái)的按鈕放置的位置都有了統(tǒng)一性。

（2）Android系統(tǒng)的彈框

先來看下下面這一段有趣的小故事：

之后Android的彈框：

在Android 4.0之前，iOS和Android彈框的“確定”按鈕一個(gè)放右邊，一個(gè)放左邊，后來從Android 4.0開始，“確定”按鈕也都統(tǒng)一改成放右邊。

這里不能判讀孰好孰壞，但是在保證各自平臺(tái)統(tǒng)一的前提下，規(guī)范的規(guī)則才能夠確保不對用戶在使用上造成困惑，同時(shí)也能讓產(chǎn)品提供合理的體驗(yàn)和服務(wù)。如果無視彈框的重要性而濫用的話，會(huì)導(dǎo)致用戶認(rèn)知疲勞和視覺失調(diào)，以至于大大降低了其效用。

（3）Windows系統(tǒng)的彈框

不同于蘋果的macos系統(tǒng)彈框，Windows系統(tǒng)將肯定性的的操作按鈕放在左邊并強(qiáng)調(diào)突出，將否定性的按鈕放在右邊，所以按照自然閱讀順序，從左邊開始就能觸達(dá)到目標(biāo)按鈕，但是如果想要仔細(xì)閱讀內(nèi)容，其實(shí)正常的閱讀邏輯是要看完兩個(gè)按鈕之后再返回到這個(gè)目標(biāo)按鈕，也就是上圖所示的1、2、3這個(gè)順序?yàn)g覽。

二、操作列表（Action sheet）—用戶主動(dòng)發(fā)起的

其實(shí)這里有一個(gè)重要的決定因素可以判斷啥時(shí)候使用這兩種彈框，那就是判讀是否是用戶主動(dòng)發(fā)起的。警告框（Alert）非用戶主動(dòng)發(fā)起，而操作列表（action sheet）是用戶主動(dòng)發(fā)起的。比如下面兩個(gè)例子：

（1）針對當(dāng)前任務(wù)提供多操作列表選項(xiàng)。

（2）確認(rèn)一個(gè)用戶發(fā)起的有潛在危險(xiǎn)的操作。

如果該操作執(zhí)行的時(shí)候是有破壞性和危險(xiǎn)性的，應(yīng)該使用紅色作為警示。

除上面提到的這幾種，還有其它一些比如浮出層、安卓的toast、日期選擇器等控件類彈框甚至于可以自定義樣式的彈框，都應(yīng)該在最恰當(dāng)?shù)臅r(shí)機(jī)按照合理的形式彈出，引導(dǎo)提示用戶完成操作才能確保其用得其所，用戶才會(huì)把它當(dāng)做一回事，否則，不僅對用戶造成了干擾，大大降低了效用，嚴(yán)重的話，還會(huì)導(dǎo)致用戶對產(chǎn)品產(chǎn)生抵觸情緒而流失。

更多關(guān)于彈窗的設(shè)計(jì)可以下載素材：網(wǎng)站設(shè)計(jì)頁面小彈窗模板

原文作者：Bruce_菜

參考文章：https://www.zhihu.com/question/35141228