2019年网页及UI设计趋势(二)

0.299字数 3445阅读 924

每年各大设计博客和知名网站都会预测新一年的网页和UI设计趋势,既有相同之处,也有各家的独到见解,甚至还有相互冲突的地方。在接下来的系列文章里,将会为大家汇编(译)一些比较具有前瞻性的趋势文章供参考。

本期文章选取了The Next Web网站对2019年网页设计趋势的展望,主要涉及布局,颜色,排版,导航,空白边等。

系列文章

2019年10个激动人心的网页设计趋势
10 exciting web design trends you can’t hide from in 2019

概览
  1. 冲破网格和不对称布局
  2. 流体/有机设计和元素
  3. 怀旧/回归/复古设计美学
  4. 更多增强/提升的图像处理
  5. 单色或无色
  6. 重叠设计元素
  7. 重新构想的英雄和标题区域
  8. 大型试验性导航
  9. 大量留白区域
  10. 突破排版界限

1.冲破网格和不对称布局

这条趋势在2018年曾经提到过,不过看似2019年才是它的爆发之年。

设计术语中的网格概念是指具有水平和垂直线的假想平面,用来帮助页面和屏幕进行元素布局。对于大多数的网站而言,网格很容易识别。例如,你可以向下看网站的左侧,网站logo,标题,以及内容 ,在大多数情况下是排列在一起的。当你遇到一个冲破的网格,即平面上的内容通过某种方式进行摆放,看上去不再那么僵硬,换句话说就是把网格破坏掉了。

image

Times Talks网站展示了一个被冲破的网格布局,贯穿整个网站,特别是在英雄部分(上图所示)以及网站不同的内容块之间。

这种出乎意料,打破边界,不对称的设计方式已经存在一段时间了。它曾经被视为一种标新立异的技术,用来吸引目光,改变设计体验。但是到了2019年,这种设计更多的会成为一种设计准则,并且在互联网上变的越来越普通。

image

Studio Revele在主页设计上使用了一个不对称和冲破网格的网站设计(圆圈可以在屏幕上移动,以帮助更好的促进冲破网格概念的形成)

在2019年,我期望看到更多的使用冲破网格和不对称的布局,因为我们开始摆脱近年来严格的网格化模式。通过在网页设计中使用网格和不对称设计的体验试验,我预计这种趋势会变得越来越普遍。

2.流体/有机设计和元素

慢慢地,我们越来越远离扁平化设计所带来的直线,并开始尝试更加流动的形状和线条。这种类型的形状,不是典型的圆圈,正方形,矩形,或任何直边型,通常被称为流体或有机形状。

image

Wandering Aimfully主页上的一小部分,在圆形图像下面使用了有机形状和线条,并且在标题下面使用了一个淡雅的背景。

通过摆脱我们习惯于在网上使用的直线和近临界线,并使用来在于大自然或生命的绘画元素来替换它们(比如池塘和湖泊的形状,撕碎的纸片),这些有机形状和线条可以让设计更加平易近人,近通人性。

image

Mawla的网站在主页上使用了有机形状和线条,特别是在英雄区域。

进入2019年,长期以来在网页设计中使用的典型形状(圆形和正方形)将开始被越来越多的有机形状和线条所替代,从而带来全新的设计元素并影响到整个网站设计。

3.怀旧/回归/复古设计美学

旧的再次变成新的。我们从扁平化设计继续向前迈进,试验不停息,老式设计元素中带有怀旧的味道似乎时机已成熟。

image

Statamic的网站设计采用了复古配色方案,让人联想到20世纪80年代的明亮色彩和图像。

怀旧复古的设计风格可以在过去与现在的设计之间创造一个很好的并行空间。更有趣的是,我们可以通过使用这种反映时代复古设计的风格,为更多的人制造出“焕然一新”的感觉。

image

Great Jones网站使用了典型的20世纪70年代的字体和配色方案,这是1983年ARPANET之前普遍的设计审美。

