![App UI设计案例实操](https://wfqqreader-1252317822.image.myqcloud.com/cover/866/52841866/b_52841866.jpg)
1.2 App UI设计的布局和分类
1.2.1 App UI设计的布局
下面对iPhone和Android的App UI布局进行剖析对比,从而了解不同的系统在App设计时的异同。
iPhone系统App的布局即界面元素一般分为三部分:状态栏、导航栏(标题)、标签栏/工具栏,如图1.2所示。
![](https://epubservercos.yuewen.com/705192/31397549604680406/epubprivate/OEBPS/Images/Figure-P10_23311488.jpg?sign=1738880412-jDXZUTqgz6ZnW3CfOjeGwuKy13Ny7UBX-0-bc3c278d554b6809b22535b10b1ddcb2)
图1.2
Android系统App的界面元素一般分为四部分:状态栏、标题栏、标签栏、工具栏,如图1.3所示。
![](https://epubservercos.yuewen.com/705192/31397549604680406/epubprivate/OEBPS/Images/Figure-P10_23312488.jpg?sign=1738880412-ROgKuzMBX91Q1nFhUJzfzrb2rVdNHBc8-0-13149224f50c0e563485eb4fec0e913f)
图1.3
1.2.2 App UI设计的分类
下面将App UI设计的分类进行了总结,一般来说可将其分为6种方式。
(1)平铺成条:以长条的形式横向平铺。
横向平铺界面给人一种简洁的印象,让操作更简单,分类更明晰。虽然这种横向平铺的构图从艺术角度讲有点呆板,但在App UI里却是最常用的,也是让用户更易操作的常用界面构图方式,如图1.4所示。
![](https://epubservercos.yuewen.com/705192/31397549604680406/epubprivate/OEBPS/Images/Figure-P11_23313488.jpg?sign=1738880412-6u60VInMM4Sjrc4YBtAS3YSLLsxvA673-0-8bf17f0e6efe162e4844506dfec63dc0)
图1.4
(2)九宫格:以九宫格的方式进行网格式横向和纵向排列。
九宫格是一种常见且基本的构图方法。我们可以将画面视为一个有边框的区域,将左、右、上、下四个边均分为三等份,然后用直线连接相应的点,这样画面就会形成一个井字。画面的面积被分成了九个相等的方格,而井字的四个交叉点则成为了趣味中心,如图1.5所示。
![](https://epubservercos.yuewen.com/705192/31397549604680406/epubprivate/OEBPS/Images/Figure-P11_15984488.jpg?sign=1738880412-BBQlgsJGUAqVBH6QgL09eakf7qsLiWiK-0-06a85625d5357fe35037dfa67bf99c4b)
图1.5
(3)大图滑动:以一张大图的方式布满全屏。
整屏滑动界面受益于系统速度和网速的提高,手机读取速度提高了,这种大图滑动才得以普及。大图滑动方式很有气势,画面也更加整洁,常用于软件的多屏浏览,如图1.6所示。
![](https://epubservercos.yuewen.com/705192/31397549604680406/epubprivate/OEBPS/Images/Figure-P12_15994488.jpg?sign=1738880412-Rorxi5g8oEtp791bSsPWpHESzwWc3Wkw-0-65e9cfbbd94c25164e2eb1ca9d58d88d)
图1.6
(4)图片平铺:所有图片不规则地平铺于界面之中。
这种图片平铺的界面构图最初来自于Facebook和微软系统的界面。它的优势在于多个元素可以同时展示在用户面前,而且可以平均分配面积或者穿插画中画效果。这种平铺界面分类的优点是比较灵活,如图1.7所示。
![](https://epubservercos.yuewen.com/705192/31397549604680406/epubprivate/OEBPS/Images/Figure-P12_15998488.jpg?sign=1738880412-yUTl63AchvvdvhLTMTxtj6j6mIgO7OKn-0-a84c98950a164fd41f80858541c9278c)
图1.7
(5)分类标签:以标签的形式构图,导航条的下方水平铺开,可以左右滑动。
标签界面分类方式是以图标的形式将类别可视化,通常体现在App、功能等分类首页上。这种标签界面的优点在于视觉导向明晰,利于操控,如图1.8所示。
![](https://epubservercos.yuewen.com/705192/31397549604680406/epubprivate/OEBPS/Images/Figure-P13_16008488.jpg?sign=1738880412-BAsAe3wxVnrMdpQB8nfZwxZ7bJJuvJE1-0-96dddac6f76a0255292690f550e65250)
图1.8
(6)下拉选项框:以下拉列表或下拉选项的方式呈现,主要对信息进行筛选。
下拉选项框的优点是可以将大量信息分门别类地隐藏在框中,适用于列表式的选项。常见的有歌曲菜单、地址列表等。查询方式可以采用英文字母排序等,如图1.9所示。
![](https://epubservercos.yuewen.com/705192/31397549604680406/epubprivate/OEBPS/Images/Figure-P13_16012488.jpg?sign=1738880412-gW1sZA4XqpuiqL86eeNg6wZEuAz2d9k2-0-b3e6e80080192e48519f8e63205de29f)
图1.9