从设计指南说起，详解iOS系统组件分类体系

　　因为iOS 战 Material Design的组件系统有些纷歧样，以是闭于组件的分类系统我会分iOS篇战Android篇去解说，本篇文章为iOS 篇。

　　关于年夜部门进门设想师及中级设想师去道，脑海里出有一套属于本人的组件分类系统。一道组件，脑筋内里只会蹦出弹窗、toast、操纵列表等。易以构成自我常识系统，能够是只要用到才会念到某个组件。那样的话关于体系的进修视觉设想、交互设想或产物设想是倒霉的。

　　组件基于Material Design战iOS 设想指北。闭于组件的中文翻译名字能够会有许多种，并出有一个威望精确的中文定名。可是设想师晓得某个组件名是甚么模样的便曾经够了。

　　iOS 或 Material Design的设想指北，皆是根据组件的属性去体系引见。实在从设想者的利用场景去道，皆是设想者设想产物时，按照详细的功用去挪用组件。以是从功用去分别是更简单了解战影象的。故组件分类能够根据两种维度去分别。一种是组件的属性去分(本篇文章是基于属性分类)，另外一种是组件的功用种别(下一篇文章引见)。

　　根据组件自己属性分类的思想导图：

　　一. 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)

　　范畴栏只要正在取搜刮栏一同时才会呈现，它让用户能够界说搜刮成果的范畴。

　　当搜刮栏呈现时，范畴栏会呈现正在它的四周。范畴栏的中不雅取您所指定的搜刮栏的中不雅兼容。

　　当用户念正在明白的分类范畴内停止搜刮时，利用范畴栏长短常有效的。但是，更好的挑选是劣化您的搜刮成果，让用户没有需求利用范畴栏对搜刮成果停止挑选，即可以找到他们所需求的内容。

　　两. Ui-views(UI视图)

　　暂时视图：

　　正告对话框(alert)：正告框转达使用或装备某种形态的主要疑息，而且经常需求用户去停止操纵。

　　标准中，对正告框包罗的元素做出了以下划定：题目(必选)、形貌疑息(可选)、输进框(可选)、按钮(必选)。同时，正告框的款式皆是磨砂结果的圆角黑框，不成变动。以下图所示：

　　正告框能够包罗以下特征：

　　必需包罗题目，偶然候会包罗注释文本。

　　包罗一个或多个按钮。

　　操纵列表(action sheet)：操纵列表展现了取用户触收的操纵间接相干的一系列选项。

　　操纵列表，是当用户激起一个操纵的时分，呈现的浮层。“利用操纵列表让用户能够开端一个新使命大概对毁坏性操纵(比方：删除、退出登录等)停止两次确认。” 利用操纵列表开端一个新使命，正在苹果民圆的邮件使用里有许多案例，好比上面那个。

　　操纵列表包罗以下特征：

　　由用户某个操纵止为触收。

　　包罗两个或以上的按钮。

　　利用操纵列表去：供给完成一项使命的差别办法。操纵列表供给一系列正在当前情形下能够完成当前使命的操纵，而那样的情势没有会永世占用页里UI的空间。

　　模态视图(modal view)

　　模态视图是一个以模态情势展示的视图，它为当前使命或当前事情流程供给自力的、自包罗的(self-contained)功用。

　　正在iOS中，苹果利用“模态视图”去指那些正在当前页插进的“浮层页里”。

　　模态视图能够包罗以下特性：

　　能占有全部屏幕，它也能够占有全部女视图(parent view)的地区，大概是屏幕的一部门。

　　包罗完成当前使命所需的笔墨战控件。

　　凡是也会包罗一个完成使命的按钮(面击后便可完成使命，当前模态视图也会消逝)，战一个打消按钮(面击后即抛却当前使命，同时当前模态视图消逝)如图所示：

　　当需求用户完成取app中的根底功用相干的、自力的使命的时分，能够利用模态视图。模态视图特别合用于那些所需元素并不是常驻正在app次要UI中、又包罗多个步调的子使命。

