网站建设

聚焦 分享 服务

重庆网页设计之视觉效果处理

发表日期:2020-05-19 23:28:44  文章编辑:沛宣互联  浏览次数:25

6364650653794108198335704.jpg

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

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

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

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

1、用动效来展示变化

image.png

Porche

image.png

Sonance

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

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

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

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

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

2、鼓励用户滚动浏览

image.png

Walking-dead

image.png

Firewatch

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

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

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

3、运动与色彩

image.png

Werk

image.png

Lois

视差特效的应用方式有很多种,其中最有趣的应用方式之一,是让色彩和不同的内容结合到一起,用来展示不同的项目和元素。颜色的变化和动画组合到一起,用交互来触发,产生全新的体验。

色彩是最为引人注意的设计工具,它在吸引用户注意力上,效果非常明显。

上面 Werkstatt 这个网页就使用了白底和灰色的轮廓来勾勒出不同的项目板块,当光标悬停在不同的项目上的时候,这个区块的项目图片会出现色彩,这种组合效果并不复杂,却非常有效,鼓励用户和单个项目进行交互。

Lois Jeans 则采用了另外一种搭配方式,设计师用不同的色彩来凸显不同的活动和不同的主题,随着页面滚动,背景的颜色随之变化,和前景滚动变化的图片相搭配。

4、让信息更容易被消化

image.png

Mel-art

image.png

Ledur

视差特效还能帮助设计师将更复杂的信息或者大块的信息,分割成小份,让它更加易读,也更加容易被消化。当你设计随着页面运动的文本元素的时候,视差特效的这个特征会非常有用。不过在实际操作的时候,需要仔细斟酌内容的载体。

上面两个网页就采用了这一设计概念,不过在运用方式上略有不同。

Melanie David 的这个个人页面采用了单页设计,她将页面的一半用作导航,当你滚动的时候,页面的一侧不动,另一侧会正常滚动,当你完成阅读之后,会自然切换到下一个内容区块。

Le Duc 餐厅的网页当中,设计师按照你的阅读习惯和订餐的方式,将菜单划分为单独的区块。动画很简单,背景的鱼起到了很好的装饰性作用,用户在浏览的时候,能够更好地了解订餐的信息。

5、营造视觉奇观

image.png

Madwell

image.png

Seattle Space Needle

视差特效最重要的用途之一,是营造独特的、拟真的视觉奇观。设计师通过合理的素材搭配,借助动效和不同的设计技巧,来创造逼真、有趣的视觉体验。

越来越成熟的3D设计让卡通和接近现实的设计元素的设计成本变得低廉,像上面 Madwell 这个网页,这些风格接近卡通,但是视觉效果和形式感都极为突出的元素,在视差动效下产生了类似VR的视觉体验。

而 Seattle Space Needle 的视差特效则采用的是更为经典的设计,当用户在浏览的时候会因为元素间不同的运动速度而产生拟真的浏览体验。不过,这个网站的独特之处在于,它是从下往上浏览的,非常有意思。当用户通过网站的不同区块到达顶端的餐厅区域的时候,会感受到这个餐厅所处的位置之高,城市的天际线和CTA元素结合到一起,让你不会错过关键的信息。这样的设计是教育性的,也是冒险的,但是它确实创造了前所未有的体验,令人难忘。

结语

视差特效确实是时髦而又有趣的,但是正如我们无数次评价设计趋势的时候所说的:它并不一定适合每个项目。当你在构思网站设计的时候,还是要事先了解你的用户和他们的偏好,通过小范围的测试和跟踪分析,了解你的策略是否是有效的。当你发现视差特效有着不错的效果之时,well,不妨拿来做点有趣的东西。


关注微信
重庆网站建设微信公众号

添加微信公众号

重庆建设网站微信号

添加微信报价

最新新闻
最新案例
  • 亿正科技

    - IT科技网站建设 -

    亿正科技

    重庆市亿正科技有限公司是一家高新技术软件企业,成立于2012年,注册资本:100万元。公司以“科技创新为客户创造核心竞争力和财富增长”为己任,致力向广大客户提供专业的计算机软件系统、计算机系统服务咨询与实施、计算机系统集成和建筑智能化系统工程(弱电)的整体解决方案。

  • 长欣防水建材厂

    - 建材网站建设 -

    长欣防水建材厂

    防水涂料网站建设、建材公司网站建设、防水建材公司网站建设,建材营销型网站建设、全网营销型网站,用户体验极级,利于网站优化和做推广。

  • 金豆石屋

    - 建材网站建设 -

    金豆石屋

    石屋网站建设、雕刻、雕塑、建材类型的网站建设,营销型网站建设效果更好,包含电脑、手机端网站,全方位展示企业形象、用户体验好,方便网络营销。

  • 熙华清洁

    - 家政网站建设 -

    熙华清洁

    家政、开荒清洁、全网营销型网站建设、绿色环保,体现行业特色。

  • 一方财务

    - 咨询网站建设 -

    一方财务

    一方集团是一个综合性投资集团,旗下有一方财务、一方网络科技、恒半餐饮管理、一方装饰、一方酒店管理、一方商会等企业,公司已开展重庆、成都、武汉、天津、上海、东莞、杭州等地区,一方集团着眼全国布局、引领启航!   一方将致力于中外企业的忠实参谋,为企业出谋划策、企业的经济计划、业务计划进行周密的预测 、控制、分析、计算与考核,成为企业发展途中不可缺少的朋友。

  • 中麦博美犬舍

    - 养老网站建设 -

    中麦博美犬舍

    中麦博美犬舍主理人程龙宝先生。是亚洲博美殿堂级繁殖人董晨光先生的第一个弟子。跟老师刻苦学习,不忘初心为广大博美犬爱好者提供优质漂亮的博美犬是我们的宗旨。我们的博美犬具有优良的血统、优秀的遗传基因。已经销售到世界各地,且在国内外专业赛事中多次获得Best In Show(全场总冠军)。创中国博美犬在世界赛场最好成绩! 您在本犬舍买到的狗不一定是便宜的,但品质和血统是有保障的.我们不仅为您提供优秀漂亮的博美犬,更会为您提供完善的售后服务.让您的博美犬更健康,更漂亮,饲养更轻松!欢迎博美犬爱好者来本舍参观、指导和交流。