iOS——UI设计界面小知识点

       对于提一些UI方面或者用户体验方面的bug，总需要UI设计设计方面的一些基础知识，所以还需一点点积累，那就先从页面一些组件元素开始吧。

按其组件属性分类：

iOS组件.png

一、UI栏-UI bar

1.状态栏（Status Bar）

状态栏：位于iPhone的最上方，用来显示时间、运营商信息、电池电量等很窄的一个区域

2.导航栏(Navigation Bar)

导航栏：状态栏之下的区域，一般来说导航栏中间是页面标题，左右放置的是图标的区域。导航栏的一般格式为：当前视图的标题、返回按钮及针对当前的操作控件
导航栏的功能诸如搜索、添加、更多、返回、保存等

状态栏和导航栏.png

3.大标题导航栏

大标题导航栏：位于导航栏之下，让内容更加突出

大标题导航栏.png

4.搜索栏(Search Bars)

搜索栏:便于用户在大量信息中进行定位，搜索栏包含占位符（placeholder text），通常会写明控件的功能或搜索的范围等；清除按钮，大多数搜索栏都提供清除按钮，方便用户一键清空输入内容

搜索框01.png

搜索栏02.jpg

5. 范围栏(scope bar)

范围栏：一般附加于搜索栏，让用户定义搜索范围，如搜索阅读时，出现的短篇阅读、文学、小说等

6.标签栏(Tab Bars)

标签栏：APP底部区域，便于用户在不同的子任务、视图和模式中进行切换。iOS设计规范中tab栏一般有五个、四个、三个图标的形式，把宽度平均分配成五、四、三份。在横屏或竖屏状态下，tab栏的图标高度和宽度都会保持一致
标签栏的特性： 通常Tab栏图标之下会有注释文字，一般这个注释文字会用非常浅的浅灰色，图标造型有圆形、方形、扁形、长形

标签栏.png

标签栏图标.png

7.工具栏(Tools Bar)

工具栏：工具栏提供了和当前任务相关的操作和按钮，在滑动时可收起。工具栏与Tab栏一样位于底部，但高度略窄（iPad端则有可能出现在顶部）

工具栏.png

导航和工具栏图标.png

二、UI视图-UI views

UI views又分为临时视图和内容视图

临时视图：

1.警告对话框（alert）

警告对话框传达应用或设备的某种状态的重要信息，通常会中断用户操作，需要用户做出选择等操作

警告框.png

警告框特性：
1.屏幕中间或下方。
2.警告对话框包含元素如下：标题(必选)、描述信息(可选)、输入框(可选)、按钮(必选，一个或多个)

2.操作列表（action sheet）

操作列表展示了与用户触发的操作直接相关的一系列选择操作。

操作列表.png

操作列表特性：
1.位于屏幕底部。
2.用户触发，包含两个及两个以上按钮。
3.一般都设计有一个默认的取消按钮，放在最下位置与其他按钮做一定的区分

3.模态视图（model view）

模态视图是一个以模态形式展现的视图，它为当前任务或当前工作流程提供独立的、自包含的(self-contained)功能.通常也会包含一个完成任务的按钮（点击后即可完成任务，当前模态视图也会消失），和一个取消按钮（点击后即放弃当前任务，同时当前模态视图消失）

模态视图.jpg

模态视图特性：
1.能占据整个屏幕，它也可能占据整个父视图(parent view)的区域。
2.或者是屏幕的一部分包含完成当前任务所需的文字和控件，需要注意的是在出现模态视图时底部页面按钮是不可操作的

内容视图：

1.浮出层（popover）

浮出层是当用户轻点某个控件或页面中的某一区域时浮出的，半透明的临时视图

浮出层.png

浮出层特性：
1.它是一个自包含的模态视图
2.浮出层会包含一个箭头，指向其出处
3.背景是半透明的，并且会模糊其背后的内容（遮罩背景）
4.可以包含多种对象和视图，比如：表格，图片，地图，文本，网页或者自定义视图、导航栏，工具栏，和标签栏
5.可以操作当前app视图中的对象的各种控件或对象（默认情况下， 浮出层中的表格视图，导航栏和工具栏的背景都是透明的，这样会让浮出层的毛玻璃效果展示出来）

2.网络视图（web view）

网络视图能直接在你的app中加载和呈现丰富的网络内容，比如嵌入的HTML和网站。比如，“邮件”就使用了网络视图来在信息中展示HTML内容。

网络视图.jpeg

网络视图特性：展示网络内容;会自动处理页面中的内容，比如嵌入的HTML和网站。

3.滚动视图（scroll view）

滚动视图方便用户浏览尺寸超越滚动视图边界的图片

滚动视图.png

滚动视图可以包含以下特性：
1.没有预定义的外观
2.在刚出现或者当用户对它进行操作的时候会出现滑条。当用户在视图中拖拽内容，内容随之滚动；当用户轻扫屏幕时，内容将快速滚动——直到用户再次触摸屏幕或内容已经到达底部时停止。
3.使用滚动视图来允许用户在固定的空间内浏览大尺寸或大量的视图。适当地支持缩放操作。如果放大和缩小对于当前内容是有用的话，可以支持用户通过捏或者双击来对当前视图进行缩放。而若是支持了缩放操作的话，你还应当根据用户当前的任务来设定在当前情景下允许缩放的最大值和最小值。
4.在页模式滚动视图中，可以考虑使用页面控件(page control)。当你想要展示分页、分屏或者分块的内容，可以使用页面控件来让用户知道当前内容一共有多少块，以及他们当前浏览的是第几个。

4.分栏视图控制器

