激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

資深 UI 設(shè)計(jì)師搞定按鈕和選框的14個(gè)秘訣

發(fā)布時(shí)間：2024-04-03 18:15:15 瀏覽量：122次

編劇導(dǎo)語：在UI界面中，我們可以看到各種開關(guān)按鈕之類的組件，怎樣更好的使用它們是一個(gè)值得思考的問題。這篇文章來自資深設(shè)計(jì)師 Taras Bakusevych，他在表單和控件設(shè)計(jì)領(lǐng)域造詣精深。這篇文章梳理了他總結(jié)的 14 條按鈕和選框的設(shè)計(jì)經(jīng)驗(yàn)，實(shí)用性極強(qiáng)。推薦對(duì)UI設(shè)計(jì)感興趣的用戶閱讀。

UI 界面當(dāng)中，各種開關(guān)、按鈕、選框控件是非常常見的組件，它們看起來不復(fù)雜，但是在實(shí)際使用的時(shí)候講究非常之很多，它們不僅關(guān)乎體驗(yàn)，而且涉及到一些界面邏輯問題。

英文中的 「Toggle」一詞，對(duì)應(yīng)的是帶有短柄的撥動(dòng)式開關(guān)，撥動(dòng)它的時(shí)候，能夠在兩種不同的狀態(tài)之間切換。

至于 「單選按鈕」（Radio Buttons）這一詞則來自汽車收音機(jī)，在老式的汽車控制面板上有一排機(jī)械的可以存儲(chǔ)預(yù)設(shè)電臺(tái)的按鈕，用戶可以快速地按動(dòng)按鈕切換不同的電臺(tái)。按下其中一個(gè)按鈕，其他的按鈕會(huì)彈起，這里的按鈕是互斥的，多個(gè)按鈕無法同時(shí)被激活。

復(fù)選框（Checkboxes）則通常有一個(gè)或者多個(gè)選項(xiàng)，供用戶選擇，復(fù)選框內(nèi)的選項(xiàng)通常不是互斥的，用戶可以選擇一個(gè)也可以選擇多個(gè)。

撥動(dòng)開關(guān)（Toggle-Switch）則是最常見的一種按鈕樣式，點(diǎn)擊即可切換狀態(tài)。

選擇按鈕（Choice Chips）是單選按鈕一種精簡(jiǎn)模式，它通常會(huì)包含有至少2個(gè)選項(xiàng)，用戶可以選擇其中的一個(gè)，選擇按鈕大多出現(xiàn)在移動(dòng)端界面上。

多選按鈕（Multi-select Chips）則是復(fù)選框的一種通用替代品，用戶可以選擇其中多個(gè)選項(xiàng)，而這種按鈕也大多應(yīng)用在移動(dòng)端設(shè)備上。

各類選擇控件已經(jīng)在用戶界面中存在了很長(zhǎng)時(shí)間，所以用戶對(duì)于它的功能、認(rèn)知以及期望是清晰的。下面是一個(gè)非常簡(jiǎn)單的清單，列舉出了絕大多數(shù)常見的選擇控件的類型和使用場(chǎng)景：

一、熟知按鈕的不同顯示狀態(tài)

復(fù)選框和單選按鈕有選中和未被選中兩種狀態(tài)，撥動(dòng)開關(guān)則有開啟和關(guān)閉兩種狀態(tài)。在實(shí)際的使用過程中，它們都有啟用、禁用、懸停、聚焦、按下等不同狀態(tài)，雖然這些狀態(tài)看起來很多，但是這些狀態(tài)涉及到實(shí)際交互的需求和不同場(chǎng)景，并且是實(shí)現(xiàn)可靠交互的基礎(chǔ)。

二、別忘了「未定狀態(tài)」

對(duì)于復(fù)選框，通常只存在選中和未選中兩種狀態(tài)。如果涉及到多層級(jí)、有父子結(jié)構(gòu)的復(fù)選框體系的時(shí)候，可能會(huì)因?yàn)樽訌?fù)選框部分選中、部分未選中，而使得父復(fù)選框的狀態(tài)介乎全選和未選擇之間，這種「未定狀態(tài)」容易被忽略。

三、不要錯(cuò)用了「撥動(dòng)開關(guān)」

在涉及到有層級(jí)結(jié)構(gòu)選項(xiàng)的時(shí)候，不要使用撥動(dòng)開關(guān)。它不僅在視覺上容易分散注意力，而且在使用的時(shí)候，容易導(dǎo)致誤判。

四、當(dāng)功能觸發(fā)立即生效時(shí)，使用撥動(dòng)開關(guān)

