2019年网页设计趋势——By UXPin

2019年网页设计趋势——By UXPin

本年2月26日，国外设计机构UXPin在世界顶尖网页设计网站Awwwards发布了2019年网页设计趋势。

本文译自Awwwards原标题为“UI Design

Trends for 2019: Free eBook by UXPin”的文章内容。

文章的研讨方向主要从5个方面出发

这5点分别是：

1.色彩

2.品牌

3.分屏设计

4.数据可视化

5.分层交互

关于色彩

色彩是设计的根底，经过色彩，可以与用户树立强烈的情感联络。毫无疑问，色彩依然是2019年最受重视的元素之一。

多色调突变

越来越多的网站在主页上选择两到三种色彩的突变方案，这是一种风趣且引人入胜的用色技巧，它可以帮助你的画面融入品牌色彩，发明视觉焦点。

亮堂的色彩

最斗胆、最鲜艳的色彩将主导设计。亮堂的色彩往往不那么“严肃”，并且“年轻”，正如下面所看到的，耐克和百事等品牌的网站设计中，鲜艳的色彩显而易见。做为引领潮流的偶像，其他人很可能会效仿。

色彩叠加

当涉及到运用色彩时，简直任何色调都可以叠加在图画上。色彩叠加可以帮助一切的图画保持一致的品牌感。尤其是暗色叠加，它能很大程度提升白色文本的可读性。

变得奇妙的品牌

咱们不再需求大的logo来发明更多的视觉体会。事实上，网页设计的趋势之一便是在网站上展现更少的品牌。越来越多的网站开端重视内容本身，由于内容才是用户真正想要的，而不是公司的logo。

无衬线文本logo

随着用户更多地重视内容，logo在屏幕上变得更小、更奇妙，尽管它们可能还在之前的方位——网站的左上角，可是设计本身却改变了。精心设计的图形开端消失，取而代之的是无衬线字体的简略文本logo。它们不仅简略，并且大多数都是没有色彩的，只是用了黑色或白色。（素米注：由于中文和英文的不同，此观点更适用于英文logo）

简略的图形

图形的简化也反映了品牌奇妙的改变，越来越多的logo开端变得低调，这受app的设计影响，由于在app中，品牌logo有必要小而简略，才干更容易被辨认。

打造图画的品牌感

当一张相片出现在INS上，用户会自动把它和某个品牌联络起来，这便是图画的品牌感。如何发明图画的品牌感，文章给出了以下几点建议：

运用主题相似的相片，如白色布景的产品或骑自行车的孩子（素米注：如ofo的黄色圆圈）

为相片设置一个调色板（如大多数相片都存在一个绿色的对象）

对一切相片运用相同滤镜

在图画中添加文字或是logo时，方位保持一致

分屏设计

一个屏幕，两个部分。分屏设计会越来越受欢迎，它的优点在于可以增强在小设备上的用户体会。一块大屏幕上的并排两部分内容，可以无缝衔接成小屏幕上的垂直排布，为用户供给相同的用户体会。除此之外，它还不干扰其它的设计元素，不管是动画、视频、图画、仍是插画，简直任何元素都能适应这种趋势。

并排分屏

当页面有两个平等重要的内容需求显示时，建议运用并排散布的分屏设计

不对称分屏

不对称的分屏设计可以更好的区分视觉的权重

图画与白色共存的分屏

尽管分屏存在多种形状和设计，但还有一种趋势是图画与白色共存，不管是并排散布、上下散布、仍是不对称散布。这种分屏方法，更多地重视文本和实践音讯的传递，尤其是你有很多文字内容时，这样是为了供给更洁净、更容易阅览的空间。

数据可视化

信息图形是一个很帅的元素，它是一种设计趋势，它既反映了用户对信息的巴望，又反映了技术的前进。数据可视化有各种各样的形状和形式，从简略的数字到支持事实的数字，再到能说明问题的完好的动画，这些元素在视觉上都很风趣，有助于更清晰地解释概念，辅导用户体会。

不要纠结于数字

当设计师听到“数据”这个词，首要想到的便是数字。尽管数字是数据可视化的重要组成部分，但并不是唯一的方法。杜克大学图书馆有一个包括数十种数据可视化类型的列表，其间包括：

•地图 •时间轴 •蜂房图 •网络矩阵

•列表 •甘特图 •三位计算机模型

•弧图 •树状图 •热地图 •饼图或条形图

学会讲故事

当数据可视化作为一种网站设计趋势时，它起的作用是一个有凝聚力的故事。为了获取数据而将数据放到网站上是无效的。它需求有一个清晰的目的，讲故事便是利用数据的关键方法。

Adobe将其移动研讨分解为屏幕上易于了解的数据点，鼓励用户进一步的互动。

动画效果

动画可以帮助数据锋芒毕露，它为你的数据故事供给了更有力的支撑

元素周期表。鼠标放在不同的元素上，会显示对应数据的改变。

把用户放在第一位

那些最好、最精密的数据可视化的网站，往往存在一个共同点，那便是让用户操控信息。在用户与网站开端交互之后，数据会由于用户的参与而发生改变。

分层交互

2019年最大的网站设计趋势之一是在设计中参加互动元素，让用户参与进来。

翻滚视差

经过让远景和布景彼此独立，来发明翻滚视差的效果，使一切看起来更真实。

文本分层

经过整合文本与布景，发明更多视觉交互的层级，这种方法合适笔划较粗的字体款式，这样更容易经过文本看到布景。此外，要想运用文本分层的方法，布景有必要可以被用户轻松辨认。

引入声响

网站中的音频层，可以获得用户的吸引力（但并不推荐在网结合，让屏幕上的元页中自动播放）。让它起作用的关键是声响要与视觉元素相素与音乐同步，带来身临其境的感受。