開關(guān)按鈕在現(xiàn)實生活和軟件界面中都隨處可見驻仅，但設(shè)計都不是很理想挽牢，最大的問題是不知道開關(guān)當前狀態(tài)是開還是關(guān)与学，本文試圖分析軟件界面中開關(guān)設(shè)計存在的問題彤悔，并提供優(yōu)化方案。

我們知道索守，開關(guān)按鈕通常是二態(tài)的（要么處于開啟狀態(tài)晕窑，要么處于關(guān)閉狀態(tài)），它一般由3種要素構(gòu)成：（1）開關(guān)當前所處的狀態(tài)描述卵佛，開關(guān)正處在打開還是關(guān)閉的狀態(tài)杨赤，通常用文字或者視覺手段標識出來敞斋；（2）開關(guān)點按區(qū)域，提供一個足夠大的“熱區(qū)”供使用者點按疾牲；（3）操作對象說明植捎，一般通過文本標簽說明開關(guān)操作是針對于哪個對象（比如要打開的是藍牙）。

現(xiàn)實生活中糟糕的開關(guān)設(shè)計

在討論軟件界面的開關(guān)之前阳柔，我們先來看看現(xiàn)實生活中的一些設(shè)計糟糕的開關(guān)（見圖1）焰枢。看似簡單的開關(guān)按鈕卻設(shè)計的不盡如人意舌剂，人類千百年來飽受其折磨济锄。

圖1、糟糕的拉線開關(guān)和小風(fēng)扇開關(guān)

圖1左側(cè)的拉線開關(guān)我本人曾經(jīng)使用過霍转，很糟糕荐绝，如果燈泡壞了，就只能擰開開關(guān)的蓋子或者通過電筆來確認當前開關(guān)是否正處在關(guān)閉的狀態(tài)避消，很危險很泊、很不方便。

右側(cè)是一個奇葩的小風(fēng)扇開關(guān)沾谓。開關(guān)有一個滑槽和撥動塊委造，圖中現(xiàn)實“OFF”字樣，一般會有兩種解釋：

【解釋一】開關(guān)滑塊正處在“ON”字樣上（被滑塊遮住了）均驶，所以開關(guān)處于打開的狀態(tài)昏兆。

【解釋二】我只清楚地看到了“OFF”字樣，所以開關(guān)處于關(guān)閉的狀態(tài)妇穴。

經(jīng)過上面的分析爬虱，我們就知道，不管這種它是開還是關(guān)腾它，都是不合理的跑筝！最后還是公布一下正確答案，它是關(guān)的瞒滴！

軟件界面上糟糕的開關(guān)設(shè)計

在軟件界面上曲梗，也存在各種糟糕的開關(guān)設(shè)計，下面介紹比較常見的兩類妓忍。

（1） 翻滾按鈕

翻滾按鈕的問題主要是使用者無法分辨它是一個選擇虏两，還是描述當前的狀態(tài)。雖然翻滾按鈕可以大大節(jié)省空間世剖，受到一些設(shè)計師的青睞定罢，但這種按鈕模式?jīng)]有經(jīng)過良好的設(shè)計，就會讓用戶很苦惱旁瘫。

圖2祖凫、糟糕的翻滾按鈕

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

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

本文的后面（圖6）將對此進行重新設(shè)計粱快。

（2）文字或圖形出現(xiàn)在滑槽內(nèi)的開關(guān)

我們上面提到秩彤，風(fēng)扇小開關(guān)也在滑槽內(nèi)用文字來提示開關(guān)的當前狀態(tài)（見圖1）。軟件界面上事哭，也存在這種設(shè)計漫雷，見下圖。

圖3鳍咱、文字或圖形出現(xiàn)在滑槽內(nèi)的開關(guān)

圖中的三種模棱兩可的“滑槽開關(guān)”設(shè)計我們上面已經(jīng)解釋過了降盹，不再重復(fù)“迹可能設(shè)計師認為他的設(shè)計合理的（表現(xiàn)模型）蓄坏，但用戶的想法（心理模型）與他不完全一致。

