9種常用UI界面中的控件規範，UI設計師要學的哦！

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

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

我們需要關注的輸入控件包括以下這幾個：

• 按鈕
• 多選
• 單選
• 切換
• 文本輸入框
• 下拉選擇
• 列表框
• 下拉按鈕
• 滑塊

1. 按鈕

按鈕向用户隱喻當他們按下/點擊時將觸發一個操作。

最佳規範

1）按鈕結構

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

2）按鈕圓角

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

3）內邊距內邊距能夠擴大按鈕的可點擊範圍，幫助用户更容易點擊按鈕。 一個好的設計經驗是把按鈕的水平內邊距設計成垂直內邊距的2倍。 當然，你也可以根據你設計的實際情況做適當調整，規矩不是死的。

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

按鈕的投影使用和按鈕一樣的色值5）填充 無論我們使用純色還是漸變色，我們都希望確保按鈕對用户來説是便於理解的。另外， 為按鈕選擇的顏色必須反饋相匹配的顏色 。比如當你設計一個紅色的保存按鈕時，會讓用户猶豫能不能點。

6） 文字與顏色類似，你也希望用到的文本內容能夠確保用户易於閲讀。 在一個按鈕上使用最長不超過5個單詞（重要按鈕使用1-3個單詞） 。

7）操作按鈕可以根據交互時執行的操作類型來進行分類，分為3類：

• 主要按鈕
• 次要按鈕
• 第三次要按鈕

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

• 默認態
• 點擊態
• 焦點態
• 不可點擊態
• 活動態
• 等待態

2. 複選框

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

最佳規範

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

2）雖然可能已經為用户創建了複選框時勾選多個選項的模式，但 選項題目上準確顯示可多選對用户的實際選擇也很有用 。比如舉個例子，在一個複選題中，如果我們問“你喜歡哪些書？”而不問“你喜歡哪本書？”，得到的答案很可能是完全不同的，這是因為我們知道用户很可能會多選。3）通過允許用户點擊標籤本身來檢查選項來增加可用性。

3. 單選按鈕

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

最佳規範

1）類似於複選框，如果你有 一個長長的選項列表的話，記得把它們進行分組 ，這樣讓用户更容易選擇。2）提供一個默認選項。用户可以自行選擇其他選項，但如果這個默認選項就是用户所希望的，就可以替他省事了。3）增加單選框可用性的方法是讓用户能夠在點擊這個選項標籤時就能選中（擴大點擊範圍）。

4. 切換控件

通常被用在開關選項中，讓用户可以輕鬆地選擇這2個選項。

最佳規範

1）切換按鈕一般都有一個默認值。用户可以決定是否需要改變切換狀態。2）當用户與切換按鈕交互時， 對於結果的影響應該是立即生效的 ，而不必點擊保存。

5. 輸入框

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

最佳規範

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

2）保持標籤簡潔且有代表性。

3）顯示提示語，確保文本內容能夠讓用户填寫正確的信息。

6. 下拉列表

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

最佳規範

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

7. 下拉複選框

類似於複選框，它也允許用户同時選擇多個選項。

最佳規範1）如果你有一個長的列表選項，記得給它們分組便於用户更容易選擇。

8. 下拉按鈕

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

最佳規範1）記得給選項增加懸停效果，以顯示用户可以通過單擊導航到另一個頁面。2）在按鈕的右側加上一個單獨的圖標，告訴用户它還有隱藏的下拉菜單。

9. 滑塊

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

最佳規範

1）只在需要的時候使用滑塊， 當範圍對用户來説比精確值更重要的時候 。2）注意控件點擊範圍，確保用户可以更容易的選擇不同的值。

總結

以上提到的這些控件，在我們日常設計工作中常常會被用到，希望你能瞭解這些正確使用的規範和指導原則，以便為用户帶來最大價值。如果你有學到， 記得分享到你的朋友圈哦~

原文：http://medium.com/@ux-notes/ui-elements-input-controls-dbd2d056cd6b

作者：UX Notes

譯者：彩雲Sky

本文翻譯已獲得作者的正式授權（授權截圖如下）