Anonim

悬停在网站上已经使用了多年,它是一种在不触发操作的情况下向访问者提供信息摘要的方式。 随着智能手机和平板电脑逐渐占领互联网,我们在设计网站时必须给予他们更多的关注。 由于触摸屏无法处理悬停,因此我们需要研究悬停效果的替代方法。 如果您要建立自己的网站,或者没有资源聘请专业的Web设计人员,那么本教程适合您。

您可以使用触摸屏管理悬停效果,但可能有些尴尬。 您最好将它们完全设计出来,然后完全使用其他东西。 如果您打算在桌面网站上使用它们,通常可以使用三种方法来在移动网站上悬停效果:

  1. 完全删除它们,并用主要操作替换它们。
  2. 添加一个辅助菜单,您可以在其中点击一次以获取悬停效果,再点击一次以获取主要操作。
  3. 将悬停信息放在其自己的页面上。

所有这些都可以在触摸屏和台式机上很好地工作,但是需要进行一些设计调整才能在现有设计中实现。 如果您有技能,也可以使用JavaScript或聪明的jQuery代码来解决它,但是如果您想自己解决所有问题,使用设计替代方法可能比使用代码更好。 如果要探索悬停效果的代码替代方法,请访问此页面。

从设计中移除悬停效果

除非您可以聘请自由网页设计师来帮助您,否则最好完全删除悬停效果。 当然,它们看起来很整洁,可以提供有用的补充信息,但是总有其他方法可以达到相同的效果。

您可以将菜单操作保留为主要操作,并在页面上的其他位置包含补充信息。 您可以使用分组讨论框,弹出窗口,增加描述符内容,以达到您要提出的观点或其他目的。 如果您没有实现jQuery的技能,那么这可能是最简单的选择。

添加辅助菜单

第二个菜单包括第一个点击,它将模拟悬停效果。 您可以在菜单中包含信息,并在同一元素中显示第二个菜单。 第二个菜单是实际选择,就像在桌面上一样。 第一次按下模拟鼠标的悬停,第二次按下模拟用户执行主要操作。

这是悬停效果的一种很好的替代方法,但是受屏幕尺寸的限制,并限制了可以添加到效果中的信息量。 悬停效果受其性质的限制,但在移动设备上受您正在处理的屏幕空间的限制更大。 如果您真的想以非标准的方式包括补充数据,那就可以了。

将悬停信息放在其自己的页面上

也许更简单的选择是将悬停信息包含在其自己的页面中并带有文本链接。 这简化了您的菜单,并使导航保持简单明了。 超链接可在所有设备上使用,您会获得一个额外的页面,用于网站大小和SEO。 不利的一面是,您必须将补充内容至少增加300个单词左右才能使它起作用。

只要您可以足够仔细地填充信息,以使它很好地阅读并为读者增加价值,我个人认为这是最好的选择。 决定将那些链接到补充数据的位置取决于您,并且将取决于您的设计,但是额外的页面会为您提供额外的机会来添加号召性用语,添加您的电话号码,电子邮件地址和任何可能使用的其他信息进行销售。

保持悬停

如果要在主网站上使用某种悬停效果,则需要将其用于移动网站或移动版本中。 有切换菜单替代方案或JavaScript解决方案,但需要专家来实施。 此页面讨论了您想进一步探索的替代方案。

当您自己开始或建立第一个网站时,最容易陷入的陷阱之一就是为自己而非受众群体设计。 您当然必须设计自己喜欢的东西,但是在考虑可用性时,您必须优先考虑受众。 您还必须考虑它们将使用的设备以及它们最有可能与您的网站最有效地互动的方式。

如果您的听众还很年轻,他们将使用移动设备。 如果他们使用移动设备,则悬停效果和其他类似的设计选项不是您的最佳选择。

3种在移动设备上悬停效果的替代方法