某天，经理在工作讨论组发了2张App的界面截图，问：“你们喜欢哪一种布局方式？”这两个界面，一个是九宫格式，一个是普通列表式。
一时间，大家没法快速下定论。视觉设计师发言，“得看具体场景和需求来判定。”
有程序员同事打趣说，“哈哈，说了跟没说一样。”接着，陆续有人发表了自己看法，除了说到这2种方式各自的优劣，总结起来还是那句话——得看设计的目标是什么，综合多方面来考虑，没有绝对的好与坏，只有相对的合适与否。
在看过已有的关于App界面信息布局方式的一些资料后，我自己调整了一下，重新总结一下。从视觉和交互表现来说，常见的移动端产品界面信息布局方式，大致有以下9种。
一、列表式
列表式为竖向排列，每个信息单元有相同的结构。
优点：
符合人们从上往下阅读的习惯，顺畅快捷，浏览体验比较好。
因为有统一的信息单元格式，页面整体比较整洁、清晰。
每个信息单元根据需要可放置标题、摘要、图片、标签等元素，供用户预览并预测详细内容。
缺点：
当信息加载多了以后，容易让人出现审美疲劳，降低阅览兴趣。
信息排序越往后，受到的关注度自然会下降。一般采用颜色不同、字号大小、区块划分等来区分重要级别，增强层次感。
类似于列表式，有些演化出像卡片的排版，或者一个区块划分为左右2半（如下例子所示），成为2个入口，都是根据界面面积利用和设计目标等方面来考虑的。
二、横向排列式
与竖向排列相对应，信息单元也可以是横向排列。在交互操作上，这种方式需要左右滑动来切换信息单元，又称“旋转木马式”。
举例：下图中[新书抢鲜]模块的布局方式
优点：
缩小在高度上占据的空间，利于界面其他信息的展示。
当信息单元占据的幅度较大时（例如图片类应用），有利于用户目光聚焦。
缺点：
左右滑动的交互有时候不方便。
当信息单元面积较大时，无法跳跃性定位到想看的信息单元，只能一个一个左右切换，直到切换到想看的那个为止。
因为操作不方便，可能有些内容会被遗漏，或者用户没兴致去翻看。
三、九宫格式
严格意义上的九宫格是3行3列，如果列数或行数增加，我们暂且都泛称为九宫格式（也有人将它们区分开来，称之为“陈列馆式”或“网格式”）
优点：
节省空间，一行可以放置多个入口。
清晰明朗、简洁。一般会突出icon图标，便于记忆和查找。
缺点：
因为空间有限，不能放置太多次级预览内容。
当入口过多时，也不利于辨识和查找。
四、选项卡式
也称为“tab式”，通过对当前界面的信息属性进行划分归类，分为多个选项，用户切换即可。App的主导航一般也是用tab的方式切换。
如下图：消息页面分为4个选项卡
优点：
不用来回跳转页面层级，只需要在当前页面一键切换即可看到不同内容，方便。
用户清楚地知道自己当前所在位置。
缺点：
选项卡数量超过5个就会显得笨重，如果一行放置不下，需要左右滑动才能显示完所有选项卡，会降低操作便捷性。
五、多面板式
对于分类比较多，每个类别囊括的内容也多的情况下，可用多个面板的形式来展示。
优点：
可以清楚地知道当前在哪个位置。
当前界面容纳多个入口，同级别之间切换，不需要在不同层级的页面来回切换，比较方便。
缺点：
面板独占一列空间，整个界面显得比较拥挤。
六、手风琴式
这种方式也有人称为“行为扩展式”。它是在当前界面点击一级信息，展开二级信息的方式，点击时再展开，再点击可缩回，有点类似手风琴缩展的动作。
优点：
只需要在当前页展开二级信息，不需要跳转页面，操作比较方便，也有利于用户认知信息的架构。
缺点：
当信息分类过多且需要手动再点击才能收回二级信息时，全部展开后，不利于跨分类跳转。
七、图表式
通过图表和内容的结合来展示。
优点：
图表比较直观，表现力更强。
缺点：
占据面积较大，整体界面能承载的信息不够多。
如果图形和交互动作结合，大多数用户可能发现不了这些交互。
八、抽屉式
抽屉式适用于隐藏次要功能，让产品突出核心功能。当用户需要查找某个功能入口时，通过点击抽屉，在“抽屉”里面进行查找。
优点：
可帮助隐藏一些功能入口，让产品更简约。
缺点：
用户第一次使用时，因为可见性被减弱，有些功能用户找不到，提高了他们的使用成本。
如果用户常用的功能被放置在抽屉里，则增加了用户操作的步骤。
九、标签式
标签式，顾名思义，就是通过标签设置的方法，把信息进行分类对应为一个个标签，或者标签直接作为功能入口（如“热门搜索”），便于用户操作。
优点：
清晰简洁，占据空间少。
便于切换查看对应的内容，用户清楚自己在哪个分类。
缺点：
标签不宜过多，不利于查找。
小结
移动端的产品形式越来越多样化，人们总是期望随时随地可以在移动端快速获取自己想要的信息，因为硬件规格的限制，如何在有限的空间和用户耐心中争夺用户的注意力，隐含了诸多产品设计的学问。
以上9种常见移动端信息布局方式，只是很浅层的总结，任何一种方式都没有绝对的优劣，不同方式可以互相组合、镶嵌使用，在具体设计时，需要根据实际情况来思考，在不断优化中找到最合适最有效的方案。
网友评论