因为iOS的组件系统和材质设计有些区别，所以我将组件分类系统分为iOS和Android，本文是iOS。
关于各大部门的入门设计师和中级设计师的方式，我脑子里有一套属于我的组件分类体系。组件、仅d出窗口、toast、 *** 作列表等。会突然出现在你的脑海里。很容易形成自我知识体系，可以是你用的时候只会看某个组件。那样的话，了解系统的视觉假设、交互假设或者产品假设就要倒霉了。
基于组件的材料设计和iOS应该指向北方。元件的中文译名可以有很多种，有一个有声望的准确的中文名。然而，对于设计者来说，知道一个组件名是什么样子就足够了。
或者说iOS材质设计的思路参考了北方，按照组件的属性引入系统。从空想家的使用场景到道，当一切都是空想家想象的产物时，根据其详细功能挪用组件。把战争图像和它们的功能区分开来，就更容易理解了。因此，可以根据两个维度来区分组件分类。一个是组件的属性分类(本文基于属性分类)，一个是组件的功能类别(下一篇文章介绍)。
组件根据自身属性分类的思维导图；
一.用户界面栏(用户界面栏)
导航栏(导航栏)
导航栏可用于在不同的信息层次结构之间导航，偶尔也可用于处理当前屏幕内容。
△系统导航的基本情况，其中Back是上一级的标题，Title是当前视图的标题，Edit代表 *** 纵控制。
IOS10标准说:一般来说，导航条里最多应该有以下三个元素:当前视图的标题、后退按钮和一个用于当前 *** 作的控件。
搜索栏
抓取列得到用户输入的文本，作为搜索的关键词(下图显示的文本是占位符，非用户输入的文本不是)。
草稿栏可以包括以下元素:
占位符文本(占位符文本)。占位符文本通常表示控件的功能(像上图中的“搜索”一词)，大概是提醒用户输入的文本会在那里被搜索到(像“Google”)。
清除按钮。大多数搜索栏城市都提供了清除按钮，方便用户一键输入内容。
Tatus酒吧
表格显示了对设备及其周围环境的主要怀疑。
列包括以下特征:
很明亮。
在所有屏幕顶部边缘的第一个实体的末尾。
标签栏(标签栏)
选项卡允许用户停止切换不同的子任务，并查看战争形式。
选项卡位于屏幕的底部，在使用中的任何位置都应该可以看到。显示图标和墨迹的内容，每一项都以相同的宽度链接。当用户选择某个标签时，该标签会以适当的形式出现。
列可以包含以下功能:
初始演示位于屏幕底部。
一个标签栏一次最多可以加载5个标签(当超过5个标签时，前4个标签可以用“更多”显示，其他标签可以在“更多”列表中支持)。
横屏取横屏的情况下，上下级连接不同。
一般来说，标签栏用于构建所有使用层中的信息结构。标签非常适合在主世界中使用，因为它可以提高信息的级别，同时，它可以供应多个达到相同信息级别的导入。
刀杆
东西栏上排列了一些控件，用于 *** 作当前屏幕中的工具。
列可以包含以下功能:
在iPhone上，东西栏在屏幕底部，而在iPad上，它可以显示在顶部。
范围栏
只要搜索栏被占用，类别就会出现。它允许用户定义搜索结果的类别。
当搜索栏显示时，类别栏将显示在其周围。类别的中间部分与您指定的搜索列的中间部分兼容。
当用户停止在一个明确的类别中搜索时，使用类别列的长度通常是有效的。但是，更好的选择是恶化你的搜索结果，让用户不用使用分类栏停止选择搜索结果就能找到自己需要的内容。
二。用户界面视图(用户界面视图)
临时视图:
警告:警告框传达了使用或装备某个表单的主要信息，通常要求用户停止 *** 作。
在标准中，定义了通知框的以下元素:标题(必需)、外观信息(可选)、输入框(可选)和按钮(必需)。同时，警告框的样式是磨砂效果的圆形黑框，不会改变。下图显示了:
通知框可以包括以下功能:
包括必要的主题，偶尔包括注释文本。
包括一个或多个按钮。
动作表:动作表显示了一系列与用户触摸的动作间接相关的选项。
*** 作列表是一个浮动层，当用户触发一个 *** 作时出现。使用 *** 作列表允许用户开始新的任务，并且可能停止确认破坏性 *** 作(例如删除、注销等)。)两次。”利用 *** 控列表开始新任务，苹果人圈里有很多使用邮箱的案例，比如上面这个。
*** 作列表包括以下功能:
通过用户的 *** 纵来停止触摸。
包括两个或多个按钮。
使用 *** 作列表:提供完成任务的不同方式。列表提供了一系列可以在当前情况下完成当前任务的 *** 作，并且那个情况不会永远占据页面中UI的空空间。
模态视图(模态视图)
模态视图是在模态情境下显示的视图，为当前任务或当前业务流程提供了自包含的功能。
在iOS中，苹果使用“模态视图”来指代正在插入当前页面的“浮动页面”。
模态视图可以包括以下特征:
它可以占据所有的屏幕，也可以占据父视图的所有区域，很可能是屏幕的一部分。
包含完成当前任务所需的笔和墨水的战争控制。
通常会有一个完成任务的按钮(打脸后可以完成任务，当前模态视图消失)，和一个取消按钮(打脸后放弃当前任务，当前模态视图同时消失)，如图:
当用户需要完成应用程序中基本功能的相关和独立任务时，可以使用模态视图。模态视图特别适合那些所需元素不常驻于app的二级UI，但又包含多步的子任务。
内容视图:
Popover:当用户下沉页面中的某个控件或某个区域时出现的半透明临时视图。
浮动层包括以下特征:
是一个独立的模态视图。
在景观情况下，浮动层将包含一个指向其来源的箭头。
布景是半明半暗的，你会对背后的内容恍惚(遮蔽布景)。
可以包括各种工具和视图，如:表格、图片、地图、文本、网页自定义视图、导航栏、东西栏和战争标签栏。
可以 *** 纵当前app视图中工具的各种控件或工具(默认情况下，浮动层中的表格视图、导航栏和东西栏中的风景都是亮灯的，会显示浮动层的毛玻璃效果)。
收藏视图(web视图)
收藏视图可以间接展示你app中丰富的收藏内容，比如嵌入式HTML网站。例如，“邮件”便于使用集合视图来呈现信息中的HTML内容。
集合视图包括以下功能:
显示内容。
会主动处置页面中的内容，像内嵌的HTML网站。例如，“邮件”便于使用集合视图来呈现信息中的HTML内容。
滚动视图(滚动视图)
旋转视图方便用户阅读尺寸超过旋转视图间隙的图片(下图中，知乎大面积的图片同时超过了宽度和宽度)。
旋转视图可以包括以下功能:
有一个预先定义的中国概念。
当用户停止 *** 作滑块时，它就会出现。
当用户在视图中拖放内容时，内容随之旋转；当用户扫过屏幕时，内容会快速旋转——直到用户再次触摸屏幕或者内容一度到达底部。
转动视图以允许用户在固定空时间内阅读大尺寸或大尺寸视图。
正确支持缩放 *** 作。如果对缩小当前内容有效，它可以支持用户通过点击停止缩放当前视图的过程。如果支持缩放 *** 作，您应该根据用户当前的任务设置当前情况下允许缩放的最大值和最小值。
在页面旋转视图中，可以考虑使用页面控件。当您想要显示分页、分屏和粗略划分的内容时，您可以使用页面内控件让用户知道当前内容中有多少部分，以及他们当前正在阅读哪一部分。
分栏视图控制器(拆分视图控制器)
列视图母版是用于显示两个相邻视图母版的全屏视图母版。
在iOS7和更早版本中，拆分视图大师仅适用于iPad。
列视图母版具有以下特征:
两个窗格可以横向并排显示。
可以让主窗格在细节窗格上出现一个圆圈，也可以在没有需求的时候隐藏主窗格(尤其是横屏的情况)。
表格视图(表格视图)
该表显示了带有多个止损点的可旋转单列中的数据。
视图可以包括以下功能:
数据以单列形式呈现，只是停止了分段或分组。
用户可以单击整个流程来选择一个检查，或者通过流程控件来添加、删除、多选、检查详细信息，并可能打开另一个表视图。
iOS世界说有两种形式:
平原(平原)。电子表格可以分成多少个带标签的段？表格的左侧可以显示表格的索引。每个开头可以有一个页眉，结尾可以有一个页脚(或一页)。
分组(分组)。表格按组显示，可以有标题和页面。分组视图中至少有一组列表，每组至少包含一个项目。根据开发类型的不同，对分组表进行索引。
文本视图(文本视图)
文本视图可以接收和显示多种文本。
视图可以包含以下特征:
是一个矩形，可以定义为任何更低的度数。
当视图边界之外的内容过多时，文本视图会旋转。
支持自定义字体和颜色对齐方式(默认情况下，文本视图会以左对齐的黑色系统字体出现)。
能够支持用户编译，当用户点击文本视图内部时，会唤醒键盘(键盘规划范式和系统语音设置由用户决定)。
页面视图控制器(页面视图控制器)
页面视图母版通过两种方法处理超过一页的内容:滚动或翻页过渡样式。下图是iOS模拟器中的翻页风格:
页面视图母版包括以下功能:
带有旋转栏的页面中的视图主控显示了默认的谦逊。
具有翻页结果的母版可以修剪两页中间的书脊结果。
可以模仿动画时，在切换页面根据指定的过渡。
当使用旋转条的结果时，当前页面将旋转到下一页；使用翻页结果时，页面上会呈现一个模仿真书或笔记本翻页结果的翻页动画。
地图视图(地图视图)
地图视图显示天文数据，同时支持系统内置地图的功能(如下图所示)。
地图视图包括以下功能:
通常，天文区域通过比例尺地图、卫星图像或两者的分离来显示。
能够显示标注在一面的注释，并叠加图层(二维区域的绘制方式或绘制表面)。
支持编程的定义，或者用户已经掌握的缩放和移动。
*** 纵地图视图可以向用户提供天文区域的交互式视图。正常情况下，授权用户在视图中停止交互。
图像视图(图像视图)
视图是用来展示一个零维的画面，大概是一系列的静态和静止的画面。
该视图可以包括以下特征:
它不存在于任何预定义的上下文中，也不支持用户以心照不宣的形式进行交互。
能够检测图片本身及其父视图的属性，并决定图片是否应该被拉伸、缩放和调整到合适的屏幕大小，这大概是稳固地处于一个特定的位置。
容器视图控制器。
容器主接受自定义方法来处理视图主或一系列显示它的子视图。由体系结构定义的容器视图主控件的典型例子包括标签栏视图控制器、导航视图控制器和拆分视图控制器。
容器视图主控件用于显示内容，以便用户可以通过流程主控件以自定义方式停止导航。
请确保容器内容母版为横向，并且可以在横向中使用。主方面，无论是风景还是风景，容器观主的体验都是不一样的。
收藏视图
Convergenceview用于处理一系列有序项目，并在自定义计划中显示它们。
合并视图:
从视觉上区分物品的子分散性，以提供化妆品物品，如自定义风景。
规划时支持自定义过渡图。(在默许条件下，当用户导入或移动可能删除的项目时，会呈现系统默许的动画结果。)
支持先锋对外部边界的识别，实现自定义 *** 纵。默认情况下，合并视图可以识别要选择的点击项目，并按住项目以停止编辑。
活动视图控制器(活动视图控制器)
视图主控是一个临时视图，它为页面中的特定内容列举了一系列系统服务和定制服务。
视图母版:
展示了一系列允许用户 *** 作当前内容的可配置服务。
根据场景的不同，可以显示在 *** 纵列表或浮动层中。
活动(活动)
每一个动作都隐含着一个由系统提供或自己定义的服务——它可以通过与活动视图控制器的流程会议用于某些特定的内容。
行动:
可定制工具表示允许用户在应用程序中 *** 作的服务。
图标出现在图标的情况，中文栏的按钮图标也差不多。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）