一說到元件，大部分初級設計師和中級設計師的腦海裡只會蹦出彈窗、Toast及操作列表等具體的概念，沒有一套屬於自己的元件分類體系，這樣對於視覺設計、互動設計或產品設計的系統學習來說都是不利的。

iOS14概念設計

iOS官方設計指南在介紹元件時是按照元件的屬性來分類的。元件的中文翻譯名稱可能會有很多種，並沒有一個權威、準確的中文命名。設計師在設計前只需要清楚每個元件名對應的元件是什麼就可以了。

iOS14概念設計

由於iOS和Material Design的元件體系有些不一樣，因此關於元件的分類體系筆者會按照iOS和Android這兩大系統進行拆分與講解，而今天數藝君要講解的是iOS系統的元件體系。

對元件可以按照兩種維度來進行劃分：一種是按元件的屬性來分，另一種是按元件的功能類別來分。

iOS系統元件的分類如下圖所示。

UI欄（UI-Bars）

UI欄包含的元件有導航欄、搜尋欄、狀態列、標籤欄、工具欄及範圍欄。

1. 導航欄

導航欄能夠實現在不同資訊層級結構間的導航，有時也可用於管理當前螢幕內容，如下圖所示。其中，Parent Title為上一級的標題，Title為當前檢視的標題，Edit為操作控制元件。

2. 搜尋欄

搜尋欄可獲取使用者輸入的文字，並將其作為搜尋的關鍵字（下圖中顯示的文字為佔位符，而非使用者輸入文字），如圖a和圖b所示。

使用規則：搜尋欄包含的元素有佔位符文字和“清除”按鈕。佔位符文字通常會寫明控制元件的功能（如圖a中所顯示的“Search”字樣），或者提示使用者輸入的文字將在哪裡搜尋。大多數搜尋欄都會提供“清除”按鈕（如圖b中右側所示的按鈕），方便使用者一鍵清空輸入內容。

3. 狀態列

狀態列展示了關於裝置及其周圍環境的重要資訊，如下圖所示。

使用規則：①通常為透明樣式；②始終固定在整個螢幕的頂部。

4. 標籤欄

標籤欄方便使用者在不同的子任務、檢視和模式中進行切換，如下圖所示。

使用規則：①始終出現在螢幕的底部；②一個標籤欄最多可承載5個標籤，多於5個標籤時展示前4個標籤，並將其他的標籤以列表形式收納到“更多”標籤裡面；③ 無論是在橫屏還是豎屏情況下，標籤的高度均保持一致；④標籤欄位於螢幕底部，並應保證在應用內任何位置都可用；⑤在標籤欄中展示的圖示和文字內容都應保持等寬狀態；⑥當用戶選中某個標籤時，該標籤會呈現為高亮狀態。

5. 工具欄

工具欄用於放置操作當前螢幕中各物件的控制元件，如下圖所示。

使用規則：在iPhone系統介面中，工具欄始終位於螢幕底部。而在iPad系統介面中，工具欄則有可能出現在螢幕頂部。

6. 範圍欄

範圍欄只與搜尋欄一起出現，主要方便使用者定義搜尋結果的範圍，如下圖所示。

使用規則：①當介面中出現搜尋欄時，範圍欄會出現在搜尋欄的附近，且範圍欄的外觀與所指定的搜尋欄的外觀相容；②當用戶想在明確的分類範圍內進行資訊搜尋時，使用範圍欄雖然非常高效，但是還有一個更好的選擇，那便是優化搜尋結果，如此可以讓使用者不需要使用範圍欄對搜尋結果進行篩選就能找到他們所需要的內容。

UI檢視（UI-Views）

UI檢視分為臨時檢視和內容檢視。

1. 臨時檢視

臨時檢視包含的元件有警告對話方塊、操作列表、模態檢視、活動檢視控制器及浮出層。

（1）警告對話方塊

警告對話方塊是傳達應用或裝置處於某種狀態的元件，如下圖所示。

使用規則：①警告對話方塊的基本規則為標題必選、描述資訊可選、輸入框可選、按鈕必選（可包含一個或多個按鈕）；②警告對話方塊的樣式通常都是圓角白框樣式，且帶磨砂效果，不可更改。

（2）操作列表

操作列表是當用戶進行某項操作時出現的浮層，其顯示的內容為與使用者觸發的操作直接相關的一系列操作選項。

操作列表方便使用者在開始一個新任務或進行破壞性操作（如刪除、退出登入等）時進行二次確認。使用操作列表開始一個新任務這種操作在iOS原生的郵箱中應用得比較多，如下圖所示。

（3）模態檢視

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

當用戶需要完成與APP中的基礎功能相關且獨立的任務時，設計師可以使用模態檢視。模態檢視特別適用於那些所需元素並非常駐在APP介面中但又包含多個步驟的子任務，如下圖所示。

使用規則：①可能佔據整個螢幕，也可能佔據整個父檢視（Parent View）的區域，或者是螢幕的一部分；②包含完成當前任務所需的文字和控制元件；③包含一個“完成任務”的按鈕（點選後即可完成任務，同時當前模態檢視消失）和一個“取消”按鈕（點選後即放棄當前任務，同時當前模態檢視消失）。

（4）活動檢視控制器

活動檢視控制器是一個臨時檢視，其中羅列了一系列可以針對頁面特定內容的系統服務和定製服務，如下圖所示。

