開關(guān)控件的交互設(shè)計(jì)
發(fā)布時(shí)間:2022-01-20 11:04 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 2338


背景


問題來自一次旁聽:開關(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)狀態(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)有所延遲時(shí)應(yīng)顯示處理狀態(tài)

基于這個關(guān)鍵點(diǎn),我們走查了一些APP發(fā)現(xiàn)有這樣的共性:直觀感受到操作后立即生效的效果,一般不會再設(shè)計(jì)額外反饋。

切換開關(guān)后,是否還需要通過文案說明狀態(tài)?

△ 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ì)額外的反饋。

切換開關(guān)后,是否還需要通過文案說明狀態(tài)?

△ 微信讀書截圖

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


延伸


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

1. 利用開關(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ù)雜程度,有時(shí)僅顯示開關(guān)名稱,有時(shí)需要顯示開關(guān)說明。

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

切換開關(guān)后,是否還需要通過文案說明狀態(tài)?

△ 舊版方案

YY方案A:

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

切換開關(guān)后,是否還需要通過文案說明狀態(tài)?

△ YY方案A

#But..

通過文本說明做反饋在實(shí)際的應(yīng)用中更靈活:增加業(yè)務(wù)訴求的考慮。未開啟時(shí),不描述負(fù)面信息而是展示利益點(diǎn),吸引用戶開啟。以美團(tuán)外賣為例:

切換開關(guān)后,是否還需要通過文案說明狀態(tài)?

△ 美團(tuán)外賣截圖

YY方案B:

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

切換開關(guān)后,是否還需要通過文案說明狀態(tài)?

△ YY方案B

2. 其他切換反饋方式

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

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

切換開關(guān)后,是否還需要通過文案說明狀態(tài)?

△ QQ音樂截圖

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

切換開關(guān)后,是否還需要通過文案說明狀態(tài)?

△ 微信&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)行反饋。

UI交互app及axure設(shè)計(jì)教程
我要自學(xué)網(wǎng)商城 ¥50 元
進(jìn)入購買
文章評論
添加表情
遵守中華人民共和國的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計(jì) 會計(jì)課程 興趣成長 AIGC