对于设计师来说,阅读ios规范的时候更多的是关注界面层面的内容,对于系统自带的内容关注较少。交互设计师同时要关注ios的交互手势、导航逻辑、控件使用规范等,但是所谓的“用户行为”的承载页面最终是界面,所以充分的了解界面元素是非常必要的。
本文内容来源ios规范,搬用内容、总结知识。
ios界面元素分为:条栏、内容视图、控件、临时视图
一、条栏
1、状态栏 status bar
状态栏用来显示设备的信息、时间、网络等重要信息。默认是白底黑字与黑底白字。
#状态栏是透明背景
#位置总是处于顶部
注意事项:1、状态栏可以在整个app中采用一个样式,也可以单独为某个视图设计样式。2、状态栏背后不要放其他内容,不要有滚动内容,防止干扰用户阅读状态栏信息。3、尽量不要隐藏状态栏,除非特殊情况,例如全屏看视频可以隐藏状态栏,但是保证轻点屏幕时可以重新恢复状态栏。
2、导航栏 navigation bar
导航栏主要作用是在不同的层级的信息结构之间导航,有时候可以管理屏幕内容。
导航栏上面可以放标题或者控件。
3、工具栏 Toolbar
包含了对页面或者视图中对象进行操作的控件。
4、标签栏 tab bar
标签栏赋予了用户在不同任务、视图和模态的切换的能力。
5、搜索栏 search bar
搜索栏可以接受用户输入的文本,并把它作为一次性搜素输入。
二、内容视图
我们可以把视图是用来承载页面信息的一个容器,iOS 系统为我们提供一些比较优秀的视图模式。在视图部分主要列举几种比较常用的视图模式。
1、精选视图 collection view
可以管理项目的有序集合,比如相册。
2、图像视图 image view
可以理解为装载图像的容器,用来定义图像是否可以拉伸、缩放、位置的调整等。
3、地图视图 map view
可以呈现地理数据,并支持地图app的大部分功能。
4、滚动视图 scroll view
该视图的作用是可以让用户浏览比视图更大区域的内容。例如放大图片后,用滑动或者拖拽查看。
5、表格视图 table view
以不同的行来显示信息。该视图提供了控件让用户添加、删除或者多选,查看某行的更多信息。
6、文本视图 text view
可以容纳并显示多行文本。并且支持编辑文本。
7、web 视图
该视图可以显示富Html 内容。比如ios内置的邮件功能。
三、控件
1、活动指示器 activity indicator
表示某个任务或进程正在进行中。任务进行时旋转,任务完成时小时,不允许用户与之交互。
2、日期选择器 date picker
3、标签 label
用于显示静态文本。
4、网络活动指示器 network activity indicator
出现在状态栏,表示网络活动正在进行。
5、页码控件 page control
表示打开了多少视图以及当前视图是哪一个。不允许用户不按照顺序访问视图。
6、选择器 picker
用来显示一组数值,用户可以从中选择一个。
7、进度视图 progress view
用于展示已知持续时间的任务或者进度。
8、刷新控件 refresh control
用于执行用户发起的刷新,通常用在表格视图中。
9、分段控件 segmented control
每一个分段控件相当于一个显示不同视图的按钮
10、滑块 slider
允许用户在一定范围里调整数值或进度。
11、步进器 stepper
以常数量来增加或者减少某个数值。支持自定义图像。
12、开关 switch 表现两种互斥的状态,只用于表格视图。
13、系统按钮 system button
支持自定义样式,可以包含图片或者文字。默认情况下没有边框和背景。
14、文本框 text field
支持用户输入单行文本。可以在文本框左侧或者右侧显示自定义图像,或者添加系统按钮,例如书签按钮。还可以在文本框的右侧显示清楚按钮。
四、临时视图
1、警告框 alert
包含一条必要的标题和可选信息。
包含一个或多个按钮。 双按钮的情况下,按钮排布规则:1、操作不会造成严重后果,而且是用户最有可能的操作,我们把它放在右边,取消按钮放在左边。2、如果按钮具有破环性,则放在左边,取消按钮在右边。
2、操作菜单 action sheet
显示用户所发起操作的相关选项。用红色的字来显示具有破坏的选项按钮。
3、模态视图 modal view
以模态的形式展现的视图,为当前任务或者情景提供功能。通常包含一个完成按钮,一个取消按钮。比如评论功能,点击评论的图标进入模态视图,弹出键盘、文本视图、完成和取消按钮。