Tired of
lengthy page building?
Try GemPages to create pages faster and smarter with AI-powered feature.
Back to Blog List
视差网站设计：创建视差滚动效果 [2024]
在数百万个电子商务品牌的海洋中，您的品牌需要脱颖而出。
那么，该怎么做呢？
嗯，有很多方法——但你的“网站设计”是最重要的方法之一。视差滚动是那些可以帮助你脱颖而出的网页设计技术之一。
在这篇博文中，我们将分享有关视差网站设计的见解、其优缺点，以及如何使用不同方法在 Shopify 中创建视差滚动效果的详细指南。
什么是视差网站设计？
视差网站设计或滚动效果是一种网页设计技术，其中网页设计有不同的层（背景和前景），它们以不同的速度移动，为网站访问者营造 3D 体验感。
所以基本上，当你滚动具有视差设计的网页时，前景层的移动速度比背景层或图像更快 - 并且在视觉上创造出 3D 运动感。
视差滚动如何工作？
如果你是 90 后，你可能会记得视差设计技术在计算机图形学，尤其是视频游戏中应用的美好时光。
在这些图形视觉效果中，移动速度较快的前景图形（例如汽车）被用在缓慢移动的背景图形（例如建筑物或树木）前面，整个设计即使在 2D 场景中也会产生“深度错觉”。
维基百科给出了一个很好的例子，说明了当时如何创建视差滚动场景：
此外，当我们观察移动物体时，距离我们较近的物体似乎比距离较远的物体移动得更快。视差滚动效果也使用了相同的感知概念。
长垂直或水平图像的背景层要么保持静止，要么移动速度相对较慢。文本或图像的前景层移动速度要快得多。因此，网站设计创造了一种身临其境的视觉体验。
以 1 美元的价格开始在 Shopify 上销售
从免费试用开始，然后第一个月只需 1 美元
您应该使用视差网站设计吗？
首先，在您的网站上使用视差滚动取决于您的品牌风格和个性。但这不仅仅关乎视觉吸引力。您必须考虑与此设计技术相关的多个方面。
让我们简要了解视差网站设计的所有优点和缺点：
使用视差网站设计的优势
-
鼓励更长时间的参与：
当视差网站设计与优质内容相结合时，它可以让您的网站访问者长时间探索您的内容。因此，它增加了用户在您的网站上停留的时间。
-
增强视觉吸引力：
创建视差网站设计可以让您的 Shopify 商店获得类似 3D 的沉浸式体验，并使其具有视觉吸引力的设计。
-
帮助更好地讲述故事：
讲故事在电子商务中起着至关重要的作用，可以为您的品牌建立参与度和忠诚度。视差网站设计让您能够以更具创意和吸引力的方式讲述您的故事。
-
建立更高的品牌认知度：
您的网站代表着您品牌的个性和可信度。因此，您的网站设计是建立品牌声誉的关键因素。视差网站设计可以为您的网站带来优质的外观和感觉。
使用视差网站设计的缺点
使用视差滚动设计时要小心谨慎。虽然目标可能是增强用户体验和参与度，但如果做得不正确或做得过头，也可能适得其反。
-
可访问性问题
一些有视力障碍的用户可能难以正确理解通过视差滚动效果显示的内容。此外，患有前庭障碍的用户可能会因设计元素的繁忙移动而感到头晕。
-
对 SEO 的潜在影响
虽然关于视差设计对 SEO 的影响存在不同意见，但它可能会因页面加载速度加快而对 SEO 产生负面影响。此外，如果内容元素无法正确访问，它可能会给搜索引擎爬虫带来问题。
-
复杂性导致的混乱
虽然创建视差设计的目的是为了让用户保持参与度，但如果设计包含太多元素，可能会让用户感到困惑。因此，设计不佳的视差网站也可能对用户体验产生负面影响。
准备好提升您的 Shopify 店面了吗？
使用 GemPages 页面构建器将您的店面提升到新的水平。提供免费计划。随着规模的扩大而升级。
如何在 Shopify 中创建视差滚动效果
有多种解决方案可用于创建视差滚动效果。因此，我们将分享多个指南，介绍如何为您的 Shopify 商店创建视差网站设计。
解决方案 #1：使用 GemPages 创建视差网站设计
在两种情况下使用GemPages可能是一个好主意：
- 假设您已经在商店中安装并定制了主题 - 并且您不想仅仅为了获得视差滚动功能而更改当前主题。
- 您刚刚开始开设一家新的 Shopify 商店，并且想要利用一套商店设计功能以及视差滚动效果。
GemPages 是 Shopify 最受欢迎的页面构建器应用程序之一，拥有4,434 条评论和 5 星评分中的 4.8 星。
GemPages 让您可以使用其易于使用的可视化编辑器、AI 驱动的布局以及专业设计的模板库来设计您的商店。
步骤 1：安装 GemPages 应用程序
如果您的商店尚未安装 GemPages 应用程序，请使用给定的链接转到 Shopify App Store 中的应用程序，然后单击“安装”按钮继续。
检查访问权限并再次单击“安装”按钮。该应用程序将在几秒钟内安装完成。
安装完成后，您将进入 Shopify 管理中心内的 GemPages 仪表板。您会在顶部看到一条通知，提示您在主题中启用 GemPages。
点击“打开 Shopify 编辑器”按钮。然后，您将被重定向到 Shopify 编辑器，并且该按钮会在应用嵌入部分自动打开。只需点击保存按钮即可完成操作。
现在，GemPages 已准备好按照您想要的方式构建您的商店页面。
第 2 步：开始设计你的视差网站
您可以从头开始设计商店页面，也可以使用 GemPages 库中提供的模板。为此，请单击“创建新页面”选项卡并选择版本。我们将使用最新版本 —版本 7 。
现在，您将看到“从头开始”选项以及基于商店页面类型的不同模板。
如果您想加快设计流程或创建新模板，您可以选择相关模板 - 无论您喜欢哪种模板。例如，我们采用了“Gem Blender”模板。
现在，在左侧边栏的“部分”和“元素”选项卡上方的搜索栏中输入“视差” ，您将看到不同的视差媒体/设计元素。只需根据需要拖放设计元素并自定义您的页面即可。
就是这样！
您可以在短时间内创建具有视差设计的令人惊叹的商店页面，并在准备好时发布它。
步骤 3 [可选]：创建视差滚动主题部分
您可以使用 GemPages 通过两种不同的方式将视差设计风格融入您的网站：
- 使用 GemPages 编辑器进行设计时，直接将视差设计元素拖放到您的页面。
（我们已经在步骤2中讨论过这一点。）
2. 创建视差主题部分（具有不同的样式）——如果您想使用 Shopify 的原生编辑器，这可能会有所帮助。
注意：如果您想使用 GemPages 设计商店页面，则不一定需要创建主题部分。但是，如果您想使用 Shopify 编辑器，创建主题部分可以帮助您随时随地轻松重复使用视差部分。
要创建视差主题部分，请单击第二个选项卡—— “创建主题部分” 。
为主题部分指定一个特定名称，以便您可以在 Shopify 主题编辑器中快速识别确切的视差部分。如果您计划创建多个视差主题部分，这可能会有所帮助。
现在，按照我们在步骤2中看到的类似步骤进行操作：在左侧边栏中的“部分”和“元素”选项卡上方的搜索栏中输入“视差” ，您将看到不同的媒体/设计元素。
从那里拖放视差设计元素并开始构建视差主题部分。创建主题部分后，点击“发布主题部分”按钮。
现在，转到 Shopify 主题编辑器。单击左侧边栏中的任意“添加部分”按钮，您将能够看到新创建的视差部分以及其他标准主题部分。
现在您也完成了这一步。
您已设置视差主题部分，您可以随时使用、重复使用或重新设计。自定义整个页面并预览以查看其外观。
一旦一切看起来都不错，您就可以发布该页面。
GemPages 定价计划：
GemPages 的免费计划让您可以轻松开始设计您的第一个页面 — 无需信用卡。所以，没有理由不尝试一下。
解决方案＃2：使用主题创建视差网站设计
Shopify 主题商店拥有 200 多个主题库。如果您希望滚动效果成为设计策略的关键组成部分，您可以考虑安装视差 Shopify 主题。
步骤 1：确定视差设计的主题
在所有 Shopify 主题中，我们推荐以下几个付费主题，因为它们支持视差网站设计。
让我们详细了解一下每一个：
Shopify Parallax 主题 #1 — Parallax
Parallax 是 Shopify 商家广泛使用的主题之一，并且也拥有令人印象深刻的好评率。
在 244 条评论中，96% 的评论是正面的。
该主题的一次性价格为 240 美元。
视差主题的主要特点：
- 多种设计选择和灵活性：
该主题带有全尺寸视差图像、幻灯片和视频。您甚至可以为推荐和特色促销创建视差设计。
- 以转化为重点的结帐：
借助促销横幅和粘性下拉菜单帮助优化转化率。此外，滑出式购物车和快速购物等功能可以吸引客户完成结账。
- 多种设计模板：
该主题有四个不同的模板，分别名为阿斯彭、马德里、维也纳和洛杉矶。
Shopify Parallax 主题 #2 — Shark
Shark 是一个相对较新的主题；但是，它看起来非常有前途。截至撰写本文时，它只有两条评论，而且都是正面的。
该主题的一次性价格为 210 美元。
鲨鱼主题的主要特点：
- 现代设计风格：主题模板设计精美，为您的商店带来现代外观。
- 出色的客户支持：使用此主题的 Shopify 商家对他们从 Shark 支持团队获得的出色支持给予了积极的反馈。
- 两种设计模板：
该主题有两个不同的模板，分别名为“Bright”和“Decor”。
第 2 步：安装 Shopify 主题
查看完这两个 Shopify 主题后，请将其安装在您的商店中，以在 Shopify 编辑器中体验它。
出于测试和演示目的，所有 Shopify 主题均可完全免费使用。仅当您发布付费主题时才需要付费。
因此，您可以尝试这两种主题，并查看它们如何与您的品牌和设计元素一起出现在您的商店中。当然，这将是一项耗时的活动。
但请记住——理想情况下，您只会购买一次主题，然后至少使用几年。所以，为什么不花点时间测试和预览它们呢？
步骤 3：自定义主题
根据您的测试和预览，确定一个主题并开始自定义它。
确定网站上真正适合使用视差滚动效果的区域或部分。请记住 - 不要过度使用。
由于您正在安装新主题，即使您之前有一个自定义主题，也需要完全重新设计您的商店。
了解更多： Shopify 主题定制：初学者完整指南
定制并构建在线商店后，请在实时商店上发布主题之前预览更改的呈现方式。
这就是这个方法！
现在，让我们继续下一个：
解决方案3：使用自定义编码创建滚动网站设计
此方法需要您编辑现有主题模板的代码。因此，您（或您团队中的某个人）必须具备编码知识和经验。
您甚至可以在互联网上搜索现成的视差滚动效果代码片段。例如，您可以尝试使用CodePen搜索代码片段。
此外，您还可以找到视差媒体等数字产品，以便在 Shopify 主题中嵌入代码片段。此视频介绍了如何使用该产品。
解决方案#4：聘请Shopify合作伙伴或专家来创建视差滚动效果
如果你没有编码经验或者没有时间自己做，你可以找一个专业人士来帮助你做。
您可以在多个平台上寻找电子商务专家，他们可以根据您的独特需求帮助您设计 Shopify 商店。
例如，您可以从以下平台聘请 Shopify 合作伙伴或专家：
CRO（转化率优化）专业人员可以为您提供设计和开发服务，不仅可以增强您网站的设计，还可以优化转化率。
Shopify 合作伙伴目录是 Shopify 合作伙伴的数据库，他们可以为您提供各种服务，包括商店设计、定制开发、故障排除等。
- Fiverr 和 Upwork 等自由职业平台
Fiverr 和 Upwork 是全球最受欢迎的自由职业人才招聘平台之一。您可以搜索网页设计师和开发人员，并选择符合您的预算和要求的人员。
- LinkedIn 上的个人自由职业者或机构
LinkedIn 也是聘请专业网页设计师和开发人员的绝佳平台。但是，与我们刚刚讨论过的其他平台相比，您可能需要付出更多努力才能找到合适的专业人士。
利用引人注目的商店页面提升销量
免费试用 GemPages 并开始创建真正可转换的商店页面。无需编码。
视差滚动示例
以下是一些视差滚动网站的示例：
Savage 健身配件
Savage Fitness Accessories是由 Daniel Chiodo 创立的，他通过定制绳索解决了健身房跳绳经常断裂的问题。
现在，该品牌由他和他的妻子兼联合创始人共同领导——他们已将其产品范围扩展到各种训练装备和健身服装。
该品牌使用Shark主题在其主页和产品页面上创建视差滚动设计。
德拉索斯集团
Delassus Group是一家摩洛哥品牌，生产西红柿、葡萄、鳄梨等零食水果以及鲜花。
该品牌的网站采用独特风格的视差滚动，创造了令人着迷的浏览体验。
裸体集市
Naked Faire是一个提供由纽约艺术家手工制作的珠宝产品的品牌。
该品牌在其主页上添加了视差设计元素，设计风格简洁、干净、简约。该品牌使用视差主题。
Empath 设计
Empath Designs是由“数字艺术家和灵气大师” Germaine 创立的品牌。Germaine 的目标是激励人们实现个人成长和转变。
该品牌提供各种产品，包括墙面艺术、服装、冥想套件、家居和生活用品等。这家 Shopify 商店使用Parallax主题在其主页和“关于”页面上创建视差滚动体验。
关于视差网站设计的最终想法
经营电子商务业务时，您只需要习惯定期对网站设计进行升级和更改。
新颖独特的设计会吸引顾客。但是，您需要注意视差设计的正确使用。此外，还要考虑您希望将其保留在您的网站上多长时间。
从长远来看，了解它是否适合您的商店的最佳方法是衡量和分析您商店的数据、性能以及网站访问者与网站的互动。
测量、观察、分析——并采取相应的必要措施。
还没准备好承诺但仍想尝试一下？
没问题！开始使用 GemPages 的免费计划。探索可以为您的商店创造奇迹的精彩功能。
视差网站设计常见问题解答
What is parallax on a website?
Parallax is a website design technique in which multiple layers are used, that move at different speeds, to create a sense of depth and faux-3D effect. This parallax effect gives an immersive browsing experience when visitors scroll the webpage.
What are the disadvantages of a parallax website?
Although parallax website design is considered beneficial to building engagement with website visitors, it may have the following disadvantages, especially if not done right: 1. Accessibility issue for visually impaired users. 2. Negative impact on the SEO of your site. 3. Confusion for users due to busy design when it’s overdone.
Is parallax good for SEO?
Parallax is considered one of the factors that may negatively impact your site’s SEO. While you can use it to enhance the visual appearance of a certain section of your website, you should be mindful of its potential risk for your site’s SEO.
Why is parallax good?
Parallax could be a good design element from certain aspects. For example, the parallax design style enhances the storytelling on your web pages and immerses the users in your story. Also, with aesthetically pleasing website design, you can build a high perception of your brand.
Can you create a parallax website on Shopify?
Yes, you can. There are multiple ways to create a parallax design on your Shopify store: 1. Create a parallax theme section using GemPages. 2. Install a theme like Parallax or Shark that supports parallax design. 3. Custom code your theme on your own or with the help of a developer.
