返回  

视差效果比较:5个选择要考虑

2019/8/16 10:16:50 来源:深圳网站建设公司Clh

视差效果仍然是最热门的网页设计趋势之一。 当用户滚动时背景和前景以不同的速度移动,以便两个独立的层在同时移动的时候产生时间或速度上的差异感。这种技术对于现实的网站设计来说依然是一个很有吸引力的交互效果。


这种效果几乎可以用于所有的网站类型,是创建和增加用户参与度的有趣方式。 视差效果的好处在于你不必在设计的每个页面上使用它们,视差滚动是一种很棒的首页技术,可以帮助用户关注到号召性用语或其他内容。

视差效果创造了深度和距离的感觉,并且比其他技术具有更大的三维感,使用户感觉像是设计的一部分。

同样,视差效果的缺点在于它们并不能很好的兼容移动设备。以下我们将向你提供五种你可以考虑使用的视差效果和风格。


1. 选择效果(Animation to Show Change)

Animation to Show Change

Animation to Show Change

使用视差效果来展示项目中的不同选项。 运动层可以传达时间,空间或位置的距离。

视差效果可以很好地展示当用户使用网站时内容将根据不同选项的不同变化。

在上面保时捷的网站上设计中展示了随着时间的变化,每个汽车图像和背景的不同变化(你会发现北京音乐也会随着时间的选项进行切换)。

该设计让用户情不自禁的想要持续滚动,因为你想看看下一辆车的样子。 这种技术可以按时间顺序(如此处所示)或反向时间顺序工作。 

Sonance使用视差来展示另一种变化 - 整个设计中的位置变化。 视差效果是网站整体导航模式的一部分,并且帮助提示用户在整个网站体验中的位置。


2.鼓励滚动(Encourage Scrolling)

Encourage Scrolling

Encourage Scrolling

视差效果可以帮助创建参与度的原因是因为它们鼓励滚动以使用户在更长的时间段内与设计交互。

许多具有视差效果的设计都在主页上提供了“滚动”指令或提示,以帮助从一开始就鼓励这种交互形式(The Walking Dead Zombiefied的主页在上面,在图片之前的页面上包含此说明)。

“行尸走肉”的网站设计上通过视差来做一些与鼓励互动有点不同的事情 - 当通过滚动时,角色会穿过不同的漫画风格的面板,而不是上下移动。


3.运动和色彩(Movement and Color)

Movement and Color

Movement and Color

使用视差滚动最有趣的方法之一是将颜色合并到不同的内容“面板”中以展示元素或项目。 颜色变化和动画的改变可以表示新的版块或内容。

颜色也是一个引人注目的设计工具,可以帮助吸引用户。

上面的Werkstatt在其网站设计中使用了一个白色和灰色的寄出过渡色,在元素和文本之间有视差层。 但是,悬停动作可以使每个项目都焕发生机。 组合效果很好,因为设计的其余部分很简单,它鼓励用户与每个单独的元素进行交互。

Lois Jeans采用另一种使用颜色的视差方法。 每种新颜色都突出了服装活动的不同部分 - 购物者可以在不同的自然元素中看到牛仔裤的变化,包括火,空气,水和泥土。


4.使信息更容易被消化(Make Information Easier to Digest)

Make Information Easier to Digest

Make Information Easier to Digest

视差效果可以帮助使复杂的信息或繁重的文本块更小,更易阅读,更容易被消化。 当你考虑移动类型时,这是一个有趣的概念,但实际的实践涉及移动容纳类型的容器。

上面的例子中显示了这个概念的两个不同的应用。

Melanie David在它的屏幕上有一个很长的介绍。 左侧用于显示导航元素在页面静止的时候是不会变化的,当用户滚动右侧的文本时,左侧的导航标题将更具右侧的内容对应显示为相应的导航栏目。 当文本块结束,页面的两侧移动到下一部分,对于比可视内容区域更长的文本块,它是一个很好的解决方案。

Le Duc餐厅根据你阅读和订购食品的方式,根据菜单的不同部分使用单独的区块。 动画很简单,有趣的鱼背景 - 告诉用户一些关于餐饮场所的东西 - 并使菜单易于消化。


5.可视化“数字”现实(Visualize “Digital” Reality)

Visualize “Digital” Reality

Visualize “Digital” Reality

视差效果的最大用途之一是帮助用户想象他们无法看到的东西。 更多设计使用三维和视差动画的组合来创建更逼真的体验。

这些3D设计往往属于更卡通风格的体验,例如上面的Madwell,但当设计与特定类型的设备一起工作时,也可以具有更多VR感觉。

使用这种视差效果的网站的一个典型例子是he Seattle Space Needle网站设计。 它使用向上滚动技术来模拟地标观光的情形。

视差滚动通过一些号召性用语消息和一个显示目前位置有多高的导航栏,将天际线移动到建筑物内部。 该设计具有教育性,冒险性,并向用户展示了没有动画效果的话难以想象的东西。


总结

虽然视差效果既时髦又有趣,但它们并非适用于所有项目。 同样重要的是要考虑某些设备上的某些受众可能难以浏览包含大量动画的网站。

在添加视差效果之前,请确认用户及其偏好。 你可以先尝试从一个位置(例如主页)开始小的视差效果,并跟踪分析以查看它是否适合你。

在处理内容和消息时使用视差。 这种时髦的技术应该很有趣,可以将设计和交互完美的结合在一起。







----图文来自:design shack 

----由深圳网站建设公司-Clh翻译编辑整理,为您提供更多有关深圳网站建设网站设计网页设计及其他互联网应用服务