• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 抓住这7个关键,创造让人欲罢不能的长滚动页面

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

作者:CARRIE COUSINS 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含优秀网页设计,单页滚动,最佳实践,经验分享,长滚动页面等相关知识,CARRIE COUSINS希望在学习及工作中可以帮助到您

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

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

优设大课堂

您可能想查找下面的文章:

  • 弹出框里的设计门道,你是否都知道?
  • 遵循这7个原则,能让你的网页用户体验更优秀
  • 氛围独特情绪深沉的深色系网站,设计上有什么讲究?
  • 这3个适用性极强的网页设计趋势,在4月非常流行
  • 怎样设计,才能抓住用户稍纵即逝的注意力
  • 吃透这10个网站,你就明白了网页中留白的技巧
  • 设计出优秀的网站着陆页,这10个技巧能帮到你
  • 换了很多家公司还是在打杂,问题究竟出在哪里?
  • 也许你该注意一下影响网页设计的这5个关键指标
  • 这5个丑出新高度的网站,为什么那么多人夸

相关文章

  • 2017-08-06网页前端开发小细节
  • 2018-08-23专访三部曲!Google设计主管如何培养设计文化?
  • 2017-08-06在新窗口打开的跳转菜单 window.open使用介绍
  • 2018-08-23过去十年,我每年都至少失败一次——专访阿里产品经理苏杰
  • 2017-08-06三谈Iframe自适应高度代码
  • 2018-08-23超多版式运用手法!128张让你灵感爆发的海报设计
  • 2017-08-06符合w3c标准的html标准需要注意的地方详解
  • 2018-08-23我花了20个小时研究3个按钮,让你明白UI和UX的区别
  • 2018-08-23拍一张照片就能设计成一张海报,这种技能你想不想要?
  • 2017-08-06浅谈网页颜色的搭配技巧(前端必看)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 3+3法则!教你六步创造超酷的几何感设计
    • 更新Adobe全家桶之前,这些关键信息不要错过了
    • 去除在FireFox中点击链接时,出现虚线边框的解决办法
    • 想要搞定网页首图设计,这7个技巧帮你做得更好
    • 天猫设计师:互联网职场“向上管理”的4个心得
    • 网易严选设计师:如何提高产品思维?
    • Google I/O 大会之后,Material Design 发生了这些变化
    • 让你了解HTML及资源是如何加载的
    • 今年最火的全链路设计有实战案例了!滴滴设计团队出品
    • 页面包含img src时的重复载入问题

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有