從設計指南說起，詳解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）

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

規範中，對警告框包含的元素做出了如下規定：標題（必選）、描述信息（可選）、輸入框（可選）、按鈕（必選）。同時，警告框的樣式都是磨砂效果的圓角白框，不可更改。如下圖所示：

警告框可以包含以下特性：

必須包含標題，有時候會包含正文文本

包含一個或多個按鈕

操作列表（action sheet）

操作列表展示了與用戶觸發的操作直接相關的一系列選

操作列表，是當用戶激發一個操作的時候，出現的浮層。「使用操作列表讓用戶可以開始一個新任務或者對破壞性操作（例如：刪除、退出登錄等）進行二次確認。」 使用操作列表開始一個新任務，在蘋果官方的郵件應用里有很多案例，比如下面這個。

操作列表包含以下特性：

由用戶某個操作行為觸發

包含兩個或以上的按鈕

使用操作列表來：提供完成一項任務的不同方法。操作列表提供一系列在當前情景下可以完成當前任務的操作，而這樣的形式不會永久佔用頁面UI的空間。

模態視圖（modal view）

模態視圖是一個以模態形式展現的視圖，它為當前任務或當前工作流程提供獨立的、自包含的(self-contained)功能。

在iOS中，蘋果使用「模態視圖」來指那些在當前頁插入的「浮層頁面」。

模態視圖可以包含以下特徵：

能佔據整個屏幕，它也可能佔據整個父視圖(parent view)的區域，或者是屏幕的一部分

包含完成當前任務所需的文字和控制項

通常也會包含一個完成任務的按鈕（點擊後即可完成任務，當前模態視圖也會消失），和一個取消按鈕（點擊後即放棄當前任務，同時當前模態視圖消失）如圖所示：

當需要用戶完成與app中的基礎功能相關的、獨立的任務的時候，可以使用模態視圖。模態視圖尤其適用於那些所需元素並非常駐在app主要UI中、又包含多個步驟的子任務。

內容視圖：

浮出層（popover）

浮出層是當用戶輕點某個控制項或頁面中的某一區域時浮出的，半透明的臨時視圖

浮出層包含以下特徵：

是一個自包含的模態視圖

在橫屏環境中，浮出層會包含一個箭頭，指向其出處

背景是半透明的，並且會模糊其背後的內容（遮罩背景）

可以包含多種對象和視圖，比如：表格，圖片，地圖，文本，網頁或者自定義視圖、導航欄，工具欄，和標籤欄

可以操作當前app視圖中的對象的各種控制項或對象（默認情況下， 浮出層中的表格視圖，導航欄和工具欄的背景都是透明的，這樣會讓浮出層的毛玻璃效果展示出來）

網路視圖（web view）

網路視圖能直接在你的app中載入和呈現豐富的網路內容，比如嵌入的HTML和網站。比如，「郵件」就使用了網路視圖來在信息中展示HTML內容。

網路視圖包含以下特性：

展示網路內容

會自動處理頁面中的內容，比如嵌入的HTML和網站。比如，「郵件」就使用了網路視圖來在信息中展示HTML內容

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！