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

　　在第一部分中，我们预测到了文字凹凸 ，华丽的用户界面 ，png透明，大字体排版 ，滑动展示和多媒体播放模块 。

　　本文是我们预测的第二部分。它介绍了2009年在布局、视觉方式和设计元素方面的设计趋势。

Let’s first take a closer look at some of the trends we identified, discovered and observed over the last months. In this overview, you’ll find a review of each trend and more beautiful examples that can inspire you in your next project.

　　让我们先仔细看看我们过去几个月发现、观察并确定的一些趋势。在这个概览中，你将阅读到每个趋势的评论和更多漂亮的例子来激发你的下一个项目。

　　本人翻译的不是很好，如有不对的地方希望大家多多指教。

1. Out-of-the-box layouts 反 Box 式布局

   

2. One-page layouts 单页布局

   

3. Multi-column layouts 多栏布局

   

4. Huge illustrations and vibrant graphics 巨型插图与多变背景

   

5. More white space than ever 更多留白

   

6. Social design elements 社会设计元素

   

7. “Speaking” navigation 带“说明”的导航菜单

   

8. Status elements (Flickr, Twitter et al)

   

9. Dynamic tabs 动态 Tab标签

   

10. Still large search boxes 超大搜索框

    

11. Category visuals

    

12. Author icons 作者头像图标
    

    

13. Icons and visual clues 图标和视觉引导

    

14. Tag index (instead of tag clouds) Tag 索引

    

15. Illustrations in blog posts 插图风格

    

16. Watercolor 水彩风格

    

17. Handwriting手写风格

    

18. Retro and vintage怀旧风格

    

19. Organic textures, tiles and photographic backgrounds有机纹理或照片背景

    

20. Badges 证章风格

    

21. Price tags 价格标签风格

    

22. Ribbons 条带风格

    

1. 反 Box 布局

 As we pointed out a couple of months ago in the showcase 40 Creative Design Layouts: Getting Out Of The Box, we are observing a strong trend towards more individual and creative layouts. Instead of applying conventional boxy layouts, designers are experimenting with the way information is structured, presented and communicated.

　　正如我们几个月前在展示40个创新设计布局中所指出：走出框，我们观察到一个更强的趋势正朝着更加个性和创意布局发展。而不是采用传统的BOX布局，设计师正在尝试的信息结构，介绍和交流的方式。

 In these out-of-the-box-designs, the overall creative approach is often more important and more memorable than the attention to details. Still, usability, typography and visual design are rarely overlooked and are often carefully executed. Creative layouts are particularly popular for portfolios, websites of design agencies and promotional websites (e.g. commercial campaigns of large companies), but they are also very popular on blogs.

　　在这些反Box设计中，整体创意方式通常比注重细节更重要，更让人难忘。尽管如此，可用性，版式和视觉设计很少被忽视，往往被认真完成。创意布局在作品案例、网站的设计机构和宣传网站（如大公司的商业宣传） 特别受欢迎，在博客上他们也很受欢迎。

When it comes to creativity, the line between a usable and unusable design is very thin; thus, usability testing is particularly important, because a new creative approach can literally break a website. Often, it’s a good idea to find a compromise between a creative approach and a classic, traditional design, and try to achieve a balance between a “bulletproof” (yet ultimately boring) usable designs and an innovative unusable designs. Keep in mind that innovative ideas need some time to mature: to be rethought, modified, adapted, optimized and finally integrated in the design.

　　我们强烈鼓励设计者打破通常的Box布局陈规，尝试新的办法和疯狂的想法。显示出你的才能吧！

We strongly encourage designers to break out of the usual boxed layout conventions, experiment with new approaches and risk crazy ideas. Show what you are capable of!

　　说到创意，可用的设计和不可用的设计之间的界限是非常小的，因此，可用性测试是特别重要，因为一个新的创造性的方法确实可以打破一个网站。通常，这是一个好主意，在创造性的方法和经典的传统的设计两者间找到一个折衷的办法，并尝试在“安全” （尚未厌烦）可用设计和创新的非可用设计之间实现平衡。请记住，创新的想法需要一段时间才能成熟：要重新思考，修改，调整，优化，最后的集成在设计中。

