|
入Mockplus团队后，我开始深入接触设计。工作过程中，也会和用户讨论一些设计项目的问题。在和用户交流过程中，我发现，用户的疑问不仅包含各种各样的Mockplus使用问题，很多时候，在解决用户疑问的同时，我也能感受到他们对于设计创意的缺乏。比如网页项目的设计，可能数十个用户的创意都如出一辙。 如何让自己的网站设计与众不同呢？你也许需要一些更多的灵感和技巧。 让一个网站看起来酷炫，丰富，具有吸引力。你可以添加多种多样的设计效果和技巧。而视差滚动效果则是其中一个很不错的选择。这里，Mockplus团队精心整理了20多个视差滚动网站设计，希望您在看完这些不错的设计后，也可以使用Mockplus做出同样创意满满的网页视差原型设计。 首先，什么是视差滚动设计呢？视差滚动，英文为Parallax Scrolling，是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。网页设计中的视差效果的最常见的一种，就是用户在向下滚动页面或跨页面时可以创建3D滚动效果。视差设计如果做得好，将会大大提升用户体验，吸引更多的用户。 接下来，我们一起看看这些优秀的视差滚动网站设计吧。 1. Femme FataleFemme Fatale是一家专注于文化，奢侈品，社论和艺术的创意工作室。它包含了精彩的动画互动页面，可以很好的调动访客的情绪。当你向下滚动页面时，页面背景会伴随页面滚动条进行切换，每个页面的背景色各不相同，在页面滚动切换时，页面文本会以不同的速度载入，和页面图像等其他元素形成视差滚动。 2. Every Last DropEvery Last Drop是一个展示生活用水场景的网站，旨在呼吁关注地球水资源，节约水资源。设计师以等比例分割页面进度条，当你向下滚动页面时，您会看到各种不同的生活场景里水资源是如何被消耗的，并且展示水资源使用的占比等数据。每个场景的切换都带有动画视差效果。在其“Universe”页面还增加了3D视差滚动效果。 3. Beer CampBeer Camp整个网站页面划分为5个页面层，当你滚动时会有一种“一镜到底”的感觉。并且它的视差滚动效果非常与众不同，它既不是水平也不是垂直的，而是一种平滑缩放的效果。当你滚动页面时，各个层都可以连贯地依次放大到页面最前端。加上明亮的配色和粗放的版式，创造出一种惊人的空间感。 4. Porsche VolutionPorsche Volution完全可以看出设计师对汽车的热爱以及对保时捷品牌的浓厚兴趣。整个页面设计以视差滚动照片的形式展示了保时捷的进化，并且配有高雅的背景音乐，配色惊艳。屏幕左侧有一个时间轴，向下滚动时，可以清晰的看到保时捷的进化历程。 5. SpokesSpokes Eclectic Pedicab Rides是一个提供停车和公共交通的即时解决方案的网站。这个网站号召绿色生活和经济生活，对以倡导骑车为中心的社区文化有极大的意义。该网站是漫画风格，滚动页面时会以不同进度载入页面元素，具有丰富的视差效果。顶部导航栏的设计也是一个亮点。 6. Hot DotHot Dot和上面的视差例子又不尽相同，它是水平视差滚动。页面从左到右以平滑的3D视差效果推进，页面元素和纯黑色背景搭配具有不错的美感。这个网站也是响应移动优先设计的一个很好例子。页面底部有可点击的CTA，方便用户访问。 7. Hobolobo这也是一个水平视差滚动效果网站，但它不同之处在于它更适用于触摸设备。但你滑动触摸板时，页面会从左向右移动，以讲故事的方式呈现页面。页面的顶部栏上有一个页面列表，可与页面一起滑动以显示您当前位置。这个网站是完全漫画形式的，最惊艳的是其3D视差效果。
| 
