靜電說：最近這幾天，有同學(xué)跟我討論，說他在設(shè)計(jì)表單的過程中遇到了一些問題，按鈕到底用確認(rèn)還是取消，到底是用是還是否？確認(rèn)按鈕到底放左邊還是右邊？這個(gè)問題其實(shí)長期以來大家都有困惑。

今天，咱們通過幾個(gè)小例子來跟大家說的明明白白。其實(shí)原理很簡單，就是文字。原則如下：

1. 代表確認(rèn)的按鈕一般放在右側(cè)的位置
   

2. 按鈕內(nèi)容具體用怎樣的文字，取決于彈層中具體是怎樣的表述，以及功能的風(fēng)險(xiǎn)和趨向性。

01.具有正向引導(dǎo)的對(duì)話框
首先看第一個(gè)例子：

在這個(gè)例子中，請(qǐng)大家注意觀察表單黑色文字，“確認(rèn)提交表單？”，在這種情況下，你下意識(shí)的回答會(huì)是什么？確認(rèn)，取消。還是“是”，“否”？我想，答案顯而易見，肯定是“確認(rèn)”，或者“取消”。這樣的表意是足夠明確的，而且黑色字體已經(jīng)明確的問你“確認(rèn)提交表單嗎？”，那我們的回答肯定大多數(shù)是右側(cè)的。
我們?cè)倏吹诙€(gè)例子：

我們可以直接使用第一個(gè)例子中的思路來回答。這個(gè)例子中，黑色標(biāo)題文字“提交表單”，它的表意不太明確，僅僅是陳述性詞匯，沒有明確表達(dá)是否需要選擇。這個(gè)時(shí)候在按鈕的文案上需要直接表達(dá)直觀的含義：“提交表單”或者“再想想”。而不是“確認(rèn)”或者“取消”。


第三個(gè)例子：

如果我們能明白前兩個(gè)例子的關(guān)鍵點(diǎn)，那么第三個(gè)例子就顯而易見知道怎么做了?！笆欠裉峤槐韱危俊?，回答當(dāng)然是“是”或者“否”。而非其它文字。這是最理想的狀態(tài)。

所以，當(dāng)彈層暗示用戶提交表達(dá)是當(dāng)前安全且需要完成的內(nèi)容的時(shí)候，更正向的引導(dǎo)是最重要的。當(dāng)然，這里邊還涉及到，這個(gè)表單的提交是否有風(fēng)險(xiǎn)，比如副標(biāo)題中的“提交后無法修改”，那么我們就需要作出選擇，此時(shí)用第二個(gè)例子中的方式是最理想的。

02.具有警示或危險(xiǎn)性的對(duì)話框
第一個(gè)例子

在這個(gè)例子中，我們建議大家將確認(rèn)按鈕放在不易點(diǎn)擊到的左側(cè)，同時(shí)用紅色警示色呈現(xiàn)，給用戶制造一點(diǎn)點(diǎn)難度。畢竟這個(gè)動(dòng)作是有危險(xiǎn)性的。

第二個(gè)例子

在你確認(rèn)不想讓用戶進(jìn)行某個(gè)操作的時(shí)候，很多的軟件會(huì)這么做，emmm，有點(diǎn)流氓的感覺，但不得不說很有效。右側(cè)的彈層使用不明的表意來混淆用戶的操作，同時(shí)引導(dǎo)用戶點(diǎn)擊“我再想想”。

03.總結(jié)
總之，彈層的設(shè)計(jì)需要洞悉用戶的心理，同時(shí)將文本表意更加明確化，不明的表意會(huì)造成用戶識(shí)別的錯(cuò)誤。這個(gè)其實(shí)就是文字功夫啦！再結(jié)合視覺顏色上的引導(dǎo)和位置的暗示，那么作出一個(gè)合格的彈層，是不是就很簡單呢？

2022開春新一期UI全鏈路就業(yè)特訓(xùn)課程開始報(bào)名啦

↓↓長按二維碼加靜電老師咨詢↓↓

? ? ? ? ? ? ? ??