作者從生活中的實際情況出發，探讨了開關背後的設計思想并拆解了具體的設計細節。

01 生活中的反面案例

故事要半年前開始講起：那個時候我搬到了新的出租屋，房間裡配置的洗衣機比之前的大了一倍，而且操作區上分布着的密密麻麻的文字和按鈕讓洗衣機看起來很高級，我對此很有好感。

然而這種好感并沒有持續多久，在我第一次使用它時：将衣物放進洗衣機——選擇好時間和洗滌方式——按下啟動按鈕（如下圖右側白色按鈕）。

按下後洗衣機發出了“滴”的一聲，在我的認知裡它應該是開始工作了，但是10秒過後沒有任何抽水聲和洗衣服的聲音……

我疑惑地想：“是不是剛才并沒有成功啟動？”于是再次按下了啟動按鈕，又是“滴”的一聲，但是這次我等了 1 分鐘沒有任何反應。之後的十分鐘裡，我與這台匪夷所思的機器“交涉”多次才理解了它的運行方式。

這台洗衣機啟動後需要等待大概十幾秒才開始運行，但是在我按下啟動按鈕後我得不到任何反饋或者提示來告訴我洗衣機已經開始工作了，所以疑惑的我又按下了一次啟動按鈕，然而令人崩潰的是這台洗衣機的啟動和暫停按鈕是一體的，我第二次按下實際是進行了暫停操作，從而導緻我第二次的困惑。

如果你是這台洗衣機的設計師，你會怎麼解決上述的問題呢？

可能你的心中已經有了答案，但是在回答之前我們先試着探究問題的本質。

人們不管是使用日常物品還是與機器進行交互，都會面對兩個階段的問題。一個是「執行」，一個是「評估」。

執行時用戶需要理解如何操作，操作後可能會有什麼結果。評估時用戶需要知道具體發生了什麼，作為設計師我們要通過合理的手段幫助用戶解決這些問題，保證交互的可用性和流暢性。

通常我們會使用「意符」在用戶執行前告知用戶如何理解、如何操作、操作後會有什麼結果；在評估前通過「反饋」告知用戶結果是什麼。

對于意符的定義，在《設計心理學 1-日常的設計》一書中，作者唐納德·諾曼做出了這樣的解釋：

人們需要某種方式了解他們将要使用的産品或服務，某些标識表明的用途，會發生什麼，有什麼樣的替代方案。人們尋找蛛絲馬迹，尋找任何可以幫助他們應對和理解的符号，任何可能标識出有意義的信息的符号非常重要。

設計師需要提供這些線索，人們所需要的和設計師必須提供的，就是意符。除此之外，優良的設計要求對産品的目的、結構和設備的操作與使用者進行良好的交代。那就是意符的作用。

簡而言之，意符就是在用戶使用前，機器為了讓用戶更好地理解和使用它而做出的提示。而反饋就更好理解了，機器在我們操作後做出的反應就是反饋，沒有反應同樣也是一種反饋。

下圖展示了機器與用戶如何進行交互：一個合理的設計可以讓用戶快速順暢地進行 1234 四個步驟進而完成任務，而糟糕的設計會讓用戶不斷重複這個流程。

之所以會出現糟糕的設計，就是因為在步驟 1 和 3 沒有進行合理的意符提示和反饋提示讓用戶摸不着頭腦，進而導緻用戶根據自己的猜測和過往經驗來進行操作，最後得到非預期的結果。

回到文章開始時的洗衣機開關問題，因為開始和暫停按鈕是一體的，在沒有任何意符和反饋的情況下我按下這個按鈕時我并不知道我啟動的是開始操作還是暫停操作。

我們可以就這個問題列出以下解決方案：

1. 增加文字提示，如啟動時在顯示屏上顯示“已啟動”，暫停時顯示“已暫停”；
2. 增加語音提示，啟動開關後使用語音告知用戶“已啟動”或“已暫停”。

當然解決方案有很多，每個人都可以根據場景想出不同的解決方案。

