編輯導(dǎo)語：返回按鈕和關(guān)閉按鈕是日常中經(jīng)常會使用的兩種按鈕，這兩種按鈕在邏輯表現(xiàn)上很相似，但卻有明顯的不同，你真的用對了嗎？本篇文章中，作者將為我們具體介紹兩種按鈕的正確用法，一起來學(xué)習(xí)一下。

一、介紹

返回按鈕和關(guān)閉按鈕（嚴(yán)謹(jǐn)?shù)膩碇v應(yīng)該叫關(guān)閉/取消按鈕，后文會進(jìn)行細(xì)致的解釋，為了方便文中統(tǒng)一叫關(guān)閉按鈕）是設(shè)計(jì)中常見的圖標(biāo)按鈕，如下圖所示為返回按鈕和關(guān)閉按鈕的基本視覺樣式。

返回按鈕和關(guān)閉按鈕在頁面布局設(shè)計(jì)中使用的非常多，其主要作用是幫助用戶在產(chǎn)品中“導(dǎo)航”，如返回到某一頁面或者是關(guān)閉正在瀏覽的頁面，所以從信息架構(gòu)層面來講返回按鈕和關(guān)閉按鈕都屬于導(dǎo)航按鈕。如下圖所示為手機(jī)設(shè)置頁面和在日歷中創(chuàng)建日程頁面中分別使用了返回按鈕和關(guān)閉按鈕。

由于返回按鈕和關(guān)閉按鈕在體驗(yàn)效果上比較相似，即如上圖所示點(diǎn)擊按鈕后都回到之前的頁面，因此實(shí)際中能經(jīng)?？吹藉e用返回按鈕和關(guān)閉按鈕的例子，如下圖所示點(diǎn)擊左圖中的編輯按鈕，則可以進(jìn)入如下右圖所示的頁面編輯管理狀態(tài)，但頁面中使用返回按鈕是錯誤的，此處應(yīng)該使用關(guān)閉按鈕。

如上圖所示，盡管關(guān)閉按鈕和返回按鈕在邏輯表現(xiàn)上很相似，但是其還是有本質(zhì)上的區(qū)別，否則設(shè)計(jì)中也不會出現(xiàn)“返回”和“關(guān)閉”這兩個不同的設(shè)計(jì)名詞和概念。下面就從定義和使用場景等方面來具體分析一下返回按鈕和關(guān)閉按鈕之間的區(qū)別。

二、返回按鈕

1. 返回按鈕的定義

返回按鈕的邏輯定義主要包括2個方面，即返回上一瀏覽頁面和返回上一層級頁面。

（1）返回上一瀏覽頁面

返回按鈕表達(dá)“返回上一瀏覽頁面”的含義，即Back Button，主要是幫助用戶返回進(jìn)入當(dāng)前頁面之前的頁面，這是返回按鈕的基本含義，使用場景也是最多的。

如下圖所示，用戶從頁面A點(diǎn)擊進(jìn)入頁面B，再進(jìn)入頁面C，此時用戶點(diǎn)擊頁面C中的返回按鈕，則返回頁面B，再點(diǎn)擊頁面B中的返回按鈕，則會返回頁面A。

據(jù)此可以歸納出返回按鈕表達(dá)“返回上一瀏覽頁面”含義時的特征有如下幾點(diǎn)：

①用戶瀏覽過的頁面

返回按鈕表達(dá)“返回上一瀏覽頁面”含義的最基本特征是返回的頁面必然是用戶瀏覽過的頁面，而且是用戶在當(dāng)前頁面之前瀏覽過的頁面，即按照瀏覽的倒序返回。如上圖所示，用戶先從頁面A進(jìn)入頁面B，進(jìn)入頁面C，依次點(diǎn)擊返回按鈕也一定是先返回頁面B，再返回頁面A。

②當(dāng)前頁面和上一瀏覽頁面之間沒有必然的邏輯關(guān)聯(lián)性