我预计会看到更多的网站拥抱不同的设计风格,无论是在网站本身的设计还是在内容方面都都能适合过去的时代。这些有旧时特点的元素可以包括怀旧的配色方案和排版,让我们回想起不同的时代。

4.更多增强/提升的图像处理

图像通常总会呈现出独特的设计机会,特别是在互联网上。将图片置于圆圈中,使它们变成黑白图片,添加阴影,所有这些都是设计师们用来增强和(或)引起对网站图像关注的技术手段。

image

KOBU的网站使用了带有切割对象的图片来代替标准图像,允许设计在团队成员的“剪切”中流动。

进一步采取图像处理可以引起对图像的注意或者甚至将注意力从图像上拉开。大多数网站都会有一个非常大的英雄风格的图像,跨越整个网站的宽度,占据很大的高度,而不是更多的改变图像。我相信,改变图像的呈现方式是一种设计趋势,会在2019年大放异彩。

image

Drip网站的图片被剪切过,并添加了绘画和形状来进一步增强图片,这也更加强调了网站本身的设计。

与其执行一种方式的图像处理,更希望看到网站图层化的图像处理方式,以此来推动图像尽可能吸引到更多的注意力或者远离注意力。堆叠设计处理方式,比如制作单色图像,剪切物体,或者在上面添加图案制作一个全新的图像,在2019年的网页设计中可能会更加突出。

5.单色或无色

拥有数以百计的颜色固然很酷,但是如果你把颜色限制到一个甚至没有呢?如果处理得好,那么这种类型的设计将会帮助增强设计并使其更加难忘。

image

Digital Bro的网站坚持使用非常单一的配色方案,黄色及其明度与纯度随之调整的延伸黄色(黑色和白色可以考虑为中性色)。

限制使用一种颜色可以帮助巩固你的品牌识别,同时在设计灵活性方面增加约束。大多数网站都会使用2到5种颜色,那么只使用一种颜色将会让你的网站脱颖而出,并让你的网站浏览者记忆深刻。

image

Climate的网站坚持使用灰色系的配色方案,没有任何其他颜色,甚至连网站上的视频都是灰白的。

如果你正在寻找一种简化你的调色板的方式,那么更进一步去除所有颜色无疑是一个不错的选择 (在艺术和设计中,黑色,白色以及灰色不会作为颜色考虑,它们属于中性色)。2019年,我希望更多的网站使用更好的颜色或者根本没有颜色。

6.重叠设计元素

和冲破网格布局及不对称密切相关,在页面特定类型的内容上使物体彼此重叠会带来视觉上的趣味性。这可以带来意想不到的元素,因为我们已经习惯了网页上的元素有自己的空间并且与周围的元素分离开来(通常不会彼此接触)。

image

Mad Studio网站将重叠元素作为整个网站的主要设计美学,并通过微妙的动画增强使网站看上去三维立体感更强。

经过仔细考虑以后,页面上的重叠元素可以帮助提高网站的整体美感。但是这对于移动优先来说执行起来并不容易,如果重叠元素没有处理好,元素以错误的方式重叠的时候会给用户带来困扰。

image

Hers在网站中的一部分内容使用了重叠元素,包括首页的主要英雄区域。

使用重叠元素,让它们共享相似的空间是一种趋势,在2019年会越来越普遍,并且开始越来越多的尝试三维立体效果。

7.重新构想的英雄和标题区域

如前所述,大多数英雄区域(通常理解为“首页上方”)都是由一张跨越大部分可视区域的大图构成的,通常上面还会有一些文字吸引浏览者的注意力。在过去几年,对网站这块区域(可以说是最重要的区域)进行的试验并不多。

image

Zoo Creative的英雄区域使用了一个独特的方法。将英雄区域视为公告牌,并巧妙运用了动画。