2. 单页布局

An alternative route that designers often take to impress their visitors is using so-called one-page layouts: layouts that use one single page to present the content of the website. It doesn’t necessarily mean that these designs are minimalistic (adhering to the principle “Less is more”). On the contrary, such designs are often quite complex, include rich imagery and vivid animation effects and therefore take some time to load.

　　设计师经常采取打动他们的访客的一个可选择的路线就是使用所谓的单页布局：使用一个单页展示网站全部内容。这并不一定意味着这些设计简单（遵守“少即是多”的原则 ） 。相反，这样的设计经常是相当复杂的，包括丰富的图像和生动的动画效果，因此需要花不少时间来装载。

        When the user clicks on a navigation option, the page changes (partly), and new content is displayed in the area that was previously occupied by the previous content. The navigation of such layouts is supported by sliding and scrolling effects from common JavaScript libraries.

　　当用户点击一个导航选项，页面变化（部分） ，新的内容会显示在该区域占了以前的内容。公共JavaScript库的滑动和滚动效果支持这种布局的导航。

        The main advantage for the user is the simple fact that she needs less mouse movement and less clicks to get the information she is looking for. Because this approach is quite new, there is a good chance that some readers will get confused by the unconventional navigation techniques. An alternative “static” version may be helpful or even necessary in this case; you’ll have to offer an alternative version anyway for search engines and for people who have deactivated JavaScript support in their browsers.

　　对用户的主要优势是她需要很少的鼠标运动，和更少的鼠标的点击来获得她正在找的信息。因为这种做法是相当新的，很可能把用非传统导航技术的读者弄糊涂了。另一种“静态”的版本在这种情况下可能会有用，甚至有必要；您得为搜索引擎和撤销了浏览器的Java语言支持的人提供一种替代版本。

 3. 多栏布局

A design with multiple columns (3+ columns) is not necessarily a complex design. On the contrary, when designed properly, multi-column designs can be really helpful to visitors because they are given (hopefully) a better overview of the available navigation options and can more quickly find the information they are looking for.

　　多栏（大于３栏）设计不一定是一个复杂的设计。相反，如果设计得当，多列的设计可以真正的帮助访问者，因为他们向游客提供（如果运气好的话）更好的了解现有的导航的概览，可以更迅速地找到他们正在寻找的信息。

Over last few years, we’ve seen an explosion of content on the Web, which has led to the problem of a decrease user attention span, the time that visitors are willing to spend on a given website. Consequently, it’s no wonder that designers have tried to find ways of presenting information compactly, both to keep visitors on a website as long as possible and to make it as easy as possible to find content.

 　　在过去的几年里，我们看到了爆炸的内容在网络上出现，这导致了减少用户注意力的问题，访问者愿意花时间在某一网站上 。因此，难怪设计师曾试图寻求紧凑的介绍信息的方法，即要保持访问者在网站上的浏览时间尽可能长，又要使其尽可能容易的找到内容。

    One way of achieving this is simply to use layouts with more columns placed next to each other. The idea is quite reasonable. Screen resolutions have been constantly increasing in recent years (though a wide adoption of netbooks, like Asus’ Eee PC, may change that), providing users with more horizontal space and designers with additional space to fill with content.

　　实现的方法仅仅是为了使用多栏布局相邻放置。这个想法是非常合理的。最近几年屏幕分辨率不断增加（尽管广泛采用netbooks，像华硕电器和电子设备的PC ，可能会改变这种状况）为用户提供更多的横向空间，为设计师提供更多填写内容的空间。

解释一下，普通意义上，Netbook是指屏幕尺寸为10寸以下的，以上网、办公等需求不高的活动为主的笔记本电脑。Netbook，也被称为上网本、便携本、小本。

    The result: now more and more designers are using more and more columns. We have observed a strong trend towards these so-called multi-column layouts, which are often fixed layouts of 850 by 1000 pixels in width. Multiple columns are used in magazine layouts and portfolios. In these layouts, grids are often used to guarantee a structural balance, hierarchy and order.

