關閉按鈕是用戶界面設計中的一個小元素，但就是這樣一個看似微不足道的按鈕，在設計上卻有很多需要注意的地方。用戶界面設計關係到用戶對於產品的直觀感受，是用戶體驗最直接的影響因素。所以，用戶界面設計的每一個細節都是不可忽視的，關閉按鈕就是其中之一。

“視覺設計師應該如何設計“關閉”按鈕呢？”

在討論這個問題之前，我們不妨先看看另外兩個問題。

第一個問題來自知乎：“在Mac OS中，彈出窗口的關閉按鈕是放在左上角的，Windows則是放在右上角，這兩種不同的做法是基於什麼樣的考慮呢？”

我們可以從四個角度進行分析：

以大多數人的操作使用習慣來說，右邊更合適，這尊重了用戶的習慣。

從視覺設計理論的角度來說：

Mac OS是考慮到人的視覺瀏覽線是從左往右、從上而下的，而且大部分的文字內容、菜單也都是左對齊的，所以將關閉按鈕放在窗口的左上在視覺上是理所當然的

Windows 居右的理由是：雖然人的視覺中心偏左，但鼠標在屏幕上往往靠右，故點擊關閉按鈕時，指針移動距離更短，更便於操作。

從產品需求來說：

要根據具體頁面的業務需求而定，如果不希望用戶太快的關閉彈窗，最好放在相對邊緣的角落；如果希望用戶閱讀完內容後關閉，則應放置在內容結尾處，方便關閉。

所以，至於放在左上角或右上角對前者影響並不大，而後者的情況完全可以通過“確定|取消”按鈕實現彈窗的關閉，居左居右倒顯得不那麼重要了。

還有一個原因是：兩個系統在最初的設計時候，存在專利和版權問題。

在具體設計時，如果是web頁面彈窗，最好遵守Windows平臺規範，把關閉按鈕[x]放在右上角；如果是桌面應用，最好遵守各自平臺的規範。

如下圖是“有道雲筆記”在刪除回收站中筆記內容時的二次確認彈窗，從左至右依次是網頁版、Mac版、Windows版，處理方法可見一斑。

第二個問題：“[x]是如何作爲通用的關閉按鈕逐漸成爲用戶界面設計中的一個標準元素的？”

早期Windows系統中的關閉窗口的按鈕並非[x]，一直到windows 95的時候，[x]才真正出現在windows系統的界面上，見下圖。

這個時候的關閉按鈕和最大化、最小化一同出現在窗口的右上角上，這一經典的按鈕組合就此定型。

再往前追溯，[x]極有可能來自於日本的兩種標識符“Batsu”和“Maru”。Batsu也就是[x]，表示不正確的，也可以表示錯誤、壞的和攻擊；而Maru也就是[o]，意思是正確、真是、好的、完整的、珍貴的。

所以，在未來也許會有一個新的符號代替[x]去引導用戶完成“關閉”彈窗的行爲。

下面我們來看具體的設計方法：

一、關閉的定義

關閉的定義很難描述，我們可以通過幾個詞組好好體會其中含義。

1. 關閉、退出與註銷

無需登錄即可使用的應用：退出即程序停止運行；

需要登錄才能使用的應用：對用戶而言，退出是指程序退出運行且賬號退出登錄（需要經常性記住賬號登錄狀態的應用除外，退出也只是代表關閉）。

此外，退出還有強制退出的含義，在遇到卡頓等情況時，可以通過“強制退出”解決；而“退出登錄”是單純的退出登錄狀態，程序不會關閉。

關閉：指關閉當前窗口，程序不一定退出運行，可能會在後臺運行，一般會讓用戶進行選擇是“只關閉窗口”還是“關閉且退出程序”。如果有登錄賬號，賬號也不會退出。

如下圖，網易雲音樂既能在設置中定義關閉面板是“僅關閉面板”還是“退出程序”，也會在關閉時給出確認彈窗供用戶再次選擇確認。

註銷：指只退出當前登錄的賬號，不退出軟件，返回登錄頁面後還可以用別的用戶名登錄（web端更常見用“退出賬號”字眼代替註銷）。

用電腦舉例：退出就是關機（徹底關閉計算機）；註銷是爲了切換到其他用戶進行使用。

註銷還有一層含義，就是銷戶（永久銷燬、刪除賬戶），比如：QQ最近上線的註銷帳號功能，所有資料都會被清空。

2. 關閉/開啓、展開/收起

關閉/開啓、停用/啓用一般指動作，表示狀態則會使用“已開啓/已關閉”、“on/off”等含義明確的詞彙，比如：switch開關控件。