撥動(dòng)開關(guān)是標(biāo)準(zhǔn)的數(shù)字化的開關(guān)功能，當(dāng)你使用撥動(dòng)開關(guān)這種控件的時(shí)候，確保它所觸發(fā)的功能能夠立刻開啟/關(guān)閉。如果不是這樣的情況，那么最好使用單個(gè)復(fù)選框來替代撥動(dòng)開關(guān)。

五、避免非常規(guī)的控件樣式

和整個(gè)平臺(tái)的常規(guī)樣式差異過大的按鈕樣式，很容易帶來額外的認(rèn)知負(fù)擔(dān)。比如圓形的復(fù)選框就很容易和傳統(tǒng)的單選按鈕混淆。

六、在列表中使用便于用戶掃讀的排版

靠左對(duì)齊的復(fù)選框+標(biāo)簽的樣式是效果最好的。這確保了用戶可以最快理解并完成操作，減少錯(cuò)誤出現(xiàn)。將復(fù)選框靠右對(duì)齊其實(shí)也可以，在移動(dòng)端上展示其實(shí)也有優(yōu)勢(shì)——單手操作的時(shí)候更容易被選中，也不會(huì)因?yàn)辄c(diǎn)擊勾選的時(shí)候手指會(huì)遮蓋到標(biāo)簽內(nèi)容，不過標(biāo)簽文本和復(fù)選框不能相隔太遠(yuǎn)。

七、如果縱向空間不夠請(qǐng)使用按鈕替代選框

使用選框控件的問題在于它和對(duì)應(yīng)標(biāo)簽是分離開的，在垂直控件有限的情況下，橫向排版會(huì)非常局促，這個(gè)時(shí)候用按鈕來替代選框會(huì)好很多。

八、盡可能使用單選按鈕而不是下拉菜單

使用單選按鈕能讓選項(xiàng)始終可見，這樣方便用戶直觀地比較和查看，從而減輕認(rèn)知負(fù)荷，讓表單內(nèi)容更加清晰透明。

九、使用下拉菜單承載大量、相似的選項(xiàng)

如果選項(xiàng)的數(shù)量超過6個(gè)，最好還是考慮將它置于下拉菜單中，因?yàn)橛脩魺o論如何都無法快速記住和對(duì)比全部的選項(xiàng)，這同樣適用于大量的、相似的或者可預(yù)測(cè)的選項(xiàng)，比如 10%、20%、30%、等等。

十、單選按鈕最好提供一個(gè)默認(rèn)選項(xiàng)

通常，一旦選中了某一個(gè)單選按鈕，用戶就無法取消選擇并且恢復(fù)原始狀態(tài)。所以，可能會(huì)有用戶不愿做出選擇，這個(gè)時(shí)候應(yīng)該提供一個(gè)「無」的選項(xiàng)。提供默認(rèn)選項(xiàng)，并且按照邏輯順序來排序，這樣會(huì)更好。

十一、使用清晰的文本標(biāo)簽內(nèi)容

在文本標(biāo)簽內(nèi)容當(dāng)中，盡量不要使用否定的表達(dá)方式，這樣可以規(guī)避誤解，方便用戶正確理解內(nèi)容。

十二、突出顯示被選選項(xiàng)吸引用戶注意力

從視覺上對(duì)于被選中的選項(xiàng)進(jìn)行區(qū)分，這在數(shù)據(jù)表單中尤其重要。

十三、支持批量選擇和清除

對(duì)于用戶而言，一次選中和清除多個(gè)選項(xiàng)應(yīng)該是一件簡(jiǎn)單輕松的事情，因此需要支持批量選中和清除的功能。

十四、讓可點(diǎn)擊區(qū)域足夠大

相對(duì)夠大的觸發(fā)區(qū)域，是確保用戶在移動(dòng)端上交互的重要基礎(chǔ)。讓觸發(fā)區(qū)域包含按鈕、文本標(biāo)簽以及周圍一部分的留白區(qū)域，能讓交互輕松很多。根據(jù)菲茨定律，點(diǎn)擊區(qū)域的大小對(duì)于交互的影響是非常直接的。復(fù)選框和單選按鈕通常很小，單擊的時(shí)候不容易被「瞄準(zhǔn)」，尤其在移動(dòng)端屏幕上。

作者：Taras Bakusevych；公眾號(hào)：科洛弗道11號(hào)

原文鏈接：
https://mp.weixin.qq.com/s/ZSfGFp_N-Te8mX3byzXCXA

本文由 @科洛弗道11號(hào) 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定