聊聊狀態(tài)開關(guān)按鈕如何設(shè)計

2022-3-20    純純

我遇到的這個例子,和“概念模型”有關(guān),在這里分享給大家。


這個酒店房間的開關(guān)是這樣的:


酒店床頭開關(guān)



酒店客廳開關(guān)



這個開關(guān)是觸控式的,開關(guān)本身有亮/暗兩個狀態(tài);大家迅速看一眼,我想請問大家,你們認為,亮著的開關(guān)(圖1的5個燈,圖2的右上、左下2個燈)對應(yīng)的狀態(tài)應(yīng)該是打開的還是關(guān)閉的?




如果心中有了答案了,繼續(xù)往下看。




之前在文章從交互維度量化用戶體驗中我說過一次我個人理解的最小交互模型,大概是下面這段話:


狹義的交互(Interaction)定義交互主體必須是人本身,而客體可以是產(chǎn)品,環(huán)境,服務(wù)等等,且不論交互客體是什么,只要主體是人,人和客體去進行交互的時候,一定是人帶著一定的心理預(yù)期施加一個行為,然后客體會根據(jù)這個行為給與一個反饋(沒有反饋本質(zhì)也是一個反饋),而人會根據(jù)這個反饋是否符合預(yù)期去進行心理修正。如下圖所示(紅先黑后):


那隨之而來的另一個問題就產(chǎn)生了,人進行交互行為時的心理預(yù)期是從哪兒來的?


人初生的時候都是一張白紙,每天重復(fù)的交互行為產(chǎn)生的心理預(yù)期會隨著不同的教育、家庭進行變化;今年我們家在廣州過年,我第一次見到兩歲的小侄子,通過這一周對小侄子的觀察更能體會出人其實是有某些說不清的潛能在里面的,舉個例子,有一天小侄子生病了,要吃兩種藥,一種是甜的,一種是苦的;吃甜藥的時候小侄子很開心,愉快的呀呀的說這藥是甜的,而吃苦藥的時候小侄子也是皺著說這藥好苦,關(guān)鍵的問題是,出生兩年來,家人從來沒有對他描述過苦味是什么,也沒有明確告訴他這兩種藥有一種是“苦味”的,但是兩歲的小孩子就能嘗到苦味的藥在沒有接觸過“苦”這個詞的時候就講得出來這是“苦”。


再舉個例子,還是我的小侄子,我們貴州人過年一般都會真金白銀的打麻將,小侄子目睹了幾天我們在麻將桌上用大把的零錢來支付,有一天我們?nèi)ス珗@玩,遇到一個熟人給小孩子了一個紅包,我們就問他“錢是干什么的呀”? 我小侄子脫口而出:“錢是用來打麻將的呀!”


為什么會發(fā)生這樣的現(xiàn)象呢?


大概是現(xiàn)在的人買東西都用微信支付寶支付,所以對于小孩子的認知來說,他們由于沒有見到過紙幣參與交易的行為,而這幾天不斷被我們麻將桌上的現(xiàn)金沖擊視覺,才會突然脫口而出這句話。


可能在我小侄子的認知里,手機才是用來買東西的。


我們互聯(lián)網(wǎng)圈的設(shè)計行業(yè)其實能形成理論的東西不多的,大多數(shù)時候為了佐證某些東西,我們需要從心理學(xué)、社會學(xué)、行為學(xué)中找到一些理論支撐。我在做產(chǎn)品設(shè)計的過程中,最長這么時間一直使用的一種方法是思考用戶在這個頁面的心理預(yù)期。(比如在商品詳情頁,業(yè)務(wù)目標肯定是引導(dǎo)用戶購買,但是用戶心理上之所以點進了這個商品的詳情,無非是在有購買意愿的基礎(chǔ)上,需要一些信息去輔助決策,這時候如果你仔細思考并模擬一下你自己在購買時候點擊詳情頁的行為,其實會發(fā)現(xiàn)其實影響決策的信息大多不是價格(因為價格在上一級的列表頁已經(jīng)標明了),更多的可能是產(chǎn)品描述和用戶口碑等等)


在做尤其是app設(shè)計的時候,能明確每一個頁面的業(yè)務(wù)目標和用戶點進來的預(yù)期,其實是一件非常重要的事情,大家可以多留心在這兩點上。



好的扯遠了,回到狀態(tài)開關(guān)的事情上來,還記得剛剛的那個圖么?


酒店床頭開關(guān)



酒店客廳開關(guān)


我相信絕大對數(shù)的人第一反應(yīng)都是,亮著的開關(guān)對應(yīng)的燈應(yīng)該是亮的,因為這個符合常識,但是如果這個酒店也是這樣的話,我就不會舉這個例子了,沒錯,上面開關(guān)亮著的燈是關(guān)的,沒有亮的開關(guān)對應(yīng)的燈是打開狀態(tài)。


我相信設(shè)計這個開關(guān)的人是為了讓用戶在夜晚起夜的時候使用方便,但是他完全可以用更加高明的辦法,比如換成夜光材質(zhì)之類的。這種設(shè)計師很愚蠢的,我觀察這么多天下來,我們所有親戚每次開關(guān)燈幾乎都會誤觸,因為我們的心智一直一直認為的是亮著的開關(guān)亮著的燈。


這里就牽扯出一個問題,我們在app設(shè)計中如何去設(shè)計狀態(tài)開關(guān)的問題。


首先需要明確,最無歧義的狀態(tài)開關(guān)一定是需要具備兩個意符:

其一是表征當(dāng)前狀態(tài)

其二是表征用戶點擊之后的狀態(tài)。

而現(xiàn)在市面上很多app在這兩個意符上是混的,一般都知道用icon的樣式來表征當(dāng)前狀態(tài),但是下面的輔助文字則是表征當(dāng)前狀態(tài)的和點擊之后狀態(tài)的都有。


這就會讓用戶很蒙。


比如相機app、短視頻app、K歌app中就比較明顯會有很多狀態(tài)按鈕,如下圖所示是某相機app的截圖,這樣的設(shè)計就是“有歧義的設(shè)計”,比如“延時關(guān)閉”和“補光燈關(guān)閉”這兩個文案,會很容易讓人困惑這文案指代的是當(dāng)前狀態(tài)呢還是點擊之后的狀態(tài)呢?


給大家提供一個我個人的小tips:


設(shè)計狀態(tài)按鈕,盡量把當(dāng)前狀態(tài)和點擊行為拉出兩個層級關(guān)系來設(shè)計。


當(dāng)前狀態(tài)可以體現(xiàn)在icon上,但是不能只體現(xiàn)在icon上(比如他這個延時關(guān)閉的圖標有一個x,但是補光燈關(guān)閉又沒有x,這就更加歧義了)


比如如果是我去設(shè)計它這個按鈕,我會這么設(shè)計:



這樣的話,確實,用戶操作復(fù)雜度上會多一級(之前直接點icon,現(xiàn)在點icon之后需要再點開關(guān)),但是用戶完全沒有認知成本。


這就是我說的把當(dāng)前狀態(tài)和點擊行為拉出兩個層級關(guān)系來設(shè)計。其實這個犧牲交互成本減少用戶認知成本的方法在交互設(shè)計工作中經(jīng)常被我們使用,當(dāng)我們遇到一個問題實在是一步很難理清的時候,不妨可以多嘗試這種思路。不過這種提高復(fù)雜度的減少認知的方法,不適用于業(yè)務(wù)強指引型頁面(比如購買、導(dǎo)航之類)


文章來源:站酷   作者:Seany

分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)



分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.bouu.cn

存檔