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）注意控制元件點選範圍，確保使用者可以更容易的選擇不同的值。

總結

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

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

作者：UX Notes

譯者：彩雲Sky

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