产品分析 | 作为产品小白，你应该知道的几种布局

怼烎@ 2022-01-19 05:57 300阅读 0赞

这里是IT修真院产品分享课，今天要分享的是

【产品分析 | 作为产品小白，你应该知道的几种布局】

# 一、App中通常用哪些常见的列表布局，分别适用什么样的场景？ #

## 1.list 列表布局 ##

## 优点 ##

list列表纵向长度没有限制，上下滑动可以查看无限内容；

list列表在视觉上整齐美观，用户接受度很高；

list列表可以展示内容长和次级文字的标题。

## 缺点 ##

页面跳转后总是从头开始；

一页展示内容过多，用户疲劳度增加；

页面重点内容不突出。

## 场景 ##

常用于并列元素的展示，包括目录、分类、内容等。

## 2.网格布局，在移动app上主要是讲宫格布局 ##

## 优点 ##

各入口展示清晰，方便快速查找。

## 缺点 ##

扩展性不如list列表；

标题不易过长。

## 场景 ##

适合展示较多入口，且各模块相对独立。

## 3.仪表布局,也是一种数据展示结构布局 ##

## 优点 ##

展示更加直观。

## 缺点 ##

信息展示量少，过于单一。

## 场景 ##

适合表现趋势走向的展示。

## 4.卡片布局 ##

## 优点 ##

每个卡片信息承载量大，转化率高；

每张卡片的操作互相独立，互不干扰。

## 缺点 ##

每个卡片页面空间的消耗大，一屏可展示信息少，用户操作负荷高。

## 场景 ##

适合以图片为主单一内容浏览型的展示。

## 5.gallery布局 ##

## 优点 ##

单页面内容整体性强，聚焦度高；

线性的浏览方式有顺畅感、方向感。

## 缺点 ##

可显示的数量有限，需要用户探索；

不具有指向性查看页面，必须按顺序查看页面。

## 场景 ##

适合数量少，聚焦度高，视觉冲击力强的图片展示。

## 6. 瀑布流布局 ##

## 优点 ##

瀑布流图片展现具有吸引力；

瀑布流里的加载模式能获得更多的内容，容易沉浸其中；

瀑布流错落有致的设计巧妙利用视觉层级，同时视线任意流动缓解视觉疲劳。

## 缺点 ##

页面跳转后需要从头开始，加载量不固定，理论上是无限延展；

用户返回查找信息困难很大。

## 场景 ##

适用于实时内容频繁更新的情况。

## 7. 手风琴布局 ##

## 优点 ##

两级结构可承载较多信息，同时保持界面简洁；

减少界面跳转，提高操作效率高。

## 缺点 ##

同时打开多个手风琴菜单，分类标题不易寻找，且容易将页面布局打乱。

## 场景 ##

适用于两级结构的内容，并且二级结构可以隐藏。

## 8. 多面板布局 ##

## 优点 ##

减少界面跳转；

分类一目了然。

## 缺点 ##

两栏设计使界面比较拥挤；

分类很多时，左侧滑动区域过窄，且不利于单手操作。

## 场景 ##

适合分类多并且内容需要同时展示。

【更多内容，欢迎加入交流群565763832与大家一起讨论交流】

【这里是技能树·IT修真院：[IT修真院官网][IT]，初学者转行到互联网的聚集地】

转载于:https://juejin.im/post/5caecedd5188251b117f7ee5

[IT]: https://link.juejin.im?target=https%3A%2F%2Fwww.jnshu.com%2Foccupation%2F7%2Ftask%3FinvitationCode%3D27853447%26amp%3Bsource%3Djuejin

产品分析 | 作为产品小白，你应该知道的几种布局

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关作为程序员你应该知道的数学公式

相关你应该知道Go语言的几个优势

相关异步编程的几种方式，你知道几种？

相关产品新人必须知道的知识！

相关几个小案例告诉你如何辅助产品设计

相关你应该需要知道的前端小技巧

相关产品分析干货步骤

相关你应该知道的那些Android小经验

相关产品的几个发展阶段

相关产品分析 | 作为产品小白，你应该知道的几种布局