與現實機器的開關類似，在 UI 設計中我們如果進行開關設計也需要遵循相應的設計原則。一個合理的開關設計主體包含的意符分别有兩種：

1. 表示當前狀态；
2. 表示操作後的狀态。

主體之外我們還可以添加輔助提示更加清晰地傳達意符和反饋。

接下來将介紹一些常見的開關類型和輔助提示類型，最後總結出體驗優質的開關設計方法。

02 開關類型

1. icon

在 UI 設計中最常見的開關可能就是 icon 了，即由單一的 icon 通過顔色或圖形的變化來表示開或關的狀态。

因為交互設計從古到今并沒有統一的嚴格标準，所以到底是将開關 icon 的樣式設計為「當前狀态樣式」還是設計為「按下之後的狀态樣式」并沒有一個約定俗成的規則。

然而，對比而言如今各類 App 設計中常見的且體驗比較好的方案還是将開關樣式設計為當前狀态樣式。如下圖iPhone自帶相機的實況照片開關icon就是顯示當前狀态。

然而，并不是說将開關樣式設計為當前狀态樣式做法普遍且體驗更好就可以這樣做了，有些開關的設計因為使用廣泛，已經在用戶的心智中紮根，我們如果強行改變反而适得其反導緻體驗變差。

最典型的就是視頻和音樂的播放暫停開關，他們表示的就是操作後的狀态而不是當前狀态，如下圖。

因此，大部分應用的開關類 icon 都是混用當前狀态和操作後狀态的，如下圖哔哩哔哩的視頻播放界面，播放暫停開關 icon 表示的是操作後狀态，彈幕開關表示的是當前狀态，而視頻鎖開關 icon 又變成了表示操作後狀态了。

是否統一倒不是關鍵，關鍵是我們是否能夠讓用戶理解相應的意符和反饋，目标是讓用戶在操作開關前能夠知道當前狀态是什麼，操作開關後當前狀态是什麼。

舉一個反例，下圖中的美顔相機的夜拍模式開關就沒有直觀表現出當前是開還是關，這種有歧義的設計可能讓新手用戶手足無措，可能本來未開啟的功能讓用戶誤以為已開啟，導緻拍出來的照片不符合用戶預期。

由此我們可以看出，單一的 icon 開關如果沒有其他的輔助提示會造成意符和反饋的缺失，進而形成較大的歧義性，用戶會在疑惑中按照自己固有的心理模型和過往經驗進行判斷，體驗因此降低。

2. 主體與開關分離（分離式）

上一部分舉了美顔相機的反例，其意符和反饋不明導緻的歧義問題導緻了用戶的困惑，但使用「主體與開關分離」（後文一緻簡稱為“分離式”）的開關設計可以解決這個問題，它在意符和反饋層面都給予了用戶提示，可視性很強，完全解決了開關狀态無法被用戶感知的問題。

分離式開關指的是，主體不再充當開關，隻當做開關的名稱或icon，另外制作一個開關傳達意符和反饋，解決了當前狀态與操作後狀态混淆的問題，其通常的樣式如下圖。

如下圖，Faceu激萌不同于美顔相機設計方式就是将主體與開關分離，很清晰地傳達了當前開關狀态。

大部分App的設置頁面使用的開關都是主體與開關分離的方式，如下圖。

顯而易見，分離式開關直觀展示了當前狀态，在消除歧義方面優于 icon 開關，但同時缺點也很明顯，它占用了過多頁面空間并美感欠佳。

3. 名稱變化

名稱變化指的是開關依賴于其名稱的變化告知用戶開關的當前狀态和操作，常見的類型如下：

部分 App 會将開關的名稱變化的方式統一，但也有部分 App 會将這兩類進行混用，即一個是表示當前狀态，一個是表示操作。

下圖為部分 App 的名稱開關，我們可以将上圖的開關名稱類型的序号對号入座。

表示操作的按鈕文字具有一定引導性，用戶容易感知和觸發，反之，表示狀态的按鈕文字由于不具有引導性，如果用戶沒有對這類按鈕形成使用習慣甚至難以意識到它是可點擊的，因此我們可以利用其特性進行逆向應用引導用戶的行為。

