2012年网页设计趋势（WDL）

Sponsor

一年将又过去了，让我们来看看跟着下来的一年网页设计将会有什么新趋势。网页设计如万物般变化万千，但总有其规律，我们是可以预见它即将要变化的地方。随 着时间的迁移，人们的视觉的改变，网页设计趋势的改变是必然的，作为网页开发者，网页设计师，需要做的是紧跟时代的脚步，时刻关注网页设计趋势的变化而 变。

1、适应性网页设计

我相信将来我们不再会在趋势中讨论适应式网页设计(responsive web design)，不是因为它将会消失，而是网页设计必需的原则。不过，我认为2012年暂时不会出现这样的局面。因为它还属于比较新的概念，目前还有很多设计师对该概念还不是很熟悉。查看一些适应性网站的例子：适应性的网页设计。

2012年将会有更多的移动设备继续引进和采用响应式网页设计。网页设计师和开发者将会使用将使用流体布局，而不是固定宽度，更多的样式表被查询设备选择 – 这样让网站在不同屏幕尺寸的设备都能够拥有完美的显示。

2.固定位置的导航

我们看到很多个人网站和博客已经开始采用这种设计。但我发现这种风潮在2010-2011年期间曾有所回落，但在最近几个月开始回潮。

如果你的网站的导航并不需要放置太多的链接，寥寥几个主要链接为何不保持用户始终可见？这可以大大提供网站的性能甚至更易于融入整个页面布局。这种设计锁定导航和链接/logo在固定的位置，即使用户固定页面也能快速通过导航访问其他页面。查看《25个固定位置网页菜单设计》。

现在使用一些jQuery原型即可快速达到这种效果。即使没有JavaScript，也可以使用一些炫酷的CSS Code以达到效果。在2011年已经有很多网站的使用固定的导航栏，即导航不随页面滚动或页面切换而改变位置和重新载入，始终悬放页屏幕的一个位置。Simon Wuyts 就是用了这一效果，你可以通过实例体验这种技术。

以前的你可能从不会考虑将页面设计成易于显示的幻灯片风格。不过，这不单能消除分辨率不兼容的顾虑，而且导航系统更易于使用和对移动浏览器完美兼容。在即将来临的2012年里我建议你重新考虑这种设计，重新对页面进行布局。

3. 圆形设计

这一趋势其实已在网页设计有点明显，但近几年有点偃旗息鼓。在Web2.0热潮，设计师更注重基于台式机的趋势，如阴影和圆角。但使用CSS3，就可以轻松实现花俏的方块效果。

此外，你可以设计圆形式和阴影不需要使用任何图片。由于这些功能，设计师开始从另一个角度看图像。一直以来我都留意设计师们的各种设计，发现圆形元素的使用频率越来越大。这些圆形设计可以作为导航链接，页脚图标，甚至可用于个人作品等展示。查看《20个和圆形元素有关的网页设计》、《25个几何形状网页设计欣赏》。

But the most extreme examples aren’t always the best. 圆形让图像看起来更加光滑舒服，更容易吸引访客的目光和关注。使用这些元素特别标注设计中的特别区域，如有用的资源和主要的页面等。但切勿为了形状本身而 忽略效果，否则适得其反。

4. 大幅矢量图

你可以在你的网站使用超大的吉祥物打造你的品牌。几年前你很难在网络品牌中找到使用大量矢量图的案例。但现在设计师的专业水平越来越高，这样我想不到比使用可爱的动画矢量图来营销品牌的点子。更多作品请查看《大量使用插画元素的网页设计应用》。

Mozilla和Firefox的动物形象矢量图就是一个不错的例子。MailChimp则又是一个优秀的案例，品牌形象的个子就更大了。无论是网站还是 iOS、Android应用都能清晰看到那只有趣的猴子邮递员。

此外Freelance Switch网站的吉祥物小帅哥，也是我久不能忘的设计。你可以在他们的网站布局发现各种各样的吉祥物矢量图。这种做法已经成为网站美学的新境界，我有理由相信2012年你将会到处都看到这些可爱的矢量标志设计。

5. 多列菜单

不同于前面的例子，有时候有的网站的链接较多需要处理。若按照标准型的导航排列会显得过于凌乱和拥挤，除非你将链接放置到边栏。但经验告诉我们，链接放置在页面顶部，有利于用户体验。

