2013年设计趋势

这是个网络化的时代,每天有大量的网页被设计出来,有大量的App被开发出来。对用户而言,界面设计非常重要,用户使用的是界面,而非关注后台的代码。把握住当下的设计趋势,紧随潮流,甚至超越潮流,是非常必要的。针对2012年全世界的各类设计,我整理个2013年的若干设计趋势。把握住这几条,肯定会使你的设计提升至一个更高的层次。

更多扁平化的设计

design-trend-2013-flat

在微软使用扁平化的Metro界面之前,网络中就已经有小部分的网页使用了扁平化的设计,而微软在Windows 8和Windows Phone以及整个家族中使用扁平化的Metro设计使得这种风格更为流行。扁平化的设计将会在今后的设计中使用的更为广泛。扁平化的设计非常适合用作页面布局以及按钮等元素,这意味着设计与维护的简便,视觉上有更大的可视面积,触摸区域更为明确。

扁平化的设计意味着简洁与高效,更少的做不需要的装饰,将用户的注意力更多的专注于内容本身。当然,扁平化的设计在设计功底上有更高的要求,通常越是简单的东西其实是更难驾驭的,设计也是一样。扁平化的简洁使得装饰没有用武之地,更多需要考虑的是排版与布局,用色以及整体性的统一,这往往是不太好把握的。

更多的响应式设计

design-trend-2013-responsive

当响应式网页设计的概念在2010年提出的时候,采用响应式设计的网站还寥寥无几,而如今响应式设计得到了更多的应用。响应式网页设计核心在于CSS3中的媒体查询特性,因此浏览器对新特性的支持也十分重要。好在,现今的浏览器几乎都对每天查询提供支持,IE9之后的版本也开始支持媒体查询,之前的IE7-8也可以通过JavaScript插件支持。

响应式网页设计对不同窗口尺寸做了优化,提高屏幕的使用率,尽更大的可能提高了用户体验。传统的固定宽度的网页布局如960,在比较宽度屏幕上观看就会出现大片的空白(比如1366以上宽度的屏幕上)。而响应式设计通过媒体查询当前浏览器窗口的宽度或者高度,手机是纵向放置的还是横向放置的,来对网页进行优化。通过设置断点,不断优化不同尺寸下的布局,达到将最重要的内容最优化的处理。因此,使用响应式设计将会在今后更为普遍。

更宽的网页布局

响应式设计固然有用,但并不是所有的网站都适合使用响应式布局。选择哪一种布局应当根据自己的需要。当然,随着用户显示设备的宽度越来越高,更宽的网页布局势在必行。上世纪90年代,当用户的显示器分辨率宽度只有800的时候,大部分的网页宽度都不超过800,随着科技的进步,1024宽度的显示器成为主流,960宽度的网页也逐渐流行。因此,随着科技的进步,用户的显示器宽度进一步变大,网页设计可以更宽一些,充分利用上这些可视区域,比如1140就是个很不错的选择。

将字体当作图形使用

design-trend-2013-typography

设计的趋势越来越简洁,文字则越来越重要。文字不仅仅被当作是传播的作用而存在,文字也可以被当作图形使用,通过巧妙的排版与布局,产生令人心旷神怡的视觉效果。在美学上,将字体当作图形设计将能带来更漂亮的视觉效果。标题文字不再仅仅是标题这么简单,它可以被当作图形来处理,达到更具震撼力的效果,从而给用户留下更深的印象。

拟真设计的减少

苹果将拟真设计(Skeuomorphism)发扬光大,在iPhone上盛极一时,现在该到拟真设计退出舞台的时候了。从美学上来说,拟真设计很漂亮。但是在UI(用户界面)的设计上,拟真设计却过于复杂与臃肿。皮革,金属,布艺等质地的拟真设计过度的装饰了用户界面,干扰了用户的注意力。同时,拟真设计在设计与维护的时候更为繁琐,由于使用了大量的图片,网站与App会占用更多的资源。

当然,拟真设计并不会立即消失,而且拟真设计也有发挥余热的场合。拟真设计并不适合做布局设计,但是在图标等元素上,使用拟真设计也是个不错的选择。更为现实主义的图标设计会带来更大的亲和力。

极简与更大的留白

design-trend-2013-minimalism

网页设计的历程快有20个年头了,经历了复杂的美化设计的阶段,如今的设计越来越回归内容的本质。做尽可能少的设计,凸显内容,使用极简主义设计风格,以及大量的留白,将会是今后的设计趋势。无论如何设计以及设计的质量好坏与否,内容仍旧为王。极简主义与更大的留白的目标都是为了突出内容,回归内容的本质。设计中留白是很必要的,给用户以呼吸的空间,同时可以将内容划分为不同的板块,更有条理。

更大的图片应用

design-trend-2013-big-picture

科技不断进步,屏幕越来越大,网速也越来越快,使用图片的便利性也越来越大。俗话说一图胜千言,图片的力量是不可比拟的。人类对图片的记忆会比文字更为深刻,图片的大小也与印象的深刻程度成正比。越来越多的网页以及手机App使用全屏化的图片设计方案

矢量的应用

design-trend-2013-vector

相比JPG,PNG等位图模式的图片,矢量格式的图片更具有灵活性。位图缩放过程中(尤其是放大),画质会有所损失,因此当重新调整设计的时候,图片资源也需要重新做调整。而矢量图形由于先天性的特性可一无限的缩放而不影响画质,因此使用位图制作的图标等元素可以完全使用矢量元素来替代。当今的主流浏览器都支持SVG格式的矢量图形,这带来了很大的方便。另一方面,更多的图标设计采用了Web格式的图标字体,由于字体是基于矢量的,因此可以很方便的调整大小。这些对于维护以及架构的简洁而言是非常有利的。

总结

2013年的设计趋势整理起来并没有多少,但是要做到这几条并非易事。需要多练多看,才能不断的提高,希望这些能够对从事设计的童鞋有所帮助。

6 Comments

  1. 中文网站设计时候很多利用不上啊 比较css的中文字体的支持。。。而且中文字体那么大 上载到服务器也是个大问题

    Reply
  2. 治安看过一个文章啊,好几个月之前了,就说苹果的拟真风潮已经过去了,windows会引领一股平面的色块化

    Reply

Leave a Comment.