跳至主要内容

网页设计趋势发展历程之2009上

Web Design Trends For 2009
Smashing Magazine版权所有
作者:Smashing Magazine
译者:UCD翻译小组,波希米亚
校审:Angela

网页设计师是变幻无常的。我们喜欢拿东西做试验,喜欢观察人们如何与我们的产品进行交互。我们喜欢尝试与众不同的设计方法,这些在将来可能会成为主流和经典。因此,随着新设计方法的兴起,越来越多的设计师关注他们、使用他们,新的趋势也就诞生了。

在过去的几个月,我们分析了很多网页设计,观察新趋势,权衡设计决策和代码解决方案的优点。在这篇文章里,我们将展示2009年网页设计趋势:动态、新的设计元素和新的图形表现形式。接着还讨论了这些趋势被使用的情况和现有的一些漂亮的案例。在这篇概述中我们还遗漏了哪些动态吗?发表评论吧,好让我们知道!

本文仅涵盖了过去几个月中我们发现的25个趋势之中的10个。第二部分将在下周发表。届时将涵盖布局、新的视觉表现形式和新的设计元素。敬请期待。

2009年网页设计趋势

首先来看看过去几个月里我们发现和观察到的主要趋势。在这篇概述中,将带你逐一回顾每个趋势和漂亮的案例,他们将激发你在下个项目中的灵感。

1. 凸版印刷

trend-01

2. 富UI

trend-02

3. 透明的PNG

trend-03

4. 大字号(版面)

trend-04

5. 自定义字体(sIFR 等)

trend-05

6. 模式化对话盒/会话窗

trend-06

7. 多媒体区

trend-07

8. 杂志外观

trend-08

9. 旋转木马(幻灯片)

trend-09

10. 导言模块

trend-10

好,现在就让我们到具体内容中去仔细看看上面提到的每个趋势。

1. 凸版印刷

在 过去几个月的观察中,最出人意料的趋势,是凸版印刷样式(实际上压上去的字)出现在网页设计中。可能这种趋势产生的最重要的原因是因为,这种印刷术到现 今已经很少被使用了。凸版印刷以各式各样的风格被用在网站和主题上;尤其是,已经被频繁使用于产品设计和网站的在线服务中。

letterpress6

letterpress3

letterpress7

letterpress8

letterp

letterpress1

letterpress2

letterpress4

letterpress5

2. 富UI

我 们欣喜的看到,用户界面在现代网站和网页应用中已经变得越来越漂亮、越来越实用了。在过去的一年里,这些网站应用的用户体验已得到大大改善,从而使得用户 界面的丰富性和响应度都非常接近经典的桌面应用程序。AJAX和Flash在为用户提供动态交互的广泛应用上,已经有了先进、成熟并且专业的解决方案。

特别值得一提的是,过去一年里我们看到在设计元素中使用了更多的留白,更多的填充以及更大的空间。我们还注意到,许多现代用户界面用直观的视觉提示来表现用户与系统间的交互情况。比如,当按钮被按下时,它的外观就由"正常"变为"按压"(就像Newspond.com和Quicksnapper.com上这样),确认并对用户与系统的交互给予及时反馈。除此之外,越来越多的服务能够进行用户个性化:对我们而言,这清晰的表明,更适用的用户界面将在2009年到来。

quick

sli

上述两个例子表明,网页应用的设计师们在功能介绍和改善交互性、响应度等用户体验问题上投入了更多的精力。

action

spond

howcast

moodstream

personalize

radioh

kontain

3. 透明的PNG

透 明的PNG,尽管不被IE6支持,但从去年来看似乎已经得到了很好的普及。显然,设计师们试图更好地把背景图片融入到实际内容中,并打算形成一种风格,这 在印刷媒体中很常见,比如在杂志中。在多数情况下,半透明背景从页面整体背景中脱颖而出,其目的是为了突出一个重要的设计元素,例如头条和公告。有时透明 PNG也作为模式化对话盒(会话窗)的背景。

去年,我们描述了许多可以利用透明度发挥网页设计创意的方法,很多设计师似乎也在他们的工作中尝试着这些技术。有趣的是,透明经常被使用在设计的头部或底部,但也有些设计 超越了这种定式。

cover-headline1

png

oob2

png2

transp

wisih

carrot

4. 大字号(版面)

在之前的文章(1,2 )中,我们列举过一些大字号(版面)的杰出案例。2009年,大字号(版面)将成为主流。特别是设计机构,开发大型项目,做产品网站和在线服务的,他们会使用大字号(版面)来传达自己网站最重要的信息。

这些设计元素的字体大小通常都要超过36px,在很多情况下,为迎合观众都会使用非常漂亮的字体。总的来说,设计师投入更多精力在排版的细节方面,如主次关系,行高和字体的选择。其结果是:网站更漂亮,风格更一致,看起来可靠且值得信赖。

