激发灵感的滑动视觉效果,和那些惊艳的网页

滑动效果在网页设计中十分重要,通过滑动效果切换页面,可以在提升视觉效果的同时,展示出比单屏更多的信息。有很多设计师觉得滑动效果已经是过去式了,然而这种观念并不正确,只是2005年后网页设计风格发展的后遗症罢了。

水平或垂直滑动可以引导用户视觉,这样的模式已经十分常见。通过滑动可以让小屏幕拥有访问完整网站内容的能力,因此它不仅没有被淘汰,反而被大力开发更有活力。下面的将为你展示它们。

 

1.滑动的6中设计方式

30006067 - design, sharing - 激发灵感的滑动视觉效果,和那些惊艳的网页

滑动效果不是为了让网站花哨而存在的,它需要能够引导用户与界面的正确交互,不然这样的设计就失去了意义。

以下是常见的几种滑动形式:

  • 垂直滑动:这是最直接的模式。长期以来用户早已养成了上下滑动来浏览页面的习惯,如果用户读完了当前的内容或对当前内容不感兴趣,即使没有任何引导,他们也会尝试着向下滑动。
  • 水平滑动:支持水平滑动的模块近期大量出现,而类似的设计也日渐增多。但用户往往需要箭头等的引导,才会想到可以使用这样的功能,在设计时需要慎重考虑。
  • 分页滑动:分页滑动非常直观,用户可以看到页面具体是怎样叠加的(如纸张这样的材料载体能够带给你的体验)。通过设计展示出前一页和后一页的交叉,用户会更乐于使用这样的功能。
  • 告知滑动:使用图片或文字,引导用户进行滑动。
  • 点击滑动:如果你希望用这种方式,可以设计一些与滑动相关的图标来刺激用户点击它们。有时通过点击滑动可以给你带来意想不到的效果。
  • 随意滑动:并没有规定滑动只能在四个方向上,只要能设计出用户易于理解的互动方式,弧线、对角线这样的滑动模式都是可以接受的。

 

2.10优秀的滑动案例赏析

你应该已经理解如何设计滑动式内容了,但在实施之前可以通过一些优秀的设计给你更多启发。下面这些例子经过精心挑选,你可以亲自前往这些网站体验一下,相信你对滑动能够有更好的理解。

IMS Productions

62247337 - design, sharing - 激发灵感的滑动视觉效果,和那些惊艳的网页

http://www.imsproductions.com/

IMS Productions使用了垂直滑动的方式,用每个分屏呈现出一个故事。滑动后,一个新的故事被展现出来,并且有良好的视觉体验。其中还有排布精良的分割线条和箭头,让视觉体验十分震撼。

 

Instant Love

14451678 - design, sharing - 激发灵感的滑动视觉效果,和那些惊艳的网页

http://www.loveinstantlove.com

Instant Love允许你通过滑动来切换页面,这极大地提升了用户的音乐体验。每次一滑动后,都会加载新的歌曲、专辑和艺术家信息,你可以恣意欣赏它们。滑动给了游戏般的经验体验,鼓励用户与页面产生交互。

 

Smart USA

44885733 - design, sharing - 激发灵感的滑动视觉效果,和那些惊艳的网页

https://www.smartusa.com/models/electric-pure-coupe
(译者注:有墙,需要技术手段浏览)

Smart USA的页面内置了很多很酷的技术——比如全景视图——来促进汽车的销售。这种类型的滑动展示对电子商务很有价值,可以带来比图像更加详细的产品细节。

 

Havaianas

60001868 - design, sharing - 激发灵感的滑动视觉效果,和那些惊艳的网页

http://www.havaianas.com/porinteiro/#/

Havaianas通过水平滑动来展示内容。精妙之处在于,每一个滑动页面都和底部的进度条一一对应。这意味着即便页面在持续滑动,用户也可以任意切换到某一页,查看他们真正需要的内容。

 

Playup

20708561 - design, sharing - 激发灵感的滑动视觉效果,和那些惊艳的网页

http://www.playup.com.ar/#

Playup看起来像是一部动画,你的滑动或鼠标操作会改变一切。滑动可以带来很多改变,但响应速度非常不错(译者注:国内打开速度不佳,但可以观看),而大胆的用色又给了它独特的美丽。上下滑动可以切换页面,而且导航也一致会提示你这样做。

 

Pharrell Williams

6818902 - design, sharing - 激发灵感的滑动视觉效果,和那些惊艳的网页

http://pharrellwilliams.com/

Pharrell Williams的滑动效果可能是你看过最有趣的之一。它的滑动包含着平移、跳跃、转换等特殊效果,但所有的设计又基于你的滑动动作,呈现出一种精彩的协调感。一旦你点击了某张卡片,打开的内容会继续正在进行的滑动以适应你的视差,让这一切显得十分自然。

 

Tubelectric

28946323 - design, sharing - 激发灵感的滑动视觉效果,和那些惊艳的网页

http://www.tubelectric.com.ar/home

Tubelectric的滑动效果并不多,但使用精巧的分页技术,让简单的动画很好地突出了产品,让人出乎意料。每一个滑动都能改变页面布局,设计感十分舒适。

 

World’s Highest Website – 世界上最高的网页

50602289 - design, sharing - 激发灵感的滑动视觉效果,和那些惊艳的网页

https://worlds-highest-website.com/zh/
(贴心的译者为您切换为了中文版页面)

World’s Highest Website是滑动效果的极端,你可以一直向下滑动——直到11盈利的高度。这真的是很有趣的设计不是吗!

 

Rocket Lab

52188077 - design, sharing - 激发灵感的滑动视觉效果,和那些惊艳的网页

https://rocketlabusa.com/

Rocket Lab这个页面的垂直滑动比较传统,提供了单页视频后,下面的页面提供具体信息。在视频底部有“LET’S ROLL”的字样,提示用户向下滑动查看详情。

 

Sliders

25736646 - design, sharing - 激发灵感的滑动视觉效果,和那些惊艳的网页

http://sliders.dk/en/

Sliders展示了餐厅和菜单,用底层图片和上层产生了视差效果。设计十分简单,也没有酷炫的技术,但是个很好的例子,可以告诉你如何利用滑动让页面变的美观。

 

文章来源:designshack

原标题:Design Inspiration for Scroll Actions

原作者:Carrie Cousins

翻译:卡米雷特

 

 

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!

您可能还喜欢...

发表评论

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