跟着下来的一年或者新的趋势会改变这个局面，设计师可以对页面导航重建。跟着下来的一年或者新的趋势会改变这个局面，设计师可以对页面导航重建。思 维是一张黑白画，但却意境无限，等待你的挖掘。多列布局的导航更美让人看起来更舒服，通过这种方式你可以在Logo周围显示更多的链接给网站的访客。

创造舒适的设计风格的最佳方式是实践，阅读最近的关于网页设计的一些文章来学习Web导航设计的最新趋势。作为设计师，应该拥有跳跃的思维，尝试最新的东西。对标准的导航设计进行改革是每个设计师都要坚持的实践活动。

6. jQuery/CSS3/HTML5动画

我经常推荐的jQuery插件。网页设计必须包括用户体验、美学和动画等多方面的内容。随着JQuery和CSS3的不断进步，现在可以用很少的代码就能达到非常酷的效果。

过去的一年我不断地学习网络上相关的教程。了解到jQuery是目前前端效果最优秀的但并不是所有浏览器都支持。因此，通过CSS来实现浏览器兼容也不失是个好办法。2012年越来越近，相信开发者们又有了新的动态，让我们拭目以待，期待jQuery/CSS3/HTML5时代的到来。

7.丝带及横幅图形

在2011年我就开始密切注意到这样的设计元素。设计师们开始编写关于设计丝带风格页面、横幅、书签或其他类型的徽章的教程。大量免费教程的出现使得越来越多设计师开始跟随这样的趋势。更多作品请查看《20个丝带风格的网页设计》、《banner、丝带和徽章设计欣赏》。

你很可能为过去短短的6个月里出现这种风格设计的网站的数量感到惊讶。勇于尝新的设计师们频繁在新的软件和移动应用程序中使用丝带设计风格。此外你 会发现博客免费下载或者热门文章栏目使用这类的横幅设计。我还特别地收集了这类的设计的PSD素材，有兴趣的可以尝试下载来参看下：

• Corner Ribbon
• Dark Slider with Featured Ribbon
• Colorful Ribbons
• Green Corner Ribbon Templates
• Simple Product Box

8. 自定义字体

免费字体库Typekit为任何感兴趣的网页设计师提供免费试用。有了这个工具你在网站嵌入JavaScript即可在CSS中实现自定义字体。在2011年这个趋势已经很明显，已经有部分WordPress设计师尝试使用这方法让自己的博客变得与众不同。

几年前，Typekit还是一个不起眼的系统，直到现在Google Web Fonts提供资金支持，现在它开始变得非常受欢迎。你只要找到字体库拥有的字体，Goole就提供相应的代码。你只需要在HTML添加相应的代码和CSS修改字体名称。

越来越多的人开始使用这样服务。甚至有开发人员专门开发了免费的插件，这样安装自定义字体就变得更加简单了。不需要上传字体，没有服务器压力和鲜有出现错误。博主们应该关注这个趋势，使用一些适合自己的博客的字体。

9.信息图表

这个趋势或者对网页设计的大局影响不大，但有利于用户体验和信息图表符合新媒体的发展。以前鲜有网站使用这样的方式，即使你勉强了解当中所展示的数据、图表或图像。

信息图表并不是对所有网站都适用。而且制作这样的图表需要花费大量的时间在Photoshop上。但如果你是这方面的人才，自己的网站有需要这样的 图标，不妨尝试下，会给你的网站访客全新的感受。相比以前，现在的网络包含更多的信息，我们可以从中收取或共享信息，而信息图表正是这样的体验，能够加快 互联网的发展和体验互联网精神。

10. 简洁

任何网站都有一个目的就是使访客从A点访问到B点。简单，直观的界面是最直接的方法。在过去的5年，我发现现在越来越流行简单的设计。道理很简单，页面元素也少，游客自然将目光集中在内容和链接上。

我们可以找到很多这样的例子。在今年五月，我们就列举一批非常优秀的案例。

但重新布局一个简单的界面并不是一件易事。你需要起草导航架构，页面层次结构，头部，内容区域等。不过花时间做好规划可以大大简化你的工作。

小结

以上趋势仅仅是我们根据现阶段和以前网页设计的发展历史所预测，但未来是不可以预知的，因此未来的网页设计会不断地变化。现在的网页设计师也一直地学习和尝试新的东西，只要我们时刻留意网页设计的发展，学习新的技术和设计，相信所设计的网页也会相当不错的。

PS：部分内容被达人修改过
原文：http://webdesignledger.com/tips/web-design-trends-in-2012
翻译：http://www.x-berry.com/wdl-viewpoint-web-design-trends-in-2012

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。