交互細節(jié)科普！幫你掌握返回、關閉和取消的用法

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

更多交互細節(jié)設計：

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

今天來聊一聊「返回」、「關閉」和「取消」在實際設計中的用法。

一、返回

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

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

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

二、關閉

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

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

有些時候「關閉」和「取消」可混用。

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

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

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

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

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

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

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

三、取消

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

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

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

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

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

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

四、總結(jié)

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

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

歡迎關注作者的微信公眾號：「Echo的設計筆記」