从横切式网站的实例中汲取灵感

水平滚动的网站似乎违反常规。它们似乎不像垂直滚动网站那样用户友好,但事实是横向滚动可能非常适合您的网站设计。 创建一个水平滚动网站是一个开箱即用的思维练习。这种 […]

2018年9月12日

水平滚动的网站似乎违反常规。它们似乎不像垂直滚动网站那样用户友好,但事实是横向滚动可能非常适合您的网站设计。

创建一个水平滚动网站是一个开箱即用的思维练习。这种设计选择是一个小但不断增长的趋势。这可能有些不同,有时这是您的网站设计可能所需要的。

然而,使用水平滚动布局创建一个有效且可用的网站是一个挑战。遵循这些技法和诀窍,你就能知道这些布局是否适合你,如果适合,就能弄清楚如何制作一个水平滚动的网站。

侧向滚动会用于吸引人们眼球

长期以来,用侧向滚动布局(也称为水平导航)创建一个网站一直是一个有争议的网页设计技术。它一直被认为是最伟大的网页设计错误之一。

然而,自互联网最早的迭代以来,横向滚动一直存在。它只是最近才开始强势回归。一些人认为它们是最现代和最新的网页设计布局。

是什么促使这种态度改变?好吧,有了平板电脑,滑动动作让横向滚动网站能够有效地卷土重来。这种滑动动作使得水平滚动更加可行和交互友好,甚至更不违反直观感受。

横切式网站有其优势和挑战。他们可以创建一个更迷人,有趣的布局。它们通常会吸引用户盯住您的网站一段时间。

但是,这意味着你的水平滚动网站需要设计得很出彩。您不能只是将其设置为使用侧滚动布局。你需要仔细地考虑它。它不会只是一种简单的网站设计形式。

您确定要使用水平滚动吗?

在开始这条路之前,请确保横向滚动适合您。如上所述,这种布局是非常有争议的。这是一个主要的争议话题,并受到许多用户体验倡导者的不满。使用水平滚动网站布局的唯一真正原因是为了吸引用户的注意力。

 

用户体验专家Jakob Nielsen最近的一项研究显示,只有1%的用户会查看最初被横向滚动隐藏的信息。但是,当您正确设计其中一个网站时,它会创出独特而有趣的用户体验。通过侧滚动布局,您可以使用视差效果获得出色的效果。

横向滚动网站如何为用户体验带来极大的好处

水平滚动网站有四种特定情况可以创建一个良好的用户体验:

  • 当显示多个图片时,如设计投资组合或摄影网站。
  • 当在一个不容易一目了然的大空间中显示信息时,就像地图一样。
  • 当显示幻灯片或离散部分的信息应用程序。
  • 当以这样的方式显示大型商品或产品目录时,可以轻松显示不同的产品类别。

对于某些网站功能,横切式网站设计比其他网站功能更好。画廊网站经常使用它,所以很多投资组合网站也是如此。这是一种有趣的方式,允许网站访问者滚动浏览一组图片。

偶尔,超小众零售商也会使用这种方式让自己看上去焕然一新。一些更典型的零售商则使用它来显示他们想要突出显示的特定产品的功能。

横切式有什么样吸引力?

跨设备的一致性——横切式网站允许在移动设备和计算机屏幕上保持一致的外观。水平滑动在移动设备上变得非常简单。

归根结底,许多应用程序都在使用它,是因为以移动为中心的设计越来越重要,所以选择使用水平滚动作为其网站的基础来节省资源和签署时间。但这有一个问题。长期以来,水平滚动在桌面网站上很少见,因此用户可能无法直观地意识到,他们必须在屏幕上滚动而不是向上和向下滚动才能查看更多内容。

这可能导致一种适用于所有人的设计方法产生反效果。这里的关键方法是,当用户在当前使用的设备上浏览网站时,他们更可能考虑设计一致性。

当他们使用不同的设备时,他们不太可能准确地记住他们是如何与网站互动的。如果你想节省资源,或者你希望你的网站能在移动设备上被更多的浏览,一致的水平滚动可能是一个更好的选择。然而,如果您希望用户在桌面屏幕上查看它,您可能需要创建一个横向滚动移动网站和一个垂直滚动网站。

浏览非关键内容——并非所有内容都至关重要。这些辅助信息可以以不同的方式进行通信,包括示例图像的照片库。这个信息对于水平滚动布局非常有用。

它允许用户查看内容样本,并允许他们选择滑动或单击以了解更多信息。如果网站访问者不滚动整个幻灯片,那就没关系。您只需要确保没有必要的内容隐藏在水平滚动条后面。

节省垂直屏幕空间 ——不是在一个非常长的页面上同时显示所有网站的内容,而是向用户介绍更小,更易消化的信息块。横向滚动网站更灵活,可以很容易地扩展(一旦你了解了最初的设计结构)。您可以垂直和水平添加内容。

