UI設計中switch開關設計總結

　　UI設計創(chuàng)新技能層出不窮，UI設計滿足著形形色色各種垂直化的需求,在設計方面大家也是想方設法去做一些創(chuàng)新,希望自己能夠在各種應用中脫穎而出,今天AAA教育郭老師就針對UI設計中switch開關設計總結進行簡單的說明。
 

　　開關狀態(tài)切換前后，除了開關控件的UI狀態(tài)，開關說明是否應該也有反饋差異?
 

　　背景
 

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

　　小W：開關打開前后說明文案沒有差異，只通過UI狀態(tài)反饋真的已經(jīng)讓用戶清楚的知道開啟的狀態(tài)嗎?

 

　　開關狀態(tài)切換開關說明的無差別反饋
 

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

　　思考
 

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

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

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

 

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

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

 

　　基于這個關鍵點，我們也走查了一些APP發(fā)現(xiàn)：當開關名稱足夠簡單清晰且無歧義的描述了開關控制代表的含義及所處狀態(tài)，一般也不再設計額外的反饋。
 

　　微信讀書截圖
 

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

　　延伸
 

　　那么開關狀態(tài)切換的反饋方式如何設計?
 

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

　　上文所述，material design描述中，文本的作用是幫助用戶理解「開關控制的選項含義」及其「所處的狀態(tài)」。官方定義中文本不區(qū)分開關名稱和開關說明，統(tǒng)一叫做文本。那么為了更好的使用戶理解語義，也就不難明白為什么一些產(chǎn)品只有開關名稱沒有說明，有些則是二者都有?？赡軐嶋H應用中，設計師可以根據(jù)開關選項所代表的含義復雜程度，有時僅顯示開關名稱，有時需要顯示開關說明。
 

　　以此為標準，我們的設計案例中，開關說明缺失了所處狀態(tài)的含義說明。(開啟前后說明無變化)

 

　　舊版方案
 

　　YY方案A：
 

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

 

　　YY方案A
 

　　#But..
 

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

 

　　美團外賣截圖
 

　　YY方案B：
 

　　增加業(yè)務側考慮，描述開啟后的正向結果。關閉時：開啟后，可享受當下最新、最熱手游推薦;開啟時：已開啟，將為你推薦當下最新、最熱手游。

 

　　YY方案B
 

　　2. 其他切換反饋方式
 

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

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

 

　　QQ音樂截圖
 

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

 

　　微信&QQ音樂截圖
 

　　總結
 

　　開關設計的兩個思考：
 

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

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

　　2. 開關狀態(tài)切換的反饋方式如何設計?
 

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

　　因此，您現(xiàn)在已經(jīng)了解了與UI設計師的工作相關的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關在該領域工作的更多相關文章。