您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

成长值达到300分以上才可以发布哟!~

先看看别人的即刻>

2019网页设计趋势了解一下?

原创文章 分类: 经验/观点 版权:
26042 756 689 20
更新于:2019-04-28
206.6
首页推荐

今年2月26日,国外设计机构UXPin在国际顶尖网页设计网站Awwwards发布了2019年网页设计趋势。


全文共66页,知道你们懒,所以这次小编特意为大家提练了一些重点信息!


文章的研究方向主要从5个方面出发,这5点分别是:

1.颜色

2.品牌

3.分屏设计

4.数据可视化

5.分层交互


• 关于颜色 •

颜色是设计的基础,通过颜色,能够与用户建立强烈的情感联系。毫无疑问,在2019年,颜色依然是最受关注的元素之一。


多色调渐变

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

Image title

Orion Icon Library

Image title

Michael


明亮的色彩

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

Image title

百事

Image title

耐克


色彩叠加

当涉及到使用颜色时,几乎任何色调都可以叠加在图像上。色彩叠加能够帮助所有的图像保持一致的品牌感。尤其是暗色叠加,它能很大程度提升白色文本的可读性。

Image title

eDesign Interactive

Image title

Beautiful Minds


• 变得微妙的品牌 •

我们不再需要大的logo来创造更多的视觉体验。事实上,网页设计的趋势之一就是在网站上展示更少的品牌。越来越多的网站开始关注内容本身,因为内容才是用户真正想要的,而不是公司的logo。


无衬线文本logo

随着用户更多地关注内容,logo在屏幕上变得更小、更微妙,虽然它们可能还在之前的位置——网站的左上角,但是设计本身却变化了。精心设计的图形开始消失,取而代之的是无衬线字体的简单文本logo。它们不仅简单,而且大多数都是没有颜色的,仅仅用了黑色或白色。(UIMAX注:由于中文和英文的不同,此观点更适用于英文logo)

Image title

LIMITLESS


简单的图形

图形的简化也反映了品牌微妙的转变,越来越多的logo开始变得低调,这受app的设计影响,因为在app中,品牌logo必须小而简单,才能更容易被识别。

Image title

达美乐


• 打造图像的品牌感 •

当一张照片出现在INS上,用户会主动把它和某个品牌联系起来,这就是图像的品牌感。如何创造图像的品牌感,文章给出了以下几点建议:

•使用主题相似的照片,如白色背景的产品或骑自行车的孩子(UIMAX注:如ofo的黄色圆圈)

•为照片设置一个调色板(如大多数照片都存在一个绿色的对象)

•对所有照片使用相同滤镜

•在图像中添加文字或是logo时,位置保持一致

Image title

ofo


• 分屏设计 •

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


并排分屏

当页面有两个同等重要的内容需要显示时,建议使用并排分布的分屏设计

Image title

Chekhov


上下分屏

Image title

Acrylice


不对称分屏

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

Image title

Weima


图像与白色共存的分屏

尽管分屏存在多种形状和设计,但还有一种趋势是图像与白色共存,不管是并排分布、上下分布、还是不对称分布。这种分屏方式,更多地关注文本和实际消息的传递,尤其是你有很多文字内容时,这样是为了提供更干净、更容易阅读的空间。

Image title

Yoke


• 数据可视化 •

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


不要纠结于数字

当设计师听到“数据”这个词,首先想到的就是数字。虽然数字是数据可视化的重要组成部分,但并不是唯一的方法。杜克大学图书馆有一个包含数十种数据可视化类型的列表,其中包括:

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

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

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

Image title

Brand Love Score


学会讲故事

当数据可视化作为一种网站设计趋势时,它起的作用是一个有凝聚力的故事。为了获取数据而将数据放到网站上是无效的。它需要有一个明确的目的,讲故事就是利用数据的关键方式。

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

Image title


动画效果

动画能够帮助数据脱颖而出,它为你的数据故事提供了更有力的支撑

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

Image title


把用户放在第一位

那些最好、最精细的数据可视化的网站,往往存在一个共同点,那就是让用户控制信息。在用户与网站开始交互之后,数据会因为用户的参与而发生变化。


• 分层交互 •

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


滚动视差

通过让前景和背景相互独立,来创造滚动视差的效果,使一切看起来更真实。

Image title


文本分层

通过整合文本与背景,创造更多视觉交互的层级,这种方式适合笔划较粗的字体样式,这样更容易通过文本看到背景。此外,要想使用文本分层的方式,背景必须能够被用户轻松识别。

Image title


引入声音

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

UImax

155粉丝/0关注

老马识途首页新秀
世界水日,那些让人眼前一亮的公益广告盘点那些令人绝望的设计
1
龙龙龙的妞妞

沙发

精彩!

扫描二维码
去手机端查看海报

UImax

TA已经获得3枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN

Cw9sdfed

朕收下了