在日常使用和設計過程中,經常會遇到各式各樣的彈框,也會從不同的產品或交互設計師手中接到不同的原型,里面涉及到的彈框結構也是各有不同,到底彈框應該怎么設計呢?我?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
全站高品質素材免費下載!