β

抓住这7个关键,创造让人欲罢不能的长滚动页面

优设-UISDC 61 阅读

将首屏作为设计的重心已经不足以满足如今的设计需求,有的时候你还是得设计一个长滚动单页来承载足够的内容,保持用户的关注度,让他们在滚动中获取足够的内容和信息。

使用长滚动式网页确实能够更为有效地呈现内容。这种轻松的交互方式本身就对用户有着足够的吸引力。不过,想要设计足够优秀的长滚动页面,单纯的视觉设计是不够的,在不断的滚动浏览过程中如何让用户更好地吸收信息才是设计师需要仔细考虑的事情。今天的文章,我们来探讨一下,让长滚动页面更加优秀的7种策略。

1、创造真正拥有高参与度的内容

ypiyachts

不论如何设计,网页核心的内容质量首先得过硬。再好的设计也无法掩盖内容的空洞和素质,所以首先要有高质量的内容。同时,内容还要和整体设计有效得搭配起来。想要创造优质的内容,有几个方法能够帮到你:

2、构建视觉主题

serioverify

风格明显,鲜明的主题能够帮助用户更好地了解故事或者页面的内容,拥有沉浸式的体验。主题中可以搭配一些视觉线索,比如箭头,分割线,或者其他的指引性视觉元素,帮助用户更为清晰地明白内容之间的关系,在浏览过程中,更好地穿梭于内容之间。

视觉化的主题设计和合理的视觉引导机制,能够让长滚动网页这种设计更好地服务于你的网站和内容。同时,你还需要注意数据上的变化。在采用长滚动页面之前,用户的留存率是否更高?用户主要的互动内容是否有所变化?预期的转化率是否达到了?等等等等。

如果视觉化的设计并没有有利于整个长滚动页面,你需要考虑主题是否影响了内容的展示,或者是否同用户群相匹配。

3、令人愉悦的交互

beatrate

长滚动式的网页设计往往能够创造出沉浸式的用户体验,而这种沉浸式的体验很大程度上是得益于其中取悦用户的各式交互。

从动效到轮播图,从视差元素到各种漂亮的动画,微交互和可触发的宏交互共同创造了其中引人入胜的体验。就像上面的 Beatrate 这个网站,设计师在其中加入了大量的可交互的元素,包括视频,滚动式的动画,悬浮特效,旋转动效和轮播图,他们让整个交互更为优秀。

每个区域当中都采用了独特的交互,这些交互对应着不同的动画效果。也正是因为它们的差异,才使得用户每次滚动查看,都会发现不一样的东西。

4、充分运用滚动特效和技术

fitbit

长滚动页面在移动端和桌面端都能够良好的运作,很大程度上这是设计师喜爱它的原因之一。

许多用户其实更加喜欢滚动而不是点击,而在移动端上,这种交互上的倾向表现得更加明显。使用长滚动页面,浏览获取信息的体验更顺滑。

使用各种滚动特效和技术比如视差特效,色块遮盖和混搭式排版(比如让文本、视频、图片等内容块混搭,降低用户浏览负荷)来保持整个设计顺畅。搭配滚动触发式的视差特效和滚动动画,保持用户的参与性和趣味性,鼓励用户继续滚动浏览。

5、让长滚动内容和短滚动内容交替出现

disasterartist

在长滚动页面当中,有些内容需要快速滚动浏览,而有的内容则需要用户仔细阅读,逐步查看,这些长滚动和短滚动的内容应该交替出现,分段搭配。

比如大片的图片就是易于消化的内容,用户会快速滚动查看,而包含文本的内容,则常常需要用户停下来,逐行滚动查看,你需要让这些不同的内容长短搭配起来,这样不仅让交互更加富有韵律,而且让页面更加从容地加载。

6、为用户提供路线图

le-mugs

长滚动页面所需要面临一个非常实际的问题,就是导航和视觉线索,用户需要知道他们浏览到了什么位置,以及他们距离页面的首位有多远。

路线图和导航是非常重要的。目前常见的模式有以下几种:

7、设计出清晰的目标

laborfit

长滚动页面不应该是无限的。设计的时候,应该能够让用户明白从哪里开始,以及最终的结束会在什么地方。

无论整个页面的设计有多酷,总需要让用户明确目标和结果。

在你明确整个设计之前,你应该勾画出最终的目标。确保整个长滚动页面的每个部分都是为了呈现最终的结果而存在。看看上面的案例,页面的每个部分都包含一个明确的CTA按钮,并且带有明显的指引性语言,它位于中心的位置,易于查看和点击。

你必须承认,并不是每个用户都能够坚持滚动到整个页面的界面的结尾。你需要在页面中插入一些CTA按钮,让用户可以在不同的位置参与交互,达到他们想要的结果。

结语

虽然长滚动页面已经不再是什么新鲜的东西,但是它的UX设计和交互模式依然还在不断成长,逐渐成熟。现如今,设计师和网页设计相关的社区依然在探讨它的利弊,作为设计师,你应该仔细衡量你的目标,再选择是否使用长滚动网页设计。

【这些趋势好文,让你的设计走到用户心里】

  1. 《这3种独特的趋势,能让网页设计增色不少》
  2. 《2017年最后几个月,网页设计师值得注意的趋势》
  3. 《这3个流行趋势虽然好,但依然要注意这些细节》
  4. 《看了那么多的设计趋势,你知道怎么落地实践吗?》


本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

================ 明星栏目推荐 ================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的 知识树专栏 。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航 :国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com

作者:优设-UISDC
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座,聊设计,找素材,尽在优设网