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

返回和關(guān)閉

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

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

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

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

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

1. 返回

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

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

2. 關(guān)閉

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

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

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

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

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

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

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

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

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

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

取消和關(guān)閉

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

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

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

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

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

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

當(dāng)我們對(duì)詞的含義有了進(jìn)一步思考后，就可以去看它們?cè)诋a(chǎn)品中的表現(xiàn)了。

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

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

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

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

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

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

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

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

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

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

不過這樣的設(shè)計(jì)并不建議大家將其定義為關(guān)閉，因?yàn)楫吘剐袨檫€在繼續(xù)，使用取消反而更容易理解也更符合場(chǎng)景定義。

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

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

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

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

結(jié)語

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

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

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

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