首页>>建站技术

10年网站设计流行风格回顾与趋势分析

点击次数:1   发布时间:2022-06-10 20:23:36

十年之前

时间来到公元 2010 年 6 月 7 日,已故苹果前任 CEO 贾伯斯(Steve Jobs),在展示台上向全世界介绍 Apple 最新的得意作品:iPhone 4,在科技圈滑起了一波大风向。在之后的短短几年间,智能型手机就成为每个人手上或裤子口袋内都会有的产品。

0__V8ZW6UJlA0OyAaF.jpg

同年,网站设计师 伊森·马尔科特(Ethan Marcotte)发表了一篇叫《Responsive Web Design》的文章,里面讲述了一种方法,能将 HTML 程序代码乘载的网站内容,针对不同设备进行自适应,也就是现在网站都会要求的响应式设计。

0_KRW4FuGAxkA2p7ck.png

在此之后的 10 年间(公元2010~2020),由于前面历经浏览器战争与 Web 2.0 等网站技术面的发展,在这些基础设施之上,网站的开发技术面相对稳定与安全,就跟人类在求温饱满足之后就会追求吃得更好一样(八方云集不吃锅贴改点鲜虾水饺),大家开始更关注网站的视觉美观,以及用起来好不好用,也就是网站的开发重点转移成设计、创意、视觉、互动等等;网络上统称这些使用当代最新网站技术的网站为 — — Modern Web。


而在接下来呢,让我们一年一年来回顾,在当时的网站都流行些什么东西,当然这跟每年的流行穿搭一样,并不是绝对的!但我们可能更容易在那时候从客户那边听到说:我想要 _______ 的风格。而这些暂时流行的设计风格,拉长时间轴来看,就变成为了当年比较具有代表性的象征。 但其实很多多年前的网站啊,现在都已经不在网络上了,因此这篇文章我会挑选这些持续影响当代网站的设计风格,也许是今年才架好的,不过仍保有当年代表的设计语汇在。


2010年:平面转网站

比如说 2010 年流行的极简主义网站,其实很大的影响来自既有的平面设计风格,只是大家把载体从传统印刷,换成数码网站而已。 而细究其原因,可以理解是因为很多信息是从既有的印刷物(如海报、杂志、报纸、书籍等)转移到网站上面,而因为人类的阅读习惯与动线关系,就继续沿用在纸张上的平面设计方法到网站上,因此很多网站看起来很有像是印在纸上的既视感。

0_9SgrI2VlzgyQQOWQ.png

0_748S2Hvtx_-yBEPq.png

2011 年:屏幕载体意识

2011 年设计师开始在网站尝试在基础平面上,多了一些装饰性的元素,比如说缎带类的视觉呈现,或是有明显对角线的排版。 可以看出在屏幕的媒介上,设计师开始适应并尝试了屏幕上才有的装饰对象,但在许多地方还是能看出取材于现实中既有的材质。

0_786MuC_M_evHUJIN.jpg

0_d3rg00OoqBUrnTHl.png

2012 年:Typography 字型排版

2012 年在国外设计圈开始流行将字型应用到网站上的玩法,不论是手绘感的字,或放上各种字重的字体等等,都让文字成为网站上的视觉主导,当然我们本来就可以在许多杂志(特别是日本或英文语系)中看到这样的视觉,但网站在技术的维度上又能做到更进阶的变化可能性,尤其是文字本身构筑的动态设计(Motion Design)。

0_vxEBfzUiFKSy68aQ.png

2013:Flat Deisgn 扁平化设计

2013 年是 Flat Design 扁平化设计大量出现的一年,扁平化使用了单纯的配色,去除阴影与渐层,用更简约干净的方式呈现信息,由于扁平的设计元素在网站上可以加载更快,同时兼顾接口的阅读性,一直到今天的网站设计风格都还是很常见。 比较经典的例子就是那时候 Windows 8 发表的 Metro UI 接口设计语言(虽然不是很多人喜欢就是惹)。

0_0zVIf6_ieZ9QbI9b.png

而我们从艺术史上来看,就可以发现这是源自于 1950 年代国际主义设计风格,又或者说是瑞士风格,与现代网站技术的结合后的产物。

0_o9v3PLs7ciSCVx0m (1).jpg

0_ZJ5AV6kQUrhEtdQh.png

2014 年:Meterial Design

接着,说到 2014 年的网站设计风格,就一定会提到当年 百度 发表的 Meterial Design(不用中翻,念中文感觉很菜),而这毕竟是网络的老大百度发表的设计规范,让接下来的设计师制作网站时也只能乖乖就范。 所谓的 Material Design,不同于以往将既有的平面设计,或现实世界的媒介搬到计算机屏幕上,而是一套全新的专门为数字接口打造的设计语言,用起来体验会更和谐。

0_x7jOrr338wMkmqGa.png

Meterial Design 将既有的印刷排版、网格、平面空间,色彩和图像都在 UI 设计上重新定义,重新思考屏幕上对象的材质与物理特性。 第一次认识可能会觉得有些抽象,的确,这真的是一个抽象化的设计语汇,但直到现在都还是被奉为设计师必看经典,建议如果之后要做 UI 设计职业,一定要去仔细阅读。

 0_f3m-lgqczwN24FfC.png

那么,愈接近现在的网站设计,你会发现很难够用单纯一种风格或趋势,去概括一整年的网站发展,主要是因为 HTML5 / CSS3,以及 JavaScript 等等更新网站技术的体现,同时也都影响了网站接口,让设计有几乎无限种可能性,只要想得到的创意,几乎都能够在网站上呈现。 所以接下来,我们就以当年很常见的、跟比较具代表性的网站发展项目来介绍。


