UI設計師如何設計最常見(jiàn)的關(guān)閉按鈕發(fā)布者：本站     時(shí)間：2020-06-03 18:06:10

關(guān)閉按鈕「x」的設計歷史

「x」設計的注意事項

關(guān)閉按鈕設計的最佳案例

「x」圖標在應用中是一個(gè)非常常見(jiàn)的交互暗示，可以將煩人的彈窗從內容上進(jìn)行關(guān)閉。

無(wú)論是模態(tài)，對話(huà)框還是彈出窗口，都是內容交互中必要的操作元素，我們只需要建立合理的退出方式就好。

視覺(jué)設計

在ux通用設計模式中「退出」(e-x-iting)是非常簡(jiǎn)單的，你們看到我在 exiting 這個(gè)單詞中刻意突出了「x」。

「x」這個(gè)符號的歷史可以追溯到20世紀70年代的計算機設計語(yǔ)言，它第一次出現可能是在 Atari TOS(譯者注：Atari TOS是雅達利電腦操作系統，在1993年就停產(chǎn)了)菜單中，「x」是退出的命令。

它后來(lái)被「NeXT」所使用，它為 Windows 的設計帶來(lái)了靈感，并在1995年隨著(zhù) Windows 全球大規模的使用而成為關(guān)閉的標準符號。講這段歷史，目的是為了說(shuō)明，沒(méi)有必要重新造輪子，使用全世界每個(gè)人都能懂的符號更為合適。

1. 無(wú)障礙設計

我們應該在一些需要關(guān)閉的界面中始終提供「x」，即使用戶(hù)可以通過(guò)單擊背景，滑動(dòng)，或者使用手機返回按鈕來(lái)關(guān)閉界面。

UI設計師如何設計最常見(jiàn)的關(guān)閉按鈕

△ 圖標和字體

設計一個(gè)圖標，而不是使用一個(gè)字體，它應該被清晰的理解為是一個(gè)「x」，而不是模棱兩可。我個(gè)人更喜歡夾角是90度，并且四個(gè)角長(cháng)度都相等的關(guān)閉圖標設計。

UI設計師如何設計最常見(jiàn)的關(guān)閉按鈕

△ 高對比度和低對比度

它的顏色應該保持中立，符合a11y項目(譯者注：關(guān)于這個(gè)項目的具體細節可以自行g(shù)oogle)推薦的4 : 1對比度。當然，當「x」幾乎做成灰白色時(shí)，對彈出框的視覺(jué)表現影響可能最小。

通過(guò)使得「x」幾乎不可見(jiàn)，變相強制和誘導用戶(hù)執行主要操作，這就是我們常說(shuō)的設計陰暗面，這可能導致想關(guān)閉彈窗的用戶(hù)感到受挫，對體驗來(lái)說(shuō)是不可取的。

UI設計師如何設計最常見(jiàn)的關(guān)閉按鈕

△ 帶外框和不帶外框

圖標應該最好包含外框以暗示可以點(diǎn)擊的目標相對大小，這樣也能將可交互圖標與不可交互的圖標區分開(kāi)，尤其是在兩種圖標造型非常相似的情況下。

如果圖標和容器的尺寸小于最小點(diǎn)擊區域的大小(48x48dp/pt)，則需要將點(diǎn)擊范圍設置為大于按鈕的視覺(jué)效果，并且不與其他交互元素重疊。

如果這個(gè)圖標是在一個(gè)可交互的導航欄中，比如標題導航，那么這個(gè)位置就已經(jīng)為圖標創(chuàng )建了一個(gè)可點(diǎn)擊的空間，就無(wú)需另外再設計了。

位置

彈窗內容不應該成為阻礙用戶(hù)流程的攔路虎，關(guān)閉的操作應該足夠顯眼。雖然大多數 windows 軟件一直在右上角放置關(guān)閉操作，但今天 Apple 和 Google 的一些規范都把關(guān)閉圖標放在了左上角。

當涉及到模態(tài)時(shí)，這兩個(gè)系統都沒(méi)有太明確的方向。接下來(lái)，我會(huì )嘗試逐一分析模態(tài)彈窗的最佳設計。