　　其结果是：现在越来越多的设计人员使用越来越多的列。我们已经看到一个强大趋势，这些所谓的多列布局，往往是固定的版面850×1000像素的宽度。多列被使用在杂志布局和组合。在这种布局，网格常常被用来保证结构的平衡，层次和秩序。

    With multi-column layouts, the importance of active white space between and within columns cannot be overstated. ( Active white space is the space that is deliberately left blank to better structure the page and emphasize different areas of content.)

多栏布局的重要性，活动空白以及各自内部栏怎么强调也不过分。 （活动空白的空间是故意留下的空白，以便更好地组织网页，并强调不同领域的内容。 ）

    For this purpose designers often make use of Shneiderman’s Mantra (”convey big picture first, reveal details later”), providing users with a brief overview of available options first and offering details on demand — later, when a link was clicked (Mozilla Labs is a great example of just that).

　　为此设计者常常利用Shneiderman的口头禅（ “先传递大图片，后揭示细节” ） ，从而先为用户提供了简要概述，点击后，再提供详细的内容（ Mozilla Labs 就是一个很好的例子） 。

 4. 巨型插图式与多变背景设计

Just as huge typography keeps dominating modern Web design, huge illustrations seem to be gaining popularity across both professional and personal Web projects. And designers are trying to communicate the message of a website using interactive elements (embedded video blocks) and visual elements (introduction blocks and illustrations). Recently in designs, illustrations have taken up much more space than before and usually supplement huge typography, and they are more attractive, more vivid and therefore more memorable to visitors.

　　如同巨大的字体继续主导现代的网页设计，巨大的插图似乎也越来越受欢迎，无论是专业和个性化的Web项目。设计师正在试图使用交互元素（嵌入式视频块）和视觉元素（导言块和插图）传达网站的信息。最近在设计中，占用了比以前更多空间插图通常结合大字体，他们给浏览者更有吸引力，更生动，更令人难忘的感觉。

Alternatively, designers are also using vibrant graphics, particularly for backgrounds but also for other design elements. Various styles and graphic approaches are used: grunge, collage and scrapbook, ornaments, retro and vintage, watercolor, organic textures and photographic backgrounds.

　　另外，设计师还使用充满活力的图形，特别是做为背景，也做其他设计元素。使用不同风格和图形方式：抽象画，拼贴画和剪贴画，装饰画，复古和经典，水彩，有机纹理和摄影背景。

 5. 更多留白

    Probably one of the most predictable, yet extremely beneficial, developments in Web design over the last few years has been the increasing prominence of white space. White space dominates many designs and is used generously to improve the flow of articles and structure of websites.

　　或许一个最可预测的，但极其有益的，过去几年中的网页设计发展留白已经日益突出。留白主导着许多设计，被慷慨地用来提高文章的流量和网站的结构。

    In fact, we have never seen so much padding in content areas and navigation menus. Padding of 20 to 25 pixels in the wrapper and content area is becoming a rule of thumb, and even more padding is often considered acceptable. Hopefully, this development is here to stay.

　　事实上，我们从来没有见过这么多的内容填充区和导航菜单。在边界和内容区域填充20至25像素的正在成为一个经验法则，更多的填充往往被视为可以接受的。我们希望，这一发展将继续存在下去。

 6. "社会"设计元素

　　任何人都喜欢流量与认可，在 Web 设计中加入社会网络元素，可以鼓励你的访问者参与进来。

    If you take a close look at the blogosphere, you’ll hardly be able to find a blog that doesn’t use some kind of “social” icons or social blocks to encourage readers to promote its stories on popular social media websites. Every author loves traffic and recognition, which is why the social element in modern design is becoming bigger and aesthetically more attractive.

