2009年国外Web设计潮流（上）

这是 Smashing Magazine 花费几个月的时间研究编写的 2009 年 Web 设计风 格与潮流，Smashing Magazine 的编辑们对当前流行的大量 Web 设计风格进行分析，总结出那些可能在 2009 年风行的潮流，包括新的设计元素，新的图形方式，并给出大量的漂亮的示例。这是第一部分10个潮流， 本文第二部分请参阅：2009年国外Web设计潮流（下）。。

1. 凸版印刷风格
这种风格有些出人意料，可能因为之前很少有人使用。该风格在在各种主题的网站中都有，但主要用于产品设计或在线服务类网站。

2. 富UI
现代 Web 中的 UI 变得越来越漂亮，越来越好用。过去的一年，Web 中的 UI 有了显著提高，有了一种接近桌面的感觉。Ajax 和 Flash 被广泛使用。

特别是我们比去年看到了更多留白区域，还看到很多现代的 UI 技术会显示用户同系统之间交流的视觉状态，比如，按钮在正常和被按下时显示不同的样子，用户同系统交互时能及时得到反馈，另外，越来越多的服务可以被用户定制。

这些设计显示 Web 设计师将更多精力放到了用户体验上。

3. 透明 PNG
使用 PNG 实现透明虽然不被 IE6 支持，却在过去的一年大行其道。设计师们似乎正在尝试将背景图片和内容融合并实现一些印刷媒体的风格。比如，将 PNG 半透明图片放到整体背景的某个区域上，用来加亮显示这个区域，如标题或声明。一些 PNG 同名技术还用来实现灯箱框效果。

Smashing Magazine 去年曾有篇使用透明效果实现创意设计的文章，很多设计师在他们的作品中开始尝试这些技巧。有趣的是，透明效果常被用于页首和页尾部分，不过也有些例外。

4. 巨大字体
以前的文章中我们曾介绍过巨型字体设计，2009年，巨型字体设计还会风行，尤其是那些设计社，以及展示型，产品介绍型，或在线服务型网站，他们会使用巨型字体显示重要信息。

巨型字体设计中使用的字号往往超过36px，设计师们对字体编排注入了更多关注，以实现更漂亮，更连贯，更值得信赖的站点。

5. 代用字体
设计师们还把更多注意力放到字体上，虽然经典的 Web 字体，Helvetica, Arial, Georgia 以及 Verdana 等仍占主流，一些代用字体正浮出水面（如 sIFR）。

有趣的是，这些字体会和设计无缝地衔接，设计师们似乎并非为字体而字体，而是要将字体同他们的设计结合在一起实现更漂亮的效果。

6. 灯箱效果
灯箱框是第二代弹窗，它们比第一代基于 JavaScript 的弹窗更友好，可以让用户将注意力集中到最重要的部分。这些窗口一般由用户的某个行为激发，并显示在其它内容的上层，他们有时候是半透明的，并包含一个关闭按钮。

7. 媒体块
随着宽带接入的普及，用户现在可以承担更丰富的内容，设计师们也借机提出更有吸引力的内容。越来越多产品网站使用媒体块显示视频，让用户更容易理解 这些内容。用户只需靠在椅子上看视频，不需要一步一步往下点，这些食品通常比较短，直奔主题，虽然很正规，但也包含一些娱乐性。

不过请注意，视频应当是你内容展示方式的次要选项，并不是所有人都有宽带接入，也不是所有人都喜欢有视频播放（他们可能正在后台听网络收音机或播放音乐），另外，也不是所有人都启用了 Flash 和 Javascript。

8. 杂志外观
传统印刷媒体设计中使用的编排技术也出现在 Blog 设计中，文章的编排，文字排版，图片甚至对其方式。基于网格的设计也很流行，但主要用于展示与产品页以及大型博客，极少用于公司网站或网店。

9. 滚动幻灯导航
幻灯片水平和垂直滚动，可以向不同方向滚动，当前项加大加亮。这种导航技术可以让用户快速直观地浏览站点中的内容。一般常用语娱乐性网站，另外，设计者还可以使用该技术展示他们的作品。

10. 在重点位置做形象展示
网站的左上方一般是一个站点最重要的区域，因为那是用户注意力最集中的地方。因此，在那个部位放上网站中最重要的信息是明智之举。

事实上很多设计师正是这样做的，不管是 Web 程序，公司网站，在线服务还是作品展示，设计师们将口号或简介性内容放在那里，并使用醒目的排版给用户以良好的第一印象。这些内容长短不一，不管哪种方 式，但它们都占据可观的空间，一般横跨整个幅面，高度在250到400之间。不过这些形象展示性区域一般并不用于博客或在线商店。

