一說(shuō)到組件，大部分初級(jí)設(shè)計(jì)師和中級(jí)設(shè)計(jì)師的腦海里只會(huì)蹦出彈窗、Toast及操作列表等具體的概念，沒(méi)有一套屬于自己的組件分類體系，這樣對(duì)于視覺(jué)設(shè)計(jì)、交互設(shè)計(jì)或產(chǎn)品設(shè)計(jì)的系統(tǒng)學(xué)習(xí)來(lái)說(shuō)都是不利的。

iOS14概念設(shè)計(jì)

iOS官方設(shè)計(jì)指南在介紹組件時(shí)是按照組件的屬性來(lái)分類的。組件的中文翻譯名稱可能會(huì)有很多種，并沒(méi)有一個(gè)權(quán)威、準(zhǔn)確的中文命名。設(shè)計(jì)師在設(shè)計(jì)前只需要清楚每個(gè)組件名對(duì)應(yīng)的組件是什么就可以了。

iOS14概念設(shè)計(jì)

由于iOS和Material Design的組件體系有些不一樣，因此關(guān)于組件的分類體系筆者會(huì)按照iOS和Android這兩大系統(tǒng)進(jìn)行拆分與講解，而今天數(shù)藝君要講解的是iOS系統(tǒng)的組件體系。

對(duì)組件可以按照兩種維度來(lái)進(jìn)行劃分：一種是按組件的屬性來(lái)分，另一種是按組件的功能類別來(lái)分。

iOS系統(tǒng)組件的分類如下圖所示。

UI欄(UI-Bars)

UI欄包含的組件有導(dǎo)航欄、搜索欄、狀態(tài)欄、標(biāo)簽欄、工具欄及范圍欄。

1. 導(dǎo)航欄

導(dǎo)航欄能夠?qū)崿F(xiàn)在不同信息層級(jí)結(jié)構(gòu)間的導(dǎo)航，有時(shí)也可用于管理當(dāng)前屏幕內(nèi)容，如下圖所示。其中，Parent Title為上一級(jí)的標(biāo)題，Title為當(dāng)前視圖的標(biāo)題，Edit為操作控件。

使用規(guī)則：一般來(lái)說(shuō)，導(dǎo)航欄上的元素不外乎3種，即當(dāng)前視圖的標(biāo)題、返回按鈕和針對(duì)當(dāng)前操作的控件。

2. 搜索欄

搜索欄可獲取用戶輸入的文本，并將其作為搜索的關(guān)鍵字(下圖中顯示的文本為占位符，而非用戶輸入文本)，如圖a和圖b所示。

使用規(guī)則：搜索欄包含的元素有占位符文本和“清除”按鈕。占位符文本通常會(huì)寫(xiě)明控件的功能(如圖a中所顯示的“Search”字樣)，或者提示用戶輸入的文本將在哪里搜索。大多數(shù)搜索欄都會(huì)提供“清除”按鈕(如圖b中右側(cè)所示的按鈕)，方便用戶一鍵清空輸入內(nèi)容。

3. 狀態(tài)欄

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

使用規(guī)則：①通常為透明樣式；②始終固定在整個(gè)屏幕的頂部。

4. 標(biāo)簽欄

標(biāo)簽欄方便用戶在不同的子任務(wù)、視圖和模式中進(jìn)行切換，如下圖所示。

使用規(guī)則：①始終出現(xiàn)在屏幕的底部；②一個(gè)標(biāo)簽欄最多可承載5個(gè)標(biāo)簽，多于5個(gè)標(biāo)簽時(shí)展示前4個(gè)標(biāo)簽，并將其他的標(biāo)簽以列表形式收納到“更多”標(biāo)簽里面；③ 無(wú)論是在橫屏還是豎屏情況下，標(biāo)簽的高度均保持一致；④標(biāo)簽欄位于屏幕底部，并應(yīng)保證在應(yīng)用內(nèi)任何位置都可用；⑤在標(biāo)簽欄中展示的圖標(biāo)和文字內(nèi)容都應(yīng)保持等寬狀態(tài)；⑥當(dāng)用戶選中某個(gè)標(biāo)簽時(shí)，該標(biāo)簽會(huì)呈現(xiàn)為高亮狀態(tài)。

5. 工具欄

工具欄用于放置操作當(dāng)前屏幕中各對(duì)象的控件，如下圖所示。