　　如果你仔细看博客，您几乎很难找到不使用某种形式的“社会”图标的博客或鼓励读者以促进其故事在社会媒体网站上受欢迎的社区。每个作者热爱交易和认可，这就是为什么在现代设计中的社会因素变得的更大，更具吸引力的美感。

    Social icons are usually put all over the place, often in the top right of articles or at the bottom of the post. Social blocks often fill the area beneath a post and sometimes appear beside a list of related articles. Twitter, Flickr and Last.FM integration is still common for blogs and portfolios.

　　社会图标通常随处可用，往往是在文章右上角或帖子的底部。社区往往填写帖子的下面区域后，有时会在列表旁边出现有关条款。 作为博客和作品展示的Twitter，Flickr和Last.FM一体化仍然是很普遍的。

　　Twitter 是即时信息的一个变种，它允许用户将自己的最新动态和想法以短信息的形式发送给手机和个性化网站群，而不仅仅是发送给个人。
Flickr为一家提供免费及付费数码照片储存、分享方案之线上服务，也有提供网络社群平台。其可以让人以希望的任何方式轻松地在各个人之间取得相片或视讯。
Last.fm 是 Audioscrobbler 音乐引擎设计团队的旗舰产品

 7.带“说明”的导航

　　传统的水平导航条，一般是一些标题连接或图标链接，用户很难从这些短短的信息中真正知道这些导航所代表的内容，解释性导航会在栏目导航菜单上提供进一步解释内容，让用户更好地理解这些栏目代表的内容。

    We wrote about “speaking” block navigation in one of our showcases last year, and this design element seems to remain popular across various websites. The most significant task a navigation menu has to accomplish is to unambiguously guide visitors through different sections of a website. However, it’s quite hard sometimes to communicate the content of a website’s section with just one or two keywords, particularly if horizontal navigation is used.

　　我们去年写过“解释”块导航，这一设计元素在各个网站中似乎仍然流行。导航菜单最重要的任务是明确地引导访客查看网站的不同部门。然而，只用一个或两个关键字去传达网站的部分内容是相当难的，特别是使用横向导航。

    That’s why navigation options aren’t often listed simply one after another using appropriate keywords (i.e. using “silent” navigation). Instead, designers are attempting to concretely explain what options are available and what visitors should expect from a website section upon clicking the corresponding link.

　　这就是为什么导航选项往往没有将使用的适当的关键字逐个列出（即采用“沉默的”导航） 。相反，设计师正试图具体解释什么选项是可用的，访问者点击一个网站区域相应的链接后期望什么。

    Because designers are trying to initiate more effective dialogue with visitors, we like to call this navigation scheme “speaking” navigation, as opposed to “silent” navigation, which is based on listings of keywords.

　　因为设计师正试图展开与访问者更有效的对话，我们喜欢称此导航计划“ 说明”导航，而不是“沉默的”导航，这是根据关键字目录。

So that visitors perceive content as being easy to navigate, the navigation is often structured with blocks of the same height and width. Large icons are quite often used; but in most cases the decision as to whether or not they are appropriate depends on the content of the website and the overall layout. “Soft” hover effects often support the navigation design by making browsing more pleasant.

　　让浏览者认为内容易于浏览，导航与结构往往与块具有相同的高度和宽度。大图标很常用，但在大多数情况下，但是在大多情况下他们是否适当取决于网站内容和总体布局。 导航设计的“软”悬停效果使浏览更加舒适。

8. 动态 Tabs 标签

One of the most popular trends in interactive design is having a tabbed area whose content can be changed dynamically. The idea behind dynamic tabs is that the content of all tabs is loaded when the page is loaded, but only one part of the content is displayed at a time (the attribute display is used to achieve this effect). You can follow a tutorial on dynamic tabs and ‘tabs’ visual control in jQuery to create dynamic tabs.

 　　在交互设计领域中最流行的趋势之一是有一个内容可以动态改变的标签区。其后的想法是，动态标签中的所有标签内容在加载网页时都被加载，但同一时 间只显示一个部分的内容（属性显示用来实现这一效果） 。您可以按照jQuery的动态标签和'标签'视觉控制教程创建动态标签。