91麻豆精品在线观看_一级做性色a爰片久久毛片免费_zzijzzij亚洲日本少妇jizjiz_国产日产欧美欧韩在线_日本高清在线www3344

由于iOS 和 Material Design的組件體系有些不一樣，所以關(guān)于組件的分類(lèi)體系我會(huì)分iOS篇和Android篇來(lái)講解，本篇文章為iOS 篇。

　　對(duì)于大部分入門(mén)設(shè)計(jì)師及中級(jí)設(shè)計(jì)師來(lái)說(shuō)，腦海里沒(méi)有一套屬于自己的組件分類(lèi)體系。一說(shuō)組件，腦子里面只會(huì)蹦出彈窗、toast、操作列表等。難以形成自我知識(shí)體系，可能是只有用到才會(huì)想到某個(gè)組件。這樣的話(huà)對(duì)于系統(tǒng)的學(xué)習(xí)視覺(jué)設(shè)計(jì)、交互設(shè)計(jì)或產(chǎn)品設(shè)計(jì)是不利的。

　　組件基于Material Design和iOS 設(shè)計(jì)指南。關(guān)于組件的中文翻譯名字可能會(huì)有很多種，并沒(méi)有一個(gè)權(quán)威準(zhǔn)確的中文命名。但是設(shè)計(jì)師知道某個(gè)組件名是什么樣子的就已經(jīng)夠了。

　　iOS 或 Material Design的設(shè)計(jì)指南，都是按照組件的屬性來(lái)系統(tǒng)介紹。其實(shí)從設(shè)計(jì)者的使用場(chǎng)景來(lái)說(shuō)，都是設(shè)計(jì)者設(shè)計(jì)產(chǎn)品時(shí)，根據(jù)具體的功能來(lái)調(diào)用組件。所以從功能來(lái)劃分是更容易理解和記憶的。故組件分類(lèi)可以按照兩種維度來(lái)劃分。一種是組件的屬性來(lái)分(本篇文章是基于屬性分類(lèi))，另一種是組件的功能類(lèi)別(下一篇文章介紹)。

　　按照組件本身屬性分類(lèi)的思維導(dǎo)圖：

　　一. UI-bars (UI欄)

　　導(dǎo)航欄(navigation bar)

　　導(dǎo)航欄能夠?qū)崿F(xiàn)在應(yīng)用不同信息層級(jí)結(jié)構(gòu)間的導(dǎo)航，有時(shí)候也可用于管理當(dāng)前屏幕內(nèi)容。

　　△ 系統(tǒng)導(dǎo)航的基礎(chǔ)形式，其中Back為上一級(jí)的標(biāo)題，Title為當(dāng)前視圖的標(biāo)題，Edit代表操作控件。

　　iOS10規(guī)范中提及：一般來(lái)說(shuō)，導(dǎo)航欄上應(yīng)該不多于以下三種元素：當(dāng)前視圖的標(biāo)題、返回按鈕和一個(gè)針對(duì)當(dāng)前的操作控件。

　　搜索欄(search bar)

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

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

　　占位符文本(Placeholder text)。占位符文本通常會(huì)寫(xiě)明控件的功能(比如上圖里的 “Search”字樣)，或者提示用戶(hù)輸入的文本將在哪里搜索(如“Google”)。

　　清除按鈕(The Clear button)。大多數(shù)搜索欄都會(huì)提供清除按鈕，方便用戶(hù)一鍵清空輸入內(nèi)容。

　　狀態(tài)欄(tatus bar)

　　狀態(tài)欄展示了關(guān)于設(shè)備及其周?chē)h(huán)境的重要信息。

　　狀態(tài)欄包含以下特征：

　　是透明的。

　　始終固定在整個(gè)屏幕的上邊緣。

　　標(biāo)簽欄(tab bar)

　　標(biāo)簽欄讓用戶(hù)在不同的子任務(wù)、視圖和模式中進(jìn)行切換。

