1.4 设计构图与界面布局
Version:CS4 CS5 CS6 CC
1.4.1 App界面设计构图
下面将对iOS、Android的App界面构图（布局）进行剖析对比，从而了解不同的系统在App设计时的异同。
iOS系统的界面布局元素一般分为3个部分：状态栏、导航栏（标题）、标签栏/工具栏。
▲iOS系统的界面布局
❶ 状态栏：显示应用运行状态。
❷ 导航栏：文本居中显示当前App的标题名称。左侧为返回按钮，右侧为当前App内容操作按钮。
❸ 标签栏/工具栏：标签栏和工具栏共用一个位置，在iPhone界面的最下方，这是根据App的需要来选择一个。工具栏按钮不超过5个。
Android系统的界面布局元素一般分为4个部分：状态栏、标题栏、标签栏、工具栏。
▲Android系统的界面布局
❶ 状态栏：位于界面的最上方。当有短信、通知、应用更新、连接状态变更时，会在左侧显示，而右侧则是电量、闹钟、信号、时间等常规手机信息。按住状态栏往下拉，可以查看信息、通知、应用更新等详细情况。
❷ 标题栏：文本在左方显示当前的App名称。
❸ 标签栏：在标签栏中放置的是App的导航菜单，标签栏可以在App界面的上方也可以在下方，标签的项目不宜超过5个。
❹ 工具栏：针对当前的App页面，是否有相应的操作，若有的话，会放置在工具栏中。
1.4.2 智能手机界面的布局构成
下面将App界面的布局构成进行了总结，一般来说可将其分为6种方式。
（1）平铺成条：以长条的形式横向平铺。
横向界面分类给人一种简洁的印象，让操作更简单，分类更明晰。虽然这种横向平铺的构图从艺术角度来讲有点呆板，但在App UI里却是最常用的，也是让用户更易操作的常用界面分类方式。
（2）九宫格：以九宫格的方式进行网格式横向和纵向排列。
九宫格界面分类是最为常见、最基本的构图方法，如果把画面当作一个有边框的面积，把左、右、上、下四个边都分成三等份，然后用直线把这些对应的点连起来，画面中就构成一个“井”字，画面分成相等的九个方格，“井”字的四个交叉点就是趣味中心。
（3）大图滑动：以一张大图的方式布满全屏。
整屏滑动界面分类方式受益于系统速度和网速的提高，手机读取速度提高了，这种大图滑动才得以普及。大图滑动方式很有气势，画面也更加整洁，常用于软件的多屏浏览。
（4）图片平铺：所有图片不规则地平铺于界面之中。
这种图片平铺的界面分类方式一开始来自于Facebook和Windows系统的界面，优势是多个元素同时展示在用户面前，面积可以平均分配也可以穿插画中画效果，这种平铺界面分类的优点是比较灵活。
（5）分类标签：以标签的形式进行分类，导航条的下方水平铺开，可以左右滑动。
标签界面分类方式是以图标的形式将类别可视化，通常体现在App软件、功能等分类首页上。这种标签界面分类的优点在于视觉导向明晰，利于操控。
（6）下拉选项框：以下拉列表或下拉选项的方式呈现，主要对信息进行筛选。
下拉选项框的优点是可以将大量信息分门别类隐藏在框中，适用于列表式的选项。常见的有歌曲菜单、地址列表等，查询方式可以采用英文字母排序等多种搜索方法。
