讀完這篇文章你將會了解到：
「x」圖標(biāo)在應(yīng)用中是一個(gè)非常常見的交互暗示，可以將煩人的彈窗從內(nèi)容上進(jìn)行關(guān)閉。
無論是模態(tài)，對話框還是彈出窗口，都是內(nèi)容交互中必要的操作元素，我們只需要建立合理的退出方式就好。
在ux通用設(shè)計(jì)模式中「退出」（e-x-iting）是非常簡單的，你們看到我在 exiting 這個(gè)單詞中刻意突出了「x」。
「x」這個(gè)符號的歷史可以追溯到20世紀(jì)70年代的計(jì)算機(jī)設(shè)計(jì)語言，它第一次出現(xiàn)可能是在 Atari TOS（譯者注：Atari TOS是雅達(dá)利電腦操作系統(tǒng)，在1993年就停產(chǎn)了）菜單中，「x」是退出的命令。
它后來被「NeXT」所使用，它為 Windows 的設(shè)計(jì)帶來了靈感，并在1995年隨著 Windows 全球大規(guī)模的使用而成為關(guān)閉的標(biāo)準(zhǔn)符號。講這段歷史，目的是為了說明，沒有必要重新造輪子，使用全世界每個(gè)人都能懂的符號更為合適。
? 1. 無障礙設(shè)計(jì)
我們應(yīng)該在一些需要關(guān)閉的界面中始終提供「x」，即使用戶可以通過單擊背景，滑動，或者使用手機(jī)返回按鈕來關(guān)閉界面。
△ 圖標(biāo)和字體
設(shè)計(jì)一個(gè)圖標(biāo)，而不是使用一個(gè)字體，它應(yīng)該被清晰的理解為是一個(gè)「x」，而不是模棱兩可。我個(gè)人更喜歡夾角是90度，并且四個(gè)角長度都相等的關(guān)閉圖標(biāo)設(shè)計(jì)。
△ 高對比度和低對比度
它的顏色應(yīng)該保持中立，符合a11y項(xiàng)目（譯者注：關(guān)于這個(gè)項(xiàng)目的具體細(xì)節(jié)可以自行g(shù)oogle）推薦的4 : 1對比度。當(dāng)然，當(dāng)「x」幾乎做成灰白色時(shí)，對彈出框的視覺表現(xiàn)影響可能最小。
通過使得「x」幾乎不可見，變相強(qiáng)制和誘導(dǎo)用戶執(zhí)行主要操作，這就是我們常說的設(shè)計(jì)陰暗面，這可能導(dǎo)致想關(guān)閉彈窗的用戶感到受挫，對體驗(yàn)來說是不可取的。
△ 帶外框和不帶外框
圖標(biāo)應(yīng)該最好包含外框以暗示可以點(diǎn)擊的目標(biāo)相對大小，這樣也能將可交互圖標(biāo)與不可交互的圖標(biāo)區(qū)分開，尤其是在兩種圖標(biāo)造型非常相似的情況下。
彈窗內(nèi)容不應(yīng)該成為阻礙用戶流程的攔路虎，關(guān)閉的操作應(yīng)該足夠顯眼。雖然大多數(shù) windows 軟件一直在右上角放置關(guān)閉操作，但今天 Apple 和 Google 的一些規(guī)范都把關(guān)閉圖標(biāo)放在了左上角。
當(dāng)涉及到模態(tài)時(shí)，這兩個(gè)系統(tǒng)都沒有太明確的方向。接下來，我會嘗試逐一分析模態(tài)彈窗的最佳設(shè)計(jì)。
△ 模態(tài)界面圖標(biāo)位置
? 1. 模態(tài)位置
除了警告彈窗之外，大多數(shù)模態(tài)內(nèi)容都是非必須的，因此它們可以適當(dāng)弱化。雖然一般做法都是將模態(tài)彈窗直接出現(xiàn)在屏幕中間，但現(xiàn)在有一種新趨勢，通過將模態(tài)彈窗放在屏幕的底部，使他們看起來沒有那么強(qiáng)烈。
△ 底部vs中間
? 2. 「x」的擺放位置
△ 內(nèi)部vs交疊vs外部
△ 右邊vs左邊。圖片來自于 Meg Robichaud
結(jié)束（右邊）將「x」放在右側(cè)會比放在左側(cè)更好，理由是對于人的右手拇指適應(yīng)性更好，并且不會與左側(cè)的示意圖標(biāo)相互沖突。
開始（左邊）將「x」放在左側(cè)時(shí)應(yīng)該遵循當(dāng)前的導(dǎo)航模式，但它增加了彈窗的垂直高度，因?yàn)椴荒芴拷疽鈭D標(biāo)。
注：這是基于LTR語序來說的（譯者注：LTR在這里可以說是從左往右的閱讀語序），「開始」是用戶開始閱讀內(nèi)容的地方，「結(jié)束」是用戶停止閱讀的地方。
現(xiàn)在把所有的東西都綜合在一起，一個(gè)對齊在底部的彈窗，包括一個(gè)在右上角的「x」圖標(biāo)。
只有文字，圖片和圖標(biāo)的三種情況。
我必須承認(rèn)，你其實(shí)也可以嘗試使用兩個(gè)文字按鈕，其中一個(gè)是「關(guān)閉」。這也是一個(gè)不錯(cuò)的選擇，并且也被谷歌規(guī)范所推薦，但如果你不希望關(guān)閉那么突出，擔(dān)心會發(fā)生意外點(diǎn)擊或者遇到多語言問題，「x」按鈕就會是一個(gè)很好的通用解決方案。
在線客服1號
微信公眾賬號