2020-3-7 資深UI設計者
在頁面導航欄中，常會見到返回、取消與關閉三者按鈕。許多同學會弄混它們的使用邏輯，所以寫一篇小文幫助各位梳理下。
先拋開圖標，我們回到功能本身的含義上看。如果我們不在產品的語境里，就單看「返回」和「關閉」這兩個詞，你首先會想到什么呢？
當我這么去問自己的時候，腦子里出現(xiàn)的并不只是零碎的詞語，而是一些場景和畫面。比如我走錯路了，需要原路返回；公司復工了，我要返程回去?；蛘?，睡覺時間到了，我該關閉電腦了；飯菜燒好了，我得把油煙機關掉，等等。
如果仔細去想的話就會意識到，語義衍生出來的，都是我們日常生活中的經驗和對世界的認知。產品中使用的各種語言，不管是文字也好，或者圖標圖形也罷，一直都是以我們對它最本能的理解為基礎的。所以只要你聯(lián)想自己對「返回」和「關閉」的看法，就能知道它應該在什么樣的產品情境中出現(xiàn)，以及它為什么會出現(xiàn)。
于是，很自然的，我們會把「返回」和「路徑」聯(lián)系在一起，所以「返回」在導航設計中不可或缺。并且「返」也預示著我們會回到之前的路徑節(jié)點，整個過程是連續(xù)性的，不被切斷的。而「關閉」就完全不一樣了，它一般和我們的動作有關，是一個短暫性的操作，相比返回也顯得更為獨立。
根據(jù)我們對語義的判斷，再結合實際產品中「返回」的場景，我們可以概括出「返回」和「關閉」的特征差異。
1. 返回
連續(xù)性：按照產品的頁面層級順次跳轉。但存在特殊情況，因為有些產品定義的功能出入口是不一致的，在信息架構層級已經做了一定的優(yōu)化，所以返回不一定會按原來的路徑回去，可能會按產品既定的路徑。比如網易云音樂歌曲播放頁進入直播后返回不是到播放頁。
整體性：在產品功能頁面關聯(lián)性較強的功能中，「返回」需要連接各個頁面與層級之間的架構關系，因此「返回」作為操作節(jié)點，可以幫助產品功能的各個頁面之間建立聯(lián)系，維持產品的整體性。
2. 關閉
非連續(xù)性：用于產品中的臨時內容或臨時動作，比如彈窗或活動頁，與上一級頁面沒有直接關系。
獨立性：非產品原生內容或是產品內的獨立內容。比如小程序、瀏覽器標簽等。
3. 返回和關閉的使用場景
知道了返回和關閉的特征后，我們可以從兩者的使用角度上再去梳理一下。
現(xiàn)在產品中關于返回和關閉有三種狀態(tài)：
1 和 2 的情況很好理解，我們只要根據(jù)前面各自的特征去看就能夠理清場景。
3 的情況會有特殊性，因為它同時具有返回和關閉這兩種看起來相矛盾的特性。其實這是由內容決定的，當內容同時具有獨立性和整體性時，就需要支持兩種操作。如小程序可以作為一個獨立功能，但其本身又可以看作是一個完整的小產品，具有自己的頁面結構和頁面層級。所以小程序對于它所屬的產品，我們有關閉的需要，小程序內的頁面導航又需要返回來實現(xiàn)。
除此之外，產品可能開始只有返回，后面臨時出現(xiàn)關閉按鈕，比如微博「疫情地圖」中使用「小區(qū)疫情查詢」和「7×24 小時疫情快訊」后會出現(xiàn)關閉功能（幫助用戶快速退出）。
這里我們可以從連續(xù)性和非連續(xù)性的角度看，產品針對具有復雜層級和內容的頁面設計了順次（返回）和跳頁（關閉）的導航方式，其中關閉隨實際情境出現(xiàn)。以此為用戶提供了更為靈活的導航路徑，來同時滿足用戶逐級深入、連續(xù)返回瀏覽和選擇性查看、臨時關閉的需求。
針對于「關閉」，它和「取消」會有重疊的含義，所以有時并不能很好地去區(qū)分這兩個功能表達的應用場景。于是，我們可以借用之前的方式，先把「取消」單獨拿出來理解。
一般來說，「取消」意味著行為過程中，還有后續(xù)行為，整個過程沒有完成，當下后悔了，因此取消了當前操作。它更傾向于表達我們主動去做了什么改變，然后中途放棄了。
比如，想煮個飯，于是下了米，倒了水，定時，確認（取消），完成（關閉）。
這時候中間如果突然不想煮飯了，在定時之后，就停止當前行為，那就是取消。但點了確認并完成煮飯之后，這個行為就結束了，只能關閉。因此，它們之間就是行為上的差異。
就好比，打開微信公眾號文章，內容已經加載出來，行為已經產生并結束，這時候左上角就一定是關閉。而發(fā)朋友圈的時候，左上角是取消，那是因為行為過程還在繼續(xù)，沒有發(fā)布，所以可以取消。而發(fā)布之后，就無法取消，想要關閉，也就只能刪除這條朋友圈了。
所以在操作行為中的頁面，左上角最好是使用「取消」。
當我們對詞的含義有了進一步思考后，就可以去看它們在產品中的表現(xiàn)了。
比如廣告的關閉、推薦內容的關閉。都是產品自身提供的內容，用戶不想看到就選擇關掉了，沒有試圖去改變什么。
包括內容頁面，或者活動頁面，被點開，且加載完成呈現(xiàn)出來之后，這個行為就結束了，沒有取消的概念，只有關閉。
再比如，選擇圖片文件時的取消，微信發(fā)朋友圈、微博發(fā)帖時的取消等等，我們能發(fā)現(xiàn)都是用戶主動采取了什么措施，但是又后悔了所以選擇取消。
或者如游戲設置，就不適合用關閉，會讓用戶在理解上產在歧義，比如用戶設置到一半，不想設置了，那現(xiàn)在關閉的話，設置是生效了么？所以用取消會更合適。
這些時候，不存在關閉的概念，因為沒有內容可以關閉，只能是取消當前行為。如果使用關閉，與該場景下的用戶行為不符，反而增加了用戶對文案的理解成本。
簡單來說，取消強調的是放棄改變，關閉強調的就只是抉擇。
不過這里也有一個特殊例子，就是，微信公眾號文章轉發(fā)給好友，左上角是關閉，而釘釘里面內容轉發(fā)給朋友，就是取消。為什么呢？
在一些特殊場景之下，「關閉」是包含「取消」的。
好比剛才煮飯的例子，現(xiàn)在的電飯煲很高級，如果在過程中不想繼續(xù)了，拔掉電源就是完全關閉了，但同時這個行為也包含了人不想繼續(xù)煮飯這個行為，想取消掉了，所以這時候關閉是包含取消的。它跟文章加載完成，已經呈現(xiàn)出來，是不一樣的。
而上面這個微信與釘釘?shù)睦?，就存在這種包含關系。比如，內容已經加載完，要分享給好友，這時候加載出來的好友列表已經出現(xiàn)，只是選擇發(fā)送給誰的問題，用戶可以關閉已經加載完成的好友列表頁面，或者理解為用戶打算取消當前行為。
不過這樣的設計并不建議大家將其定義為關閉，因為畢竟行為還在繼續(xù)，使用取消反而更容易理解也更符合場景定義。
譬如，PC 的彈窗經常會同時出現(xiàn)叉（指代關閉）和取消，雖然操作的結果都是使彈窗消失，但是用戶的操作目標是不一樣的，事實上這里提供了兩種選擇，即我不想做決定，我要關掉彈窗，以及我決定現(xiàn)在不這么做，我要取消這個動作，這里的關閉其實就暗含了取消的動作。
在 PC 端，我們有足夠的空間為用戶提供不同的選擇，給予用戶充分的自主控制權，以滿足他們對功能的不同期待。而在移動端，我們需要刪減或合并功能，所以當用戶同時產生重疊的訴求時，我們往往會選擇當下最符合用戶心境的功能，這是「場景細化」的結果。這也能解釋為什么現(xiàn)在很多 PC 產品的彈窗中也只會保留取消，而不提供叉（指代關閉）的選擇。因為用戶面對功能不知所措、不做決定的情況已經越來越少，更多的用戶已經明確地知道自己應該怎么做。
這就是「取消」和「關閉」的差異，以及移動產品對兩者的取舍的根本原因。
同樣的，有一些頁面，取消和關閉都會用叉的圖標來表示，只是在不同情境中，這個叉同樣可以理解為取消，關閉，以及取消或關閉。差異點跟上述內容相同。
返回、取消和關閉看起來簡單，深入分析后又顯得復雜，但相對復雜的分析都只是為了能簡單地去運用。在這個問題中，每個人都可以從自己日常的經驗出發(fā)，然后在產品不同的語境里去體會一個詞語、一個圖標背后隱藏著我們什么樣的認知和使用的習慣。
那由這個問題延伸的，其實還有產品的導航方式，頁面出入口的設計差異，產品中整體與獨立，連續(xù)與非連續(xù)的內容結構，原生與非原生頁面的差異等等。
小問題同樣可以見大，但我們也不需要過度思考，本來問題的解讀角度就是因人而異的，也無法面面俱到，上面的只是我的理解方式。設計還是需要回歸到用戶和產品的目標，再去結合場景和產品業(yè)務的使用模式才能得出合理有價值的方案。
文章來源：優(yōu)設 作者：呆呆U理