每年各大设计博客和知名网站都会预测新一年的网页和UI设计趋势,既有相同之处,也有各家的独到见解,甚至还有相互冲突的地方。在接下来的系列文章里,将会为大家汇编(译)一些比较具有前瞻性的趋势文章供参考。
本期文章选取了Designmodo网站对2019年的网页和UI设计趋势的17条认知,主要涉及颜色选择,排版,字体使用,语音,VR界面以及UX相关的所有方面。其中有一些是在2018年后半段才开始出现,延续到2019年成为了趋势所在。
系列文章
- 2019年网页及UI设计趋势(一)
- 2019年网页及UI设计趋势(二)
- 2019年网页及UI设计趋势(三)
- 2019年网页及UI设计趋势(四)
- 2019年网页及UI设计趋势(五)
- 2019年网页及UI设计趋势(六)
- 2019年网页及UI设计趋势(七)
- 2019年网页及UI设计趋势(八)
- 2019年网页及UI设计趋势(九)
- 2019年网页及UI设计趋势(十)
2019年排名前17位的网页设计和UI趋势
Top 17 Web Design and UI Trends for 2019
- 概览 -
- 充满活力的调色板
- 情感化设计
- 立体感和几近“真实”的设计元素
- 有意义的动画
- 超现实设计和抽象设计
- 更多的语音
- 单页设计卷土重来
- 扁平化设计模拟3D
- 粗旷主义渐入主流
- 更多的渐变
- 复古字体/更多衬线字体
- 可变字体
- 专注于数据可视化
- UX写作
- 分屏设计保持增长
- 手机动画
- 更多文字
1.充满活力的调色板
鲜艳的颜色比比皆是。从渐变背景到明亮的图像叠加再到具有颜色变化的动画,充满活力的调色板将继续流行。
甚至连大名鼎鼎的潘通也通过命名一个具有明亮色调的颜色活力珊瑚色 Living Coral作为2019年流行色加入到了该流行趋势之中。但是根据调查搜集显示,明亮的蓝色可能才是最流行的选择,如Spotify或Secure Invest。
这些鲜艳的颜色中很多是从其他设计趋势演变而来的。鲜艳的颜色最早开始于扁平化设计,并随着 Material Design变成了更加充满活力的色彩,现在其中一些色调甚至还带有一些霓虹色。
这种设计趋势的好处在于一旦你有了一个调色板,颜色部署起来会非常简单。你无需重新设计网站即可将趋势元素添加到设计中去。
2.情感化设计
情感化设计的意义在于创建与用户之间的联系。
2019年,没有建立情感化联系的网站和app应用将会被遗弃。根据Design Shack所述,情感化联系分为4个基本类别:快乐和悲伤,信任与厌恶,恐惧与愤怒,以及惊讶与期待。考虑一下你的内容如何归属于这些分类,并使用颜色,图像以及用户界面进一步与用户进行连接。
设计中的每一个视觉元素都为用户提供了他们该如何应对的提示。如上图中自行车app中的动画显示了运动效果,让用户想跟着一起骑。同样的,在上图Sprout页面中,一张笑脸可以与用户建立积极的第一次互动。图像中的女子很高兴,用户可以感受其中并且想模仿这种情绪。
3.立体感和几近“真实”的设计元素
虽然虚拟现实还没有被每一个人所接受,但是它的影响已经显而易见。
越来越多的设计师正在添加更多的立体感和设计元素,使他们的项目看起来更加真实或具有实战性。这包括从具有更多三维外观的插画(甚至是动态插画)到用户看似可以触手可得的移动形状或产品的所有内容。
当越来越多的设计师使用这些技术,它们将成为用户体验中更常见以及更为期待的部分。它们也将看起来真实多一些,虚拟现实感少一些。
4.有意义的动画
网页和APP应用设计都会涉及到动画。但是这些动画需要使用有因。
动画把用户吸引到设计的某些部分中去,帮助用户参与,或兴趣提升,或讲故事。在网页项目中使用动画可以为参与到设计之中的用户提供深入的理解。
5.超现实设计和抽象设计
在我们生活的这个疯狂世界里,越来越多的设计师正将超现实主义和抽象元素应用到他们的项目中。随着越来越多的用户想要这些几近真实的体验,超现实主义设计和抽象设计将获得持续发展。
这种设计方式的工作原理可以追溯到情感化联系的理念:超现实设计和抽象设计提供了一个与用户自身相关的联系。(也许是因为更多的超现实和抽象元素允许用户在设计中描绘自己。)
这些项目通常以如下元素为例:具有一些动画,插画人物或事物以及一些用户想参与其中的活泼有趣的,卡通性质的元素。超现实和抽象设计项目的目标是保持用户参与的风格新鲜度。(我们认为这种趋势很有效,希望在未来一年能看到很多这种趋势。)
6.更多的语音
“Google, 播放我喜欢的音乐。”
在2019年,你需要设计对话界面。随着家中使用智能设备的人群越来越多,你需要开始考虑设计与这些设备进行交互的方式,以及如何创建符合人们想要使用网站的用户体验。
对设计师来说最大的变化就是理解用户将如何通过语音命令进行交互,然后通过关键词和相关操作对语音界面进行原型设计。
这会让网站上的所有内容更为重要。语音界面植根于信息和数据的“阅读”网站。因此文本内容至关重要。(这是从更多的视觉思维转变而来的。)
7.单页设计卷土重来
不久前我们宣称页面滚动已经死亡。(很明显,我们错过了那艘船。)
越来越多的设计师将部署单页设计,使用有趣的滚动效果和沉浸式故事讲述来保持用户参与。单页设计实际上在移动设备和小型设备上效果更好,因为用户可以通过菜单导航获取任何内容。并且移动用户可能是你网站数量最多的访问者,他们习惯于使用滚动效果。
不要忽视这种不断增长的用户模式。
8.扁平化设计模拟3D
三维渲染是对扁平化设计的提升。其结果就是3D的逼真效果和扁平化界面混搭,具有复杂感,视觉上很有趣,并且随处可见。
这就像是设计中的虚拟现实,不需要任何特殊的东西。
当你深入了解这个趋势的时候,你会发现使其发挥作用的是图层的立体化加上动画。
一些人开始管这种概念叫“深度扁平化 deep flat”。但是我们认为这不过是扁平化设计的一种自然演变。
9.粗旷主义渐入主流
在简约化设计统治互联网界面的方式中,粗旷主义正在开始接管 。这是所有鲜亮颜色设计的对立面。
这样描述粗旷主义(Brutalism):“数字设计中的粗旷主义是一种故意看起来原始未经处理的,随意的或未经装饰的风格。它与早期20世纪90年代风格的网站相似(想想Craigslist和Drudge Report两个网站)。有时这些粗旷主义的表现形式是赤裸裸的,几乎就是html裸站,只带有蓝色的超链接以及单色的Monospace文本。”
虽然很少有人会将这种设计风格归为漂亮,但它确实对某些内容类型具有一定的吸引力。并且具有鲜明和大胆的风格,当你偶然发现其中一个设计时,它必然会产生影响。
10.更多的渐变
渐变是多用途颜色趋势,适用于几乎任何类型的设计。看看有多少项目正在使用它就知道了。
渐变可以为几乎任何设计模式添加有趣的色彩,但最常见的可能还是那些“艺术匮乏”的项目。渐变背景可以以一种有趣的方式来突破文本元素或突出特定的内容,例如上面的Train Body Brain图例,Orion的文本元素,或为一个产品展示创造一种有趣的背景,如Mel。
2019年,渐变作为颜色趋势的最大转变就是渐变作为重要的一项技术将与明亮的颜色进行选择搭配。而2018年,渐变更像是一个照片叠加工具。现在,这项流行的技术已经有它自己的立足之地了。
11.复古字体/更多衬线字体
2019年最令人耳目一新的设计趋势之一就是向更复古的排版风格转变。
更多的衬线字体,板状衬线字体以及文字元素,看上去有老旧的感觉。这些复古风格似乎比过去几年流行的一些比较细的衬线字体更为加粗,厚重。
甚至一些知名品牌,如Mailchimp也已经转向了这种复古的排版风格。
这种设计趋势的最大诱因元素就是跨设备的更大的屏幕分辨率。曾经有人认为无衬线字体在屏幕上可读性最高,但是感谢高清晰度和高分辨率的到来,理解衬线字体已经不再是问题了。
12.可变字体
2019年,越来越多的设计师将使用可变字体使网站在跨设备上更加可读。
: “可变字体是主字体的集合,具有一个‘默认’主字体(通常是普通字体样式)和多个已注册的‘轴’,将中心主体和其它主体捆绑到一起。例如,粗细轴可能会将细体样式主体连接到普通样式主体再连接到粗体样式主体。延轴定位的独立样式称为实例。”
虽然OpenType可变字体背后的概念可能仍有些令人生畏,但它们已经开始变得更加主流。它们专为响应式设计而设计,并且可以帮助项目在不同的屏幕尺寸上看起来更加完整。
可变字体提供了你一直希望的所有灵活性。
试试下面三个可变字体:
13.专注于数据可视化
无论在哪里,似乎都有人将信息图作为设计的一部分。
视觉可视化是向用户呈现复杂信息的一种更为有趣且易于理解的方式。这种视觉格式适用于从数字到地图到理解复杂算法的所有内容,深受用户喜爱。它可以帮助人们理解内容,并且以多种方式工作,如作为静止图像,滚动面板,动画或交互游戏。
使其更为有效运作的方式就是将你的数据转换为故事。创建一个故事开头,中间和结尾,以便用户跟随信息旅程来彻底理解,从而获得更长的网页逗留时间以及更高的转化率。
14.UX写作
所有好的设计都有使用一些文本形式的信息传递元素。随着用户需要真实的网页体验,人们越来越关注用户体验的编写。
网站上所有的内容信息都旨在帮助用户更好的参与和连结到产品与服务上。艰难推销的日子已经过去了,有用且实用的内容将统治天下。
良好的用户体验写作对用户来说是有用的并且受尊重的。
用户体验写作如此重要是因为你没有很多空间,时间或者文字来讲述你的故事。因此,每句话都要直指人们想要阅读的目标以及用户结果。
15.分屏设计保持增长
你可能会跟上这里的一个主题 - 网站设计需要适应移动端客户。这就是分屏模式不断涌现的原因。
分屏设计,将桌面端的屏幕分为两个板块内容,在较小的设备上折叠成垂直的内容块,是跨设备无缝衔接用户体验设计内容的最合适的方式。
虽然多数设计开始采用这种看似相似的并排屏幕,但更多的设计开始转向内容不对称分割。这样可以为桌面端用户创建更多层次结构的设计,对于更为重要的内容可以使用更大的元素。
16.手机动画
虽然设计师已经避开在网站的移动端使用动画,但是这里会有一个包含动画的动作。
视频仍然是一个值得关注的问题,特别是iPhone用户,设备不能在网站上很好的渲染视频,但是定时动画正在逐渐普及。你甚至可能会开始在移动设备上看到更多的滚动动效,因为移动优先的想法开始占据上风了。
切记你网站的多数浏览者来自移动设备,为什么你不为这些用户进行优先设计呢?
17.更多文字 (我是认真的!)
如果2019年是文字的一年,你会感到惊讶吗?
从使用大量单词的堆叠标题到使用少量图片作为全部的设计,文本正在转换为特色元素。通过正确的排版,这个趋势会看起来很惊艳,并且可以快速向用户提供大量信息。没有良好的排版,则可能使设计变得平淡无奇而且还是灾难性的。
开始使用文本密集型设计的最简单的方式就是在首页上使用一个双行或者三行的标题。获取更多的空间给信息。这里的调整是指文本大小通常比一些流行的超大字体要小的多。记住,较小尺寸的多行文字实际上可以和较少文字的大文本字体使用相同的字体粗细。
为设计项目提供更多文本的技巧是需要使用有价值的文字。用户需要阅读文字。因此,要仔细规划设计。(不要为了写作而写作,要让每个单词都具有价值。)
(编译完)
重点关注:#情感化设计 #语音界面设计 #UX写作 #可变字体
原文作者:Carrie Cousins
原文链接:地址
原文译者:Twitter / Linkedin / 微博
以上译文仅代表原作者观点。如需转载请遵循CC版权协议正确标明出处。
网友评论