返回按鈕表達(dá)“返回上一瀏覽頁面”含義時另外一個特征就是當(dāng)前頁面和上一瀏覽頁面之間沒有必然的邏輯關(guān)聯(lián)性，如上圖所示頁面A可能是功能模塊1中的一級頁面，頁面B可能是功能模塊2中的二級頁面，頁面C可能是功能模塊3中的某一級頁面。

甚至一些場景下，通過返回按鈕可以在不同應(yīng)用的頁面中進(jìn)行返回跳轉(zhuǎn)，比如在支付流程中，跳轉(zhuǎn)到微信支付頁面后，此時點(diǎn)擊支付頁面中的返回按鈕，就會直接返回到當(dāng)前應(yīng)用，而不是微信中的某一頁面。

③系統(tǒng)返回邏輯

當(dāng)返回按鈕“返回上一瀏覽頁面”含義時，其邏輯作用與Android系統(tǒng)導(dǎo)航欄中的返回按鍵是一致的。如下圖所示用戶點(diǎn)擊頁面標(biāo)題欄左側(cè)返回按鈕依次返回頁面B和A，這與用戶點(diǎn)擊手機(jī)屏幕底部的系統(tǒng)導(dǎo)航欄中的返回按鈕的邏輯是完全一致。

現(xiàn)在全面屏的Android設(shè)備上，不再顯示底部導(dǎo)航欄，而是改為全局的手勢操作，即在全面屏邊緣滑動也可以返回上一個瀏覽頁面，這與點(diǎn)擊頁面中的返回按鈕的作用是一致的。

值得注意的是，系統(tǒng)底部導(dǎo)航欄是Android系統(tǒng)獨(dú)有，iOS系統(tǒng)不支持，但是iOS的設(shè)備中同樣支持全局手勢操作返回上一瀏覽頁面的功能。

（2）進(jìn)入上一層級頁面

返回按鈕表達(dá)“進(jìn)入上一層級頁面”含義，即Upward Button，是幫助用戶返回當(dāng)前頁面的上一層級結(jié)構(gòu)頁面。返回按鈕表達(dá)“進(jìn)入上一層級頁面”含義的最大特點(diǎn)是點(diǎn)擊返回按鈕返回的頁面完全由產(chǎn)品結(jié)構(gòu)來決定，與用戶實(shí)際的操作和瀏覽頁面沒有任何關(guān)系。

如下圖所示產(chǎn)品中一共4個層級結(jié)構(gòu)，每一個層級結(jié)構(gòu)代表一個頁面（即結(jié)構(gòu)A-1代表頁面A-1）。

假如用戶先進(jìn)入頁面A，通過頁面A進(jìn)入到頁面B-1，通過頁面B-1中進(jìn)入到頁面C-3，如下圖中綠色路徑所示，此時用戶在頁面C-3中點(diǎn)擊返回按鈕，則會進(jìn)入到頁面C-2，再點(diǎn)擊返回按鈕，則依次進(jìn)入到頁面C-1和頁面C，直到產(chǎn)品的頂級結(jié)構(gòu)頁面，如下圖中紅色路徑所示。

返回按鈕表達(dá)“進(jìn)入上一層級頁面”含義在實(shí)際使用中有優(yōu)點(diǎn)也有缺點(diǎn)，優(yōu)點(diǎn)是可以將用戶引導(dǎo)到目標(biāo)頁面中，比如用戶從模塊A進(jìn)入模塊B的子級頁面，可以通過返回按鈕“進(jìn)入上一層級頁面”的模塊B頁面，這樣可以對頁面B進(jìn)行引流和曝光，尤其是跨應(yīng)用跳轉(zhuǎn)，可以很好的將用戶引導(dǎo)到產(chǎn)品中的首頁。

但缺點(diǎn)也很明顯，在產(chǎn)品使用過程中用戶對自己的行為缺少預(yù)期和控制，很容易中斷用戶的操作流程，因此在實(shí)際中使用的相對較少。

