從今天開始，將介紹iOS和Android設(shè)計(jì)規(guī)范中關(guān)于導(dǎo)航的部分。今天要介紹的兩個(gè)控件，經(jīng)常容易混淆以至于用錯(cuò)。請各位讀者仔細(xì)閱讀，防止以后用錯(cuò)。

往期回顧：

1. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之提示框+警告框
2. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之簡易菜單+彈框
3. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之底部浮層
4. 高手幫你學(xué)規(guī)范！iOS和Android規(guī)范解析之按鈕

Material Design Guidelines

標(biāo)簽（tabs）使內(nèi)容在一個(gè)較高的層級被組織起來。一般，一個(gè)標(biāo)簽里需要展示與該標(biāo)簽相關(guān)的內(nèi)容。標(biāo)簽的名字需要清楚地描述該標(biāo)簽里所包含的內(nèi)容。

信息架構(gòu)

標(biāo)簽導(dǎo)航一般用于從一個(gè)比較高的層級來組織信息，呈現(xiàn)出提綱挈領(lǐng)的效果。例如，使用標(biāo)簽呈現(xiàn)報(bào)紙的不同版面。不要使用標(biāo)簽導(dǎo)航來呈現(xiàn)不同頁碼的頁面（就像搜索結(jié)果頁中的第1頁，第2頁那種頁面），也不要把標(biāo)簽的切換設(shè)計(jì)成可循環(huán)的樣式（即，在最后一頁，繼續(xù)向下切換又回到第一頁）。

下面所示的用法示例需要注意：

內(nèi)容

一個(gè)標(biāo)簽里的所有內(nèi)容應(yīng)該屬于一個(gè)大分類（比如“設(shè)置”或者“音樂”），并且標(biāo)簽之間內(nèi)容不能有重疊。標(biāo)簽可以包含圖標(biāo)（icon）和文字。如果使用文字，則盡量簡短。

另外有以下用法示例需要注意：

使用

標(biāo)簽有兩種，一種是固定標(biāo)簽，適用于標(biāo)簽的數(shù)目比較少的情況。每個(gè)標(biāo)簽固定的位置，有利于用戶的記憶：

固定標(biāo)簽示例

另一種是可劃動(dòng)標(biāo)簽，適用于標(biāo)簽數(shù)量比較多的情況。同時(shí)，可劃動(dòng)標(biāo)簽的寬度可以長短不一，根據(jù)標(biāo)題長短決定。

可劃動(dòng)標(biāo)簽示例

通常，標(biāo)簽被建議使用在以下的情況：

• 需要經(jīng)常切換視圖；
• 應(yīng)用包含的視圖比較少；
• 應(yīng)用提供的幾個(gè)視圖都比較重要（由于標(biāo)簽切換，相對于別的導(dǎo)航方式來說，操作更容易。因此通過標(biāo)簽導(dǎo)航提供的幾個(gè)視圖，相對來說到達(dá)率會(huì)更好。筆者注）。

iOS Human Interface Guidelines

分段控件可以包含兩個(gè)或者更多的分段選項(xiàng)，每一個(gè)選項(xiàng)作為一個(gè)獨(dú)立的按鈕而存在。在一個(gè)分段控件里，所有的分段選項(xiàng)在長度上要保持一致。和按鈕一樣，每個(gè)分段選項(xiàng)可以包含文案或者圖片。分段控件通常用來作為不同視圖的入口，比如在地圖應(yīng)用里，分段控件可以讓用戶在“地圖”、“交通”和“衛(wèi)星”等視圖間切換。

△ iOS系統(tǒng)自帶的地圖應(yīng)用

關(guān)于分段控件的使用，蘋果規(guī)范給出了以下幾個(gè)要點(diǎn)：

1. 限制分段選項(xiàng)的數(shù)目，以提高可用性。更寬的分段選項(xiàng)更容易點(diǎn)擊。在iPhone上，蘋果建議一個(gè)分段控件包含的分段選項(xiàng)最多是5個(gè)（想說5個(gè)也不少了好不好。。）
2. 盡量保證每個(gè)分段選項(xiàng)里的內(nèi)容的尺寸是一致的。因?yàn)樗械姆侄芜x項(xiàng)在長度上需要保持一致，所以如果有的分段選項(xiàng)內(nèi)容很滿，而有的比較空，在視覺上會(huì)不太美觀。
3. 在一個(gè)分段選項(xiàng)里，避免同時(shí)使用文案和圖片。盡管單個(gè)分段選項(xiàng)里可以包含文案或者圖片，但是同時(shí)包含兩者可能會(huì)使界面看起來割裂和迷惑。
4. 如果你定制了一個(gè)分段控件的外觀，那么請確保內(nèi)容的位置是恰當(dāng)?shù)摹１热纾绻愀牧朔侄慰丶谋尘埃敲凑埓_保里面的內(nèi)容看起來是OK的，并且是對齊的。

以上介紹了MD和iOS設(shè)計(jì)規(guī)范中對于標(biāo)簽導(dǎo)航和分段控件的介紹。這兩個(gè)控件由于長得比較相似，因此經(jīng)常會(huì)用錯(cuò)；尤其是分段控件，需要注意它是不能通過劃動(dòng)來切換的。

討論使我們認(rèn)識更加深刻，歡迎留言討論。

歡迎關(guān)注作者微信公眾號：新設(shè)計(jì)青年

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com