開關按鈕在現實生活和軟件界面中都隨處可見，但設計都不是很理想，最大的問題是不知道開關當前狀態是開還是關，本文試圖分析軟件界面中開關設計存在的問題，并提供優化方案。

我們知道，開關按鈕通常是二態的（要么處于開啟狀態，要么處于關閉狀態），它一般由3種要素構成：（1）開關當前所處的狀態描述，開關正處在打開還是關閉的狀態，通常用文字或者視覺手段標識出來；（2）開關點按區域，提供一個足夠大的“熱區”供使用者點按；（3）操作對象說明，一般通過文本標簽說明開關操作是針對于哪個對象（比如要打開的是藍牙）。

現實生活中糟糕的開關設計

在討論軟件界面的開關之前，我們先來看看現實生活中的一些設計糟糕的開關（見圖1）。看似簡單的開關按鈕卻設計的不盡如人意，人類千百年來飽受其折磨。

圖1、糟糕的拉線開關和小風扇開關

圖1左側的拉線開關我本人曾經使用過，很糟糕，如果燈泡壞了，就只能擰開開關的蓋子或者通過電筆來確認當前開關是否正處在關閉的狀態，很危險、很不方便。

右側是一個奇葩的小風扇開關。開關有一個滑槽和撥動塊，圖中現實“OFF”字樣，一般會有兩種解釋：

【解釋一】開關滑塊正處在“ON”字樣上（被滑塊遮住了），所以開關處于打開的狀態。

【解釋二】我只清楚地看到了“OFF”字樣，所以開關處于關閉的狀態。

經過上面的分析，我們就知道，不管這種它是開還是關，都是不合理的！最后還是公布一下正確答案，它是關的！

軟件界面上糟糕的開關設計

在軟件界面上，也存在各種糟糕的開關設計，下面介紹比較常見的兩類。

（1） 翻滾按鈕

翻滾按鈕的問題主要是使用者無法分辨它是一個選擇，還是描述當前的狀態。雖然翻滾按鈕可以大大節省空間，受到一些設計師的青睞，但這種按鈕模式沒有經過良好的設計，就會讓用戶很苦惱。

圖2、糟糕的翻滾按鈕

如圖2中我們經常見到的電影或者音樂的播放和暫停翻滾按鈕，如果認真思考就會陷入混亂。以左側的暫停按鈕為例，我們完全沒有線索去判斷這個暫停按鈕到底表示的是當前影片正在暫停？還是表示點擊它就可以暫停？很明顯，約定俗成的答案是后者。

幸運的是，視頻畫面是動的并且是有聲音的（而音樂是有聲音的），我們可以通過這個線索來了解影片（或者音樂）當前的狀態。但如果畫面靜止不動時（或者音樂中有很長的休止符時），線索消失，用戶將陷入恐慌。

本文的后面（圖6）將對此進行重新設計。

（2）文字或圖形出現在滑槽內的開關

我們上面提到，風扇小開關也在滑槽內用文字來提示開關的當前狀態（見圖1）。軟件界面上，也存在這種設計，見下圖。

圖3、文字或圖形出現在滑槽內的開關

圖中的三種模棱兩可的“滑槽開關”設計我們上面已經解釋過了，不再重復。可能設計師認為他的設計合理的（表現模型），但用戶的想法（心理模型）與他不完全一致。

舊版iOS的開關設計就是圖3中下方兩組按鈕，使用起來也不太方便，一思考文字的含義就容易犯暈，所以果粉只能通過長期使用來適應它了。

本文的后面（圖8和圖9）將對此進行重新設計。

現實生活中優雅的開關設計

我們知道，生活是設計最好的導師，軟件界面中很多元素的設計靈感主要來源于現實生活。在優化軟件界面的開關設計之前，我們先來分析一些現實生活中的優秀開關，見下圖。

圖4、優雅的高壓配電箱開關和顯示器開關

上圖左側的的高壓配電箱是危險開關，萬萬不能馬虎。在顏色方面，“合”字的背景色用警戒色紅色，非常醒目；而“分”字的背景用黑色，有一點“漆黑”或者“無（色彩）”的含義。更重要的是，文字“分”和“合”的意義非常清晰，沒有使用“開/關”、“接通/斷開”等可能有歧義的詞。

上圖右側的顯示器按鈕，非常典型的合理的設計，開關按鈕凸起狀態很清晰標識可按壓區，右側的指示燈也完美地標識屏幕已經打開，再配合點亮的大屏幕，開關的狀態非常清楚！日常生活中，插板、微波爐、蒸蛋器等都是通過類似的工作指示燈來標識開關處于打開的狀態。

其實，現實生活中的開關比軟件界面的開關要容易設計一些，因為可供利用的知覺通道更多。