　　標(biāo)簽欄位于屏幕底部，并應(yīng)該保證在應(yīng)用內(nèi)任何位置都可用。展示圖標(biāo)和文字內(nèi)容，每一項(xiàng)均保持等寬。當(dāng)用戶(hù)選中某個(gè)標(biāo)簽時(shí)，該標(biāo)簽呈現(xiàn)適當(dāng)?shù)母吡翣顟B(tài)。

　　標(biāo)簽欄可以包含以下特性：

　　始終出現(xiàn)在屏幕的底部。

　　一個(gè)標(biāo)簽欄一次最多可承載5個(gè)標(biāo)簽(多于5個(gè)標(biāo)簽的時(shí)候，可以展示前4個(gè)標(biāo)簽和一個(gè)“更多”，并將其他的標(biāo)簽以列表形式收納到“更多”里面)。

　　在橫屏與豎屏情況下，高度均保持一致。

　　一般而言，使用標(biāo)簽欄來(lái)組織整個(gè)應(yīng)用層面的信息結(jié)構(gòu)。標(biāo)簽欄非常適合用于應(yīng)用的主界面中，因?yàn)樗梢院芎玫乇馄叫畔蛹?jí)，并且同時(shí)提供多個(gè)觸達(dá)同級(jí)信息類(lèi)目與模式的入口。

　　工具欄(tool bar)

　　工具欄上放置著用于操作當(dāng)前屏幕中各對(duì)象的控件

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

　　在iPhone上，工具欄始終位于屏幕底部，而在iPad上則有可能出現(xiàn)在頂部。

　　范圍欄(scope bar)

　　范圍欄只有在與搜索欄一起時(shí)才會(huì)出現(xiàn)，它讓用戶(hù)可以定義搜索結(jié)果的范圍。

　　當(dāng)搜索欄出現(xiàn)時(shí)，范圍欄會(huì)出現(xiàn)在它的附近。范圍欄的外觀與你所指定的搜索欄的外觀兼容。

　　當(dāng)用戶(hù)想在明確的分類(lèi)范圍內(nèi)進(jìn)行搜索時(shí)，使用范圍欄是非常有用的。然而，更好的選擇是優(yōu)化您的搜索結(jié)果，讓用戶(hù)不需要使用范圍欄對(duì)搜索結(jié)果進(jìn)行篩選，便可以找到他們所需要的內(nèi)容。

　　二. Ui-views(UI視圖)

　　臨時(shí)視圖：

　　警告對(duì)話(huà)框(alert)：警告框傳達(dá)應(yīng)用或設(shè)備某種狀態(tài)的重要信息，并且常常需要用戶(hù)來(lái)進(jìn)行操作。

　　規(guī)范中，對(duì)警告框包含的元素做出了如下規(guī)定：標(biāo)題(必選)、描述信息(可選)、輸入框(可選)、按鈕(必選)。同時(shí)，警告框的樣式都是磨砂效果的圓角白框，不可更改。如下圖所示：

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

　　必須包含標(biāo)題，有時(shí)候會(huì)包含正文文本。

　　包含一個(gè)或多個(gè)按鈕。

　　操作列表(action sheet)：操作列表展示了與用戶(hù)觸發(fā)的操作直接相關(guān)的一系列選項(xiàng)。

　　操作列表，是當(dāng)用戶(hù)激發(fā)一個(gè)操作的時(shí)候，出現(xiàn)的浮層?！笆褂貌僮髁斜碜層脩?hù)可以開(kāi)始一個(gè)新任務(wù)或者對(duì)破壞性操作(例如：刪除、退出登錄等)進(jìn)行二次確認(rèn)?！?使用操作列表開(kāi)始一個(gè)新任務(wù)，在蘋(píng)果官方的郵件應(yīng)用里有很多案例，比如下面這個(gè)。

　　操作列表包含以下特性：

　　由用戶(hù)某個(gè)操作行為觸發(fā)。

　　包含兩個(gè)或以上的按鈕。

　　使用操作列表來(lái)：提供完成一項(xiàng)任務(wù)的不同方法。操作列表提供一系列在當(dāng)前情景下可以完成當(dāng)前任務(wù)的操作，而這樣的形式不會(huì)永久占用頁(yè)面UI的空間。

　　模態(tài)視圖(modal view)

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

