iOS部分控件介绍及设计规范

iOS及Android图标按钮设计规范

UI设计师需要了解的开发中常用的UI控件(ios篇)

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个点。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容