選項篇 | 單選/復(fù)選/撥動開關(guān)的使用小技巧!

2022-7-3    seo達(dá)人


圖片

本篇文章將圍繞單選、復(fù)選、撥動開關(guān)三種選項元素的設(shè)計細(xì)節(jié)及使用場景展開分析,希望能幫助新手設(shè)計師避開選項設(shè)計的誤區(qū),為用戶打造出更好的操作體驗。

 

一、單選:獨(dú)一無二

1.什么是單選?

單選按鈕最早來源于老式的汽車收音機(jī)上的電臺頻道的切換按鍵,按下其中的一個按鍵就成為了被選中狀態(tài),其他就會被彈出,用戶可通過這種方式快速切換不同的電臺。

UI設(shè)計中,單選是指當(dāng)界面中存在兩個或以上的選項時,且各項之間相互排斥,用戶僅能在選項列表中選擇其中的一個來使用,即便反復(fù)選擇,最終的結(jié)果始終獨(dú)一無二。單選框有選中、未選中兩種狀態(tài)(極少數(shù)不可選),主要通過填充和描邊互換的樣式將當(dāng)前狀態(tài)反饋給用戶。

單選是一種較為精簡的模式,它至少包含兩個選項,為了提升操作效率,需要盡可能的將所有選項展示給用戶,無需多余的操作和思考,即能快速完成任務(wù)。如果是必填選項,最好提供一個與當(dāng)前用戶較匹配或選中率最大的一個選項作為默認(rèn)值,即便默認(rèn)值有誤,對用戶也不會有什么影響,因為用戶本來就需要去操作,可一旦匹配到對應(yīng)的用戶,就能免去這一步的作,且默認(rèn)值是經(jīng)過多方面分析、反復(fù)推敲后才進(jìn)行預(yù)設(shè),只會是有益無害。

圖片

2.單選組件樣式

1)按鈕式

按鈕樣式適合用在選項不多、文案不長的場景,可平鋪在界面中或以彈窗的方式呈現(xiàn)。例如,購買衣服時,品牌、尺碼、顏色都可以設(shè)計成按鈕樣式。

圖片

2)圓形組合

未選中都是淺灰色描邊的圓形,選中后,Android常見的是描邊變主色+內(nèi)圓點(diǎn)填充,而iOS更多則是描邊變填充+對勾圖標(biāo)組合。其實(shí)這些不重要,真的沒必要糾結(jié)是用圓點(diǎn)組合還是對勾組合樣式,只要在同一個產(chǎn)品中統(tǒng)一樣式即可,用戶不會因為這兩種表現(xiàn)方式的不同而影響后續(xù)的操作。

圖片

3)對鉤

對勾樣式經(jīng)常出現(xiàn)在彈窗列表選項中,只有選中后才會有“?”標(biāo)記,相比圓形組合,給用戶的引導(dǎo)性更強(qiáng)。

在單個任務(wù)中,首次進(jìn)入選擇頁面時,列表中沒有任何標(biāo)記(有默認(rèn)選項除外),選中條件后,標(biāo)記對勾的同時,無需其他操作即自動進(jìn)入下一步任務(wù)流程,再次回到選項列表時,系統(tǒng)會標(biāo)記上次的選擇作為參考。另外,這種樣式不會太過于局限選項的數(shù)量和字?jǐn)?shù)。

圖片

4)選擇器

通常作為表單項以彈窗的形式出現(xiàn),適合二級、三級聯(lián)動選項。例如:選擇地址(省/市/區(qū))、日期(年/月/日)、時間(時/分/秒)等選項較多且具有關(guān)聯(lián)性的選項組。

圖片

3.單選的使用準(zhǔn)則

首先要確保單選組件的可用性,所有單選項需要清晰的呈現(xiàn)給用戶,避免嵌套或隱藏二級單選,否則會影響結(jié)構(gòu)的識別性。

其次為確??勺x性,單選組件的布局要符合用戶認(rèn)知。選項較少且標(biāo)簽較短時,使用多行多列的按鈕式布局比較常見,例如電商APP的商品屬性選擇等;標(biāo)簽較長則使用圓形圖標(biāo)、對鉤樣式單列多行顯示,例如選擇退款原因;聯(lián)動選項需根據(jù)關(guān)聯(lián)的等級數(shù)量,在選擇器中多列顯示,例如三級聯(lián)動地址,省、市、區(qū)三列并行。如果將選項毫無章法的平鋪、標(biāo)簽/圖標(biāo)上下排布,會造成視覺動線混亂、內(nèi)容緊湊及一些不可預(yù)知的問題出現(xiàn)。

