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

iOS14概念設計

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

iOS14概念設計

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

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

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

UI欄(UI-Bars)

UI欄包含的組件有導航欄、搜索欄、狀態欄、標簽欄、工具欄及范圍欄。

1. 導航欄

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

使用規則：一般來說，導航欄上的元素不外乎3種，即當前視圖的標題、返回按鈕和針對當前操作的控件。

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中執行操作的服務，以圖標的形式呈現，外觀與按鈕圖標相似。

總結

以上是生活随笔為你收集整理的自定义键盘组件_一文读懂！iOS系统组件的设计规范全解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。