神刀安全网

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

作者: Ernesto Olivaries | 编译:Capitalist_Cat

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

作为一个注重视觉交流的网页 / 平面设计机构,我和我的团队需要时刻注意瞬息万变的设计潮流,无论是线上的还是线下的。如下是我心目中 2016 年最显著的平面设计趋势

为什么你不是设计师,也 需要知道这些 ?嗯,如果你花了很多时间写博客,你就不想让它在视觉上独特一点吗?赶紧抢在别人前头紧握潮流的方向吧:

1. 易用性

2016 年,设计将 完全为用户服务 。用户体验 (user experience, UX) 确确实实会成为下一个热门。

如果你的产品不易用,没人会关心你设计得多好看。

在 2016 年,首要的问题真的会是如何使你的用户更专注。不关心用户体验,你的在线商务想要壮大也就很难。

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

谷歌的算法变化、用户行为数据……这些都指着同一个方向,也即「 你的网站要又快又易用 」。

加载速度对于许多商务网站来说是个大问题。仅仅慢了一秒, 交易量就会降低 27% 。因此,虽说所有人都想要一个看起来很酷的网站,他们势必会更看重「快」而不是「太酷了」。

2. 响应式设计

众所周知,响应式设计不再是一个可选项了。如今, 移动端已经成为了网站的「第一屏」 。当涉及到搜索排名时,谷歌简直是在碾压那些没有良好的移动端体验的网站(他们最新的 搜索排名质量指南 中如是说)。

易用性在所有的平台上都十分重要。既然移动端已经成了第一屏, 在手机上的用户体验就是关键 。一个好的响应式设计会在手机上有 完美的 交互。向手机用户隐藏一个桌面端有的功能不再是一个可接受的解决方案了。

最简单的判断标准,如果你的用户不能在每天的地铁上用手机完整地体验、享受你的网站,你的整个网站就需要修改了。

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

2016 年,你所有的平面设计或艺术品都需要遵循响应式的逻辑。这就意味着,「没有一个尺寸或样式是普适的」。

响应式设计会触及商标,导航栏,头像,以及几乎你能想到的所有视觉元素。

最好的例子就是最近 Netflix 的商标修改。他们展示了一种全新的视觉身份,重制商标、重新设计了所有的平面材质,但他们 遵循的正是响应式设计的法则

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

图源: Webdesigner Depot

对于设计者来说,重要的是,标志品牌的元素并不需要尴尬地挤在手机或平板的屏幕上了。Netflix 被裁切过的商标就是一种解决方案。通过品牌身份的惊鸿一瞥,你 消除了由不必要的空白产生的噪音 ,一直保持 100% 的响应。

预计 2016 年会有更多的品牌采取这样的路线。

3. 由 App 启发的网页设计

意料之中的是,人们越来越习惯于在原生 app 中享受更流畅的浏览体验。设计师早就建议,网页应该从 app 设计的快速成功中吸取经验(速度快,无干扰,量身定制的用户体验)。

如今,经销商正赶上这股潮流。过去有一段时间,登陆界面不怎么被人认可,而现在越来越多的商家把他们又引进来,或是为了增加一些类似 app 的功能,或是提供一种专属感,因为互联网正被逐渐稀释。

删除所有不必要的信息 ,让用户以最快的速度与你的网站内容交互。

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

4. 巧妙的菜单

有些人已经开始讨厌现在无处不在的「汉堡菜单」或导航按钮了。这些菜单和按钮即使拙劣,也是向更直观的交互体验迈出了第一步。现在,和巧妙的菜单们打个招呼吧。

基于用户的操作,不知从什么地方冒出来的 隐藏菜单 即将变成常规。再次重申,要紧的理念就是用户在阅读当下最重要的内容时,不应该受干扰。

即使我们目前找不到,但是直觉告诉我们, 每一个网站都有一个菜 。因此无需担心,它在我们需要的时候总会出现。

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

专家预测巧妙 / 隐藏的菜单将会充分适应 多方向滚动 。它会长什么样呢?因为这是一个新的,正在发展的潮流,没有清晰的标准,不同形式层出不穷。

Designmodo 列出了一张使用隐藏式菜单的高端网站的 清单 ,你可以挑选一个自己喜欢的。

5. 模块和模块化文字

没有人喜欢读一大坨文字,对吧?

