背景

問題來自一次旁聽:開關狀態切換前後,除了開關控件的UI狀態,開關說明是否應該也有反饋差異?我覺得還挺有意思的。

小L:開關打開和關閉可以通過開關控件的UI反饋,所以開啓前後說明文案沒有差別也不會讓用戶不理解.

小W:開關打開前後說明文案沒有差異,只通過UI狀態反饋真的已經讓用戶清楚的知道開啓的狀態嗎?

△ 開關狀態切換開關說明的無差別反饋

那麼爲了更好的幫助用戶理解開關操作生效與否,開關狀態切換還需不需要額外的反饋,如我們討論中的開關說明是否還需要差異反饋?

思考

我們查閱了material design規範,並根據收集到的開關控件使用的關鍵2個關鍵點尋找解決方案。

1. 開關控件的交互需立即生效。實際狀態有所延遲時應顯示處理狀態

基於這個關鍵點,我們走查了一些APP發現有這樣的共性:直觀感受到操作後立即生效的效果,一般不會再設計額外反饋。

△ vivo手機深色模式和WiFi設置頁

2. 開關控件的文本需幫助用戶理解「開關控制的選項含義」及其「所處的狀態」。這裏的文本包含開關名稱和開關說明

基於這個關鍵點,我們也走查了一些APP發現:當開關名稱足夠簡單清晰且無歧義的描述了開關控制代表的含義及所處狀態,一般也不再設計額外的反饋。

△微信讀書截圖

基於以上分析,我們發現開關控件是否需要額外反饋的問題本質其實是需要先思考是否能讓用戶感受到立即生效。如果不能,則設計應該提供反饋以幫助用戶理解開關控制代表的含義及其所處的狀態說明。

延伸

那麼開關狀態切換的反饋方式如何設計?

1. 利用開關說明做切換反饋

上文所述,material design描述中,文本的作用是幫助用戶理解「開關控制的選項含義」及其「所處的狀態」。官方定義中文本不區分開關名稱和開關說明,統一叫做文本。那麼爲了更好的使用戶理解語義,也就不難明白爲什麼一些產品只有開關名稱沒有說明,有些則是二者都有。可能實際應用中,設計師可以根據開關選項所代表的含義複雜程度,有時僅顯示開關名稱,有時需要顯示開關說明。

以此爲標準,我們的設計案例中,開關說明缺失了所處狀態的含義說明。(開啓前後說明無變化)

△ 舊版方案

YY方案A:

按照規範定義,描述狀態。關閉時:未開啓,無法享受當下最新、最熱的手遊推薦;開啓時:已開啓,將爲你不定期推薦當下最新、最熱手遊。

△ YY方案A

#But..

通過文本說明做反饋在實際的應用中更靈活:增加業務訴求的考慮。未開啓時,不描述負面信息而是展示利益點,吸引用戶開啓。以美團外賣爲例:

△ 美團外賣截圖

YY方案B:

增加業務側考慮,描述開啓後的正向結果。關閉時:開啓後,可享受當下最新、最熱手遊推薦;開啓時:已開啓,將爲你推薦當下最新、最熱手遊。

△ YY方案B

2. 其他切換反饋方式

日常使用其他產品時除了上述通過文本說明反饋還可以使用toast和dialog的方式進行反饋。但這兩種方式都相比文本說明有不同強度的提升。

toast。立即生效後的效果需要強化說明。

△ QQ音樂截圖

dialog。立即生效前有必要操作(授權等),或是,立即生效前有必要告知(風險等)。

△ 微信&QQ音樂截圖

總結

開關設計的兩個思考:

1. 開關狀態切換是否需要額外的反饋設計?

判斷用戶是否可以感受到操作後立即生效的效果;判斷開關文本是否足夠簡單清晰且無歧義的描述開關控制的含義及狀態。

2. 開關狀態切換的反饋方式如何設計?

利用開關說明做切換反饋。也可以依據期望提醒強度的選擇是否使用toast或者dialog的方式進行反饋。

更多關於開關的深度教學:

歡迎關注作者微信公衆號:「VMIC UED」

相關文章