交互設(shè)計(jì)細(xì)節(jié)中，最常見(jiàn)的「返回」、「關(guān)閉」和「取消」應(yīng)該如何運(yùn)用？本文用超多案例幫你掌握。

當(dāng)進(jìn)入新頁(yè)面時(shí)，回到上一級(jí)頁(yè)面的操作會(huì)使用「返回」、「關(guān)閉」或者是「取消」。他們看起來(lái)相似，但實(shí)際使用上有明顯的區(qū)別。

今天來(lái)聊一聊「返回」、「關(guān)閉」和「取消」在實(shí)際設(shè)計(jì)中的用法。

一、返回

如下圖在微信 App-我 tab 頁(yè)，點(diǎn)擊列表（卡包）進(jìn)入下一頁(yè)，新頁(yè)面（卡包）從右往左出現(xiàn)，這時(shí)候?qū)Ш綑谧髠?cè)是返回圖標(biāo)。

上述案例，幾乎所有的頁(yè)面返回都符合這個(gè)規(guī)律，可以簡(jiǎn)單總結(jié)下：如果下一級(jí)頁(yè)面從右往左移動(dòng)，這時(shí)候使用「返回」。

從右往左移動(dòng)，然后通過(guò)「返回」，原路回去，符合交互行為邏輯。

二、關(guān)閉

如下圖，發(fā)朋友圈，點(diǎn)擊「從手機(jī)相冊(cè)選擇」，這時(shí)候新頁(yè)面從屏幕底部出現(xiàn)，導(dǎo)航欄左側(cè)為「關(guān)閉」。

之前版本微信從相冊(cè)中選取照片，使用的是「取消」，后面版本改為了關(guān)閉，如下圖所示：

有些時(shí)候「關(guān)閉」和「取消」可混用。

facebook 發(fā)布動(dòng)態(tài)，頁(yè)面從底部出現(xiàn)，使用的也是「關(guān)閉」。

對(duì)于頁(yè)面臨時(shí)從底部覆蓋上一級(jí)頁(yè)面，且是完全覆蓋，這種情況不應(yīng)該使用返回，可使用「關(guān)閉」。

用戶點(diǎn)擊鏈接，通過(guò)微信內(nèi)置的瀏覽器打開(kāi)，頁(yè)面從右邊往左移動(dòng)打開(kāi)，這時(shí)候?qū)Ш綑跒椤戈P(guān)閉」操作。這似乎不符合上述結(jié)論。

出現(xiàn)這種情況的原因是：關(guān)閉操作承接的任務(wù)是關(guān)閉整個(gè)網(wǎng)站（程序），而不是回到該網(wǎng)站（程序）的上一級(jí)頁(yè)面。

如果出現(xiàn)的新頁(yè)面是一個(gè)系統(tǒng)，這時(shí)候需要使用關(guān)閉（即使新頁(yè)面從右往左移動(dòng)出現(xiàn)）。

對(duì)于底部浮層面板，符合上述規(guī)則，基本都是使用「關(guān)閉」，如下圖所示：

支付寶充值提現(xiàn)，選擇銀行卡時(shí)，浮層面板從底部出現(xiàn)，使用返回，不符合交互動(dòng)效，這種做法不對(duì)，如下圖所示：

三、取消

「關(guān)閉」和「取消」區(qū)別不大，都是結(jié)束當(dāng)前頁(yè)。很多情況下可混用。

當(dāng)含有「取消」按鈕，通常頁(yè)面有需要一些填寫(xiě)的表單，如下圖 iOS 郵箱所示：

目前我理解比較大的區(qū)別是：「取消」多適用于填寫(xiě)較多的表單的臨時(shí)覆蓋頁(yè)面。如下圖發(fā)布朋友圈所示：

上圖中，涉及到取消的位置，幾乎所有的取消都在左側(cè)。取消等同于關(guān)閉、回到上一級(jí)頁(yè)面的動(dòng)作，位置上布局邏輯統(tǒng)一。

當(dāng)然也有例外，如搜索的「取消」則在右邊：

幾乎主流的產(chǎn)品和 iOS 系統(tǒng)搜索，都將「取消」放在右邊?？赡苁菫榱瞬季值暮侠硇?，如果從邏輯上很難解釋這個(gè)現(xiàn)象。

四、總結(jié)

「返回」、「關(guān)閉」和「取消」三個(gè)的用法總結(jié)：

1. 新一級(jí)頁(yè)面從右到左移動(dòng)轉(zhuǎn)場(chǎng)用「返回」；
2. 新頁(yè)面從底部出現(xiàn)覆蓋當(dāng)前界面，可使用「取消」或者「關(guān)閉」，這部分沒(méi)有明確的對(duì)與錯(cuò)；
3. 當(dāng)新頁(yè)面從底部出現(xiàn)覆蓋當(dāng)前界面，需要填寫(xiě)較多表單內(nèi)容時(shí)，使用「取消」居多。
4. 進(jìn)入一個(gè)全新的系統(tǒng)，即使新頁(yè)面從右往左出現(xiàn)，也應(yīng)該使用去「關(guān)閉」，而不應(yīng)該使用「返回」。

作者：Echo的設(shè)計(jì)筆記