1.2　App UI设计的布局和分类

1.2.1　App UI设计的布局

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

iPhone系统App的布局即界面元素一般分为三部分：状态栏、导航栏（标题）、标签栏/工具栏，如图1.2所示。

Android系统App的界面元素一般分为四部分：状态栏、标题栏、标签栏、工具栏，如图1.3所示。

1.2.2　App UI设计的分类

下面将App UI设计的分类进行了总结，一般来说可将其分为6种方式。

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

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

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

九宫格是一种常见且基本的构图方法。我们可以将画面视为一个有边框的区域，将左、右、上、下四个边均分为三等份，然后用直线连接相应的点，这样画面就会形成一个井字。画面的面积被分成了九个相等的方格，而井字的四个交叉点则成为了趣味中心，如图1.5所示。

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

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

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

这种图片平铺的界面构图最初来自于Facebook和微软系统的界面。它的优势在于多个元素可以同时展示在用户面前，而且可以平均分配面积或者穿插画中画效果。这种平铺界面分类的优点是比较灵活，如图1.7所示。

（5）分类标签：以标签的形式构图，导航条的下方水平铺开，可以左右滑动。

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

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

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