在互联网上拆分长文字的第一个技巧,就是试着用较短的段落(发现没有,我就一直在这么做)。但是随后,设计搬来了援兵,为网页布局提供了一种模块化的解决方案。

模块化设计 是把所有的要素都以块状方格的组合展现出来。但这并不是无聊的组合,不是像国际象棋棋盘那样。事实上恰恰相反:难以预测组合的形式,使我们阅读更为方便,也能把我们的注意力吸引至网站 / 宣传册 / 书籍等等的不同角落。

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

图源: Well Made Studio

就好像读一本杂志,当我们能从一个模块跳着看另一个模块,而内容的类型也随之改变的时候,一个网页读起来也就更好玩了。

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

6. 模块化滚动与无限滚动

模块化趋势最新的动作是什么? 模块化滚动 。意思就是,网站上的每一个模块都能独立于其他模块,各自滚动。

听起来太复杂了?其实并不复杂。事实上,你也许已经见过它好多次了(虽然有时它不那么显而易见),一些网站的侧边栏与主栏内容的滚动速度不一样。

但这一切还会变得更好。想象一个网站被分为两栏,各自独立滚动,就比如 这个网站

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

这一切都是从 无限滚动 开始的,你也许在 2015 年就注意到这个趋势。一些当今世界最受欢迎的网站就应用了这个设计,比如 Pinterest, Twitter Facebook 。凭什么其他人就不能用呢?

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

无限滚动和模块化滚动都基于同一个前提:向下滚动 比单击简单而且快速得多 ,而且并不需要停下来加载另一个网页,打扰了用户的阅读体验。实现的方式是当用户下拉时,自动淡入新的内容。

这样一来,用户在类似 Pinterest 和 Facebook 的社交网站上,平均每一页停留时间长得令人惊讶,也就并不是什么奇怪的事了。如果内容对了受众的胃口,无限滚动也许很能让人上瘾。

Time.com 的弹跳率 (译注:bounce rate, 指访问主页后极短的时间内不作任何操作,直接离开的用户占总用户数的百分比)  在使用无限滚动后降低了 15 个百分点。 (数据来源)

7. Material Design

Material design 自从 2013 年起就出现在这种趋势预言列表中了,但 2015 年它才获得广泛应用。

然而如果你觉得 2015 年是 material design 最风光的一年,那你就错了。见于网页、app、艺术品中的材质化设计会在 2016 年得到最充分的应用。2016 年会由 material design 统治。

这意味着谷歌在与苹果的竞争中好好地打了一次胜仗—— 还是在设计领域! 令人惊讶,不是么。

因此期待着到处都出现这些 长条的有质感的阴影

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

8. 扁平化设计

即使 material design 的出现是为了拯救扁平化设计的一些应用缺陷,但这并不能表明扁平化已死。事实上,2016 年 扁平化的潮流 将会愈演愈烈。

在过去的几年里,随着许多大品牌应用了扁平化设计,大量的用户都意识到,在设计领域,「 少即是多 。」

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

图源: Brafton

除此之外,扁平化网页设计还有 另一项用户体验优势 :图片小了很多,不会增加许多不必要的加载时间。

扁平化设计的基本要领将被广泛应用于小品牌和诸多博客的图案上 (比如, 虚拟按钮 ) 。同时,那些了解平面设计原理的人们会逐渐开始采用 扁平化 2.0 (一种加入了三维效果,更易用的扁平化设计的衍伸)。

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

9. 用视觉讲故事

你也许听过流言说「讲故事」即将变成下一股潮流。猜猜看下一股「大」潮流是什么? 用视觉讲故事

一些数据:

  • 全世界有 1 亿人口每天至少看一个视频;
  • 看完视频以后,网站访客购买产品的可能性提高了 64% ;
  • 80% 的观众在看完广告后 30 天依然记得这个广告;
  • 在移动端看视频的观众中,有 94% 看完后会把视频分享给其他人;
  • 人类的大脑处理视觉元素的速度是处理文字速度的 60000 倍。( 数据来源 )

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

10. 信息图表

你还能举出比一张 整洁的信息图表 更有效地传递故事或信息的方式吗?

信息图表在众多数字市场渠道上流行——社交媒体,站长管理,内容营销,等等——是有原因的。所有人都喜欢一张好的信息图表,而且最重要的是,他们喜欢看到结论: 信息图表分享的次数是任何其他的视觉内容的 3 倍

好吧,在这个话题上我可能是有些不公正,因为信息图表是 我的饭碗