使用規(guī)則：在iPhone系統(tǒng)界面中，工具欄始終位于屏幕底部。而在iPad系統(tǒng)界面中，工具欄則有可能出現(xiàn)在屏幕頂部。

6. 范圍欄

范圍欄只與搜索欄一起出現(xiàn)，主要方便用戶定義搜索結(jié)果的范圍，如下圖所示。

使用規(guī)則：①當(dāng)界面中出現(xiàn)搜索欄時(shí)，范圍欄會(huì)出現(xiàn)在搜索欄的附近，且范圍欄的外觀與所指定的搜索欄的外觀兼容；②當(dāng)用戶想在明確的分類范圍內(nèi)進(jìn)行信息搜索時(shí)，使用范圍欄雖然非常高效，但是還有一個(gè)更好的選擇，那便是優(yōu)化搜索結(jié)果，如此可以讓用戶不需要使用范圍欄對(duì)搜索結(jié)果進(jìn)行篩選就能找到他們所需要的內(nèi)容。

UI視圖(UI-Views)

UI視圖分為臨時(shí)視圖和內(nèi)容視圖。

1. 臨時(shí)視圖

臨時(shí)視圖包含的組件有警告對(duì)話框、操作列表、模態(tài)視圖、活動(dòng)視圖控制器及浮出層。

(1)警告對(duì)話框

警告對(duì)話框是傳達(dá)應(yīng)用或設(shè)備處于某種狀態(tài)的組件，如下圖所示。

使用規(guī)則：①警告對(duì)話框的基本規(guī)則為標(biāo)題必選、描述信息可選、輸入框可選、按鈕必選(可包含一個(gè)或多個(gè)按鈕)；②警告對(duì)話框的樣式通常都是圓角白框樣式，且?guī)ド靶Ч?#xff0c;不可更改。

(2)操作列表

操作列表是當(dāng)用戶進(jìn)行某項(xiàng)操作時(shí)出現(xiàn)的浮層，其顯示的內(nèi)容為與用戶觸發(fā)的操作直接相關(guān)的一系列操作選項(xiàng)。

操作列表方便用戶在開(kāi)始一個(gè)新任務(wù)或進(jìn)行破壞性操作(如刪除、退出登錄等)時(shí)進(jìn)行二次確認(rèn)。使用操作列表開(kāi)始一個(gè)新任務(wù)這種操作在iOS原生的郵箱中應(yīng)用得比較多，如下圖所示。

使用規(guī)則：①由用戶的某個(gè)操作行為觸發(fā)；②包含兩個(gè)或兩個(gè)以上的按鈕。

(3)模態(tài)視圖

模態(tài)視圖是一個(gè)以模態(tài)形式展現(xiàn)的視圖，它為當(dāng)前任務(wù)或當(dāng)前工作流程提供獨(dú)立的、自包含的功能。

當(dāng)用戶需要完成與APP中的基礎(chǔ)功能相關(guān)且獨(dú)立的任務(wù)時(shí)，設(shè)計(jì)師可以使用模態(tài)視圖。模態(tài)視圖特別適用于那些所需元素并非常駐在APP界面中但又包含多個(gè)步驟的子任務(wù)，如下圖所示。

使用規(guī)則：①可能占據(jù)整個(gè)屏幕，也可能占據(jù)整個(gè)父視圖(Parent View)的區(qū)域，或者是屏幕的一部分；②包含完成當(dāng)前任務(wù)所需的文字和控件；③包含一個(gè)“完成任務(wù)”的按鈕(點(diǎn)擊后即可完成任務(wù)，同時(shí)當(dāng)前模態(tài)視圖消失)和一個(gè)“取消”按鈕(點(diǎn)擊后即放棄當(dāng)前任務(wù)，同時(shí)當(dāng)前模態(tài)視圖消失)。

(4)活動(dòng)視圖控制器

活動(dòng)視圖控制器是一個(gè)臨時(shí)視圖，其中羅列了一系列可以針對(duì)頁(yè)面特定內(nèi)容的系統(tǒng)服務(wù)和定制服務(wù)，如下圖所示。

使用規(guī)則：①由用戶的某項(xiàng)操作行為觸發(fā)；②主要用于當(dāng)前界面或圖片信息的分享。

(5)浮出層

