5.IOS界面元素使用
- 栏
iPhone常见控件规范.jpg
（1）StatusBar（状态栏）
用于显示设备的基础信息，三种样式，ipad只有一种黑色样式。
可隐藏：
a.隐藏后你的用户只能退出应用才能看到状态栏信息。
b.需要全屏体验的时候可以隐藏，轻触屏幕可以显示。
c.状态栏时很重要的设备信息呈现区块，非必要情况下不要隐藏状态栏。
（2）NavigationBar（导航栏）
导航栏用于在层级结构的信息中导航，也可以用来管理屏幕信息。
布局：
a.通常居中显示当前屏幕内容的标题。
b.左边为反悔上一层的按钮，文字通常是上一层或者前一层的标题，如果太长可以用“返回”取代。
样式：
a.如果你使用默认控件，导航栏会自动为控件添加“描边效果”
b.导航栏有默认字体，默认情况下，导航栏会按照系统的标准大小显示字体。
c.你也可以自己设计自己的按钮图标样式等。
方向变化：
a.系统自动伸展。
b.元素位置处于相对比例位置。
分段导航：使用分段返回按钮会导致很多问题。把你的层级扁平化。
iPhone手机导航栏分段导航演示.jpg
（3）Toolbar（工具栏）
工具栏放着当前情景状态下屏幕物体的控件。
Toolbar掩饰.jpg
位置：通常在底部，iPad有可能在顶部。
色彩表现：色彩可定制，透明度可定制。
图标表现样式：平整风格。
屏幕翻转：高度不变宽度拉伸，图标位置相对比例不变。
Toolbar内容跟随屏幕内容切换。
（4）Tabbar（标签栏）
标签栏帮助用户更好理解产品信息结构，可以让用户在应用的大多数位置进入到不同的标签。
a.标签数量一般不超过5个，建议使用文字加图标，除非你的图标已经做到了极致传神。
b.确实超过5个，可以用更多来显示。
c.屏幕翻转，高度和透明度固定。
d.色彩表现，透明度可定制，色彩可定制。
e.标签内容提示，此处要注意IOS系统的推送图标为白边红底白色文字
f.更多的标签样式—侧边栏，动态标签，做务实的交互设计。
- 警告、操作、模态视图
（1）警告
警告给予用户影响他们使用应用程序（或设备）的重要信息。
警告通常是用户不希望出现的东西，因为通常会告诉用户出现了问题或者要求用户采取行为来改变当前的情况。
显示位置：居中
如果警告是嵌入在用户行为的流程中，还需要考虑：
a.让用户判断是否继续，并提供相应的选择，如 “删除” “取消”
b.仅仅是提示用户，“知道了”
就是说，警告不但要告知用户警告的内容，还有就是要为用户提供警告后的选择。
（2）操作列表
操作列表给了用户和他们当前正在进行的工作有关的额外的选项。例如：通常我们点击上传照片的时候，会弹出一个操作列表让我们选择是来自相册还是直接调用相机。
操作列表显示的是与用户点击应用程序工具栏按键开始的任务相关的选顷的集合。操作列表适用以下情况：
a.提供可以完成任务的不同选择。例如：我们点击联系人后，会弹出 呼叫联系人手机/座机的选项。
b.操作列表的好处在于可以简化前一步显示的内容，让用户的逻辑更为清楚 。
c.完成一个潜在危险任务的时候可以得到确认，规避用户风险，例如使用iPhone图片浏览器删除图片，操作列表弹出提示用户下一步的确认选择。
样式：操作列表始终是从屏幕底部弹出，覆盖在当前页面之上，两端固定在屏幕边缘。
（3）模态视图
模态视图：就是当前窗口不关闭,你就不能进行其他操作。
模态规图也可以提供一个执行跟用户工作流程直接相关的子任务的途径（进入后需相对封闭完成子任务）。 模态视图针对的是一个视图界面，而不是某个控件。通常都是从底部滑出。
模态规图通常应该显示一个标题，用于定义它的任务。如果必要，还可以在规图中的其它位置显示文字，以更充分的描述任务或提供一些引寻，例如：
a.当用户想撰写文字信息时，邮件应用程序会提供一个模态规图，这种模态规图的寻航栏显示了一个不应用程序寻航栏相同的背景，在标题中还有新信息的文字提示。
b.所以模态视图中，我们可以使用任何一种控件来完成任务，例如：你可以包含文本域，按钮和表格视图。
c.模态视图躲用于相对封闭的视图环境，让用户专心完成一种任务。
警告操作模态视图演示.jpg
- 表格、文本、网页视图
（1）表格视图
表格视图通过多行单列的表格显示数据。行可分为节或组，每行可以包含一些文字，图片和控件。用户可以在行间或者分组之间滑动或拖移进行滚动。
表格视图.png
（2）文本视图
文本视图是一个能够显示多行文本的区域，当内容太多内容超出其适应范围时，支持滚动。
（3）网页视图
网页视图是基于web内容的展现：
除了显示网页内容，网页规图提供了一些在打开的页面中支持寻航的元素。虽然你可以提供网页寻航的功能，但是最好避免造成的应用程序看起来像一个微型浏览器。
如果你有一个网页或者基于网络的应用程序，你可以选择使用网页视图来实现一个简洁的iPhone应用程序，因为网页规图可以为它提供封装。
- 应用程序控件
（1）活动指示器（Activity indicators）
用途：
显示一项任务的进度。
不明持续时间的进程。
对于可以展现明确时间和进度的控件请留意后面的（进度视图）。
显示方式：
在状态栏活动的是指有网络活动。
在工具栏活动的，是指应用程序当前任务超过2秒以上显示。
活动指示器.png
（2）日期时间选择器（Date and Time Pickers）
a.一个日期时间选择器最多可以有四个独立旋转的轮子
b.出了系统默认的时间外，你可以对时间进行你要的设定，例如分钟可以设置为“0,10,20,30....”
c.使用日期时间选择器，使用户避免了输入由多个部分组成的值，用户也清楚的知道自己应该做什么（轮子是不是之前我们学到的暗喻方式？-转动）。
日期时间选择器.png
（3）详情显示按钮（Detail Disclosure Buttons）
详情显示按钮提供了额外或者更多的细节信息，通常在表格或者空间局促的位置出现。
详情显示按钮.png
（4）信息按钮（Info Buttons）
信息按钮适用于界面简洁的工具类应用。
信息按钮.png
（5）文字标签（Label）
文字标签是指不同大小的静态文本，注意：
a.文本标签的色彩，大小，对齐方式等都是可以定制的
b.文本标签一般用于显示相对简短较少的文本
文字标签.png
（6）页面指示器（Page Indicators）
页面指示器可以使用户清楚的预览到自己当前页面所处的位置
a.如果你的页面实在太多，最好不要超过20个，否则过于密集
b.如果只有一个页面，则可以不显示，当然如果特别想秀自己的交互设计，也可以把它显示出来
页面指示器.png
（7）选取器（Pickers）
选取器多用于被选择值固定，可以设定的情况下，减少用户输入的繁琐。记得要在选取器上方安置一个“完成”按钮，否则会坑死用户的。
选取器.png
（8）进度视图（Progress Views）
一个进度视图显示了一个任务的进展，或者有一个已知持续时间的过程的进度。如果你需要显示一个未知时间的任务进度，请使用活动指示器。
任务进度条符合“反馈”的交互设计体验，在得到最终结果之前，给予用户直接明确的信息，让用户可以决定下一步动作（等待还是取消）。
进度视图.png
（9）圆角矩形按钮（Rounded Rectangle Buttons）
圆角矩形按钮是一个多功能的按钮，你可以在一个规图中用它来执行的一个操作。
在个人的联系人视图的底部，你可以看很多这种按钮的例子：文字信息按钮，添加到收藏夹按钮都是圆角矩形按钮：
圆角矩形按钮.png
注意，圆角矩形按钮：
标题如果是英文，首个字母要大写。避免按钮文字太长被截断，导致用户不好理解。
（10）搜索栏（Search Bars）
默认情况下，搜索图标位于左侧，此外有一些可选元素：
a.占位文本符，用于提示输入内容或者搜索工具名称等（上图灰色文字，还有可能是 通过百度搜索...）
b.书签按钮（用户以前搜藏的搜索内容）
c.清除按钮（长按清除输入文字）
d.标题描述，显示与搜索栏上方
（11）分段控件（Segmented Controls）
a.分段控制按钮不要过多，否则会减低体验感和增加操作复杂性
b.被点击区域最小应为44*44
c.分段控制内可以包含图标或文字，但不能同时包含否则丑的吓死人！！！
d.不要在一个分段控制里面混排图片和文字，还是丑的吓死人。
e.每个分段控制的宽度比例建议一致
分段控件.png
（12）滑块（Sliders）
滑块允许用户在范围内调整数值或进程，拖动滑块时，滑块对应的值同步更新，滑块一般用于：
你想让用户对他们所调整的内容精确控制：值/进程。
滑块的四个组成部分：左侧图标、右侧图标、操作按钮、轨道。
滑块.png
（13）文本框（Text Fields）
文本框是个原形矩形组成，用来接收用户的输入。
a.当用户轻敲文本框的时候，键盘就会出现。
b.当用户轻敲键盘上的返回键时，文本框用应用程序指定的方式来处理输入。
c.文本框可以包含一行输入。
d.文本框右侧可以包含一个清楚按键。
e.输入文本的内容可以定制大小，色彩，对齐方式。
文本框.png
- 创建自定义图标和图像
图标和系统图像。
网友评论