@可樂橙_ColaChan?：創建表單時，交互設計師總是會面臨一個選擇，選用哪種UI元素來表示可選項的操作。可選項可以用勾選框、開關、單選框和下拉菜單表示。選擇得當的話，任何一種都非常出色。本文中，我們重點關注勾選框和開關，并總結了7個應該跳過的坑。

當然，我們每個人都有自己的法則。但是，在選用可選項控件時，仍然要多加考慮。

勾選框

勾選框用在一系列選項中，用戶可以選擇任意數量，包括0個、1個，或者許多個。換言之，每個勾選框在列表中都是相互獨立的，勾上一個框并不會取消其他選項。

△ 帶有標簽的勾選框

開關

開關組件是在仿照物理開關，讓用戶打開或關閉某個項目。

△ 開關提供了兩種簡單直接的對立選項

開關組件通常用于表現一個動作（例如開始或停止某個操作）。它類似于電燈開關：

△ 開關通常用在電燈開關上

勾選框和開關的最佳實踐

使用標準的視覺表現

勾選框應當是一個小方框，選中時有一個勾，或者一個叉。

△ 選中和未選中的勾選框組件。圖片來源：Material Design

開關應當看起來有開和關的狀態

△?選中和未選中狀態的開關組件。圖片來源：Material Design

用戶在操作各種控件時，應當提供清晰的視覺反饋。細微的動畫能讓體驗更細致——在移動應用中尤其如此，

△?iOS7/8的開關按鈕。來源：Dribbble

縱向排列列表

縱向展示列表，每行一個選項。這對于開關和勾選框都有效。如果一定要橫向排列，一行有多個選項，就要調整好按鈕和標簽的距離，哪個選項對應哪個標簽清晰明了。下面的例子中，元素之間的距離都太近了。

△?很難確定選項4對應的到底是哪個選框

開關的當前狀態應該在控件外面

設計開關時，你應該避免狀態和操作的歧義。我們以iOS6的開關設計為例，注意看寫著ON的藍色狀態按鈕。

并不能確定標簽（例子中是“ON”）是指當前狀態，還是按下的操作

你能判斷按鈕當前是開著的嗎，或者拖動滑塊、點擊、點按時會開啟？“ON”在這里是個狀態（名詞）還是動作（動詞）？并不清楚。

不應該讓用戶感到困惑，區分出操作和狀態非常重要。實際上，高亮顯示當前狀態，能夠讓它更加友好。

文字顏色表明了現在的狀態（亮起的是ON）

勾選框使用肯定的文案

使用肯定、有效的文案作為勾選框的標簽，用戶就很清楚如果勾上選框會發生什么。避免“不要給我發郵件”這樣的否定文案，這就意味著用戶要勾上選框來阻止某些事發生。

勾選框永遠都應該使用肯定的指令，不能用否定文案，例如“請勿……”

勾選框使用Label標簽，增大操作區域

所有的勾選框都有標簽，但并非都使用label標簽。勾選框本質上很小，但是根據費茨定律，它們就很難點擊或者點按。要增大操作區域，讓用戶在點擊或點按標簽與相關文字時就能選中選項，而不僅僅是那個小方框。

△?讓用戶通過點擊方框或它的標簽來選中選項

勾選框只用來改變設置，不能作為操作按鈕

作為一個二元選擇，勾選框和開關的主要區別，是勾選框是狀態，而開關是操作。如果一個操作適合用物理開關表示，那么開關可能就是最適合的控件。

下面的例子很明顯，在開關中，無線網絡是開著的。但在勾選框里，用戶還需要思考無線網絡是否開啟，是否需要勾選這個框來開啟無線網絡。

△?用開關來開啟或關閉服務或硬件組成，例如WIFI

勾選框和開關的提交操作

勾選框的操作可以延后（例如作為表單的一部分），但開關的操作應當立即觸發。

良好的用戶體驗，是立即改變開關對應的設置項，而不是點按了“保存”或返回上個界面之后才保存。我們在現實生活中對開關的期望就是如此（例如我們知道，按下開關燈立刻就亮了）。

△?iOS中的開啟WIFI

當用戶必須執行額外步驟才能讓改變生效時，使用勾選框。

當用戶必須點擊“提交”或“下一步”按鈕，修改才能生效時，選用勾選框

結論

設計界面時，交互元素的選擇要保持一致、可預期。遵循設計標準，能讓用戶更好預測控件的功能、如何操作。相反，違背標準會讓界面感覺很脆弱——好像會毫無預兆發生任何事情。

非常感謝！

「關于細節」

細節有多重要？在這篇《如何通過設計提升高達12%的注冊轉化率？》的文章里，它提升了12%的注冊轉化率。

細節有多好用？在這篇《如何發郵件請求幫助，并獲得超高回復率？》的?文章里，它創造了幾乎百分百的郵件回復率。

細節有多難做？在這篇《提高用戶登錄體驗的5個細節》的文章里，你可以體會到打磨一個好用的登錄框究竟有多難。

細節的那些事兒：

夏洛克般的邏輯+超微妙的細節=這圖是P的！
《高手支招！怎樣分辨圖片是否被PS過》

最講究細節的網站中最厲害的設計師排名！
《超詳細！Dribbble上的業界頂級設計師及作品》

吐槽蘋果官網，任何一個細節都不會放過！
《給蘋果中國的公開信！一個設計師對蘋果官網的微吐槽》

原文地址：babich.biz
譯文地址：colachan.com
譯者：@可樂橙_ColaChan

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量160萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com