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

Popularity: 1%

相关文章:

1. 2008年顶尖Web设计师访谈(上) “2008 年行将结束之际，SmashingMagazine 准备了一系列问题，对 2008 年顶尖 Web 设计师做了集体访谈，每人提问两个问题。如果你对这些问题感兴趣，还可以参考 SmashingMagazine 之前做过的更多 Web...

2. 2008 年顶尖 Web 设计师访谈（中） 这是 SmashingMagazine 对2008年顶尖 Web 设计师做的两句话访谈的第二部分。SmashingMagazine 访谈的这些 Web 设计师多是自由职业者，他们热爱 Web 设计并在这个行业如鱼得水。这是访谈的第二部分，第一部分请参考2008...

3. 2008 年顶尖 Web 设计师访谈（下） SmashingMagazine 对2008年顶尖 Web 设计师做的两句话访谈的第三部分。SmashingMagazine 访谈的这些 Web 设计师多是自由职业者，他们热爱 Web 设计并在这个行业如鱼得水。访谈的第1部分，第2部分请参考2008 年顶尖...

4. 2008年国外最佳Web设计与开发技巧、脚本等资源 工具&Web应用 13个可能会让你说”Thank You”的必不可少的开源应用 14个免费工具让你了解为什么人们会放弃访问你的网站 40+CSS生成器 74个我们可能已经忘记的适合网页设计师的很棒的Web应用 50+能提高你的网站速度和性能的技巧和资源 15个可以监视网站人气的工具 20个免费的SEO网站分析工具(已翻译成中文) 11个功能强大甚至可以替代标准应用程序的Firefox3扩展插件...

5. 2009年国外Web设计潮流（下） 2009年海外Web设计潮流的 第二部分，着重讲解了反 Box 式布局，单页布局，多栏布局，巨型插图设计，更多留白，社会网络元素，讲解式导航菜单，以及动态 Tabs 等设计风格，和 Smashing Magazine 推出的所有类似文章一样，里面包含了大量的，非常漂亮的实例。 本文第一部分请参阅：2009年国外Web设计潮流（上）。 反...

6. WEB设计资源及设计趋势前瞻 大家可能都有这样的体验，获得一个点子和灵感有时候真的很难，当你计划着开始你的新网站设计工程，当你急切地要找到一个震撼人心的网站设计灵感，你就不愿花太多时间而只想尽快开始做些事情。但 大多数时候，你的鼠标并不像你心想的那样移动，或者你的手并不受你那创造性思维的控制，亦或者可能就当你要尝试时却没有创造性的心境去工作。所以要让你这 个有创意的人清醒一下，或者想出一些独创性的网站设计点子，抑或仅仅需要当前的设计趋势来激励鼓舞你自己，今天我们列举了11种超棒的资源和当前设计趋势 的启示。 在数量上来看，这个列表并不算长，但我向你保证，如果你开始仔细翻阅，它肯定会从专业的角度激励你产生创造性的设计构思，并鼓舞你去设计项目，你运用的设计方式使人们永远不会忘记你已经做到了！ 1.为现代设计趋势（设计的）45种自由字体 印刷术的合理选择，在一个设计中能够达到设计者想要达到的适当的主题和心境。在这个收集里，你会发现45种用在现代设计趋势中的上等字体。另外，你可以继续查看最漂亮的100种字体。 2.2009年的标语设计&牌子趋势 在这项收集中，你会找到2009年的标语设计和商标趋势。 3.2009年网站设计趋势...

7. A List Apart：Web设计之道（上） 道之于90年代恰如禅之于70年代。事无巨细，皆可受之道，或推之道。Web 设计之事，虽小技，然而通览道德经，我们仍然会发现其中包含深刻的道理。道是哲学，象佛，是一种生活与处世的方式，来自古老的《道德经》，这部拥有81个 章节的晦涩经文涵盖了人类的经验，但它始终讲述一个主题，和谐。 过去几年，或好或坏，我的生活与 Style Sheet 有关，我为之编写软件，教程与指南；回答了数不清的问题，通过新闻组或电子邮件；通过 The Web Standards...

8. 75套最佳Web设计资源 这是来自 TOXEL 的一组 Web 设计资源大全，包括字体，CSS 资源，Logo 设计资源，图标，设计启发，教程，Photoshop 素材下载，以及 WordPress 资源。每个类别又包含数十套该类别下的具体资源，可能是有关...

9. Web应用实用界面设计及最佳实践 如今越来越多的应用程序被搬到了网上。因为没有平台或者安装上的限制，这种软件即服务的模式看起来相 当诱人。Web应用程序界面设计的核心自然是Web设计，然而它的重点却主要放在了功能性上。要与桌面应用竞争的话，Web应用必须提供简单、直接、灵敏 的用户界面，以便让用户们可以省时省力地把事情做完。 在过去的日子里面我们并没有讨论太多关于Web应用的事情，而现在该是时候让我们来看一看一些实用的技巧以及设计方案了。这些东西可以让我们的 Web应用变得更加的用户友好，也更加漂亮。这篇文章列出了我们在现代Web应用的设计模式以及实用设计方案上所进行的扩展性研究的第一部分。下文中你将看到被许多成功的Web应用所采用的10个实用的界面设计以及最佳实践。 如果有什么好主意，好方法或者代码解决方案请在评论中提出来。我们第二部分的研究很快就要发布了：敬请关注RSS 和 Twitter 。 你也许也有兴趣读读这几篇相关的文章：...

10. 懒人的保险设计思路 设计师总会说设计是一件很累人的事，但这部分原因可能是你自找的。时间与设计出来的效果也并不一定成正比。平面设计师或许应该培养一种“懒人”设计 思维，面对一个设计时，心里应该想着的只是如何以最简单的方式完成，出来的效果可能也会更出色，毕竟，简洁的设计往往也是最好的设计。 大多数的设 计都会同时涉及到文字与图片，这两者的差异是非常大的，也很难事先预料到两者一起使用时的互相影响，图片与文字如何搭配得漂亮，往往也是设计师的一个很大 的挑战，一不留神，就会造成风格矛盾、细节冲突，对比错误。而且就算有一次给你做得不错，但下一次你面对另一个新项目时，你还是会为此而抓狂。 一些设计师在设计时往往会出现“设计过度”的现象。更好的方式就是象一个懒人的思维一样，图片放在这里，文字放在那里，搞定！关键是让每一个元素都简单清晰，让两者的互相影响减至最低，而且这种设计手法还可以让你一再使用，永不过时。让我们看具体的例子吧： 这是一家室内家居专业摄影工作室的册子封面，修改前的设计是一种“吃力”的设计。 设计师选择了毫不相关的字体及颜色，然后又加上背景及线条，希望使其成为一个有机的整体。其实，设计没必要搞得这么复杂！ 修改后的设计，文字内容并没有改变，但整个版面分成两个区域，图片及文字各占据一个，出来的效果就是漂亮、干净、整洁，所用的时间精力也不多，而且这种构图及手法也可以一用再用！ 让我们深入分析这两者的设计过程。...