圖片

4.提供默認(rèn)選項

如果可以的話,盡量給用戶提供一個默認(rèn)選項,這并非隨意設(shè)定,需要經(jīng)過多方面分析綜合決定。舉個例子,你的產(chǎn)品屬社交類型,大多數(shù)為男性用戶,那么將男性設(shè)定為默認(rèn)的性別選擇,這類用戶就可以直接跳過這一步,節(jié)約了大量用戶的操作成本,即便面對的是女性用戶,這也不影響原本就需要手動選擇的步驟。默認(rèn)選項需合理設(shè)定,切不可亂用,否則一些“偷懶”的用戶并不會更換默認(rèn)選項,導(dǎo)致后續(xù)數(shù)據(jù)分析的精準(zhǔn)度。

圖片

 

二、復(fù)選:循環(huán)往復(fù)

1.什么是復(fù)選?

復(fù)選操作不會像單選那樣出現(xiàn)信息阻隔,也沒有撥動開關(guān)那么強(qiáng)的視覺干擾,通常包含一個或多個選項供用戶選擇,其選項條件不是互斥的,用戶可從中選擇一項或者多項,具體情況則根據(jù)選項條件的限制而定。

1)選擇一項

一些設(shè)計師將復(fù)選理解為多選,且先不論對錯,筆者想說明的是,多選只不過是復(fù)選的一種選擇方式。在真實(shí)的設(shè)計中,有很多場景是不設(shè)限的,我們可以將選中/未選中理解為“是/否、同意/不同意、開啟/關(guān)閉……”等意思。例如,注冊頁面中必定存在的「用戶服務(wù)協(xié)議」,單個選項可反復(fù)操作;管理系統(tǒng)或B端的批量操作、權(quán)限設(shè)置等,選擇其中的一項也可進(jìn)入下一步操作流程。

圖片

2)選擇多項

強(qiáng)制多選一般會設(shè)定需選擇數(shù)量的下限和上限。例如:首次進(jìn)入某些APP時,需選擇個性化定制標(biāo)簽,通常最少不低于3項,最多不超過6項;還有,在填寫調(diào)查問卷的多項選擇時,最少選中兩項、不設(shè)上限等,這些就是復(fù)選中真正意義上的多選。

圖片

2.復(fù)選的使用準(zhǔn)則

相比單選,復(fù)選需要配備提交按鈕,提交后才會記錄被選中的信息。對于批量性的選項操作,復(fù)選框的操作效率比撥動開關(guān)要高出許多,例如,在某些頁面開啟/關(guān)閉幾個權(quán)限,每個權(quán)限用單獨(dú)的撥動開關(guān)進(jìn)行控制,完全沒問題,但涉及到幾十個權(quán)限的控制,這種批量操作使用復(fù)選框一定是最佳的選擇,只要用戶能清楚操作之后會發(fā)生什么即可。

圖片

3.常見的使用場景

1)標(biāo)簽選擇

個性化標(biāo)簽選擇中最為常見,在標(biāo)簽文字、選項數(shù)量較少的情況下,使用外觀大小完全相同的標(biāo)簽按鈕多列顯示,有助于用戶瀏覽,還能節(jié)約頁面縱向空間,用淺色描邊/主色填充或明暗等級來區(qū)分選中/未選中狀態(tài),部分產(chǎn)品還會在選中的狀態(tài)上增加一個小圖標(biāo)(?、+/-),區(qū)分會更加明顯。這種方式切記標(biāo)簽不能過長,否則可能會導(dǎo)致文字折行或容器內(nèi)很擁擠,不利于用戶閱讀。

圖片

2)列表選擇

當(dāng)選項過多、標(biāo)簽長短不一時,適合使用列表式選擇。WEB端常見的是圓角矩形勾選填充,例如管理系統(tǒng)的商品列表;移動端更多則是原型勾選填充,例如購物車,當(dāng)然并沒有明顯的界定,所有頁面統(tǒng)一樣式即可。

圖片

4.未定狀態(tài)

與單選視覺樣式唯一不同的是多了一個未定狀態(tài)。常見于管理系統(tǒng)或B端,當(dāng)選項存在多個子級時,只是某些子級被選中,但并未全部選中,這時父級狀態(tài)尚不確定,即為未定狀態(tài)。

圖片

 

三、撥動開關(guān):白天與黑夜

1.什么是撥動開關(guān)?

