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

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

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

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

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

根據組件自己屬性分類的思維導圖：

1.UI-bars （UI欄）導航欄（navigation bar）

導航欄能夠實現在應用差別信息層級結構間的導航，有時候也可用于辦理當前屏幕內容。

如圖是系統導航的基礎形式，其中Back為上一級的標題，Title為當前視圖的標題，Edit代表操作控件。

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

搜索欄（search bar)

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

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

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

狀態欄展示了關于設備及其周圍環境的重要信息

狀態欄包羅以下特征：

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

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

標簽欄位于屏幕底部，并應該保證在應用內任何位置都可用。展示圖標和文字內容，每一項均連結等寬。當用戶選中某個標簽時，該標簽呈現適當的高亮狀態。

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

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

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

工具欄(tool bar)

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

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

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

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

當搜索欄出現時，范圍欄會出現在它的附近。范圍欄的外不雅觀與你所指定的搜索欄的外不雅觀兼容。

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

2.Ui-views（UI視圖）

Ui-views又分內容視圖和臨時視圖

臨時視圖：

警告對話框（alert）

警告框傳達應用或設備某種狀態的重要信息，而且常常需要用戶來進行操作。

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