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

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

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

問題來自一次旁聽:開關狀態切換前後,除了開關控制元件的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 字。

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