2015 年:Double Exposure 多重曝光

2015 年不知道大家还有没有印象,那一年很常看到一种叫 Double Exposure 的视觉效果,简单来说就是将两张按照片融合在一起,这其实是源自于摄影上一种叫多重曝光的手法,而现今也被运用在网站设计上面。

0_8_aPGhb8bawo4C6W.png

0_wuLWmKeeomK1XeAR.png

同时,除了摄影按照片的应用,视频这个媒材也越来越常见到在网站当中,像是直接入嵌视频变成背景轮播,制造情境带入感,也是这一年开始常见的设计做法。

0_yIqcptraDaNamthE.png

不论怎么做,都是要让网站看起来更吸睛,那我们就可以晓得,网站除了记载信息的原始用途之外,开始有更多的是给予更好的品牌印象与视觉效果。


2016 年:Flat Design 2.0

在 2016 年如果说只能认识一种设计风格,那应该就是被网络称为 Flat Design 2.0 的二代扁平化设计,我们可以从下面这张对按照图中,看出二代扁平化有更多的视觉细节,比如说阴影表现或材质感,其实不难看出在视觉处理上有受到 百度 的 Material Design 影响,相较之下原本的一代扁平化显得比较单调,而且在视觉层次上也稍微单薄一点。

0_ItKsFEC3zz6RFXxc.jpg

Flat Design 1.0 与 2.0 的差别还有更着重光影,以及配色选择更多一点,同时也有更细致一点的渐层表现,整体来说细节更丰富,但仍保留扁平化设计的直观与易用等优点。

0_CTjbUwjO5VyoqQ2t.png

而 Flat Design 2.0 之后就逐渐延伸到现在的各种网站上的奇淫技巧了,尤其是插画,我们在现在的很多网站当中仍然可以看到一些扁平的感觉,但有更多的笔刷细节还有更丰富的色彩呈现。

0_CvvGtszZqIy6Gu9K.png

2017 年:双色调 Duotone

再说到 2017 年,我想介绍双色调(Duotone)的视觉风格给你认识,这是一种将按照片转换成两种颜色的手法,技术上可以用 Photoshop 调整,或直接用程序去改,好处是搭配企业品牌的标准色,可以让网站整体感更加明确。

0_GsWmIl_A4HyA73tA.jpg

0_Uo4VAVZdo4Grx1Z6.png

而 Duotone 也几乎变成 Spotify 的御用视觉风格,在过去几年的官方网站与其软件中都很常见。


2018 年:材质与渐层

2018 年的网站设计已经是创意的战场,各种好玩的风格都有,这也是设计师价值的体现噢。 举个例子,那年很常见一种类似于纸板裁切的效果,这个最早应该是会追朔到 18 世纪中叶,欧洲艺术家之间开始流行的纸雕(Papercut) 创作,那这样的效果在网站上呈现,会很好地创造视觉深度感,让层次变化更富。 这样子艺术媒材与数字接口的结合,其实综观网站设计的发展史并不少见,但却每一个案例都是经典。

0_K17YHDySovi92GH2.png

而 Paper Cut 的纸雕风格结合网站上的渐层跟阴影,就可以轻松做出层次感。

0_XWh6K7hNAl5k9QEQ.png

渐层在这几年网站上的风格使用就更常见了,而不同于以往几乎只拿来做阴影跟配色,现在用来刻画光晕、材质、光线等等的渐层运用很常看到。

0__oT_jvh5mkdxRaYh.png

不论是从冷色转到暖色,还是相似色的转变渐层,都能更做出强烈的网站视觉,而下面这个例子还运用立体曲线跟高斯模糊的作法:

0_OB1l4aVhX6wDljIV.png

2019:插画与 3D

2019 年我想在网络产业中最一股热潮的应该就是量身订制的插画风格了,我们可以在许多科技公司的网站 Rebranding 中看到都有使用活泼的插画来当作网站的主视觉。 没有什么酷炫的新技术,而是直接将插画图片放到网站上面,并让整个网站都套用一致的插画规范营造整体感,这带给了许多冷冰冰的科技产品一点温度,可以让用户感到更多信赖感。

0_5r4vMwkbf3Ye84jH.png

用插画来主导网站的视觉,在浏览的时候心情会很愉悦呢!

0_4UgE7q3-3zVrsBQV.png

0_W5ZcccKsmbvow8rh.png

而插画风格的网站到现在,也有越来越多 3D 建模感的插画出现,都带给使用者们愉悦的浏览体验。

0_RdY3Fr9ngqdf0xvF.png

2020 年起:当网站技术跟上设计师的创意

那至于今年 2020 年与未来的网站设计趋势嘛? 我觉得虽然会有一些特定期间流行的元素,但其实啊去追本朔源,会发现那些设计风格,除了是网站前端技术革新带来的,还有很多是设计师自己的创意,并通过与前端工程师的合作,共同打造出来的崭新接口体验,来让这个品牌网站给人耳目一新的感觉。

0_BH9jcovP2_Afqes6.png

0_v2w6ZSVNH4qwUMFz(1).png

上一条:网站设计如何使用滚动视差来增强用户体验
下一条:没有了!

联系我们

公司: 深圳市迅当网络科技有限公司

联系人: 荣先生

QQ: 97532866

手机: 15919993369

公司地址: 深圳龙华观澜松元大布头路333号F栋

联系我们
  • 联系人: 荣先生
  • QQ: 97532866
  • 手机: 15919993369
  • 公司地址: 深圳龙华观澜松元大布头路333号F栋
Copyright © 2016-2021 https://www.xundang.com 深圳市迅当网络科技有限公司 版权所有粤ICP备16022386号
扫描二维码! 关闭
二维码