“確定/取消”按鈕，在文案上如何設(shè)計(jì)，才能實(shí)現(xiàn)較好的效果呢？

產(chǎn)品設(shè)計(jì)作為產(chǎn)品經(jīng)理工作中一個(gè)重要的環(huán)節(jié)，而文案設(shè)計(jì)作為產(chǎn)品設(shè)計(jì)中不起眼的一個(gè)步驟，備受大家輕視。“確定/取消”這對(duì)雙胞胎真的可謂是萬金油，那么我們?cè)撊绾稳ダ梦陌傅脑O(shè)計(jì)來引導(dǎo)用戶更直觀的操作呢？

操作確認(rèn)

當(dāng)你在編輯頁(yè)面的時(shí)候，出于某種原因不再編輯，此時(shí)退出。系統(tǒng)會(huì)問確認(rèn)用戶是否真正想退出操作？

例如

在這個(gè)警示框（Alert）中，這是最簡(jiǎn)（差）的退出詢問設(shè)計(jì)。我們看到了警示框的標(biāo)題，提示文案，操作按鈕一共有三個(gè)位置。

下面針對(duì)這個(gè)警示框我們進(jìn)行優(yōu)化設(shè)計(jì)。

第一步：各個(gè)位置的意義

警示框標(biāo)題的意義

標(biāo)題欄的目的是在于告訴用戶這個(gè)警示框是確認(rèn)何種操作以及重要程度。例如是保存操作，刪除操作。如果是特別重要的刪除操作，標(biāo)題欄的文案可能會(huì)加紅色，甚至加個(gè)！ 的圖標(biāo)在旁。也許大家發(fā)現(xiàn)現(xiàn)在很多的警示框不再有標(biāo)題這個(gè)位置。原因是很多時(shí)候標(biāo)題文案與提示文案是重復(fù)在闡述一件事。

例如下左圖淘票票發(fā)布影評(píng)界面就沒有標(biāo)題。下右圖依然保留了標(biāo)題，且用主色調(diào)點(diǎn)亮。前程無憂產(chǎn)品設(shè)計(jì)認(rèn)為編輯工作描述是一件很費(fèi)力事情，需要用戶的慎重確定。

提示文案的意義

剛才提到很多警示框的標(biāo)題去除的原因是與提示文案重復(fù)闡述一件事。關(guān)鍵在于提示文案可以給用戶提供各種說明，并且要簡(jiǎn)潔到“不需要用戶思考”！

如果你的產(chǎn)品主要功能是編輯文章并提供了“草稿”的功能，用戶進(jìn)行返回上一級(jí)操作。這個(gè)警示框可能就不是刪除確認(rèn)了，而是存為草稿的確認(rèn)。例如下圖豆瓣日記編輯界面退出提示。

同時(shí)我們也提倡簡(jiǎn)潔的文案提示，提倡不歧義的文案提示，提倡不拗口的文案提示。下面舉一個(gè)錯(cuò)誤例子：

按鈕的意義

我們開頭提到了“確定/取消”這對(duì)雙胞胎是操作確認(rèn)的萬金油。不過越來越多的設(shè)計(jì)者感覺到這對(duì)互斥詞語也不再萬能了。

例如上面提到的錯(cuò)誤例子，不僅僅提示文案讓人抓不著頭腦，按鈕的文案更加重了用戶對(duì)于詞語的理解。因此越來越多產(chǎn)品設(shè)計(jì)者采用了直接解釋的按鈕文案。

例如下左圖超級(jí)課程表中退出發(fā)布動(dòng)態(tài)的確認(rèn)操作。采用了“放棄/繼續(xù)編輯”的組合。下右圖小米相冊(cè)刪除照片的“取消/刪除”的組合。

*注意：這種組合方式有個(gè)缺點(diǎn)是需要結(jié)合使用場(chǎng)景。如果你的場(chǎng)景很多，你可能需要思考各種組合?！叭∠?刪除”“取消/繼續(xù)編輯”“放棄/確定”，雖然對(duì)用戶來說是方便，但對(duì)項(xiàng)目管理者來說這一個(gè)個(gè)組合無疑會(huì)增加統(tǒng)一管理的成本。

“取消/確定”按鈕的擺放位置有什么講究？網(wǎng)上關(guān)于這個(gè)爭(zhēng)議在知乎上已經(jīng)有了解釋：https://www.zhihu.com/question/20694680

也許你已經(jīng)注意到了有些產(chǎn)品的設(shè)計(jì)會(huì)對(duì)“確定”操作做點(diǎn)亮的處理，引導(dǎo)用戶點(diǎn)擊。這個(gè)問題對(duì)各自產(chǎn)品的理解不同。不過筆者的觀點(diǎn)是不贊同將單獨(dú)一個(gè)按鈕的操作，因?yàn)槲覀儫o法感知到用戶是誤觸返回（特別是安卓機(jī)），除非一種沒有誤觸的情況比如刪除照片，微信取消關(guān)注公眾號(hào)。

優(yōu)化設(shè)計(jì)

結(jié)合我們剛才提到幾點(diǎn)意義和建議，我們對(duì)我們的最簡(jiǎn)設(shè)計(jì)進(jìn)行優(yōu)化：

我們將這個(gè)警示框定義為某一個(gè)新聞資訊的評(píng)論編輯界面返回的確認(rèn)操作。通常用戶輸入的評(píng)論是比較簡(jiǎn)短的，用戶再編輯的成本不高，所以我們僅需要講清楚確認(rèn)操作即可。

我們將這個(gè)警示框定義為某一個(gè)創(chuàng)作平臺(tái)的創(chuàng)作編輯頁(yè)面返回的確認(rèn)操作。創(chuàng)作平臺(tái)的作者的編輯是一件重成本的事情，而且編輯的內(nèi)容是長(zhǎng)文本。如果產(chǎn)品沒有草稿的功能應(yīng)該在此處說明。

除了這個(gè)警示框外，還需要在頁(yè)面編輯頁(yè)面做“草稿箱功能正在開發(fā)”的提示。如果產(chǎn)品已有草稿箱功能，警示框的內(nèi)容參考豆瓣日記。

結(jié)語

作者作為PM的時(shí)間不長(zhǎng)，文筆或許不夠犀利。希望能與各位共同成長(zhǎng)，諸君共勉。

本文由 @理智君 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自u(píng)nsplash，基于CC0協(xié)議