從返回按鈕表達(dá)“返回上一瀏覽頁面”和“進(jìn)入上一層級頁面”含義的功能邏輯來看，這兩種設(shè)計(jì)在實(shí)際中有大概率是“體驗(yàn)相同”的，因?yàn)橐话銇碚f，用戶在產(chǎn)品中的操作就是在層級結(jié)構(gòu)之間進(jìn)行跳轉(zhuǎn)，即從父級結(jié)構(gòu)頁面點(diǎn)擊進(jìn)入到子級結(jié)構(gòu)頁面，此時點(diǎn)擊返回按鈕時，無論是“返回上一瀏覽頁面”還是“進(jìn)入上一層級頁面”都是同一個頁面。

如下圖所示，用戶從頁面C依次點(diǎn)擊進(jìn)入到頁面C-1，頁面C-2和頁面C-3，此時無論返回按鈕表達(dá)的是何種含義，依次點(diǎn)擊返回按鈕都會從頁面C-3返回到頁面C-2，頁面C-1和頁面。

2. 返回按鈕的使用規(guī)范

返回按鈕無論是表達(dá)“返回上一瀏覽頁面”含義還是表達(dá)“進(jìn)入上一層級頁面”含義，在具體的使用規(guī)范方面是一致的，僅僅有著功能邏輯上的區(qū)別。

（1）返回按鈕只能使用在全頁面中

返回按鈕只能在全頁面中使用，如一些浮層或者彈窗彈窗等其他場景都不能使用返回按鈕，如下右圖所示的浮層面板中使用返回按鈕就是錯誤的。

從上圖也可以看出，返回按鈕關(guān)聯(lián)的頁面（即返回前后的頁面）一定是全屏幕的且有效的展示區(qū)域大小是完全相同的沒有大小差異，如上右圖所示，浮層面板的區(qū)域大小就是小于全頁面，因此使用返回按鈕是錯誤的。

（2）在產(chǎn)品主要層級結(jié)構(gòu)的全頁面中使用返回按鈕

返回按鈕主要作用就是幫助用戶在產(chǎn)品中“導(dǎo)航”，因此僅僅產(chǎn)品主要層級結(jié)構(gòu)的全頁面才能使用，即返回按鈕是幫助用戶在產(chǎn)品不同頁面之間進(jìn)行“流轉(zhuǎn)”導(dǎo)航，這也意味著通過產(chǎn)品的層級結(jié)構(gòu)和導(dǎo)航，用戶可以多次進(jìn)入帶有返回按鈕的同一個頁面。

如下圖所示用戶可以點(diǎn)擊頁面A中的功能入口，用戶可以多次進(jìn)入頁面B。

同理，如果用戶無法多次進(jìn)入同一個頁面，那么這個頁面是不能使用返回按鈕的，比如一些臨時頁面（比如新建編輯頁面）或者頁面的臨時狀態(tài)（頁面的編輯管理狀態(tài)）。

盡管用戶可以多次使用臨時頁面，但是用戶每次進(jìn)入的臨時頁面從邏輯本質(zhì)上講都不是同一個頁面（盡管頁面功能邏輯是完全一致的）。

（3）返回按鈕與頁面標(biāo)題欄組合使用

返回按鈕作為產(chǎn)品的導(dǎo)航系統(tǒng)一部分，因此常與頁面標(biāo)題欄組合使用，即返回按鈕一般布局在全頁面的標(biāo)題欄的左側(cè)，如下圖所示。

三、關(guān)閉按鈕

1. 關(guān)閉按鈕的含義

與返回按鈕類似，關(guān)閉按鈕也同樣有2種表達(dá)含義，即取消和關(guān)閉。

（1）取消

關(guān)閉按鈕表達(dá)“取消”含義時，即Cancel Button，其本質(zhì)上包括2種含義即先取消用戶的當(dāng)前的操作再去關(guān)閉當(dāng)前的操作頁面（包括彈窗等操作區(qū)域）或者頁面狀態(tài)。

