国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

編輯導(dǎo)語(yǔ)：開(kāi)關(guān)組件是移動(dòng)端常見(jiàn)的組件類別之一，這一交互方式簡(jiǎn)單易懂，用戶可以通過(guò)快速切換轉(zhuǎn)換狀態(tài)。然而開(kāi)關(guān)組件看起來(lái)簡(jiǎn)單，卻仍有許多方面值得注意。本篇文章里，作者就開(kāi)關(guān)組件的交互狀態(tài)、設(shè)計(jì)注意事項(xiàng)等做了梳理，一起來(lái)看一下。

開(kāi)關(guān)控件在大家腦海中是一類最簡(jiǎn)單的交互設(shè)計(jì)組件，是移動(dòng)端比較常見(jiàn)、同時(shí)新手設(shè)計(jì)師比較喜歡用的一類組件。

但是它真的像我們想象當(dāng)中這么簡(jiǎn)單嗎，是不是有哪些細(xì)小的點(diǎn)是我們忽略的，還有哪些小點(diǎn)是我們需要注意的小竅門？今天小編就帶大家抽絲剝繭了解本質(zhì)。

一、「開(kāi)關(guān)組件」的咬文嚼字

1. 現(xiàn)實(shí)世界的隱喻

產(chǎn)品界面上的概念都是現(xiàn)實(shí)世界事物抽象后的表現(xiàn)形式，所以現(xiàn)在我們先來(lái)看看開(kāi)關(guān)在我們真實(shí)物理世界里是怎么樣的。

「開(kāi)關(guān)組件」英語(yǔ)原文為“switch”或者“toggle”，其詞語(yǔ)解釋為開(kāi)啟和關(guān)閉。它還是指一個(gè)可以使電路開(kāi)路、使電流中斷或使其流到其他電路并即時(shí)生效的電子元件。

2. 界面上交互特點(diǎn)

結(jié)合前文開(kāi)關(guān)在物理世界當(dāng)中的隱喻，我們很容易給其在界面世界上的交互定義：

1. 允許用戶在兩個(gè)相互排斥的選項(xiàng)之間進(jìn)行快速切換的交互組件。例如，“開(kāi)/關(guān)”、“顯示/隱藏”。
2. 當(dāng)用戶切換開(kāi)關(guān)時(shí)，相應(yīng)的操作立即生效。

二、「開(kāi)關(guān)組件」的交互狀態(tài)

對(duì)于「開(kāi)關(guān)」組件的交互狀態(tài)其實(shí)市面上爭(zhēng)議比較大，就谷歌Material Design而言他給出五種交互狀態(tài)的定義，分別是：有啟用、禁用、懸停、聚焦和按壓狀態(tài)。

https://material.io/components/switches#behavior

蘋(píng)果公司在它的“人機(jī)界面指南”當(dāng)中無(wú)論是“IOS”還是“macOS“當(dāng)中對(duì)于開(kāi)關(guān)狀態(tài)并沒(méi)有詳細(xì)的解釋，僅僅簡(jiǎn)單的給出了“開(kāi)”與“關(guān)”兩種狀態(tài)。

https://developer.apple.com/design/human-interface-guidelines/ios/controls/switches/

https://developer.apple.com/design/human-interface-guidelines/macos/buttons/switches/

微軟公司在它的“Fluent ui”當(dāng)中指出三種交互狀態(tài)的定義，分別是：打開(kāi)、關(guān)閉、禁用。同時(shí)在禁用狀態(tài)中它還區(qū)分“開(kāi)禁用”與“關(guān)禁用”。

https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle

結(jié)合“谷歌Material Design”、“蘋(píng)果的人機(jī)界面指南”、“微軟Fluent ui規(guī)范”以及工作當(dāng)中的實(shí)踐經(jīng)驗(yàn)，開(kāi)關(guān)組件相對(duì)合理且適用的狀態(tài)為“打開(kāi)”“關(guān)閉”與“禁用”三類。

這里小編也是查閱大量資料后按自己的理解得出的結(jié)果，如果各位朋友有其他意見(jiàn)或者更加合適的資料來(lái)探討，同時(shí)對(duì)hozin老師有關(guān)開(kāi)關(guān)狀態(tài)的文章也是存疑。

三、開(kāi)關(guān)的加載狀態(tài)

基于開(kāi)關(guān)組件的現(xiàn)實(shí)隱喻以及其相應(yīng)操作立即生效的交互特點(diǎn)，這里特別指出加載狀態(tài)的開(kāi)關(guān)組件是不存在的，處理狀態(tài)也不應(yīng)該通過(guò)在開(kāi)關(guān)上的動(dòng)畫(huà)來(lái)表示，因?yàn)檫@樣做會(huì)讓用戶難以閱讀和理解。

那么老話說(shuō)得好，出題不解題就是耍流氓。我們碰到這種實(shí)際狀態(tài)，開(kāi)關(guān)組件狀態(tài)的改變會(huì)有延遲該怎么處理呢？

谷歌這里給出的建議當(dāng)你設(shè)計(jì)開(kāi)關(guān)時(shí)碰到延遲加載情況，用加載條的方式去處理這種問(wèn)題。

其實(shí)小編對(duì)于material design的這種處理方法十分的認(rèn)同，因?yàn)樗鼜谋举|(zhì)上把組件的“操作”與“狀態(tài)”分開(kāi)去設(shè)計(jì)處理，一件事歸一件事，使得用戶可以簡(jiǎn)單明了地看見(jiàn)當(dāng)下開(kāi)關(guān)組件的樣子與狀態(tài)。

四、開(kāi)關(guān)組件小注意點(diǎn)

