视差滚动:亨茨维尔网页设计的 8 个技巧

已发表: 2020-02-10

视差滚动:亨茨维尔网页设计的 8 个技巧

2020 年 2 月 10 日| 0 条评论

视差滚动是一种拒绝消失的网站设计趋势。 向下滚动页面时,多个背景图像以不同的速度移动。 该技术创建了一种人造 3D 效果,从而带来愉快的浏览体验。

网页设计师通过让背景层以比前景更慢的速度移动来实现视差滚动。 在这里,亨茨维尔网站设计专家提供了一些关于在将视差效果应用于网站时应该做什么和不做什么的提示。

1.添加视差效果

可以使用插件或 CSS 将视差效果添加到网站。 第一种方法更简单,不需要任何编码。 您所要做的就是为您的 WordPress 网站安装一个插件,例如 Advanced WordPress Backgrounds。

安装插件后,您将需要编辑要添加此效果的页面。 建议您在具有长格式内容的网页上添加此效果。 这可能是您的网站主页、登录页面或销售页面。

插件将让您选择视差效果的背景图像。 您还应该检查插件选项中的“拉伸选项”。 确保选择大的背景图像。 这很重要,否则拉伸时图像会出现像素化。

为视差效果添加 CSS 短代码比较棘手。 经验丰富的网站设计师可以将短代码添加到不同的页面。 使用自定义代码的好处是它为您提供了更大的自定义效果的灵活性。

2. 使用视差效果讲故事

添加视差效果是向在线观众讲述故事的好方法。 也称为 scrolytelling,视差滚动可用于引导式讲故事。

通过让图像以不同的速度出现或创建滑入式图层以增加效果的微妙性来讲述故事。 使用视差效果将通过创建从头到尾引导用户的进度感来吸引用户的注意力。

显示滚动是一种特殊的视差效果技术,可以帮助为您的观众创造悬念。 它涉及建立好奇心,然后在适当的时候揭示解决方案。 该效果将吸引用户的注意力,从而带来更加动态和互动的用户体验。

3.牢记主要目标

请记住,视差滚动的目的不是让您的网站看起来很酷。 添加效果的目的应该是改善用户浏览体验。 它应该有助于向用户传播信息、产生潜在客户和销售产品。

应该使用视差效果来增加客户采取所需行动的机会。 设计应与网站的总体目标保持一致。 你不应该把风格放在内容之前。 您的首要任务应该始终是以尽可能最好的方式突出显示内容。

4.避免过多的滚动

对于大多数人来说,过多的滚动是令人反感的。 如果向下滚动页面需要很多时间,大多数人会变得不感兴趣。 当页面包含大量信息时尤其如此。 所以,你应该知道有多少滚动是太多了。

建议使用固定的长滚动配置,以使某些内容保持静态,而其他滚动。 另一个最佳实践是在用户向下滚动页面时切换到新部分。

5.优化页面速度

添加视差效果绝不应该以牺牲页面加载速度为代价。 页面速度是关键的 SEO 因素之一。 由于添加许多影响层或动画而导致页面速度变慢可能会对用户体验和随后的页面排名产生负面影响。

背景和前景图像的大小不应该很大。 考虑压缩图像以提高页面加载性能。 文件越小,页面加载速度就越快。

6.超越视差

设计师在应用视差效果方面具有很大的通用性。 该效果可以与其他设计元素相结合,创造出更令人印象深刻的效果。

一个例子是放大滚动,它将观众的焦点转移到屏幕上的特定项目。 将放大滚动与视差滚动效果结合起来将使页面动起来。 设计很微妙,并逐渐保持用户的注意力。

Fade-in-scroll 是另一个选项,当与视差滚动结合使用时,它将创造一种新鲜的氛围。 当用户向下滚动页面时,该效果使图像看起来更加丰富多彩。 这是另一种吸引用户注意力和兴趣的方式。

7.保持简单

视差滚动最重要的提示是保持简单。 如果你试图过度使用它,它很容易从有趣和吸引人变成恼人。

过于复杂的效果会导致负面的用户体验。 通过保持网站设计简单和整洁来坚持下去。

添加视差效果的目的不应该是为了惊艳,而是为了激发灵感。 您应该添加效果来激励人们采取行动。 使用视差效果,您应该将用户的注意力吸引到所需的操作上。 使用效果的目的是使其既有效又具有交互性。

8. 不要忘记 CTA

用户在滚动到页面末尾时会期待一些东西。 您应该在最后创建一个大胆的号召性用语 (CTA),以鼓励用户采取行动。 这是您让读者对您的产品或服务做出承诺的机会。

为网站创建视差效果以产生积极的印象并保持互动和参与并不容易。 设计师必须使用正确的语法来创建效果良好并给人留下良好印象的视差效果。 关键是要在酷和用户喜欢的东西之间找到平衡。

您应该为您的网站聘请经验丰富的亨茨维尔网站设计师。 专业的网站设计师将结合将大大改善用户浏览体验的功能。 为经验丰富的设计师支付更多费用将是值得的,因为您将获得一个给在线用户留下最佳印象的专业网站。

IG Webs – 网页设计、SEO 内容服务、网站管理等! 今天就给我们打电话索取免费报价!

我们在全国范围内提供从初创企业到大中型企业的响应式网站、移动网站和网站管理。 在 IG Webs,成功意味着网站以有趣和有效的方式展示客户的业务和想法。 网站设计、本地营销、SEO 内容服务、网站管理、电子商务等等! 立即致电我们或使用我们的免费报价表 – 让我们为您报价并开始您的项目。 你会很高兴你做到了!

您的在线业务成功就是我们的成功!

0