激发灵感的滑动视觉效果，和那些惊艳的网页
滑动效果在网页设计中十分重要，通过滑动效果切换页面，可以在提升视觉效果的同时，展示出比单屏更多的信息。有很多设计师觉得滑动效果已经是过去式了，然而这种观念并不正确，只是2005年后网页设计风格发展的后遗症罢了。
水平或垂直滑动可以引导用户视觉，这样的模式已经十分常见。通过滑动可以让小屏幕拥有访问完整网站内容的能力，因此它不仅没有被淘汰，反而被大力开发更有活力。下面的将为你展示它们。
1.滑动的6中设计方式
滑动效果不是为了让网站花哨而存在的，它需要能够引导用户与界面的正确交互，不然这样的设计就失去了意义。
以下是常见的几种滑动形式：
- 垂直滑动：这是最直接的模式。长期以来用户早已养成了上下滑动来浏览页面的习惯，如果用户读完了当前的内容或对当前内容不感兴趣，即使没有任何引导，他们也会尝试着向下滑动。
- 水平滑动：支持水平滑动的模块近期大量出现，而类似的设计也日渐增多。但用户往往需要箭头等的引导，才会想到可以使用这样的功能，在设计时需要慎重考虑。
- 分页滑动：分页滑动非常直观，用户可以看到页面具体是怎样叠加的（如纸张这样的材料载体能够带给你的体验）。通过设计展示出前一页和后一页的交叉，用户会更乐于使用这样的功能。
- 告知滑动：使用图片或文字，引导用户进行滑动。
- 点击滑动：如果你希望用这种方式，可以设计一些与滑动相关的图标来刺激用户点击它们。有时通过点击滑动可以给你带来意想不到的效果。
- 随意滑动：并没有规定滑动只能在四个方向上，只要能设计出用户易于理解的互动方式，弧线、对角线这样的滑动模式都是可以接受的。
2.10优秀的滑动案例赏析
你应该已经理解如何设计滑动式内容了，但在实施之前可以通过一些优秀的设计给你更多启发。下面这些例子经过精心挑选，你可以亲自前往这些网站体验一下，相信你对滑动能够有更好的理解。
IMS Productions
http://www.imsproductions.com/
IMS Productions使用了垂直滑动的方式，用每个分屏呈现出一个故事。滑动后，一个新的故事被展现出来，并且有良好的视觉体验。其中还有排布精良的分割线条和箭头，让视觉体验十分震撼。
Instant Love
http://www.loveinstantlove.com
Instant Love允许你通过滑动来切换页面，这极大地提升了用户的音乐体验。每次一滑动后，都会加载新的歌曲、专辑和艺术家信息，你可以恣意欣赏它们。滑动给了游戏般的经验体验，鼓励用户与页面产生交互。
Smart USA
https://www.smartusa.com/models/electric-pure-coupe
（译者注：有墙，需要技术手段浏览）
Smart USA的页面内置了很多很酷的技术——比如全景视图——来促进汽车的销售。这种类型的滑动展示对电子商务很有价值，可以带来比图像更加详细的产品细节。
Havaianas
http://www.havaianas.com/porinteiro/#/
Havaianas通过水平滑动来展示内容。精妙之处在于，每一个滑动页面都和底部的进度条一一对应。这意味着即便页面在持续滑动，用户也可以任意切换到某一页，查看他们真正需要的内容。
Playup
Playup看起来像是一部动画，你的滑动或鼠标操作会改变一切。滑动可以带来很多改变，但响应速度非常不错（译者注：国内打开速度不佳，但可以观看），而大胆的用色又给了它独特的美丽。上下滑动可以切换页面，而且导航也一致会提示你这样做。
Pharrell Williams
Pharrell Williams的滑动效果可能是你看过最有趣的之一。它的滑动包含着平移、跳跃、转换等特殊效果，但所有的设计又基于你的滑动动作，呈现出一种精彩的协调感。一旦你点击了某张卡片，打开的内容会继续正在进行的滑动以适应你的视差，让这一切显得十分自然。
Tubelectric
http://www.tubelectric.com.ar/home
Tubelectric的滑动效果并不多，但使用精巧的分页技术，让简单的动画很好地突出了产品，让人出乎意料。每一个滑动都能改变页面布局，设计感十分舒适。
World’s Highest Website – 世界上最高的网页
https://worlds-highest-website.com/zh/
（贴心的译者为您切换为了中文版页面）
World’s Highest Website是滑动效果的极端，你可以一直向下滑动——直到11盈利的高度。这真的是很有趣的设计不是吗！
Rocket Lab
Rocket Lab这个页面的垂直滑动比较传统，提供了单页视频后，下面的页面提供具体信息。在视频底部有“LET’S ROLL”的字样，提示用户向下滑动查看详情。
Sliders
Sliders展示了餐厅和菜单，用底层图片和上层产生了视差效果。设计十分简单，也没有酷炫的技术，但是个很好的例子，可以告诉你如何利用滑动让页面变的美观。
文章来源：designshack
原标题：Design Inspiration for Scroll Actions
原作者：Carrie Cousins
翻译：卡米雷特