zo

type1

red

logbook

vine

type3

type7

5. 自定义字体

就 像设计师花费了更多精力在排版上一样,他们也更注重用来作网站正文副本的字体。尽管有像Helvetica, Arial, Georgia和Verdana这些毋庸置疑地占据统治地位的经典字体存在,我们仍观察到有一股向自定义字体发展的微弱趋势(例如使用sIFR)。

有趣的是,这些字体往往无缝结合于网站设计中;它们几乎从不需要网站因它而"更新"排版。设计师们试图融合漂亮的版式和炫目的视觉设计,以此来改善网站的外观和用户体验。

sh

sifr1

sifr2

sifr3

daily

6. 模式化对话盒/会话窗

模 式化对话盒(会话窗)其本质上就是一个改进型的弹出窗。它们以友好的界面替代了传统JavaScript弹出窗口,并且使用户的注意力始终集中在网站最重 要的区域内。状态窗通常是被用户的动作所触发(如注册或登录),并且出现于主内容之上,就像桌面应用中的一个窗口。会话窗往往以一个非常微妙的方式出现: 它们通常采用半透明,并且有一个"关闭"按钮。

modalbox2

modalbox1

groove

7. 多媒体区

随 着更多宽带网络的接入,相比两三年前,用户已经可以浏览更丰富的内容,设计师可以借此机会,用更具吸引力和值得回忆的方式来呈现内容。怪不得一些产品网站 用多媒体区(录像和视频)来展示他们的内容。这类元素的主要优势还在于,它们可以快捷有效地表达内容,并使用户更易于消化这些信息。

用户要做的只是靠在椅背上欣赏;它们会把每件事按部就班地展示出来,不需要用户点击,搜索说明,或是学习导航如何使用。影片通常都简明扼要;它们大多正式,但也不乏娱乐。

但请明白,视频只是网站内容的一种替代形式(而不是主体和唯一!)。不是所有人都通过宽带上网,也不是所有人都愿意看视频(因为他/她可能正在听广播或音乐),更不是所有人的机器上都安装了Flash和JavaScript.

gf

gb

8. 杂志外观

在 Blog的设计中有一个非常有趣的现象,许多手法通常来自于传统(印刷)媒体。从页面文章的排列、排版的运用、插图,甚至到文字对齐方式都与传统印刷技术 的手法相似。栅格化设计变得日益普及,但多用于大型项目,产品页面和大型的Blog;它们几乎不在公司网站或网上商城中出现。

magazine2

magazine3

magazine4

maga

magaz

9. 旋转木马(幻灯片)

旋转木马其实就是幻灯导航,它的内容垂直或水平轮转(因此得名"旋转木马")。要达到轮转导航的目的,用户需要点击其中某一个切换元素(通常是左/右或者上/下箭头)。当进行切换时,内容就向所选的方向轮换了。

过 去用户为寻找他们所喜爱的内容需要点击网站中的很多章节,取而代之,现在可以快速浏览可见的内容,省去了滚屏和不必要的鼠标移动。这样做的好处是:用户不 但节省了时间,而且使他们的注意力更加集中到内容中,而不是被分散到浏览器窗口上。这类幻灯导航经常被使用在娱乐网站和大型Blog上,但设计师也可以把 它用在大型项目中,以更互动的方式来展示自己的工作。

amy

cnnmoney

musicyahoo

wein

10. 导言模块

网站的左上部是页面中最重要的区域,因为它最能吸引访问者的注意力。因此,把网站最重要的信息放在那里是再明智不过的了,这样就能确保访问者尽可能快的看到信息。

事 实上,这也是许多设计师正在做的事情。不管是为网站应用、公司设计、在线服务还是大型项目,设计师们都会把他们的标语和简要导言放在页面顶部,通过使用粗 体和生动的排版,给用户留下一个好的第一印象。一些导言是简短的,也有一些够啰嗦的;无论哪种,它们都会占一大块区域;与布局等宽,高度在 250-400px之间,已成为这些导言模块的通用尺寸。值得注意的是,这些模块几乎从不出现在Blog中,网上商城中也很少出现。

feature2

introd

45r

feature3

introd2

敬请期待!

本文仅涵盖了过去几个月中我们发现的25个趋势之中的10个。第二部分将在下周发表。届时将涵盖布局、新的视觉表现形式和新的设计元素。敬请期待。



 

评论

此博客中的热门博文

前员工称社区网络是Google最大弱点

