單選、復(fù)選、開(kāi)關(guān)應(yīng)該如何使用?

10 評(píng)論 19277 瀏覽 136 收藏 11 分鐘

今天來(lái)探討工作中遇到的一個(gè)問(wèn)題:?jiǎn)芜x、復(fù)選、開(kāi)關(guān)。先說(shuō)一下前提,淘寶的確認(rèn)訂單頁(yè)面,積分抵扣是用開(kāi)關(guān)做選擇的,而唯品用的是復(fù)選框,同樣都是選擇,復(fù)選框和開(kāi)關(guān)到底哪個(gè)更合適?和同事討論了半天也沒(méi)得出一個(gè)明確的原則。因此想寫(xiě)篇文章總結(jié)一下單選、復(fù)選、開(kāi)關(guān)應(yīng)該如何使用。

先來(lái)解釋一下單選、復(fù)選、開(kāi)關(guān)這三個(gè)詞的定義:

usidc-yml-201609081

單選,通常都在在圈圈中顯示圓點(diǎn)或者打鉤、在同一個(gè)列表中只能選擇一個(gè)選項(xiàng),點(diǎn)擊熱區(qū)為整個(gè)列表項(xiàng)。

usidc-yml-201609085

復(fù)選,通常都是在方框中打鉤選擇,或者沒(méi)有方框僅用打鉤選擇、在同一個(gè)列表中可以選擇多個(gè)選項(xiàng),點(diǎn)擊熱區(qū)為整個(gè)列表項(xiàng)。

usidc-yml-201609086

開(kāi)關(guān),擬物化開(kāi)關(guān)的扁平化設(shè)計(jì),常用于功能的開(kāi)啟和關(guān)閉,同一個(gè)列表中可以出現(xiàn)多個(gè)開(kāi)關(guān)。開(kāi)啟通常指開(kāi)啟及操作,即某個(gè)選項(xiàng)開(kāi)啟后,會(huì)有后續(xù)操作或者動(dòng)作;關(guān)閉通常指關(guān)閉某項(xiàng)功能,以及關(guān)閉功能下的選項(xiàng)。

例如,iOS系統(tǒng)設(shè)置中開(kāi)啟與關(guān)閉WiFi(如下圖)

usidc-yml-201609087

在詞條定義方面我們可以看出單選其實(shí)是爭(zhēng)議不大的,一般最常用的三種狀態(tài)如下:

1、只能選擇一個(gè)選項(xiàng)、且必須所有選項(xiàng)保持可見(jiàn)時(shí),在本頁(yè)面使用,下圖為唯品會(huì)結(jié)算頁(yè)面單選支付方式。

usidc-yml-201609088

2、只能選擇一個(gè)選項(xiàng)、且內(nèi)容不需要保持本頁(yè)面可見(jiàn)時(shí),在下級(jí)頁(yè)面進(jìn)行選擇時(shí)使用。下圖為淘寶確認(rèn)訂單頁(yè)面開(kāi)啟花唄分期后,在分期詳情頁(yè)面進(jìn)行單選。

usidc-yml-201609089

3、只能選擇一個(gè)選項(xiàng)、且內(nèi)容不需要保持本頁(yè)面可見(jiàn)時(shí),使用下拉菜單進(jìn)行選擇時(shí),下圖為京東白條頁(yè)面下拉菜單選擇優(yōu)惠券。

usidc-yml-2016090810

而復(fù)選和開(kāi)關(guān)是比較有爭(zhēng)議的,我們回到文章開(kāi)頭的問(wèn)題:淘寶的確認(rèn)訂單頁(yè)面,積分抵扣是用開(kāi)關(guān)做選擇的,而唯品用的是復(fù)選框,同樣都是選擇,復(fù)選框和開(kāi)關(guān)到底哪個(gè)更合適?我們來(lái)重點(diǎn)探討一下:

usidc-yml-2016090811

usidc-yml-2016090812

對(duì)比唯品會(huì)的結(jié)算頁(yè)和淘寶的確認(rèn)訂單頁(yè)面,唯品會(huì)無(wú)論是在Android系統(tǒng)還是iOS系統(tǒng),都使用了復(fù)選框并將優(yōu)惠的金額獨(dú)立顯示在列表項(xiàng)右側(cè);而且復(fù)選框點(diǎn)擊區(qū)域更大,更適合唯品幣、唯品卡這種誘導(dǎo)用戶享優(yōu)惠且比較隨意的選項(xiàng)。

而淘寶在Android上使用了復(fù)選框,且復(fù)選框的位置在列表右側(cè),優(yōu)惠金額和其他文字融合在一起,不夠獨(dú)立突出,也就是讓“用戶看到此優(yōu)惠可選”和“優(yōu)惠了多少錢(qián)”相比,淘寶選擇了先讓”用戶看到此優(yōu)惠可選“;但在iOS系統(tǒng)上,淘寶使用了開(kāi)關(guān),優(yōu)點(diǎn)是icon比較大,開(kāi)啟后視覺(jué)反饋更強(qiáng),缺點(diǎn)是和復(fù)選框相比點(diǎn)擊區(qū)域比較小,用戶操作需要更慎重更精準(zhǔn)。但為什么要在兩個(gè)系統(tǒng)中做出不同的設(shè)計(jì)?iOS系統(tǒng)和Android系統(tǒng)都頻繁使用開(kāi)關(guān),Material Design中也把開(kāi)關(guān)作為了基礎(chǔ)元件,并不存在差異化設(shè)計(jì)的需求,是為了做a/b test嗎?如果有淘寶的UED偶然看到這個(gè)問(wèn)題,可以來(lái)解答一下。

