按鈕，無論是在 Web 還是 App 上都被廣泛地使用，而很少有設(shè)計(jì)師會(huì)注意到按鈕當(dāng)中的細(xì)節(jié)，導(dǎo)致在設(shè)計(jì)過程中出現(xiàn)一些低級(jí)的錯(cuò)誤，使得用戶在完成任務(wù)的過程中產(chǎn)生阻礙，無法順利達(dá)成目的。
在許多優(yōu)秀的產(chǎn)品中，關(guān)于按鈕的設(shè)計(jì)已經(jīng)有了一套相應(yīng)的規(guī)范去執(zhí)行。作為設(shè)計(jì)師，應(yīng)該總結(jié)這些規(guī)范，并產(chǎn)出一套適用于自家產(chǎn)品的設(shè)計(jì)規(guī)則。這也是我寫「按鈕規(guī)范」系列文章的目的。
今天主要先與各位聊聊「取消按鈕」的設(shè)計(jì)思路。
關(guān)于「取消」，大多數(shù)人對(duì)其理解還停留在 PC 端，認(rèn)為「取消」的目的就是讓用戶停止操作上的流程。但時(shí)至今日，「取消按鈕」的設(shè)計(jì)已經(jīng)有許多解法與思路，如果不仔細(xì)研究與分析，可能會(huì)忽略一些用戶行為上的細(xì)節(jié)。
所以我們從下面三個(gè)大點(diǎn)來聊聊「取消按鈕」的設(shè)計(jì)：
-
按鈕中的「召喚行為」（理清按鈕設(shè)計(jì)的概念）
-
其背后的控制權(quán)（關(guān)于按鈕的權(quán)重信息）
-
「取消按鈕」的正確解法（重點(diǎn)）
按鈕中的「召喚行為」
通常，我們?cè)诋a(chǎn)品中會(huì)為了達(dá)成某種指標(biāo)，需要在界面上引導(dǎo)用戶去完成我們希望其完成的操作。且這類操作是可以達(dá)成某種目的的，我們把這類操作稱為「召喚行為」，即從元素的角度引導(dǎo)用戶完成任務(wù)。
這類「召喚行為」最常出現(xiàn)的，是在按鈕設(shè)計(jì)的過程中。
用戶如何將元素理解為按鈕？就是通過對(duì)形狀和顏色的控制，使該元素看起來像一個(gè)按鈕。
它唯一的作用就是讓用戶點(diǎn)擊，并且是主動(dòng)讓用戶點(diǎn)擊。
我們經(jīng)常在各類設(shè)計(jì)中見到這樣的按鈕設(shè)計(jì)，或許還有更多樣式，如：
它們的目的一致，都是召喚用戶進(jìn)行點(diǎn)擊，至于類型的選擇一般根據(jù)功能界面的上下文情況進(jìn)行判斷。
其重要程度也是以此順序排列：凸起 > 扁平 > 邊框 > 文本。
這類設(shè)計(jì)的結(jié)果就是：無需讓用戶思考要點(diǎn)哪里，而是直接判斷下一步是否進(jìn)行。幫助用戶簡(jiǎn)化一個(gè)思考點(diǎn)。
注：因?yàn)榕袛嗍欠襁M(jìn)行的操作還取決于功能本身以及文案的提示，與我們今天要聊的不是一回事。所以我們跳過這塊，直接聊「召喚行為」與「取消按鈕」的關(guān)系。
這段內(nèi)容各位只要記?。?strong style="outline:0px;margin:0px;padding:0px;">按鈕的行進(jìn)與回退，基本遵循「召喚行為」的思路來設(shè)計(jì)。
這個(gè)概念知道了，我們就可以對(duì)后面的內(nèi)容繼續(xù)進(jìn)行拆解了。
背后的控制權(quán)
接下來我們從多個(gè)角度來挖一下「取消按鈕」的設(shè)計(jì)，分析其不同地位。
a. 安全性后退
「取消」在多數(shù)情況下，意為安全性地后退，并將界面恢復(fù)到原有的內(nèi)容上，不對(duì)界面與功能本身造成破壞，防止對(duì)系統(tǒng)進(jìn)行不必要地更改的「安全措施」。
所以正常來說，「取消按鈕」不是「召喚行為」。以至于通常在設(shè)計(jì)上會(huì)被弱化，以表示該按鈕在功能的流程中，不是主要的，且是提供給用戶作為回退余地的操作。
如：
在這張圖里，「登錄」是「召喚行為」，所以突出顯示。根據(jù)風(fēng)格定義，用了扁平按鈕。而取消在這個(gè)場(chǎng)景里屬于「安全性后退」的操作，于是將其弱化。
這是多數(shù)產(chǎn)品采用的設(shè)計(jì)方式。
比如美團(tuán)的這個(gè)頁面：
產(chǎn)品希望用戶登錄，就會(huì)強(qiáng)化「登錄」行為的按鈕，弱化「回退」行為的按鈕。
同樣，我們?cè)谖⑿排笥讶Φ脑O(shè)計(jì)里也能見到這樣的設(shè)計(jì)：
我們總是希望用戶持續(xù)操作下去，但也要給用戶提供回退的行為，所以在這些設(shè)計(jì)中，「取消按鈕」會(huì)被弱化，「行進(jìn)按鈕」會(huì)被強(qiáng)化，因?yàn)椤溉∠粹o」在這里不是產(chǎn)品人員期望的「召喚行為」。
這是一直以來的設(shè)計(jì)共識(shí)，但如今也發(fā)生了些許變化。「取消按鈕」也開始具備「召喚行為」的屬性。
b. 強(qiáng)化「取消按鈕」
當(dāng)我們不希望用戶退出某個(gè)界面，或停止某個(gè)流程時(shí)，往往會(huì)選擇將「取消按鈕」強(qiáng)化。
如：
或：
通過對(duì)字體的加粗，以暗示用戶不要輕易退出。在這個(gè)流程里，「取消按鈕」具備了「召喚行為」屬性。
也有產(chǎn)品通過改變「取消按鈕」的文案，讓其具備「召喚行為」的屬性，使得用戶在此過程中輕易不要退出該流程：
這里的「繼續(xù)選座」就是「取消」，因?yàn)檫@里的「取消」成了「召喚行為」，所以通過改變文案的方式，確保用戶留下來繼續(xù)進(jìn)行流程中的任務(wù)。
但是不可取的是，這里的「返回」反而給了用戶一種需要思考的壓力。返回？是留在這里，還是退出去？思考幾秒后，反應(yīng)過來，是退出去。這樣的文案與只有在看到「繼續(xù)選座」后進(jìn)行對(duì)比，才能反應(yīng)過來具體是什么意思，除非是用戶具備操作習(xí)慣，知道「右邊」是「行進(jìn)」操作，才能很快理解。（當(dāng)然還有個(gè)問題，我們?cè)诘谌髂K來說明）
但是多數(shù)用戶還是得思考一下，所以要改，最好兩者文案都能改了，否則思考的「停頓」會(huì)讓用戶產(chǎn)生厭惡感。
且在一些產(chǎn)品界面里，為了避免用戶在流程中終止行為，甚至?xí)D(zhuǎn)移「取消」與「行進(jìn)」兩者的位置，如：
之前截圖了某個(gè)產(chǎn)品的界面，寫文這天發(fā)現(xiàn)已經(jīng)改回來，這里就沒放了。
各位謹(jǐn)記，最好不要這樣進(jìn)行設(shè)計(jì)，因?yàn)橛脩粼?App 的操作上已經(jīng)習(xí)慣左邊取消，右邊行進(jìn)，調(diào)換位置雖然能暫時(shí)解決用戶的退出行為，但容易產(chǎn)生誤操作，與用戶的期望不同，導(dǎo)致在產(chǎn)品體驗(yàn)上會(huì)被用戶排斥。
所以到這里，先給一個(gè)結(jié)論，即在 App 的設(shè)計(jì)上，行進(jìn)操作在右，回退操作在左，召喚屬性根據(jù)場(chǎng)景對(duì)按鈕做突出處理。
但是「取消按鈕」真的應(yīng)該具備召喚屬性么？不著急，我們第三模塊再細(xì)聊。下面我們先聊聊 Web 與 App 的之間的差異。
c. Web 與 App 的位置差異
我們現(xiàn)在見到越來越多的 Web 端產(chǎn)品，也開始遵循 App 產(chǎn)品的設(shè)計(jì)，把「取消按鈕」放在左邊，「召喚行為」按鈕放在右邊。
但在早期，Web 的「取消按鈕」基本是放在右邊，原因是鼠標(biāo)的移動(dòng)路徑是根據(jù)眼動(dòng)規(guī)則來，我們的視線會(huì)首先與文案聚焦到「召喚行為」的按鈕上，也就是左邊，這時(shí)候鼠標(biāo)輕而易舉地隨之而來。
而手指行為的操作，會(huì)以右為前進(jìn)導(dǎo)向，且右手手勢(shì)因?yàn)楸憬菪?，也?huì)以右為確認(rèn)操作。否則單手持機(jī)，且行進(jìn)路徑長(zhǎng)的話，用戶想進(jìn)行確認(rèn)操作會(huì)相對(duì)比較吃力。
這就是 Web 與 App 在按鈕位置上的主要區(qū)別。
那會(huì)有同學(xué)問到說 Web 的「取消」到底是放在左邊還是右邊？這里我說點(diǎn)自己的想法。
如果根據(jù)眼動(dòng)規(guī)則與鼠標(biāo)的操作模式來說，Web 「取消按鈕」當(dāng)然是放在右邊更為合適。但如今人們已經(jīng)習(xí)慣了移動(dòng)產(chǎn)品的「右行進(jìn)，左取消」屬性，且在界面上的視覺終點(diǎn)一般是在右邊，能引導(dǎo)用戶進(jìn)行召喚行為。
但這不具備指導(dǎo)性原則，如果要拆開說，里面還有很多說法。
比如 windows 和 macOS 的設(shè)計(jì)規(guī)范里「取消按鈕」的位置完全是相反的。win 的取消在右，macOS 的取消在左。
兩套體系的按鈕位置相互矛盾。這件事本身也說明，只要你在你的 Web 產(chǎn)品里規(guī)范好自己的設(shè)計(jì)體系，就沒有對(duì)錯(cuò)之分。不要一會(huì)兒這個(gè)「取消」在左邊，一會(huì)兒那個(gè)「取消」又在右邊，給用戶造成認(rèn)知障礙即可。
但是！我更推崇 macOS 的設(shè)計(jì)規(guī)范。原因在于成熟度與一致性。
主觀因素：眾所周知，蘋果是更擅長(zhǎng)做設(shè)計(jì)的公司，體驗(yàn)過 Mac 的朋友應(yīng)該能理解我說的這句話。一般來說，我只聽過從 Win 切換到 Mac 的，沒有說從 Mac 切換到 Win 的，除了少部分因?yàn)楣ぷ餍枨笮枰绞褂玫摹?
客觀因素：移動(dòng)產(chǎn)品的普及，已經(jīng)有相當(dāng)成熟的設(shè)計(jì)體系支持行進(jìn)按鈕右側(cè)化設(shè)計(jì)，統(tǒng)一 Web 或 PC 產(chǎn)品只會(huì)讓用戶的操作行為更方便。
這就是我本小節(jié)想聊的，關(guān)于 Web 與 App 按鈕設(shè)計(jì)的差異。
「取消按鈕」的正確解法
我相信，只要是平時(shí)稍微有認(rèn)真觀察的同學(xué)，都能知道我上述聊的內(nèi)容。我個(gè)人也不認(rèn)為這些內(nèi)容具備任何需要總結(jié)的價(jià)值。但是如果不寫出來，就沒辦法說明我接下來要聊的內(nèi)容，也是我這篇文章的重點(diǎn)部分。
通過上述內(nèi)容，我以不同類型的按鈕案例來解釋「取消按鈕」的控制權(quán)。各位可以看出，即使是不同類型的「取消按鈕」，在權(quán)重上的道理也都是一樣的。
但我上面舉的所有產(chǎn)品功能的例子，都不是最佳設(shè)計(jì)方案，包括微信。
那如何設(shè)計(jì)才是最佳方式呢？取消按鈕真的具備召喚行為？
a. 界面層與彈框?qū)?/strong>
其實(shí)嚴(yán)謹(jǐn)點(diǎn)來說，界面層的「取消按鈕」與彈框?qū)拥摹溉∠粹o」的意義是不同的。
雖然都是安全性后退，但是前者多了一層含義：放棄屬性。
還是微信朋友圈的界面：
這里的「取消按鈕」有兩個(gè)狀態(tài)，一是用戶剛點(diǎn)進(jìn)來，無任何操作，點(diǎn)擊取消，解散該頁面；二是進(jìn)來之后，附帶操作行為，這時(shí)候點(diǎn)擊取消，不僅僅是解散當(dāng)前頁面，還包括「放棄當(dāng)前編輯的狀態(tài)」。
所以會(huì)彈出第二層彈窗：
這時(shí)候無論點(diǎn)擊「保留」還是「不保留」都是取消，退出當(dāng)前編輯頁面，不對(duì)系統(tǒng)產(chǎn)生變更行為，但都屬于放棄了當(dāng)前操作。
無非就是微信通過加粗「保留」來告訴用戶，這里的召喚行為是它而已。
所以這層「取消」的含義，不僅僅是取消，還多了一步是否把你放棄的內(nèi)容保留下來的邏輯。
因此在這層含義上，「取消按鈕」也需要特殊處理。
如果說微信這里的「取消按鈕」在設(shè)計(jì)上沒有突出其特殊性，那 Twitter 同樣的例子，就比微信高明很多：
同樣是發(fā)布行為，Twitter 在「取消按鈕」上選用了品牌色。因?yàn)樵谄渚庉嫚顟B(tài)下點(diǎn)擊取消，會(huì)出現(xiàn)與微信同樣的情況：
而 Twitter 的高明之處不僅僅在其對(duì)于「取消按鈕」的樣式處理，還在于其對(duì)是否「保留」做了明確的設(shè)計(jì)區(qū)分：微信的保留等于 Twitter 的保存草稿，不保留等于刪除。而在通用型設(shè)計(jì)規(guī)范里，刪除內(nèi)容在樣式上應(yīng)該區(qū)別于發(fā)布以及取消。
更甚者是，其彈出的這個(gè)彈框中，還保留了真正意義上的「取消」，即解散行為。在 Twitter 的這個(gè)設(shè)計(jì)上，兩個(gè)取消雖然都叫取消，但是通過顏色進(jìn)行區(qū)分，來表示它們之間在邏輯上的差異，這才是我說的高明之處 —— 對(duì)每個(gè)按鈕的處理都恰到好處。
類似的還有微博，但是微博對(duì)于「取消按鈕」的類型差異沒有做出區(qū)分，原因在于它為了弱化界面層的取消，與彈框?qū)拥娜∠麡邮奖３至艘恢隆?
雖然沒什么太大問題，但從嚴(yán)格的邏輯上來說，這兩者取消是存在歧義的。只是用戶已經(jīng)習(xí)慣且理解了，所以沒要造成使用的負(fù)擔(dān)。
微信的彈框雖然避免了這層歧義，但在操作上還是不夠直觀，我每次發(fā)微信朋友圈，點(diǎn)取消彈出「保留」與「不保留」我都要停頓一下謹(jǐn)慎地進(jìn)行選擇，生怕自己點(diǎn)錯(cuò)。
當(dāng)然，這里面還有關(guān)于顏色的說法。
這時(shí)候再對(duì)比 Twitter 的界面就能看出設(shè)計(jì)師之間的差距了。
b. 彈框?qū)印溉∠诡伾牟町?/strong>
上面提到的許多例子中，還存在一個(gè)類似的問題：它們大多選用 iOS 自帶的彈框直接做為操作對(duì)象。
我始終覺得在 iOS 提供的彈框中，兩個(gè)操作的按鈕顏色保持一致是不對(duì)的。
粗細(xì)有時(shí)候很難被直觀感受，而顏色可以在第一時(shí)間被感知。
比如前面提到的這個(gè)案例：
理想情況下，即使用戶知道右邊是行進(jìn)，左邊是取消，但彈出這個(gè)彈框的時(shí)候，不免還是需要再次閱讀一遍進(jìn)行確認(rèn)。
但如果改個(gè)顏色，好像就更好理解（當(dāng)然文案也是問題，但優(yōu)先級(jí)弱于顏色），畢竟彈框也是設(shè)計(jì)的一部分：
需要注意的是，用戶既然已經(jīng)選擇取消，就盡量明確的告知用戶，不要為了留存而留存，以至于模糊化該彈窗的選擇結(jié)果。
所以召喚行為，并不是強(qiáng)迫用戶去做，而是遵循用戶的「旨意」去提供選擇。這里的「返回」才是真正的召喚行為，而「取消」并不具備召喚屬性。硬生生的給「取消」附上召喚屬性，只會(huì)讓用戶在操作時(shí)摸不著頭腦。
包括下圖，我常常因?yàn)樵谑褂?App 時(shí)，彈出這樣的彈框，而不能在第一時(shí)間進(jìn)行正確的點(diǎn)擊，選擇退出當(dāng)前的 App。
這樣例子還有很多。
但是我覺得做得好的，應(yīng)該是這樣的：
或：
這就是刻板印象造成的結(jié)果。我們應(yīng)該學(xué)會(huì)適當(dāng)?shù)厥褂每丶⒏鶕?jù)自己的產(chǎn)品對(duì)其進(jìn)行優(yōu)化。而不是一味跟風(fēng)。
綜上所述：界面層的取消，為了表示其作用性的不同，且界面元素眾多，突出顏色是沒問題的；但彈框?qū)拥娜∠c確認(rèn)在顏色上沒做區(qū)分，直接用不太明顯的粗細(xì)效果讓用戶聚焦于這兩個(gè)內(nèi)容的選擇上，其實(shí)是不友好的設(shè)計(jì)。
如果對(duì) iOS 設(shè)計(jì)規(guī)范有足夠的了解的同學(xué)就能知道：它們?cè)趶椏蚩丶辖o出的兩個(gè)選擇都不是真正意義上的召喚行為按鈕，只是常規(guī)內(nèi)容，且更適用于產(chǎn)品開發(fā)，而不是設(shè)計(jì)指導(dǎo)。
如果你仔細(xì)觀察 macOS 的設(shè)計(jì)，就能發(fā)現(xiàn)他們?yōu)榫邆湔賳拘袨榈陌粹o位置與顏色都做了特殊處理，并不是簡(jiǎn)單的同色系，或用粗細(xì)表示。如圖：
雖然用 macOS 來反駁 iOS 似乎不太合理，但我只是想說明在設(shè)計(jì)結(jié)果上，我們應(yīng)該有自己的思考。
就這個(gè)問題，我在 Twitter 上咨詢了前 Apple，后創(chuàng)辦了 UXM 的產(chǎn)品設(shè)計(jì)師 Anthony。原因是，他曾經(jīng)也就「取消按鈕」的顏色提出過一些個(gè)人看法。
在我說了這些內(nèi)容之后，他跟我說的第一句話是：
Hi Dai — While Apple is very good at design, they are not perfect.（Apple 非常擅長(zhǎng)設(shè)計(jì)，但它們并不完美。）
接著他繼續(xù)說道：你這套理論非常棒，所以你完全可以按它去給自己的產(chǎn)品構(gòu)建一套設(shè)計(jì)規(guī)范，并不一定要遵循 Apple。
借著這個(gè)機(jī)會(huì)，我還跟他聊了許多其他內(nèi)容。而這件事本身再一次驗(yàn)證了我的想法：越牛逼的人越謙虛，且平易近人。
哦，不是，跑題了，應(yīng)該是：不存在完美的設(shè)計(jì)規(guī)范，設(shè)計(jì)師在成長(zhǎng)過程中并不一定要循規(guī)蹈矩，受到規(guī)則的限制，認(rèn)為設(shè)計(jì)就該如此。而是學(xué)會(huì)獨(dú)立思考，突破屏障，去挖掘更深層次的內(nèi)容。
看完這篇文章，再去翻一翻 Google Material Design Guidelines，就會(huì)有一種「哇哦！原來如此！」的感觸了。
小結(jié)
所以我這篇文章的內(nèi)容結(jié)論是：
-
位置固定，左回退，右行進(jìn)；
-
顏色區(qū)分，左淺色，右深色；
-
召喚行為不是用戶想做的事，而是我們應(yīng)該要讓用戶做的事，但不是強(qiáng)迫，所以正常情況下，「取消按鈕」通常不具備召喚屬性。
可能有人會(huì)覺得，這么一個(gè)小問題，不至于用這么長(zhǎng)一篇文章來說明，不過人么，就是存在這樣那樣的區(qū)別。我認(rèn)為需要就可以了。
本來這篇文章還有一段關(guān)于「手勢(shì)按鈕尺寸」的內(nèi)容，不過到目前為止，文章內(nèi)容太長(zhǎng)了，所以我暫時(shí)去掉了，會(huì)在之后的文章里分享給大家。
當(dāng)然，到此為止，我聊的內(nèi)容基本適用于通用場(chǎng)景，且適用于大部分的產(chǎn)品設(shè)計(jì)，但在一些特殊場(chǎng)景下的按鈕位置、顏色，也會(huì)有不同設(shè)計(jì)方式，這就要根據(jù)具體問題來具體分析。
我這里只是把「取消按鈕」的設(shè)計(jì)差異、細(xì)節(jié)提供給大家，以便幫助各位在工作中有更深入的思考，而不是想當(dāng)然的說就是放左邊或右邊，或者就應(yīng)該是什么顏色等等。包括對(duì)待其他內(nèi)容也一樣。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
