2017年仨最新网站设计趋势 :小字体、几何分层、模糊背景视频

发布日期:2017-06-12
浏览次数:84
  
 
 
2017年已经过半,今年的网站中究竟流行哪些设计趋势?除了老生常谈的扁平化设计、经典的极简主义、火热的卡片式设计等,设计圈还有什么新风向吗?据小飞仔细观察,目前有一些比较小巧的设计趋势正悄然兴起,它们并不是什么新概念,而是涉及到网站中各种元素如排版、图像等方面的小技巧。这些设计趋势由于使用人数不多,简单易用等特点还没引起大家足够的重视,但它们可不能小觑。俗话说的好,星星之火,可以燎原嘛!一点点小改变常常能带来大不同。这几种设计趋势也是一样,虽然看上去不太起眼,但应用在网站中却能让其大变身,使网站更加出彩、更有设计感。话不多说,接下来就和小飞一起看看这些设计趋势吧!
 
 
 

1.小字体排版

前段时间,网站设计师们都在追求超大的字体排版,认为大字体排版能够给访客带来别具一格的视觉感受,给访客留下深刻印象。其实这种设计趋势也有自己的缺点,由于经常使用粗大的字体或大写英文字母,访客在浏览时常常不能很快辨认出来,加重了阅读负担。而小字体排版就是这样应运而生的,虽然一些设计师仍然使用大字体排版,但不少人已经开始投入小字体排版的怀抱了,在网站的各个元素开始使用这种设计,从标题、主题文本再到主体文本。
小文字排版有不少好处。较小的字体看上去更加柔和,能够给用户提供更加舒适的浏览体验。另外,标题、主题、主体等文本字体较小可以给网站的其他元素腾出空间,让设计师有更多发挥的余地。可能有些人会担心字体较小会影响网站内容的可读性,特别是将小字体排版应用在主体文本时。其实,这正是我们做小文本排版时需要注意的问题。在网站中使用较小的文字并不是一味、无底线的缩小字体,更重要的是根据网站的整体布局,合理的选择字体类型,考虑到访客浏览的舒适度以及有效复制的便捷性。下面是有关小文本排版的3个范例:
 
 
 

Moonfarmer

Moonfarmer在Logo上使用了较小的字体(相对大字体排版而言),而在二级副本上用的字体就更小了。这两种不同的字体类型和大小形成了对比,但也不显突兀。字体的处理(颜色等)也与网站的整体基调相协调,给访客提供了一致、舒适的阅读体验。
 
 
 
 

HTML Burger

HTML Burger在标题和二级文本上采取了截然相反的策略,标题使用超大字体、比较醒目,二级文本使用较小字体排版,形成了鲜明的对比。不过较小的二级文本也不影响内容的可读性,这是因为这些描述文字很常见,比如HTML,CSS,电商等。这种设计方式既能给访客留下眼前一亮的视觉效果,也能保证顺畅的浏览体验。从这我们也可以看出,将超大文字排版与小文字排版相结合是一种理想的网页设计方式。
 
 
 
 

Mountain Dew's NBA Design

Mountain Dew's NBA Design可能是小飞看过标题最小的一个网站了。除了标题以外,网站上其他的文本字体也很小。不过当这些文字与重叠的"X"以及视频背景配合在一起,用户是不会轻易忽略它们的。这种设计方式是有一定风险的,如果你没有把握,还是不要轻易尝试的好。
 
 
 
 

2.几何分层

网站中的分层设计最早是由Google的Material Design(全新的设计语言)引进的,尤其是卡片式设计,这使得设计师更加注重网站的层次排版结构。现在做好元素分层的新方法层出不穷,几何分层就是其中一种,受到很多设计师的追捧。这是因为几何分层的设计不仅能够将网站上各种元素以和谐的方式结合在一起,实现不同类型的内容的良好的适应,还可以利用几何形状的角或曲线作出指引,引导访客按我们想要的方式进行浏览。它最大的好处还在于对图像非同凡响的处理效果,看看下面这些栗子吧!每个网站都以一个大胆的形状作为框架,给平淡无奇的图片增添了不一样的色彩---建筑图片、会议照片,人们工作的照片(下图实例),让它们给人眼前一亮的感觉。我们可以从中学习一下不同的设计师是怎样利用几何分层有效的将用户的注意力从图形转移到网站内容上的,比如网站标题和品牌。
 
 
 

