UI設計中常見的控件設計都有哪些規(guī)范？本文總結(jié)了按鈕、多選、單選、切換、文本輸入框、下拉選擇、列表框、下拉按鈕、滑塊9個控件的設計規(guī)范。

我們在設計 UI 界面的時候，有一些控件幾乎總是會用到。用戶熟悉了它們的交互模式，也因此建立了心智模型，很清楚如何通過這些控件幫助他們達成目標。

所以作為設計師，我們必須清楚這些常用 UI 控件元素的設計規(guī)范，本文偏基礎，但建議你查漏補缺。

我們需要關(guān)注的輸入控件包括以下這幾個：

1. 按鈕
2. 多選
3. 單選
4. 切換
5. 文本輸入框
6. 下拉選擇
7. 列表框
8. 下拉按鈕
9. 滑塊

一、按鈕

按鈕向用戶隱喻當他們按下/點擊時將觸發(fā)一個操作。

1. 最佳規(guī)范

① 按鈕結(jié)構(gòu)

當我們設計一個按鈕時，我們需要考慮多個組成要素：圓角、內(nèi)間距、投影（可能有）、填充（純色或漸變）、文字。所有這些要素組成在一起形成一個有效傳達的按鈕控件，向用戶發(fā)生正確的交互信息。

② 按鈕圓角

圓角越大，按鈕越具有親和力。但也要記住，人眼往往不喜歡非常鋒利的物體，所以通常不大建議用圓角為 0 的按鈕樣式。建議最小也要用到 3px 的圓角。

③ 內(nèi)邊距

內(nèi)邊距能夠擴大按鈕的可點擊范圍，幫助用戶更容易點擊按鈕。一個好的設計經(jīng)驗是把按鈕的水平內(nèi)邊距設計成垂直內(nèi)邊距的 2 倍。當然，你也可以根據(jù)你設計的實際情況做適當調(diào)整，規(guī)矩不是死的。

④ 投影

我們使用投影來表明特定的狀態(tài)。按鈕必須看起來是在頁面的最上方，所以保持平滑的投影并且使用柔和的顏色。建議使用與按鈕接近的顏色然后降低透明度，這樣會使得你的投影看起來更加自然。

按鈕的投影使用和按鈕一樣的色值

⑤ 填充

無論我們使用純色還是漸變色，我們都希望確保按鈕對用戶來說是便于理解的。另外，為按鈕選擇的顏色必須反饋相匹配的顏色。比如當你設計一個紅色的保存按鈕時，會讓用戶猶豫能不能點。

⑥ 文字

與顏色類似，你也希望用到的文本內(nèi)容能夠確保用戶易于閱讀。在一個按鈕上使用最長不超過 5 個單詞（重要按鈕使用 1-3 個單詞）。

⑦ 操作

按鈕可以根據(jù)交互時執(zhí)行的操作類型來進行分類，分為 3 類：

1. 主要按鈕
2. 次要按鈕
3. 第三次要按鈕

⑧ 狀態(tài)

也可以從另一個方面來考慮按鈕的設計樣式。最主要的按鈕狀態(tài)包括以下這 6 種：

1. 默認態(tài)
2. 點擊態(tài)
3. 焦點態(tài)
4. 不可點擊態(tài)
5. 活動態(tài)
6. 等待態(tài)

二、復選框

復選框控件是指用戶可以在一個列表中能同時選擇多個選項。

最佳規(guī)范

① 當你在復選控件中有非常多的選項時，給這些選項分組是一個很好的分類方法。

② 雖然可能已經(jīng)為用戶創(chuàng)建了復選框時勾選多個選項的模式，但選項題目上準確顯示可多選對用戶的實際選擇也很有用。比如舉個例子，在一個復選題中，如果我們問"你喜歡哪些書？"而不問"你喜歡哪本書？"，得到的答案很可能是完全不同的，這是因為我們知道用戶很可能會多選。

③ 通過允許用戶點擊標簽本身來檢查選項來增加可用性。

三、單選按鈕

復選框是告訴用戶這個列表中有多個選項可以選擇，而單選按鈕則告訴用戶只能選擇一個選項。

最佳規(guī)范

① 類似于復選框，如果你有一個長長的選項列表的話，記得把它們進行分組，這樣讓用戶更容易選擇。

② 提供一個默認選項。用戶可以自行選擇其他選項，但如果這個默認選項就是用戶所希望的，就可以替他省事了。

③ 增加單選框可用性的方法是讓用戶能夠在點擊這個選項標簽時就能選中（擴大點擊范圍）。

四、切換控件

通常被用在開關(guān)選項中，讓用戶可以輕松地選擇這 2 個選項。

最佳規(guī)范

① 切換按鈕一般都有一個默認值。用戶可以決定是否需要改變切換狀態(tài)。

② 當用戶與切換按鈕交互時，對于結(jié)果的影響應該是立即生效的，而不必點擊保存。

五、輸入框

簡單說，輸入框就是讓用戶能夠輸入文字。雖然設計樣式可能不同，但它們都應該顯示一個標簽。

最佳規(guī)范

① 始終顯示標簽，這樣用戶隨時都能知道填了什么選項。如果僅僅在輸入框中顯示標簽，那么當用戶輸入時，這個標簽會被隱藏。所以，在輸入框外使用要有一個標簽提示。

② 保持標簽簡潔且有代表性。

③ 顯示提示語，確保文本內(nèi)容能夠讓用戶填寫正確的信息。

六、下拉列表

類似于單選按鈕，下拉列表僅允許用戶在同一個時間只能選擇一個選項。事實上，它們是可擴展的，本質(zhì)上就是一個緊湊型的單選按鈕。

最佳規(guī)范

因為它們本質(zhì)上是一個緊湊型的單選按鈕，所以當不是真正必要的時候，展開選擇或許更快，盡量避免使用。

七、下拉復選框

類似于復選框，它也允許用戶同時選擇多個選項。

最佳規(guī)范

如果你有一個長的列表選項，記得給它們分組便于用戶更容易選擇。

八、下拉按鈕

本質(zhì)上，下拉按鈕是由一個按鈕組成，當單擊下拉按鈕時，將顯示不同的列表內(nèi)容。

最佳規(guī)范

① 記得給選項增加懸停效果，以顯示用戶可以通過單擊導航到另一個頁面。

② 在按鈕的右側(cè)加上一個單獨的圖標，告訴用戶它還有隱藏的下拉菜單。

九、滑塊

滑塊允許用戶更改或設置一個值

最佳規(guī)范

① 只在需要的時候使用滑塊，當范圍對用戶來說比精確值更重要的時候。

② 注意控件點擊范圍，確保用戶可以更容易的選擇不同的值。

總結(jié)

以上提到的這些控件，在我們?nèi)粘ＴO計工作中常常會被用到，希望你能了解這些正確使用的規(guī)范和指導原則，以便為用戶帶來最大價值。

作者：彩云譯設計