北京时间3月7日消息,Google员工近日掀起了离职创业之风,并且主要的创业领域为社区网络。有前Google员工指出,社区网络正是Google最大的弱点。以下是今天美国科技博客的主要内容。   Bits:分析师称移动运营商之间将出现价格战   Sanford Bernstein分析师Craig Moffett日前在一份报告中称,由于手机普及率已经很高,因此移动运营商将很难继续实现增长,而运营商之间将出现价格战。来自美国各主要运营商的最新数据显示,用户增长的速度正在大幅放缓。08年美国手机用户数仅同比增长5.9%,而09年可能进一步下降至3%。而一旦出现价格战,运营商的营收增长也将趋于停滞。Moffett甚至表示,整个移动通信产业即将崩溃。移动运营商目前将希望寄托在智能手机上,智能手机用户通常会更多的使用数据业务。   WebProNews:员工称Google最大弱点在社区网络   前Google员工Bindu Reddy和Arvind Sundararajan近日创立了一家社会化网站Likaholix,这是前Google员工近期创立的数家网站之一。分析认为,导致Google员工离职创业的原因有二。首先,Google目前的规模太庞大,因此很难将一些好的创意引入核心业务中。其次,在网页搜索领域对Google发起挑战是愚蠢的,Google最大的弱点在于社区网络和实时搜索。Reddy认为,Google未来最大的威胁来自Facebook和Twitter,而不是微软和雅虎。   Search Engine Land:AdSense发行商起诉Google获胜   AdSense广告平台的一名用户近日对Google提起诉讼并获得胜利。Google此前关闭了该用户的AdSense帐号,理由是该帐号"对广告主造成威胁",但Google并未具体指出这一威胁是什么。该用户随后起诉Google,并要求Google赔偿721美元。尽管Google的法律代表声称Google有权终止用户帐号,并且已经向该用户支付了721美元,但法庭最终判决结果仍然要求Google支付这笔钱,以及40美元的庭审费用。这一诉讼或许将成为其他AdSense发行商未来起诉Google的依据。   VentureBeat:全部iPhone应用程序总售价超7万美元   尽管RIM、微软和Palm等公司均推...

奥运会开模式上的蓝屏靓照

鸟巢的灯光和投影显示系统 使用了上百台Windows XP Embedded系统的服务器产品 此次北京奥运会开幕式共使用了120台HES Axon Media Servers服务器,这也是历届盛会之最。所有的灯光效果以及放映机移动控制都由Axon Media Servers实时处理并通过三台Wholehog 3灯光控制台操纵完成。 位于鸟巢的Axon Media Servers,有关Axon Media Servers的更多信息可参考 这里 。 在开幕式主火炬点火的关键时刻,其中一台投影服务器正巧出现了 奥运开模式上的蓝屏靓照 这幅图来自 gizmodo.com (both Li Ning and the BSOD :-) ) 没有错,正当李宁在空中跑道大步迈进的时候,蓝屏就在他的身旁。 下面的图片 据说 拍摄于H区3层顶棚。 拍摄于H区3层顶棚,2008.8.8,持续了开幕式的一半时间... Windows Blue Screen on the Olympics Openning Ceremony of Beijing 2008 照片上沿的那块蓝色,不过里边的字看不清了,其实从开幕式刚开始没多久,我就注意到顶棚有这么一块蓝色;不过因为是横过来的,所以没发觉是蓝屏;后来坐在我右边的一位老兄提醒了一下,我才反应过来,这时开幕式都快结束了。 李宁点完火炬降下来时,就经过瑞士国旗的左边,而这个蓝屏也就在李宁的左边,可惜我敏感度不高,当时没照下来。 相关链接: 奥运会开幕式上的Windows蓝屏 Blue Screen of Death Strikes Bird's Nest During Opening Ceremonies Torch Lighting 奥运会开幕式后台控制揭秘 XPe是功臣 Windows XP Embedded? 一样会蓝屏 奥运开幕式上的Windows蓝屏新照 奥运开模式上的蓝屏靓照 2008北京奥运会开模式上的蓝屏靓照

Google和雅虎签约加入英国定向广告规则

北京时间3月4日消息,据国外媒体报道,Google、雅虎已经签约加入英国的定向广告规则,以便向消费者提供更好的隐私保护。   定向广告去年成为了英国的热门话题,当时广告技术公司Phorm宣布与英国电信、维京传媒(Virgin Media)等互联网服务供应商合作,一些人士警告说消费者的隐私将受到威胁,互联网广告局英国部门在与Google、AOL、雅虎、微软等公司商讨后制订了若干原则。   互联网广告局监管官员尼克-斯特林格(Nick Stringer)表示:"定向广告占到了网上显示广告的20%,如果这一领域要发展,就必须赢得消费者的信任。"   按照这些原则,所有定向广告平台在获得数据之前都必须明确通知消费者,必须提供一种方式让消费者可以拒绝定向广告,最好能征求消费者的同意。(编译:搜狐IT Unifytruth) ------------------ 洛阳生活信息点评网:http://luoyanglife.com/ 洛阳生活信息,我爱打折论坛:http://bbs.luoyanglife.com/ 河南招生考试网:http://www.edu-ha.com/