网站设计滚动效果灵感设计

滚动效果是任何类型的网站设计一个重要组成部分，比起单一的一屏登陆页面，通过滚动效果切换不同的视觉和信息有更多的优势。任何觉得滚动效果或者长页面已经是“过去式”的设计师可能需要将他们的观念先跳离2005年。

滚动操作可以通过垂直或水平地移动来引导用户在不同的视觉和内容之间转移，这是一种常见的用户模式。由于大量有趣的设计技术和在小屏幕上需要访问完整网站的的需求，使得滚动不仅没有被淘汰，而且变得更加有活力。让我们来看看！

1.6种使用滚动操作的方法

滚动操作不只是你的网站设计的一些俏皮的技巧。它需要实际能做一些事情或有具体的作用以引导用户参与特定的内容或执行某种动作。除非满足这些条件，否则滚动操作只是一些多余的“炫技”而已。

有几种不同的方式可以让你的用户乐于参与滚动的操作：

· 垂直滚动：这是最直观的滚动模式，允许用户在页面上下移动来浏览内容。用户的浏览模式已经形成一种固有的习惯，即使页面上没有其他的信息，用户也会尝试向下滚动，如果他们对当页的设计或内容不感兴趣的话。

· 水平滚动：由于水平滑动的图像滑块的大量增加，这种模式正变得越来越常见，但大多数用户仍然需要滚动的提示，如箭头或指令。然后你必须决定水平滚动是一个还是双向的动作。

· 使用图层：分层对象可以帮助用户更直观的看到具体的滚动模式和移动(想想材料设计原则)。通过在背景和前景上叠加元素，可以极大的吸引用户参与到滚动中。

· 告诉用户滚动信息：通过使用指示图标或微内容可以告诉用户在哪里可以以及滚动的形式。

· 使用点击滚动：如果你希望通过使用图标或某种相关的元素来鼓励滚动，你也可以通过使用点击操作来激活它(用户几乎忍不住点击那些看起来像按钮的元素)。点击鼠标滚动动作将会给你带来一个惊喜，让你在接下来的内容上获得一个好的“第一印象”。

· 滚动无处不在：没有规则说滚动就必须是上下左右。它可以以多种方式移动，只要用户易于理解与内容的关系并鼓励他们参与，你可以考虑圆形、对角线或其他模式。

2.10个或许可以激发你的灵感的案例

现在你已经大概了解了滚动的原理以及如何设计滚动操作了，既然得到了一些很棒的设计的启发，那么现在是时候在你的网站设计中开始动手实施了。为了充分利用下面的例子，你可以寻找并点击这些网站，以获得更好的互动体验。

你会注意到，每个案例的滚动方式都有一点不同。有些东西比其他的更直观，但都为入门提供了一个有趣的参考。

· IMS Productions

IMS Productions在其网页设计中使用垂直滚动的方式来呈现一个“屏幕”一个故事。每一次滚动都将用户带到一个新的故事中，并提供了相应的体验。注意所有直接关联到用户在网页设计中滚动的微妙的竖线和箭头。

· Instant Love

Instant Love通过滚动切换的形式使得用户在该网站中体验音乐更加有乐趣。每一个滚动动作都为用户提供了一首新歌以及完整的曲目和艺术家信息，供用户聆听。滚动操作被用作一种游戏，以鼓励用户参与和交互。

· Smart USA

Smart USA使用了很多很酷的滚动技术，包括360度的视图，来帮助销售汽车。这种类型的滚动特对于电子商务和产品销售很有价值，因为用户可以比单独使用图像更详细地探索产品。

· Havaianas

Havaianas使用水平滚动来展示产品。这个模式的好处在于，滚动条中的每一个幻灯片都包含一个可以通过底部操作的按钮以及具体的进度条。当面板自动滚动时，用户可以控制任何一点，针对性的查看他们正在寻找的内容。

· Playup

Playup更像是一个动画的冒险活动，你可以通过滚动部件或通过鼠标来改变每一个动作。滚动动作有很多进展，但动作迅速而诱人，尤其是在色彩的选择上，大胆而充满诱惑。另外，用户可以向上或向下滚动，而且总有一个视觉提示可以让你知道哪些动作是可用的。

· Pharrell Williams

Pharrell Williams可能是你能找到的最有趣的使用滚动效果的网站之一。它的滚动并不基于某一种特定的形式，它可以是移动，跳跃，变换等。所有的设计都是由滚动动作来指导的。一旦用户从主页上点击卡片，内部页面也会让视差运动持续滚动，以保持同样的氛围。

· Tubelectric

Tubelectric看起来不像一个会有很多滚动效果的网页设计，但它使用简单的分层和动画来突出产品，给人一种意想不到的结果，每一款滑动鼠标都能让网站设计变得平坦。

· World’s Highest Website

World’s Highest Website是一个滚动到极端的例子。它可以不停地滚动超过11英里，这种体验会让用户觉得很有趣！

· Rocket Lab

Rocket Lab使用一种传统的垂直滚动，在完整的页面视频下面提供信息。页面里面特别好部分是微内容的使用上——“让我们滚动”——告诉用户继续滚动可以获得更多的信息。

· Sliders

Sliders使用视差滚动动作来展示餐厅和菜单项。整体设计非常简单，滚动操作并不复杂，都很轻松。这是一个很好的例子，说明如何将酷酷的用户界面动作与图像混合在一起。

总结

滚动有很多不同的形式。希望这些例子能帮助你创建一个有趣的或新的滚动模式，以帮助吸引新的用户群。

记住，和任何新事物一样。对其进行测试、分析，并根据需要进行更改，以确保你的实验滚动和设计模式是成功的并可以为用户提供良好的服务。

----图文来自：design shack 

----由深圳网站建设公司-Clh翻译编辑整理