无论如何,2016 年引领时代风潮的将是什么样的信息图表呢?我觉得基于无聊而陈旧的模板制作成的图表要过时了。写三四个列表项目,再加一些可爱的项目符号,不再会起到什么作用。

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

是时候把 信息图表讲故事的能力可视化数据的深刻见解 融合在一起了。信息图表和大数据?听起来像是时髦的在线营销策略最疯狂的想象,可是它已经实现了。

来看看我一些最有才华的同行们的作品:

27 个历史上最伟大的思想家的睡眠时间

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

5 种不同的动物扇动翅膀的方式

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

由农业区域化支撑起的国家地图集

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

幸运的是,不久的将来我们就会看到越来越多的这样的作品。

11. 酷炫的字体

好的信息图表设计师必备的东西:一两种酷炫的字体。

随着 字体 越来越成为任何严肃的品牌树立不可分割的一部分,大众也逐渐习惯于在各种地方看到艺术化的字体。

字体本身就是一种语言。几年前,只有设计师才能使用和理解这门语言。现在,得益于在线字体的增加与普及,更多的人有了接触字体的途径。

又是一个谷歌的胜利:谷歌在线字体促使更多人抛弃 Arial ,采用更酷更新的字体 (虽说 Lobster 这款字体已经被滥用了;拜托你们别用了,谢谢合作) 。

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

2016 年即将目睹大字号、斜体、全大写的商标和标题的回归。字体的另一大潮流来自亲手用钢笔设计字体的人们。因此,手绘的图画也会成为潮流。

12. 现代复古风

现代复古风很酷。 起初它只是图标设计领域的一个潮流,如今已经渗透至网页和平面设计的角角落落。

但是随着时代的进步,复古的含义也许会有一些细微的变化。以前所谓的复古指代 20 世纪早期 至 60 年代这一段时间。现代复古充满了对电脑刚产生时候的情景的回忆:想想那些老式的电子游戏,像素艺术,巨大的手机,《 电子世界争霸赛》 (译注:1982 年美国科幻电影) ,《百战天龙》(译注:1985 年美国枪战动作片)——好像有什么奇怪的东西混进来了……不管怎么说,70 年代晚期到 90 年代早期视觉领域流行过的东西,都回来了!

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

图源: Oxygen Agency

有些人把它叫做技术宅的文化。那以后我就是技术宅咯。

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

13. 鲜艳的色彩

每当选择色彩的时候,80 年代就统治了一切。准备好目睹一个浓墨重彩的世界吧!

无论怎样,都不要选一个无聊的,看起来像被水冲淡了的颜色。我可警告过你啦。

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

14. 网格化和几何图形化

正如我在第 5 条里说的那样,2016 年的网页设计会比过去更加基于网格。以至于网格式布局即将成为 CSS 的一个功能

但网格并不只会引领网页设计。它对任何平面设计作品都有印象,也渗透进了当下另一个潮流:几何图形化、图案化。

这并不是一件出人意料的事,因为现代极简设计受到了瑞士风格的启发,而瑞士风格其中一条重要的原则就是:一切都应该根据网格排列。

Pinterest 和其他一切基于卡片的网页设计铺平了道路,现在大家都走在这条大路上。

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

但是每一股潮流都有它的坏处,专家们也预测,作为处处可见的几何体的回应, 自由形状 也会增加。自由形状基本上与几何体相同,但是这里那里会凹凸不平。

边缘粗犷、徒手绘制的图形是新垃圾摇滚主义的标志,2016 年也会大放异彩。

15. 灭亡吧!库存照片

人们终于开始意识到,库存照片是你能放在网站上的最无聊、最没有创意的东西之一。库存照片的落伍理应在一年之前就开始了,但 2016 年,网站设计师和在线商务会真正开始促成库存照片的灭亡。

有趣的是,2015 年正是一大群免费的库存照片网站上线的一年,目的是为所有人的网站提供有品质的库存照片。猜猜结果是什么?所有人都 选择了完全相同的图片 ,你在网上,到处可见一模一样的图片。

干嘛要用库存照片呢?你有 成千上万的替代品 。请使用为你的网站定制的图片,可以是你自己做的,也可以是专业人员做的。 手绘的插画 怎么样?(2016 年你会看到很多手绘插画) 或者一个定制的图形?

或是更进一步,来一个视频怎么样?

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

16. 视频和 GIF 图片

