“少年，加载的世界，不只有分页，还有瀑布流。
——尼古拉斯 · 摊主
今天摊主就一本正经蹦蹦跳跳地跟各位聊聊页面加载的方式，以及各有哪些优缺点。
1
分页
分页在上一篇文章已经详细聊过了，所以此处一笔带过，不再啰嗦。
没有看到的小伙伴，请狂点下方标题（点别的地方不跳转你别赖我）
网站分页设计与交互 10月22日
分页作为一个很小的组件，对于大多数网站来说是没有存在感的。
阅读全文
>
分页优势
-
告知用户要浏览的信息量
-
让用户快速跳过不想看的信息
-
便于定位和查找
-
提高加载速度，减少页面大小
分页不足
-
每一页显示的产品数量有限，需要一页一页进行点击预览，导致浏览速度相对较慢，在体验时会出现间断。
2
自动加载（无限滚动，瀑布流）
优势
-
沉浸体验，无需点击
-
在滚轮滚动的同时，后台也悄悄开始预载窗口下方的内容，用户可以无缝阅览，比较容易沉浸其中，不像分页，点击完下一页之后，需等待页面载入。
不足
-
缺少焦点，降低产品曝光度
-
懒加载模式巧妙的避免了用户鼠标点击的翻页操作，但是对于产品信息的曝光推广就缺少了精准度，用户更少地把视觉焦点放在某个产品上。
-
页脚信息呈现受阻
-
当滚轮滚动时，页面会自动加载更多内容，把Footer 再往下推，消失于窗口中。这样会阻碍用户到达页脚，那么页脚那些导航等信息，就不能及时展现。
-
比如浏览花瓣网，原本想要阅读Footer 的信息，结果看到一半，就被加载的信息推走，我又往下滑动，然后又再度被推走，整个无法控制。手快的朋友，可以与Footer 玩个追逐战。
-
花瓣网看不到页脚信息
-
信息深不见底，用户无法预知
-
网页滚动条长度具有暗示数据内容多寡的效用，我们也会根据滚动条的位置，去了解还剩下多少数据在下方未读。
-
但无限加载因为页面长度会随着向下滑动行为不停增长，滚动条长度和位置会不停变化，失去提示作用。
-
不断加载新的页面，好像永远见不到底，很难预估还有多少内容。用户会产生“页面多久可以到底?” “已经浏览了多少的内容了?” 等等的疑惑。
-
-
在蘑菇街网站中，滚轮连续滑了十多下还是个无底洞。
-
蘑菇街无法预知商品数量多少
-
难以回查，迷失位置
-
在一个超长的页面中，如果用户想要回到之前看到的内容也是有点困难的，因为不知道它的位置，不像分页，可以记得内容是在第几页。
-
还以蘑菇街来举例，在页面滚动时，此时我想到前边有件衣服不错，打算看看详情，可是找到真的很困难很困难很困难。
-
-
无法略过信息
-
无法像分页那样略过不必要的内容。电商网站中有些卖家故意会用0元或99999999元，争取最佳排序位置，那么往往最前面几笔和最后面几笔的数据，基本上都是和自己想买的对象不相关。
-
-
这时候可以跳页就变得重要，当然多一些过滤，也可以帮助找到所需内容。
-
淘宝网商家排位套路
适用于
-
适合展示相同架构的东西，在不需要增加用户浏览产品深度上，用户可以在短时间内获取更多信息，比如花瓣，Pinterest, Google 图片等。
-
而图片就是最好的内容物，因为视觉的信息比较文字更快被人所接收，我们总是能很扫射完图片。
-
Pinterest 和花瓣就是利用此的特点，不停给予各式图片，供设计师快速找寻灵感，给予视觉不间断的刺激。如果换成分页，那么刺激就会被打断。
-
3
加载更多
在分页和无限加载之外，还有一种方式，那就是加载更多。
网页内容显示一定数量后，点击加载更多，会载入新一轮的内容。
这可以解决在一定数量内用户来回阅览、且不占用过多浏览器资源、Footer 无法查看等问题。比如36kr，虎嗅网就是采用这种加载方式。
-
36Kr加载更多
4
加载结合体既然我们知道了这两种模式在用户体验上的优缺点之后，我们就可以有针对性的采取这两种模式的精华，综合使用。
摄图网采用分页和瀑布流两种方式供用户选择，可以说是很贴心了。
本文完得猝不及防。
设计之路永无止境，每周日21点，
摊主带你准时上车。
顺便关注一下我，也许车开得更稳。
