英文 | https://uxplanet.org/how-to-design-better-checkbox-radio-and-toggle-buttons-197b85fa0820
翻譯 | 楊小二
選擇控件使使用者可以完成涉及選擇的任務，例如選擇選項，打開或關閉設定或添加或删除項目。
單選按鈕不是複選框。複選框不是切換。切換不是單選按鈕。這些元素中的每一個都有不同的含義，并用于不同的目的。
尺碼
使用正确大小的單選按鈕，複選框和切換按鈕，以實作更好的視覺實作，效率和可讀性。
單選按鈕
單選按鈕是允許使用者選擇在其相應的文本标簽中寫入的值的元件。與複選框不同，使用者一次隻能從一個組中選擇一個單選按鈕。
最好将它們用于2-4個元素。他們隻允許使用者選擇1件東西，而不是更多。
記住這些事情：
-
- 單選按鈕始終垂直列出。
- 單選按鈕的标簽首字母大寫。
複選框
複選框是允許使用者選擇寫在其相應文本标簽中的值的元件。使用者可以同時從一個組中選擇多個内容。
一個複選框控制有三種狀态：未選中狀态，選擇和不确定的。
當可以選擇多個選項時，請使用複選框，并将複選框的标簽内容首字母大寫。
開關按鈕
開關按鈕是一種界面元素，通過激活或取消激活，可以觸發螢幕上的即時操作。
但是，不需要使用CTA按鈕進行确認。使用開關按鈕進行激活。
注意水龍頭區域
單選按鈕，複選框和開關按鈕是所有UI設計中最小的互動式元素之一，是以它們需要有一個易于通路的點選區域。
讓使用者不僅通過單擊或點選該小方塊，還可以單擊标簽或相關聯的單詞來選擇一個選項。
顔色和不同狀态
始終在不同的條件下使用不同的顔色，并嘗試使用漸變顔色以獲得更好的視覺吸引力。
結論
如果可能，請始終使用垂直顯示選項清單。水準對齊的選項可能很難閱讀且難以區分。如果必須以水準方式顯示清單，請務必密切注意項目與其相應複選框之間的距離以及清單項目之間的間隔。
學習更多技能
請點選下方公衆号