2020-3-7 資深UI設(shè)計(jì)者
在頁面導(dǎo)航欄中，常會(huì)見到返回、取消與關(guān)閉三者按鈕。許多同學(xué)會(huì)弄混它們的使用邏輯，所以寫一篇小文幫助各位梳理下。
先拋開圖標(biāo)，我們回到功能本身的含義上看。如果我們不在產(chǎn)品的語境里，就單看「返回」和「關(guān)閉」這兩個(gè)詞，你首先會(huì)想到什么呢？
當(dāng)我這么去問自己的時(shí)候，腦子里出現(xiàn)的并不只是零碎的詞語，而是一些場景和畫面。比如我走錯(cuò)路了，需要原路返回；公司復(fù)工了，我要返程回去?；蛘?，睡覺時(shí)間到了，我該關(guān)閉電腦了；飯菜燒好了，我得把油煙機(jī)關(guān)掉，等等。
如果仔細(xì)去想的話就會(huì)意識(shí)到，語義衍生出來的，都是我們?nèi)粘Ｉ钪械慕?jīng)驗(yàn)和對世界的認(rèn)知。產(chǎn)品中使用的各種語言，不管是文字也好，或者圖標(biāo)圖形也罷，一直都是以我們對它最本能的理解為基礎(chǔ)的。所以只要你聯(lián)想自己對「返回」和「關(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ù)我們對語義的判斷，再結(jié)合實(shí)際產(chǎn)品中「返回」的場景，我們可以概括出「返回」和「關(guān)閉」的特征差異。
1. 返回
連續(xù)性：按照產(chǎn)品的頁面層級順次跳轉(zhuǎn)。但存在特殊情況，因?yàn)橛行┊a(chǎn)品定義的功能出入口是不一致的，在信息架構(gòu)層級已經(jīng)做了一定的優(yōu)化，所以返回不一定會(huì)按原來的路徑回去，可能會(huì)按產(chǎn)品既定的路徑。比如網(wǎng)易云音樂歌曲播放頁進(jìn)入直播后返回不是到播放頁。
整體性：在產(chǎn)品功能頁面關(guān)聯(lián)性較強(qiáng)的功能中，「返回」需要連接各個(gè)頁面與層級之間的架構(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)頁，與上一級頁面沒有直接關(guān)系。
獨(dú)立性：非產(chǎn)品原生內(nèi)容或是產(chǎn)品內(nèi)的獨(dú)立內(nèi)容。比如小程序、瀏覽器標(biāo)簽等。
3. 返回和關(guān)閉的使用場景
知道了返回和關(guān)閉的特征后，我們可以從兩者的使用角度上再去梳理一下。
現(xiàn)在產(chǎn)品中關(guān)于返回和關(guān)閉有三種狀態(tài)：
1 和 2 的情況很好理解，我們只要根據(jù)前面各自的特征去看就能夠理清場景。
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)和頁面層級。所以小程序?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)品針對具有復(fù)雜層級和內(nèi)容的頁面設(shè)計(jì)了順次（返回）和跳頁（關(guān)閉）的導(dǎo)航方式，其中關(guān)閉隨實(shí)際情境出現(xiàn)。以此為用戶提供了更為靈活的導(dǎo)航路徑，來同時(shí)滿足用戶逐級深入、連續(xù)返回瀏覽和選擇性查看、臨時(shí)關(guān)閉的需求。
針對于「關(guān)閉」，它和「取消」會(huì)有重疊的含義，所以有時(shí)并不能很好地去區(qū)分這兩個(gè)功能表達(dá)的應(yī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)閉。因此，它們之間就是行為上的差異。
就好比，打開微信公眾號文章，內(nèi)容已經(jīng)加載出來，行為已經(jīng)產(chǎn)生并結(jié)束，這時(shí)候左上角就一定是關(guān)閉。而發(fā)朋友圈的時(shí)候，左上角是取消，那是因?yàn)樾袨檫^程還在繼續(xù)，沒有發(fā)布，所以可以取消。而發(fā)布之后，就無法取消，想要關(guān)閉，也就只能刪除這條朋友圈了。
所以在操作行為中的頁面，左上角最好是使用「取消」。
當(dāng)我們對詞的含義有了進(jìn)一步思考后，就可以去看它們在產(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)閉，與該場景下的用戶行為不符，反而增加了用戶對文案的理解成本。
簡單來說，取消強(qiáng)調(diào)的是放棄改變，關(guān)閉強(qiáng)調(diào)的就只是抉擇。
不過這里也有一個(gè)特殊例子，就是，微信公眾號文章轉(zhuǎn)發(fā)給好友，左上角是關(guān)閉，而釘釘里面內(nèi)容轉(zhuǎn)發(fā)給朋友，就是取消。為什么呢？
在一些特殊場景之下，「關(guān)閉」是包含「取消」的。
好比剛才煮飯的例子，現(xiàn)在的電飯煲很高級，如果在過程中不想繼續(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ù)，使用取消反而更容易理解也更符合場景定義。
譬如，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)，以滿足他們對功能的不同期待。而在移動(dòng)端，我們需要?jiǎng)h減或合并功能，所以當(dāng)用戶同時(shí)產(chǎn)生重疊的訴求時(shí)，我們往往會(huì)選擇當(dāng)下最符合用戶心境的功能，這是「場景細(xì)化」的結(jié)果。這也能解釋為什么現(xiàn)在很多 PC 產(chǎn)品的彈窗中也只會(huì)保留取消，而不提供叉（指代關(guān)閉）的選擇。因?yàn)橛脩裘鎸δ懿恢?、不做決定的情況已經(jīng)越來越少，更多的用戶已經(jīng)明確地知道自己應(yīng)該怎么做。
這就是「取消」和「關(guān)閉」的差異，以及移動(dòng)產(chǎn)品對兩者的取舍的根本原因。
同樣的，有一些頁面，取消和關(guān)閉都會(huì)用叉的圖標(biāo)來表示，只是在不同情境中，這個(gè)叉同樣可以理解為取消，關(guān)閉，以及取消或關(guān)閉。差異點(diǎn)跟上述內(nèi)容相同。
返回、取消和關(guān)閉看起來簡單，深入分析后又顯得復(fù)雜，但相對復(fù)雜的分析都只是為了能簡單地去運(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ǎn)品業(yè)務(wù)的使用模式才能得出合理有價(jià)值的方案。
文章來源：優(yōu)設(shè) 作者：呆呆U理
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com