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

產(chǎn)品設(shè)計作為產(chǎn)品經(jīng)理工作中一個重要的環(huán)節(jié)，而文案設(shè)計作為產(chǎn)品設(shè)計中不起眼的一個步驟，備受大家輕視?！按_定/取消”這對雙胞胎真的可謂是萬金油，那么我們該如何去利用文案的設(shè)計來引導(dǎo)用戶更直觀的操作呢？

操作確認

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

例如

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

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

第一步：各個位置的意義

警示框標題的意義

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

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

提示文案的意義

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

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

同時我們也提倡簡潔的文案提示，提倡不歧義的文案提示，提倡不拗口的文案提示。下面舉一個錯誤例子：

按鈕的意義

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

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

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

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

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

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

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

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

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

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

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

結(jié)語

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

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

題圖來自unsplash，基于CC0協(xié)議