本文国际来源：http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
中文翻译来源：COMSHARP CMS

相关文章:

1. 2009年国外Web设计潮流（下） 2009年海外Web设计风潮的第二部分，着重讲解了反 Box 式布局，单页布局，多栏布局，巨型插图设计，更多留白，社会网络元素，讲解式导航菜单，以及动态 Tabs 等设计风格，和 Smashing Magazine 推出的所有类似文章一样，里面包含了大量的，非常漂亮的实例。 本文第一部分请参阅：2009年国外Web设计潮流（上）。 Continue...
2. 在 Web 中嵌入图表的免费资源 在 Web 中嵌入图形图表的技术越来越丰富，我们可以选择 JavaScript 库，CSS，Flash，Silverlight，PHP 库，服务器端的组件，也可以选择 Google Chart API 这样的...
3. 75套最佳Web设计资源 这是来自 TOXEL 的一组 Web 设计资源大全，包括字体，CSS 资源，Logo 设计资源，图标，设计启发，教程，Photoshop 素材下载，以及 WordPress 资源。每个类别又包含数十套该类别下的具体资源，可能是有关...
4. 2008 年顶尖 Web 设计师访谈（中） 作为自由职业设计师，你2008年喜欢的几个工具和资源是什么？ 2008年我使用不同的工具，如果必须选择，我选择这三个：WordPress，因为它简单，易用，灵活，而且有大量的社区支持；Freshbooks Invoicing，这个工具十分简单；还有 Adobe Fireworks，简单，因为我所做的大部分事情并不需要打开 Photoshop。 Continue reading →...
5. 2008年顶尖Web设计师访谈(上) 关于设计，一些独立博客有很多非常棒的内容（比如 Usability Post 博客）。不幸的是，我并没有看到像 Designing Web Usability（1999），Don’t Make Me Think（2005）这样的好书，比较接近大约要算...
6. 40个轻量级JavaScript库 流行的 JavaScript 库不胜枚举，jQuery, MooTools, Prototype, Dojo, YUI。这些 JavaScript 库功能丰富，加上它们的插件，几乎能胜任任何工作，然而这是有代价的，这些库往往导致你的网页尺寸臃肿。在某些场合，如果你只想完成特定的工作，可以使用 一些功能更专一的轻量库，本文介绍了40个非常出色的轻量级...
7. 2009年第一篇，两本书一张照片，并祝新春愉快 新年第一天，收获了两本喜欢的书，《悟透Javascript》和《少有人走的路》。 《悟透Javascript》对我来讲已经是姗姗来迟了，它是08年末我最想收获的一本书。08年12月初就在淘宝UED上看到成书，10号左右托了同事于卓越上订购了一本。好事多磨，折腾了这好久，上周终于到了本地邮局，同事因对邮局工作人员态度不满，愤而退货。在新华书店走的腿发麻了都没找到这本书，出了一个月的书也不大可能新华书店无售吧。反正几次临走的时候都在想，希望放弃寻找而准备离去的时候它会忽然出现在眼前。几次这样准备离去的时候证明这仅是自己一厢情愿。不过最后一次如愿了，大概有7本《悟透》挤在一堆java书籍里面，心里一下就踏实了。 Continue reading →...
8. 来20段Movie Typography(关于文字排版)视频 这些视频均源自一些电影的精彩片段，具体是哪些电影，我也搞不清楚。在这些视频中电影旁白只是陪衬，最精彩的其实就这些非常精彩的文字排版设计。上次在 ilovetypography.com 上看到的文字排版样式相对少很多，这些视频中的排版让人看了不禁大呼过瘾。毋庸置疑的好素材，对文字排版设计头大的朋友来说，不过把瘾的话是个不小的损失。 Continue reading →...
9. 2008 年顶尖 Web 设计师访谈（下） 2008年你喜欢的在线设计资源有哪些？ 2008年我看了很多设计与图形博客，但只有一个我每天都会看，就是 SmashingMagazine，因为我觉得那里的每一篇文章很棒。除了这个，我还经常看 Web Designer Wall, NETTUTS, Six Revisions 以及...
10. WEB设计资源及设计趋势前瞻 大家可能都有这样的体验，获得一个点子和灵感有时候真的很难，当你计划着开始你的新网站设计工程，当你急切地要找到一个震撼人心的网站设计灵感，你就不愿花太多时间而只想尽快开始做些事情。但 大多数时候，你的鼠标并不像你心想的那样移动，或者你的手并不受你那创造性思维的控制，亦或者可能就当你要尝试时却没有创造性的心境去工作。 Continue reading →...