關(guān)于彈窗設(shè)計(jì)的分析

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

常見(jiàn)的彈框根據(jù)其不同的使用場(chǎng)景主要分為警告框(Alert)和操作列表(Action sheet)這兩種形式,本文也主要針對(duì)這兩種彈框來(lái)展開(kāi)說(shuō)明。

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

 

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

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

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

mac系統(tǒng):

ios系統(tǒng):

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

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

1、符合閱讀視線流

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

3、邏輯順序

理由一:符合閱讀視線流

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

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

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

理由三:邏輯順序

還可以根據(jù)頁(yè)面現(xiàn)有的狀態(tài)是否發(fā)生根本性的改變來(lái)分析這種按鈕布局的合理性。“取消”放左對(duì)應(yīng)于“上一步”,而“確定”放右對(duì)應(yīng)于“下一步”,當(dāng)用戶點(diǎn)擊“確定”,頁(yè)面的現(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)色弱化這種警示的提示,以此來(lái)盡量減少點(diǎn)擊“刪除”的可能性來(lái)減少風(fēng)險(xiǎn)。但是在iOS10更新之后,這種情況有了變化,“刪除”像其它操作性按鈕一樣放在右邊,但是用紅色作為警示色強(qiáng)化了提示效果,“取消”放回左邊,這樣整個(gè)平臺(tái)的按鈕放置的位置都有了統(tǒng)一性。

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

先來(lái)看下下面這一段有趣的小故事:

之后Android的彈框:

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

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

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

不同于蘋果的macos系統(tǒng)彈框,Windows系統(tǒng)將肯定性的的操作按鈕放在左邊并強(qiáng)調(diào)突出,將否定性的按鈕放在右邊,所以按照自然閱讀順序,從左邊開(kāi)始就能觸達(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)針對(duì)當(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)做一回事,否則,不僅對(duì)用戶造成了干擾,大大降低了效用,嚴(yán)重的話,還會(huì)導(dǎo)致用戶對(duì)產(chǎn)品產(chǎn)生抵觸情緒而流失。

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

 

原文作者:Bruce_菜

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

每天更新,
全站高品質(zhì)素材免費(fèi)下載!