iOS交互设计基础之控件(二)
1、活动指示器
活动指示器表明进程或任务正在进行中
![](https://img.haomeiwen.com/i1342013/fd1524c619f4c408.png)
(1)当任务加载和进行时旋转,任务完成后自动消失(针对系统默认样式)
(2)不支持用户交互行为
![](https://img.haomeiwen.com/i1342013/e95caf5418b89753.png)
2、日期时间选择器
日期时间选择器展示关于日期和时间的组件
(1)最多可以展示四个独立的滑轮,每一个滑轮列表标识一个不同的值
(2)日期选择器的大小与与iPhone键盘的大小相同,并且不可该更
(3)包括四种模式,每种模式包含一组不同的值
日期和时间:日期、小时、分钟
![](https://img.haomeiwen.com/i1342013/4677e4287fafef4f.png)
时间:小时和分钟以及可选的上午/下午
![](https://img.haomeiwen.com/i1342013/0f2c49628293eeac.png)
日期:年、月、日
![](https://img.haomeiwen.com/i1342013/b789033486c036b8.png)
倒计时:小时、分钟,可以精确的设定总共的倒计时时间
![](https://img.haomeiwen.com/i1342013/c1e6ac7ab3b06b59.png)
3、网络活动指示器
网络活动指示器在状态栏中出现,标识网络活动正在进行。例如:当重新进入app,系统进行自动刷新时,显示正在进行网络活动
![](https://img.haomeiwen.com/i1342013/bf6276d2513cd9eb.png)
4、页面控件
页面控件告诉用户打开了多少个视图以及他们正处在哪一个视图当中
![](https://img.haomeiwen.com/i1342013/ffa5895d00f755cc.png)
(1)不支持用户访问不连续的视图(不能直接跳转至相邻视图以外的视图)
![](https://img.haomeiwen.com/i1342013/b8d99bd1daba0289.png)
(2)默认情况下,不支持视图之间的导航
![](https://img.haomeiwen.com/i1342013/342015d2a87c7471.png)
(3)页面控件是为所有视图平等的场景设计的
![](https://img.haomeiwen.com/i1342013/eff1e811409f57b2.png)
(4)避免显示太多点,超过10个很难让用户一目了然
![](https://img.haomeiwen.com/i1342013/2dbca0b12d852229.png)
总结:页面控件多用来展示平行层级的内容信息,在有限的屏幕控件内延展可以展示的内容数量,左右滑动切换,也很适合用户单手操作浏览信息
5、选择器
选择器包含了一组值,用户可以从中选择一个相应的值
![](https://img.haomeiwen.com/i1342013/bcf7f7a210230761.png)
(1)选择器是日期时间选择器的通用模式
(2)不可以自定义大小(跟iPhone键盘相同)
![](https://img.haomeiwen.com/i1342013/efe1da191c61b563.png)
(3)当你需要展示的备选数量很多时,可以考虑使用表格视图
![](https://img.haomeiwen.com/i1342013/6473b294b0571393.png)
总结:选择器多用在选择地区、年龄、性别等编辑操作中,用来选择一系列同一类别下的子项
6、刷新控件
刷新控件执行用户触发的内容刷新
![](https://img.haomeiwen.com/i1342013/6aa49299c997bfe4.png)
![](https://img.haomeiwen.com/i1342013/013ed858deabb914.png)
(1)刷新控件可以出现在标题中
![](https://img.haomeiwen.com/i1342013/89d441df0cbce598.png)
(2)使用了刷新控件,同时也应支持自动刷新,刷新控件给用户多一个选择
![](https://img.haomeiwen.com/i1342013/6e3bbc744f0c8f7e.png)
(3)可以根据产品风格设计相应的刷新控件样式
![](https://img.haomeiwen.com/i1342013/7fb10a28454a441a.png)
![](https://img.haomeiwen.com/i1342013/e04bb0b1d7e7943a.png)
7、分段控件
分段控件是一组分段的线性组合,每一个分段的作用类似按钮,点击之后切换到相应的视图
![](https://img.haomeiwen.com/i1342013/0c66a07f01e53b9b.png)
(1)有两个或以上的分段组成,每一个分段的宽度相同
![](https://img.haomeiwen.com/i1342013/bb0f367a335afb33.png)
(2)可以包含文字或图片
![](https://img.haomeiwen.com/i1342013/4e0e5400fcb2527e.png)
(3)一个分段控件最多包含五个分段
![](https://img.haomeiwen.com/i1342013/666fb3aa3932240c.png)
(4)不要在一个分段中混用文字或图片
注意:Android中类似的控件为固定选项卡以及滚动选项卡,可以左滑或右滑在不同的视图之间进行切换,并且可以扩展更多的分类视图,更加便于用户操作。iOS中也大量采用这种交互方式,在视图之间可以左滑右滑切换视图,用户操作上更加地便捷
![](https://img.haomeiwen.com/i1342013/a7ae6bd34314f15b.png)
![](https://img.haomeiwen.com/i1342013/f36f0351f197cb58.png)
![](https://img.haomeiwen.com/i1342013/8f6c4184d9313085.png)
![](https://img.haomeiwen.com/i1342013/9924f5f9377d28e5.png)
![](https://img.haomeiwen.com/i1342013/2b43676659eb8033.png)
8、滑块
滑块允许用户在一个限定范围内调整某个数值或进程
![](https://img.haomeiwen.com/i1342013/1c5c57099d5d9f24.png)
总结:滑块多用来控制音量、控制进度、控制大小(字体)、控制亮度等,例如在线阅读书籍、在线播放视频等沉浸式体验中
![](https://img.haomeiwen.com/i1342013/6a516d17ba6c26a4.png)
9、开关按钮
开关按钮展示了两个互斥的选项或状态
![](https://img.haomeiwen.com/i1342013/13e2c5f6c12432bf.png)
(1)开关按钮仅在表格视图中可用
![](https://img.haomeiwen.com/i1342013/e289cc8749495417.png)
另:开关的操作方式隐喻了电灯开关,两种操作分别对应两种不同的功效
10、系统按钮
系统按钮执行app中定义的行为
(1)默认状态下不含边界,也不含背景图
(2)可以是图标或者文字标题
(3)支持自定义样式,如描边或者加背景图
注意:按钮的几种状态:正常状态、选中状态、禁用状态,每种状态所对应的按钮样式
11、文本框
(1)根据输入内容的类型来指定不同的键盘
![](https://img.haomeiwen.com/i1342013/0f3007b342c64059.png)
(2)输入框中增加帮助用户理解的提示文字
![](https://img.haomeiwen.com/i1342013/82280bea93df70ed.png)
(4)合适的情境下,在文本框右侧加入清除按钮
![](https://img.haomeiwen.com/i1342013/4d95013d2785491b.png)
注意:文本框与文本视图(下一篇中会提到)的区别,文本框只能输入单行文本,例如通常用来填写用户名、密码、手机号等等,适合增加清除按钮
本篇是“iOS交互设计基础”第二篇,后面会更新最后一篇关于视图的介绍