学习UI设计时，经常会接触到页面的布局。 布局的方式直接影响APP的视觉效果。 良好的布局方式往往会带来舒适的视觉效果，得到用户的接受和好评。
由于手机屏幕尺寸的限制，无法将所有内容直接显示在一个屏幕上。 可以显示的内容比PC的画面少得多。 APP的界面设计需要有效地组织和提取信息，并以合理的布局向用户展示信息。
通过合理的布局设计，信息得以组织，用户可以方便地找到自己想要的信息，提高产品的交互效率和信息的传递效率。 现在，我们来看看APP界面中常用的八种页面布局。
一.清单布局
简单列表式布局
特点：内容自上而下排列，导航间跳转返回初始点。
好处：
1、水平展示清晰。
2、视线从上到下，体验阷览快。
3、可以展示内容较长的菜单或具有子文本内容的标题。
缺点：
1、导航间跳转返回初始点，灵活性不高。
2、同级内容过多，用户的扫码容易产生视觉疲劳。
3、只能通过排列顺序、颜色来区分各入口的重要程度。
简单的书很多地方都采用列表式布局。 通过这种布局方法，用户可以清楚地知道页面的内容，概要也很大方。
二.陈列馆式布局
支付宝(Alipay )展厅式布局
特点：布局比较灵活，可以使这些网格均匀分布，也可以根据内容重要性不规则分布。
好处：
1、在同一高度可以放置更多的菜单，流动性强。
2、各项内容直观，便于用户浏览经常更新的内容。
缺点：
1、不适合展示顶级入门级框架。
2、界面内容过多，让用户陷入混乱。
我觉得支付宝(Alipay )的界面很熟悉，主页上使用了展厅风格的布局。 可以直观地表达内容。 另外，虽然主页的内容是用户经常访问的，但由于界面过多，视觉体验的效果会稍差。 (侧重于视觉效果的设计师在jjdsb博客《基于视觉效果的扁平化设计》的文章中有介绍。
三.九宫格布局
zxdbb布局
特点：与陈列馆式相比，九宫格布局稳定为一行三列式。
优点：清晰标明各个入口，方便用户快速查询。
缺点：
1、菜单之间的跳转返回第一个点。
2、容易形成更深的路径，很少能显示入口的子内容。
很多软件都喜欢使用九宫格布局，简单的图书专业管理员也在这里使用这个布局。 井然有序，间隔合理，视觉效果非常舒适。
四.制表式布局
简单页签式布局
特点：导航一直存在，处于选中状态，可以立即切换不同的导航(可以通过更多的设计格式查看jjdsb博客《十个简单而有创意的网站导航设计案例》的相关介绍)。
好处：
1、直接展示最重要界面内容信息。
2、分类位置固定，当前入口位置清晰。
3、减少界面跳转级别，方便地在各入口之间频繁跳转。
坏处：如果功能入口太多，这种模式又重又不实用。
简单的书的首页也使用了标签布局。 图上的红框和下的红框都是这个布局。 但是，就个人而言，上面的选项卡看起来功能入口太多，太重了。 下面的标签正好。
五.马里兰式布局
个人马里兰式布局
特点：重点展示一个对象，用手势滑动看更多内容。
优点：一页内容整体较强，聚焦度高。
缺点：
1、受画面宽度限制，可显示的数量较少。
2、不能跳跃性地看间隔的页面。
3、每页内容结构相似，容易忽略后面的内容。
读了软件“一个”的首页，使用了马里兰式的布局。 因为一个主题是“在复杂的世界里一个就足够了”，所以采用这个布局可以提高每页的聚焦度。
六.行为拓展型布局
QQ联系人行为扩展布局
特点：可在一个画面内显示更多详细内容，不需要页面跳转。
优点：
1、减少页面跳转级别。
2、对分类有总体了解，明确当前所在入口位置。
缺点：分类位置不固定，需要展开的内容较多时，不方便跨分类跳跃。
腾讯QQ的联系页面上使用了行动扩展型的布局，大家也不熟悉，我觉得很容易使用。
七.多屏布局
QQ趣味部落多屏布局
特点：能同时表达比较多的分类和内容。
优点：
1、分类位置固定，现入口位置清晰。
2、对分类有总体了解，减少界面跳转级别。
缺点：界面拥挤，容易产生视觉疲劳
。腾讯QQ的兴趣部落页面使用了多版面布局，能同时呈现出比较多的兴趣分类及内容，这也是一种典型的页面布局方式。
八、图表式布局
支付宝·图表式布局
特点：用图表的方式直接呈现信息
优点：直观，总体性强
缺点：详细信息显示有限
支付宝作为一个与金钱有关的软件，它余额宝页面选择了与自身比较符合的图表式布局，这种布局能直观详细地显示出信息，很适合用于数据、账单有关的APP。
jjdsb博客点评：
设计风格是设计起始的第一步，定好了设计风格，后续的设计工作才能继续安排，另外，要确保设计风格匹配用户人群的喜好，符合APP的定位以及给用户传递APP正面良好的形象，确定设计风格阶段，产品经理和设计师花费再多的时间和精力来折腾也是值得的。
本文发布于jjdsb博客文章，如想转载，请注明原文网址摘自于http://www.mahaixiang.cn/App/1622.html，注明出处；否则，禁止转载；谢谢配合！