本期文章主要研究單選和多選控件的設(shè)計(jì)細(xì)節(jié)，雖然是很常見(jiàn)的控件設(shè)計(jì)，但是也是有非常多需要注意的地方。能提煉總結(jié)常見(jiàn)事物的一般規(guī)律，這本身就是一件值得大家都去做的一件事。

無(wú)論是從個(gè)性化內(nèi)容還是用戶(hù)體驗(yàn)上來(lái)講，控件元素都會(huì)在我們的產(chǎn)品設(shè)計(jì)中扮演重要角色。為特定的內(nèi)容選擇正確的控件可能要比你想象的要難，控件的高度，寬度，樣式設(shè)計(jì)和選項(xiàng)數(shù)量都是至關(guān)重要的因素。

為了幫助分解問(wèn)題，這里給大家列了一個(gè)決策樹(shù)。

單選

Tab選項(xiàng)

一個(gè)分段tab通常會(huì)由2-6個(gè)單選項(xiàng)，它最適合用于圖標(biāo)、數(shù)字或短詞的導(dǎo)航形式，并被設(shè)計(jì)成一個(gè)水平的容器，容納等距離的單選內(nèi)容。

圖標(biāo)、短詞、價(jià)格

優(yōu)點(diǎn)：將所有選項(xiàng)都擺在一行，對(duì)垂直空間的利用率能達(dá)到最佳，設(shè)計(jì)樣式也可以做到非常直觀，漂亮。

缺點(diǎn)：它不大適合用在長(zhǎng)詞，短語(yǔ)或價(jià)格上，如果你確實(shí)希望將這些內(nèi)容放在選項(xiàng)中，就必須嘗試精簡(jiǎn)文本。水平空間非常有限，即使是只有少量的選項(xiàng)，有時(shí)候你仍然需要決定如何截?cái)辔谋尽?/p>

（譯者注：為什么對(duì)于底部導(dǎo)航欄的分欄數(shù)是2-6個(gè)最合適，根據(jù)iOS規(guī)范中說(shuō)的，太多的選項(xiàng)卡增加了應(yīng)用的復(fù)雜性，使得信息定位變得困難。選項(xiàng)太少也可能會(huì)帶來(lái)一個(gè)問(wèn)題是界面間的信息流斷開(kāi)，不便于快速觸達(dá)。

請(qǐng)見(jiàn)iOS規(guī)范https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/ 。另外，還有說(shuō)法是按鈕的大小能決定點(diǎn)擊時(shí)的舒適度，數(shù)量也會(huì)影響用戶(hù)的記憶和學(xué)習(xí)成本。請(qǐng)見(jiàn)知乎https://www.zhihu.com/question/31103224 ）

列表單選

最初的單選按鈕被用于列表中超過(guò)6個(gè)選項(xiàng)時(shí)，被設(shè)計(jì)成垂直方向，圓形輪廓，并擺在列表項(xiàng)的開(kāi)頭。后來(lái)iOS通過(guò)在列表末尾加上一個(gè)對(duì)勾選中，而創(chuàng)造一個(gè)新的經(jīng)典案例?，F(xiàn)在最新的一些設(shè)計(jì)中，選中被設(shè)計(jì)成在列表選項(xiàng)外加一個(gè)描邊框形式，用以節(jié)省水平空間。

Android & Web vs iOS vs 描邊框模式

優(yōu)點(diǎn)：列表單選為內(nèi)容提供了更多的空間。它們易于閱讀，可以容納多文字，文本可以換行，還可以增加圖片。

缺點(diǎn)：他們往往很占用空間，不適合用在垂直高度受限的頁(yè)面中。

一個(gè)有趣的事實(shí)是，單選按鈕是受舊收音機(jī)上的按鍵設(shè)計(jì)的啟發(fā)而設(shè)計(jì)出來(lái)的，一個(gè)按鈕被按下，就會(huì)彈出其他按鈕。

多選

標(biāo)簽選擇

標(biāo)簽選擇通常用于要從3-6個(gè)選項(xiàng)中進(jìn)行多次選擇的情況，它們最適合用一到兩個(gè)簡(jiǎn)短的單詞或數(shù)字。它們?cè)O(shè)計(jì)的形式一般是類(lèi)似于一個(gè)小按鈕，通過(guò)背景色來(lái)區(qū)分“開(kāi)”和“關(guān)”。

