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

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

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)，取消。還是“是”，“否”？我想，答案顯而易見(jiàn)，肯定是“確認(rèn)”，或者“取消”。這樣的表意是足夠明確的，而且黑色字體已經(jīng)明確的問(wèn)你“確認(rèn)提交表單嗎？”，那我們的回答肯定大多數(shù)是右側(cè)的。
我們?cè)倏吹诙€(gè)例子：

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


第三個(gè)例子：

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

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

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

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

第二個(gè)例子

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

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

本文轉(zhuǎn)載來(lái)自 靜Design 僅供個(gè)人學(xué)習(xí)使用