中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導讀：【多選框】是一個常用的交互設計組件，能幫助用戶勾選多個選項，是一項基礎的功能組件。本文作者圍繞【多選框】，提出了幾點設計要點，一起來看一下吧。

最近講了這么多交互設計組件，終于等到了要寫「Check Box 多選框」的時候。就小編自身而言其實蠻不想寫「多選框」這部分內容的，其原因有二：首先就小編自己做這么多年設計其實蠻討厭做多選類的需求，其中都是深坑真是坑了又坑；再者前幾篇組件短文當中已經把一些注意點都講的七七八八，這些類似點沿用到「多選框」身上也八九不離十。

但是本著處女座心態，漏點東西總覺得不太舒服，今天還是簡短的把「多選框」能想到的點寫一寫，希望各位看官賞臉。

一、「Check Box 多選框」的隱喻

經歷過讀書時代考試的同學們應該都對答題卡記憶猶新，其實它作為「Check Box 多選框」在物理世界當中的隱喻本體再適合不過了，兩者同時都兼有在一堆互斥的后選項當中選取一個或者幾個作為反饋答案的功能。（此靈感概念來源于Hozin老師）

二、「Check Box 多選框」的含義

1.「Check Box 多選框」交互定義

幫助用戶完成從若干個互斥的選項集合當中選取一個或者多個后選項任務的交互形式稱作為「Check Box 多選框」。

我們根據定義其實可以得出「Check Box 多選框」的兩個重要特質：

• 從多個后選項當中選擇，完成N選N的任務。
• 其實當后選項數量為一個時，「Check Box 多選框」還能當作開關使用（記住這點哦，以后還會重點講解）。

2.「Check Box 多選框」交互形態

「Check Box 多選框」的交互形態其實與「Radio button」比較相似，兩者的共同點都具有「選中」、「未選中」、「不可選」三態，但是「Check Box 多選框」比較獨特的是還存在一個「不確定」的狀態，往往在出現在父子構造的多選框當中。

3.「Check Box 多選框」視覺樣式

在尼爾森諾曼集團的官網文章當中特別指出「Check Box 多選框」應該使用標準的視覺表示。具體形式就是復選框應該是一個小方塊，選中時帶有復選標記。

https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/

當然負責視覺的設計師有想象力是好的，但是它獨有的視覺樣式已經存在超過20年，突然改變用戶心中的形象，應該不是個優雅的設計，強如微信設計團隊的視覺設計師也有一顆改變世界的心。

三、一些能想到的小竅門

由于前幾篇「radio button」「toggle」相關一些短文內講到的小技巧與「Check Box 多選框」多有重復，所以這里小編盡量再擠點干貨出來。

1. 關于「Check Box 多選框」的布局

當時在「手把手帶你重新認識Radio Button」一文當中提出單選按鈕最好從上往下排列后選項，其實在「Check Box 多選框」一般情況下，也是推薦垂直排列多個復選框，這樣更容易區分它們的狀態。

但是如果復選框數量有很多，那不斷往下拉也會讓用戶十分頭疼，在這種情況下我們完全可以用「Toggle Token」來替代使用「Check Box」，因為它的外在樣式造成了它橫向排列不會出問題，可以讓用戶很好的識別出后選項之間的差異。

2. 積極主動的標簽措辭

對復選框標簽使用積極主動的措辭，以便讓用戶清楚如果勾選復選框會發生什么。換句話說假如有一個選項是“不要給我發更多的電子郵件”那么用戶就會有一種被要挾之感，破壞了用戶體驗，同時這種情況往往在使用「single check box」場景下比較多出現。

這里肯定有人會問什么叫「single check box」請看下圖：

3. 擴大點選區域

本質上「Check Box 多選框」點擊區域很小，因此，根據菲茨定律，它們跟「radio button」一樣可能很難被點擊到。所以我們要要擴大目標點擊區域，讓用戶可以點擊一個選項（包括相關標簽），而不是點擊那個小方塊。

4. 「single check box」的開關屬性

在某些設計系統（比如蘋果macOS）之下會建議將「single check box」看作是一種首選項的控制開關，當總控制的「single check box」未選中時，相關的首選項都是不可用的，只有選中「single check box」時所屬的選項才能進行配置。

5. 合理時使用不確定狀態

在一些父子級復選框的框架中（比如樹形選擇器）應準確反映其狀態，例如當所屬的幾個子復選框并非都處于同一狀態時，父級復選框應該處于「不確定狀態」（由破折號反映）。

四、關于「選擇」這件事

這里我們先拋開「check box」這個交互組件，單純的來談下如果一個交互組件或者交互模式要滿足用戶完成「選擇」這個任務需要具備幾個要素（概念來源于Hozin老師）。

• 對于「未選中」的選項易于識別
• 從「未選中」到「選中」到過程易于操作
• 「已選中」的選項容易識別
• 方便用戶取消「已選中」
• 「不可選」的選項容易讓用戶判別并了解原因

當一個組件滿足以上五點時才能算得上是一個好用的易于完成選擇任務的交互組件或者交互模式。

五、文末小結

對于「Check Box 多選框」的介紹到這里算是結束了，它很多的注意點與竅門與「radio button」「switich」十分雷同，所以這里小編就不展開過多贅述，如果有不太清楚的小伙伴可以去翻看我之前的「手把手帶你重新認識Radio Button」與「為什么總監說我連開關組件都用不好」兩篇文章。同時最后留個小問題，各位觀眾老爺們如果用戶要完成多選任務的話，有哪些交互組件或者交互模式是符合上述五點的要求并且可以讓用戶優雅的完成多選任務？有想法的朋友可以在評論區留言哦。

相關知識推薦：手把手帶你重新認識Radio Button

作者：月亮與六便士；公眾號：月亮體驗設計坊

本文由 @月亮與六便士 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來Pexels，基于CC0協議。