如下圖所示為系統(tǒng)中添加日程的頁面，左上角紅色區(qū)域的關(guān)閉按鈕表達(dá)的就是“取消”含義，即點(diǎn)擊關(guān)閉按鈕后，頁面中如時間設(shè)置，鬧鐘提醒等相關(guān)操作都不會被保存，同時關(guān)閉該頁面返回到之前的頁面中。

實(shí)際中當(dāng)關(guān)閉按鈕表達(dá)“取消”含義時，一般頁面中會有一個與“取消”含義相對的操作按鈕，即該按鈕操作后會保存用戶的相關(guān)操作并關(guān)閉頁面，如上圖標(biāo)題欄右側(cè)的保存按鈕。

當(dāng)然這也不是絕對的，如果其他的功能邏輯能充當(dāng)保存關(guān)閉頁面的作用也是可以的，如下圖所示為常見的列表編輯管理狀態(tài)中，用戶選中若干列表項(xiàng)后點(diǎn)擊底部的刪除按鈕就可以刪除并退出編輯管理狀態(tài)，此時點(diǎn)擊刪除按鈕就相當(dāng)于執(zhí)行刪除操作并關(guān)閉當(dāng)前頁面/狀態(tài)。

（2）關(guān)閉按鈕

關(guān)閉按鈕另外一種含義就是“關(guān)閉”，即Close Button，點(diǎn)擊按鈕關(guān)閉當(dāng)前頁面（包括彈窗等操作區(qū)域）返回之間的頁面，其最大的特點(diǎn)就是點(diǎn)擊按鈕后僅僅關(guān)閉當(dāng)前頁面，不會執(zhí)行任何其他操作和邏輯。

關(guān)閉按鈕表達(dá)“關(guān)閉”含義時其使用場景相對廣泛，不僅可以用在全頁面中使用，還可以在區(qū)域頁面（如彈窗，浮層等）中使用。如下圖所示分別為在產(chǎn)品中打開臨時頁面和引導(dǎo)彈窗中使用關(guān)閉按鈕。

2. 關(guān)閉按鈕的使用規(guī)范

關(guān)閉按鈕在設(shè)計(jì)中表達(dá)的含義不同時，其使用規(guī)范也有所不同，具體如下。

（1）關(guān)閉按鈕表達(dá)“取消”含義

關(guān)閉按鈕表達(dá)“取消”含義時，一般只能用于全頁面，且頁面一定是一種“臨時狀態(tài)”的頁面，即這個頁面在用戶使用產(chǎn)品的過程中不能長久的存在，在用戶執(zhí)行相關(guān)操作后一定會消失。

常見的“臨時狀態(tài)”頁面有臨時頁面（比如新建編輯頁面）和頁面的臨時狀態(tài)（頁面的編輯管理狀態(tài)）2種，如下圖所示。

與返回按鈕類似，關(guān)閉按鈕表達(dá)“取消”含義時一般也與頁面中的標(biāo)題欄組合使用，不會用于非全頁面的彈窗或者浮層之類的樣式，在這些場景下，即使需要表達(dá)“取消”含義的邏輯，一般是用其他形式來表達(dá)，比如標(biāo)準(zhǔn)按鈕，而不會使用關(guān)閉按鈕樣式。

（2）關(guān)閉按鈕表達(dá)“關(guān)閉”含義

關(guān)閉按鈕表達(dá)“關(guān)閉”含義時，一般多用于用于非全頁面的彈窗或者浮層之類的場景，其主要作用就是關(guān)閉頁面中展示的某個元素。因此，關(guān)閉按鈕表達(dá)“關(guān)閉”含義時，其使用就相對比較自由。

如下圖所示，頁面中浮層面板中的關(guān)閉按鈕，既可以布局在左上角，也可以布局在右上角，這兩種設(shè)計(jì)方案都是合理的，也是設(shè)計(jì)中最為常見的。