长滚动页面设计全攻略:故事自己滚下去。 如今,小屏幕的设备承载的信息量越来越多,长滚动页面便成为节省空间的理想之选。它隐藏导航,把整个故事展开,让用户只需一根手指就能将整个世界往下拽。既然几乎所有的移动设备都是触摸屏,“向下拖”就成为最直接的交互指令,因此长滚动页面设计便从趋势演变成默认动作。设计时,一定要给用户一些暗示。这些暗示可以是一个向下的箭头,也可以是一句“继续下滑”的文案。把这些视觉线索放在首屏上,让用户知道还有更多内容在后面。越早给出这样的提示,用户流失率就越低。设计导航栏时,要保持其可见性,让用户有明确的方向感。悬浮导航栏就像GPS一样,始终占据屏幕同一位置,给用户指引方向。另外,还可以使用跳转锚点这种方式,只有在需要时才会出现,方便用户回到顶部或跳转章节。Facebook的客户端就是很好的例子:滚到底部后想返回顶部时,导航栏自动出现。别让页面长度决定内容质量。要让内容决定长度。分页逻辑应该与叙事节奏相结合:先抛出悬念再给细节。每页应该承上启下,像翻书一样自然流畅。页数最好不要超过10页,如果超过的话可以拆分成两篇文章来展示给读者。Le Mugs的案例就展示了“分页+动画”的黄金比例:每次滑动都会出现新画面淡入效果。故事就像电影一样连续播放给读者观看。动画效果不仅仅是为了炫技,更是为了提升用户体验和情感交流的润滑剂。可以考虑极简风格设计——纯文字加上字体动效——或者豪华风格设计——视差加上粒子特效等。无论怎样选择效果都要记得动效的唯一职责是提升可预测性。预加载提示能避免白屏出现,手指离开屏幕就能触发下一场景展示给读者观看以及柔和的速度曲线能让整体体验更顺畅。适当加入一些视差效果能够增强空间感。 通过视差滚动来讲故事能给读者带来类似于翻漫画书般的体验。这不是特效堆砌而是节奏发动机作用所在。将剧情拆分为三个部分: 第一部分快速平移建立悬念 第二部分放慢速度展示细节 第三部分背景先动、前景后动制造“揭秘”瞬间。用户大脑会主动补全画面并且参与其中感会变得更强。 长滚动页面设计终极目标并不是为了让读者一直滚下去而是为了让他们记住内容所传达的信息。当导航、动画、分页和视差四股力量同时作用于一个页面上时内容本身就会继续往下滚动展示给读者观看而无需记住任何链接或菜单信息只需用一根手指就可以一气呵成地把故事滑到心里去感受它所带来的魅力所在所在!