　　在iOS中，蘋(píng)果使用“模態(tài)視圖”來(lái)指那些在當(dāng)前頁(yè)插入的“浮層頁(yè)面”。

　　模態(tài)視圖可以包含以下特征：

　　能占據(jù)整個(gè)屏幕，它也可能占據(jù)整個(gè)父視圖(parent view)的區(qū)域，或者是屏幕的一部分。

　　包含完成當(dāng)前任務(wù)所需的文字和控件。

　　通常也會(huì)包含一個(gè)完成任務(wù)的按鈕(點(diǎn)擊后即可完成任務(wù)，當(dāng)前模態(tài)視圖也會(huì)消失)，和一個(gè)取消按鈕(點(diǎn)擊后即放棄當(dāng)前任務(wù)，同時(shí)當(dāng)前模態(tài)視圖消失)如圖所示：

　　當(dāng)需要用戶(hù)完成與app中的基礎(chǔ)功能相關(guān)的、獨(dú)立的任務(wù)的時(shí)候，可以使用模態(tài)視圖。模態(tài)視圖尤其適用于那些所需元素并非常駐在app主要UI中、又包含多個(gè)步驟的子任務(wù)。

　　內(nèi)容視圖：

　　浮出層(popover)：當(dāng)用戶(hù)輕點(diǎn)某個(gè)控件或頁(yè)面中的某一區(qū)域時(shí)浮出的，半透明的臨時(shí)視圖。

　　浮出層包含以下特征：

　　是一個(gè)自包含的模態(tài)視圖。

　　在橫屏環(huán)境中，浮出層會(huì)包含一個(gè)箭頭，指向其出處。

　　背景是半透明的，并且會(huì)模糊其背后的內(nèi)容(遮罩背景)。

　　可以包含多種對(duì)象和視圖，比如：表格，圖片，地圖，文本，網(wǎng)頁(yè)或者自定義視圖、導(dǎo)航欄，工具欄，和標(biāo)簽欄。

　　可以操作當(dāng)前app視圖中的對(duì)象的各種控件或?qū)ο?默認(rèn)情況下， 浮出層中的表格視圖，導(dǎo)航欄和工具欄的背景都是透明的，這樣會(huì)讓浮出層的毛玻璃效果展示出來(lái))。

　　網(wǎng)絡(luò)視圖(web view)

　　網(wǎng)絡(luò)視圖能直接在你的app中加載和呈現(xiàn)豐富的網(wǎng)絡(luò)內(nèi)容，比如嵌入的HTML和網(wǎng)站。比如，“郵件”就使用了網(wǎng)絡(luò)視圖來(lái)在信息中展示HTML內(nèi)容。

　　網(wǎng)絡(luò)視圖包含以下特性：

　　展示網(wǎng)絡(luò)內(nèi)容。

　　會(huì)自動(dòng)處理頁(yè)面中的內(nèi)容，比如嵌入的HTML和網(wǎng)站。比如，“郵件”就使用了網(wǎng)絡(luò)視圖來(lái)在信息中展示HTML內(nèi)容。

　　滾動(dòng)視圖(scroll view)

　　滾動(dòng)視圖方便用戶(hù)瀏覽尺寸超越滾動(dòng)視圖邊界的圖片(下圖中知乎的一個(gè)放大的界面圖片無(wú)論是長(zhǎng)度還是寬度都超過(guò)了)。

　　滾動(dòng)視圖可以包含以下特征：

　　沒(méi)有預(yù)定義的外觀。

　　在剛出現(xiàn)或者當(dāng)用戶(hù)對(duì)它進(jìn)行操作的時(shí)候會(huì)出現(xiàn)滑條。

　　當(dāng)用戶(hù)在視圖中拖拽內(nèi)容，內(nèi)容隨之滾動(dòng);當(dāng)用戶(hù)輕掃屏幕時(shí)，內(nèi)容將快速滾動(dòng)——直到用戶(hù)再次觸摸屏幕或內(nèi)容已經(jīng)到達(dá)底部時(shí)停止。

　　使用滾動(dòng)視圖來(lái)允許用戶(hù)在固定的空間內(nèi)瀏覽大尺寸或大量的視圖。

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

