交互水深 04 | 選擇設計中的五個要點【單選小坑，多選大坑】（上篇）

前3篇文章都是為了鋪墊後面這些乾貨！可能會顛覆你對交互設計的認知。

『選擇』的藥方

人生，因為有選擇而痛苦；沒有選擇，就沒有痛苦；界面之上，猶是如此。

作為交互設計師，幾乎每天都在和『單選』和『多選』打交道，二者的本質如下所述：

每條選擇必須有數量為N>=2個的選項；

每個選項在某個時刻狀態，只能是以下四種之一：『未選可用』，『已選可用』，『未選不可用』，『已選不可用』；

單選：從N個候選項目中，確認唯一的a項目被選中；

多選：從N個候選項目中，確認其中m個項目被選中（N>=m>=1）；

如何減輕用戶『選擇』的痛苦呢？Hozin認為必須從五個方面同時實現便捷高效，才是合格的設計：

辨識未選：讓『未選可用』一目了然；

操作選擇：把『未選可用』變成『已選可用』輕鬆便捷；

辨識已選：讓『已選可用』一目了然；

取消選擇：把『已選可用』變成『未選可用』輕鬆便捷；

明示不可選：透露『不可用』的原因，並了解如何讓它們『可用』；

以上五點看似簡單，實則暗藏殺機，一不小心就掉進泥潭。

你認識『選擇』嗎？

下拉菜單、收音機按鈕、複選框……這些有名有姓的界面元素，都是為了選擇而生的呀！難道需要重新認識『選擇』？

的確，某些界面元素天生帶有『選擇』屬性；但是，『選擇』並非只能由此類元素構成。

比如，某些安卓版APP當中，在『首頁』按一下手機的Back物理鍵會出現這樣一個Toast效果：

此時用戶可選操：再按一下退出，或者等待Toast消失（就不退出了）。這明明就是一個『選擇』，並且等效下面的設計：

大家再看看IOS版本微信的這個隱藏的小功能，難道不是『選擇』嗎？

看看安卓版微信的等效設計，這就是個『選擇』！

學習和精進交互設計的過程中，不要把眼光只放在所謂『控制項/組件』上面，如果只是閱讀官方文檔，而不看清交互的本質，只能照貓畫虎，無法活學活用。達不到活學活用，談何創新？交互設計師的存在就變得毫無意義。

『選擇』是什麼呢？Hozin認為它是個抽象概念，具體來說，就是一系列『交互設計模式』的集合，這些『模式』的共同特點是：從選項中確認其中的一個或者某幾個。當然，關於交互的『元素』『控制項/組件』『模式』『框架』，它們含義和區別未來將另有篇章進行介紹。

『選擇』是『用戶任務』嗎？

不一定！要看設計師如何界定用戶任務的『顆粒度』（詳見《交互水深 03 | 理解 [ 用戶任務 ] 的 [ 顆粒度 ]》），按照『一個界面只有一個用戶任務』的原則，在某些設計中，選擇就是一個用戶任務，比如下圖：

大多數在表單當中的選擇，只是操作，並非『用戶任務』，比如下圖：

『選擇』是『功能』嗎？

不一定！需要具體問題具體分析，選擇背後如果是對數據的CRUD操作，那麼它就是個功能（詳見《交互水深 02 | 設計師對 [ 功能 ] 應該有怎樣的認知？》）。

下圖例子中，用戶在選擇之後，將產生數據操作，視為一種功能。

下圖例子中，選擇只是個操作，它並沒有直接產生數據變化，『馬上開始』才是功能按鈕。

認知『等效設計』

用戶在絕大多數界面的絕大多數時間，他們的絕大多數痛點，都集中在『選擇』類操作上，甚至連最基礎的導航系統，本質上也是一種『選擇』！

交互設計師處理此類問題必須獨具慧眼，從認識『等效設計』開始，逐步培養具備『形式變換』的能力。（Hozin寫過《交互設計中的「同形異構」與「同構異形」》）

蒜苗提過一個有趣的問題：「網頁設計中，單選必須用Radio不能用Checkbox嗎？」

Hozin回答：的確，理論上必須用Radio，否則前端開發會增加工作量。

但是，當進行布爾值選擇時，會存在一種Checkbox等效『單選』的情況：

小結

設計『單選』與『多選』請牢記五個要點：辨識未選、操作選擇、辨識已選、取消選擇、明示不可選。

『選擇』是一類『交互設計模式』的抽象化概念，未必一定使用帶有『選擇屬性』的界面元素實現。

『選擇』通常是一種操作，必須具體使用才能明確它是不是『用戶任務』或者『功能』。

因為『等效設計』的存在，界面上的『選擇』設計千變萬化，需要不斷學習掌握。

寫作後記：有朋友對『等效設計』這個辭彙存在異議，Hozin想換成『等價設計』也感覺不妥，大家能領會是什麼意思就好了。

寫文章不容易，請呵護原創 未經授權，請勿轉載

精力有限，知乎專欄更新較慢，追番請移步微信公眾號 hozin-com

Hozin公眾號入口

擴展閱讀

交互水深 01 | 從區分 [ 頁面 ] 和 [ 界面 ] 開始吧

交互水深 02 | 設計師對 [ 功能 ] 應該有怎樣的認知？

交互水深 03 | 理解 [ 用戶任務 ] 的 [ 顆粒度 ]

交互水深 04 | 選擇設計中的五個要點【單選小坑，多選大坑】（上篇）

交互水深 05 | 下拉框的濫用、聯動菜單、單選特例、級聯單選【單選小坑，多選大坑】（中篇）

交互水深 06 | 多選陷阱、收集器、列表構造、增項列表【單選小坑，多選大坑】（下篇）