比如在直播App中，我們希望引導用戶關注主播，又試圖避免用戶關注後又取關主播。我們就可以将“關注”制作為表示操作，文案寫為“關注主播”（屬于1.開啟……）。将“取消關注”制作為表示當前狀态，文案寫為“已關注”（屬于7.已開啟……）。

前後的顔色進行區分，“關注主播”的按鈕制作得對比度強，吸引力大，“已關注”做得弱一些，讓用戶誤以為不可點擊，如下圖的鬥魚直播。

然而，名稱變化的開關由于語言的模糊性，仍然造成了部分歧義。我們可以發現很多App的名稱變化開關設計中，都會在操作後加入其它提示來消除歧義（如：toast 提示），有些App則并未加入，因此在後文中會着重介紹輔助提示的優點和使用方法。

4. 小結

icon、分離式、名稱變化，如果按照消除歧義的優劣排列的話，大概是 分離式>名稱變化>icon。

那這樣的話是不是應該把開關都換成分離式呢？當然不是，分離式雖然在意符和反饋的層面很充分地消除了歧義，但是其也有明顯的缺點，分離出的開關會占用部分空間，可能會影響美觀，因此我們需要根據需求和頁面結構選擇最适合的開關類型。

那名稱變化和icon類的開關如何消除歧義呢，我們可以通過添加下面介紹的輔助提示來消除歧義。

03 輔助提示

1. 環境暗示

環境暗示指的是用戶在操作開關前，開關以外的區域給予用戶的提示，這些提示本身存在于交互流程中并不是我們刻意加入的，用戶根據這些提示可以判斷當前狀态以及按下開關後的狀态。

例如在觀看視頻時，當用戶去按下視頻播放按鈕前，用戶會通過當前圖像靜止與無聲音這個環境暗示明白當前狀态是可能是視頻未播放，所以應該按下播放按鈕讓視頻播放。

再比如得到 App 的夜間模式，用戶可以通過當前界面的樣式判斷當前是否已經開啟了夜間模式，如下圖。

看下圖，如果沒有環境暗示，你能分清得到的夜間模式的開關哪個當前狀态是夜間哪個當前狀态是日間嗎？

因此，環境暗示的優勢是我們不需要進行另外設計其他的意符和反饋告知用戶當前狀态，環境給予的暗示已經足夠直觀。

2. 模态/非模态提示

當用戶按下開關後模态和非模态提示可以在反饋層面告知用戶，讓用戶知道自己是觸發了開啟還是關閉。

常見的模态提醒控件是「警告框（Alerts）」，非模态提醒控件是「提示框（toast）」，前者提醒強度大，使用在一些危險、重要的反饋中，後者則使用在一些輕量的提示中。

介紹 icon 開關的部分我們提到了美顔相機的夜拍模式的 icon 開關狀态難以區分，但美圖秀秀在這裡使用了頂部的非模态提示在反饋層面告知用戶當前狀态，很好地解決了這個問題，如下圖。

拉勾網的設置中，隐藏簡曆為危險操作，用戶極有可能由于開關名稱的歧義或由于疏忽觸發開關導緻簡曆被隐藏從而錯過工作機會，因此此處設計了一個形式為警告框的模态提示來告知用戶當前狀态以及潛在風險。

3. 輔助文案

輔助文案指的是在主體（主體可能是開關名稱、icon 或二者皆有之）之外另外放置一些文案信息來充當意符和反饋。下圖案例就是高德地圖的下車提示的開關，開關的主體是名稱，但是下面的一行輔助文案很清晰地傳達了當前的開關是什麼狀态。

4. 其他輔助提示

并不是所有提示都需要讓用戶看見，我們可以給予用戶其他感官的信号告知用戶當前開關的狀态。

在現實生活中，我們會通過鑰匙在鎖中扭動發出的聲音判斷鎖是否被打開，通過觸摸感受摩托車是否繼續震動判斷其是否已經熄火。

