由于iOS 和 Material Design的組件體系有些紛歧樣，所以關(guān)于組件的分類(lèi)體系我會(huì)分iOS篇和Android篇來(lái)講解，本篇文章為iOS 篇。

對(duì)于大部分入門(mén)設(shè)計(jì)師及中級(jí)設(shè)計(jì)師來(lái)說(shuō)，腦海里沒(méi)有一套屬于本身的組件分類(lèi)體系。一說(shuō)組件，腦子里面只會(huì)蹦出彈窗、toast、操作列表等。難以形成自我知識(shí)體系，可能是只有用到才會(huì)想到某個(gè)組件。這樣的話對(duì)于系統(tǒng)的學(xué)習(xí)視覺(jué)設(shè)計(jì)、交互設(shè)計(jì)或產(chǎn)品設(shè)計(jì)是倒霉的。

組件基于Material Design和iOS 設(shè)計(jì)指南。關(guān)于組件的中文翻譯名字可能會(huì)有很多種，并沒(méi)有一個(gè)權(quán)威準(zhǔn)確的中文命名。但是設(shè)計(jì)師知道某個(gè)組件名是什么樣子的就已經(jīng)夠了。

由于iOS 和 Material Design的組件體系有些紛歧樣，所以關(guān)于組件的分類(lèi)體系我會(huì)分iOS篇和Android篇來(lái)講解，本篇文章為iOS 篇。

iOS 或 Material Design的設(shè)計(jì)指南，都是根據(jù)組件的屬性來(lái)系統(tǒng)介紹。其實(shí)從設(shè)計(jì)者的使用場(chǎng)景來(lái)說(shuō)，都是設(shè)計(jì)者設(shè)計(jì)產(chǎn)品時(shí)，按照具體的功能來(lái)調(diào)用組件。所以從功能來(lái)劃分是更容易理解和記憶的。故組件分類(lèi)可以根據(jù)兩種維度來(lái)劃分。一種是組件的屬性來(lái)分（本篇文章是基于屬性分類(lèi)），另一種是控件組件的功能類(lèi)別（下一篇文章介紹）。

根據(jù)組件自己屬性分類(lèi)的思維導(dǎo)圖：

1.UI-bars （UI欄）導(dǎo)航欄（navigation bar）

導(dǎo)航欄能夠?qū)崿F(xiàn)在應(yīng)用差別信息層級(jí)結(jié)構(gòu)間的導(dǎo)航，有時(shí)候也可用于辦理當(dāng)前屏幕內(nèi)容。

如圖是系統(tǒng)導(dǎo)航的基礎(chǔ)形式，其中Back為上一級(jí)的標(biāo)題，Title為當(dāng)前視圖的標(biāo)題，Edit代表操作控件。

iOS10規(guī)范中提及：一般來(lái)說(shuō)，導(dǎo)航欄上應(yīng)該不久不多于以下三種元素：當(dāng)前視圖的標(biāo)題、返回按鈕和一個(gè)針對(duì)當(dāng)前的操作控件。

搜索欄（search bar)

搜索欄獲取用戶輸入的文本，用以作為搜索的關(guān)鍵字(下圖中顯示的文本為占位符，非用戶輸入文本)。

搜索欄可以包羅以下元素：

占位符文本(Placeholder text)。占位符文本通常會(huì)寫(xiě)明控件的功能（好比上圖里的 “Search”字樣），或者提示用戶輸入的文本將在哪里搜索（如“Google”）。清除按鈕(The Clear button)。大多數(shù)搜索欄都會(huì)提供清除按鈕，便利用戶一鍵清空輸入內(nèi)容。狀態(tài)欄(tatus bar)

狀態(tài)欄展示了關(guān)于設(shè)備及其周?chē)h(huán)境的重要信息

狀態(tài)欄包羅以下特征：

是透明的始終固定在整個(gè)屏幕的上邊沿標(biāo)簽欄(tab bar)

標(biāo)簽欄讓用戶在差別的子任務(wù)、視圖和模式中進(jìn)行切換。

標(biāo)簽欄位于屏幕底部，并應(yīng)該保證在應(yīng)用內(nèi)任何位置都可用。展示圖標(biāo)和文字內(nèi)容，每一項(xiàng)均連結(jié)等寬。當(dāng)用戶選中某個(gè)標(biāo)簽時(shí)，該標(biāo)簽呈現(xiàn)適當(dāng)?shù)母吡翣顟B(tài)。

標(biāo)簽欄可以包羅以下特性：

始終出現(xiàn)在屏幕的底部一個(gè)標(biāo)簽欄一次最多可承載5個(gè)標(biāo)簽（多于5個(gè)標(biāo)簽的時(shí)候，可以展示前4個(gè)標(biāo)簽和一個(gè)“更多”，并將其他的標(biāo)簽以列表形式收納到“更多”里面）在橫屏與豎屏情況下，高度均連結(jié)一致

一般而言，使用標(biāo)簽欄來(lái)組織整個(gè)應(yīng)用層面的信息結(jié)構(gòu)。標(biāo)簽欄非常適合用于應(yīng)用的主界面中，因?yàn)樗梢院芎玫乇馄叫畔蛹?jí)，而且同時(shí)提供多個(gè)觸達(dá)同級(jí)信息類(lèi)目與模式的入口。

工具欄(tool bar)

工具欄上放置著用于操作當(dāng)前屏幕中各對(duì)象的控件

工具欄可以包羅以下特性：

在iPhone上，工具欄始終位于屏幕底部，而在iPad上則有可能出現(xiàn)在頂部范圍欄(scope bar)

范圍欄只有在與搜索欄一起時(shí)才會(huì)出現(xiàn)，它讓用戶可以定義搜索結(jié)果的范圍。

當(dāng)搜索欄出現(xiàn)時(shí)，范圍欄會(huì)出現(xiàn)在它的附近。范圍欄的外不雅觀與你所指定的搜索欄的外不雅觀兼容。

當(dāng)用戶想在明確的分類(lèi)范圍內(nèi)進(jìn)行搜索時(shí)，使用范圍欄是非常有用的。然而，更好的選擇是優(yōu)化您的搜索結(jié)果，讓用戶不需要使用范圍欄對(duì)搜索結(jié)果進(jìn)行篩選，便可以找到他們所需要的內(nèi)容。

2.Ui-views（UI視圖）

Ui-views又分內(nèi)容視圖和臨時(shí)視圖

臨時(shí)視圖：

警告對(duì)話框（alert）

警告框傳達(dá)應(yīng)用或設(shè)備某種狀態(tài)的重要信息，而且常常需要用戶來(lái)進(jìn)行操作。

標(biāo)簽：林芝 烏魯木齊 鹽城 東營(yíng) 九江