你也许已经注意到一些用视频做背景的酷炫的网站。虽然这些网站中的大多数加载时间的确很长,但人们一旦意识到视频需要尽可能地被压缩,这一现状就能被改变。(这里有 如何制作一流的背景视频的 10 条建议。 )

更重要的是,视频会在除了网站背景以外的很多地方代替图片。类似 VineSnapchat 这样的网站养成了我们对着短视频的脑残循环发呆的习惯。

注意那些不再是图片的头像,它们也可能是一段视频 (你嘟着嘴,眯着眼……)

Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

而最最重要的是,当心动态 GIF 的入侵。Facebook 当初打开了潘多拉的魔盒,现在 GIF 即将随处可见了。

顺便,这里有 2015 年最搞笑的 15 张 GIF

好啦,我 16 条说完了。如果你想要走在网页和平面设计潮流的前沿,我可以给你指明一些 有用的工具

你怎么想呢:我的预言是会十分准确,还是会彻底失败?请在评论里告诉我。

推荐最多的评论:

Ferdinand Vogler ,一个还真挺喜欢写代码的设计师。

==========

紧随时代的步伐!

易用性和响应式设计是一个好的设计的基础,并不是时代的潮流。很多想法是正确的,但我还想在一些地方做一些评论。

4. 隐藏式菜单

基于用户的操作,不知从什么地方冒出来的隐藏菜单即将变成常规。

「不知从什么地方冒出来」的东西从来不是什么好东西。如果你有一个作品展示网站,只有 4 个导航标签,也没什么必要像 Codrops 那样,用花里胡哨的「画布外 SVG 变形」模板把它们藏起来。

6. 模块化滚动与无限滚动

模块化趋势最新的动作是什么?模块化滚动。意思就是,网站上的每一个模块都能独立于其他模块,各自滚动。

我只恳求你做一件事:问三遍这个问题,这个真的对你的内容有帮助吗?还是你只是想把页面做得好看一点?只要你别打扰我触摸板的自然滚动行为,我们就还能做朋友。谷歌一下 滚动劫持

一些当今世界最受欢迎的网站就应用了这个设计,比如 Pinterest, Twitter 和 Facebook 。凭什么其他人就不能用呢?

取决于你要设计什么样的网站。对于一些大型的信息网站,信息流永不停歇地涌入,也许这样的设计会很有道理 (Twitter) 。我个人喜欢享受完整地读完一篇文章的满足感,不喜欢网站自动加载下一篇与我刚才读的完全无关的文章。

7. Material design

因此期待着到处都出现这些长条的有质感的阴影。

求你了,别。

8. 扁平化设计

在过去的几年里,随着许多大品牌应用了扁平化设计,大量的用户都意识到,在设计领域,「少即是多。」

扁平化是网页设计的自然演化方向,它多多少少回归了设计的本源。但类似谷歌和 Verizon 这样的图标修改,也正变得不那么独特,不那么令人印象深刻。我必须承认我很欣赏 谷歌图标设计中的工程思想 ——他们成功把图片从 14000 字节减到约 300 字节。 但是 ,这些开发细节并不为普通用户所知,也只能使很少一部分人惊叹。

除此之外,扁平化网页设计还有另一项用户体验优势:图片小了很多,不会增加许多不必要的加载时间。

扁平化设计和图片大小有什么关系?你是想说扁平化设计不模仿木头或皮革之类的材质,就可以节省背景图片空间吗?

11. 酷炫的字体

好的信息图表设计师必备的东西:一两种酷炫的字体。

你是怎么得出这个结论的?字体总是为目的服务。在 Medium 上,更好的选择是寻找一款增强可读性,数字显示清晰的字体。如果你在做一幅插画——行吧,为字体疯狂去好了。但是信息图表的名字里就已经含有它的目的。

[…] 谷歌在线字体促使更多人抛弃 Arial ,采用更酷更新的字体 (虽说 Lobster 这款字体已经被滥用了;拜托你们别用了,谢谢合作) 。

像 Garamond, Baskerville 或 Caslon 这些字体,它们的历史可以上溯至 16 世纪,可如今我们还在用它们。一款字体「更酷更新」,并不能说明它是一款好字体。如果 Lobster 能为你的内容服务,能最好地表达你想表达的情绪,那就用吧。但不要只因为很多人用它,就把它抛弃。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Medium | 2016 年值得关注的 16 个网页 / 平面设计趋势(编译)

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