但是單從詞條定義上來(lái)說(shuō),唯品幣、唯品卡和天貓積分、天貓點(diǎn)券一樣,都是選擇了之后不會(huì)有后續(xù)操作的選項(xiàng),而且復(fù)選框和開(kāi)關(guān)相比,復(fù)選框點(diǎn)擊區(qū)域更大、更容易點(diǎn)擊,在這里使用復(fù)選框是更合理的選擇。

因此,我的結(jié)論是:

  1. 唯品會(huì)可以堅(jiān)持使用復(fù)選框,而且復(fù)選框放在左側(cè),更容易突出右側(cè)的優(yōu)惠金額,但選中后的視覺(jué)反饋可以作出加強(qiáng)。
  2. 淘寶上我更贊同天貓積分、點(diǎn)券等沒(méi)有后續(xù)操作的選項(xiàng)使用復(fù)選框,而花唄分期是開(kāi)啟后有后續(xù)操作且需要慎重選擇的選項(xiàng),使用開(kāi)關(guān)會(huì)更合適,在設(shè)計(jì)上可以區(qū)分對(duì)待。但如果考慮到設(shè)計(jì)的統(tǒng)一性,其他選項(xiàng)也可以使用開(kāi)關(guān)。

設(shè)計(jì)沒(méi)有對(duì)錯(cuò),只有合不合適。復(fù)選和開(kāi)關(guān)都能達(dá)到相同的效果,但不同APP的選擇卻不同,我們要弄清楚他們?yōu)槭裁匆@么設(shè)計(jì),知道不同設(shè)計(jì)的優(yōu)劣,才能在我們自己的設(shè)計(jì)中更好的運(yùn)用,而不是盲目模仿大公司的設(shè)計(jì)。

最后,給京東一點(diǎn)建議,如下圖:

usidc-yml-2016090813

左側(cè)這張圖片是京東白條現(xiàn)在選擇優(yōu)惠的設(shè)計(jì),當(dāng)用戶進(jìn)入購(gòu)物的心流狀態(tài)時(shí),很容易忽略白條優(yōu)惠,因?yàn)樗O(shè)計(jì)的實(shí)在太不明顯了。京東白條目前還是推廣階段,是希望更多的用戶因?yàn)閮?yōu)惠而嘗試使用京東白條的,因此在這個(gè)階段,建議使用更明顯的優(yōu)惠方式開(kāi)關(guān),開(kāi)啟后默認(rèn)選擇一個(gè)優(yōu)惠,且用戶可以下拉選擇其他優(yōu)惠。這樣的設(shè)計(jì)在視覺(jué)上更加吸引用戶,優(yōu)惠的反饋更強(qiáng)。

總結(jié)

usidc-yml-201609082

只能選擇一個(gè)選項(xiàng)、且必須所有選項(xiàng)保持可見(jiàn)時(shí),才使用單選框,不然可以使用下拉菜單或下級(jí)頁(yè)面

usidc-yml-201609083

在同一個(gè)列表有多項(xiàng)選擇,且選擇后不會(huì)有后續(xù)操作、建議使用復(fù)選框。但在某些場(chǎng)景下(例如購(gòu)物),選中后需要給出用戶更加明顯反饋。

usidc-yml-201609084

功能的開(kāi)啟與關(guān)閉、某個(gè)選項(xiàng)開(kāi)啟后,會(huì)有后續(xù)操作或者動(dòng)作、建議使用開(kāi)關(guān),如果不是需要用戶慎重選擇的選項(xiàng),開(kāi)關(guān)的點(diǎn)擊熱區(qū)可以設(shè)計(jì)的更大一些,方便用戶操作,當(dāng)然需要考慮視覺(jué)反饋和設(shè)計(jì)的一致性。

評(píng)論中有童鞋說(shuō)淘寶的設(shè)計(jì)也許根本沒(méi)有想那么多,這樣的設(shè)計(jì)是偶然的結(jié)果,分析偶然更像是一種意淫。但無(wú)論是淘寶、京東、唯品會(huì)的設(shè)計(jì),尤其是結(jié)算頁(yè)這么重要的頁(yè)面設(shè)計(jì),一定是他們的UED團(tuán)隊(duì)經(jīng)過(guò)深思熟慮,多種方案優(yōu)中選優(yōu)的結(jié)果,每一個(gè)icon、字體的大小、列表的間距都經(jīng)過(guò)了數(shù)次迭代。我不覺(jué)得是偶然的結(jié)果,至少我們團(tuán)隊(duì)每做一個(gè)需求都是提供幾個(gè)方案,每個(gè)方案都是細(xì)節(jié)上稍有不同,從中選取一個(gè)。