各位觀眾老爺們看到這里估計(jì)想拿起水瓶想把小編趕下臺(tái)去，心里OS：不就一個(gè)開(kāi)關(guān)么，還有小技巧，故弄玄虛。先別急，聽(tīng)我細(xì)細(xì)講來(lái)。

1. 避免添加標(biāo)簽來(lái)描述開(kāi)關(guān)的值

因?yàn)殚_(kāi)關(guān)組件的值已經(jīng)明顯得不能再明顯，就是“開(kāi)”與“關(guān)”，如果再對(duì)于值去設(shè)計(jì)特別的文字描述就顯得十分多余，反而讓用戶覺(jué)得迷惑（特別指出：這里是蘋(píng)果設(shè)計(jì)規(guī)范里給出的設(shè)計(jì)建議）。

而微軟Fluent UI給出的建議又比較奇特，會(huì)在開(kāi)關(guān)組件附近給出出當(dāng)下開(kāi)關(guān)的值，如下圖。

那么至于小編的建議是站邊蘋(píng)果，因?yàn)殚_(kāi)關(guān)組件的值實(shí)在是太簡(jiǎn)單太容易判別，也完全符合現(xiàn)實(shí)世界當(dāng)中用戶對(duì)物理開(kāi)關(guān)的心智模型。

但是這里又要特別爆錘下Antdesign的設(shè)計(jì)，它有一種開(kāi)關(guān)組件的使用建議是把值或者標(biāo)簽描述放在組件的內(nèi)部，那么請(qǐng)問(wèn)如果是海外產(chǎn)品，它的標(biāo)簽描述或者值是西文語(yǔ)言，那么開(kāi)關(guān)組件長(zhǎng)度將會(huì)變得非常不可控，甚至于是忽長(zhǎng)忽短，這必定不是一個(gè)優(yōu)雅的設(shè)計(jì)。

2. 提供簡(jiǎn)潔的、非中性的標(biāo)簽

因?yàn)閺拈_(kāi)發(fā)角度來(lái)看開(kāi)關(guān)組件的本質(zhì)就是布爾值的選擇，所以說(shuō)對(duì)它的描述需要簡(jiǎn)潔易判斷，模棱兩可的語(yǔ)言并不可取。

3. 僅建議在移動(dòng)端使用開(kāi)關(guān)組件

在移動(dòng)端產(chǎn)品使用場(chǎng)景當(dāng)中是直接用手指去操作交互組件，并不會(huì)去考慮關(guān)心手指下面按住組件的某些交互狀態(tài)，但是鼠標(biāo)操作的場(chǎng)景就麻煩多了，比如有hover狀態(tài)，那么開(kāi)關(guān)組件搞個(gè)hover狀態(tài)是不是很奇怪？

4. 對(duì)特殊人群不友好

據(jù)調(diào)查色盲發(fā)生率在我國(guó)男性約為5%～8%、女性0.5～1%。那么計(jì)算一下我們有多少用戶患有紅綠色盲，那么它對(duì)開(kāi)關(guān)的認(rèn)知就如下圖所示的樣子了。

5. 不建議web使用開(kāi)關(guān)組件

開(kāi)關(guān)組件具有強(qiáng)烈的隱喻，造成它擴(kuò)展性非常差，只能二選一，同時(shí)web端可供使用的組件有很多比如radio button、check box、下單框等，哪一個(gè)都是開(kāi)關(guān)組件香。

同時(shí)在web產(chǎn)品當(dāng)中，數(shù)據(jù)向服務(wù)器的提交方式并不一定是實(shí)時(shí)的，而開(kāi)關(guān)組件的隱喻是即時(shí)生效，那就存在著不可調(diào)和的矛盾，與用戶的認(rèn)知也有不同。假如在你點(diǎn)完開(kāi)關(guān)組件的一剎那產(chǎn)品崩潰，那這個(gè)時(shí)刻開(kāi)關(guān)到底是什么狀態(tài)？

6. 開(kāi)發(fā)存在一定成本

雖然很多前端交互框架都提供了Switch組件，但是碰到要適配各種老舊瀏覽器做各種兼容就比較頭疼。同時(shí)在HTML的代碼邏輯里并沒(méi)有Switch的標(biāo)簽，這意思就是開(kāi)關(guān)組件并不是web端原生的控件，這樣會(huì)讓開(kāi)發(fā)小哥在處理上花上更多的心思，比較容易禿頭。

五、與各個(gè)組件之間的差異與關(guān)系

有時(shí)候，決定使用交互組件元素：radio button、chech box或switch可能會(huì)很困難。當(dāng)你想知道哪個(gè)選項(xiàng)適合的時(shí)候，請(qǐng)考慮選項(xiàng)的數(shù)量和類型，以及是否有任何明確的默認(rèn)值。

下表總結(jié)了這些常用交互組件的差異點(diǎn)，該表出自尼爾森諾曼集團(tuán)的官方文件當(dāng)中，又是英文又是中文，是小編的翻譯軟件造成的，請(qǐng)各位看官別太介意，英文好的可自行搜索原文。

六、文末小結(jié)

開(kāi)關(guān)組件這個(gè)小玩意兒能講的點(diǎn)不多，但是小而麻煩的，其實(shí)不太好用。小編查閱當(dāng)下世界級(jí)的三類設(shè)計(jì)語(yǔ)言，其中對(duì)于開(kāi)關(guān)組件的應(yīng)用規(guī)則與特點(diǎn)描述其實(shí)都存在打架的情況，只有在移動(dòng)端認(rèn)知還算比較統(tǒng)一。

所以我們作為交互設(shè)計(jì)師在工作中使用到開(kāi)關(guān)組件時(shí)一定要深思熟慮，多加小心才方為上策。

作者：月亮與六便士；公眾號(hào)：月亮體驗(yàn)設(shè)計(jì)坊

本文由 @月亮與六便士 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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