在頁面導航欄中，常會見到返回、取消與關(guān)閉三者按鈕。許多同學會弄混它們的使用邏輯，所以寫一篇小文幫助各位梳理下。

返回和關(guān)閉

先拋開圖標，我們回到功能本身的含義上看。如果我們不在產(chǎn)品的語境里，就單看「返回」和「關(guān)閉」這兩個詞，你首先會想到什么呢？

當我這么去問自己的時候，腦子里出現(xiàn)的并不只是零碎的詞語，而是一些場景和畫面。比如我走錯路了，需要原路返回；公司復工了，我要返程回去?；蛘?，睡覺時間到了，我該關(guān)閉電腦了；飯菜燒好了，我得把油煙機關(guān)掉，等等。

如果仔細去想的話就會意識到，語義衍生出來的，都是我們?nèi)粘Ｉ钪械慕?jīng)驗和對世界的認知。產(chǎn)品中使用的各種語言，不管是文字也好，或者圖標圖形也罷，一直都是以我們對它最本能的理解為基礎(chǔ)的。所以只要你聯(lián)想自己對「返回」和「關(guān)閉」的看法，就能知道它應該在什么樣的產(chǎn)品情境中出現(xiàn)，以及它為什么會出現(xiàn)。

于是，很自然的，我們會把「返回」和「路徑」聯(lián)系在一起，所以「返回」在導航設(shè)計中不可或缺。并且「返」也預示著我們會回到之前的路徑節(jié)點，整個過程是連續(xù)性的，不被切斷的。而「關(guān)閉」就完全不一樣了，它一般和我們的動作有關(guān)，是一個短暫性的操作，相比返回也顯得更為獨立。

根據(jù)我們對語義的判斷，再結(jié)合實際產(chǎn)品中「返回」的場景，我們可以概括出「返回」和「關(guān)閉」的特征差異。

1. 返回

連續(xù)性：按照產(chǎn)品的頁面層級順次跳轉(zhuǎn)。但存在特殊情況，因為有些產(chǎn)品定義的功能出入口是不一致的，在信息架構(gòu)層級已經(jīng)做了一定的優(yōu)化，所以返回不一定會按原來的路徑回去，可能會按產(chǎn)品既定的路徑。比如網(wǎng)易云音樂歌曲播放頁進入直播后返回不是到播放頁。

整體性：在產(chǎn)品功能頁面關(guān)聯(lián)性較強的功能中，「返回」需要連接各個頁面與層級之間的架構(gòu)關(guān)系，因此「返回」作為操作節(jié)點，可以幫助產(chǎn)品功能的各個頁面之間建立聯(lián)系，維持產(chǎn)品的整體性。

2. 關(guān)閉

非連續(xù)性：用于產(chǎn)品中的臨時內(nèi)容或臨時動作，比如彈窗或活動頁，與上一級頁面沒有直接關(guān)系。

獨立性：非產(chǎn)品原生內(nèi)容或是產(chǎn)品內(nèi)的獨立內(nèi)容。比如小程序、瀏覽器標簽等。

3. 返回和關(guān)閉的使用場景

知道了返回和關(guān)閉的特征后，我們可以從兩者的使用角度上再去梳理一下。

現(xiàn)在產(chǎn)品中關(guān)于返回和關(guān)閉有三種狀態(tài)：

1. 只有返回
2. 只有關(guān)閉
3. 返回和關(guān)閉同時存在

1 和 2 的情況很好理解，我們只要根據(jù)前面各自的特征去看就能夠理清場景。

3 的情況會有特殊性，因為它同時具有返回和關(guān)閉這兩種看起來相矛盾的特性。其實這是由內(nèi)容決定的，當內(nèi)容同時具有獨立性和整體性時，就需要支持兩種操作。如小程序可以作為一個獨立功能，但其本身又可以看作是一個完整的小產(chǎn)品，具有自己的頁面結(jié)構(gòu)和頁面層級。所以小程序?qū)τ谒鶎俚漠a(chǎn)品，我們有關(guān)閉的需要，小程序內(nèi)的頁面導航又需要返回來實現(xiàn)。

除此之外，產(chǎn)品可能開始只有返回，后面臨時出現(xiàn)關(guān)閉按鈕，比如微博「疫情地圖」中使用「小區(qū)疫情查詢」和「7×24 小時疫情快訊」后會出現(xiàn)關(guān)閉功能（幫助用戶快速退出）。

這里我們可以從連續(xù)性和非連續(xù)性的角度看，產(chǎn)品針對具有復雜層級和內(nèi)容的頁面設(shè)計了順次（返回）和跳頁（關(guān)閉）的導航方式，其中關(guān)閉隨實際情境出現(xiàn)。以此為用戶提供了更為靈活的導航路徑，來同時滿足用戶逐級深入、連續(xù)返回瀏覽和選擇性查看、臨時關(guān)閉的需求。

取消和關(guān)閉

針對于「關(guān)閉」，它和「取消」會有重疊的含義，所以有時并不能很好地去區(qū)分這兩個功能表達的應用場景。于是，我們可以借用之前的方式，先把「取消」單獨拿出來理解。

一般來說，「取消」意味著行為過程中，還有后續(xù)行為，整個過程沒有完成，當下后悔了，因此取消了當前操作。它更傾向于表達我們主動去做了什么改變，然后中途放棄了。

比如，想煮個飯，于是下了米，倒了水，定時，確認（取消），完成（關(guān)閉）。

這時候中間如果突然不想煮飯了，在定時之后，就停止當前行為，那就是取消。但點了確認并完成煮飯之后，這個行為就結(jié)束了，只能關(guān)閉。因此，它們之間就是行為上的差異。

