如何利用视差滚动做好企业H5响应式建站

如何利用视差滚动做好企业H5响应式建站  视差滚动是指让多层背景（前景和背景）以不同的速度移动，形成立体的运动效果，以带来出色的视觉体验。举个栗子来说，我们可以让背景层、内容层（图片、文本等）以不同的速度移动，做出漂亮的差异滚动效果。就目前而言，视差滚动效果仍是网页设计领域的热点趋势，这是因为这种效果营造出来的层次感和三维效果可以带给用户身临其境的感觉，能够有效提高用户参与度、加强用户与网站的互动。除此以外，视差滚动还可以用在各种不同类型的企业建站中，帮助引导用户将注意力放在CTA按钮或其他内容元素上。当然，视差滚动效果也有自己的缺点：在移动设备上可能难以取得预期的效果。不过总的来看，在网站中使用视差效果还是利大于弊的，它能够带来其他设计技巧无法比拟的效果。今天云响建站就给大家介绍介绍视差效果在网页中的不同应用。   1. 引导用户进行滚动 除了丰富的层次感、独特的三维体验外，视差效果之所以能极大提高用户参与度很大程度上还是因为它的引导作用，它能引导用户不自觉的进行滚动，与企业建站设计进行长时间的交互。如何利用视差效果引导用户滚动？最简单的方法就是在页面上设置"滚动"的文字样式或是一些视觉线索暗示，比如箭头等，帮助引导用户从一开始就与网站进行互动，这在单页面网站上尤为适用。Fillet网站就是这样，它在网站主页上使用了一个弹跳的向下箭头，鼓励用户沿着我们既定的轨迹去浏览。 2. 实现时空/位置的流畅切换 视差效果常涉及到不同层次间的变化，当它们与建站内容结合起来时，可以帮助实现时空或位置的流畅转换或改变。Porsche Evolution就使用了视差效果展示时间变化，这个网站的背景上有一个纵向的时间轴，而前景中是不同时间段典型的车辆图片。当你点击滚动时，随着时间的变化，这会出现不同的车辆图片。而如果你打开背景音乐的话，你会发现背景音乐也是随着时间而不断变化的。这种设计能让用户不由自主的向下滚动，因为他们会想知道接下来的图片是什么样的。而这里的视差效果反过来也是同样成立的，当你从下向上滚动页面，时间轴和图片会相应出现，背景音乐的呈现也是同理。 Sonance则在网站中使用视差效果展示了另一种变化--位置变化。在Sonance的主页中，视差效果被用在主导航菜单上，这样一来，用户不仅可以享受到视差效果带来的良好视觉体验，还可以在浏览过程中清楚的知道自己位于哪个页面。 3. 搭配色彩区块使用 还有一种使用视差滚动的有趣方法就是将它与色彩区块相结合。区块颜色的改变往往能给用户带来耳目一新的感觉，色彩的使用还能有效吸引用户注意力。下面是视差效果与色彩区块结合使用的两个栗子。Werkstatt在企业建站中使用了白色的背景层和灰色的图片层。不过当你将鼠标移到图片元素上，图片的颜色就会完全呈现。这里，视差效果、色彩和悬浮动画三者的有机结合能够给用户留下深刻的印象，有效鼓励用户与每个元素进行互动。与此同时，这三种技巧也不会给用户带来认知负载，因为网站其他部分的设计很是简洁，用户会更愿意在这样的企业网站中进行探索。 Lois Jeans 在网站中使用视差效果时也结合了色彩。这个企业网站使用四种颜色（红、黄、蓝、绿）将所有服装分为四个系列（火、空气、水、大地），用户可以在代表不同的色块中欣赏不同风格的模特和服饰。   深耕“中国驰名商标”多个品牌十数年的轻纺集团明白，一个企业仅仅通过跨界而不深入用户，培育品牌，再好的产品也无法获得长期发展，多过的多元化经营的最终可能是无法形成核心品牌的沉淀，在多品牌并行发展的同时，一个用于整体介绍的线上门户显得尤为重要，有站点更需有好的域名，便于记忆才是品牌植入的关键要素。.集团域名成为了轻纺集团的最终选择，通过轻纺.集团地址除了可减少搜索引擎跳转直达官网外，域名整体更是简单好记，方便输入。通过.集团的后缀强调大企业背景以及行业领跑地位，在划分进行品牌分级的同时突出集团公司的重要性。可以说，.集团域名已经成为当前多元化产业集团向新制造、新技术升级的又一标准配置。      4. 帮助用户理解信息 视差效果还可以让复杂的内容/沉重的文本区块变得简单轻松，帮助用户更快完成企业网站内容信息的理解和消化。Melanie David网站的关于页面有点长，因此设计师在使用视差效果时将左边的视觉元素（About）保持不动，让右侧的文本在用户滚动页面时逐步呈现。只有文本区块内容全部呈现完了之后，用户才会进行下一个区块的浏览。这对于那些文本区块比视觉元素更长的企业网站来说不失为一个好的解决方法。 Le Duc Restaurant的企业网站主页使用了多个区块呈现不同的菜单，这些区块会根据用户浏览和订餐的历史自动呈现出来。区块由下到上的动画很简单，动画背景也是与菜单相关的鱼类图片，所有元素的安排都服务于一个目的：让用户在理解菜单时更加容易。   5. 可视化数字体验 视差效果还有一个妙用就是用来创造可视化体验，很多企业建站都借助视差效果所带来的三维效果为用户提供更加现实的体验。不过目前这些3D设计通常更加倾向于卡通式的风格，就像Madwell，不过当这个网站通过特定的设备来观看时仍旧会有VR的效果。 这种体验设计还有一个典型的栗子就是Seattle Space Needle网站。它采用了向上滚动的方法，帮助用户模拟在605英尺建筑物顶端俯瞰Seattle的景象。视差滚动存在于地平线和建筑内部的轮廓线之中，网页左侧有一个纵向的高度轴，当用户点击一次右上角的箭头，高度会有一定程度的上升。这还有一些CTA按钮，以及展示所处位置的导航栏。这种形式的设计是具有先导意义的，是视差滚动设计的一种创新。   虽然现在这种有趣的视差效果很是流行，但它却并不适合每个企业网站，尤其是对那些移动设备用户优先的网站。所以，各位站长大大们在网站中使用视差滚动效果之前一定要对目标用户以及他们的喜好有一个大致的了解。另外，大大们可以先在网站的一个位置中使用视差效果，比如网站主页，然后使用工具进行统计，看看这种效果是否为网站带来了益处。如果这种方法确实能够与网站的内容很好的结合在一起，那么它就不失为一种有趣的设计和互动方式。   相关阅读： 全新企业建站体验 视频着陆页设计 来源：誉名网 关注誉名网微信 获取更多最新资讯

转载于:https://my.oschina.net/u/3764130/blog/1618818