最专业的代练平台开发!

资讯热点
抓住这7个键并创建长滚动页面,让人们想要停止

发布时间:2021-9-28 分类: 行业动态

第一个屏幕作为设计的焦点不足以满足当今的设计需求,有时你必须设计一个长滚动的单页来携带足够的内容,保持用户的注意力,让他们在滚动和信息中获得足够的内容。

使用长滚动网页确实可以提高内容的效率。这种简单的交互方式本身就吸引了用户。但是,如果您想设计一个足够好的长滚动页面,纯粹的视觉设计是不够的。如何让用户在连续滚动过程中更好地吸收信息是设计师需要仔细考虑的。在今天的文章中,让我们探讨使长滚动页面更好的七种策略。

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

Yyiyachts

无论设计如何,网页核心内容的质量都是首要的。无论设计有多好,它都无法掩盖内容的空白和质量,因此我们必须首先拥有高质量的内容。同时,内容必须与整体设计有效匹配。有几种方法可以帮助您创建出色的内容:

将您的内容变成一个迷人的故事。

高分辨率,高品质的视觉内容,如高清照片,视频和精致插图。

为用户提供滚动的理由(例如将故事保持在关键位置&“未完成”)。

控制选项的数量。让用户面对尽可能少的选择。不要让太多的选择给用户带来压力。尝试每个部分只使用一个号召性用语副本或按钮。

使用好奇的文案。视觉效果可以给人留下良好的第一印象,但是好的内容,迷人的副本甚至更好。尝试使用动词和匹配沉浸式的故事。

  2、构建视觉主题

Serioverify

清晰的风格,清晰的主题可以帮助用户更好地理解故事或页面内容,带来身临其境的体验。主题可以与诸如箭头,分隔线或其他引导视觉元素的视觉提示组合,以帮助用户更清楚地理解内容之间的关系,并且在浏览过程期间更好地在内容之间导航。

可视化的主题设计和合理的视觉引导机制使长滚动网页能够更好地为您的网站和内容提供服务。同时,您还需要注意数据的变化。在使用长滚动页面之前,用户的保留率是否更高?用户的主要互动内容是否已更改?是否达到了预期的转换率?等等。

如果视觉设计对整个长滚动页面没有帮助,则需要考虑主题是否影响内容的呈现,或者是否与用户群匹配。

  3、令人愉悦的交互

Beatrate

长滚动网页设计通常会创建一种身临其境的用户体验,这主要归功于令用户满意的各种交互。

从运动效果到旋转木马,从视差元素到美丽的动画,微互动和可触发的宏观互动创造了令人信服的体验。与上面的Beatrate网站一样,设计师添加了许多互动元素,包括视频,滚动动画,悬停效果,旋转效果和旋转木马,这使整个互动更加完美。

每个区域都使用独特的交互,这些交互对应不同的动画效果。这也是因为他们的差异,用户每次滚动和查看时都会发现不同的东西。

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

Fitbit

长卷轴页面在移动和桌面两方面都很好用,这也是设计师喜欢它的原因之一。

许多用户实际上更喜欢滚动而不是点击,而在移动端,这种交互的趋势更加明显。使用长滚动页面,浏览信息的体验更加顺畅。

使用各种滚动效果和技术,如视差效果,颜色块屏蔽和混搭排版(如拼接文本,视频,图像等,以减少用户浏览负载),以保持整个设计流畅。通过滚动触发的视差效果和滚动动画,用户的参与和乐趣得以维持,鼓励用户继续滚动。

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

Disasterartist

在长滚动页面中,某些内容需要快速滚动,而某些内容需要用户仔细阅读并逐步阅读。这些长滚动和短滚动内容应交替出现并且分段匹配。

例如,大图片易于消化,用户将快速滚动,包含文本的内容通常要求用户停止并滚动该行。您需要匹配这些不同的内容长度,这不仅使交互更富有节奏,而且让页面更加平静地加载。

 6、为用户提供路线图

乐杯

长滚动页面的一个非常实际的问题是导航和视觉提示,用户需要知道他们在哪里浏览以及他们离页面顶部的距离。

路线图和导航非常重要。目前常见的模式如下:

浮动导航

使用小点或其他替代元素来告知用户进度

使用箭头和符号告诉用户下一步该做什么

快速跳转到按钮的开头和结尾

 7、设计出清晰的目标

Laborfit

长滚动页面不应无限制。在设计时,您应该能够让用户知道从哪里开始以及最终结束的位置。

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

在定义整个设计之前,您应该概述最终目标。确保整个长滚动页面的每个部分都存在以显示最终结果。查看上面的案例,页面的每个部分都包含一个带有明确指导语言的显式CTA按钮,该按钮位于中央位置,便于查看和单击。

您必须承认并非每个用户都可以坚持滚动整个页面的界面的末尾。您需要在页面中插入一些CTA按钮,以便用户可以在不同位置进行交互以获得他们想要的结果。

 结语

虽然长滚动页面不再是新的,但其UX设计和交互模型仍在不断发展和成熟。如今,设计师和网页设计相关社区仍在探索其优缺点。作为设计师,您应该仔细衡量目标并选择是否使用长滚动网页设计。

« H5混乱:如何知道如何实现 | 建立专业的企业网站如何选择专业的企业网站系统 »