關於退出按鈕，你可能不知道的設計細節
從零開始學運營，10年經驗運營總監親授，2天線下集訓+1年線上學習，做個有競爭力的運營人。 瞭解詳情
釋放雙眼，帶上耳機，聽聽看~！
00:00
00:00
退出按鈕，無論是模態，對話方塊還是彈出視窗，都是內容互動中必要的操作元素，我們只需要建立合理的退出方式就好。
寫在前面，讀完這篇文章你將會了解到：
- 關閉按鈕“x”的設計歷史
- “x”設計的注意事項
- 關閉按鈕設計的最佳案例
“x”圖示在應用中是一個非常常見的互動暗示，可以將煩人的彈窗從內容上進行關閉。
無論是模態，對話方塊還是彈出視窗，都是內容互動中必要的操作元素，我們只需要建立合理的退出方式就好。
視覺設計
在ux通用設計模式中“退出”（e- x -iting）是非常簡單的，你們看到我在exiting這個單詞中刻意突出了“x”。
“x”這個符號的歷史可以追溯到20世紀70年代的計算機設計語言，它第一次出現可能是在 Atari TOS（譯者注：Atari TOS是雅達利電腦作業系統，在1993年就停產了）選單中，”x”是退出的命令。
它後來被“NeXT”所使用，它為Windows的設計帶來了靈感，並在1995年隨著Windows全球大規模的使用而成為關閉的標準符號。講這段歷史，目的是為了說明，沒有必要重新造輪子，使用全世界每個人都能懂的符號更為合適。
無障礙設計
我們應該在一些需要關閉的介面中始終提供【x】，即使使用者可以通過單擊背景，滑動，或者使用手機返回按鈕來關閉介面。
圖示和字型
設計一個圖示，而不是使用一個字型，它應該被清晰的理解為是一個【x】，而不是模稜兩可。我個人更喜歡夾角是90度，並且四個角長度都相等的關閉圖示設計。
高對比度和低對比度
它的顏色應該保持中立，符合a11y (譯者注：關於這個專案的具體細節可以自行google) 專案推薦的4：1對比度。當然，當【x】幾乎做成灰白色時，對彈出框的視覺表現影響可能最小。
通過使得【x】幾乎不可見，變相強制和誘導使用者執行主要操作，這就是我們常說的設計陰暗面，這可能導致想關閉彈窗的使用者感到受挫，對體驗來說是不可取的。
帶外框和不帶外框
圖示應該最好包含外框以暗示可以點選的目標相對大小，這樣也能將可互動圖示與不可互動的圖示區分開，尤其是在兩種圖示造型非常相似的情況下。
- 如果圖示和容器的尺寸小於最小點選區域的大小（48x48dp/pt），則需要將點選範圍設定為大於按鈕的視覺效果，並且不與其他互動元素重疊。
- 如果這個圖示是在一個可互動的導航欄中，比如標題導航，那麼這個位置就已經為圖示建立了一個可點選的空間，就無需另外再設計了。
位置
彈窗內容不應該成為阻礙使用者流程的攔路虎，關閉的操作應該足夠顯眼。雖然大多數windows軟體一直在右上角放置關閉操作，但今天Apple和Google的一些規範都把關閉圖示放在了左上角。
當涉及到模態時，這兩個系統都沒有太明確的方向。接下來，我會嘗試逐一分析模態彈窗的最佳設計。
模態介面圖示位置
模態位置
除了警告彈窗之外，大多數模態內容都是非必須的，因此它們可以適當弱化。雖然一般做法都是將模態彈窗直接出現在螢幕中間，但現在有一種新趨勢，通過將模態彈窗放在螢幕的底部，使他們看起來沒有那麼強烈。
底部vs中間
[x] 的擺放位置
內部vs交疊vs外部
- 內部 ：出現在模態彈窗的內部。這樣的擺放可以很清晰的與模態內容聯絡在一起，從版式上來說也很美觀，缺點是它可能會增加模態中標題佈局的複雜性。
- 交疊 ：出現在模態彈窗的邊緣。在連續的邊緣中間出現間斷最能引起人們對“x”圖示的注意，但它所具有的獨特視覺風格，增加了視覺複雜性，感覺也沒有那麼精緻。
- 外部 ：出現在模態彈窗之外。這樣使得模態視窗很整潔，但是關閉圖示可能會與下面的UI混淆在一起。
右邊vs左邊。圖示來自於 Meg Robichaud
結束（右邊） 將“x”放在右側會比放在左側更好，理由是對於人的右手拇指適應性更好，並且不會與左側的示意圖示相互衝突。
開始（左邊） 將“x”放在左側時應該遵循當前的導航模式，但它增加了彈窗的垂直高度，因為不能太靠近示意圖示。
注：這是基於LTR語序來說的（譯者注：LTR在這裡可以說是從左往右的閱讀語序），“開始”是使用者開始閱讀內容的地方，“結束”是使用者停止閱讀的地方。
最佳配置
現在把所有的東西都綜合在一起——一個對齊在底部的彈窗，包括一個在右上角的“x”圖示。
只有文字，圖片和圖示的三種情況。
總結
我必須承認，你其實也可以嘗試使用兩個文字按鈕，其中一個是“關閉”。這也是一個不錯的選擇，並且也被谷歌規範所推薦，但如果你不希望關閉那麼突出，擔心會發生意外點選或者遇到多語言問題，“x”按鈕就會是一個很好的通用解決方案。
原文：https://medium.com/tap-to-dismiss/tap-to-dismiss-fbc66bdf500a
作者：Linzi Berry
譯者：彩雲Sky，公眾號：彩雲譯設計
本文由 @彩雲Sky 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議