浮出層是當(dāng)用戶點(diǎn)擊某個(gè)控件或頁(yè)面中的某一區(qū)域時(shí)浮出的、半透明的臨時(shí)視圖組件，如下圖所示。

使用規(guī)則：①浮出層是一個(gè)自包含的模態(tài)視圖；②在橫屏狀態(tài)下，浮出層會(huì)包含一個(gè)箭頭，并指向其出處；③背景是半透明的，并且會(huì)模糊其背后的內(nèi)容(遮罩背景)；

④可以包含多種對(duì)象和視圖，如表格、圖片、地圖、文本、網(wǎng)頁(yè)、自定義視圖、導(dǎo)航欄、工具欄及標(biāo)簽欄等；⑤可以操作當(dāng)前APP視圖中的各種控件或?qū)ο蟆?/p>

2.內(nèi)容視圖

內(nèi)容視圖是展示內(nèi)容信息的部分視圖，而非臨時(shí)出現(xiàn)的視圖。內(nèi)容視圖包含的組件有網(wǎng)絡(luò)視圖、滾動(dòng)視圖、分欄視圖控制器、表格視圖、文本視圖、頁(yè)面視圖控制器、地圖視圖、圖片視圖、集合視圖及活動(dòng)視圖。

(1)網(wǎng)絡(luò)視圖

網(wǎng)絡(luò)視圖能直接在APP中加載和呈現(xiàn)豐富的網(wǎng)絡(luò)內(nèi)容，如下圖所示。

使用規(guī)則：①用于展示網(wǎng)絡(luò)內(nèi)容；②可自動(dòng)處理頁(yè)面中的內(nèi)容。

(2)滾動(dòng)視圖

滾動(dòng)視圖方便用戶瀏覽尺寸超過(guò)視圖邊界的內(nèi)容，如下圖所示。

使用規(guī)則：①?zèng)]有預(yù)定義的外觀；②在其剛出現(xiàn)或當(dāng)用戶對(duì)其進(jìn)行操作的時(shí)候會(huì)出現(xiàn)滑條；③當(dāng)用戶在視圖中拖曳內(nèi)容時(shí)，內(nèi)容會(huì)隨之滾動(dòng)；④當(dāng)用戶輕掃屏幕時(shí)，內(nèi)容將快速滾動(dòng)，—直到用戶再次觸摸屏幕或內(nèi)容已經(jīng)到達(dá)底部時(shí)才停止；⑤使用滾動(dòng)視圖可以允許用戶在固定的空間內(nèi)瀏覽大尺寸或大量的內(nèi)容；

⑥適當(dāng)?shù)刂С挚s放操作，如果放大和縮小操作對(duì)于當(dāng)前內(nèi)容有效的話，可以支持用戶通過(guò)“捏”這個(gè)手勢(shì)或雙擊來(lái)對(duì)當(dāng)前視圖進(jìn)行縮放，若是支持縮放操作的話，設(shè)計(jì)師還應(yīng)當(dāng)根據(jù)用戶當(dāng)前的任務(wù)設(shè)定在當(dāng)前情景下允許縮放的最大值和最小值；

⑦分頁(yè)模式滾動(dòng)視圖中，可以考慮使用頁(yè)面控件；⑧當(dāng)設(shè)計(jì)師想要展示分頁(yè)、分屏或者分塊的內(nèi)容時(shí)，可以使用頁(yè)面控件讓用戶知道當(dāng)前內(nèi)容一共有多少部分，以及當(dāng)前瀏覽的是哪個(gè)部分的內(nèi)容。

(3)分欄視圖控制器

分欄視圖控制器是一個(gè)用于管理兩個(gè)相鄰視圖控制器顯示的、全屏視圖的控制器，如下圖所示。

使用規(guī)則：①可以在橫屏狀態(tài)下并排展示兩個(gè)窗格；②可以讓主窗格在詳情窗格上方顯示，也可以在不需要的時(shí)候(尤其是在豎屏的狀態(tài)下)隱藏主窗格。

(4)表格視圖

表格視圖以一種可滾動(dòng)的單列多行的形式來(lái)展示數(shù)據(jù)，主要有兩種類型：一種是平鋪型表格視圖，另一種是分組型表格視圖，如下圖所示。

