分段控件是UI組件中最常見的控件之一， 在ios上分段控件的英文是Segmented Control，而在Material Design中分段控件被稱為Tabs（選項(xiàng)卡），兩者均放置在界面上端，最初在Material Design中，選項(xiàng)卡起到的是頂級(jí)導(dǎo)航作用，但是在Material Design中加入底部導(dǎo)航欄（Bottom Navigation）之后，我們可以看到Tabs主要給到的是同一頁(yè)面上的子級(jí)做分類。功能上同iOS上的Segmented Control 靠攏。 本文統(tǒng)稱選項(xiàng)卡。

來源

我們先來可以下Tabs的來源，其實(shí)在生活中分段控件就有著較好的運(yùn)用，用于分類。 因此當(dāng)用戶在虛擬世界中看到選項(xiàng)卡之后就會(huì)自然映射顯示世界的選項(xiàng)卡，便于用戶操作理解。

分段控件的作用：

• 做導(dǎo)航。良好的選項(xiàng)卡設(shè)計(jì)能夠清晰的告訴用戶他們的位置， 可以通過視覺元素將他同其他選項(xiàng)卡區(qū)分開來。

• 提高內(nèi)容組織，選項(xiàng)卡可以將內(nèi)容分割成幾個(gè)有一一的部分。

• 提供視覺連貫性。良好的設(shè)計(jì)應(yīng)該幫助用戶快速到達(dá)重要內(nèi)容，

iOS & Material Design上的分段控件

iOS上分段控件的使用規(guī)定：

分段空間是一組分段的線性控件，每一個(gè)分段的控件類似于按鈕，點(diǎn)擊后將切換到相應(yīng)的視圖。分段控件常常用來展示不同的視圖。比如子地圖中，分段控件允許你在地圖，交通以及衛(wèi)星地圖直接切換。

• 控制分段控件的數(shù)量來提高可用性。分段控件如較擁擠，點(diǎn)擊起來就較為麻煩。在手機(jī)端，分段控件至多5個(gè)。

• 確保分段控件大小一致。

• 不要在一個(gè)分段控件中圖片和文字混用。避免在一些分段里用圖片，另一些用文字，這樣會(huì)讓用戶混淆。

• 將內(nèi)容合適的放在分段空間中。如果你要改變分段控件的背景，確保內(nèi)容是對(duì)齊的。

Material Design 上的使用規(guī)定：

其實(shí)Material Design的選項(xiàng)卡形式我們也常常可以在iOS的手機(jī)端看到。比如“即刻”

通常來說Material Design上的選項(xiàng)卡上的內(nèi)容都是父級(jí)內(nèi)容的子級(jí)。內(nèi)容之間有著一定的相關(guān)性。

• 選項(xiàng)卡上全部都是文本或者圖標(biāo)或者圖標(biāo)+文字，不要一會(huì)兒圖標(biāo)一會(huì)兒文字的混用

• 將所有的選項(xiàng)卡橫排展開

• 不要在選項(xiàng)卡下再包含選項(xiàng)卡

• 當(dāng)選中其中一項(xiàng)選項(xiàng)卡的時(shí)候，該選項(xiàng)高亮

• 確保選項(xiàng)卡同當(dāng)前頁(yè)面的內(nèi)容有關(guān)聯(lián)。

iOS vs. Material Design

可以看到兩者都嚴(yán)格規(guī)定了分段控件上的內(nèi)容展示方式，出現(xiàn)圖標(biāo)和文字混到的形式是嚴(yán)重不被允許的，但是在Material Design上一個(gè)分段控件上可以同時(shí)標(biāo)注圖標(biāo)和文字說明。

而兩者在手勢(shì)操作上也有著一定的區(qū)別，在Material Design上只需左右滑動(dòng)既能切換視圖，但是在iOS上就必須得點(diǎn)擊分段控件，才能切換，這一點(diǎn)個(gè)人感覺不是很方便。

并且在Material Design中，當(dāng)上下滑動(dòng)的時(shí)候，選項(xiàng)卡可以被隱藏起來，因?yàn)楫吘乖诖缤链缃鸬氖謾C(jī)屏幕上，又是app bar又是底部導(dǎo)航欄 的會(huì)相當(dāng)占用空間。

分段控件的其他表現(xiàn)形式

在iOS端，我們可以看到以下幾張常見的分段控件的使用方式：

App Store

采用了標(biāo)準(zhǔn)的iOS分段控件，點(diǎn)擊后才能跳到下一頁(yè)面，分段控件在此起到一個(gè)分類作用。

Medium

Medium的分段控件，將內(nèi)容進(jìn)行分類，只需要左右滑動(dòng)就能切換。由于內(nèi)容分類較多，因此最右邊的分類只露出一般，以暗示用戶還未結(jié)束，這樣用戶自然就會(huì)向右拉動(dòng)。

豆瓣

豆瓣同Medium一樣，將內(nèi)容進(jìn)行分類，只需左右滑動(dòng)就能切換視圖，由于正好有五個(gè)分類因此不用擔(dān)心用戶看不到其他的。只是我個(gè)人比較好奇為什么音樂是放在最后的，這個(gè)分類的父級(jí)被稱為“書影音”，因此是否應(yīng)該按照讀書，電影，音樂來分類比較合適。

即刻

即刻也是一樣，只需左右滑動(dòng)就可看到不同試圖，與之前不同的是，其在分段控件上只放置了圖標(biāo)，而不是文字，一般來說光用圖標(biāo)不是很推薦，但是若你使用的圖標(biāo)是認(rèn)知度較高的，則沒有大問題，而且即刻這邊GIF圖標(biāo)上寫的就是GIF。

微博

微博的實(shí)時(shí)熱搜分類，才用了圖標(biāo)+文字的結(jié)合方式，比較容易排除異議。但是這個(gè)分段控件看上去似乎可以通過左右滑動(dòng)來控制，其實(shí)不然，必須點(diǎn)擊，而且用戶體驗(yàn)不大好，因?yàn)槊看吸c(diǎn)擊新的分類都會(huì)刷新頁(yè)面，新頁(yè)面從左進(jìn)入，給人感覺不是在一個(gè)頁(yè)面上的切換，而事實(shí)證明其的確是創(chuàng)建了好幾個(gè)新頁(yè)面，因?yàn)楫?dāng)我點(diǎn)擊返回的時(shí)候，它會(huì)跳轉(zhuǎn)到上一分類的試圖。

Uber

Uber的使用分段控件的方式比較新式，將分段控件移到了下方，使得用戶能更加方便的在各個(gè)界面之間切換視圖。