編輯導(dǎo)讀：在使用產(chǎn)品時(shí)，開(kāi)關(guān)狀態(tài)的使用非常廣泛。好的開(kāi)關(guān)設(shè)計(jì)能幫助用戶理解開(kāi)關(guān)操作生效與否，是用戶體驗(yàn)中重要的一環(huán)。本文作者基于自身工作經(jīng)驗(yàn)，對(duì)開(kāi)關(guān)狀態(tài)的設(shè)計(jì)提出了自己的一點(diǎn)思考，希望對(duì)你有幫助。

問(wèn)題來(lái)自一次旁聽(tīng)：開(kāi)關(guān)狀態(tài)切換前后，除了開(kāi)關(guān)控件的UI狀態(tài)，開(kāi)關(guān)說(shuō)明是否應(yīng)該也有反饋差異？我覺(jué)得還挺有意思的。

小L：開(kāi)關(guān)打開(kāi)和關(guān)閉可以通過(guò)開(kāi)關(guān)控件的UI反饋，所以開(kāi)啟前后說(shuō)明文案沒(méi)有差別也不會(huì)讓用戶不理解。

小W：開(kāi)關(guān)打開(kāi)前后說(shuō)明文案沒(méi)有差異，只通過(guò)UI狀態(tài)反饋真的已經(jīng)讓用戶清楚地知道開(kāi)啟的狀態(tài)嗎？

開(kāi)關(guān)狀態(tài)切換開(kāi)關(guān)說(shuō)明的無(wú)差別反饋

那么為了更好的幫助用戶理解開(kāi)關(guān)操作生效與否，開(kāi)關(guān)狀態(tài)切換還需不需要額外的反饋，如我們討論中的開(kāi)關(guān)說(shuō)明是否還需要差異反饋？

我們查閱了material design規(guī)范，并根據(jù)收集到的開(kāi)關(guān)控件使用的關(guān)鍵2個(gè)關(guān)鍵點(diǎn)尋找解決方案。

1）開(kāi)關(guān)控件的交互需立即生效

實(shí)際狀態(tài)有所延遲時(shí)應(yīng)顯示處理狀態(tài)基于這個(gè)關(guān)鍵點(diǎn)，我們走查了一些APP發(fā)現(xiàn)有這樣的共性：直觀感受到操作后立即生效的效果，一般不會(huì)再設(shè)計(jì)額外反饋。

vivo手機(jī)深色模式和WiFi設(shè)置頁(yè)

2）開(kāi)關(guān)控件的文本需幫助用戶理解【開(kāi)關(guān)控制的選項(xiàng)含義】及其【所處的狀態(tài)】

這里的文本包含開(kāi)關(guān)名稱和開(kāi)關(guān)說(shuō)明基于這個(gè)關(guān)鍵點(diǎn)，我們也走查了一些APP發(fā)現(xiàn)：當(dāng)開(kāi)關(guān)名稱足夠簡(jiǎn)單清晰且無(wú)歧義的描述了開(kāi)關(guān)控制代表的含義及所處狀態(tài)，一般也不再設(shè)計(jì)額外的反饋。

微信讀書(shū)截圖

基于以上分析，我們發(fā)現(xiàn)開(kāi)關(guān)控件是否需要額外反饋的問(wèn)題，本質(zhì)其實(shí)是需要先思考是否能讓用戶感受到立即生效。如果不能，則設(shè)計(jì)應(yīng)該提供反饋以幫助用戶理解開(kāi)關(guān)控制代表的含義及其所處的狀態(tài)說(shuō)明。

延伸那么開(kāi)關(guān)狀態(tài)切換的反饋方式如何設(shè)計(jì)？

利用開(kāi)關(guān)說(shuō)明做切換反饋上文所述，material design描述中，文本的作用是幫助用戶理解【開(kāi)關(guān)控制的選項(xiàng)含義】及其【所處的狀態(tài)】。

官方定義中文本不區(qū)分開(kāi)關(guān)名稱和開(kāi)關(guān)說(shuō)明，統(tǒng)一叫做文本。那么為了更好的使用戶理解語(yǔ)義，也就不難明白為什么一些產(chǎn)品只有開(kāi)關(guān)名稱沒(méi)有說(shuō)明，有些則是二者都有?？赡軐?shí)際應(yīng)用中，設(shè)計(jì)師可以根據(jù)開(kāi)關(guān)選項(xiàng)所代表的含義復(fù)雜程度，有時(shí)僅顯示開(kāi)關(guān)名稱，有時(shí)需要顯示開(kāi)關(guān)說(shuō)明。

以此為標(biāo)準(zhǔn)，我們的設(shè)計(jì)案例中，開(kāi)關(guān)說(shuō)明缺失了所處狀態(tài)的含義說(shuō)明（開(kāi)啟前后說(shuō)明無(wú)變化）。

舊版方案

YY方案A：

按照規(guī)范定義，描述狀態(tài)。關(guān)閉時(shí)：未開(kāi)啟，無(wú)法享受當(dāng)下最新、最熱的手游推薦；開(kāi)啟時(shí)：已開(kāi)啟，將為你不定期推薦當(dāng)下最新、最熱手游。

通過(guò)文本說(shuō)明做反饋在實(shí)際的應(yīng)用中更靈活：增加業(yè)務(wù)訴求的考慮。未開(kāi)啟時(shí)，不描述負(fù)面信息而是展示利益點(diǎn)，吸引用戶開(kāi)啟。

以美團(tuán)外賣為例：

美團(tuán)外賣截圖

YY方案B：

增加業(yè)務(wù)側(cè)考慮，描述開(kāi)啟后的正向結(jié)果。關(guān)閉時(shí)：開(kāi)啟后，可享受當(dāng)下最新、最熱手游推薦；開(kāi)啟時(shí)：已開(kāi)啟，將為你推薦當(dāng)下最新、最熱手游。

其他切換反饋方式：

日常使用其他產(chǎn)品時(shí)除了上述通過(guò)文本說(shuō)明反饋，還可以使用toast和dialog的方式進(jìn)行反饋，但這兩種方式都相比文本說(shuō)明有不同強(qiáng)度的提升。

toast，立即生效后的效果需要強(qiáng)化說(shuō)明。

QQ音樂(lè)截圖

dialog，立即生效前有必要操作（授權(quán)等。或是，立即生效前有必要告知（風(fēng)險(xiǎn)等）。

?微信&QQ音樂(lè)截圖

總結(jié)開(kāi)關(guān)設(shè)計(jì)的兩個(gè)思考：

1）開(kāi)關(guān)狀態(tài)切換是否需要額外的反饋設(shè)計(jì)？

判斷用戶是否可以感受到操作后立即生效的效果；判斷開(kāi)關(guān)文本是否足夠簡(jiǎn)單清晰且無(wú)歧義的描述開(kāi)關(guān)控制的含義及狀態(tài)。

2）開(kāi)關(guān)狀態(tài)切換的反饋方式如何設(shè)計(jì)？

利用開(kāi)關(guān)說(shuō)明做切換反饋。也可以依據(jù)期望提醒強(qiáng)度的選擇是否使用toast或者dialog的方式進(jìn)行反饋。

作者：趙真是個(gè)有潛力的小胖子，微信公眾號(hào)：VMIC UED

本文由 @VMIC UED 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Pexles，基于 CC0 協(xié)議