美图欣赏 | 设为首页 | 加入收藏 | 网站地图

当前位置:电脑中国 > 网络创业 > 网页(html) >

带你梳理正在流行的长滚动页面设计

2018-06-03 20:53|来源:未知 |作者:dnzg |点击:

在内容一定的情况下,屏幕越小,页面自然就越长。长滚动界面的兴起并不是没有理由的,移动端对桌面端市场份额的挤压,可穿戴设备等小屏幕的流行,所有的这些变化都在促使这一趋势更加流行。

长滚动界面的流行促使设计师在新需求下探索新的导航模式和独到的视觉设计,故事的讲述也有了新的方式,浏览体验也将截然不同。在这样的语境下,我们可以从设计、技术和策略的角度总结出如下特征:

  • 视差滚动图片:图片素材以不同的速度运动创造出类似3D的视觉效果,为用户带来愉悦的视觉效果和颇为有效的互动
  • 屏幕尺寸分页:将长滚动页面分割成屏幕尺寸大小相同的分页,这是一种颇为有效的内容分割组织的方式,可以使页面内容更有凝聚力
  • 常驻导航:用户在浏览长滚动页面的时候容易迷失,常驻的导航栏能够让用户感受到可控性和安全感,避免迷失
  • 动画互动:在滚动过程中触发动画会为用户带来乐趣,这会让用户享受滚动的过程
  • 多向滚动翻页:这是单页滚动和长滚动页面发展这么久之后发展出来的新风尚,页面可以横向、纵向,从上下左右各种方向滚动
  • 交互信息提示:有些用户不会主动滚动页面,这个时候需要给予适当的心思提示,比如“向下滚动”的文本和箭头,避免他们迷惑。也可以使用行动召唤按钮(CTA)等设计方法来提示。

下面的长滚动页面的案例大多采用了这些设计和技术,这也是为什么这些页面会跻身今年最值得学习的网页的行列。

Twitter

作为社交网站中的巨头,Twitter的设计自是不会差。但是它更加值得注意的是,它是首个打破翻页设计的先驱,也是目前最典型的长滚动页面设计之一。对于Twitter这样的用户产生内容的网站,长滚动页面设计不仅时尚,而且实用。无限滚动加载内容不仅可以保证浏览的体验,而且有利于内容的组织。

Heart Kids NW

这是新西兰慈善组织Heart Kits 的网站。长滚动页面设计和动画结合到一起,滚动操作可以激活动画,令人惊艳的色调,凄美的意象,组织到一起宣扬拯救生命的信息。

值得注意的是,页面上并不显眼的滚动图标和着陆页上的指示文字,顶部还有常驻的悬停显示的导航栏。

(责任编辑:dnzg)
相关阅读
新锦江娱乐 关闭广告
新锦江娱乐 关闭广告