2009年网页设计流行趋势（一）

　　我们网站设计师都是有一点善变的。我们乐于尝试不同的事物。我们乐于观察人们如何与我们的作品进行交互。我们乐于尝试与众不同的设计方法，这些方法有可能成为主流，成为一个典型的设计方法。

　　因此，新的设计方法不断涌现，越来越多的设计者注意它们并运用这些方法技巧，新的趋势也就自然出现。

　　在过去的几个月里，我们已经分析了众多的网页设计，观察新的趋势，权衡了众多设计决策与代码解决方案。在这篇文章里，我们展示了2009年网页设计的趋势：新的发展，新的设计元素，新图形技巧方法。

2009年网页设计流行趋势

　　首先看一下我们这几个月确认、发现与观察到的主要趋势。在这一概述里，你会发现每个趋势与很多精美案例，这些案例能够让你在新项目中激发灵感。

1. Letterpress 文字凹凸

   

2. Rich user interfaces　华丽的用户界面

   

3. PNG transparency　png透明
   

   

4. Big typography　大文字排版

   

5. Font replacement (sIFR, etc.)　新字体

   

6. Modal boxes 对话框

   

7. Media blocks 多媒体播放模块

   

8. The magazine look 杂志化的视效

   

9. Carousels (slideshows) 滑动展示

   

10. Introduction blocks 介绍模块

    

现在开始仔细了解以上这些趋势。

1. 字体凹凸效果

其中最出人意料的趋势，我们已经在过去几个月出现了活版印刷（实际上凹版）的网页设计。事实上这一技术已很少使用到现在可能是这一趋势的最重要的原因。凸版被用于各种风格，各种网站和各种主题，特别是，它常常被用在产品设计，和网上在线服务上。

2. Rich User Interfaces　华丽的用户界面

令人高兴的是，用户界面在现代网站和web应用程序上已经变得更精美，更实用。在过去一年中，应用方面的用户体验已经大大改善，促使高级和敏感的用户界面与经典的桌面应用程序具有极大的相似性。 AJAX和Flash被广泛用于用户动态交互，被期望成为先进，尖端的，专业的解决方案。

特别是，过去我们看到很多的空白，更多的填充和更多空间的各种设计元素。我们还注意到，许多现代的用户界面用直观视觉提示用户与系统互动的沟通状态。例如，被点击时，事件按钮的外观经常由“正常”改变到“按下去”，提供了直接的用户交互即时反馈。此外，越来越多的服务能被用户个性化：对我们来说，这清楚地表明，2009年，自适应的用户界面已经到来 。

3. PNG transparency　png透明效果

png透明效果，尽管ie6不支持，但是过去几年里，似乎已经被广泛使用。很显然，设计者证尝试更好的融合背景图片与内容，并期望实现印刷媒体、杂志常见的效果。在很多案例中，半透明背景在整体网页背景中脱颖而出，其目的是突出一个重要的设计要素，例如标题或声明。有时也会用于对话窗口背景。

去年，我们描述了用各种不同的方式在网页设计中进进行透明度创意，许多设计师在工作中似乎尝试了这些技术。有趣的是，透明度经常被使用于两个地方，页眉或页脚的设计，但有些设计超越那些范围。

4. HUGE Typography　大字体

　　以前，我们举出了一些大字号字体排版的突出的例子。2009大号字体排版依然流行，特别是设计公司、投资组合，个人展示、产品网站和在线服务等，将使用大字体排版来传达它们网站最重要的信息。

这些设计元素的字体大小常常超出36像素的范围。总体而言，设计人员密切注意排版细节，如行间距，行高和字体的选择。其结果：网站的更漂亮、更一致，并值得信赖。

5. Font Replacement　字体的替换

　　因为设计者越来越关注文字排版，所以他们也更加关注设计稿与网站的字体。经典的字体像Helvetica、Arial、 Georgia与Verdana无疑还是占主导地位，但是我们也观察到一些字体取代传统字体的趋势（例sifr)。
    
