中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

寫(xiě)在前面，讀完這篇文章你將會(huì)了解到：

1. 關(guān)閉按鈕“x”的設(shè)計(jì)歷史
2. “x”設(shè)計(jì)的注意事項(xiàng)
3. 關(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)更為合適。

無(wú)障礙設(shè)計(jì)

我們應(yīng)該在一些需要關(guān)閉的界面中始終提供【x】，即使用戶可以通過(guò)單擊背景，滑動(dòng)，或者使用手機(jī)返回按鈕來(lái)關(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ì)。

高對(duì)比度和低對(duì)比度

它的顏色應(yīng)該保持中立，符合a11y (譯者注：關(guān)于這個(gè)項(xiàng)目的具體細(xì)節(jié)可以自行g(shù)oogle) 項(xiàng)目推薦的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ō)是不可取的。

帶外框和不帶外框

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

• 如果圖標(biāo)和容器的尺寸小于最小點(diǎn)擊區(qū)域的大?。?8x48dp/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ì)。

模態(tài)界面圖標(biāo)位置

模態(tài)位置

除了警告彈窗之外，大多數(shù)模態(tài)內(nèi)容都是非必須的，因此它們可以適當(dāng)弱化。雖然一般做法都是將模態(tài)彈窗直接出現(xiàn)在屏幕中間，但現(xiàn)在有一種新趨勢(shì)，通過(guò)將模態(tài)彈窗放在屏幕的底部，使他們看起來(lái)沒(méi)有那么強(qiáng)烈。

底部vs中間

[x] 的擺放位置

內(nèi)部vs交疊vs外部

• 內(nèi)部：出現(xiàn)在模態(tài)彈窗的內(nèi)部。這樣的擺放可以很清晰的與模態(tài)內(nèi)容聯(lián)系在一起，從版式上來(lái)說(shuō)也很美觀，缺點(diǎn)是它可能會(huì)增加模態(tài)中標(biāo)題布局的復(fù)雜性。
• 交疊：出現(xiàn)在模態(tài)彈窗的邊緣。在連續(xù)的邊緣中間出現(xiàn)間斷最能引起人們對(duì)“x”圖標(biāo)的注意，但它所具有的獨(dú)特視覺(jué)風(fēng)格，增加了視覺(jué)復(fù)雜性，感覺(jué)也沒(méi)有那么精致。
• 外部：出現(xiàn)在模態(tài)彈窗之外。這樣使得模態(tài)窗口很整潔，但是關(guān)閉圖標(biāo)可能會(huì)與下面的UI混淆在一起。

右邊vs左邊。圖標(biāo)來(lái)自于 Meg Robichaud

結(jié)束（右邊） 將“x”放在右側(cè)會(huì)比放在左側(cè)更好，理由是對(duì)于人的右手拇指適應(yīng)性更好，并且不會(huì)與左側(cè)的示意圖標(biāo)相互沖突。

開(kāi)始（左邊） 將“x”放在左側(cè)時(shí)應(yīng)該遵循當(dāng)前的導(dǎo)航模式，但它增加了彈窗的垂直高度，因?yàn)椴荒芴拷疽鈭D標(biāo)。

注：這是基于LTR語(yǔ)序來(lái)說(shuō)的（譯者注：LTR在這里可以說(shuō)是從左往右的閱讀語(yǔ)序），“開(kāi)始”是用戶開(kāi)始閱讀內(nèi)容的地方，“結(jié)束”是用戶停止閱讀的地方。

最佳配置

現(xiàn)在把所有的東西都綜合在一起——一個(gè)對(duì)齊在底部的彈窗，包括一個(gè)在右上角的“x”圖標(biāo)。

只有文字，圖片和圖標(biāo)的三種情況。

總結(jié)

我必須承認(rèn)，你其實(shí)也可以嘗試使用兩個(gè)文字按鈕，其中一個(gè)是“關(guān)閉”。這也是一個(gè)不錯(cuò)的選擇，并且也被谷歌規(guī)范所推薦，但如果你不希望關(guān)閉那么突出，擔(dān)心會(huì)發(fā)生意外點(diǎn)擊或者遇到多語(yǔ)言問(wèn)題，“x”按鈕就會(huì)是一個(gè)很好的通用解決方案。

原文：https://medium.com/tap-to-dismiss/tap-to-dismiss-fbc66bdf500a

作者：Linzi Berry

譯者：彩云Sky，公眾號(hào)：彩云譯設(shè)計(jì)

本文由 @彩云Sky 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議