開關(guān)狀態(tài)切換的設(shè)計(jì),這幾點(diǎn)要重視
編輯導(dǎo)讀:在使用產(chǎn)品時,開關(guān)狀態(tài)的使用非常廣泛。好的開關(guān)設(shè)計(jì)能幫助用戶理解開關(guān)操作生效與否,是用戶體驗(yàn)中重要的一環(huán)。本文作者基于自身工作經(jīng)驗(yàn),對開關(guān)狀態(tài)的設(shè)計(jì)提出了自己的一點(diǎn)思考,希望對你有幫助。
問題來自一次旁聽:開關(guān)狀態(tài)切換前后,除了開關(guān)控件的UI狀態(tài),開關(guān)說明是否應(yīng)該也有反饋差異?我覺得還挺有意思的。
小L:開關(guān)打開和關(guān)閉可以通過開關(guān)控件的UI反饋,所以開啟前后說明文案沒有差別也不會讓用戶不理解。
小W:開關(guān)打開前后說明文案沒有差異,只通過UI狀態(tài)反饋真的已經(jīng)讓用戶清楚地知道開啟的狀態(tài)嗎?
開關(guān)狀態(tài)切換開關(guān)說明的無差別反饋
那么為了更好的幫助用戶理解開關(guān)操作生效與否,開關(guān)狀態(tài)切換還需不需要額外的反饋,如我們討論中的開關(guān)說明是否還需要差異反饋?
我們查閱了material design規(guī)范,并根據(jù)收集到的開關(guān)控件使用的關(guān)鍵2個關(guān)鍵點(diǎn)尋找解決方案。
1)開關(guān)控件的交互需立即生效
實(shí)際狀態(tài)有所延遲時應(yīng)顯示處理狀態(tài)基于這個關(guān)鍵點(diǎn),我們走查了一些APP發(fā)現(xiàn)有這樣的共性:直觀感受到操作后立即生效的效果,一般不會再設(shè)計(jì)額外反饋。
vivo手機(jī)深色模式和WiFi設(shè)置頁
2)開關(guān)控件的文本需幫助用戶理解【開關(guān)控制的選項(xiàng)含義】及其【所處的狀態(tài)】
這里的文本包含開關(guān)名稱和開關(guān)說明基于這個關(guān)鍵點(diǎn),我們也走查了一些APP發(fā)現(xiàn):當(dāng)開關(guān)名稱足夠簡單清晰且無歧義的描述了開關(guān)控制代表的含義及所處狀態(tài),一般也不再設(shè)計(jì)額外的反饋。
微信讀書截圖
基于以上分析,我們發(fā)現(xiàn)開關(guān)控件是否需要額外反饋的問題,本質(zhì)其實(shí)是需要先思考是否能讓用戶感受到立即生效。如果不能,則設(shè)計(jì)應(yīng)該提供反饋以幫助用戶理解開關(guān)控制代表的含義及其所處的狀態(tài)說明。
延伸那么開關(guān)狀態(tài)切換的反饋方式如何設(shè)計(jì)?
利用開關(guān)說明做切換反饋上文所述,material design描述中,文本的作用是幫助用戶理解【開關(guān)控制的選項(xiàng)含義】及其【所處的狀態(tài)】。
官方定義中文本不區(qū)分開關(guān)名稱和開關(guān)說明,統(tǒng)一叫做文本。那么為了更好的使用戶理解語義,也就不難明白為什么一些產(chǎn)品只有開關(guān)名稱沒有說明,有些則是二者都有。可能實(shí)際應(yīng)用中,設(shè)計(jì)師可以根據(jù)開關(guān)選項(xiàng)所代表的含義復(fù)雜程度,有時僅顯示開關(guān)名稱,有時需要顯示開關(guān)說明。
以此為標(biāo)準(zhǔn),我們的設(shè)計(jì)案例中,開關(guān)說明缺失了所處狀態(tài)的含義說明(開啟前后說明無變化)。
舊版方案
YY方案A:
按照規(guī)范定義,描述狀態(tài)。關(guān)閉時:未開啟,無法享受當(dāng)下最新、最熱的手游推薦;開啟時:已開啟,將為你不定期推薦當(dāng)下最新、最熱手游。
通過文本說明做反饋在實(shí)際的應(yīng)用中更靈活:增加業(yè)務(wù)訴求的考慮。未開啟時,不描述負(fù)面信息而是展示利益點(diǎn),吸引用戶開啟。
以美團(tuán)外賣為例:
美團(tuán)外賣截圖
YY方案B:
增加業(yè)務(wù)側(cè)考慮,描述開啟后的正向結(jié)果。關(guān)閉時:開啟后,可享受當(dāng)下最新、最熱手游推薦;開啟時:已開啟,將為你推薦當(dāng)下最新、最熱手游。
其他切換反饋方式:
日常使用其他產(chǎn)品時除了上述通過文本說明反饋,還可以使用toast和dialog的方式進(jìn)行反饋,但這兩種方式都相比文本說明有不同強(qiáng)度的提升。
toast,立即生效后的效果需要強(qiáng)化說明。
QQ音樂截圖
dialog,立即生效前有必要操作(授權(quán)等?;蚴?,立即生效前有必要告知(風(fēng)險等)。
?微信&QQ音樂截圖
總結(jié)開關(guān)設(shè)計(jì)的兩個思考:
1)開關(guān)狀態(tài)切換是否需要額外的反饋設(shè)計(jì)?
判斷用戶是否可以感受到操作后立即生效的效果;判斷開關(guān)文本是否足夠簡單清晰且無歧義的描述開關(guān)控制的含義及狀態(tài)。
2)開關(guān)狀態(tài)切換的反饋方式如何設(shè)計(jì)?
利用開關(guān)說明做切換反饋。也可以依據(jù)期望提醒強(qiáng)度的選擇是否使用toast或者dialog的方式進(jìn)行反饋。
作者:趙真是個有潛力的小胖子,微信公眾號:VMIC UED
本文由 @VMIC UED 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Pexles,基于 CC0 協(xié)議
寫的很細(xì)節(jié),普通人看到開關(guān)那個文案第一反應(yīng)會想到優(yōu)化方向(a方案),深入思考思路棒(B)