現實生活中的開關可通過視覺、聽覺（比如打開熱水壺開關時聽到水沸的聲音）、觸覺（比如有些開關在打開和關閉時摩擦力或彈力不同），甚至嗅覺（比如確認面包機是否已經打開），“火力全開”來確認按鈕的當前狀態。而軟件界面上，只能依靠視覺，以及部分的聽覺（用戶可能沒開聲音，只能作為輔助手段）。

盡管如此，我們還是可以從現實生活中發現優秀開關的一些優良品質，比如意義明確、操作對象鮮明、容易上手。一旦用戶用過之后，就不會輕易忘記使用規則，并且識別速度快如閃電！

重新設計開關按鈕

有人說，人們似乎已經習慣了痛苦和折磨，但這不是糟糕設計繼續存在的理由。我們必須做出改變，尋求優雅的設計方案，畢竟設計的終極目標就是讓生活更美好。

下面介紹幾種設計原則，并在這些原則的指導下重新設計軟件界面上的開關按鈕。

（1）明確標識當前狀態

明確標識當前開關的狀態，并提供操作區。如下圖：

圖5、明確表示當前狀態

上圖中的第一組按鈕，通過按鈕兩側的文字明確表示當前開關的狀態，很明確，但為了加快用戶的識別速度，加上綠色背景表示就打開中更加完美了（見第二組按鈕）！

第三組按鈕，通過單選框的形式來選擇打開和關閉，也是比較合理的方式。

明確表示當前對象的狀態非常重要，開關按鈕的很多問題，大多數是由于當前狀態不夠明顯或者不明確造成的。按照這個思路，我們對圖2的翻滾按鈕進行重新設計（見下圖）。

圖6、改進后的翻滾按鈕

為了表現當前視頻正在播放中（見上圖左側），可對播放頭進行重新設計（比如前進中的小動畫），或者增加一個聲音播放的小動畫，或者顯示已播放時間或者剩余時間（眼睛最多停留兩秒就知道當前正在播放中）。簡單地說，線索在動，就表示視頻正處在播放的狀態，反之則反（見上圖右側）。

當然，由于用戶可以通過視頻窗口變化（或聲音變化）來判斷影音當前的狀態，況且這種翻滾按鈕的設計已經“深入人心”，所以，影音播放軟件公司無需再考慮重新設計，這就使得糟糕的翻滾按鈕大行其道，非常遺憾。

（2）明確標識點擊動作

明確標識點擊動作，就可以推斷出當前狀態。動作是有指向性的，比如下圖左側的“請點擊打開”按鈕，意思就是點擊就可以將對象打開，由此可推斷當前的對象正處在關閉的狀態，反之則反（見下圖右側）。

圖7、明確表示點擊動作

雖然初看起來這種需要推斷的方式好像有點復雜，但命令式的按鈕的指向性非常明確，用戶很清楚點擊這個按鈕將會發生什么事情（這一點非常重要），所以實際使用起來效果還是相當不錯的。

（3）加強或者削弱某一種解釋

上面的“滑槽開關”由于兩種截然相反的解釋“相互競爭”而導致混亂，所以，如果我們能夠通過視覺表現手段加強或者削弱某一種解釋，那么平衡的天平將會向其中一邊傾斜，易用性將大大提升。見下圖：

圖8、加強或者削弱某一種解釋

上圖中，借鑒了高壓變電箱的開關設計（指針指向哪種狀態就表示當前處在哪種位置，清晰明了），優化方案1直接借用這一概念。優化方案2把開關按鈕的透明度調低，讓”遮擋”在底下的文字顯示出來。

兩個方案都是加強某一種解釋（即滑塊所處的位置就是按鈕當前狀態），削弱了另一種解釋（即當前看到什么字開關就是什么狀態）。

（4）減少“信息干擾”

其實，設計師在設計開關時，不需要用大量的語言和圖形來解釋說明，而僅提供一丁點微妙的“信息”，讓用戶自己去體會和發現。比如，“關閉”的狀態容易讓人聯想到“空”、 “斷開”、 “空白”、 “消失”等消極的詞；相反地，“打開”就對應于“滿”、 “接通”、 “高亮”、“存在”等積極的詞。設計見下圖（ios7上的開關）。

圖9、信息量很少，干擾很少

經過一番喧囂之后，終于返璞歸真，僅僅留下顏色線索，看起來信息量好像少了，但由于沒有了文字或圖形的各種“干擾”，開關當前狀態的“信號”更清晰了！

細節是魔鬼。即使產品整體的概念是優秀的，令人沮喪的開關控件也會導致一些煩惱，所以我們一定要小心謹慎，確保開關按鈕有適當的、明確的行為。

作者：運氣超好

來源：用戶體驗小故事

想了解更多關于互聯網崗位知識的信息，請移步微信，關注微信公眾號：硅谷堂（ID：guigutang）或下載“硅谷堂”APP。