2020-3-7 資深UI設(shè)計(jì)者
在頁(yè)面導(dǎo)航欄中，常會(huì)見(jiàn)到返回、取消與關(guān)閉三者按鈕。許多同學(xué)會(huì)弄混它們的使用邏輯，所以寫(xiě)一篇小文幫助各位梳理下。
先拋開(kāi)圖標(biāo)，我們回到功能本身的含義上看。如果我們不在產(chǎn)品的語(yǔ)境里，就單看「返回」和「關(guān)閉」這兩個(gè)詞，你首先會(huì)想到什么呢？
當(dāng)我這么去問(wèn)自己的時(shí)候，腦子里出現(xiàn)的并不只是零碎的詞語(yǔ)，而是一些場(chǎng)景和畫(huà)面。比如我走錯(cuò)路了，需要原路返回；公司復(fù)工了，我要返程回去?；蛘?，睡覺(jué)時(shí)間到了，我該關(guān)閉電腦了；飯菜燒好了，我得把油煙機(jī)關(guān)掉，等等。
如果仔細(xì)去想的話就會(huì)意識(shí)到，語(yǔ)義衍生出來(lái)的，都是我們?nèi)粘Ｉ钪械慕?jīng)驗(yàn)和對(duì)世界的認(rèn)知。產(chǎn)品中使用的各種語(yǔ)言，不管是文字也好，或者圖標(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è)過(guò)程是連續(xù)性的，不被切斷的。而「關(guān)閉」就完全不一樣了，它一般和我們的動(dòng)作有關(guān)，是一個(gè)短暫性的操作，相比返回也顯得更為獨(dú)立。
根據(jù)我們對(duì)語(yǔ)義的判斷，再結(jié)合實(shí)際產(chǎn)品中「返回」的場(chǎng)景，我們可以概括出「返回」和「關(guān)閉」的特征差異。
1. 返回
連續(xù)性：按照產(chǎn)品的頁(yè)面層級(jí)順次跳轉(zhuǎn)。但存在特殊情況，因?yàn)橛行┊a(chǎn)品定義的功能出入口是不一致的，在信息架構(gòu)層級(jí)已經(jīng)做了一定的優(yōu)化，所以返回不一定會(huì)按原來(lái)的路徑回去，可能會(huì)按產(chǎn)品既定的路徑。比如網(wǎng)易云音樂(lè)歌曲播放頁(yè)進(jìn)入直播后返回不是到播放頁(yè)。
整體性：在產(chǎn)品功能頁(yè)面關(guān)聯(lián)性較強(qiáng)的功能中，「返回」需要連接各個(gè)頁(yè)面與層級(jí)之間的架構(gòu)關(guān)系，因此「返回」作為操作節(jié)點(diǎn)，可以幫助產(chǎn)品功能的各個(gè)頁(yè)面之間建立聯(lián)系，維持產(chǎn)品的整體性。
2. 關(guān)閉
非連續(xù)性：用于產(chǎn)品中的臨時(shí)內(nèi)容或臨時(shí)動(dòng)作，比如彈窗或活動(dòng)頁(yè)，與上一級(jí)頁(yè)面沒(méi)有直接關(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 的情況很好理解，我們只要根據(jù)前面各自的特征去看就能夠理清場(chǎng)景。
3 的情況會(huì)有特殊性，因?yàn)樗瑫r(shí)具有返回和關(guān)閉這兩種看起來(lái)相矛盾的特性。其實(shí)這是由內(nèi)容決定的，當(dāng)內(nèi)容同時(shí)具有獨(dú)立性和整體性時(shí)，就需要支持兩種操作。如小程序可以作為一個(gè)獨(dú)立功能，但其本身又可以看作是一個(gè)完整的小產(chǎn)品，具有自己的頁(yè)面結(jié)構(gòu)和頁(yè)面層級(jí)。所以小程序?qū)τ谒鶎俚漠a(chǎn)品，我們有關(guān)閉的需要，小程序內(nèi)的頁(yè)面導(dǎo)航又需要返回來(lái)實(shí)現(xiàn)。
除此之外，產(chǎn)品可能開(kāi)始只有返回，后面臨時(shí)出現(xiàn)關(guān)閉按鈕，比如微博「疫情地圖」中使用「小區(qū)疫情查詢」和「7×24 小時(shí)疫情快訊」后會(huì)出現(xiàn)關(guān)閉功能（幫助用戶快速退出）。
這里我們可以從連續(xù)性和非連續(xù)性的角度看，產(chǎn)品針對(duì)具有復(fù)雜層級(jí)和內(nèi)容的頁(yè)面設(shè)計(jì)了順次（返回）和跳頁(yè)（關(guān)閉）的導(dǎo)航方式，其中關(guān)閉隨實(shí)際情境出現(xiàn)。以此為用戶提供了更為靈活的導(dǎo)航路徑，來(lái)同時(shí)滿足用戶逐級(jí)深入、連續(xù)返回瀏覽和選擇性查看、臨時(shí)關(guān)閉的需求。
針對(duì)于「關(guān)閉」，它和「取消」會(huì)有重疊的含義，所以有時(shí)并不能很好地去區(qū)分這兩個(gè)功能表達(dá)的應(yīng)用場(chǎng)景。于是，我們可以借用之前的方式，先把「取消」單獨(dú)拿出來(lái)理解。
一般來(lái)說(shuō)，「取消」意味著行為過(guò)程中，還有后續(xù)行為，整個(gè)過(guò)程沒(méi)有完成，當(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)閉。因此，它們之間就是行為上的差異。
就好比，打開(kāi)微信公眾號(hào)文章，內(nèi)容已經(jīng)加載出來(lái)，行為已經(jīng)產(chǎn)生并結(jié)束，這時(shí)候左上角就一定是關(guān)閉。而發(fā)朋友圈的時(shí)候，左上角是取消，那是因?yàn)樾袨檫^(guò)程還在繼續(xù)，沒(méi)有發(fā)布，所以可以取消。而發(fā)布之后，就無(wú)法取消，想要關(guān)閉，也就只能刪除這條朋友圈了。
所以在操作行為中的頁(yè)面，左上角最好是使用「取消」。
當(dāng)我們對(duì)詞的含義有了進(jìn)一步思考后，就可以去看它們?cè)诋a(chǎn)品中的表現(xiàn)了。
比如廣告的關(guān)閉、推薦內(nèi)容的關(guān)閉。都是產(chǎn)品自身提供的內(nèi)容，用戶不想看到就選擇關(guān)掉了，沒(méi)有試圖去改變什么。
包括內(nèi)容頁(yè)面，或者活動(dòng)頁(yè)面，被點(diǎn)開(kāi)，且加載完成呈現(xiàn)出來(lái)之后，這個(gè)行為就結(jié)束了，沒(méi)有取消的概念，只有關(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)闆](méi)有內(nèi)容可以關(guān)閉，只能是取消當(dāng)前行為。如果使用關(guān)閉，與該場(chǎng)景下的用戶行為不符，反而增加了用戶對(duì)文案的理解成本。
簡(jiǎn)單來(lái)說(shuō)，取消強(qiáng)調(diào)的是放棄改變，關(guān)閉強(qiáng)調(diào)的就只是抉擇。
不過(guò)這里也有一個(gè)特殊例子，就是，微信公眾號(hào)文章轉(zhuǎn)發(fā)給好友，左上角是關(guān)閉，而釘釘里面內(nèi)容轉(zhuǎn)發(fā)給朋友，就是取消。為什么呢？
在一些特殊場(chǎng)景之下，「關(guān)閉」是包含「取消」的。
好比剛才煮飯的例子，現(xiàn)在的電飯煲很高級(jí)，如果在過(guò)程中不想繼續(xù)了，拔掉電源就是完全關(guān)閉了，但同時(shí)這個(gè)行為也包含了人不想繼續(xù)煮飯這個(gè)行為，想取消掉了，所以這時(shí)候關(guān)閉是包含取消的。它跟文章加載完成，已經(jīng)呈現(xiàn)出來(lái)，是不一樣的。
而上面這個(gè)微信與釘釘?shù)睦樱痛嬖谶@種包含關(guān)系。比如，內(nèi)容已經(jīng)加載完，要分享給好友，這時(shí)候加載出來(lái)的好友列表已經(jīng)出現(xiàn)，只是選擇發(fā)送給誰(shuí)的問(wèn)題，用戶可以關(guān)閉已經(jīng)加載完成的好友列表頁(yè)面，或者理解為用戶打算取消當(dāng)前行為。
不過(guò)這樣的設(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)越來(lái)越少，更多的用戶已經(jīng)明確地知道自己應(yīng)該怎么做。
這就是「取消」和「關(guān)閉」的差異，以及移動(dòng)產(chǎn)品對(duì)兩者的取舍的根本原因。
同樣的，有一些頁(yè)面，取消和關(guān)閉都會(huì)用叉的圖標(biāo)來(lái)表示，只是在不同情境中，這個(gè)叉同樣可以理解為取消，關(guān)閉，以及取消或關(guān)閉。差異點(diǎn)跟上述內(nèi)容相同。
返回、取消和關(guān)閉看起來(lái)簡(jiǎn)單，深入分析后又顯得復(fù)雜，但相對(duì)復(fù)雜的分析都只是為了能簡(jiǎn)單地去運(yùn)用。在這個(gè)問(wèn)題中，每個(gè)人都可以從自己日常的經(jīng)驗(yàn)出發(fā)，然后在產(chǎn)品不同的語(yǔ)境里去體會(huì)一個(gè)詞語(yǔ)、一個(gè)圖標(biāo)背后隱藏著我們什么樣的認(rèn)知和使用的習(xí)慣。
那由這個(gè)問(wèn)題延伸的，其實(shí)還有產(chǎn)品的導(dǎo)航方式，頁(yè)面出入口的設(shè)計(jì)差異，產(chǎn)品中整體與獨(dú)立，連續(xù)與非連續(xù)的內(nèi)容結(jié)構(gòu)，原生與非原生頁(yè)面的差異等等。
小問(wèn)題同樣可以見(jiàn)大，但我們也不需要過(guò)度思考，本來(lái)問(wèn)題的解讀角度就是因人而異的，也無(wú)法面面俱到，上面的只是我的理解方式。設(shè)計(jì)還是需要回歸到用戶和產(chǎn)品的目標(biāo)，再去結(jié)合場(chǎng)景和產(chǎn)品業(yè)務(wù)的使用模式才能得出合理有價(jià)值的方案。
文章來(lái)源：優(yōu)設(shè) 作者：呆呆U理
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com