　　内容视图：

　　浮出层(popover)：当用户沉面某个控件或页里中的某一地区时浮出的，半通明的暂时视图。

　　浮出层包罗以下特性：

　　是一个自包罗的模态视图。

　　正在横屏情况中，浮出层会包罗一个箭头，指背其出处。

　　布景是半通明的，而且会恍惚其背后的内容(遮罩布景)。

　　能够包罗多种工具战视图，好比：表格，图片，舆图，文本，网页大概自界说视图、导航栏，东西栏，战标签栏。

　　能够操纵当前app视图中的工具的各类控件或工具(默许状况下， 浮出层中的表格视图，导航栏战东西栏的布景皆是通明的，那样会让浮出层的毛玻璃结果展现出去)。

　　收集视图(web view)

　　收集视图能间接正在您的app中减载战显现丰硕的收集内容，好比嵌进的HTML战网站。好比，“邮件”便利用了收集视图去正在疑息中展现HTML内容。

　　收集视图包罗以下特征：

　　展现收集内容。

　　会主动处置页里中的内容，好比嵌进的HTML战网站。好比，“邮件”便利用了收集视图去正在疑息中展现HTML内容。

　　转动视图(scroll view)

　　转动视图便利用户阅读尺寸逾越转动视图鸿沟的图片(下图中知乎的一个放年夜的界里图片不管是少度借是宽度皆超越了)。

　　转动视图能够包罗以下特性：

　　出有预界说的中不雅。

　　正在刚呈现大概当用户对它停止操纵的时分会呈现滑条。

　　当用户正在视图中拖拽内容，内容随之转动;当用户沉扫屏幕时，内容将快速转动——曲到用户再次触摸屏幕或内容曾经抵达底部时截至。

　　利用转动视图去许可用户正在牢固的空间内阅读年夜尺寸或年夜量的视图。

　　恰当天撑持缩放操纵。假如放年夜战减少关于当前内容是有效的话，能够撑持用户经由过程捏大概单击去对当前视图停止缩放。而如果撑持了缩放操纵的话，您借该当按照用户当前的使命去设定正在当前情形下许可缩放的最年夜值战最小值。

　　正在页形式转动视图中，能够思索利用页里控件(page control)。当您念要展现分页、分屏大概分块的内容，能够利用页里控件去让用户晓得当前内容一共有几块，和他们当前阅读的是第几个。

　　分栏视图掌握器(split view controller)

　　分栏视图掌握器是一个用于办理两个相邻视图掌握器显现的齐屏视图掌握器。

　　正在iOS 7及之前的版本里，对分视图掌握器仅合用于iPad。

　　分栏视图掌握器露有以下特征：

　　能够正在横屏情况中展现并排展现两个窗格。

　　能够让主窗格正在详情窗格上圆显现，也能够正在没有需求的时分(特别是横屏状况下)躲藏主窗格。

　　表格视图(table view)

　　表格视图以一个可转动的单列多止的情势去展现数据。

　　表格视图能够包罗以下特征：

　　以简单停止分段或分组的单列情势展现数据。

　　用户能够经由过程面击去选中某止，或经由过程控件去增加、移除、多选、检察详情大概睁开另外一个表格视图。

　　iOS界说了两种表格款式：

　　仄展型(Plain)。仄展型表格可被分为多少带标签的段降，表格左侧能够会呈现垂曲的表格索引。每止开首能够有页眉，尾部能够有页足(也能够出有)。

　　分组型(Grouped)。表格止以分组情势展现，能够有页眉战页足。分组表格视图中最少露有一组列表，而每组中最少包罗一项内容。取仄展型差别，分组型表格出有索引。

　　文本视图(text view)

　　文本视图能够领受战展现多止文本。

　　文本视图能够包罗以下特征：

　　是一个可界说为任何下度的矩形。

　　当内容太多超越视图的边框时，文本视图撑持转动。

