由于iOS和MaterialDesign的组件系统有些不同，我来解释一下iOS和Android中的组件分类系统。本文是iOS。
对于大多数入门级设计师和中级设计师来说，他们脑子里没有自己的组件分类体系。你说的组件，只有d窗，吐司， *** 作列表等。会突然出现在你的脑海里。很难形成一个自我认识的体系，可能是某个部件只有用的时候才会想到。这不利于视觉设计、交互设计或产品设计的系统学习。
组件设计和iOS设计指南。关于组件的中文译名可能有很多种，但没有一个权威准确的中文名。但是对于设计者来说，知道一个组件名是什么样子就足够了。
由于iOS和MaterialDesign的组件系统有些不同，我来解释一下iOS和Android中的组件分类系统。本文是iOS。
或者说iOS材料设计的设计指南，都是按照组件的性质进行系统介绍的。其实从设计师的使用场景来看，设计师在设计产品的时候是根据具体的功能来调用组件的。所以用函数更容易理解和记忆。因此，组件分类可以根据两个维度来划分。一个是组件的属性分类(本文基于属性分类)，一个是控件组件的功能类别(下一篇文章介绍)。
根据组件本身的属性分类的思维导图:
1.UI-bars（UI栏）导航栏（navigationbar）导航栏可以实现应用程序不同信息层次间的导航，有时也可以用来管理当前屏幕内容。
如图，是系统导航的基本形式，其中Back是上一级的标题，Title是当前视图的标题，Edit代表 *** 作控制。
IOS10规范中提到:一般来说，导航栏上最多应该有以下三个元素:当前视图的标题、后退按钮和一个用于当前 *** 作的控件。
搜索栏（searchbar)搜索列获取用户输入的文本，该文本用作搜索的关键字(下图中显示的文本是占位符，不是用户输入的文本)。
搜索栏可以包含以下元素:
占位符文本(Placeholdertext)。占位符文本通常会写明控件的功能（比如上图里的“Search”字样），或者提示用户输入的文本将在哪里搜索（如“Google”）。清除按钮(TheClearbutton)。大多数搜索栏都会提供清除按钮，方便用户一键清空输入内容。状态栏(tatusbar)状态栏显示关于设备及其周围环境的重要信息。
状态栏包含以下功能:
是透明的始终固定在整个屏幕的上边缘标签栏(tabbar)该选项卡允许用户在不同的子任务、视图和模式之间切换。
该选项卡位于屏幕的底部，应该在应用程序的任何地方都可以看到。显示图标和文本内容，并保持每个项目的宽度相同。当用户选择一个标签时，该标签将被适当地高亮显示。
列可以包含以下属性:
始终出现在屏幕的底部一个标签栏一次最多可承载5个标签（多于5个标签的时候，可以展示前4个标签和一个“更多”，并将其他的标签以列表形式收纳到“更多”里面）在横屏与竖屏情况下，高度均保持一致一般来说，标签栏是用来组织整个应用层的信息结构的。tab非常适合作为应用的主界面，因为它可以很好的扁平化信息层级，同时提供了同级信息类别和模式的多个入口。
工具栏(toolbar)工具栏上有用于 *** 作当前屏幕中的对象的控件。
工具栏可以包含以下功能:
在iPhone上，工具栏始终位于屏幕底部，而在iPad上则有可能出现在顶部范围栏(scopebar)该范围仅与搜索字段一起显示，允许用户定义搜索结果的范围。
当搜索栏出现时，范围栏将出现在其附近。该字段的外观与您指定的搜索字段的外观兼容。
当用户想要在明确的分类范围内进行搜索时，范围栏非常有用。但是，更好的选择是优化您的搜索结果，以便用户可以找到他们需要的内容，而不用使用范围栏来过滤搜索结果。
2.Ui-views（UI视图）Ui视图分为内容视图和临时视图。
临时视图:
警告对话框（alert）警告框传达关于应用程序或设备特定状态的重要信息，通常需要用户 *** 作。
规范中规定了警告框的以下元素:标题(必选)、描述信息(可选)、输入框(可选)和按钮(必选)。同时，警告框的样式为磨砂效果的圆形白盒，不可更改。如下图所示:
警告框可以包含以下特征:
必须包含标题，有时候会包含正文文本包含一个或多个按钮 *** 作列表（actionsheet）动作列表显示了与用户触发的动作直接相关的一系列选择。
*** 作列表是用户激活 *** 作时出现的浮动层。使用动作列表允许用户开始新的任务或重新确认破坏性动作(例如删除、注销等)。)."使用动作列表开始新任务。苹果官方邮件应用里有很多案例，比如下面这个。
该列表包含以下特征:
由用户某个 *** 作行为触发包含两个或以上的按钮使用动作列表可以:提供不同的方法来完成任务。列表提供了在当前情况下可以完成当前任务的一系列 *** 作，这种形式不会永久占用页面UI的空空间。
模态视图（modalview）模态视图是以模态形式呈现的视图，为当前任务或工作流提供独立的、自包含的功能。
在iOS中，苹果用“模态视图”来指代那些插入当前页面的“浮动页面”。
模态视图可以包含以下特征:
能占据整个屏幕，它也可能占据整个父视图(parentview)的区域，或者是屏幕的一部分包含完成当前任务所需的文字和控件通常还包含一个完成任务的按钮(点击完成任务，当前模态视图消失)，一个取消按钮(点击放弃当前任务，当前模态视图消失)，如图:
当用户需要完成与应用程序中的基本功能相关的独立任务时，可以使用模态视图。模态视图特别适合子任务，这些子任务所需的元素不在应用程序的主UI中，并且包含多个步骤。
内容视图:
浮出层（popover）浮动层是一种半透明的临时视图，当用户点击页面中的控件或区域时，它会浮动。
浮动层包含以下特征:
是一个自包含的模态视图在横屏环境中，浮出层会包含一个箭头，指向其出处背景是半透明的，并且会模糊其背后的内容（遮罩背景）可以包含多种对象和视图，比如：表格，图片，地图，文本，网页或者自定义视图、导航栏，工具栏，和标签栏可以 *** 作当前app视图中的对象的各种控件或对象（默认情况下，浮出层中的表格视图，导航栏和工具栏的背景都是透明的，这样会让浮出层的毛玻璃效果展示出来）网络视图（webview）WebView可以在您的应用程序中直接加载和呈现丰富的Web内容，如嵌入的HTML和网站。例如,“邮件”使用web视图显示邮件中的HTML内容。
网络视图包含以下功能:
展示网络内容会自动处理页面中的内容，比如嵌入的HTML和网站。比如，“邮件”就使用了网络视图来在信息中展示HTML内容滚动视图（scrollview）滚动视图方便用户浏览尺寸超过滚动视图边界的图片(下图的知乎的一张放大界面图片，长宽都超过)。
滚动视图可以包含以下功能:
没有预定义的外观。
滑块会在出现的时候或者用户 *** 作的时候才出现。
当用户拖放视图中的内容时，内容随之滚动；当用户滑动屏幕时，内容将快速滚动——直到用户再次触摸屏幕或内容到达底部时停止。
使用滚动视图允许用户在固定空房间中浏览大尺寸或大量视图。
正确支持缩放 *** 作。如果放大和缩小对当前内容有用，可以支持用户通过捏或双击来缩放当前视图。如果支持缩放 *** 作，还应该根据用户当前的任务设置当前情况下允许的最大和最小缩放值。
在页面模式滚动视图中，可以考虑使用页面控件。当您想要显示分页、分屏或分段的内容时，您可以使用页面控制让用户知道当前内容中有多少个块以及他们当前正在浏览哪个块。
分栏视图控制器（splitviewcontroller）列视图控制器是一个全屏视图控制器，用于管理两个相邻视图控制器的显示。
在iOS7和更早版本中，分割视图控制器仅适用于iPad。
列视图控制器具有以下特性:
可以在横屏环境中展示并排展示两个窗格可以让主窗格在详情窗格上方显示，也可以在不需要的时候（尤其是竖屏情况下）隐藏主窗格。表格视图（tableview）表格以可滚动的单列和多行的形式显示数据。
表格视图可以包含以下属性:
以容易进行分段或分组的单列形式展示数据用户可以通过点击来选中某行，或通过控件来添加、移除、多选、查看详情或者展开另一个表格视图IOS定义了两种表格样式:
平的(素色)。平铺的表格可以分成几个带标签的段落，并且垂直的表格索引可以出现在表格的右侧。每一行可以在开头有一个页眉，在结尾有一个页脚(或者没有)。
分组(分组)。行成组显示，可以有页眉和页脚。分组的表格视图包含至少一组列表，每组包含至少一个项目。与平铺表不同，分组表没有索引。
文本视图（textview）文本视图可以接收和显示多行文本。
文本视图可以包含以下特征:
是一个可定义为任何高度的矩形当内容太多超出视图的边框时，文本视图支持滚动支持自定义字体、颜色和对齐方式（默认情况下，文本视图会以左对齐的黑色系统字体显示）可以支持用户编辑，当用户轻击文本视图内部时，将唤起键盘（键盘的布局和类型取决于用户的系统语言设置）页面视图控制器（pageviewcontroller）页面控制器通过滚动或卷页转换方式处理长度超过一页的内容。下图是iOS模拟器中的翻页风格。
页面控制器包含以下功能:
带滚动条的页面视图控制器没有默认的外观。带翻页效果的控制器可以在两页中间增加书脊(bookspine)的效果可以根据指定的转场来模拟出页面切换时的动画。使用滚动条效果时，当前页面会滚动到下一页；使用翻页效果时，页面上会出现模拟实体书或笔记本翻页效果的翻页动画。
地图视图（mapview）地图呈现地理数据，并支持内置地图应用程序的大部分功能(如下图所示)。
该地图包含以下功能:
通常以标准地图、卫星图像、或两者结合的形式来展示地理区域可以展示以单点标注的备注，以及叠加图层（绘制路径或二维区域绘制轮廓的）支持编程时定义的，或用户所控制的缩放和移动地图视图可以向用户提供地理区域的交互式视图。一般来说，允许用户在视图中进行交互。
图片视图（imageview）视图用于显示单张图片或一系列静态和动态图片。
图片可以包含以下特征:
不存在任何预先定义好的外观，同时在默认状态下它不支持用户的交互行为。可以检测图片本身及其父视图(parentview)的属性，并决定这个图片是否应该被拉伸、缩放、调整到适合屏幕的大小，或者固定在一个特定的位置。容器视图控制器（containerviewcontroller）容器控制器以定制的方式管理和呈现它的视图控制器或一系列子视图。由系统定义的容器视图控制器的典型例子包括标签栏视图控制器、导航视图控制器和分割视图控制器。
容器视图控制器用于呈现内容，以便用户可以通过控制器以定制的方式导航。
确保容器内容控制器在横向和纵向模式下都可用。容器视图控制器在水平和垂直屏幕上的体验是一致的，这一点非常重要。
集合视图（collectionview）视图用于管理一系列有序的项目，并在自定义布局中显示它们。
收藏视图:
以从视觉上区分项的子集或者提供装饰性项目，例如自定义背景。布局切换时支持自定义转场动画。（默认情况下，当用户导入、移动或者删除项的时候，会出现系统默认的动画效果。）支持开发者额外定义手势识别来执行自定义 *** 作。默认情况下，集合视图可以识别轻击(tap)某项以选中，和长按(touch-and-hold)某项进行编辑。活动视图控制器（activityviewcontroller）活动视图控制器是一个临时视图，它为页面的特定内容列出了一系列系统服务和定制服务。
活动视图控制器:
显示了让用户可以针对当前内容执行 *** 作的一系列的可配置服务根据所处的场景不同，可能出现在 *** 作列表或浮出层中活动（activity）每个活动代表一个系统提供的或定制的服务——它可以通过访问活动视图控制器来处理一些特定的内容。
活动包括:
一种可定制对象，代表着某个可以让用户在app中执行 *** 作的服务以图标的形式呈现，外观与栏按钮图标相似后续文章:一篇文章玩的是控件组件分类系统——iOS，会根据控件组件的功能属性进行分类。敬请期待！
作者:UX，华为ITUX互动组组长微信微信官方账号:UXED
作者@UX未经允许禁止转载。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）