撥動開關(guān)就像生活中控制燈泡的開關(guān),它是在兩個互斥的選項中始終存在默認(rèn)值、且操作會立即生效的按鈕,操作后必定是對立的選項,例如開啟/關(guān)閉、是/否、同意/不同意等。

圖片

2.撥動開關(guān)的使用準(zhǔn)則

撥動開關(guān)必須表意明確,用戶在操作之前就能清楚操作后會發(fā)生什么,使用時,需遵循以下原則:

  • 用于操作后立即生效的場景;
  • 標(biāo)簽和按鈕是兩個分離的視覺焦點(diǎn),當(dāng)用戶有可能產(chǎn)生疑惑、或標(biāo)簽不足以言明時,需增加輔助文字予以說明;
  • 主要用于控制全局,權(quán)重較高,針對單個任務(wù)流程的控制,請使用單選/復(fù)選;
  • 默認(rèn)就是開啟/關(guān)閉狀態(tài),若存在子級,父級關(guān)閉的同時將子級隱藏(避免置灰);
  • 當(dāng)操作有風(fēng)險時,必須給予明確的提示;
  • 避免大面積使用,如果存在太多需要開啟/關(guān)閉的條件,建議使用復(fù)選;

3.背景與文案

撥動開關(guān)的背景通常只介于兩種狀態(tài),關(guān)閉狀態(tài)下為置灰(全服通用),開啟后為綠色,也有很多產(chǎn)品將其設(shè)定為品牌色,統(tǒng)一顏色樣式即可。

輔助文案常見有兩種類型,第一種為當(dāng)前狀態(tài)反饋,例如:獲取設(shè)備通知權(quán)限“消息推送已開啟/關(guān)閉”,這種反饋在應(yīng)用中可靈活運(yùn)用,尤其是在關(guān)閉狀態(tài)下,可起到一定的引導(dǎo)作用。第二種為標(biāo)簽輔助提示,例如:操作后的好處或風(fēng)險,告知用戶會發(fā)生什么,提前讓用戶有一定的心理預(yù)期。

圖片

 

四、單選控件的糾葛

1.單選框vs復(fù)選框

是用單選框還是用復(fù)選框,似乎是最好界定的,筆者查閱了很多資料,得到的信息是“需選擇一個選項用單選、多個選項用復(fù)選”,答案出奇的一致,這好像什么都說了(確實(shí)如此)、又好像什么都沒說(是個設(shè)計師都懂),當(dāng)我們仔細(xì)分析之會發(fā)現(xiàn),并非僅僅如此。

在PC端遇到兩個對立的選項(如:是/否、同意/不同意、通過/不通過)時,除了用兩個單選項之外,也可以使用復(fù)選框,尤其是在權(quán)限控制中,必定是復(fù)選。另外,移動端注冊登錄流程中,用戶服務(wù)協(xié)議也是最具代表性的復(fù)選框(同意/不同意二選一)使用案例。除去這些特殊的使用場景,其他大部分就直接單選。

2.單選框vs撥動開關(guān)

僅存在兩個選項時,單選與撥動開關(guān)的使用,有一些設(shè)計師就將其混淆了。筆者曾遇到過這樣的設(shè)計案例,有產(chǎn)品將性別(男/女)、O2O取貨方式(送貨上門/到店自取)只有兩個選項的任務(wù)用撥動開關(guān)來呈現(xiàn),操作后,通過開關(guān)上的滑塊左右移動+文案輔助來確定當(dāng)前選中的條件。筆者認(rèn)為,這種方式不可取,最大的弊端就是在當(dāng)前狀態(tài)下,用戶并不知道另一個選項是什么,需要通過猜測或試錯來確定,無疑讓增加了任務(wù)的完成難度,也打破了用戶對常用操作的固有認(rèn)知。

至于什么時候需要用撥動開關(guān),上述3-2《撥動開關(guān)的使用準(zhǔn)則》中有詳細(xì)說明,除此之外使用單選框,能解決設(shè)計中80%的單選與撥動開關(guān)的選擇性問題。

3.單選框vs下拉列表

選項較少可直接在當(dāng)前頁面用單選框(選擇性別)、按鈕(標(biāo)簽)呈現(xiàn),當(dāng)用戶需要在大量的選項中進(jìn)行選擇時,PC端可使用下拉列表,移動端更多使用的是操作欄彈窗或跳轉(zhuǎn)到新頁面讓用戶操作。其實(shí)這方面沒有明確的界限,需根據(jù)使用場景以及選項的屬性根據(jù)實(shí)際情況靈活變動。

 

