iOS部分控件介绍及设计规范
1.视图(UIView)
进入模态视图后不能与母视图交互,需要进行操作才能结束该模式,比如动作表单、警告框、浮层都属于模态视图。(感谢知乎伊夫圣罗兰的回答的启发!)。
动作表单(UIActionSheet)
iOS ActionSheet
浮出层(Popover或Popup)
警告框(UIAlertView)
警告框(Alert)
iOS警告框指导原则
提示器(HUD)
HUD不属于模态视图
图片视图(UIImageView)
可设置图片的显示方式,如居中、居右,是否缩放
页面试图
页面视图
表格试图(UITableView)
表格视图(可通过控件对所有某行操作)
表格视图常见样式
分组/不分组表格视图
滚动视图(UIScrollView)
一个能够滚动的视图控件,可以⽤来展⽰大量的内容,并且可以通过滚动查看所有的内容;随着手指的变动进行调节相应的点,知道何时停止滚动,而且必须知道内容视图的范围
文本视图(UITextView)
文本视图(长文本可滚动,可唤起键盘)
补充一下通用布局:
遵循移动端8pc原则
2.按钮(UIButton)
充分考虑四种状态
食指点击目标尺寸是44 x 44像素,拇指是72 x72像素;
所有可操作元素最小点击区域为88*88px,物理尺寸7*7mm。
iPhone icon尺寸
3.加载控件和进度条(UIProgressView)
加载模式:
不同模式适应不同场景
考虑的点:①要保证内容完整性?还是保证快速阅读、了解信息?还是想让用户无尽探索?②重要信息不能全部放在头图上,重要操作不能放图片按钮,万一load不出来就炸了;③网络因素,切换小图、无图模式,视频动画占位符模式(智能加载)。
加载控件形式:
导航条-标题旁小菊花
下拉-导航条下小菊花
进度条形式:
弹出框形式的进度条
线形/环形/带数字的进度条
注意:①可用非模态的加载方式,不打断用户,可在等待时进行其他操作,减少等待感;②使用情趣化的加载动画;③漫长的等待要使用精确进度条告知;④尽量提前加载。
导航栏下的非模态进度条
4.导航控制器(UINavigationController)
UINavigationBar提供一种对导航层级内容的控制。它是一个栏,最典型的用法就是放在屏幕顶端,包含着各级视图的导航按钮。它最首要的属性是左按钮(返回按钮)、中心标题,还有可选的右按钮。你可以单独用导航栏,或者和导航控制器一起使用。
完整的导航控制器由 Navigation bar,Navigation View,Navigation toolbar 等组成。
通用导航条布局
适当根据功能改变导航的设计:
网易新闻(虽页面改变的导航条)
QQ个人信息页(覆盖导航条及状态栏)
上下滑动隐藏或显示导航栏
5.分段控件(SegmentControl)
iOS 分段控件
一个分段控件最多包含五个分段
知乎
6.选择器(UIPickerView)
多用于日期,省份,时间的选择。
日期和时间
7.文本区(UITextField)
显示文本段,显示所给的文本。可以设置输入文本一些属性,改变大小和位置等。
注意:唤醒合适的键盘;适当使用占位符帮助理解;适当在最右加入清除按钮。
8.短文本/标签(UILabel)
可以设置字体,字号,颜色等。
9.滑块(UISlideer)
允许用户在一个限定范围内调整某个数值或进程,常用在控制音量、亮度等。
UISlideer
10.开关(UISwitch)
iOS7 UISwitch
开关按钮仅在表格视图中可用
11.页面切换控件
页面控件
注意:①iOS仅支持连续视图间逐一切换;②不超过10个点。