盡管谷歌設(shè)計(jì)規(guī)范（譯者注：大家可以看看谷歌官方的規(guī)范，對(duì)于標(biāo)簽設(shè)計(jì)列舉了大量實(shí)用原則 https://material.io/design/components/chips.html#filter-chips）建議最好在選中的標(biāo)簽前加上一個(gè)勾選標(biāo)記，但我覺(jué)得有顏色作為區(qū)分已經(jīng)夠了，這樣還能節(jié)省水平空間。

短詞標(biāo)簽vs帶省略號(hào)的多詞標(biāo)簽vs折行標(biāo)簽

優(yōu)點(diǎn)：節(jié)省空間，標(biāo)簽堆砌在一起的具體樣式是由文本長(zhǎng)度決定的。它們給人的印象是輕量的，有趣的。

缺點(diǎn)：這種形式與tab選項(xiàng)形式有一樣的弊端，都不能很好的處理長(zhǎng)詞。不建議對(duì)文本進(jìn)行折行或者調(diào)整大小，因?yàn)闀?huì)不便于用戶(hù)閱讀，使用兩行以上的標(biāo)簽會(huì)使得每個(gè)標(biāo)簽非常難以快速掃描。

列表多選

列表中的復(fù)選框一般應(yīng)用于6個(gè)以上選項(xiàng)進(jìn)行多選的情況，設(shè)計(jì)樣式通常是在列表開(kāi)頭處設(shè)計(jì)一個(gè)正方形描邊框。

列表中的復(fù)選框

優(yōu)缺點(diǎn)：與單選框有一樣的優(yōu)勢(shì)和弊端。

綜合來(lái)看

我們很容易陷入到特定組件的設(shè)計(jì)中，所以我發(fā)現(xiàn)最好是從整體上開(kāi)始思考。然后做出最佳決定，決定使用哪種選擇設(shè)計(jì)最有利于一致性、差異性和層次感。

水平Tab和標(biāo)簽

選項(xiàng)背景是tab控件和標(biāo)簽控件之間最大的區(qū)別。一個(gè)連續(xù)的背景幫助用戶(hù)理解他們必須要選擇一個(gè)，而一個(gè)分離的背景表明他們可以選擇多個(gè)。

統(tǒng)一的風(fēng)格和不統(tǒng)一的風(fēng)格

Tab控件和標(biāo)簽控件的設(shè)計(jì)應(yīng)該在視覺(jué)上彼此相似，并且做到與文本框和按鈕不同，以不同的視覺(jué)樣式幫助達(dá)到不同的交互層次結(jié)構(gòu)。

不同的樣式風(fēng)格和相同的樣式風(fēng)格

列表單選和列表多選

有這么多單選按鈕形式可以選擇，我發(fā)現(xiàn)最好是將單選和復(fù)選放在一起才便于比較。iOS端的列表單選勾和描邊高亮都是很漂亮的設(shè)計(jì)，但是與多選框放一起，就會(huì)顯得不夠統(tǒng)一。

（譯者注：最左側(cè)的單選復(fù)選樣式和位置相對(duì)比較一致，中間的上下都有對(duì)勾會(huì)讓人產(chǎn)生疑惑，而最右側(cè)的方框高亮和左側(cè)復(fù)選框設(shè)計(jì)差異太大。）

Android & Web vs iOS vs Alternate Pattern

最后說(shuō)一點(diǎn)，但并非是最不重要的，就是圖片的位置。選擇控件一般位于列表項(xiàng)的開(kāi)頭位置，但是，當(dāng)列表項(xiàng)中有圖片時(shí)，就有人開(kāi)始糾結(jié)應(yīng)該是放前面好還是放后面好。

這里，我選擇將控件保留在開(kāi)頭位置，因?yàn)榭丶潜仨毚嬖诘?，而圖片是可選或者可添加的。（譯者注：如果在一個(gè)設(shè)計(jì)規(guī)范中，選項(xiàng)控件都在左側(cè)，那也應(yīng)該盡量讓其他控件也保持在左側(cè)來(lái)保證一致性。）

Image in the End vs Start Position

最后的想法

還有一種很好用的選擇控件是滾筒（https://developer.apple.com/design/human-interface-guidelines/ios/controls/pickers/）。當(dāng)有許多短詞并且垂直控件有限時(shí)，就可以使用它。建議只在其中放置文本，它的使用要求比較高，在Android和iOS中都很復(fù)雜。

原文：https://medium.com/tap-to-dismiss/select-to-proceed-996d19c8a7a4

作者：Linzi Berry

譯者：彩云Sky，公眾號(hào)：彩云譯設(shè)計(jì)

本文由 @彩云Sky 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議