就好比，打開微信公眾號文章，內(nèi)容已經(jīng)加載出來，行為已經(jīng)產(chǎn)生并結(jié)束，這時候左上角就一定是關(guān)閉。而發(fā)朋友圈的時候，左上角是取消，那是因為行為過程還在繼續(xù)，沒有發(fā)布，所以可以取消。而發(fā)布之后，就無法取消，想要關(guān)閉，也就只能刪除這條朋友圈了。

所以在操作行為中的頁面，左上角最好是使用「取消」。

當我們對詞的含義有了進一步思考后，就可以去看它們在產(chǎn)品中的表現(xiàn)了。

比如廣告的關(guān)閉、推薦內(nèi)容的關(guān)閉。都是產(chǎn)品自身提供的內(nèi)容，用戶不想看到就選擇關(guān)掉了，沒有試圖去改變什么。

包括內(nèi)容頁面，或者活動頁面，被點開，且加載完成呈現(xiàn)出來之后，這個行為就結(jié)束了，沒有取消的概念，只有關(guān)閉。

再比如，選擇圖片文件時的取消，微信發(fā)朋友圈、微博發(fā)帖時的取消等等，我們能發(fā)現(xiàn)都是用戶主動采取了什么措施，但是又后悔了所以選擇取消。

或者如游戲設(shè)置，就不適合用關(guān)閉，會讓用戶在理解上產(chǎn)在歧義，比如用戶設(shè)置到一半，不想設(shè)置了，那現(xiàn)在關(guān)閉的話，設(shè)置是生效了么？所以用取消會更合適。

這些時候，不存在關(guān)閉的概念，因為沒有內(nèi)容可以關(guān)閉，只能是取消當前行為。如果使用關(guān)閉，與該場景下的用戶行為不符，反而增加了用戶對文案的理解成本。

簡單來說，取消強調(diào)的是放棄改變，關(guān)閉強調(diào)的就只是抉擇。

不過這里也有一個特殊例子，就是，微信公眾號文章轉(zhuǎn)發(fā)給好友，左上角是關(guān)閉，而釘釘里面內(nèi)容轉(zhuǎn)發(fā)給朋友，就是取消。為什么呢？

在一些特殊場景之下，「關(guān)閉」是包含「取消」的。

好比剛才煮飯的例子，現(xiàn)在的電飯煲很高級，如果在過程中不想繼續(xù)了，拔掉電源就是完全關(guān)閉了，但同時這個行為也包含了人不想繼續(xù)煮飯這個行為，想取消掉了，所以這時候關(guān)閉是包含取消的。它跟文章加載完成，已經(jīng)呈現(xiàn)出來，是不一樣的。

而上面這個微信與釘釘?shù)睦?，就存在這種包含關(guān)系。比如，內(nèi)容已經(jīng)加載完，要分享給好友，這時候加載出來的好友列表已經(jīng)出現(xiàn)，只是選擇發(fā)送給誰的問題，用戶可以關(guān)閉已經(jīng)加載完成的好友列表頁面，或者理解為用戶打算取消當前行為。

不過這樣的設(shè)計并不建議大家將其定義為關(guān)閉，因為畢竟行為還在繼續(xù)，使用取消反而更容易理解也更符合場景定義。

譬如，PC 的彈窗經(jīng)常會同時出現(xiàn)叉（指代關(guān)閉）和取消，雖然操作的結(jié)果都是使彈窗消失，但是用戶的操作目標是不一樣的，事實上這里提供了兩種選擇，即我不想做決定，我要關(guān)掉彈窗，以及我決定現(xiàn)在不這么做，我要取消這個動作，這里的關(guān)閉其實就暗含了取消的動作。

在 PC 端，我們有足夠的空間為用戶提供不同的選擇，給予用戶充分的自主控制權(quán)，以滿足他們對功能的不同期待。而在移動端，我們需要刪減或合并功能，所以當用戶同時產(chǎn)生重疊的訴求時，我們往往會選擇當下最符合用戶心境的功能，這是「場景細化」的結(jié)果。這也能解釋為什么現(xiàn)在很多 PC 產(chǎn)品的彈窗中也只會保留取消，而不提供叉（指代關(guān)閉）的選擇。因為用戶面對功能不知所措、不做決定的情況已經(jīng)越來越少，更多的用戶已經(jīng)明確地知道自己應該怎么做。

這就是「取消」和「關(guān)閉」的差異，以及移動產(chǎn)品對兩者的取舍的根本原因。

同樣的，有一些頁面，取消和關(guān)閉都會用叉的圖標來表示，只是在不同情境中，這個叉同樣可以理解為取消，關(guān)閉，以及取消或關(guān)閉。差異點跟上述內(nèi)容相同。

結(jié)語

返回、取消和關(guān)閉看起來簡單，深入分析后又顯得復雜，但相對復雜的分析都只是為了能簡單地去運用。在這個問題中，每個人都可以從自己日常的經(jīng)驗出發(fā)，然后在產(chǎn)品不同的語境里去體會一個詞語、一個圖標背后隱藏著我們什么樣的認知和使用的習慣。

那由這個問題延伸的，其實還有產(chǎn)品的導航方式，頁面出入口的設(shè)計差異，產(chǎn)品中整體與獨立，連續(xù)與非連續(xù)的內(nèi)容結(jié)構(gòu)，原生與非原生頁面的差異等等。

小問題同樣可以見大，但我們也不需要過度思考，本來問題的解讀角度就是因人而異的，也無法面面俱到，上面的只是我的理解方式。設(shè)計還是需要回歸到用戶和產(chǎn)品的目標，再去結(jié)合場景和產(chǎn)品業(yè)務(wù)的使用模式才能得出合理有價值的方案。

文章來源：優(yōu)設(shè)    作者：呆呆U理