9种常见的移动端产品信息布局方式

如题所述

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