手机APP设计干货：常见的APP信息布局方式

当我们接到一个APP设计的case的时候，首先是进行app信息组织模式分析：

在确定了需求和主流程后，开始着手设计app界面，前提我们要面临的第一个问题

就是如何将信息以最优的方式组合起来，针对这个问题所作出的设计决策对整个app的核心体验起到关键作用。

之前25学堂跟大家分享的移动APP布局设计经验之道：独门七字诀

如下图的APP列表页面的分布布局方式：

今天，25学堂跟大家再来回顾下常见的APP信息布局方式。

第一种APP信息布局方式：宫格布局

这种APP信息布局方式也是我们目前最常见的一种方式，也是符合用户习惯和黄金比例的设计方式，最知名的就是锤子手机的界面设计。锤子手机界面设计欣赏

知名的APP设计采用的九宫格、六宫格等方式布局有：携程APP、途牛APP、支付宝APP等等。

下面我们来欣赏下经典的宫格布局APP界面设计

九宫格是一种比较古老的设计，它最基本的表现其实就像是一个三行三列的表格。

采用宫格布局的优势：

非常方便的适配所有的移动手机机型。因为这样的结构是最有利于内容区域随屏幕分辩率不同而自动伸展宽高，同时也是ios和android开发人员比较容易编写的一种布局方式。

信息内容展示的方式，简单明了。

手机APP设计教程之四条APP产品设计黄金法则当中也提到了宫格布局的交互设计好处。

第二种APP信息布局方式：列表布局

列表布局就是以列表的形式展示具体内容，并且能够根据数据的长度自适应显示。

列表布局就是List View   是可以滚动的列表布局方式，最常见的应该属于android的列表布局，这也是最快速的app布局方式。因为无论ios开发和android 都有现成的列表布局插件和模板。

以上的APP界面基本都是以列表布局为主导。最能代表的就是分类信息的展示形式。还有产品列表、对话列表等等。

第三种APP信息布局方式：大图展示布局

这类布局多见于引导页设计和一些图片分享app、或者文艺范、摄影类的APP主导的布局方式。

代表APP，mono猫弄、one APP等等。

第四种APP信息布局方式：图表信息布局

app里面采用图表布局，让APP更具商务气质。几乎所有的APP 商业图表都符合这一构图原则，可以说是商业图表背后的布局指南。

优点有：完整的图表要素；突出的标题区；从上到下的阅读顺序。

缺点有：标题不够突出，信息量不足，移动APP空间利用不足等。

但是目前APP图表的布局方式，已经在某些领域是常见的布局方式。如下图：

等等。这样图表布局让APP更加生动形象。

第五种APP信息布局方式：标签布局

标签布局来源移动android开发当中的一个术语：标签布局（Tab Layout）25学堂今天跟大家讲的标签比这个tab layout范围要大点。除了tab布局。还有标签关键词布局，热度布局等等。

以标签的方式显示它的子视图元素，就像在Firefox中的一个窗口中显示多个网页一样。为了狂创建一个标签UI（tabbed UI），需要使用到TabHost和TabWidget。TabHost必须是布局的根节点，它包含为了显示标签的TabWidget和显示标签内容的FrameLayout。

最常见的标签布局就是tab标签布局。还有搜索的时候，热门关键词的布局。

今天25学堂就跟大家先整理在这里，如果各位还有好的APP信息布局方式，我们一起来分享和讨论。

本文属于25学堂的原创文章，请勿转载！