樹狀結構中文件夾節點圖標有打開/關閉的區別，不過它更像分組列表的展開/收起。所以開啓、打開、展開還是有些差別的。

二、關閉按鈕的位置

通過開頭的兩個問題，已經基本明確了彈窗中關閉按鈕位置的通用處理方法。

——即：網頁中彈窗的關閉按鈕放在右上角，以符合大多數用戶習慣。桌面應用中，如果採用各自系統默認的彈窗樣式，自然是“Mac版居左，Windows版居右”，如果是定製開發，最好遵守各自平臺的習慣。除了大方位，以彈窗邊緣爲界，關閉按鈕又可以放在彈窗內部、彈窗外部或與彈窗邊緣交疊位置。

當然，有些情況“不需要關閉按鈕去關閉彈窗”，而是通過業務性操作“取消|確定”關閉彈窗，如下圖所示。

移動端還可以通過點擊返回鍵、或點擊遮蔽層的方式關閉，這不僅符合極簡設計原則，也能更明確的告知用戶操作的具體含義。

三、關閉按鈕的狀態

關閉按鈕同樣具有一般按鈕的四種狀態：normal普通狀態、hover 鼠標懸停狀態、active 點擊狀態、focus 取得焦點狀態。

所以，關閉按鈕也應按照這些狀態進行不同形式的設計，通過視覺樣式的區分，達到引導用戶的目的。

各個狀態的樣式區分這裏不再展開討論。

四、關閉按鈕的形狀

除了純文字的關閉按鈕，更常見的是圖標按鈕，畢竟圖標按鈕所佔空間更少、語義傳達明確、又能避免頁面單調。

通過收集整理，進行了簡單的分類，如下圖。

普通的關閉按鈕都是以[x]爲基礎元素進行設計的，讓後增加不同的背景輪廓、反白、斷點修飾等。

退出性關閉則圍繞生活中常見的“電源關閉”圖標進行變形；功能關閉則是功能圖標加上“X \ / -”等圖形，稍有不慎就很容易破壞圖標原有的美感。

五、其他可借鑑的設計方式

1. 用倒計時防止用戶見到彈窗就關閉

彈窗廣告對用戶造成了太多傷害，以至於看不都不看，見到就點關閉。

可借鑑以下做法：拼多多商家用戶登錄商家後臺後有時會彈出重要通知彈窗，該彈窗不能直接關閉，必須等倒計時結束後才能關閉，以保證用戶意識到通知的重要性，完成信息傳遞。

2. 通過hover控制關閉按鈕的“顯示/隱藏”、“放大/縮小”

當應用中同時打開多個tab時，所有頁籤的關閉按鈕都常顯必定佔據一定的頁面空間、且會破壞頁面美感。

Chrome瀏覽器中，標籤數量少的時候，每個標籤都顯示關閉按鈕，達到一定數量時就只顯示當前標籤的關閉按鈕，其他的隱藏。

不過，這種情況下要關閉其他標籤，只能通過右鍵打開上下文菜單，或者點擊進入相應標籤再關閉。

QQ瀏覽器無論標籤多少，只顯示當前標籤的關閉按鈕，不過當鼠標滑過其他標籤時，關閉按鈕就會顯示出來。WPS的做法則是用常顯小圓點代替隱藏[x]的做法。

3. 移動端利用相關手勢進行關閉

移動端可結合設備特性，採用不同的交互方式完成關閉動作，包括：點擊（退出微信位置共享）、長按（keep結束跑步、騎行等活動）、側滑（iPhone滑動關機）。

4. 小程序的關閉按鈕

BAT和頭條都做起了小程序，在設計關閉按鈕這件事上，設計師們可謂絞盡腦汁。

微信小程序搶佔了“⊙”，其他幾家只好變着花樣設計[X]。

此外，設計師們還糾結於使用多大的圓角，如何表現更多“≡”“…”“┇”。幾種小程序的設計規範見下圖。

小程序的火爆給關閉按鈕在移動端帶來了復興，設計師們紛紛嘗試讓[x]迴歸右上角，說是探索新交互形式也不算，畢竟合適的纔是最好的，但確實威脅了“返回”的地位，不足之處在於不方便點擊。

淘寶部分店鋪的首頁已經採用了類似做法讓用戶退出店鋪，網易雲音樂“我的-最新電音/私藏推薦”模塊也類似，不過退出並不影響音樂的繼續播放。

小結

關閉按鈕只是用戶界面設計中的小元素，往往容易忽略。

掌握必要的設計技巧的同時，結合業務需求進行設計處理方能不忘初心、更好服務用戶，實現從設計關閉按鈕到設計關閉行爲的跨越。

本文由 @ 張鵬濤TAO 原創發佈於人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基於CC0協議。