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

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

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

一、返回

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

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

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

二、關(guān)閉

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

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

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

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

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

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

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

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

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

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

三、取消

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

當含有「取消」按鈕，通常頁面有需要一些填寫的表單，如下圖 iOS 郵箱所示：

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

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

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

幾乎主流的產(chǎn)品和 iOS 系統(tǒng)搜索，都將「取消」放在右邊。可能是為了布局的合理性，如果從邏輯上很難解釋這個現(xiàn)象。

四、總結(jié)

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

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

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