APP表單中關于勾選框和(hé)開關的(de)設計

 

在APP開發中，表單是經常要碰到的(de)界面，在創建表單時(shí)，交互設計師總是會面臨一個(gè)選擇，選用(yòng)哪種UI元素來(lái)表示可(kě)選項的(de)操作。今天我們來(lái)討(tǎo)論一下(xià)。

可(kě)選項可(kě)以用(yòng)勾選框、開關、單選框和(hé)下(xià)拉菜單表示。選擇得(de)當的(de)話(huà)，任何一種都非常出色。本文中，我們重點關注勾選框和(hé)開關。

勾選框用(yòng)在一系列選項中，用(yòng)戶可(kě)以選擇任意數量，包括0個(gè)、1個(gè)，或者許多(duō)個(gè)。換言之，每個(gè)勾選框在列表中都是相互獨立的(de)，勾上一個(gè)框并不會取消其他(tā)選項。
開關組件是在仿照(zhào)物(wù)理(lǐ)開關，讓用(yòng)戶打開或關閉某個(gè)項目。
開關提供了(le)兩種簡單直接的(de)對(duì)立選項
開關組件通(tōng)常用(yòng)于表現一個(gè)動作(例如開始或停止某個(gè)操作)，它類似于電燈開關。
勾選框應當是一個(gè)小方框，選中時(shí)有一個(gè)勾，或者一個(gè)叉。

縱向展示列表，每行一個(gè)選項。這(zhè)對(duì)于開關和(hé)勾選框都有效。如果一定要橫向排列，一行有多(duō)個(gè)選項，就要調整好按鈕和(hé)标簽的(de)距離，哪個(gè)選項對(duì)應哪個(gè)标簽清晰明(míng)了(le)。

開關的(de)當前狀态應該在控件外面，設計開關時(shí)，你應該避免狀态和(hé)操作的(de)歧義。我們以iOS6的(de)開關設計爲例，注意看寫著(zhe)ON的(de)藍色狀态按鈕。

并不能确定标簽(例子中是“ON”)是指當前狀态，還(hái)是按下(xià)的(de)操作。
你能判斷按鈕當前是開著(zhe)的(de)嗎，或者拖動滑塊、點擊、點按時(shí)會開啓?“ON”在這(zhè)裏是個(gè)狀态(名詞)還(hái)是動作(動詞)?并不清楚。
不應該讓用(yòng)戶感到困惑，區(qū)分(fēn)出操作和(hé)狀态非常重要。實際上，高(gāo)亮顯示當前狀态，能夠讓它更加友好。

文字顔色表明(míng)了(le)現在的(de)狀态(亮起的(de)是ON)
勾選框使用(yòng)肯定的(de)文案
使用(yòng)肯定、有效的(de)文案作爲勾選框的(de)标簽，用(yòng)戶就很清楚如果勾上選框會發生什(shén)麽。避免“不要給我發郵件”這(zhè)樣的(de)否定文案，這(zhè)就意味著(zhe)用(yòng)戶要勾上選框來(lái)阻止某些事發生。

勾選框永遠(yuǎn)都應該使用(yòng)肯定的(de)指令，不能用(yòng)否定文案，例如“請勿……”
勾選框使用(yòng)Label标簽，增大(dà)操作區(qū)域。
所有的(de)勾選框都有标簽，但并非都使用(yòng)label标簽。勾選框本質上很小，但是根據費茨定律，它們就很難點擊或者點按。要增大(dà)操作區(qū)域，讓用(yòng)戶在點擊或點按标簽與相關文字時(shí)就能選中選項，而不僅僅是那個(gè)小方框。

讓用(yòng)戶通(tōng)過點擊方框或它的(de)标簽來(lái)選中選項
勾選框隻用(yòng)來(lái)改變設置，不能作爲操作按鈕
作爲一個(gè)二元選擇，勾選框和(hé)開關的(de)主要區(qū)别，是勾選框是狀态，而開關是操作。如果一個(gè)操作适合用(yòng)物(wù)理(lǐ)開關表示，那麽開關可(kě)能就是最适合的(de)控件。
下(xià)面的(de)例子很明(míng)顯，在開關中，無線網絡是開著(zhe)的(de)。但在勾選框裏，用(yòng)戶還(hái)需要思考無線網絡是否開啓，是否需要勾選這(zhè)個(gè)框來(lái)開啓無線網絡。

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