旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國(guó)統(tǒng)一咨詢(xún)熱線(xiàn):010-5367 2995
首頁(yè) > 熱門(mén)文章 > UI設(shè)計(jì) > UI設(shè)計(jì)中switch開(kāi)關(guān)設(shè)計(jì)總結(jié)

UI設(shè)計(jì)中switch開(kāi)關(guān)設(shè)計(jì)總結(jié)

時(shí)間:2020-09-01來(lái)源:m.5wd995.cn點(diǎn)擊量:作者:Gella
時(shí)間:2020-09-01點(diǎn)擊量:作者:Gella

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

  開(kāi)關(guān)狀態(tài)切換前后,除了開(kāi)關(guān)控件的UI狀態(tài),開(kāi)關(guān)說(shuō)明是否應(yīng)該也有反饋差異?
 

  背景
 

  小L:開(kāi)關(guān)打開(kāi)和關(guān)閉可以通過(guò)開(kāi)關(guān)控件的UI反饋,所以開(kāi)啟前后說(shuō)明文案沒(méi)有差別也不會(huì)讓用戶(hù)不理解.
 

  小W:開(kāi)關(guān)打開(kāi)前后說(shuō)明文案沒(méi)有差異,只通過(guò)UI狀態(tài)反饋真的已經(jīng)讓用戶(hù)清楚的知道開(kāi)啟的狀態(tài)嗎?

 



 

  開(kāi)關(guān)狀態(tài)切換開(kāi)關(guān)說(shuō)明的無(wú)差別反饋
 

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

  思考
 

  我們查閱了material design規(guī)范,并根據(jù)收集到的開(kāi)關(guān)控件使用的關(guān)鍵2個(gè)關(guān)鍵點(diǎn)尋找解決方案。
 

  1. 開(kāi)關(guān)控件的交互需立即生效。實(shí)際狀態(tài)有所延遲時(shí)應(yīng)顯示處理狀態(tài)
 

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

 



 

  vivo手機(jī)深色模式和WiFi設(shè)置頁(yè)
 

  2. 開(kāi)關(guān)控件的文本需幫助用戶(hù)理解「開(kāi)關(guān)控制的選項(xiàng)含義」及其「所處的狀態(tài)」。這里的文本包含開(kāi)關(guān)名稱(chēng)和開(kāi)關(guān)說(shuō)明

 



 

  基于這個(gè)關(guān)鍵點(diǎn),我們也走查了一些APP發(fā)現(xiàn):當(dāng)開(kāi)關(guān)名稱(chēng)足夠簡(jiǎn)單清晰且無(wú)歧義的描述了開(kāi)關(guān)控制代表的含義及所處狀態(tài),一般也不再設(shè)計(jì)額外的反饋。
 

  微信讀書(shū)截圖
 

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

  延伸
 

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

  1. 利用開(kāi)關(guān)說(shuō)明做切換反饋
 

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

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

 



 

  舊版方案
 

  YY方案A:
 

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

 



 

  YY方案A
 

  #But..
 

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

 



 

  美團(tuán)外賣(mài)截圖
 

  YY方案B:
 

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

 



 

  YY方案B
 

  2. 其他切換反饋方式
 

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

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

 



 

  QQ音樂(lè)截圖
 

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

 



 

  微信&QQ音樂(lè)截圖
 

  總結(jié)
 

  開(kāi)關(guān)設(shè)計(jì)的兩個(gè)思考:
 

  1. 開(kāi)關(guān)狀態(tài)切換是否需要額外的反饋設(shè)計(jì)?
 

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

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

  利用開(kāi)關(guān)說(shuō)明做切換反饋。也可以依據(jù)期望提醒強(qiáng)度的選擇是否使用toast或者dialog的方式進(jìn)行反饋。
 

  因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息,請(qǐng)?jiān)L問(wèn)AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。


 

預(yù)約申請(qǐng)免費(fèi)試聽(tīng)課

填寫(xiě)下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽(tīng)!怕錢(qián)不夠?可先就業(yè)掙錢(qián)后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號(hào):京ICP備12034770號(hào)

老師想和你聊一聊

?2007-2022/ m.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話(huà):010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號(hào)

網(wǎng)站地圖