讀完這(zhè)篇文章(zhāng)你将會了(le)解到：

• 關閉按鈕「x」的設計曆史
• 「x」設計的注意事項
• 關閉按鈕設計的最佳案例

「x」圖标在應用中是一(yī)個非常常見(jiàn)的交互暗示，可(kě)以将煩人(rén)的彈窗從(cóng)內(nèi)容上(shàng)進行(xíng)關閉。

無論是模态，對話框還是彈出窗口，都(dōu)是內(nèi)容交互中必要(yào)的操作(zuò)元素，我們隻需要(yào)建立合理的退出方式就好。

視(shì)覺設計

在ux通(tōng)用設計模式中「退出」（e-x-iting）是非常簡單的，你們看(kàn)到我在 exiting 這(zhè)個單詞中刻意突出了(le)「x」。

「x」這(zhè)個符号的曆史可(kě)以追溯到20世紀70年(nián)代的計算機設計語言，它第一(yī)次出現可(kě)能(néng)是在 Atari TOS（譯者注：Atari TOS是雅達利電腦操作(zuò)系統，在1993年(nián)就停産了(le)）菜單中，「x」是退出的命令。

它後來被「NeXT」所使用，它為(wèi) Windows 的設計帶來了(le)靈感，并在1995年(nián)随着 Windows 全球大規模的使用而成為(wèi)關閉的标準符号。講這(zhè)段曆史，目的是為(wèi)了(le)說明(míng)，沒有必要(yào)重新造輪子，使用全世界每個人(rén)都(dōu)能(néng)懂(dǒng)的符号更為(wèi)合适。

  1. 無障礙設計

我們應該在一(yī)些需要(yào)關閉的界面中始終提供「x」，即使用戶可(kě)以通(tōng)過單擊背景，滑動，或者使用手機返回按鈕來關閉界面。

△ 圖标和(hé)字體

設計一(yī)個圖标，而不是使用一(yī)個字體，它應該被清晰的理解為(wèi)是一(yī)個「x」，而不是模棱兩可(kě)。我個人(rén)更喜歡夾角是90度，并且四個角長(cháng)度都(dōu)相等的關閉圖标設計。

△ 高對比度和(hé)低(dī)對比度

它的顔色應該保持中立，符合a11y項目（譯者注：關于這(zhè)個項目的具體細節可(kě)以自(zì)行(xíng)google）推薦的4 : 1對比度。當然，當「x」幾乎做(zuò)成灰白色時(shí)，對彈出框的視(shì)覺表現影響可(kě)能(néng)最小。

通(tōng)過使得「x」幾乎不可(kě)見(jiàn)，變相強制和(hé)誘導用戶執行(xíng)主要(yào)操作(zuò)，這(zhè)就是我們常說的設計陰暗面，這(zhè)可(kě)能(néng)導緻想關閉彈窗的用戶感到受挫，對體驗來說是不可(kě)取的。

△ 帶外(wài)框和(hé)不帶外(wài)框

圖标應該最好包含外(wài)框以暗示可(kě)以點擊的目标相對大小，這(zhè)樣也能(néng)将可(kě)交互圖标與不可(kě)交互的圖标區(qū)分開(kāi)，尤其是在兩種圖标造型非常相似的情況下(xià)。

• 如(rú)果圖标和(hé)容器的尺寸小于最小點擊區(qū)域的大小（48x48dp/pt），則需要(yào)将點擊範圍設置為(wèi)大于按鈕的視(shì)覺效果，并且不與其他(tā)交互元素重疊。
• 如(rú)果這(zhè)個圖标是在一(yī)個可(kě)交互的導航欄中，比如(rú)标題導航，那(nà)麽這(zhè)個位置就已經為(wèi)圖标創建了(le)一(yī)個可(kě)點擊的空間(jiān)，就無需另外(wài)再設計了(le)。

位置

彈窗內(nèi)容不應該成為(wèi)阻礙用戶流程的攔路虎，關閉的操作(zuò)應該足夠顯眼。雖然大多數(shù) windows 軟件一(yī)直在右上(shàng)角放置關閉操作(zuò)，但(dàn)今天 Apple 和(hé) Google 的一(yī)些規範都(dōu)把關閉圖标放在了(le)左上(shàng)角。

當涉及到模态時(shí)，這(zhè)兩個系統都(dōu)沒有太明(míng)确的方向。接下(xià)來，我會嘗試逐一(yī)分析模态彈窗的最佳設計。

△ 模态界面圖标位置

  1. 模态位置

除了(le)警告彈窗之外(wài)，大多數(shù)模态內(nèi)容都(dōu)是非必須的，因此它們可(kě)以适當弱化。雖然一(yī)般做(zuò)法都(dōu)是将模态彈窗直接出現在屏幕中間(jiān)，但(dàn)現在有一(yī)種新趨勢，通(tōng)過将模态彈窗放在屏幕的底部，使他(tā)們看(kàn)起來沒有那(nà)麽強烈。

△ 底部vs中間(jiān)

  2. 「x」的擺放位置

△ 內(nèi)部vs交疊vs外(wài)部

• 內(nèi)部：出現在模态彈窗的內(nèi)部。這(zhè)樣的擺放可(kě)以很(hěn)清晰的與模态內(nèi)容聯系在一(yī)起，從(cóng)版式上(shàng)來說也很(hěn)美觀；缺點是它可(kě)能(néng)會增加模态中标題布局的複雜(zá)性。
• 交疊：出現在模态彈窗的邊緣。在連續的邊緣中間(jiān)出現間(jiān)斷最能(néng)引起人(rén)們對「x」圖标的注意，但(dàn)它所具有的獨特視(shì)覺風(fēng)格，增加了(le)視(shì)覺複雜(zá)性，感覺也沒有那(nà)麽精緻。
• 外(wài)部：出現在模态彈窗之外(wài)。這(zhè)樣使得模态窗口很(hěn)整潔，但(dàn)是關閉圖标可(kě)能(néng)會與下(xià)面的 UI 混淆在一(yī)起。

△ 右邊vs左邊。圖片來自(zì)于 Meg Robichaud

結束（右邊）将「x」放在右側會比放在左側更好，理由是對于人(rén)的右手拇指适應性更好，并且不會與左側的示意圖标相互沖突。

開(kāi)始（左邊）将「x」放在左側時(shí)應該遵循當前的導航模式，但(dàn)它增加了(le)彈窗的垂直高度，因為(wèi)不能(néng)太靠近示意圖标。

注：這(zhè)是基于LTR語序來說的（譯者注：LTR在這(zhè)裏可(kě)以說是從(cóng)左往右的閱讀語序），「開(kāi)始」是用戶開(kāi)始閱讀內(nèi)容的地(dì)方，「結束」是用戶停止閱讀的地(dì)方。

最佳配置

現在把所有的東西(xī)都(dōu)綜合在一(yī)起，一(yī)個對齊在底部的彈窗，包括一(yī)個在右上(shàng)角的「x」圖标。

隻有文字，圖片和(hé)圖标的三種情況。

總結

我必須承認，你其實也可(kě)以嘗試使用兩個文字按鈕，其中一(yī)個是「關閉」。這(zhè)也是一(yī)個不錯的選擇，并且也被谷歌(gē)規範所推薦，但(dàn)如(rú)果你不希望關閉那(nà)麽突出，擔心會發生意外(wài)點擊或者遇到多語言問(wèn)題，「x」按鈕就會是一(yī)個很(hěn)好的通(tōng)用解決方案。