有趣的是，这些字体往往完美结合在网站设计中，他们几乎从来没有为他们自己使用，或者单单为了网站改版“升级”。设计师正试图融合漂亮的版式与引人注意的视觉设计，去改善网站外观和用户体验。

6. Modal Boxes (Lightboxes)　模态化窗口

　　（对话框一般分为两种类型：模态类型（modal）与非模态类型（modeless）。所谓模态对话框，就是指除非采取有效的关闭手段，用户的鼠标焦点或者输入光标将一直停留在其上的对话框。非模态对话框则不会强制此种特性，用户可以在当前对话框以及其他窗口间进行切换。）

模态化窗口（对话框）基本上算是第二代的弹出窗口。它是一个友好的替代传统js弹出窗口的用户服务，让用户能够把注意力集中到网站最重要的区域。模态化窗口总是被用户操作（例如注册登录）所触发，并常采用非常微妙的方式：半透明和有一个关闭按钮。

7. Media Blocks　多媒体内容模块

随着网络带宽的增加，用户现在能够承受比几年前更多的浏览量。于此同时，设计者也抓住这个机会通过更具吸引力与记忆效果的途径去呈现内容。因此，很多产品网站用多媒体内容来达到宣传的目的也就不足为奇了。这些元素的主要优势是他们能够迅速有效地传达内容并方便用户消化信息。

用户只需往后靠并享受展示，一切都会逐步讲清楚，而不必点击、搜索说明或学习导航。电影通常很短，并获得直接要点;他们大多是正式的，但也可以娱乐

但是，请确保影片是您网站上内容的一种替代介绍（而不是主要的或唯一的！ ）。并不是每一个用户的宽带都是宽频的，也不是每个用户都愿意看视频（例如，他或她正在看一个电台或播放背景音乐），当然也不是每一个用户的电脑上都安装了Flash和JavaScript.

8. The Magazine Look　杂志化的版面设计

　　博客设计中的一个有趣的进步是它适应各种传统（印刷）媒体中常见的技术。文章页面的排版，字体的使用，插图与文字的对齐往往也适合用传统技术去印刷。基于栅格化的设计正被普遍采用并用作概要介绍、产品页面与大的博客。这种情况很少出现在公司网站与在线购物网站。

9. Carousels (Slideshows)　图片滑动轮播

　　滑动轮播本质上是幻灯片导航，其中的内容纵向或横向轮播（因而得名“滑动轮播” ） 。轮播的导航，用户需要点击其中的两个切换元素（通常是左/右和上/下箭头） 。根据选定的切换元素，内容会在期望的方向旋转。

　　代替通过点击网站区域来找他们最喜欢的故事，用户可以快速浏览现有的故事，而不是垂直滚动或不必要的鼠标移动。其结果是：用户节省时间，集中他们的注意力在旋转的内容焦点上，代替与浏览器的互动。幻灯片导航是常用娱乐网站和大的博客常使用的元素，但设计者也可以更互动的方式用在他们的文件夹上，以展示他们的工作。

10. Introduction Blocks　介绍区域

　　页面左上角是网站的最重要的区域，因为这是大多数访问者注意力最集中的位置。因此在这个位置花心思去展示最重要的信息，可以确保读者能迅速获取信息。

　　事实上，这正是许多设计者正在做的事情。不论是Web应用，企业设计，在线服务或产品，设计师在页面顶部推广其口号和简介，使用强有力的、生动的版式，创造一个良好的第一印象。一些介绍短，有些是相当长的;无论如何，他们通常采取了大量的空间;全宽布局和250至400像素之间，高度是常见的尺寸。请注意，不过，介绍块几乎从未出现在博客和网上商店上。

Stay tuned!　保持住，不要换台

This article covers only 10 of the over 25 trends we’ve identified over the last months. The second part will be published next week. We’ll cover new layouts, new visual approaches and new design elements. Please stay tuned.

　　这篇文章只涵盖了过去几个月我们总结出的25个流行趋势中的10种，第二部分将在下周发布,期待中…..