UI設(shè)計(jì)中九個(gè)常用的控件規(guī)范，這篇都梳理好了！
UI設(shè)計(jì)中常見的控件設(shè)計(jì)都有哪些規(guī)范？本文總結(jié)了按鈕、多選、單選、切換、文本輸入框、下拉選擇、列表框、下拉按鈕、滑塊9個(gè)控件的設(shè)計(jì)規(guī)范。
我們?cè)谠O(shè)計(jì) UI 界面的時(shí)候，有一些控件幾乎總是會(huì)用到。用戶熟悉了它們的交互模式，也因此建立了心智模型，很清楚如何通過(guò)這些控件幫助他們達(dá)成目標(biāo)。
所以作為設(shè)計(jì)師，我們必須清楚這些常用 UI 控件元素的設(shè)計(jì)規(guī)范，本文偏基礎(chǔ)，但建議你查漏補(bǔ)缺。
我們需要關(guān)注的輸入控件包括以下這幾個(gè)：
- 按鈕
- 多選
- 單選
- 切換
- 文本輸入框
- 下拉選擇
- 列表框
- 下拉按鈕
- 滑塊
一、按鈕
按鈕向用戶隱喻當(dāng)他們按下/點(diǎn)擊時(shí)將觸發(fā)一個(gè)操作。
1. 最佳規(guī)范
① 按鈕結(jié)構(gòu)
當(dāng)我們?cè)O(shè)計(jì)一個(gè)按鈕時(shí)，我們需要考慮多個(gè)組成要素：圓角、內(nèi)間距、投影（可能有）、填充（純色或漸變）、文字。所有這些要素組成在一起形成一個(gè)有效傳達(dá)的按鈕控件，向用戶發(fā)生正確的交互信息。
② 按鈕圓角
圓角越大，按鈕越具有親和力。但也要記住，人眼往往不喜歡非常鋒利的物體，所以通常不大建議用圓角為 0 的按鈕樣式。建議最小也要用到 3px 的圓角。
③ 內(nèi)邊距
內(nèi)邊距能夠擴(kuò)大按鈕的可點(diǎn)擊范圍，幫助用戶更容易點(diǎn)擊按鈕。一個(gè)好的設(shè)計(jì)經(jīng)驗(yàn)是把按鈕的水平內(nèi)邊距設(shè)計(jì)成垂直內(nèi)邊距的 2 倍。當(dāng)然，你也可以根據(jù)你設(shè)計(jì)的實(shí)際情況做適當(dāng)調(diào)整，規(guī)矩不是死的。
④ 投影
我們使用投影來(lái)表明特定的狀態(tài)。按鈕必須看起來(lái)是在頁(yè)面的最上方，所以保持平滑的投影并且使用柔和的顏色。建議使用與按鈕接近的顏色然后降低透明度，這樣會(huì)使得你的投影看起來(lái)更加自然。
按鈕的投影使用和按鈕一樣的色值
⑤ 填充
無(wú)論我們使用純色還是漸變色，我們都希望確保按鈕對(duì)用戶來(lái)說(shuō)是便于理解的。另外，為按鈕選擇的顏色必須反饋相匹配的顏色。比如當(dāng)你設(shè)計(jì)一個(gè)紅色的保存按鈕時(shí)，會(huì)讓用戶猶豫能不能點(diǎn)。
⑥ 文字
與顏色類似，你也希望用到的文本內(nèi)容能夠確保用戶易于閱讀。在一個(gè)按鈕上使用最長(zhǎng)不超過(guò) 5 個(gè)單詞（重要按鈕使用 1-3 個(gè)單詞）。
⑦ 操作
按鈕可以根據(jù)交互時(shí)執(zhí)行的操作類型來(lái)進(jìn)行分類，分為 3 類：
- 主要按鈕
- 次要按鈕
- 第三次要按鈕
⑧ 狀態(tài)
也可以從另一個(gè)方面來(lái)考慮按鈕的設(shè)計(jì)樣式。最主要的按鈕狀態(tài)包括以下這 6 種：
- 默認(rèn)態(tài)
- 點(diǎn)擊態(tài)
- 焦點(diǎn)態(tài)
- 不可點(diǎn)擊態(tài)
- 活動(dòng)態(tài)
- 等待態(tài)
二、復(fù)選框
復(fù)選框控件是指用戶可以在一個(gè)列表中能同時(shí)選擇多個(gè)選項(xiàng)。
最佳規(guī)范
① 當(dāng)你在復(fù)選控件中有非常多的選項(xiàng)時(shí)，給這些選項(xiàng)分組是一個(gè)很好的分類方法。
② 雖然可能已經(jīng)為用戶創(chuàng)建了復(fù)選框時(shí)勾選多個(gè)選項(xiàng)的模式，但選項(xiàng)題目上準(zhǔn)確顯示可多選對(duì)用戶的實(shí)際選擇也很有用。比如舉個(gè)例子，在一個(gè)復(fù)選題中，如果我們問(wèn)“你喜歡哪些書？”而不問(wèn)“你喜歡哪本書？”，得到的答案很可能是完全不同的，這是因?yàn)槲覀冎烙脩艉芸赡軙?huì)多選。
③ 通過(guò)允許用戶點(diǎn)擊標(biāo)簽本身來(lái)檢查選項(xiàng)來(lái)增加可用性。
三、單選按鈕
復(fù)選框是告訴用戶這個(gè)列表中有多個(gè)選項(xiàng)可以選擇，而單選按鈕則告訴用戶只能選擇一個(gè)選項(xiàng)。
最佳規(guī)范
① 類似于復(fù)選框，如果你有一個(gè)長(zhǎng)長(zhǎng)的選項(xiàng)列表的話，記得把它們進(jìn)行分組，這樣讓用戶更容易選擇。
② 提供一個(gè)默認(rèn)選項(xiàng)。用戶可以自行選擇其他選項(xiàng)，但如果這個(gè)默認(rèn)選項(xiàng)就是用戶所希望的，就可以替他省事了。
③ 增加單選框可用性的方法是讓用戶能夠在點(diǎn)擊這個(gè)選項(xiàng)標(biāo)簽時(shí)就能選中（擴(kuò)大點(diǎn)擊范圍）。
四、切換控件
通常被用在開關(guān)選項(xiàng)中，讓用戶可以輕松地選擇這 2 個(gè)選項(xiàng)。
最佳規(guī)范
① 切換按鈕一般都有一個(gè)默認(rèn)值。用戶可以決定是否需要改變切換狀態(tài)。
② 當(dāng)用戶與切換按鈕交互時(shí)，對(duì)于結(jié)果的影響應(yīng)該是立即生效的，而不必點(diǎn)擊保存。
五、輸入框
簡(jiǎn)單說(shuō)，輸入框就是讓用戶能夠輸入文字。雖然設(shè)計(jì)樣式可能不同，但它們都應(yīng)該顯示一個(gè)標(biāo)簽。
最佳規(guī)范
① 始終顯示標(biāo)簽，這樣用戶隨時(shí)都能知道填了什么選項(xiàng)。如果僅僅在輸入框中顯示標(biāo)簽，那么當(dāng)用戶輸入時(shí)，這個(gè)標(biāo)簽會(huì)被隱藏。所以，在輸入框外使用要有一個(gè)標(biāo)簽提示。
② 保持標(biāo)簽簡(jiǎn)潔且有代表性。
③ 顯示提示語(yǔ)，確保文本內(nèi)容能夠讓用戶填寫正確的信息。
六、下拉列表
類似于單選按鈕，下拉列表僅允許用戶在同一個(gè)時(shí)間只能選擇一個(gè)選項(xiàng)。事實(shí)上，它們是可擴(kuò)展的，本質(zhì)上就是一個(gè)緊湊型的單選按鈕。
最佳規(guī)范
因?yàn)樗鼈儽举|(zhì)上是一個(gè)緊湊型的單選按鈕，所以當(dāng)不是真正必要的時(shí)候，展開選擇或許更快，盡量避免使用。
七、下拉復(fù)選框
類似于復(fù)選框，它也允許用戶同時(shí)選擇多個(gè)選項(xiàng)。
最佳規(guī)范
如果你有一個(gè)長(zhǎng)的列表選項(xiàng)，記得給它們分組便于用戶更容易選擇。
八、下拉按鈕
本質(zhì)上，下拉按鈕是由一個(gè)按鈕組成，當(dāng)單擊下拉按鈕時(shí)，將顯示不同的列表內(nèi)容。
最佳規(guī)范
① 記得給選項(xiàng)增加懸停效果，以顯示用戶可以通過(guò)單擊導(dǎo)航到另一個(gè)頁(yè)面。
② 在按鈕的右側(cè)加上一個(gè)單獨(dú)的圖標(biāo)，告訴用戶它還有隱藏的下拉菜單。
九、滑塊
滑塊允許用戶更改或設(shè)置一個(gè)值
最佳規(guī)范
只在需要的時(shí)候使用滑塊，當(dāng)范圍對(duì)用戶來(lái)說(shuō)比精確值更重要的時(shí)候。
注意控件點(diǎn)擊范圍，確保用戶可以更容易的選擇不同的值。
總結(jié)
以上提到的這些控件，在我們?nèi)粘ＴO(shè)計(jì)工作中常常會(huì)被用到，希望你能了解這些正確使用的規(guī)范和指導(dǎo)原則，以便為用戶帶來(lái)最大價(jià)值。
