混合型视差网页设计趋势

如果你仔细观察那些最新的使用了视差技术的网页,你会发现这些网站所采用的视差设计已经似是而非了。这些网页中的可动元素非常之多,但是并非动画;配色风格和视觉元素趋近于扁平风,并且借用了来自Material Design的物理隐喻,融合了许多微妙的交互细节。诸多时下流行的设计手法和新趋势开始被打碎分解揉合到一起,形成了新的混合型视差滚动网页。

Tour Primer

El burro

新的混合型视差不同于以往,它不是属性单一的视差滚动,它是诸多设计手法和技术有机而无缝地结合到一起的结果,它拥有移动的背景和诸多可动元素,和早期的视差滚动非常像。

但是两者之间还是有个明显的差别,其中最明显的差异是背景,随着页面的滚动,背景的色彩会随之流转变化,其中的网页元素和视觉控件也会跟着移动,出入于网页的焦点区域。

和之前的视差滚动的技术不同的是,新的混合型视差页面中的各种元素会更加流畅无缝,你不会看到图层交互。在此之前,你会看到视差滚动页面中,某个图片层会随着滚动“溜”到某个特定的位置。

SFCD

New deal

这类混合型视差网页有一些共通的元素,除了最基本的滚动和视差效果之外,这些共有的设计手法或者设计元素构也是构成混合型视差效果不可或缺的部分。

·单页设计:为了最大限度地呈现出各种设计效果,这些网站通常会沿用之前的单页设计,有些网站会加入标准化的导航来引导用户进入其他的内页。

·大胆的版式:大胆的版式和有趣的字体也是厂家你的元素,一方面是强化视觉,另一方面会让页面的可读性更好,更加新奇有趣。

·鲜艳的色彩:这些色彩通常都采用的扁平化的配色或者Material Design 的配色。大胆,明亮,简单,尤其是背景的用色。

·多变的内容类型:这类网站采用了单页滚动的基础交互模式,图片、文字、视频、插画等多种类型的媒体会交错出现,其中各类元素交互性很强,并且通常都伴随着流畅而好玩的运动效果。

·连续的故事:很多网站会将故事作为不同类型的媒体和信息的主体脉络,用来穿针引线,勾连前后信息。视觉上,同样也会有系统化的设计脉络,这样能让用户对前后关系有明确的概念。

·高清大图:现在设计师们越来越喜欢在首页上使用高清的大图来营造视觉上的冲击力和氛围了。

·滚动说明:对于新事物,用户通常需要适当的引导才能明白交互和使用的方式,所以恰如其分的说明是很有必要的。通常网站会用一些简单的滚动或者方向性的图标和元素来引导用户。

·简单精炼的语言:由于背景是动态的,复杂的文字在这种情况下无法确保识别度,所以设计师更倾向于使用简单且具备一定引导性的文字。

Sway

混合型视差网页的设计核心还是可动的元素。但是设计师需要把握好网页中不同元素的运动和交互的微妙平衡。大幅度的、过多的运动会喧宾夺主,对于部分用户会造成眩晕的效果,真正平衡的运动效果是微妙而自然的。

当然,这种设计是有窍门的:为每一个元素的运动设定一个固定运动时间区间就好了。很简单吧?

Dolox

所以,你真正需要做的事情是,尽量不要让这些独自运动的视觉元素在用户滚动页面的时候到处乱跑。同时,网站右下角的手型图标会提醒用户向下滚动。

当你开始向下滚动的时候,运动中的元素会停止,当你停止滚动的那一刻,这些简单而微妙的运动又开始了。这个过程中,用户会体验到一种微妙的掌控感,而非眩晕,这一点很重要。

Publicis

True Trend

这种混合型视差设计是怎么开始流行的?

HTML5技术的成熟是最基础的条件。各种设计趋势的自然演进,在此交汇,使得这种设计成为了可能性。扁平化设计和Material Design 的大范围普及,自然而然地将色彩、样式和隐喻注入其中,使得它成为了一个拥有多种变量、无限可能性的多元方程。

其实当你回首当初的那些设计趋势的时候,会发现它们也同样经历了这一的过程,各种思路、风格、流派随着大众的审美和需求而自然演进,逐步成熟的技术是粘合剂,融合发酵之后,逐步形成不可抵挡的潮流。

designmodo

译文地址:优设

作者:Carrie Cousins

优设译文:@陈子木

(0)

相关推荐

  • 2015年值得关注的21个网页设计趋势

    小编话:今天给大家带来的是@设计达人网分享的2015年值得的21个网页设计趋势.网页设计的发展速度是惊人的快,2014年已经过去,我们之前有总结过去年的网页设计,现在我们不妨来展望一下今年的设计趋势. ...

  • 2015年网页设计趋势(上)

    小编:2015年已经过了这么久,作为一名UI设计师,你应该对今年的网页设计趋势略知一二了吧!我们之前已经分享了很多风格的流行趋势了,那么今天就来看看由应酷设计对网页设计趋势的见解,希望能给你带来好的灵 ...

  • 2015年网页设计趋势(下)

    小编:上次给大家分享了2015年网页设计趋势(上),今天应酷设计又带来了下篇.看一下今天的文章都带来了哪些技巧呢!其实方法都大同小异,主要是多运用.结合一下文章的图文解释理解一下吧!(温馨提示:可以点 ...

  • 2019年网页设计趋势前瞻,先睹为快!

    追随最新的网页设计趋势,紧跟设计潮流是设计师们必做的功课之一.快速更迭的网页设计趋势和网页开发技术对2019年的网页设计趋势来说必将产生直接的影响.回顾2018年的网页设计趋势,不难看出许多设计趋势都 ...

  • 【品牌维生素】浅谈当下网页设计趋势

    技术的革新带动了设计行业的的迅猛发展,这使得设计师和开发者有了更广阔的的探索天地.而网页设计也越发不再那么循规蹈矩,许多团队和公司都做了很多思考和创意.所以在我们适应着现代设计潮流的同时,不妨也来看看 ...

  • 2016年三种有趣的网页设计趋势

    设计出不同凡响的网站是许多设计师一直追求的事情,所以大家着迷各种时尚的元素,漂亮的配色,流行的趋势,复古的样式,等等.经过时间验证的经典设计.固定的搭配是不错的选择,而逐步展露头角的新趋势,则能更好的 ...

  • 再战明年!2016年火热的16个网页设计趋势

    设计趋势每年都在改变,出于各种原因,有的设计趋势在演进中逐渐消失,有的则在大家的熟练运用过程中渐入佳境,甚至逐步褪变成为主流.作为一个专注于网和平面设计的设计机构,我们对于所有相关的技术和设计趋势都极 ...

  • 2012年网页设计的十大趋势盘点

    操作方法 01 出色的网页设计师犹如造梦师,给用户创造一个梦境,让用户感觉到如此真实而不知道自己是在梦中.这样的梦需要几个元素:优秀的配色,直观的设计,良好的交互性和快的响应速度.此外,永远不要低估简 ...

  • 审视卡片式设计趋势!

    总有一些新的设计趋势蓄势待发.现在谁又能忘记视差滚动这种设计手法呢?这种网页设计趋势从几年前一直延续到现在,越来越多的用户开始认可并这种视差滚动式的网页. 而在诸多新兴的设计趋势当中,基于卡片的网页设 ...