同樣，在 UI 設計中，我們也仍然可以使用聽覺和觸覺來消除開關的歧義。一個比較優秀的案例是高德地圖，當用戶打開下車提示之後，會出現語音提示“已開啟下車提醒”，它充分考慮到身處戶外的用戶可能并不能很方便地獲取屏幕上的視覺信息，因此使用語音的形式提示用戶。

5. 小結

輔助提示很好地補充了開關在消除歧義上的不足，但我們需要合理使用否則就會産生不必要的視覺噪聲。

如下圖，試想音樂的暫停播放開關如果加入的 toast 提示會怎麼樣呢？由于我們已經可以通過“手機是否發出聲音”這個環境暗示獲知當前的開關狀态，如果再加入 toast 提示必然會出現不必要的視覺噪聲。

04 總結

介紹完開關類型和輔助提示後，我們如何将其應用到我們的産品中，設計出無歧義或低歧義的開關呢？

如果我們選擇的開關類型已經足夠的消除歧義，如分離式，我們就不太需要額外地增加輔助提示了。但是如果使用容易造成歧義的開關，我們可以按照（開關類型 輔助提示 1 輔助提示 2 …………）的公式進行設計，即一種輔助提示不足夠消除歧義，可以使用多種一起。

舉個上文的例子，高德地圖的下車提醒開關的設計就是「名稱變化開關 輔助文案 語音提示」 的組合。

然而，任何設計都不是完美的，很多地方都需要我們做出妥協，雖然我們可以選擇合适的開關類型和輔助提示解決歧義問題，但随之而來就可能出現其他問題。

如分離式開關消除歧義效果很好，但是占用空間且不美觀，模态和非模态提示給予用戶的反饋比較強，但是可能打擾到用戶。

綜合上文提到的三款相機軟件作為案例，如下圖，我們可以發現在消除歧義的過程中避免不了對用戶造成的幹擾或頁面美觀度的降低，我們很難去評判Faceu激萌、美顔相機和美圖秀秀哪個設計得更好，它們隻是在易用性和美觀性之間找到了它們所認為的平衡點。具體如何設計，還是要具體問題具體分析。

那麼我們應該如何進行取舍呢，在這裡我們要考慮另外的因素。我們可以從以下角度分析，使用頻率、用戶人群、潛在風險等。

使用頻率：使用頻率越高，用戶對操作的熟悉度越高，歧義對用戶造成的理解與記憶成本就降低了，設計可以偏向低幹擾和美觀度，反之使用頻率越低，歧義對用戶造成的理解與記憶成本升高，設計就應該偏向于易理解。

用戶人群：不同的用戶人群的風格偏好、認知能力是不一樣的。例如，我們要設計一款目标用戶為年輕人的相機産品，設計風格簡約，此時我們比較偏向的設計方案可能就類似美顔相機。反之，如果我們的目标用戶是中老年人，就要偏向于易用而犧牲美觀度，方案轉而偏向美圖秀秀或Faceu激萌。

潛在風險：開關的切換如果會導緻潛在風險，設計就應該偏向于易理解，且需要使用模态提醒告知用戶風險，例如用戶如果關閉了推送通知開關，會導緻接收不到實時重要的信息通知，此時不僅要使用易識别的開關類型，還需要添加模态提醒告知用戶風險。

我們可以将這些考慮角度放到雷達圖，如下圖所示，最終形成的面積越大我們越應該将按鈕制作得易理解、易使用，反之我們可以偏向于将開關制作得更美觀犧牲一些易用性。考慮到一些特殊産品的特殊用戶屬性，我們可以在下圖中增加其他考慮角度，其并不是一成不變的。

以上是本次對開關設計的思考，看似小小的一個開關，包含的學問卻不勝枚舉。作為一個互聯網産品設計從業者，一定要善于感受生活，用設計師細膩的内心去打量、洞察身邊的一切事物，發現美與不足，思考改進方法，并在這個過程中逐漸提升自我的價值。

作者：貝林；公衆号：貝林的設計站（ID：123456）

本文由 @貝林 原創發布于人人都是産品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部