瀑布流的优缺点

移动端不同于PC端，最大的区别是屏幕尺寸的限制，相同的内容显示效率要低很多。如果直接按照PC端显示所有内容，页面信息自然混乱不堪。作为交互设计师需要对信息进行优先级划分，并且合理布局，提升信息的传递效率。下面来谈谈手机界面设计中常用到的一些页面布局。

1 list 布局

优点

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

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

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

缺点

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

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

页面重点内容不突出。

场景

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

2 网格布局

优点

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

缺点

扩展性不如list列表；

标题不易过长。

场景

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

3 仪表布局

优点

展示更加直观。

缺点

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

场景

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

4 卡片布局

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

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

缺点

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

场景

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

5 gallery布局

优点

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

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

缺点

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

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

场景

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

6 瀑布流布局

-

优点

瀑布流展现具有吸引力；

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

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

缺点

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

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

场景

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

7 手风琴布局

优点

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

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

缺点

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

场景

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

8 多面板布局

优点

减少界面跳转；

分类一目了然。

缺点

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

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

场景

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

一般都是用jQuery来经ajax加载

你可以在百度搜寻：jquery 显示更多

会有很多资料

你这个效果，百度搜寻：jquery 瀑布流

有可能效果你更满意

1 有限的用例：

无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。

例如，在电商网站当中，用户时常需要在商品列表与详情页面之间切换，这种情况下，传统的、带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定的列表页面当中。

2 额外的复杂度：

那些用来打造无限滚动的JS库虽然都自称很容易使用，但你总会需要在自己的产品中进行不同程度的定制化处理，以满足你们自己的需求;另外这些JS库在浏览器和设备兼容性等方面的表现也参差不齐，你必须做好充分的测试与调整工作。

3 再见了，页脚：

如果使用了比较典型的无限滚动加载模式，这就意味着你可以和页脚说拜拜了。

最好考虑一下页脚对于你的网站，特别是用户的重要性;如果其中确实有比较重要的内容或链接，那么最好换一种更传统和稳妥的方式。

千万不要耍弄你的用户，当他们一次次的浏览到页面底部，看到页脚，却因为自动加载的内容突然出现而无论如何都无法点击页脚中的链接时，他们会变的越发愤怒。

5 SEO：

集中在一页当中动态加载数据，与一页一页的输出相比，究竟那种方式更利于SEO，这是你必须考虑的问题。对于某些以类型网站来说，在这方面进行冒险是很不划算的。

6 关于页面数量的印象：

其实站在用户的角度来看，这一点并非负面;不过，如果对于你的网站来说，通过更多的内容页面展示更多的相关信息(包括广告)是很重要的策略，那么单页无限滚动的方式对你并不适用。