Salt Projects

Salt在网站的主页使用了幻灯片,而每一张图片的右下角都有一块正方形区域放置简介文本,这种设计有点像卡片式设计的延伸,用卡片突出网站中最重要的元素。除此以外,就连它的滑动键和"To Koop"也使用了几何图形。
 
 
 
 

Bailey and French

看到图片右下角明亮的橘红色三角形了吗?Bailey and French在主页上使用这种颜色和形状来创造不平衡的视觉焦点吸引用户的注意力,激发访客的探索欲,浏览整个网站。而三角形的斜线也与下页相衔接,延伸出其他内容,整个网站的几何形状和动画的结合让它充满趣味。除了右侧的三角形,你肯定也发现了网页左下角还有一个小三角形,这个三角形使用了悬浮效果,当你将鼠标移上去时,它也会变成橘红色,点击时会带领你前往下一页。小飞十分喜欢这个网站的设计,如果你感兴趣的话,可以去他们的网站体验一下。
 
undefined
 
 
 

Alchemy Digital

除了有棱有角的三角形、正方形和多边形等,我们在做几何分层时还可以使用有弧度的圆形。其实,圆形在突出焦点方面更能发挥作用,Alchemy Digital就很聪明的利用了这一点,重点突出公司员工的图片,拉近与访客之间的距离。也许是怕单一的图片太过单调,网页的右下角还有一个小圆形相呼应。不管怎样,它已经成功引起小飞的注意了。
 
undefined
 
 

3.使用模糊图像或视频背景

在网站中记得使用模糊的图像或视频背景!一听到这个设计技巧,你是不是有点懵?是不是觉得小飞怎么这么善变?其实小飞在前面的文章中确实告诫过大家一定要在网站中使用高质高分辨率的图片,不过那主要是针对背景图片或产品图片的。在某些情况下,我们反而需要在网站中使用模糊的图像或视频,这能给网站带来一些神秘的色彩,让用户更有探索的欲望,也可以将人们在图片或视频上投放的关注力转移到网站中的其他元素上(我们需要突出的元素上)。模糊图像或视频背景能够服务于很多不同的目的,下面就一起来看看吧!
 
 
 

Digitalux

Digitalux将背景中人们工作的视频设置成模糊的,这是因为他们觉得这个视频没有那么重要,看或不都看不会对访客获取信息造成影响,他们也害怕冗长的视频会让访客觉得无聊。而且网站的主要重点在于网站上主题内容和行为引导按钮,难怪它们还将行为引导按钮设置成了显眼的绿色。
 
undefined
 
 
 

Playkot

Playkot将背景模糊化是为了强调有趣的动画形象以及独特的字体排版。另外,Playkot是一家游戏公司,更能让访客感受到游戏背后设计师的形象,将虚拟与现实相融合!
 
undefined
 
 

ESPN's "We the Fans"

ESPN是一家体育网站,经常直播体育赛事。因此它的背景使用了模糊的体育场背景,更有朦胧感,更能营造那种深夜看球的气氛,不管坐在哪个位置你都可以享受饕餮的视觉盛宴,这也是在给它们的网站品牌打广告。
 
undefined
 
 
以上就是小飞最新发现的3种设计趋势。不管是哪种设计趋势,在应用到自己的网站前你都需要仔细评估,它是否能够给网站带来积极的作用?它能否引起目标用户的互动?决定使用某种设计趋势以后,你还需要不断的调整、测试,这样才能最大化设计的效用。网站设计趋势总是处于不停的变化之中的,赶紧抓住先机,做出一个令人惊艳的网站吧!快来起飞页自助建站平台做一个响应式网站吧!
 

登录后即可发表评论,立即登录.