　　在頁(yè)模式滾動(dòng)視圖中，可以考慮使用頁(yè)面控件(page control)。當(dāng)你想要展示分頁(yè)、分屏或者分塊的內(nèi)容，可以使用頁(yè)面控件來(lái)讓用戶(hù)知道當(dāng)前內(nèi)容一共有多少塊，以及他們當(dāng)前瀏覽的是第幾個(gè)。

　　分欄視圖控制器(split view controller)

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

　　在iOS 7及之前的版本里，對(duì)分視圖控制器僅適用于iPad。

　　分欄視圖控制器含有以下特性：

　　可以在橫屏環(huán)境中展示并排展示兩個(gè)窗格。

　　可以讓主窗格在詳情窗格上方顯示，也可以在不需要的時(shí)候(尤其是豎屏情況下)隱藏主窗格。

　　表格視圖(table view)

　　表格視圖以一個(gè)可滾動(dòng)的單列多行的形式來(lái)展示數(shù)據(jù)。

　　表格視圖可以包含以下特性：

　　以容易進(jìn)行分段或分組的單列形式展示數(shù)據(jù)。

　　用戶(hù)可以通過(guò)點(diǎn)擊來(lái)選中某行，或通過(guò)控件來(lái)添加、移除、多選、查看詳情或者展開(kāi)另一個(gè)表格視圖。

　　iOS定義了兩種表格樣式：

　　平鋪型(Plain)。平鋪型表格可被分為若干帶標(biāo)簽的段落，表格右側(cè)可能會(huì)出現(xiàn)垂直的表格索引。每行開(kāi)頭可以有頁(yè)眉，尾部可以有頁(yè)腳(也可以沒(méi)有)。

　　分組型(Grouped)。表格行以分組形式展示，可以有頁(yè)眉和頁(yè)腳。分組表格視圖中至少含有一組列表，而每一組中至少包含一項(xiàng)內(nèi)容。與平鋪型不同，分組型表格沒(méi)有索引。

　　文本視圖(text view)

　　文本視圖可以接收和展示多行文本。

　　文本視圖可以包含以下特性：

　　是一個(gè)可定義為任何高度的矩形。

　　當(dāng)內(nèi)容太多超出視圖的邊框時(shí)，文本視圖支持滾動(dòng)。

　　支持自定義字體、顏色和對(duì)齊方式(默認(rèn)情況下，文本視圖會(huì)以左對(duì)齊的黑色系統(tǒng)字體顯示)。

　　可以支持用戶(hù)編輯，當(dāng)用戶(hù)輕擊文本視圖內(nèi)部時(shí)，將喚起鍵盤(pán)(鍵盤(pán)的布局和類(lèi)型取決于用戶(hù)的系統(tǒng)語(yǔ)言設(shè)置)。

　　頁(yè)面視圖控制器(page view controller)

　　頁(yè)面視圖控制器通過(guò)滾動(dòng)(Scrolling)或翻頁(yè) (Page-curl transition style)兩種方式來(lái)處理長(zhǎng)度超過(guò)一頁(yè)的內(nèi)容。下圖是iOS模擬器中的翻頁(yè)樣式：

　　頁(yè)面視圖控制器包含以下特性：

　　帶滾動(dòng)條的頁(yè)面視圖控制器沒(méi)有默認(rèn)的外觀。

　　帶翻頁(yè)效果的控制器可以在兩頁(yè)中間增加書(shū)脊(book spine)的效果。

　　可以根據(jù)指定的轉(zhuǎn)場(chǎng)來(lái)模擬出頁(yè)面切換時(shí)的動(dòng)畫(huà)。

　　使用滾動(dòng)條效果的時(shí)候，當(dāng)前頁(yè)面將滾動(dòng)到下一頁(yè);而使用翻頁(yè)效果時(shí)，頁(yè)面上會(huì)出現(xiàn)一個(gè)模擬實(shí)體書(shū)或筆記本翻頁(yè)效果的翻頁(yè)動(dòng)畫(huà)。

　　地圖視圖(map view)