舊版iOS的開關(guān)設(shè)計就是圖3中下方兩組按鈕丑念，使用起來也不太方便涡戳，一思考文字的含義就容易犯暈，所以果粉只能通過長期使用來適應(yīng)它了脯倚。

本文的后面（圖8和圖9）將對此進行重新設(shè)計渔彰。

現(xiàn)實生活中優(yōu)雅的開關(guān)設(shè)計

我們知道，生活是設(shè)計最好的導(dǎo)師推正，軟件界面中很多元素的設(shè)計靈感主要來源于現(xiàn)實生活胳岂。在優(yōu)化軟件界面的開關(guān)設(shè)計之前，我們先來分析一些現(xiàn)實生活中的優(yōu)秀開關(guān)舔稀，見下圖乳丰。

圖4、優(yōu)雅的高壓配電箱開關(guān)和顯示器開關(guān)

上圖左側(cè)的的高壓配電箱是危險開關(guān)内贮，萬萬不能馬虎产园。在顏色方面汞斧，“合”字的背景色用警戒色紅色，非常醒目什燕；而“分”字的背景用黑色粘勒，有一點“漆黑”或者“無（色彩）”的含義。更重要的是屎即，文字“分”和“合”的意義非常清晰庙睡，沒有使用“開/關(guān)”、“接通/斷開”等可能有歧義的詞技俐。

上圖右側(cè)的顯示器按鈕乘陪，非常典型的合理的設(shè)計，開關(guān)按鈕凸起狀態(tài)很清晰標識可按壓區(qū)雕擂，右側(cè)的指示燈也完美地標識屏幕已經(jīng)打開啡邑，再配合點亮的大屏幕，開關(guān)的狀態(tài)非常清楚井赌！日常生活中谤逼，插板、微波爐仇穗、蒸蛋器等都是通過類似的工作指示燈來標識開關(guān)處于打開的狀態(tài)流部。

其實，現(xiàn)實生活中的開關(guān)比軟件界面的開關(guān)要容易設(shè)計一些纹坐，因為可供利用的知覺通道更多贵涵。

現(xiàn)實生活中的開關(guān)可通過視覺、聽覺（比如打開熱水壺開關(guān)時聽到水沸的聲音）恰画、觸覺（比如有些開關(guān)在打開和關(guān)閉時摩擦力或彈力不同）宾茂，甚至嗅覺（比如確認面包機是否已經(jīng)打開），“火力全開”來確認按鈕的當前狀態(tài)拴还。而軟件界面上跨晴，只能依靠視覺，以及部分的聽覺（用戶可能沒開聲音片林，只能作為輔助手段）端盆。

盡管如此，我們還是可以從現(xiàn)實生活中發(fā)現(xiàn)優(yōu)秀開關(guān)的一些優(yōu)良品質(zhì)费封，比如意義明確焕妙、操作對象鮮明、容易上手弓摘。一旦用戶用過之后焚鹊，就不會輕易忘記使用規(guī)則，并且識別速度快如閃電韧献！

重新設(shè)計開關(guān)按鈕

有人說末患，人們似乎已經(jīng)習(xí)慣了痛苦和折磨研叫，但這不是糟糕設(shè)計繼續(xù)存在的理由。我們必須做出改變璧针，尋求優(yōu)雅的設(shè)計方案嚷炉，畢竟設(shè)計的終極目標就是讓生活更美好。

下面介紹幾種設(shè)計原則探橱，并在這些原則的指導(dǎo)下重新設(shè)計軟件界面上的開關(guān)按鈕申屹。

（1）明確標識當前狀態(tài)

明確標識當前開關(guān)的狀態(tài)，并提供操作區(qū)隧膏。如下圖：

圖5哗讥、明確表示當前狀態(tài)