如果設(shè)計(jì)都是偶然的結(jié)果,那就不存在設(shè)計(jì)理論了,UED團(tuán)隊(duì)也就沒(méi)有多少存在的意義了,淘寶和京東我都不可能有用戶數(shù)據(jù),但我喜歡大膽的去分析他們的動(dòng)機(jī),大膽的去按照自己的想法去優(yōu)化,也許我的分析有一些正好是正確的呢,這是我個(gè)人的成長(zhǎng)方式。

我還在成長(zhǎng)期,很多觀點(diǎn)都是自己的大膽分析,皆不具有規(guī)范性參考、每個(gè)人的觀點(diǎn)都不同,用辯證的眼光去看,取其精華去其糟粕。

 

作者:圍脖上的嘟嘟王子

來(lái)源:http://www.uisdc.com/interaceton-checkbox-radio-switch

版權(quán)聲明:人人都是產(chǎn)品經(jīng)理尊重行業(yè)規(guī)范,所轉(zhuǎn)載的文章都注明作者和來(lái)源,若標(biāo)注有誤,請(qǐng)聯(lián)系主編QQ:419297645更改。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 樓主能咨詢個(gè)問(wèn)題嗎?天貓和京東的商品搜索結(jié)果頁(yè)。篩選項(xiàng)有些篩選是單選,有些是可以多選,例如同樣的材質(zhì),在天貓可以同時(shí)多選,但是在京東上可能只能單選,能解析下他們的設(shè)計(jì)思路嗎?

    來(lái)自廣東 回復(fù)
  2. 唯品會(huì)頁(yè)面上數(shù)字太多了,而且都是右對(duì)齊的,都占據(jù)了橫向顯著位置。這就為用戶標(biāo)記了太多的焦點(diǎn)。
    而淘寶靠右的數(shù)字都是重要的“結(jié)算金額”,相對(duì)不重要的優(yōu)惠金額就靠左。實(shí)際上用戶的視覺(jué)壓力是小了很多。同時(shí),有獨(dú)立行與開(kāi)關(guān)控件在,不怕用戶看不見(jiàn)優(yōu)惠。

    所以,我比較傾向淘寶

    另外一個(gè)考慮:
    淘寶的優(yōu)惠一般在標(biāo)價(jià)上,后面的一般都是積分優(yōu)惠,力度小。唯品會(huì)我沒(méi)用過(guò),似乎優(yōu)惠等力度還很大的,所以需要顯著標(biāo)識(shí)?

    來(lái)自廣東 回復(fù)
    1. 正解。 其實(shí)不管是開(kāi)關(guān)還是復(fù)選框,放在左邊還有右邊,都是界面元素和設(shè)計(jì)規(guī)范的統(tǒng)一性要求的。

      來(lái)自北京 回復(fù)
  3. 固執(zhí)的認(rèn)為,復(fù)選和單選有一個(gè)共同點(diǎn)是:在一組相似或相關(guān)的數(shù)據(jù)項(xiàng)中進(jìn)行選擇;開(kāi)關(guān)更像是變體的單選,兩個(gè)選項(xiàng),狀態(tài)相反的兩個(gè)數(shù)據(jù)項(xiàng);本文看到后,有兩點(diǎn)之前沒(méi)考慮過(guò),一是開(kāi)關(guān)適用于后續(xù)操作,二是復(fù)選框可以表達(dá)像開(kāi)關(guān)一樣的含義

    來(lái)自廣東 回復(fù)
  4. 作者寫(xiě)的很用心,之前真的沒(méi)有仔細(xì)研究過(guò)。個(gè)人理解,淘寶將選擇按鈕放置在右側(cè),是考慮到人的視覺(jué)流向和購(gòu)物心里的問(wèn)題——確認(rèn)是否選擇對(duì)應(yīng)優(yōu)惠,是查看完對(duì)應(yīng)內(nèi)容后再進(jìn)行抉擇,因此把文字放在左側(cè),進(jìn)行抉擇的按鈕放在右側(cè)。

    回復(fù)
    1. 回復(fù)
    2. 這個(gè)假設(shè)是很合理的。不過(guò)可能人眼識(shí)別的順序并非這么有邏輯。我們還是會(huì)傾向于快速識(shí)別到我們希望看到的信息,比如彩色的優(yōu)惠金額、減號(hào)等等。所以,邏輯上合適的閱讀順序,某些時(shí)候需要讓位于心理圖式-刺激-注意力的反射鏈

      來(lái)自廣東 回復(fù)
    3. 恩,受教了。

      回復(fù)
  5. 來(lái)自北京 回復(fù)
  6. 很有意思的討論,作者用心了!我覺(jué)得用復(fù)原框還是開(kāi)關(guān)得聯(lián)系上下文,這里的支付頁(yè)面,如果把下面的選項(xiàng)作為支付抵扣的一部分,使用復(fù)選框好,而花唄或白條是一種支付功能,而不是抵扣支付金額,所以用開(kāi)關(guān)合適。如果只能選一個(gè)就用單選框,多選就用復(fù)原框了。

    回復(fù)