05.27 除了pinterest瀑布流，APP的界面布局还有哪些说道？

在APP设计里如果你已经把Workflow和信息架构图都出完了，那么接下来制作低保真图（线框图）的第一步就是要根据自己手里的信息设计APP的布局构图。

但没有哪个布局构图是万能的，都会有自己的优缺点。下面是APP界面设计中常用的界面构图案例分析，希望同学们可以通过这些案例来学习构图的类型和如何应用。

1.列表

列表形式的布局信息可以纵向伸展，用户很好理解信息的层级关系。这种列表的形式一般会设计在信息的导航栏或者隐藏导航栏里使用。每个部分的标题长度比较长，可添加的信息也非常多。

但这样的列表形式也有缺点，就是用户一般记不住整体的信息架构，容易忘记操作的步骤，而且每次操作都需要从头开始，很容易让人感觉到疲倦。想要找到想要的功能操作页面，就要进行一层一层的类别选项，这也导致操作时间相对较长。

2.标签-下

下栏标签是很多APP作为功能导航的常用方法，其优点是操作速度比较快，因为手指离屏幕下侧的部分距离是最短的，因此可以在很快的时间内进行操作。但缺点是可放的内容并不多，一般只能有3-5个标签，所以要进行准确的分类才能凸显效果。

3.标签-上

标签设计的形式是非常多的。可以用多出来的部分当做tag，也可以用文字突出的形式表示出已经选择的标签栏。上侧的标签栏可以防止误操作的情况发生，因为这个位置离手指的距离较远，所以选择的时间比下侧的标签栏长一些，但是tag的作用是一样的，都可以用来作为导航栏。

4.网格

网格是现在很多APP设计最喜欢使用的一种方式之一。一般常用的有四宫格、六宫格、九宫格和十宫格。显示的形式一般是文字和标识并行，好处就是进入到具体功能页的速度很快，直接的选择方式可以有效减少操作步骤，缺点是不能显示太多的信息，标题的长度也有限制。

5.满屏切换

满屏切换（Gallery布局）一般用在最初的操作方法演示、图片展示、少数量的信息展示的时候使用，一般使用满屏切换的内容会以图片或者Icon为主。这种用于浏览功能的布局，优点是满屏浏览时界面信息不会受到其他部分的干扰，其切换形式一般有抽线式和点切换式，纵向和横向切换都是可以的。

6.卡片

卡片式构图的好处在于每个部分的操作比较独立，不会受到其他部分的干扰信息，不拥挤、浏览体验较好。但缺点在于无法承载过多的信息。卡片式结构做最终高保真效果图的时候有一个禁忌，是不要过分的强调卡片的边缘或者影子的设计，否则会干扰用户集中精神去读卡片内容本身。

7.多面板

多面板和卡片式不一样的地方是，点击多面板的一个列表或者卡片，就会显示上面的内容，多面板可以设计成多选多面板和单选多面板。多选多面板就是多个面板可以同时打开浏览内容，单选多面板是只可以一次性查看一个面板上的内容。这种布局的局限性在于每个面板上的内容不宜过多，不然每个面板里面的内容又要进行分类显示，操作会变得比较繁琐。

8.瀑布流

瀑布流的形式是大量平台和分享网站最爱使用的构图方式，其优点是信息浏览的速度比较快，对提高整体信息的曝光率有好处。这样的形式适合以图片分享为主的APP设计。但这种界面设计有一个很大的矛盾是要不要限制图片的比例。因为如果图片太扁，浏览的效果就会不太好，反之如果图片太长也会影响其他图片的曝光率。

但如果对图片尺寸进行限制，又会影响用户的使用体验，所以这种情况下要根据具体的图片内容来确定需不需要进行图片的比例限制，如果限制，多少是最合适的。就像最初的Instagram只可以使用方形图片，但因为用户的评价太低，所以最后改成了无比例限制的分享平台。

9.复合

除了上述单独式的构图设计之外，我们还可以把一些构图进行结合做成复合形式的构图设计，一般的组合会在2-3个之间，如果过多则会让界面的信息变得复杂，用户无法在脑海中形成信息框架。

以上是对几种常用构图方式的解释和优缺点分析，希望同学们在设计具体平面布局的时候可以在了解每个构图优缺点的基础上，反复思考，择优选择具体表现形式，以求达到最佳的布局效果。