打开新世界的大门！悄然流行的混合型视差网页设计趋势

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

了解新趋势

Tour Primer

El burro

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

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

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

基本元素

SFCD

New deal

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

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

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

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

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

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

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

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

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

选择合适的运动方式

Sway

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

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

Dolox

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

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

走向成熟

Publicis

True Trend

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

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

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

【优设酷站22连发！】

1. 免费图库+导航收集站： 《酷站两连发！高品质免费图库站+专注WEB/APP导航收集站》
2. 音乐站+字体搜索： 《酷站两连发！帮你专心工作的音乐站+谷歌字体在线搜索神器》
3. 渐变色+代码比较： 《酷站两连发！渐变色方案全聚合网站+在线代码比较神器》
4. 配色+占位图： 《酷站两连发！在线色彩搭配工具+快速生成占位图片器》
5. LOGO下载+ 字体下载 ： 《酷站两连发！可商用的矢量LOGO下载+平面最爱的27款免费字体》
6. 压缩图片+在线配色： 《酷站两连发！在线图片压缩神器+在线配色工具COLOURCO》
7. CSS Hover动画+宠物小精灵配色： 《酷站两连发！宠物小精灵专属配色网站+CSS HOVER动画收集站》
8. 美女图片+游戏配色： 《酷站两连发！游戏配色网站+免费美女素材特供网站》
9. 在线配色+字体推荐： 《酷站两连发！在线配色神器+英文字体推荐网站》
10. 追波作品变代码+16进制颜色： 《酷站两连发！用代码呈现DRIBBBLE作品+16进制颜色网站》
11. 无缝纹理+多边形背景： 《酷站两连发！专注无缝纹理素材站+多边形背景生成器》

原文地址： designmodo
原文作者： Carrie Cousins
优设译文： @陈子木