　　撑持自界说字体、色彩战对齐方法(默许状况下，文本视图会以左对齐的乌色体系字体显现)。

　　能够撑持用户编纂，当用户沉击文本视图内部时，将唤起键盘(键盘的规划战范例与决于用户的体系言语设置)。

　　页里视图掌握器(page view controller)

　　页里视图掌握器经由过程转动(Scrolling)或翻页 (Page-curl transition style)两种方法去处置少度超越一页的内容。下图是iOS模仿器中的翻页款式：

　　页里视图掌握器包罗以下特征：

　　带转动条的页里视图掌握器出有默许的中不雅。

　　带翻页结果的掌握器能够正在两页中心删减书脊(book spine)的结果。

　　能够按照指定的转场去模仿出页里切换时的动绘。

　　利用转动条结果的时分，当前页里将转动到下一页;而利用翻页结果时，页里上会呈现一个模仿真体书或条记本翻页结果的翻页动绘。

　　舆图视图(map view)

　　舆图视图显现天文数据，同时撑持体系内置舆图使用的年夜部门功用(以下图所示)。

　　舆图视图包罗以下特征：

　　凡是以尺度舆图、卫星图象、或二者分离的情势去展现天文地区。

　　能够展现以单面标注的备注，和叠减图层(画造途径或两维地区画造表面的)。

　　撑持编程时界说的，或用户所掌握的缩放战挪动。

　　操纵舆图视图能够给用户供给一个可交互的天文地区视图。普通去道，许可用户正在视图中停止交互止为。

　　图片视图(image view)

　　图片视图用以展现一张零丁的图片，大概一系列静静态图片。

　　图片视图能够包罗以下特征：

　　没有存正在任何预先界说好的中不雅，同时正在默许形态下它没有撑持用户的交互止为。

　　能够检测图片自己及其女视图(parent view)的属性，并决议那个图片能否该当被推伸、缩放、调解到合适屏幕的巨细，大概牢固正在一个特定的地位。

　　容器视图掌握器(container view controller)

　　容器视图掌握器接纳自界说的方法去办理战显现它的视图掌握器或一系列子视图。体系界说的容器视图掌握器典范例子包罗标签栏视图掌握器(Tab bar view controller)、导航视图掌握器(navigation view controller)战对分视图掌握器(split view controller)。

　　用容器视图掌握器去显现内容，利用户能够经由过程掌握器去以自界说的方法停止导航。

　　确保容器内容掌握器正在横屏取横屏形式皆可用。很主要的一面是，容器视图掌握器不管正在横屏借是横屏中，体验皆是分歧的。

　　汇合视图(collection view)

　　汇合视图用于办理一系列有序的项，并以一种自界说的规划去显现它们。

　　汇合视图：

　　以从视觉上辨别项的子散大概供给粉饰性项目，比方自界说布景。

　　规划切换时撑持自界说转场动绘。(默许状况下，当用户导进、挪动大概删除项的时分，会呈现体系默许的动绘结果)

　　撑持开辟者分外界说脚势辨认去施行自界说操纵。默许状况下，汇合视图能够辨认沉击(tap)某项以选中，战少按(touch-and-hold)某项停止编纂。

　　举动视图掌握器(activity view controller)

　　举动视图掌握器是一个暂时视图，傍边枚举了一系列能够针对页里特定内容的体系效劳战定造效劳。

　　举动视图掌握器：

　　显现了让用户能够针对当前内容施行操纵的一系列的可设置效劳。

　　按照所处的场景差别，能够呈现正在操纵列表或浮出层中。

　　举动(activity)

　　每一个举动暗示一个体系供给的或自界说的效劳——它能够经由过程会见举动视图掌握器(Activity view controller)去做用于某些特定的内容。

　　举动：

　　一种可定造工具，代表着某个能够让用户正在app中施行操纵的效劳。

　　以图标的情势显现，中不雅取栏按钮图标类似。