UI設計中“取消按制作鈕”的使用分析詳解

2019-12-06 點擊量：

按鈕，無論是在 Web 還是 App 上都被廣泛地使用，而很少有設計師會注意到按鈕當中的細節(jié)，導致在設計過程中出現一些低級的錯誤，使得用戶在完成任務的過程中產生阻礙，無法順利達成目的。

在許多優(yōu)秀的產品中，關于按鈕的設計已經有了一套相應的規(guī)范去執(zhí)行。作為設計師，應該總結這些規(guī)范，并產出一套適用于自家產品的設計規(guī)則。這也是我寫「按鈕規(guī)范」系列文章的目的。

今天主要先與各位聊聊「取消按鈕」的設計思路。

關于「取消」，大多數人對其理解還停留在 PC 端，認為「取消」的目的就是讓用戶停止操作上的流程。但時至今日，「取消按鈕」的設計已經有許多解法與思路，如果不仔細研究與分析，可能會忽略一些用戶行為上的細節(jié)。

所以我們從下面三個大點來聊聊「取消按鈕」的設計：

1.按鈕中的「召喚行為」（理清按鈕設計的概念）

2.其背后的控制權（關于按鈕的權重信息）

3.「取消按鈕」的正確解法（重點）

 

 

按鈕中的「召喚行為」

通常，我們在產品中會為了達成某種指標，需要在界面上引導用戶去完成我們希望其完成的操作。且這類操作是可以達成某種目的的，我們把這類操作稱為「召喚行為」，即從元素的角度引導用戶完成任務。

這類「召喚行為」最常出現的，是在按鈕設計的過程中。

用戶如何將元素理解為按鈕？就是通過對形狀和顏色的控制，使該元素看起來像一個按鈕。

它唯一的作用就是讓用戶點擊，并且是主動讓用戶點擊。

我們經常在各類設計中見到這樣的按鈕設計，或許還有更多樣式，如：

它們的目的一致，都是召喚用戶進行點擊，至于類型的選擇一般根據功能界面的上下文情況進行判斷。

其重要程度也是以此順序排列：凸起 > 扁平 > 邊框 > 文本。

這類設計的結果就是：無需讓用戶思考要點哪里，而是直接判斷下一步是否進行。幫助用戶簡化一個思考點。

注：因為判斷是否進行的操作還取決于功能本身以及文案的提示，與我們今天要聊的不是一回事。所以我們跳過這塊，直接聊「召喚行為」與「取消按鈕」的關系。

這段內容各位只要記住：按鈕的行進與回退，基本遵循「召喚行為」的思路來設計。

這個概念知道了，我們就可以對后面的內容繼續(xù)進行拆解了。

 

 

背后的控制權

接下來我們從多個角度來挖一下「取消按鈕」的設計，分析其不同地位。

 

a. 安全性后退

「取消」在多數情況下，意為安全性地后退，并將界面恢復到原有的內容上，不對界面與功能本身造成破壞，防止對系統(tǒng)進行不必要地更改的「安全措施」。

所以正常來說，「取消按鈕」不是「召喚行為」。以至于通常在設計上會被弱化，以表示該按鈕在功能的流程中，不是主要的，且是提供給用戶作為回退余地的操作。

如：

在這張圖里，「登錄」是「召喚行為」，所以突出顯示。根據風格定義，用了扁平按鈕。而取消在這個場景里屬于「安全性后退」的操作，于是將其弱化。

這是多數產品采用的設計方式。

比如美團的這個頁面：

產品希望用戶登錄，就會強化「登錄」行為的按鈕，弱化「回退」行為的按鈕。

同樣，我們在微信朋友圈的設計里也能見到這樣的設計：

我們總是希望用戶持續(xù)操作下去，但也要給用戶提供回退的行為，所以在這些設計中，「取消按鈕」會被弱化，「行進按鈕」會被強化，因為「取消按鈕」在這里不是產品人員期望的「召喚行為」。

這是一直以來的設計共識，但如今也發(fā)生了些許變化?！溉∠粹o」也開始具備「召喚行為」的屬性。

 

b. 強化「取消按鈕」

當我們不希望用戶退出某個界面，或停止某個流程時，往往會選擇將「取消按鈕」強化。

如：

或：

通過對字體的加粗，以暗示用戶不要輕易退出。在這個流程里，「取消按鈕」具備了「召喚行為」屬性。

也有產品通過改變「取消按鈕」的文案，讓其具備「召喚行為」的屬性，使得用戶在此過程中輕易不要退出該流程：