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

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

彈框涉及到的結構：標題、內容、否定性按鈕、肯定性按鈕或者操作性按鈕

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

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

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

mac系統(tǒng):

ios系統(tǒng)：

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

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

1、符合閱讀視線流

2、掃視時的閱讀順序

3、邏輯順序

理由一：符合閱讀視線流

按照閱讀習慣，會從左邊開始往右邊閱讀，將目標按鈕放在右邊，可以在完成閱讀的同時觸達到這個需要引導用戶按下的按鈕。

理由二：掃視時的閱讀順序

警告框的出現會嚴重打斷用戶的當前任務與操作，吸引用戶的注意力，所以要在盡可能短的時間里引導用戶完成操作。針對每次出現的彈框，用戶也希望在盡可能短的時間里完成操作。根據用戶從左上角往右下角掃視信息的閱讀順序習慣，采用了這種右置的布局按鈕。

理由三：邏輯順序

還可以根據頁面現有的狀態(tài)是否發(fā)生根本性的改變來分析這種按鈕布局的合理性?！叭∠狈抛髮凇吧弦徊健保按_定”放右對應于“下一步”，當用戶點擊“確定”，頁面的現有狀態(tài)會發(fā)生變化，也符合點擊“下一步”的性質。

這里順便也講一個特殊的情況：

ios10之前：

ios10之后：

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

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

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

之后Android的彈框：

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

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

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

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

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

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

（1）針對當前任務提供多操作列表選項。

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

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

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

更多關于彈窗的設計可以下載素材：網站設計頁面小彈窗模板

原文作者：Bruce_菜

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