下载掌阅APP，畅读海量书库
立即打开
UI页面的布局方式会直接影响一个App的视觉效果。好的布局方式不但能在视觉上令人感到舒适，还能帮助用户快速找到他们想要的内容。移动UI设计中常用的布局方式有列表式、陈列馆式、九宫格式等8种，下面就来分别介绍这些布局方式的特点及适用范围。
列表式布局是最经典的UI布局方式，其特点是内容从上向下依次排列，导航之间的跳转需要回到初始位置。列表式布局有时也会搭配一些宫格式布局。
列表式布局常用于新闻类App的UI设计，优点是能在较小的屏幕中显示多条信息，通过上下滑动的手势获取更多信息，并且因为内容从上向下排列，所以能展示内容较长的菜单或拥有次级文字内容的标题等。列表式布局的缺点是版面的灵活性不高，如果分类目录过多，连续滑动容易导致定位不准或触发别的栏目。下图所示为列表式布局及其应用效果。
陈列馆式布局是一种比较灵活的布局方式，设计师可以平均分布网格，也可以根据内容的重要性进行不规则分布。与列表式布局相比，陈列馆式布局在同样的高度下可以放置更多的菜单，更具有流动性。陈列馆式布局适合以图片为主的单一内容浏览型的展示。
陈列馆式布局的优点是可以直观展示各项内容，便于随时浏览经常更新的内容。不足之处是不适合展示顶层入口框架；当UI中展示的内容过多时，如果没有处理好，很容易给人留下杂乱的印象。我们熟悉的手机淘宝App就采用了陈列馆式布局呈现用户经常浏览的类目，如下图所示。
宫格式布局是移动App上较为常见且用户体验最佳的一种布局方式，适合入口比较多且导航之间切换不太频繁的内容展示，也就是业务之间相对独立，没有太多的联系。最常见的九宫格式布局为比较稳定的一行三列式。我们熟悉的携程、途牛和支付宝等App都使用了九宫格式布局，这种布局井然有序且间隔合理，能带给用户较为舒服的视觉感受。
宫格式布局的优点是能清晰地展现各入口，并且方便用户快速记住并查找各入口的位置。但这种布局方式的跳转也需要回到初始点，无法向用户介绍大概的功能，只能点击进去才能获知，初始状态不如列表式布局明朗，这样就容易形成更深的路径。下图所示为九宫格式布局及其应用效果，看起来非常干净、整齐。
选项卡式布局的特点是会始终显示一个导航栏，用户可以通过单击导航栏中的标签来快速切换选项卡，当前选项卡的标签会突出显示。选项卡式布局的导航栏大多数被放在UI的底部，方便用户操作，但是也有少部分导航栏被放在UI的顶部。选项卡式布局适用于分类少且其内容同时展示的UI，其分类数量以3～5个为最佳。
选项卡式布局的优点是直接展示最重要的接口内容，信息分类位置固定，用户清楚当前所在的入口位置，页面跳转的层级少，可轻松在各入口间频繁跳转。不足之处则是当功能入口过多时，选项卡式布局会显得笨重、不实用。下图所示为选项卡式布局及其应用效果。
旋转木马式布局的特点是重点展示一个对象，通过手势滑动按顺序查看更多的内容。旋转木马式布局适合数量少、聚焦度高且视觉冲击力强的图片展示。
旋转木马式布局的优点是页面内容整体性较强，聚焦度高，线性的浏览方式有顺畅感和方向感。缺点是往往因为屏幕尺寸的限制，不能展现更多精彩内容，而且由于各页面的内容结构相似，容易忽略后面的内容，并且不能跳跃式地查看间隔的页面，只能按顺序查看相邻的页面。下图所示为旋转木马式布局及其应用效果，看起来不仅简洁、大方，而且聚焦度较高。
行为扩展式布局的特点是无需跳转页面就能在一屏内显示更多细节，适用于分类多且其内容同时展示的UI。腾讯QQ App的联系人页面就采用了这种布局，如下图所示。
行为扩展式布局的优点是能减少页面跳转的层级，用户可对整个UI中栏目的分类有一个整体性的了解。缺点则是分类位置不固定，展开的内容较多时，跨分类跳转不方便。
多面板式布局最大的特点是能同时呈现比较多的分类及内容，适用于分类多且需要同时展示其内容的UI。
多面板式布局的优点在于分类位置固定，用户清楚当前所在的入口位置，对分类有整体性的了解，能减少页面跳转的层级。缺点则是内容较多，容易让人感觉拥挤，造成视觉疲劳。下图所示为多面板式布局及其应用效果。
图表式布局，顾名思义，就是以图表的形式直观呈现信息。图表式布局能直观展示详细信息，很适用于与数据和账单有关的UI。图表式布局的优点是直观且总体性强，用户通过图形样式就能清楚了解各项数据内容。不足之处是UI的大部分区域被图表占据，显示的详细信息非常有限。下图所示为图表式布局及其应用效果。