分栏视图控制器是一个用于管理两个相邻视图控制器显示的全屏视图控制器。目前在iOS 12及之前对分视图控制器仅适用于iPad.

分栏视图.png

分栏视图控制器含有以下特性：
1.可以在横屏环境中展示并排展示两个窗格
2.可以让主窗格在详情窗格上方显示，也可以在不需要的时候（尤其是竖屏情况下）隐藏主窗格。

5.表格视图（table view）

表格视图以一个可滚动的单列多行的形式来展示数据。

表格视图可以包含以下特性：
以容易进行分段或分组的单列形式展示数据
用户可以通过点击来选中某行，或通过控件来添加、移除、多选、查看详情或者展开另一个表格视图

iOS定义了两种表格样式：

平铺型（Plain）。平铺型表格可被分为若干带标签的段落，表格右侧可能会出现垂直的表格索引。每行开头可以有页眉，尾部可以有页脚（也可以没有）。

平铺型.png

分组型（Grouped）。表格行以分组形式展示，可以有页眉和页脚。分组表格视图中至少含有一组列表，而每一组中至少包含一项内容。与平铺型不同，分组型表格没有索引。

分组型.png

6.文本视图（text view）

文本视图可以接收和展示单行或多行文本

文本视图.png

文本视图可以包含以下特性：
1.是一个可定义为任何高度的矩形
2.当内容太多超出视图的边框时，文本视图支持滚动
3.支持自定义字体、颜色和对齐方式（默认情况下，文本视图会以左对齐的黑色系统字体显示）
4.可以支持用户编辑，当用户轻击文本视图内部时，将唤起键盘（键盘的布局和类型取决于用户的系统语言设置）

7.页面视图控制器（page view controller）

页面视图控制器通过滚动(Scrolling)或翻页 (Page-curl transition style)两种方式来处理长度超过一页的内容。下图是iOS模拟器中的翻页样式

页面视图控制器.png

页面视图控制器包含以下特性：
1.带滚动条的页面视图控制器没有默认的外观。
2.带翻页效果的控制器可以在两页中间增加书脊(book spine)的效果

3.可以根据指定的转场来模拟出页面切换时的动画。
4.使用滚动条效果的时候，当前页面将滚动到下一页；而使用翻页效果时，页面上会出现一个模拟实体书或笔记本翻页效果的翻页动画

8.地图视图（map view）

地图视图呈现地理数据，同时支持系统内置地图应用的大部分功能（如下图所示）。利用地图视图可以给用户提供一个可交互的地理区域视图。一般来说，允许用户在视图中进行交互行为。

地图视图.png

地图视图包含以下特性：
1.通常以标准地图、卫星图像、或两者结合的形式来展示地理区域
可以展示以单点标注的备注，以及叠加图层（绘制路径或二维区域绘制轮廓的）
2.支持编程时定义的，或用户所控制的缩放和移动

9.图片视图（image view）

图片视图用以展示一张单独的图片，或者一系列静动态图片。

图片视图.png

图片视图可以包含以下特性：
1.不存在任何预先定义好的外观，同时在默认状态下它不支持用户的交互行为。
2.可以检测图片本身及其父视图(parent view)的属性，并决定这个图片是否应该被拉伸、缩放、调整到适合屏幕的大小，或者固定在一个特定的位置。

10.容器视图控制器（container view controller）

容器视图控制器采用自定义的方式来管理和呈现它的视图控制器或一系列子视图。系统定义的容器视图控制器典型例子包括标签栏视图控制器(Tab bar view controller)、导航视图控制器(navigation view controller)和对分视图控制器(split view controller)。用容器视图控制器来呈现内容，使用户可以通过控制器来以自定义的方式进行导航。

容器视图控制器1.jpg

.容器视图特性：需确保容器内容控制器在横屏与竖屏模式都可用。很重要的一点是，容器视图控制器无论在横屏还是竖屏中，体验都是一致的。

11.集合视图（collection view）

集合视图用于管理一系列有序的项，并以一种自定义的布局来呈现它们。

集合视图.jpg

集合视图特性：
1.以从视觉上区分项的子集或者提供装饰性项目，例如自定义背景。
布局切换时支持自定义转场动画。（默认情况下，当用户导入、移动或者删除项的时候，会出现系统默认的动画效果。）
2.支持开发者额外定义手势识别来执行自定义操作。默认情况下，集合视图可以识别轻击(tap)某项以选中，和长按(touch-and-hold)某项进行编辑。

11.活动视图控制器（activity view controller）

活动视图控制器是一个临时视图，当中罗列了一系列可以针对页面特定内容的系统服务和定制服务。

活动视图控制器.jpg

活动视图控制器特性：
1.显示了让用户可以针对当前内容执行操作的一系列的可配置服务
2.根据所处的场景不同，可能出现在操作列表或浮出层中

其他

1.闪屏(Splash)

闪屏对于设计来说就是一张完整的静态满屏图片。下图为一爱好者能够闪屏广告的图例，闪屏广告是在手机应用开启时展示固定时间，展示完毕后自动关闭并进入应用的一种广告形式，闪屏广告属于预加载广告

闪屏广告.png

2.安全距离

作为iPhone全面屏系列手机，齐刘海无疑是一个特征。但是全面屏给我们带来了使用上的问题：上下左右时是圆角和齐刘海的红色标注区域不应该放置任何功能，仅可在上端放置状态栏，底部圆角区域留白，界面竖屏操作时左右临近手机边缘的区域不建议放任何操作，应留出一些边距。下面是一个安全距离的矩形。

iPhoneX系列区全区.png

3. 设计中的一下切图命名规范

切图命名.jpg