使用規(guī)則：①以可以進(jìn)行分段或分組的單列形式展示數(shù)據(jù)；②用戶可以通過(guò)點(diǎn)擊并選中某行，或者通過(guò)控件來(lái)執(zhí)行添加、移除、多選、查看詳情或展開(kāi)另一個(gè)表格視圖等操作。

(5)文本視圖

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

使用規(guī)則：①它是一個(gè)可定義為任意高度的矩形；②當(dāng)內(nèi)容太多且超出視圖的邊框時(shí)，文本視圖支持滾動(dòng)操作；③支持自定義字體、顏色和對(duì)齊方式(在默認(rèn)狀態(tài)下，文本視圖會(huì)以左對(duì)齊的黑色系統(tǒng)字體顯示)；④可支持用戶編輯，當(dāng)用戶輕擊文本視圖內(nèi)部時(shí)，將調(diào)出鍵盤(鍵盤的布局和類型取決于用戶的系統(tǒng)設(shè)置)。

(6)頁(yè)面視圖控制器

頁(yè)面視圖控制器可以通過(guò)滾動(dòng)或翻頁(yè)兩種方式處理長(zhǎng)度超過(guò)一頁(yè)的內(nèi)容，如下圖所示。

使用規(guī)則：①帶滾動(dòng)條的頁(yè)面視圖控制器沒(méi)有默認(rèn)的外觀；②帶翻頁(yè)效果的頁(yè)面視圖控制器可以在兩頁(yè)中間增加書(shū)頁(yè)翻起的效果；③可以根據(jù)指定的轉(zhuǎn)場(chǎng)來(lái)模擬出頁(yè)面切換時(shí)的動(dòng)畫(huà)效果。

(7)地圖視圖

地圖視圖主要用于呈現(xiàn)地理數(shù)據(jù)，同時(shí)支持系統(tǒng)內(nèi)置地圖應(yīng)用的大部分功能。地圖視圖可以給用戶提供一個(gè)地理區(qū)域視圖，且一般會(huì)允許用戶在視圖中進(jìn)行交互行為，如下圖所示。

使用規(guī)則：①以標(biāo)準(zhǔn)地圖、衛(wèi)星圖像或兩者結(jié)合的形式來(lái)展示地理區(qū)域；②可以支持單點(diǎn)標(biāo)注及疊加圖層功能；③支持編程時(shí)定義的或由用戶所控制的縮放和移動(dòng)。

(8)圖片視圖

圖片視圖主要用于展示單獨(dú)的或一系列的靜態(tài)及動(dòng)態(tài)圖片，如下圖所示。

使用規(guī)則：①組件不存在任何預(yù)先定義好的外觀，同時(shí)在默認(rèn)狀態(tài)下不支持用戶的交互行為；②可檢測(cè)圖片本身及其父視圖的屬性，并決定這個(gè)圖片是否應(yīng)該被拉伸、縮放及調(diào)整到適合屏幕的大小，或者固定在一個(gè)特定的位置。

(9)集合視圖

集合視圖用于管理一系列有序的項(xiàng)，并以一種自定義的布局來(lái)呈現(xiàn)這些項(xiàng)，而且支持開(kāi)發(fā)者額外定義手勢(shì)來(lái)識(shí)別并執(zhí)行自定義操作，如下圖所示。

使用規(guī)則：①可以從視覺(jué)上區(qū)分項(xiàng)的子集或提供裝飾性項(xiàng)目，如自定義背景；②布局切換時(shí)支持自定義轉(zhuǎn)場(chǎng)動(dòng)畫(huà)；③在默認(rèn)狀態(tài)下，當(dāng)用戶導(dǎo)入、移動(dòng)或刪除項(xiàng)的時(shí)候，會(huì)出現(xiàn)系統(tǒng)默認(rèn)的動(dòng)畫(huà)效果，同時(shí)集合視圖可識(shí)別輕擊、選中操作。

(10)活動(dòng)視圖

活動(dòng)視圖可以展示系統(tǒng)提供的或自定義的服務(wù)，如下圖所示。

使用規(guī)則：①各類活動(dòng)可通過(guò)訪問(wèn)活動(dòng)視圖控制器來(lái)作用于某些特定的內(nèi)容；②活動(dòng)是一種可定制對(duì)象，代表著某項(xiàng)可以讓用戶在APP中執(zhí)行操作的服務(wù)，以圖標(biāo)的形式呈現(xiàn)，外觀與按鈕圖標(biāo)相似。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。