UI设计基础概念（六）之iOS系统界面

目前App手机主流的系统就是iOS系统和Android系统，我们需要对界面系统规范有一定的认识。才能进一步的深入去设计界面。

iOS UI界面元素由三部分组成：栏、内容视图和临时视图

栏：状态栏、导航栏、标签栏和工具栏

内容视图：表格视图、文本视图和Web视图

临时视图：对话框和操作列表

下面尺寸都是按照iPhone6尺寸750*1334的规范来说明噢～

一、栏

1、状态栏（Status Bar）

ios上状态栏 就是指的最上面的40像素高的部分。状态栏分前后两部分，要分清这两个概念：

• 前景部分：就是指的显示电池、时间等部分；

• 背景部分：就是显示黑色、白色或者图片的背景部分；

2、导航栏（Navigation Bar）

状态栏下方的就是导航栏，一般情况中间显示当前界面内容标题，左侧和右侧可以是当前页面操作按钮，按钮可以是文字也可以是图标。随心情吧。

3、标签栏（Tab Bar）

位于界面最下方，全局导航，方便快速切换功能。手机上标签栏不得超过5个标签，最好是3-5个之间。有选择和未选择的视觉效果。

4、工具栏

工具栏位于界面最下方，包含对当前界面进行操作的相应功能按钮。工具栏和标签栏在一个视图中只能存在一个。

二、内容视图

内容视图包含应用显示的内容信息，分为表格视图、文本视图、Web视图、临时视图

1、表格视图

＊平面型表格视图（Table View）展示一列不需要辅助信息就能辨认的界面。例如，通讯录界面。

＊辅助说明型表格，用户需要额外利用辅助信息来区分的界面。

＊内容强调型表格，展示强调当前页面的状态，一般左边主标题，右边副标题。

2、文本视图

能够显示多行文本区域，当内容太多也可以滚动查看。例如，备忘录的输入区。

3、Web视图

应用中嵌入h5页面，我们可以理解为一个容器中含有HTML内容。电商类应用一般都会潜入大量的H5页面。这样的做法是可以在服务器端快速的发布更新的内容，不用等待审核的时间。

三、临时视图

临时向客户提供重要信息，或者提供额外的功能和选项

＊弹出框

系统向用户通知信息的重要形式，例如，用户想进一步操作，需要先对对话框做出响应的响应。

＊操作列表

对于内容比较多，层次比较复杂的页面来说，可能需要通过功能区划分种类。例如，筛选分类，不同方式的排序。

今天我们大致的了解了一下iOS系统界面。下节我们说android系统界面。

这些基本的知识我们还是要大致的了解的。对今后会有帮助。