澳门太阳2007网址 17

摄影

澳门太阳2007网址烟台网站建设,巧用这5个网页设计技巧玩转视差特效

24 9月 , 2019  

在内容一定的情况下,屏幕越小,页面自然就越长。长滚动页面的兴起并不是没有理由的,移动端对桌面端市场份额的挤压,可穿戴设备等小屏幕的流行,所有的这些变化都在促使这一趋势更加流行。

视差特效是目前最流行的网页设计趋势之一。在这个滚动动画特效支撑之下,前景的元素和背景会在滚动浏览时以不同的速度运动,营造出动感又独特的视觉体验。

视差特效是目前最流行的网页设计趋势之一。在这个滚动动画特效支撑之下,前景的元素和背景会在滚动浏览时以不同的速度运动,营造出动感又独特的视觉体验。

长滚动页面的流行促使设计师在新需求下探索新的导航模式和独到的视觉设计,故事的讲述也有了新的方式,浏览体验也将截然不同。在这样的语境下,我们可以从设计、技术和策略的角度总结出如下特征:

视差动效可以运用在绝大多数类型的网站当中,它是增强用户参与度、提升用户体验的有效手段之一。视差特效的好处在于,它并不需要硬性的运用到每一个页面当中,同时,它还能促使用户更加专注于网页内容,提升整体的参与度。

视差动效可以运用在绝大多数类型的网站当中,它是增强用户参与度、提升用户体验的有效手段之一。视差特效的好处在于,它并不需要硬性的运用到每一个页面当中,同时,它还能促使用户更加专注于网页内容,提升整体的参与度。

视差滚动图片:图片素材以不同的速度运动创造出类似3D的视觉效果,为用户带来愉悦的视觉效果和颇为有效的互动

视差特效让网页中的元素,相互之间有了距离和深度,换句话说,它让网页拥有了接近三维的视觉体验,这也使得网页有了接近沉浸式的体验。

视差特效让网页中的元素,相互之间有了距离和深度,换句话说,它让网页拥有了接近三维的视觉体验,这也使得网页有了接近沉浸式的体验。

屏幕尺寸分页:将长滚动页面分割成屏幕尺寸大小相同的分页,这是一种颇为有效的内容分割组织的方式,可以使页面内容更有凝聚力

不过,视差特效的缺陷也很明显,它在移动端上并不一定总是那么好用。在视差特效的具体运用过程中,
有一些技巧和注意事项是不容错过的,今天的文章我们总结了视差特效的5种运用技巧。

不过,视差特效的缺陷也很明显,它在移动端上并不一定总是那么好用。在视差特效的具体运用过程中,
有一些技巧和注意事项是不容错过的,今天的文章我们总结了视差特效的 5
种运用技巧。

常驻导航:用户在浏览长滚动页面的时候容易迷失,常驻的导航栏能够让用户感受到可控性和安全感,避免迷失

1、用动效来展示变化

1、用动效来展示变化

动画互动:在滚动过程中触发动画会为用户带来乐趣,这会让用户享受滚动的过程

澳门太阳2007网址 1

澳门太阳2007网址 2

多向滚动翻页:这是单页滚动和长滚动页面发展这么久之后发展出来的新风尚,页面可以横向、纵向,从上下左右各种方向滚动

Porche

Porche

交互信息提示:有些用户不会主动滚动页面,这个时候需要给予适当的心思提示,比如向下滚动的文本和箭头,避免他们迷惑。也可以使用行动召唤按钮(CTA)等设计方法来提示。

澳门太阳2007网址 3

澳门太阳2007网址 4

下面的长滚动页面的案例大多采用了这些设计和技术,这也是为什么这些页面会跻身今年最值得学习的网页的行列。

Sonance

Sonance

Twitter

设计师能够使用视差动效来展示页面中的变化。这些随着滚动而不断运动的元素能够传达出时间、空间和位置上的关系。

设计师能够使用视差动效来展示页面中的变化。这些随着滚动而不断运动的元素能够传达出时间、空间和位置上的关系。

澳门太阳2007网址 5

视差特效和网站内容一起工作的时候,最能展现其中的变化。

视差特效和网站内容一起工作的时候,最能展现其中的变化。

澳门太阳2007网址 6

