開關狀態切換的設計,這幾點要重視

編輯導讀:在使用產品時,開關狀態的使用非常廣泛。好的開關設計能幫助用户理解開關操作生效與否,是用户體驗中重要的一環。本文作者基於自身工作經驗,對開關狀態的設計提出了自己的一點思考,希望對你有幫助。

開關狀態切換的設計,這幾點要重視

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

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

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

開關狀態切換的設計,這幾點要重視
開關狀態切換的設計,這幾點要重視

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

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

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

1)開關控件的交互需立即生效

實際狀態有所延遲時應顯示處理狀態基於這個關鍵點,我們走查了一些APP發現有這樣的共性:直觀感受到操作後立即生效的效果,一般不會再設計額外反饋。

開關狀態切換的設計,這幾點要重視

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

2)開關控件的文本需幫助用户理解【開關控制的選項含義】及其【所處的狀態】

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

開關狀態切換的設計,這幾點要重視

微信讀書截圖

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

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

利用開關説明做切換反饋上文所述,material design描述中,文本的作用是幫助用户理解【開關控制的選項含義】及其【所處的狀態】。

官方定義中文本不區分開關名稱和開關説明,統一叫做文本。那麼為了更好的使用户理解語義,也就不難明白為什麼一些產品只有開關名稱沒有説明,有些則是二者都有。可能實際應用中,設計師可以根據開關選項所代表的含義複雜程度,有時僅顯示開關名稱,有時需要顯示開關説明。

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

開關狀態切換的設計,這幾點要重視
開關狀態切換的設計,這幾點要重視

舊版方案

YY方案A:

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

開關狀態切換的設計,這幾點要重視
開關狀態切換的設計,這幾點要重視

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

以美團外賣為例:

開關狀態切換的設計,這幾點要重視

美團外賣截圖

YY方案B:

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

開關狀態切換的設計,這幾點要重視
開關狀態切換的設計,這幾點要重視

其他切換反饋方式:

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

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

開關狀態切換的設計,這幾點要重視

QQ音樂截圖

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

開關狀態切換的設計,這幾點要重視

微信&QQ音樂截圖

總結開關設計的兩個思考:

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

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

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

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

作者:趙真是個有潛力的小胖子,微信公眾號:VMIC UED

本文由 @VMIC UED 原創發佈於人人都是產品經理,未經許可,禁止轉載

題圖來自Pexles,基於 CC0 協議

版權聲明:本文源自 網絡, 於,由 楠木軒 整理發佈,共 1563 字。

轉載請註明: 開關狀態切換的設計,這幾點要重視 - 楠木軒