UI設(shè)計(jì)師如何設(shè)計(jì)最常見(jiàn)的關(guān)閉按鈕發(fā)布者：本站 時(shí)間：2020-06-03 18:06:10
關(guān)閉按鈕「x」的設(shè)計(jì)歷史
「x」設(shè)計(jì)的注意事項(xiàng)
關(guān)閉按鈕設(shè)計(jì)的最佳案例
「x」圖標(biāo)在應(yīng)用中是一個(gè)非常常見(jiàn)的交互暗示，可以將煩人的彈窗從內(nèi)容上進(jìn)行關(guān)閉。
無(wú)論是模態(tài)，對(duì)話框還是彈出窗口，都是內(nèi)容交互中必要的操作元素，我們只需要建立合理的退出方式就好。
視覺(jué)設(shè)計(jì)
在ux通用設(shè)計(jì)模式中「退出」(e-x-iting)是非常簡(jiǎn)單的，你們看到我在 exiting 這個(gè)單詞中刻意突出了「x」。
「x」這個(gè)符號(hào)的歷史可以追溯到20世紀(jì)70年代的計(jì)算機(jī)設(shè)計(jì)語(yǔ)言，它第一次出現(xiàn)可能是在 Atari TOS(譯者注：Atari TOS是雅達(dá)利電腦操作系統(tǒng)，在1993年就停產(chǎn)了)菜單中，「x」是退出的命令。
它后來(lái)被「NeXT」所使用，它為 Windows 的設(shè)計(jì)帶來(lái)了靈感，并在1995年隨著 Windows 全球大規(guī)模的使用而成為關(guān)閉的標(biāo)準(zhǔn)符號(hào)。講這段歷史，目的是為了說(shuō)明，沒(méi)有必要重新造輪子，使用全世界每個(gè)人都能懂的符號(hào)更為合適。
1. 無(wú)障礙設(shè)計(jì)
我們應(yīng)該在一些需要關(guān)閉的界面中始終提供「x」，即使用戶可以通過(guò)單擊背景，滑動(dòng)，或者使用手機(jī)返回按鈕來(lái)關(guān)閉界面。
UI設(shè)計(jì)師如何設(shè)計(jì)最常見(jiàn)的關(guān)閉按鈕
△ 圖標(biāo)和字體
設(shè)計(jì)一個(gè)圖標(biāo)，而不是使用一個(gè)字體，它應(yīng)該被清晰的理解為是一個(gè)「x」，而不是模棱兩可。我個(gè)人更喜歡夾角是90度，并且四個(gè)角長(zhǎng)度都相等的關(guān)閉圖標(biāo)設(shè)計(jì)。
UI設(shè)計(jì)師如何設(shè)計(jì)最常見(jiàn)的關(guān)閉按鈕
△ 高對(duì)比度和低對(duì)比度
它的顏色應(yīng)該保持中立，符合a11y項(xiàng)目(譯者注：關(guān)于這個(gè)項(xiàng)目的具體細(xì)節(jié)可以自行g(shù)oogle)推薦的4 : 1對(duì)比度。當(dāng)然，當(dāng)「x」幾乎做成灰白色時(shí)，對(duì)彈出框的視覺(jué)表現(xiàn)影響可能最小。
通過(guò)使得「x」幾乎不可見(jiàn)，變相強(qiáng)制和誘導(dǎo)用戶執(zhí)行主要操作，這就是我們常說(shuō)的設(shè)計(jì)陰暗面，這可能導(dǎo)致想關(guān)閉彈窗的用戶感到受挫，對(duì)體驗(yàn)來(lái)說(shuō)是不可取的。
UI設(shè)計(jì)師如何設(shè)計(jì)最常見(jiàn)的關(guān)閉按鈕
△ 帶外框和不帶外框
圖標(biāo)應(yīng)該最好包含外框以暗示可以點(diǎn)擊的目標(biāo)相對(duì)大小，這樣也能將可交互圖標(biāo)與不可交互的圖標(biāo)區(qū)分開(kāi)，尤其是在兩種圖標(biāo)造型非常相似的情況下。
如果圖標(biāo)和容器的尺寸小于最小點(diǎn)擊區(qū)域的大小(48x48dp/pt)，則需要將點(diǎn)擊范圍設(shè)置為大于按鈕的視覺(jué)效果，并且不與其他交互元素重疊。
如果這個(gè)圖標(biāo)是在一個(gè)可交互的導(dǎo)航欄中，比如標(biāo)題導(dǎo)航，那么這個(gè)位置就已經(jīng)為圖標(biāo)創(chuàng)建了一個(gè)可點(diǎn)擊的空間，就無(wú)需另外再設(shè)計(jì)了。
位置
彈窗內(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)都沒(méi)有太明確的方向。接下來(lái)，我會(huì)嘗試逐一分析模態(tài)彈窗的最佳設(shè)計(jì)。
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯(cuò)過(guò)
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強(qiáng)大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn)，優(yōu)秀的技術(shù)和設(shè)計(jì)水平，更放心
3. 全程省心服務(wù)，不必?fù)?dān)心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話：021-58370032
關(guān)鍵詞標(biāo)簽：上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開(kāi)發(fā)