視覺(jué)設(shè)計(jì)師應(yīng)該如何設(shè)計(jì)“關(guān)閉”按鈕呢？在討論這個(gè)問(wèn)題之前，我們不妨先看看另外兩個(gè)問(wèn)題。
第一個(gè)問(wèn)題來(lái)自知乎，在Mac OS中，彈出窗口的關(guān)閉按鈕是放在左上角的，Windows則是放在右上角，這兩種不同的做法是基于什么樣的考慮呢？
我們可以從四個(gè)角度進(jìn)行分析：
以大多數(shù)人的操作使用習(xí)慣來(lái)說(shuō)，右邊更合適，這尊重了用戶的習(xí)慣；
從視覺(jué)設(shè)計(jì)理論的角度來(lái)說(shuō)，Mac OS是考慮到人的視覺(jué)瀏覽線是從左往右、從上而下的，而且大部分的文字內(nèi)容、菜單也都是左對(duì)齊的，所以將關(guān)閉按鈕放在窗口的左上在視覺(jué)上是理所當(dāng)然的。Windows 居右的理由是雖然人的視覺(jué)中心偏左，但鼠標(biāo)在屏幕上往往靠右，故點(diǎn)擊關(guān)閉按鈕時(shí)，指針移動(dòng)距離更短，更便于操作。
從產(chǎn)品需求來(lái)說(shuō)，要根據(jù)具體頁(yè)面的業(yè)務(wù)需求而定，如果不希望用戶太快的關(guān)閉彈窗，最好放在相對(duì)邊緣的角落；如果希望用戶閱讀完內(nèi)容后關(guān)閉，則應(yīng)放置在內(nèi)容結(jié)尾處，方便關(guān)閉。所以，至于放在左上角或右上角對(duì)前者影響并不大，而后者的情況完全可以通過(guò)“確定|取消”按鈕實(shí)現(xiàn)彈窗的關(guān)閉，居左居右倒顯得不那么重要了。
還有一個(gè)原因是因?yàn)閮蓚€(gè)系統(tǒng)在最初的設(shè)計(jì)時(shí)候，存在專利和版權(quán)問(wèn)題。
在具體設(shè)計(jì)時(shí)，如果是web頁(yè)面彈窗，最好遵守Windows平臺(tái)規(guī)范，把關(guān)閉按鈕[x]放在右上角；如果是桌面應(yīng)用，最好遵守各自平臺(tái)的規(guī)范。如下圖是“有道云筆記”在刪除回收站中筆記內(nèi)容時(shí)的二次確認(rèn)彈窗，從左至右依次是網(wǎng)頁(yè)版、Mac版、Windows版，處理方法可見(jiàn)一斑。
第二個(gè)問(wèn)題，[x]是如何作為通用的關(guān)閉按鈕逐漸成為用戶界面設(shè)計(jì)中的一個(gè)標(biāo)準(zhǔn)元素的？
早期Windows系統(tǒng)中的關(guān)閉窗口的按鈕并非[x]，一直到windows 95的時(shí)候，[x]才真正出現(xiàn)在windows系統(tǒng)的界面上，見(jiàn)下圖。這個(gè)時(shí)候的關(guān)閉按鈕和最大化、最小化一同出現(xiàn)在窗口的右上角上，這一經(jīng)典的按鈕組合就此定型。
再往前追溯，[x]極有可能來(lái)自于日本的兩種標(biāo)識(shí)符“Batsu”和“Maru”。Batsu也就是[x]，表示不正確的，也可以表示錯(cuò)誤、壞的和攻擊；而Maru也就是[o]，意思是正確、真是、好的、完整的、珍貴的。
所以，在未來(lái)，也許會(huì)有一個(gè)新的符號(hào)代替[x]去引導(dǎo)用戶完成“關(guān)閉”彈窗的行為。
下面我們來(lái)看具體的設(shè)計(jì)方法。
關(guān)閉的定義
關(guān)閉的定義很難描述，我們可以通過(guò)幾個(gè)詞組好好體會(huì)其中含義。
關(guān)閉、退出與注銷
無(wú)需登錄即可使用的應(yīng)用，退出即程序停止運(yùn)行；
需要登錄才能使用的應(yīng)用，對(duì)用戶而言，退出是指程序退出運(yùn)行且賬號(hào)退出登錄（需要經(jīng)常性記住賬號(hào)登錄狀態(tài)的應(yīng)用除外，退出也只是代表關(guān)閉）；
此外，退出還有強(qiáng)制退出的含義，在遇到卡頓等情況時(shí)，可以通過(guò)“強(qiáng)制退出”解決；而“退出登錄”是單純的退出登錄狀態(tài)，程序不會(huì)關(guān)閉。
關(guān)閉指關(guān)閉當(dāng)前窗口，程序不一定退出運(yùn)行，可能會(huì)在后臺(tái)運(yùn)行，一般會(huì)讓用戶進(jìn)行選擇是“只關(guān)閉窗口”還是“關(guān)閉且退出程序”，如果有登錄賬號(hào)，賬號(hào)也不會(huì)退出；如下圖，網(wǎng)易云音樂(lè)既能在設(shè)置中定義關(guān)閉面板是“僅關(guān)閉面板”還是“退出程序”，也會(huì)在關(guān)閉時(shí)給出確認(rèn)彈窗供用戶再次選擇確認(rèn)。
注銷指只退出當(dāng)前登錄的賬號(hào)，不退出軟件，返回登錄頁(yè)面后還可以用別的用戶名登錄（web端更常見(jiàn)用“退出賬號(hào)”字眼代替注銷）。用電腦舉例，退出就是關(guān)機(jī)（徹底關(guān)閉計(jì)算機(jī)），注銷是為了切換到其他用戶進(jìn)行使用。注銷還有一層含義，就是銷戶（永久銷毀、刪除賬戶），比如QQ最近上線的注銷帳號(hào)功能，所有資料都會(huì)被清空。
關(guān)閉/開啟、展開/收起
關(guān)閉/開啟、停用/啟用一般指動(dòng)作；表示狀態(tài)則會(huì)使用已開啟/已關(guān)閉、on/off等含義明確的詞匯，比如switch開關(guān)控件。樹狀結(jié)構(gòu)中文件夾節(jié)點(diǎn)圖標(biāo)有打開/關(guān)閉的區(qū)別，不過(guò)它更像分組列表的展開/收起。所以開啟、打開、展開還是有些差別的。
關(guān)閉按鈕的位置
通過(guò)開頭的兩個(gè)問(wèn)題，已經(jīng)基本明確了彈窗中關(guān)閉按鈕位置的通用處理方法。即：網(wǎng)頁(yè)中彈窗的關(guān)閉按鈕放在右上角，以符合大多數(shù)用戶習(xí)慣；桌面應(yīng)用中，如果采用各自系統(tǒng)默認(rèn)的彈窗樣式，自然是“Mac版居左，Windows版居右”，如果是定制開發(fā)，最好遵守各自平臺(tái)的習(xí)慣。除了大方位，以彈窗邊緣為界，關(guān)閉按鈕又可以放在彈窗內(nèi)部、彈窗外部或與彈窗邊緣交疊位置。
當(dāng)然，有些情況“不需要關(guān)閉按鈕去關(guān)閉彈窗”，而是通過(guò)業(yè)務(wù)性操作“取消|確定”關(guān)閉彈窗，如下圖所示，移動(dòng)端還可以通過(guò)點(diǎn)擊返回鍵、或點(diǎn)擊遮蔽層的方式關(guān)閉，這不僅符合極簡(jiǎn)設(shè)計(jì)原則，也能更明確的告知用戶操作的具體含義。
關(guān)閉按鈕的狀態(tài)
關(guān)閉按鈕同樣具有一般按鈕的四種狀態(tài)：normal普通狀態(tài)、hover 鼠標(biāo)懸停狀態(tài)、active 點(diǎn)擊狀態(tài)、focus 取得焦點(diǎn)狀態(tài)。所以關(guān)閉按鈕也應(yīng)按照這些狀態(tài)進(jìn)行不同形式的設(shè)計(jì)，通過(guò)視覺(jué)樣式的區(qū)分，達(dá)到引導(dǎo)用戶的目的。各個(gè)狀態(tài)的樣式區(qū)分這里不再展開討論。
關(guān)閉按鈕的形狀
除了純文字的關(guān)閉按鈕，更常見(jiàn)的是圖標(biāo)按鈕，畢竟圖標(biāo)按鈕所占空間更少、語(yǔ)義傳達(dá)明確、又能避免頁(yè)面單調(diào)。通過(guò)收集整理，進(jìn)行了簡(jiǎn)單的分類，如下圖。普通的關(guān)閉按鈕都是以[x]為基礎(chǔ)元素進(jìn)行設(shè)計(jì)的，讓后增加不同的背景輪廓、反白、斷點(diǎn)修飾等。退出性關(guān)閉則圍繞生活中常見(jiàn)的“電源關(guān)閉”圖標(biāo)進(jìn)行變形。功能關(guān)閉則是功能圖標(biāo)加上“X \ / -”等圖形，稍有不慎就很容易破壞圖標(biāo)原有的美感。
其他可借鑒的設(shè)計(jì)方式
1.用倒計(jì)時(shí)防止用戶見(jiàn)到彈窗就關(guān)閉
彈窗廣告對(duì)用戶造成了太多傷害，以至于看不都不看，見(jiàn)到就點(diǎn)關(guān)閉?？山梃b以下做法，拼多多商家用戶登錄商家后臺(tái)后有時(shí)會(huì)彈出重要通知彈窗，該彈窗不能直接關(guān)閉，必須等倒計(jì)時(shí)結(jié)束后才能關(guān)閉，以保證用戶意識(shí)到通知的重要性，完成信息傳遞。
2.通過(guò)hover控制關(guān)閉按鈕的顯示/隱藏、放大/縮小
當(dāng)應(yīng)用中同時(shí)打開多個(gè)tab時(shí)，所有頁(yè)簽的關(guān)閉按鈕都常顯必定占據(jù)一定的頁(yè)面空間、且會(huì)破壞頁(yè)面美感。Chrome瀏覽器中，標(biāo)簽數(shù)量少的時(shí)候，每個(gè)標(biāo)簽都顯示關(guān)閉按鈕；達(dá)到一定數(shù)量時(shí)就只顯示當(dāng)前標(biāo)簽的關(guān)閉按鈕，其他的隱藏，不過(guò)這種情況下要關(guān)閉其他標(biāo)簽只能通過(guò)右鍵打開上下文菜單或者點(diǎn)擊進(jìn)入相應(yīng)標(biāo)簽再關(guān)閉。QQ瀏覽器無(wú)論標(biāo)簽多少，只顯示當(dāng)前標(biāo)簽的關(guān)閉按鈕，不過(guò)當(dāng)鼠標(biāo)滑過(guò)其他標(biāo)簽時(shí)，關(guān)閉按鈕就會(huì)顯示出來(lái)。WPS的做法則是用常顯小圓點(diǎn)代替隱藏[x]的做法。
3.移動(dòng)端利用相關(guān)手勢(shì)進(jìn)行關(guān)閉
移動(dòng)端可結(jié)合設(shè)備特性，采用不同的交互方式完成關(guān)閉動(dòng)作，包括點(diǎn)擊（退出微信位置共享）、長(zhǎng)按（keep結(jié)束跑步、騎行等活動(dòng)）、側(cè)滑（iPhone滑動(dòng)關(guān)機(jī)）。
4.小程序的關(guān)閉按鈕
BAT和頭條都做起了小程序，在設(shè)計(jì)關(guān)閉按鈕這件事上，設(shè)計(jì)師們可謂絞盡腦汁。微信小程序搶占了“⊙”，其他幾家只好變著花樣設(shè)計(jì)[X]。此外，設(shè)計(jì)師們還糾結(jié)于使用多大的圓角，如何表現(xiàn)更多“≡”“…”“┇”。幾種小程序的設(shè)計(jì)規(guī)范見(jiàn)下圖。
小程序的火爆給關(guān)閉按鈕在移動(dòng)端帶來(lái)了復(fù)興，設(shè)計(jì)師們紛紛嘗試讓[x]回歸右上角，說(shuō)是探索新交互形式也不算，畢竟合適的才是最好的，但確實(shí)威脅了“< 返回”的地位，不足之處在于不方便點(diǎn)擊。淘寶部分店鋪的首頁(yè)已經(jīng)采用了類似做法讓用戶退出店鋪，網(wǎng)易云音樂(lè)“我的-最新電音/私藏推薦”模塊也類似，不過(guò)退出并不影響音樂(lè)的繼續(xù)播放。
小結(jié)
關(guān)閉按鈕只是用戶界面設(shè)計(jì)中的小元素，往往容易忽略。掌握必要的設(shè)計(jì)技巧的同時(shí)，結(jié)合業(yè)務(wù)需求進(jìn)行設(shè)計(jì)處理方能不忘初心、更好服務(wù)用戶，實(shí)現(xiàn)從設(shè)計(jì)關(guān)閉按鈕到設(shè)計(jì)關(guān)閉行為的跨越。