虽然一些网站已经开始突破其英雄/标题区域的可能性,但是当我们离开典型的“全尺寸图像文本叠加”形式的英雄样式时,我希望开始看到越来越多的网页设计师对该区域进行更多的试验性操作。

image

Andreas Nymark网站使用了一个大量留白空间的英雄区域,在区域下面有一句简单的标题(涉及到文章后面会提到的一个趋势)。

2019年,我希望对网站上这个重要的区域进行不同类型的试验,包括最小化区域,改变现有内容(以及使用不同于全屏幕尺寸的图像内容),并且更加重视这一领域,在第一手时间抓住用户的注意力。

8.大型试验性导航

看上去每一年的设计趋势都会涉及到网站导航这一块。估计是因为这块是页面进行设计时最艰难的元素。这对我们如何使用网站至关重要,但是既要保持功能性又要保持美观很难。

image

56 Digital’网站使用了一个相当大的导航,将其置于网站中间,区别于其他网站放置于较小位置。

2019年的设计趋势还是会看到更多用于导航的试验。但是不仅仅是更改页面上的位置,字体大小,甚至是布局本身,试验很可能在2019年有所突破,比如将导航作为网站的主要部分,或者将它设计的非常大足以成为焦点。

image

Gander的网站导航非常大,并且放置于页面的四个边角,区别于典型的顶部或底部导航栏。

随着试验性导航在2109年设计趋势中越来越重要,我们可以期待看到非常大的导航,网站首页除了导航没有别的内容,以及具有复杂动画效果的导航。

9.大量留白区域

有效的使用空白区域是设计师们用了数十年的设计工具。然而,一种不常见的方式是大量空白区域的使用导致焦点全都放在了空白区域上而非内容上。

image

Daniel Boddam网站在网站头部使用了额外的空白区域,从而使注意力全都聚焦于此,而不是通常应该填满内容的区域。

以这种方式额外使用空白区域反映了我们通常使用空白区域的原因,添加空白边或者空间以便让我们的眼睛得以休息。现在添加额外的空白区域有助于将其作为设计美学的焦点或更引人注目的部分。通过在不必要的位置添加空白区域,可以使空白区域成为设计中的重要部分,并且更能引起用户的注意。

image

Maxime Rimbert网站使用了一个大面积的空白区域,来帮助用户将注意力放在下面的作品集上,并且从视觉上同介绍文字拉开距离。

2019年,我们可能会看到网站使用了大量的空白区域用来做声明或者使其成为网站的焦点。过去,我们可能认为使用额外的空白空间是一种浪费,但是现在的趋势可能是它给空间增加了一些额外的意义。

10.突破排版界限

虽然尝试排版对于设计师来说总是有所期待的,但是与印刷品相比,在网页中突破排版界限还是比较难的。随着编码越来越复杂,排版试验也将变得越来越容易 。

image

Kurppa Hosk网站通过添加动画和用户交互进行排版试验。字体爆炸并且在用户的光标周围形成一个圆圈。

试验和突破排版界限可能包括故意减掉字母和单词的部分(依靠负空间填写其它字母),图像内嵌于排版,延对角线或形状进行排版,动态排版等等。

image

ARCHE68网站突破二维空间排版限制,使其接近三维空间。排版不仅伴随动效,而且可以左右自动滚动,并随用户光标移动上下滚动。(你可以看到它们的导航设计,正是之前提到的另外一个设计趋势。)

2019年,排版试验和推动网站类型的可能性将成为新式网页设计的趋势。由于印刷排版相对容易,我们希望在网页上也能够看到同印刷排版相同的排版方式,这可以通过学习新的排版编码方式来实现。

(编译完)


重点关注:#冲破网格和不对称布局 #流体或有机形状 #重叠设计元素


英文原文:地址
原文作者:Amber Leigh Turner
原文译者:Twitter / Linkedin / 微博

以上译文仅代表原作者观点。如需转载请遵循CC版权协议正确标明出处。

推荐阅读更多精彩内容