使用規則：①由使用者的某項操作行為觸發；②主要用於當前介面或圖片資訊的分享。

（5）浮出層

使用規則：①浮出層是一個自包含的模態檢視；②在橫屏狀態下，浮出層會包含一個箭頭，並指向其出處；③背景是半透明的，並且會模糊其背後的內容（遮罩背景）；

④可以包含多種物件和檢視，如表格、圖片、地圖、文字、網頁、自定義檢視、導航欄、工具欄及標籤欄等；⑤可以操作當前APP檢視中的各種控制元件或物件。

2.內容檢視

內容檢視是展示內容資訊的部分檢視，而非臨時出現的檢視。內容檢視包含的元件有網路檢視、滾動檢視、分欄檢視控制器、表格檢視、文字檢視、頁面檢視控制器、地圖檢視、圖片檢視、集合檢視及活動檢視。

（1）網路檢視

網路檢視能直接在APP中載入和呈現豐富的網路內容，如下圖所示。

使用規則：①用於展示網路內容；②可自動處理頁面中的內容。

（2）滾動檢視

滾動檢視方便使用者瀏覽尺寸超過檢視邊界的內容，如下圖所示。

使用規則：①沒有預定義的外觀；②在其剛出現或當用戶對其進行操作的時候會出現滑條；③當用戶在檢視中拖曳內容時，內容會隨之滾動；④當用戶輕掃螢幕時，內容將快速滾動，—直到使用者再次觸控式螢幕幕或內容已經到達底部時才停止；⑤使用滾動檢視可以允許使用者在固定的空間內瀏覽大尺寸或大量的內容；

⑥適當地支援縮放操作，如果放大和縮小操作對於當前內容有效的話，可以支援使用者通過“捏”這個手勢或雙擊來對當前檢視進行縮放，若是支援縮放操作的話，設計師還應當根據使用者當前的任務設定在當前情景下允許縮放的最大值和最小值；

⑦分頁模式滾動檢視中，可以考慮使用頁面控制元件；⑧當設計師想要展示分頁、分屏或者分塊的內容時，可以使用頁面控制元件讓使用者知道當前內容一共有多少部分，以及當前瀏覽的是哪個部分的內容。

（3）分欄檢視控制器

分欄檢視控制器是一個用於管理兩個相鄰檢視控制器顯示的、全屏檢視的控制器，如下圖所示。

使用規則：①可以在橫屏狀態下並排展示兩個窗格；②可以讓主窗格在詳情窗格上方顯示，也可以在不需要的時候（尤其是在豎屏的狀態下）隱藏主窗格。

（4）表格檢視

表格檢視以一種可滾動的單列多行的形式來展示資料，主要有兩種型別：一種是平鋪型表格檢視，另一種是分組型表格檢視，如下圖所示。

使用規則：①以可以進行分段或分組的單列形式展示資料；②使用者可以通過點選並選中某行，或者通過控制元件來執行新增、移除、多選、檢視詳情或展開另一個表格檢視等操作。

（5）文字檢視

文字檢視可以接收和展示多行文字，如下圖所示。

使用規則：①它是一個可定義為任意高度的矩形；②當內容太多且超出檢視的邊框時，文字檢視支援滾動操作；③支援自定義字型、顏色和對齊方式（在預設狀態下，文字檢視會以左對齊的黑色系統字型顯示）；④可支援使用者編輯，當用戶輕擊文字檢視內部時，將調出鍵盤（鍵盤的佈局和型別取決於使用者的系統設定）。

（6）頁面檢視控制器

頁面檢視控制器可以通過滾動或翻頁兩種方式處理長度超過一頁的內容，如下圖所示。

使用規則：①帶滾動條的頁面檢視控制器沒有預設的外觀；②帶翻頁效果的頁面檢視控制器可以在兩頁中間增加書頁翻起的效果；③可以根據指定的轉場來模擬出頁面切換時的動畫效果。

（7）地圖檢視

地圖檢視主要用於呈現地理資料，同時支援系統內建地圖應用的大部分功能。地圖檢視可以給使用者提供一個地理區域檢視，且一般會允許使用者在檢視中進行互動行為，如下圖所示。

（8）圖片檢視

圖片檢視主要用於展示單獨的或一系列的靜態及動態圖片，如下圖所示。

使用規則：①元件不存在任何預先定義好的外觀，同時在預設狀態下不支援使用者的互動行為；②可檢測圖片本身及其父檢視的屬性，並決定這個圖片是否應該被拉伸、縮放及調整到適合螢幕的大小，或者固定在一個特定的位置。

（9）集合檢視

集合檢視用於管理一系列有序的項，並以一種自定義的佈局來呈現這些項，而且支援開發者額外定義手勢來識別並執行自定義操作，如下圖所示。

使用規則：①可以從視覺上區分項的子集或提供裝飾性專案，如自定義背景；②佈局切換時支援自定義轉場動畫；③在預設狀態下，當用戶匯入、移動或刪除項的時候，會出現系統預設的動畫效果，同時集合檢視可識別輕擊、選中操作。

（10）活動檢視

活動檢視可以展示系統提供的或自定義的服務，如下圖所示。

使用規則：①各類活動可通過訪問活動檢視控制器來作用於某些特定的內容；②活動是一種可定製物件，代表著某項可以讓使用者在APP中執行操作的服務，以圖示的形式呈現，外觀與按鈕圖示相似。