网页设计和视差滚动

本章讨论网页设计的概念以及在网页设计中使用视差滚动的优点。

网页设计背景

进入20世纪以来，纸质媒体在数字媒体的推动下陷入了激烈的竞争。数字媒体包括我们在互联网上看到的内容以及随之而来的相关杂志。

您作为每周/每月订阅的一部分获得的时事通讯也包含在数字媒体中。首先，数字媒体严重依赖移动和桌面设备。当您可以在移动设备（手持设备）和桌面设备上查看内容时，情况会有所不同。内容在任一设备上的显示方式、内容设计的特定风格都在发挥作用。

这种设计风格被称为网页设计。从设计或编码的角度来看，当网页设计师开始构建网页时，他/她也会考虑移动设备。

根据维基百科，网页设计 涵盖了网站制作和维护中的许多不同技能和学科。其中一项技能是为用户设计有影响力的体验。网页设计迎合了这种体验，提供了一种有组织的方式来排列页面内容，并为它们提供不同的样式。

网页设计包括 - 界面设计、图形设计和使用一定标准编写代码。这项工作可以由一个人或一组人来完成。

市场上有许多工具可以使这项工作变得容易，但是，创建网页的外观取决于一个人的创造性技能。

现代网页设计

随着技术的发展，知识出现爆炸式增长。互联网已经成为一种事物，它极大地提高了我们的生活质量。在任何特定时刻，普通互联网用户正在处理越来越多的信息。该信息可以是台式计算机上的网站形式，也可以是手持设备上的信息；平板电脑或手机。

尽管有如此多的信息试图吸引用户的注意力，但很明显，作为一个设计 Web 体验的人，只有3 秒钟的时间来传递消息。

如何处理这个问题？传递信息非常重要，因为它是任何网页设计的源头。您想要建立一个能够进行交流的网站，同时它必须吸引并让用户坚持其内容。这确实是一项艰巨的任务。

考虑到任何给定网页内容的巨大工作范围，越来越多的人正在进入网页设计的世界。创意网页设计师因其创造良好用户体验的惊人天赋而成为人们谈论的话题。网页设计师目前可能在营销/广告公司工作，或者开始自己从事网页设计。

审美吸引力是网络上特定内容的关键。这意味着网页设计师必须了解设计、颜色、间距等的原则和基础。越来越多的用户每天都能看到高质量的网页内容。显然，人们会将当前网页或网站与几小时或几分钟前访问过的网页或网站进行比较。内容的排序加上良好的图形和颜色使许多独立的横幅/页面在互联网上流行。

例子

让我们以一个简单的图形为例。互联网上有很多图形，称为模因。它们是简单的图形交换格式 (GIF)图像，图形中嵌入了一些文本。这些模因基于世界某些地区最近发生的事件而在互联网上流传。如果我们看这个例子，他们唯一的吸引力就是图形和一些相关或不相关的文本。

尽管如此，它仍然如此受欢迎，这让人们开始思考互联网上的惊人可能性。

因此，要使网页设计有效，创意和传达信息的方法都起着重要作用。

需要注意的是，一个成功的网页是网页设计和网页开发的结合。按照目前的市场趋势，除了网页设计师之外，网页开发人员是团队中必须具备的。网页设计师总是会寻找灵感并利用他/她的创造力来创建图形和相关的配色方案。而网络开发人员将利用他/她的编码技能将图形和配色方案呈现在网站上。

网页设计师还应该具备编写代码的知识，以使预期的图形或配色方案可供网页开发人员使用。像记事本这样的简单应用程序中的简单代码可以帮助网页设计师在网页开发中占据主导地位。

使用视差滚动

视差滚动属于网页设计师和网页开发人员的工作边界。网页设计师可能会使用 InVision、UXPin 等工具创建视差滚动效果，以向网页开发人员传达滚动时的预期Behave。此外，网络开发人员将利用他/她的技能来创建视差滚动效果。这可以通过不同的 JavaScript、CSS 和 jQuery 技术来完成。后续章节将详细介绍每种方法。

根据上一节中指定的定义，视差滚动是一种当滚动时背景内容以与前景内容不同的速度移动的技术。

The Urban Walks网站展示了一种创建视差滚动效果的简单 CSS 技术。

城市漫步

如上图所示，滚动两次后，屏幕中央的手机内容就会发生变化。另外，在第一卷轴上观察，手机的背景会发生变化。

这种转变给你一种感觉，手机一直在原来的位置，而当你向下滚动时，背景正在发生变化。这种效果称为视差滚动效果。您知道您正在向下滚动它，因为屏幕的最右侧有一些点形式的屏幕指示器。

城市漫步滚动

视差滚动的首次使用是在旧电脑游戏中。当角色移动速度比背景快时，固定背景图像的移动速度会变慢。这些游戏的一些例子——迪士尼的阿拉丁和迪士尼的狮子王。这些游戏分别于 1993 年和 1994 年推出。

虽然确实是从游戏开始的，但目前，许多网页设计师都在强调让观众喜欢他们的网站的效果。视差滚动的优点从网站扩展到移动网站。

这些网站曾经为桌面版本设计了视差滚动，现在添加了支持移动屏幕的代码。

视差滚动在 Web 和移动设备中的优势

在本节中，我们将从各个角度讨论使用视差滚动的优点，如下所述 -

从观众角度

  • 有一个与视差滚动相关的有趣元素。正如您在上面的示例中所看到的，随着用户从不同的屏幕滚动，传达数千个单词的信息变得更加容易。

  • 如果我们考虑第一次使用的用户，就会对每个卷轴产生好奇心。因此，它不仅丰富了网站的体验，而且增加了用户在第一次访问网站本身时花费更多时间的可能性。

  • 当用户对滚动感兴趣时，用户参与度的比例急剧增加。

  • 用户不必考虑找出信息的过程，因为它可以以更明显的方式获得。

  • 在某些情况下，您可以通过在屏幕上显示其他项目（例如徽标或菜单图标）的动画来讲述您所提供的产品/服务的故事。

从技术角度

  • 一旦为桌面版本实现了视差滚动，相同的框架就可以很容易地用于移动网站或屏幕。

  • 由于代码片段简单且可重复使用，如果您是营销机构或网站服务提供商公司，那么在收集新客户时变得毫不费力。

  • 了解视差滚动需要更多前端框架（例如 CSS、JavaScript 等）方面的专业知识。