恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

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

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
2019网页设计趋势了解一下?
0.0°
2019-04-28 原创文章 经验/观点 举报 6256 770 696 20

今年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


引入声音

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

更新:2019-04-28

收藏

770人已收藏

  • 25

    作品

  • 172

    粉丝

  • 0

    关注

  • 世界水日,那些让人眼前一亮的公益广告
  • 盘点那些令人绝望的设计
  • 浅谈简约交互设计四策略
  • 10大可用性启发式算法丨UIMAX设计思考
相关标签
设计用户体验ui

    猜你喜欢

      2019-04-28 原创文章 经验/观点 举报 6256 770 696 20

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

      0.0°

      你确定要举报2019网页设计趋势了解一下?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年03月07日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      696
      770
      20

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录