起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識返回按鈕和關閉按鈕，你用的對嗎？
編輯導語：返回按鈕和關閉按鈕是日常中經常會使用的兩種按鈕，這兩種按鈕在邏輯表現上很相似，但卻有明顯的不同，你真的用對了嗎？本篇文章中，作者將為我們具體介紹兩種按鈕的正確用法，一起來學習一下。
一、介紹
返回按鈕和關閉按鈕（嚴謹的來講應該叫關閉/取消按鈕，后文會進行細致的解釋，為了方便文中統一叫關閉按鈕）是設計中常見的圖標按鈕，如下圖所示為返回按鈕和關閉按鈕的基本視覺樣式。
返回按鈕和關閉按鈕在頁面布局設計中使用的非常多，其主要作用是幫助用戶在產品中“導航”，如返回到某一頁面或者是關閉正在瀏覽的頁面，所以從信息架構層面來講返回按鈕和關閉按鈕都屬于導航按鈕。如下圖所示為手機設置頁面和在日歷中創建日程頁面中分別使用了返回按鈕和關閉按鈕。
由于返回按鈕和關閉按鈕在體驗效果上比較相似，即如上圖所示點擊按鈕后都回到之前的頁面，因此實際中能經?？吹藉e用返回按鈕和關閉按鈕的例子，如下圖所示點擊左圖中的編輯按鈕，則可以進入如下右圖所示的頁面編輯管理狀態，但頁面中使用返回按鈕是錯誤的，此處應該使用關閉按鈕。
如上圖所示，盡管關閉按鈕和返回按鈕在邏輯表現上很相似，但是其還是有本質上的區別，否則設計中也不會出現“返回”和“關閉”這兩個不同的設計名詞和概念。下面就從定義和使用場景等方面來具體分析一下返回按鈕和關閉按鈕之間的區別。
二、返回按鈕
1. 返回按鈕的定義
返回按鈕的邏輯定義主要包括2個方面，即返回上一瀏覽頁面和返回上一層級頁面。
（1）返回上一瀏覽頁面
返回按鈕表達“返回上一瀏覽頁面”的含義，即Back Button，主要是幫助用戶返回進入當前頁面之前的頁面，這是返回按鈕的基本含義，使用場景也是最多的。
如下圖所示，用戶從頁面A點擊進入頁面B，再進入頁面C，此時用戶點擊頁面C中的返回按鈕，則返回頁面B，再點擊頁面B中的返回按鈕，則會返回頁面A。
據此可以歸納出返回按鈕表達“返回上一瀏覽頁面”含義時的特征有如下幾點：
①用戶瀏覽過的頁面
返回按鈕表達“返回上一瀏覽頁面”含義的最基本特征是返回的頁面必然是用戶瀏覽過的頁面，而且是用戶在當前頁面之前瀏覽過的頁面，即按照瀏覽的倒序返回。如上圖所示，用戶先從頁面A進入頁面B，進入頁面C，依次點擊返回按鈕也一定是先返回頁面B，再返回頁面A。
②當前頁面和上一瀏覽頁面之間沒有必然的邏輯關聯性
返回按鈕表達“返回上一瀏覽頁面”含義時另外一個特征就是當前頁面和上一瀏覽頁面之間沒有必然的邏輯關聯性，如上圖所示頁面A可能是功能模塊1中的一級頁面，頁面B可能是功能模塊2中的二級頁面，頁面C可能是功能模塊3中的某一級頁面。
甚至一些場景下，通過返回按鈕可以在不同應用的頁面中進行返回跳轉，比如在支付流程中，跳轉到微信支付頁面后，此時點擊支付頁面中的返回按鈕，就會直接返回到當前應用，而不是微信中的某一頁面。
③系統返回邏輯
當返回按鈕“返回上一瀏覽頁面”含義時，其邏輯作用與Android系統導航欄中的返回按鍵是一致的。如下圖所示用戶點擊頁面標題欄左側返回按鈕依次返回頁面B和A，這與用戶點擊手機屏幕底部的系統導航欄中的返回按鈕的邏輯是完全一致。
現在全面屏的Android設備上，不再顯示底部導航欄，而是改為全局的手勢操作，即在全面屏邊緣滑動也可以返回上一個瀏覽頁面，這與點擊頁面中的返回按鈕的作用是一致的。
值得注意的是，系統底部導航欄是Android系統獨有，iOS系統不支持，但是iOS的設備中同樣支持全局手勢操作返回上一瀏覽頁面的功能。
（2）進入上一層級頁面
返回按鈕表達“進入上一層級頁面”含義，即Upward Button，是幫助用戶返回當前頁面的上一層級結構頁面。返回按鈕表達“進入上一層級頁面”含義的最大特點是點擊返回按鈕返回的頁面完全由產品結構來決定，與用戶實際的操作和瀏覽頁面沒有任何關系。
如下圖所示產品中一共4個層級結構，每一個層級結構代表一個頁面（即結構A-1代表頁面A-1）。
假如用戶先進入頁面A，通過頁面A進入到頁面B-1，通過頁面B-1中進入到頁面C-3，如下圖中綠色路徑所示，此時用戶在頁面C-3中點擊返回按鈕，則會進入到頁面C-2，再點擊返回按鈕，則依次進入到頁面C-1和頁面C，直到產品的頂級結構頁面，如下圖中紅色路徑所示。
返回按鈕表達“進入上一層級頁面”含義在實際使用中有優點也有缺點，優點是可以將用戶引導到目標頁面中，比如用戶從模塊A進入模塊B的子級頁面，可以通過返回按鈕“進入上一層級頁面”的模塊B頁面，這樣可以對頁面B進行引流和曝光，尤其是跨應用跳轉，可以很好的將用戶引導到產品中的首頁。
但缺點也很明顯，在產品使用過程中用戶對自己的行為缺少預期和控制，很容易中斷用戶的操作流程，因此在實際中使用的相對較少。
從返回按鈕表達“返回上一瀏覽頁面”和“進入上一層級頁面”含義的功能邏輯來看，這兩種設計在實際中有大概率是“體驗相同”的，因為一般來說，用戶在產品中的操作就是在層級結構之間進行跳轉，即從父級結構頁面點擊進入到子級結構頁面，此時點擊返回按鈕時，無論是“返回上一瀏覽頁面”還是“進入上一層級頁面”都是同一個頁面。
如下圖所示，用戶從頁面C依次點擊進入到頁面C-1，頁面C-2和頁面C-3，此時無論返回按鈕表達的是何種含義，依次點擊返回按鈕都會從頁面C-3返回到頁面C-2，頁面C-1和頁面。
2. 返回按鈕的使用規范
返回按鈕無論是表達“返回上一瀏覽頁面”含義還是表達“進入上一層級頁面”含義，在具體的使用規范方面是一致的，僅僅有著功能邏輯上的區別。
（1）返回按鈕只能使用在全頁面中
返回按鈕只能在全頁面中使用，如一些浮層或者彈窗彈窗等其他場景都不能使用返回按鈕，如下右圖所示的浮層面板中使用返回按鈕就是錯誤的。
從上圖也可以看出，返回按鈕關聯的頁面（即返回前后的頁面）一定是全屏幕的且有效的展示區域大小是完全相同的沒有大小差異，如上右圖所示，浮層面板的區域大小就是小于全頁面，因此使用返回按鈕是錯誤的。
（2）在產品主要層級結構的全頁面中使用返回按鈕
返回按鈕主要作用就是幫助用戶在產品中“導航”，因此僅僅產品主要層級結構的全頁面才能使用，即返回按鈕是幫助用戶在產品不同頁面之間進行“流轉”導航，這也意味著通過產品的層級結構和導航，用戶可以多次進入帶有返回按鈕的同一個頁面。
如下圖所示用戶可以點擊頁面A中的功能入口，用戶可以多次進入頁面B。
同理，如果用戶無法多次進入同一個頁面，那么這個頁面是不能使用返回按鈕的，比如一些臨時頁面（比如新建編輯頁面）或者頁面的臨時狀態（頁面的編輯管理狀態）。
盡管用戶可以多次使用臨時頁面，但是用戶每次進入的臨時頁面從邏輯本質上講都不是同一個頁面（盡管頁面功能邏輯是完全一致的）。
（3）返回按鈕與頁面標題欄組合使用
返回按鈕作為產品的導航系統一部分，因此常與頁面標題欄組合使用，即返回按鈕一般布局在全頁面的標題欄的左側，如下圖所示。
三、關閉按鈕
1. 關閉按鈕的含義
與返回按鈕類似，關閉按鈕也同樣有2種表達含義，即取消和關閉。
（1）取消
關閉按鈕表達“取消”含義時，即Cancel Button，其本質上包括2種含義即先取消用戶的當前的操作再去關閉當前的操作頁面（包括彈窗等操作區域）或者頁面狀態。
如下圖所示為系統中添加日程的頁面，左上角紅色區域的關閉按鈕表達的就是“取消”含義，即點擊關閉按鈕后，頁面中如時間設置，鬧鐘提醒等相關操作都不會被保存，同時關閉該頁面返回到之前的頁面中。
實際中當關閉按鈕表達“取消”含義時，一般頁面中會有一個與“取消”含義相對的操作按鈕，即該按鈕操作后會保存用戶的相關操作并關閉頁面，如上圖標題欄右側的保存按鈕。
當然這也不是絕對的，如果其他的功能邏輯能充當保存關閉頁面的作用也是可以的，如下圖所示為常見的列表編輯管理狀態中，用戶選中若干列表項后點擊底部的刪除按鈕就可以刪除并退出編輯管理狀態，此時點擊刪除按鈕就相當于執行刪除操作并關閉當前頁面/狀態。
（2）關閉按鈕
關閉按鈕另外一種含義就是“關閉”，即Close Button，點擊按鈕關閉當前頁面（包括彈窗等操作區域）返回之間的頁面，其最大的特點就是點擊按鈕后僅僅關閉當前頁面，不會執行任何其他操作和邏輯。
關閉按鈕表達“關閉”含義時其使用場景相對廣泛，不僅可以用在全頁面中使用，還可以在區域頁面（如彈窗，浮層等）中使用。如下圖所示分別為在產品中打開臨時頁面和引導彈窗中使用關閉按鈕。
2. 關閉按鈕的使用規范
關閉按鈕在設計中表達的含義不同時，其使用規范也有所不同，具體如下。
（1）關閉按鈕表達“取消”含義
關閉按鈕表達“取消”含義時，一般只能用于全頁面，且頁面一定是一種“臨時狀態”的頁面，即這個頁面在用戶使用產品的過程中不能長久的存在，在用戶執行相關操作后一定會消失。
常見的“臨時狀態”頁面有臨時頁面（比如新建編輯頁面）和頁面的臨時狀態（頁面的編輯管理狀態）2種，如下圖所示。
與返回按鈕類似，關閉按鈕表達“取消”含義時一般也與頁面中的標題欄組合使用，不會用于非全頁面的彈窗或者浮層之類的樣式，在這些場景下，即使需要表達“取消”含義的邏輯，一般是用其他形式來表達，比如標準按鈕，而不會使用關閉按鈕樣式。
（2）關閉按鈕表達“關閉”含義
關閉按鈕表達“關閉”含義時，一般多用于用于非全頁面的彈窗或者浮層之類的場景，其主要作用就是關閉頁面中展示的某個元素。因此，關閉按鈕表達“關閉”含義時，其使用就相對比較自由。
如下圖所示，頁面中浮層面板中的關閉按鈕，既可以布局在左上角，也可以布局在右上角，這兩種設計方案都是合理的，也是設計中最為常見的。
四、小結
盡管返回按鈕和關閉按鈕，從本質上來將，僅僅是視覺樣式上的差異，在設計中就算使用錯誤，也可以通過邏輯控制來保證產品邏輯的正確性，即用戶在使用上沒有區別，但是返回按鈕和關閉按鈕作為一種比較通用的基礎按鈕，在現實生活中用戶已經形成相對固定的認知和習慣，在設計中就必須考慮用戶的這種認知和習慣，就算是純粹的視覺樣式也應該遵循一定的原則和規范，不應該隨便使用，這樣不僅可以保證良好的用戶使用體驗，還可以保證產品中設計的規范性和一致性。
本文由 @小乞丐 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議
返回按鈕:①返回上次瀏覽頁面②返回該層級子層級頁面 且只能作用于全局頁面
?關閉按鈕:①表達“取消”含義 頁面多處于臨時操作的全局頁面 取消當前操作內容并關閉頁面 ②表達“關閉”含義 關閉頁面 多用于非全局頁面或者浮窗
對吼，作者分析的有道理，兩者隨像，但還真不能混為一談
返回和關閉需要代入用戶習慣，關閉上一層級還是關閉所有很重要
微信朋友圈的設置就是返回到固定頁面，比如你在自己朋友圈里設置隱私然后返回竟然返回設置一直返回到我的頁面，那感覺誰用誰酸爽。。