互動閒談05丨聊聊狀態開關按鈕如何設計
今年過年在酒店遇到很糟糕的開關設計，在這裡引申開來和大家分享狀態開關的設計方法。
年過去了，祝大家新年快樂。
今年過年，我們全家老少十多口人來廣州姨媽家過年，家裡住不下，於是就開了小區周邊的一個酒店住下來，之前我分享的一個視訊 分享丨王受之：我們的設計出了什麼問題？ 裡，王受之教授曾經談到過關於酒店開關糟糕的設計問題，碰巧的是，這一次我在入駐這家酒店的時候也遇到了糟糕的開關設計，和王受之教授舉的例子不同的是，我遇到的這個例子，和“概念模型”有關，在這裡分享給大家。
這個酒店房間的開關是這樣的：
酒店床頭開關
酒店客廳開關
這個開關是觸控式的，開關本身有亮/暗兩個狀態；大家迅速看一眼，我想請問大家，你們認為，亮著的開關（圖1的5個燈，圖2的右上、左下2個燈）對應的狀態應該是開啟的還是關閉的？
如果心中有了答案了，繼續往下看。
之前在文章 從互動維度量化使用者體驗 中我說過一次我個人理解的最小互動模型，大概是下面這段話：
狹義的互動（Interaction）定義互動主體必須是人本身，而客體可以是產品，環境，服務等等，且不論互動客體是什麼，只要主體是人，人和客體去進行互動的時候，一定是人帶著一定的心理預期施加一個行為，然後客體會根據這個行為給與一個反饋（沒有反饋本質也是一個反饋），而人會根據這個反饋是否符合預期去進行心理修正。如下圖所示（紅先黑後）：
那隨之而來的另一個問題就產生了，人進行互動行為時的心理預期是從哪兒來的？
人初生的時候都是一張白紙，每天重複的互動行為產生的心理預期會隨著不同的教育、家庭進行變化；今年我們家在廣州過年，我第一次見到兩歲的小侄子，通過這一週對小侄子的觀察更能體會出人其實是有某些說不清的潛能在裡面的，舉個例子，有一天小侄子生病了，要吃兩種藥，一種是甜的，一種是苦的；吃甜藥的時候小侄子很開心，愉快的呀呀的說這藥是甜的，而吃苦藥的時候小侄子也是皺著說這藥好苦，關鍵的問題是，出生兩年來，家人從來沒有對他描述過苦味是什麼，也沒有明確告訴他這兩種藥有一種是“苦味”的，但是兩歲的小孩子就能嚐到苦味的藥在沒有接觸過“苦”這個詞的時候就講得出來這是“苦”。
再舉個例子，還是我的小侄子，我們貴州人過年一般都會真金白銀的打麻將，小侄子目睹了幾天我們在麻將桌上用大把的零錢來支付，有一天我們去公園玩，遇到一個熟人給小孩子了一個紅包，我們就問他“錢是幹什麼的呀”? 我小侄子脫口而出：“錢是用來打麻將的呀！”
為什麼會發生這樣的現象呢？
大概是現在的人買東西都用微信支付寶支付，所以對於小孩子的認知來說，他們由於沒有見到過紙幣參與交易的行為，而這幾天不斷被我們麻將桌上的現金衝擊視覺，才會突然脫口而出這句話。
可能在我小侄子的認知裡，手機才是用來買東西的。
我們網際網路圈的設計行業其實能形成理論的東西不多的，大多數時候為了佐證某些東西，我們需要從心理學、社會學、行為學中找到一些理論支撐。我在做產品設計的過程中，最長這麼時間一直使用的一種方法是思考使用者在這個頁面的心理預期。（比如在商品詳情頁，業務目標肯定是引導使用者購買，但是使用者心理上之所以點進了這個商品的詳情，無非是在有購買意願的基礎上，需要一些資訊去輔助決策，這時候如果你仔細思考並模擬一下你自己在購買時候點選詳情頁的行為，其實會發現其實影響決策的資訊大多不是價格（因為價格在上一級的列表頁已經標明瞭），更多的可能是產品描述和使用者口碑等等）
在做尤其是app設計的時候，能明確每一個頁面的業務目標和使用者點進來的預期，其實是一件非常重要的事情，大家可以多留心在這兩點上。
好的扯遠了，回到狀態開關的事情上來，還記得剛剛的那個圖麼？
酒店床頭開關
酒店客廳開關
我相信絕大對數的人第一反應都是，亮著的開關對應的燈應該是亮的，因為這個符合常識，但是如果這個酒店也是這樣的話，我就不會舉這個例子了，沒錯，上面開關亮著的燈是關的，沒有亮的開關對應的燈是開啟狀態。
我相信設計這個開關的人是為了讓使用者在夜晚起夜的時候使用方便，但是他完全可以用更加高明的辦法，比如換成夜光材質之類的。這種設計師很愚蠢的，我觀察這麼多天下來，我們所有親戚每次開關燈幾乎都會誤觸，因為我們的心智一直一直認為的是亮著的開關亮著的燈。
這裡就牽扯出一個問題，我們在app設計中如何去設計狀態開關的問題。
首先需要明確，最無歧義的狀態開關一定是需要具備兩個意符：
其一是表徵當前狀態
其二是表徵使用者點選之後的狀態。
而現在市面上很多app在這兩個意符上是混的，一般都知道用icon的樣式來表徵當前狀態，但是下面的輔助文字則是表徵當前狀態的和點選之後狀態的都有。
這就會讓使用者很蒙。
比如相機app、短視訊app、K歌app中就比較明顯會有很多狀態按鈕，如下圖所示是某相機app的截圖，這樣的設計就是“有歧義的設計”，比如“延時關閉”和“補光燈關閉”這兩個文案，會很容易讓人困惑這文案指代的是當前狀態呢還是點選之後的狀態呢？
給大家提供一個我個人的小tips：
設計狀態按鈕， 儘量把當前狀態和點選行為拉出兩個層級關係來設計 。
當前狀態可以體現在icon上，但是不能只體現在icon上（比如他這個延時關閉的圖示有一個x，但是補光燈關閉又沒有x，這就更加歧義了）
比如如果是我去設計它這個按鈕，我會這麼設計：
這樣的話，確實，使用者操作複雜度上會多一級（之前直接點icon，現在點icon之後需要再點開關），但是使用者完全沒有認知成本。
這就是我說的把當前狀態和點選行為拉出兩個層級關係來設計。其實這個犧牲互動成本減少使用者認知成本的方法在互動設計工作中經常被我們使用，當我們遇到一個問題實在是一步很難理清的時候，不妨可以多嘗試這種思路。不過這種提高複雜度的減少認知的方法，不適用於業務強指引型頁面（比如購買、導航之類）
好了，今天就到這裡，這是年後第一篇文章，希望你喜歡~
微信公眾號： Seanydesign