「取消」這個按鈕不屬於操作的必要流程，在設計上也不作為主要元素出現。但在實際的彈框或一些操作應用中經常出現，那麼這個小小的取消按鈕又有哪些玄機呢?
首先我們要先來了解一下取消的概念。
取消：我們在提交問題、選擇、進度、資訊時需要要求執行乙個確認動作，這時候往往給出兩個按鈕，「確定」和「取消」。「取消」按鈕一般不會單獨出現，通常是與「確定」，「儲存」之類的操作同時出現。
(在作業系統中常見這樣的對話方塊，包含兩個鍵，確認和取消)
第二，設計和使用&ldquo程式設計客棧;取消」鍵
「取消」在頁面中的位置
設計「取消」鍵(或操作確認頁面)時，常會將「確認」，「儲存」按鈕放在左邊，並使用醒目的格式標識出來，或者預設選中該項。「取消」按鈕則往往放在右邊。「確認」和「取消」不宜離得太遠。圖a中兩個按鈕距離太遠增加了視覺移動的距離，給閱讀造成負擔。而圖b的閱讀效率要比a高得多。
(a)(b)
「取消」與其他按鈕的區分及弱化方式
出於產品運營的考慮，會一些鼓勵使用者去進行的操作，淡化「取消」的操作。比如下圖的幾個方案，確定和取消按鈕做了不同程度的區分。
這樣做的好處是，減少次要操作在視覺表現上的突出性，最大限度的減少誤操作引導使用者完成目標。使兩個按鈕能夠較清晰的區分開來，突出表現確認一方。讓使用者更容易做出判斷。
按鈕在設計時可根據實際表達的內容，突出主次關係。適當的引導使用者，盡量規避誤操作，讓操作更加便捷清晰。也可使用人性化的描述性的詞語強調按鈕，弱化「取消&www.cppcns.comrdquo;「取消」的作用是能允許使用者回到前面的操作。但不能過度的影響介面要表達的主要意圖。人性化的描述性詞語能夠引起使用者足夠的關注度，讓其感覺貼心親切。下圖豆瓣上這個發表電影評論的頁面，使用藍灰色和小字，在格式上也與其他的按鈕不一樣，整個頁面只突出乙個「好了，新增評論」按鈕。
這個頁面是需要使用者填寫內容的，「取消」操作會產生消極結果。特別是使用者在不經意的情況下點了取消，將會導致填寫的內容不復存在。在這個頁面的設計上，弱化了「取消」採用鏈結的形式代替按鈕，突出了確認操作按鈕「好了，新增評論」。起到了很好的視覺突出作用。但切記，文字要簡潔精煉，立意明確。
「確定」加「取消」在對話方塊中的使用。
對於主標題文字內容為「您確定要……嗎」的句式的問題對話方塊，可使用「確定&rwww.cppcns.comdquo;「取消」組合。但不要使用「確定」和「取消」來回答是否判斷問題。如圖a為錯誤例子。除了上述情況外，「確定」「取消」組合時，「確定」的含義等同於「提交」，如圖b,中的選項實際上&ldwww.cppcns.comquo;確定」為提交的意思。
圖c,不要為錯誤或警告資訊使用過重的警示圖示，容易讓使用者感覺鴨梨很大。在設計錯誤類或是警示類的提示可採用黃色「!」
;按鈕可採用「確定」或者「輔助推薦動作」+「我知道了」
當提問「是否…?」可直接使用「是」「否」組合。如圖d
「取消」是否作為按鈕預設項
通常的對話方塊當有多個按鈕的時候，會設定其中乙個按鈕為預設項。「取消」鍵總是在動作執行後立即出現，這時候滿腦子都是前乙個動作，自然毫不思考地選了「確定」(通常還都是預設項)，然後才後悔莫及。所以，往往由於彈框出現地太快，使用者甚至沒有意識到「自己操作可能失誤了」。因此，預設項應該在對使用者有益無損的按鈕上。
比如下圖當關閉未儲存的文件時，該提示的預設項在「儲存」按鈕上。因為儲存相對其他兩個按鈕來說更無損。
下圖為提示玩家公升級遊戲版本的提示框，在這裡我們是需要推薦玩家去更新遊戲版本的，因此預設項應該在「確定」按鈕上。
我們在設定提示框按鈕的預設項時，應考慮到設為預設後，當使用者誤操作時是否對其有益無損。還有要考慮到推薦和鼓勵使用者的操作，給使用者適當的引導。
三、案例分析
原有的設計玩家點選遊戲道具欄的道具彈出對話方塊，提供「購買」和「取消」兩個按鈕。
(英雄殺的道具購買對話方塊)
問題點：
按鈕看起來沒有主次
從運營的角度來說不能突出我們需要鼓勵玩家的購買的意圖
玩家也無法區分已購買與未購買道具的差別
根據需求我們要建立按鈕的主次在表現上有所區分，這個時候應當弱化「取消」按鈕，提高購買按鈕的關注度，鼓勵玩家進行購買。
優化後的效果，去掉了「取消」按鈕，並做了購買和未購買按鈕的效果上做了區分，進行差異化設計。下圖為修改後的設計，是不是比之前的內容看起來更清晰明了呢?
總結，使用「取消」鍵的方案
在pc「取消」按鈕則往往放在右邊。但在ios上會把強調的按鈕放在右邊。
區分按鈕主次要表達明確，突出主題，根據表達的內容可適當的弱化取消按鈕。
使用一些描述操作結果的詞語，強迫使用者去閱讀一下。
不要使用「確定」和「取消」來回答是否判斷問題。
可將「取消」作為預設項，有時也選擇有益無損的按鈕上。
綜上所述，雖然「取消」並不是乙個主要的按鈕元素，但也不是放上去就是對的，還是要根據實際情況將其設計得合理規範。不要因為這個按鈕不起眼而不在意，互動設計往往是細節決定成敗!
文章**：騰訊gdc
本文標題: 非一般的「取消」按鈕 關於取消按鈕的雜談
本文位址: /web/xindejiqiao/87732.html
修改SearchBar的取消按鈕Cancel為中文
一開始在網上看到很多方法都是迴圈，好吧，我也迴圈 建立uisearchbar的時候迴圈，不行 用searchbartextdidbeginediting事件去迴圈，也不行 無語了，搜尋了baidu第一頁都是迴圈的，找了半小時，總算是找到原因了 原來在ios7以後uisearchbar的迴圈需要sea...
表單中的重置與取消按鈕
大在大部分網頁表單中，移除重置按鈕會有效提公升可用性，同樣的，取消按鈕對網頁的意義也不太大。啟發式的互動設計 中最基本的一點是在任何情況下為 使用者提供 緊急出口 離開當前環境。撤銷功能是最好的解決方法之一，基本原則只是告訴我們要提供撤銷功能但並沒有告訴我們怎麼做。往往，不同的原則適用 於不同的使用...
MFC嚮導中的幫助按鈕怎麼取消
其中cwizard 是我的屬性錶類 void cwizard addpages cpropertysheet 類的物件表示屬性表，也稱為選項卡對話方塊。每個屬性表由乙個 cpropertysheet 物件和乙個以上的 cpropertypage 物件組成。屬性表被框架顯示為帶有一組選項卡索引的視窗。...