　　地圖視圖呈現(xiàn)地理數(shù)據(jù)，同時(shí)支持系統(tǒng)內(nèi)置地圖應(yīng)用的大部分功能(如下圖所示)。

　　地圖視圖包含以下特性：

　　通常以標(biāo)準(zhǔn)地圖、衛(wèi)星圖像、或兩者結(jié)合的形式來(lái)展示地理區(qū)域。

　　可以展示以單點(diǎn)標(biāo)注的備注，以及疊加圖層(繪制路徑或二維區(qū)域繪制輪廓的)。

　　支持編程時(shí)定義的，或用戶(hù)所控制的縮放和移動(dòng)。

　　利用地圖視圖可以給用戶(hù)提供一個(gè)可交互的地理區(qū)域視圖。一般來(lái)說(shuō)，允許用戶(hù)在視圖中進(jìn)行交互行為。

　　圖片視圖(image view)

　　圖片視圖用以展示一張單獨(dú)的圖片，或者一系列靜動(dòng)態(tài)圖片。

　　圖片視圖可以包含以下特性：

　　不存在任何預(yù)先定義好的外觀，同時(shí)在默認(rèn)狀態(tài)下它不支持用戶(hù)的交互行為。

　　可以檢測(cè)圖片本身及其父視圖(parent view)的屬性，并決定這個(gè)圖片是否應(yīng)該被拉伸、縮放、調(diào)整到適合屏幕的大小，或者固定在一個(gè)特定的位置。

　　容器視圖控制器(container view controller)

　　容器視圖控制器采用自定義的方式來(lái)管理和呈現(xiàn)它的視圖控制器或一系列子視圖。系統(tǒng)定義的容器視圖控制器典型例子包括標(biāo)簽欄視圖控制器(Tab bar view controller)、導(dǎo)航視圖控制器(navigation view controller)和對(duì)分視圖控制器(split view controller)。

　　用容器視圖控制器來(lái)呈現(xiàn)內(nèi)容，使用戶(hù)可以通過(guò)控制器來(lái)以自定義的方式進(jìn)行導(dǎo)航。

　　確保容器內(nèi)容控制器在橫屏與豎屏模式都可用。很重要的一點(diǎn)是，容器視圖控制器無(wú)論在橫屏還是豎屏中，體驗(yàn)都是一致的。

　　集合視圖(collection view)

　　集合視圖用于管理一系列有序的項(xiàng)，并以一種自定義的布局來(lái)呈現(xiàn)它們。

　　集合視圖：

　　以從視覺(jué)上區(qū)分項(xiàng)的子集或者提供裝飾性項(xiàng)目，例如自定義背景。

　　布局切換時(shí)支持自定義轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。(默認(rèn)情況下，當(dāng)用戶(hù)導(dǎo)入、移動(dòng)或者刪除項(xiàng)的時(shí)候，會(huì)出現(xiàn)系統(tǒng)默認(rèn)的動(dòng)畫(huà)效果)

　　支持開(kāi)發(fā)者額外定義手勢(shì)識(shí)別來(lái)執(zhí)行自定義操作。默認(rèn)情況下，集合視圖可以識(shí)別輕擊(tap)某項(xiàng)以選中，和長(zhǎng)按(touch-and-hold)某項(xiàng)進(jìn)行編輯。

　　活動(dòng)視圖控制器(activity view controller)

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

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

　　顯示了讓用戶(hù)可以針對(duì)當(dāng)前內(nèi)容執(zhí)行操作的一系列的可配置服務(wù)。

　　根據(jù)所處的場(chǎng)景不同，可能出現(xiàn)在操作列表或浮出層中。

　　活動(dòng)(activity)

　　每個(gè)活動(dòng)表示一個(gè)系統(tǒng)提供的或自定義的服務(wù)——它可以通過(guò)訪問(wèn)活動(dòng)視圖控制器(Activity view controller)來(lái)作用于某些特定的內(nèi)容。

　　活動(dòng)：

　　一種可定制對(duì)象，代表著某個(gè)可以讓用戶(hù)在app中執(zhí)行操作的服務(wù)。

　　以圖標(biāo)的形式呈現(xiàn)，外觀與欄按鈕圖標(biāo)相似。