交互細(xì)節(jié)科普!幫你掌握返回、關(guān)閉和取消的用法
交互設(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é):
- 新一級(jí)頁(yè)面從右到左移動(dòng)轉(zhuǎn)場(chǎng)用「返回」;
- 新頁(yè)面從底部出現(xiàn)覆蓋當(dāng)前界面,可使用「取消」或者「關(guān)閉」,這部分沒(méi)有明確的對(duì)與錯(cuò);
- 當(dāng)新頁(yè)面從底部出現(xiàn)覆蓋當(dāng)前界面,需要填寫(xiě)較多表單內(nèi)容時(shí),使用「取消」居多。
- 進(jìn)入一個(gè)全新的系統(tǒng),即使新頁(yè)面從右往左出現(xiàn),也應(yīng)該使用去「關(guān)閉」,而不應(yīng)該使用「返回」。
作者:Echo的設(shè)計(jì)筆記
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問(wèn):網(wǎng)站技術(shù)
本文來(lái)源:http://www.sonygallery.com.cn/seodongtai/18117.html