UX設計之——核取方塊和開關按鈕

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

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

一、核取方塊

核取方塊一般用在有多個選項時，使用者可以做出零個、一個或者任意多個選擇。換句話說，核取方塊控制元件中的每個選項都是彼此獨立的，選擇一項後並不會排斥其他項。

二、開關按鈕

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

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

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

三、核取方塊和開關按鈕的最佳例項

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

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

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

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

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

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

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

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

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

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

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

4、請使用正向措辭表述核取方塊的標籤

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

5、應該使標籤部分也可點選

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

6、核取方塊僅用來修改設定項，不作為操作按鈕

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

在下面的例子中，開關按鈕很清晰的表明WiFi處於開啟狀態，而使用核取方塊則導致使用者不得不去思考究竟當前的WiFi已經開啟還是要取消選中後才對。

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

7、伴隨核取方塊和開關按鈕的互動

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

在iOS中開啟WiFi

當使用者需要執行幾個動作後才能看到因選項改變導致的不同時，可以考慮使用核取方塊。

使用者必須在點選“submit”後才能看到選項的選中與否造成的影響

四、結論

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