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