UX 設計之——復選框和開關按鈕

當設計表單時，交互設計師常常不得不面對一個問題，就是要選擇出一個合適的界面元素好標示出從多個選項中做出特定選擇這種交互。當然，我們都有可能遵循某種既定的規則。無論如何，在做出這個選擇時我們都應該牢記一些注意事項。

要實現選擇特定的選項，我們可以選用復選框、開關按鈕、單選按鈕或者下拉框等控件。從中選擇出最合適的則往往能發揮巨大作用，在本文中，我們將關注復選框和開關按鈕。

一、復選框

復選框一般用在有多個選項時，用戶可以做出零個、一個或者任意多個選擇。換句話說，復選框控件中的每個選項都是彼此獨立的，選擇一項后并不會排斥其他項。

復選框及其標簽

二、開關按鈕

開關按鈕代表在物理上的ON/OFF狀態間進行切換。

開關支持兩個簡單的、完全對立的選擇

開關按鈕一般用來來標示一個動作（比如開始或停止一件事），其作用類似于實際生活中的燈控按鈕。

開關被普遍用在對點燈的控制上

三、復選框和開關按鈕的最佳實例

1、使用標準的可視化模型

一個復選框應該是一個在選中狀態下有標記符的小正方形。

選中和未選中狀態下的復選框

一個開關按鈕應該看起來確實如一個ON/OFF類的開關。

選中和未選中狀態下的開關按鈕

你應該給和用戶產生交互的控件一個清晰的視覺反饋效果。精妙的動畫能夠讓用戶感覺到你在設計上的投入（愉悅用戶），這對那些在現實中有映射的實體的控件尤為重要，即使這些控件好像跟用戶間還隔著一層玻璃屏。

2、最好垂直布局你的各個選項

要試著讓你的多個選項間垂直排列，每行顯示一個。這條規則對復選框和開關按鈕都適用。如果你必須（非得）使用水平方向排列多個選項，請務必確保使按鈕跟標簽間的距離合適，好讓用戶能區分出哪個按鈕對應哪個標簽。以下的例子中，元素間距太近：

很難看明白哪個按鈕和哪個標簽是一組

3、開關按鈕的當前狀態應該標示在其本身外面

設計開關按鈕時，重要的一點就是要必然按鈕狀態表達含糊不清。我們拿iOS6中的開關設計來舉例：

不能清楚的表達“ON”是當前狀態還是觸發的動作

你能明白其中的“ON”表示的是當前狀態還是移動、點按之后才是“ON”狀態？這里的“ON”究竟指的是狀態（形容詞）還是你需要觸發的動作（動詞）？

你不應該使用戶產生疑惑，而需要將狀態和動作區分開來。事實上，這個設計能通過高亮顯示當前狀態向用戶傳達出更強的友好性。

文本的顏色突出了當前狀態

4、請使用正向措辭表述復選框的標簽

請使用正向措辭表述復選框的標簽，這樣用戶就能夠清楚的認識到選中該選項后會發生什么。避免使用如“不要再發送郵件給我”這樣的否定語，這意味著用戶不得不去修改選中狀態來判定前后的變化。

復選框標簽應該使用正向措辭，不要用像“不要...”這樣的語句

5、應該使標簽部分也可點擊

所有的復選框都標簽，但并非所有的標簽部分都作為選中熱區。復選框本身很小，按照費茨定律，它們很難被點按到，因此，為了擴大可點區域，應該將標簽部分也歸入可點的熱區部分。

讓用戶能夠通過點擊復選框本身或標簽達到選中效果

6、復選框僅用來修改設置項，不作為操作按鈕

對一個二元選項來說，一個復選框和一個開關按鈕最大的不同在于前者用于標示狀態，后者用來指明動作。如果一個物理上的實體開關能執行這個動作，那開關按鈕便可能是最好的控件選擇。

在下面的例子中，開關按鈕很清晰的表明WiFi處于打開狀態，而使用復選框則導致用戶不得不去思考究竟當前的WiFi已經打開還是要取消選中后才對。

使用開關按鈕來切換服務或者硬件組成

7、伴隨復選框和開關按鈕的交互

要表明復選框選中前后帶來的影響（比如復選框作為表單的一部分，你在點擊“提交”表單后才可能看到選中與否的不同），你可以延遲一定的步驟。 然而對于一個開關按鈕，則應該在用戶切換后立刻顯示出不同，而不是非得要等到用戶點擊“保存”、或回到前一個頁面才看到所有變化。這正如我們在現實生活中也有對于這類開關的期望一樣（例如我們都知道在將開關打開后電燈立刻就亮了）。

在iOS中打開WiFi

當用戶需要執行幾個動作后才能看到因選項改變導致的不同時，可以考慮使用復選框。

用戶必須在點擊“submit”后才能看到選項的選中與否造成的影響

四、結論

設計用戶界面時，盡量保證你所選擇的界面元素具有良好的一致性和可預見性。如果選擇遵循設計標準，你的設計自然能夠增強用戶對控件功能和操作方法的可預見性。相反地，違反標準的設計會導致這個界面破裂不堪——就好比如果不向用戶發出預警，任何事情都可能發生一樣。

 

 

來自：https://mp.weixin.qq.com/s?__biz=MzA4OTI4NDY5Ng==&mid=2472320530&idx=1&sn=e7876f5062f4d1a0bef31c1948676873&chksm=86b57725b1c2fe336114b0979b1c200949095fa56d7ebdbf856052c4428724967e830254ab73#rd