侧向滚动的控制问题

设计任何网站的目的是确保网站设计不会让用户思考。内容应该是他们的大脑所集中的地方。浏览网站和浏览内容的过程不应该是用户的脑力投入所在。

对于用户来说,水平滚动网站并不像垂直滚动网站那样直观。他们往往不得不考虑一下。网站的移动方式应该很明显。包括网站如何运作的明显图标。

使其对你的用户更加友好。您需要考虑滚动条的外观,菜单的位置以让及用户如何知道哪些特定信息是真正重要的,例如号召性用语。

许多水平滚动网站依赖于浏览器滚动功能。这不一定是最好的方法,但你也不应该完全放弃浏览器的滚动条。没有它,用户就没有指导方针。

它创造了另一个跳跃的视角。相反,在水平滚动条上加入一系列导航辅助工具。这包括可以在站点上缩放的箭头和大型滚动条。它们将使用户体验更加流畅和舒适。

优秀横切式网站设计的建议窍门

精心策划

任何网站设计都是如此,而不仅仅是水平滚动的网站。它对于水平滚动具有特殊意义,但是因为它很容易弄错。不要懒惰,没有计划的就开始工作。

花点时间创建实体模型和纸质样本。决定在哪里以及如何将所有的东西组合在一起。有很多事情要考虑。特别是因为横向滚动网站设计不是那么常见,它需要比垂直网站需要更多的思考。

水平导航

水平滚动网站用户面临的最大问题是它们的导航方式。即使它们看起来很棒,但如果游客发现他们在网站上浏览十分困难,那么最终将会赶走访问者。

水平滚动网站的导航应该既明显又美观。它的外观和行为都应该符合网站访问者的期望。他们不应该点击侧边的滚动条并滑动它。很多用户会直接使用鼠标滚轮或箭头键来滚动。

大多数人忘记了,你可以点击滚动条并使用它来浏览网站。大多数人使用滚动条作为他们在网页上的位置的可视目标,特别对于年轻人来说,他们更有可能成为水平滚动网站的目标受众。

永远不应该尝试删除滚动条。人们确实知道它的用途,并发现它很有用。当外围设备发生故障,这是一个很好的备份,仍有一些人会使用它。

总的来说,您的导航应该易于用户找到,也应当易于使用。需要确保它非常直观,所以没有人觉得他们必须弄清楚如何在我们的页面上移动。如果这需要太长时间,访问者就会离开。

基本导航

坚持优秀网站导航的基本原则。它应该清晰可见且易于使用。菜单通常是个好方法。它考虑到用户知道他们在哪里,他们可能感兴趣去哪里。

不要舍弃让他们滚动浏览页面来找到它。这为您提供了两全其美的体验。他们可以享受您独特的水平滚动网站设计,并能够毫无困难地自由浏览。

利用标签

对于用户而言,横切式网站不像垂直滚动网站那样直观。免费且智能地使用标签来帮助他们。这将有助于避免使网站过于混乱并赶走访客。

让你的访者知道页面上的项目是什么,而不是让他们点击以找出它。让他们从你的网站获得他们真正想要的内容,而不是花时间弄清楚您的网站是如何运作的。

用户确实想要清楚地表达出来。当他们不知道什么事情的时候,他们不想让自己感觉很懵懂。他们需要能够弄清楚网站上发生了什么,并且能够快速地做到这一点。

不要忽视网站内容

让你的横切式网站设计本身成为诱惑。它们往往被用在更时尚的网站上,尤其是在图片比较多的网站上。当然,这是可以接受的,但是您也应该记住,您的站点不仅仅是一个非常规设计的练习。

“看看所有这些很酷的东西”可能很有趣,但这并不是你创建网站的原因。您需要确保所有关于hat站点的相关信息,包括关于业务、产品、服务、如何联系您、订单表单等的信息。

一个水平滚动网站,虽然很酷,但却无法弥补重要内容的不足。内容为王。你需要“传染性内容”来吸引访问者回到你的网站。这是他们真正采用水平滚动网站设计的唯一方式。

编码


编码比横切式设计更适合垂直滚动设计。在这种情况下,它更直观。它更舒适,设计师也更习惯。因此,编码出水平滚动网站更加困难,并且需要更多的努力。你甚至可能都不知道该怎么做。

有很多教程可以帮助您编写水平滚动网站。您可能需要将其分解为基本的HTML和CSS元素。学习如何为侧面滚动效果编码可能会最终成为一个项目本身 ,这是在开始设计水平滚动网站之前需要考虑的问题。

关于设计水平网站的思考

水平滚动网站可能非常适合您的网站设计。它有很多挑战,并不总是正确的,但它是创建网站显示信息的一种不同且新颖的方式。

文章来源:https://www.designyourway.net/blog/web-design/horizontal-scrolling-website/

翻译:刘艺

责编:洪宇轩

 

 

 

 

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注