上圖中的第一組按鈕，通過按鈕兩側(cè)的文字明確表示當前開關(guān)的狀態(tài)私植，很明確，但為了加快用戶的識別速度车酣，加上綠色背景表示就打開中更加完美了（見第二組按鈕）曲稼！

第三組按鈕，通過單選框的形式來選擇打開和關(guān)閉湖员，也是比較合理的方式贫悄。

明確表示當前對象的狀態(tài)非常重要，開關(guān)按鈕的很多問題娘摔，大多數(shù)是由于當前狀態(tài)不夠明顯或者不明確造成的窄坦。按照這個思路，我們對圖2的翻滾按鈕進行重新設(shè)計（見下圖）凳寺。

圖6鸭津、改進后的翻滾按鈕

為了表現(xiàn)當前視頻正在播放中（見上圖左側(cè)），可對播放頭進行重新設(shè)計（比如前進中的小動畫）肠缨，或者增加一個聲音播放的小動畫逆趋，或者顯示已播放時間或者剩余時間（眼睛最多停留兩秒就知道當前正在播放中）。簡單地說晒奕，線索在動闻书，就表示視頻正處在播放的狀態(tài)，反之則反（見上圖右側(cè)）脑慧。

當然魄眉，由于用戶可以通過視頻窗口變化（或聲音變化）來判斷影音當前的狀態(tài)，況且這種翻滾按鈕的設(shè)計已經(jīng)“深入人心”闷袒，所以坑律，影音播放軟件公司無需再考慮重新設(shè)計，這就使得糟糕的翻滾按鈕大行其道囊骤，非常遺憾脾歇。

（2）明確標識點擊動作

明確標識點擊動作蒋腮，就可以推斷出當前狀態(tài)。動作是有指向性的藕各，比如下圖左側(cè)的“請點擊打開”按鈕池摧，意思就是點擊就可以將對象打開，由此可推斷當前的對象正處在關(guān)閉的狀態(tài)激况，反之則反（見下圖右側(cè)）作彤。

圖7、明確表示點擊動作

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

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

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

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

上圖中缚窿，借鑒了高壓變電箱的開關(guān)設(shè)計（指針指向哪種狀態(tài)就表示當前處在哪種位置，清晰明了）焰扳，優(yōu)化方案1直接借用這一概念倦零。優(yōu)化方案2把開關(guān)按鈕的透明度調(diào)低，讓”遮擋”在底下的文字顯示出來吨悍。

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

（4）減少“信息干擾”

其實育瓜，設(shè)計師在設(shè)計開關(guān)時诞帐，不需要用大量的語言和圖形來解釋說明，而僅提供一丁點微妙的“信息”爆雹，讓用戶自己去體會和發(fā)現(xiàn)停蕉。比如，“關(guān)閉”的狀態(tài)容易讓人聯(lián)想到“空”钙态、 “斷開”慧起、 “空白”、 “消失”等消極的詞册倒；相反地蚓挤，“打開”就對應(yīng)于“滿”、 “接通”、 “高亮”灿意、“存在”等積極的詞估灿。設(shè)計見下圖（ios7上的開關(guān)）。

圖9缤剧、信息量很少馅袁，干擾很少

經(jīng)過一番喧囂之后，終于返璞歸真荒辕，僅僅留下顏色線索汗销，看起來信息量好像少了，但由于沒有了文字或圖形的各種“干擾”抵窒，開關(guān)當前狀態(tài)的“信號”更清晰了弛针！

細節(jié)是魔鬼。即使產(chǎn)品整體的概念是優(yōu)秀的李皇，令人沮喪的開關(guān)控件也會導(dǎo)致一些煩惱削茁，所以我們一定要小心謹慎，確保開關(guān)按鈕有適當?shù)牡舴俊⒚鞔_的行為茧跋。

作者：運氣超好

來源：用戶體驗小故事

想了解更多關(guān)于互聯(lián)網(wǎng)崗位知識的信息，請移步微信圃阳，關(guān)注微信公眾號：硅谷堂（ID：guigutang）或下載“硅谷堂”APP厌衔。