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

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

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

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

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

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

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

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

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

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

搜索欄（search bar)

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

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

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

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

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

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

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

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

標簽欄可以包羅以下特性：

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

一般而言，使用標簽欄來組織整個應(yīng)用層面的信息結(jié)構(gòu)。標簽欄非常適合用于應(yīng)用的主界面中，因為它可以很好地扁平信息層級，而且同時提供多個觸達同級信息類目與模式的入口。

工具欄(tool bar)

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

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

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

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

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

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

2.Ui-views（UI視圖）

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

臨時視圖：

警告對話框（alert）

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

標簽：林芝 烏魯木齊 鹽城 東營 九江