1.2 UI设计的布局和分类

1.2.1 UI设计的布局

下面将对iPhone、Android、Windows Phone的APP UI布局进行剖析对比，从而了解不同的系统在APP设计时的异同。

iPhone系统的UI元素一般分为三个部分：状态栏、导航栏（标题）、标签栏/工具栏。

状态栏：显示应用运行状态。

导航栏：文本居中显示当前APP的标题名称。左侧为返回按钮，右侧为当前APP内容操作按钮。

标签栏/工具栏：标签栏和工具栏共用一个位置，在iPhone的最下方，根据APP的需要来选择一个。工具栏按钮不超过5个。

Android系统的布局界面元素一般分为四个部分：状态栏、标题栏、标签栏、工具栏。

标签栏：在标签栏中放置的是APP的导航菜单，标签栏可以在APP主体的上方也可以在下方，标签的项目不宜超过5个。

工具栏：针对当前的APP页面，是否有相应的操作，若是有的话，会放置在工具栏中。

标题栏：文本在左方显示当前的APP名称。

状态栏：位于界面的最上方。当有短信、通知、应用更新、连接状态变更时，会在左侧显示，而右侧则是电量、闹钟、信号、时间等常规手机信息。按住状态栏往下拉，可以查看信息、通知、应用更新等详细情况。

Windows Phone布局界面元素一般分为四个部分：状态栏、标题栏、枢轴和工具栏。

标题栏：显示当前APP的名称或应用程度等主要标题。

枢轴：枢轴的表现形式较为特别，它是由枢轴组件组成，类似于Android中的标签栏，可用于APP中的各个功能，以及选项间的切换。

状态栏：显示时间、电量等信息。

工具栏：单击Windows Phone手机上的开始键，就可以弹出相应的工具栏。工具栏中包含当前APP界面操作的相应功能按钮。

1.2.2 UI设计的分类

一般来说可将智能手机的UI设计分为6种形式。

1.平铺成条：以长条的形式横向平铺。

横向界面分类给人一种简洁的印象，让操作更简单，分类更明晰。虽然这种横向平铺的构图从艺术角度讲有点呆板，但在APP UI里却是最常用的，也是让用户更易操作的常用界面分类方式。

2.九宫格：以九宫格的方式进行网格式横向和纵向排列。

九宫格界面分类是最为常见、最基本的构图方法。如果把画面当作一个有边框的面积，把左、右、上、下四个边都分成三等分，然后用直线把这些对应的点连起来，画面中就构成一个井字，画面面积分成相等的九个方格，井字的四个交叉点就是趣味中心。

3.大图滑动：以一张大图的方式布满全屏。

整屏滑动界面分类方式受益于系统速度和网速的提高，手机读取速度提高了，这种大图滑动才得以普及。大图滑动方式很有气势，画面也更加整洁，常用于软件的多屏浏览。

4.图片平铺：所有图片不规则地平铺于界面之中。

这种图片平铺的界面分类方式一开始来自于Facebook和微软系统的界面，优势是多个元素同时展示在用户面前，面积可以平均分配也可以穿插画中画效果，这种平铺界面分类的优点是比较灵活。

5.分类标签：以标签的形式进行分类，导航条的下方水平铺开，可以左右滑动。

标签界面分类方式是以图标的形式将类别可视化，通常体现在APP软件、功能等分类首页上。这种标签界面分类的优点在于视觉导向明晰，利于操控。

6.下拉选项框：以下拉列表或下拉选项的方式呈现，主要对信息进行筛选。

下拉选项框的优点是可以将大量信息分门别类隐藏在框中，适用于列表式的选项。常见的有歌曲菜单、地址列表等。查询方式可以采用英文字母排序等多种搜索方法。