在上面 Porsche Evolution
这个网站当中,不同时代的保时捷车型随着时间的变化而展现,背景的图片场景也随之变化,如果你仔细听会发现音乐也会随着年代的变化而演变。

在上面 Porsche Evolution
这个网站当中,不同时代的保时捷车型随着时间的变化而展现,背景的图片场景也随之变化,如果你仔细听会发现音乐也会随着年代的变化而演变。

作为社交网站中的巨头,Twitter的设计自是不会差。但是它更加值得注意的是,它是首个打破翻页设计的先驱,也是目前最典型的长滚动页面设计之一。对于Twitter这样的用户产生内容的网站,长滚动页面设计不仅时尚,而且实用。无限滚动加载内容不仅可以保证浏览的体验,而且有利于内容的组织。

这种设计技巧会驱使着用户滚动浏览,因为大家想看接下来会有什么样的变化。在这种视差滚动+时间轴的搭配之下,用户可以从上到下浏览,反过来看也很有意思。

这种设计技巧会驱使着用户滚动浏览,因为大家想看接下来会有什么样的变化。在这种视差滚动+时间轴的搭配之下,用户可以从上到下浏览,反过来看也很有意思。

Heart Kids NW

Sonance
这个网页当中的视差则呈现出另外一种变化,元素在页面中的位置变化。视差特效成为了网站导航模式中的一部分,当用户在浏览的过程中,视差特效会告知用户他们所处的位置。

Sonance
这个网页当中的视差则呈现出另外一种变化,元素在页面中的位置变化。视差特效成为了网站导航模式中的一部分,当用户在浏览的过程中,视差特效会告知用户他们所处的位置。

澳门太阳2007网址 7

2、鼓励用户滚动浏览

2、鼓励用户滚动浏览

这是新西兰慈善组织Heart Kits
的网站。长滚动页面设计和动画结合到一起,滚动操作可以激活动画,令人惊艳的色调,凄美的意象,组织到一起宣扬拯救生命的信息。

澳门太阳2007网址 8

澳门太阳2007网址 9

值得注意的是,页面上并不显眼的滚动图标和着陆页上的指示文字,顶部还有常驻的悬停显示的导航栏。

Walking-dead澳门太阳2007网址 10

Walking-dead

The Boat

Firewatch

澳门太阳2007网址 11

澳门太阳2007网址 12

视差特效有利于交互,很大程度上是因为它会鼓励用户持续不断滚动浏览页面,让用户持续地参与到互动当中。

Firewatch

SBS旗下的The
Boat网页是目前最有创意的长滚动页面之一,它的设计像互动小说一样有趣。长滚动式设计赋予页面更加身临其境的阅读体验,连续的动画和视差的存在令它彻底区别于传统的页面。

许多采用视差滚动的网页会在首页上就直接言明Scroll或者通过闪动的光标等方式,吸引用户注意并鼓励用户滚动浏览。在行尸走肉(The
Walking Dead Zombiefied)的首页上,就包含了这样的指引性信息。

视差特效有利于交互,很大程度上是因为它会鼓励用户持续不断滚动浏览页面,让用户持续地参与到互动当中。

MCA Leicester: The Seven Types of Motorcycle Rider

和其他的视差滚动的网页设计不同,The Walking Dead Zombiefied
的页面布局是横向的,当用户滚动页面的时候,角色会随着滚动,穿过不同的场景,剧情也随之发展,颇为有趣。

许多采用视差滚动的网页会在首页上就直接言明“Scroll”或者通过闪动的光标等方式,吸引用户注意并鼓励用户滚动浏览。在行尸走肉(The
Walking Dead Zombiefied)的首页上,就包含了这样的指引性信息。

澳门太阳2007网址 13

3、运动与色彩

和其他的视差滚动的网页设计不同,The Walking Dead Zombiefied
的页面布局是横向的,当用户滚动页面的时候,角色会随着滚动,穿过不同的场景,剧情也随之发展,颇为有趣。

这个长滚动页面在左侧使用灰色的头盔来作为导航和提示,用户向下滚动可以看到堆叠的页面逐步翻看,呈现内容。

澳门太阳2007网址 14

3、运动与色彩

澳门太阳2007网址 15

Werk

澳门太阳2007网址 16

也正是这种堆叠式的页面,将长滚动设计和分页设计结合到一起,非常有趣。

澳门太阳2007网址 17

Werk

, , , , , , , , , , , , , ,


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图