五、必備常識和使用技巧

1.選項的幾種狀態(tài)

單選、復(fù)選、撥動開關(guān)各自都有不同的狀態(tài),在設(shè)計之前,設(shè)計師需要清楚地知道這些狀態(tài)所代表的含義以及不同的使用場景,避免后續(xù)在使用中給用戶造成困擾。

圖片

2.符合用戶認(rèn)知的控件樣式

首先,選項框樣式應(yīng)符合用戶認(rèn)知,不能為了所謂的差異化、個性化打破用戶固有認(rèn)知,而帶來額外的認(rèn)知負(fù)擔(dān)。例如單選/復(fù)選常見的是圓形填充+對鉤(PC端)、圓角矩形填充+對鉤(移動端)兩種方式,雖然這并不是唯一,但至少不會出錯。雖然鼓勵跳出常規(guī)的設(shè)計思維做出改變,但一切都以不增加用戶使用難度、提供更好的用戶體驗為出發(fā)點(diǎn),不然還不如不變。

圖片

3.注意對齊方式

按鈕式不用多說,文字跟容器上下左右居中。列表中的對齊方式無非兩種,選項框在前,文字和選項框都是左對齊,單選/復(fù)選均可采用這種方式;選項框在后,則文字左對齊、選項框右對齊,采用這種方式的單選居多;撥動開關(guān)則是全網(wǎng)統(tǒng)一,標(biāo)簽左對齊,開/關(guān)右對齊。

圖片

4.清晰簡短的標(biāo)簽

選項標(biāo)簽需清晰簡短、直接表達(dá)核心含義,盡量避免否定的表達(dá)方式,以免用戶產(chǎn)生誤解。像撥動開關(guān)這種兩極分化的選項,當(dāng)用戶不清楚對立的選項內(nèi)容時,可以使用副標(biāo)題進(jìn)行描述,讓用戶在操作之前有一定的心理預(yù)期。

5.批量選擇、節(jié)約作成本

雖然都是將選擇權(quán)交給用戶,但面對不同的場景,需提供一個「全選」操作,幫助用戶一次完成多個重復(fù)的操作,降低操作成本。

例如:B端的內(nèi)容管理,批量操作能節(jié)省很多時間,還能降低因多次重復(fù)操作產(chǎn)生的失誤概率;C端最具代表性的有購物車、以及初次進(jìn)入部分應(yīng)用時的個性化標(biāo)簽選擇。

圖片

6.觸控?zé)釁^(qū)的設(shè)定

針對移動端,點(diǎn)擊區(qū)域切勿直接使用選項框的范圍大小,需單獨(dú)設(shè)定熱區(qū)范圍。大家都知道,大拇指在移動端應(yīng)用中使用頻率是最高的,相對來說,要有足夠大(非絕對)的操作區(qū)域以供手指進(jìn)行精準(zhǔn)交互,以免無效操作或操作失誤。需要將文本標(biāo)簽、選項框以及各選項區(qū)域均分后四周的留白都作為觸動熱區(qū),操作起來就會輕松很多。

圖片

 

六、結(jié)語

本文筆者主要總結(jié)了單選、復(fù)選、撥動開關(guān)的使用規(guī)范及常見問題,不過設(shè)計規(guī)范只是基于產(chǎn)品本身構(gòu)建的一個標(biāo)準(zhǔn),為了約束后續(xù)的視覺統(tǒng)一而存在的規(guī)范參考。在真實(shí)的設(shè)計中,這些設(shè)計規(guī)范并不是唯一,需要根據(jù)產(chǎn)品的特點(diǎn)和使用場景進(jìn)行靈活變動,設(shè)計出最適合自身產(chǎn)品的控件才是最重要的。

遵循設(shè)計規(guī)范只是最基礎(chǔ)的標(biāo)準(zhǔn),遵循的同時跳出規(guī)范的束縛才會有創(chuàng)意,這就離不開我們平時的積累,鉆研各產(chǎn)品中優(yōu)秀的設(shè)計細(xì)節(jié),通過查漏補(bǔ)缺、揚(yáng)長避短,在其他產(chǎn)品的亮點(diǎn)中找到與自身產(chǎn)品的平衡點(diǎn)并將其融合,這才是我們學(xué)習(xí)和總結(jié)的最終目的。

 

原文地址:能量星球

作者:大漠飛鷹CYSJ

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》選項篇 | 單選/復(fù)選/撥動開關(guān)的使用小技巧!

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



日歷

鏈接

個人資料

存檔