序
不多想踱稍，還是兩天一篇的去干。既然說跨出這步悠抹，那就好好寫了珠月。
前兩篇寫的是輸入框和單選按鈕。這次說表單組件中的復選框楔敌，下一次是下拉列表啤挎。
交互設計師、90后梁丘、不喜歡寫文章侵浸，是我的三個TAG旺韭，這是第三篇氛谜。
前言
上一篇說單選按鈕的時候提到復選框需要用戶做出“是”或“否”回答時，可以使用復選框区端，那這次就說一下復選框的使用值漫。
目錄
· 復選框組成
· 復選框原則
· 縱向放置復選框
· 容易理解的選項
· 復選框需要更容易點擊
· 一個選項情況下，還能用開關(guān)
· 開關(guān)組成
· 開關(guān)的狀態(tài)
· 容易理解的語句
· 開關(guān)的狀態(tài)
· 如何使用復選框和開關(guān)
·?合理動效的加持
· 最后
復選框組成
復選框[Check Box]由一個方形的選擇框和選項組成织盼，復選框在選中狀態(tài)下有標記杨何。
復選框原則
復選框用在有多個選項酱塔，用戶可以任意選擇(或不選)多個(或一個)選項。包含復選框的選擇組危虱，每個選項都是彼此獨立存在的羊娃。和單選按鈕原則相反，選擇一項后不會反選其他選項埃跷。
縱向放置復選框
這條規(guī)則對于單選按鈕和復選框都適用蕊玷，在布局上盡量嘗試垂直放置復選框，每一行放置一個復選框弥雹。
和單選按鈕一樣水平放置會遇到相同的問題：水平放置的復選框在整個表單中眼動掃描的效率會下降垃帅。如果一定要水平放置復選框，一定要注意選擇框和選項間的關(guān)聯(lián)性問題剪勿，不然會發(fā)生選擇框和其兩邊的哪一邊選項有關(guān)聯(lián)的誤解贸诚，那完成表單的效率就會大大降低。
容易理解的選項
設計復選框時也需要注意厕吉，選項的描述也很重要酱固，這樣用戶就能在選擇前有選擇后的預期。盡量不要使用如“不要給我發(fā)票”這樣的否定語句头朱。若這樣設計的話選擇難度就上升了媒怯，結(jié)果就是用戶不得不再去修改選擇狀態(tài)來理解兩個選項后，再去滿足自己的目的髓窜。
復選框需要更容易點擊
和單選按鈕一樣復選框也需要注意：根據(jù)費茨定律扇苞，將會很難被點擊。需要增加點擊熱區(qū)的大小寄纵，讓用戶不僅僅只能點擊選擇框才可以選擇鳖敷，點擊選項(詞)也可以觸發(fā)選擇。這樣點擊熱區(qū)的大小就顯得極為重要了程拭。
使用指點設備到達一個目標的時間定踱，與當前設備位置和目標位置的距離（D）和目標大小（S）有關(guān)恃鞋。
——Wikipedia(費茨法則)
一個選項情況下崖媚，還能用開關(guān)
類似于實際生活中臺燈的開關(guān)。開關(guān)由一個能打開/關(guān)閉能做切換操作且互斥的兩個選項組成恤浪。當選擇其中一個選項時就會立即執(zhí)行畅哑。
開關(guān)組成
單選按鈕可以被看作是單個的，易懂版的復選框水由。復選框和開關(guān)[Switches]不同之處在于復選框可以說明選擇狀態(tài)荠呐，而開關(guān)就可以說明操作狀態(tài)。
如上圖開關(guān)就可以很明確的傳達WiFi已處于打開狀態(tài)，若使用復選框則導致用戶得去思考WiFi當前已經(jīng)打開了泥张？還是要取消選中后才打開呵恢？
開關(guān)的狀態(tài)
使用開關(guān)做設計時，最需要注意的一點是開關(guān)的狀態(tài)媚创。
如上圖“ON”表達的是當前狀態(tài)渗钉？還是觸發(fā)操作后是“ON”的狀態(tài)？這里的“ON”究竟指的是狀態(tài)ON(形容詞)钞钙？還是你需要觸發(fā)的操作ON(動詞)晌姚？
不要讓用戶產(chǎn)生疑問，不要將描述文字放在開關(guān)內(nèi)或高亮“打開狀態(tài)”歇竟，那這樣就可以傳達正確的信息給用戶了挥唠。
容易理解的語句
因為開關(guān)的特性，就能很清楚的知道狀態(tài)(打開/關(guān)閉)焕议，所以標簽文案就顯得很重要了宝磨，只需要說明開關(guān)控制什么內(nèi)容就行。盡量不要使用否定句盅安！
假設上左圖：當開關(guān)處于關(guān)閉狀態(tài)唤锉，是不是會覺得已經(jīng)就是“不允許所有人查看我的照片”呢，事實上還是可以看到你的照片别瞭。因為標簽文案是否定句窿祥，再加上按鈕關(guān)閉狀態(tài)，那"雙重否定"就表示肯定了蝙寨！所以上右圖才最清楚表達"不允許所有人查看我的照片"晒衩。
如何使用復選框和開關(guān)
復選框更多使用在表單中，僅僅代表當前的選擇狀態(tài)墙歪。當只有點擊“提交”后才可能知道選擇(未選擇)的不同听系。
開關(guān)按鈕更多使用在設置中，在用戶切換后就立刻顯示出不同了虹菲，而不是非得要等用戶點擊“提交”后才看到變化靠胜。正如我們在現(xiàn)實生活中對于開關(guān)的所預期一樣(例如我們摁下打開臺燈開關(guān)，臺燈就馬上亮了)毕源。
合理動效的加持
如果可以在復選框和開關(guān)切換時加入一些動效浪漠，帶來一種清晰的視覺反饋。愉悅用戶也提升用戶體驗霎褐，而不單單只是兩張(一張selected和一張unselected)的圖片做切換址愿。
最后
寫到這會發(fā)現(xiàn)不管單選按鈕、復選框瘩欺、開關(guān)他們需要注意的地方基本差不多必盖，因為的確是這樣。每一個組件的原則不盡相同俱饿，如果能夠妥善利用他們的原則歌粥，那目的是相同的：表單只是個收集用戶信息的方式，用戶需要的是高效愉快的完成填寫拍埠。
參考書：《Web表單設計》失驶、《交互設計精髓》
以上的觀點從我個人總結(jié)出發(fā)，雖說文筆拙劣枣购，但是如果你有不同的意見嬉探，歡迎交流～
又是底部不浪費流量，能做廣告的地方啦
