跳至主要内容

网页设计趋势发展历程之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个。第二部分将在下周发表。届时将涵盖布局、新的视觉表现形式和新的设计元素。敬请期待。



 

评论

此博客中的热门博文

20个免费的SEO网站分析工具

  在开发和维护网站的过程中, 网站分析 将对网站的前途起到非常重大的作用。今天暴风彬彬为大家收集了20个用来对自己的网站进行分析的资源或工具,而且它们几乎不用注册甚至下载就可以使用哦。有些可以说是 SEO 必不可少的工具!还等什么,快往下看…   下面要介绍的这20个工具,有些能对你提交的网站进行详尽的分析并作出详细的分析报告,甚至提示如何解决网站存在的一些问题,以达到优化效果;有些工具只是提供一个大体的分析。我相信其中大部分都会对你的SEO工作有所帮助,而且会是你的网站维护起来更有意思 :-D  译者注:您还可以参考以下网站优化相关文章: 《 浅谈网站用户体验UX与SEO的关系 》 《 推荐两个SEO辅助搜索工具 》 《 Google 评价 blog 的指标 》  《 Google 网页排名背后的技术 》  1. Website Grader   Website Grader是我平常比较喜欢使用 SEO分析工具 ,因为它分析得很全面,可用性也很高。通过Website Grader你将得到一个关于你提交的网站的非常详尽的分析报告,报告涉及到了网站的各个部分,比如页面结构、域名信息、标题摘要信息(h1,h2,h3 这些)、Google索引数量和bot最后爬行日期、RSS是否正确、Google/Yahoo/Alexa/MSN上的反向链接数、 Technorati排名、del.icio.us的收藏数、Alexa的排名情况和Google PageRank值。并且还会对提交的网站进行打分及网站出现的问题的修改建议。通常Website Grader所提出来的修改建议是很有价值的,而且能详细的致命问题出在哪,如何才能解决这样的问题。   2. Trifecta   Trifecta是这20个 SEO工具 中比较独特的一个,它以不同的标准分析一个网页、一个博客甚至一个顶级域名下的整个网站,他最终会为你提交的网站总结大致的分数及报告。如果不是会员的话每天可以申请一份分析报告。 3. Spider Simulator   这个分析工具会对你提交的网站进行相对于搜索引擎友好度的分析,并对提交的网站进行评分。主要的评分标准是Meta标签的使用、网页的标题、图片和Alt属性、网站响应时间和链接。 4

俄罗斯政治改革:走出经济阵痛,宪政日益成熟

2009-07-28 14:43:54 来源: 网易历史    俄罗斯的人民宁愿忍受改革的阵痛,也坚持政治改革,用一次又一次的全民公决和总统选举,表明人民宁愿抛弃什么,需要什么。俄罗斯联邦的领导人深知,加强对公权力的操作和政府官员们的收入和财产的透明度,是反腐倡廉的必要的重要措施,也是反腐败的决心的表现。   本文摘自《勇破坚冰的《未定稿》及其他》 李凌/编著 中国社会科学出版社   俄罗斯联邦改革的阵痛和进步1991年底,苏联解体,俄罗斯联邦是苏联的法定继承国。俄罗斯联邦在上世纪九十年代的政治经济改革中,出现了大规模经济下滑。据官方统计,1996年的国内生产总值(GDP)比1991年下降约50%。   一   但实际产量是否下降了这么多?影响人民生活水平大幅度下降的主要原因是什么?这些需要具体的分析。   1. 在苏联时期,GDP中,包括大量的军工厂的产品、未完成的建设项目和计划经济下的劣质产品(有人估计这些共约占当时GDP的50%-70%)。因此,苏联当时GDP数字虽然很高,但居民生活消费品却很少,商店货架经常空空如也。当时的苏联政府中了美国的诡计,和美国大搞军备竞赛,消耗了大量国家资源。冷战结束后,大部分军工企业被迫停产改造,连带引起一部分重工业、化工业、电子工业也停顿或减产,引起许多工人失业。军工产品特别昂贵,-辆现代化的坦克的产值相当于几十辆汽车,更不要说飞机、导弹和核武器了。这些产业一停产或减产,必然出现整体GDP数字大幅度下降。   2.苏联时代实行的是公有制和计划经济,地方官员和公有制企业的经理们,为了表现自己的政绩得到奖励和提拔,往往夸大产量,所报的数字有很大的水分。实行私有制后,私营企业主为了减少或偷漏税负,所报产量往往少于实际。   3.苏联解体后,地下经济迅速发展,不算入官方公布的GDP数字之内,但对居民的生活有很大的影响。有人估计,地下经济约为当时官方公布的GDP一半以上,实际如何,无法统计。   但必须承认,在经济改革中,主要由于俄罗斯联邦政府的某些人接受了西方学者的馊主意,1992年起实行所谓"休克疗法",物价一下子完全放开,在当时商品严重短缺的情况下,引起物价数十倍地迅速飙升,这才是人民生活水平大幅度下降的主要原因,而不是由于某些人所喋喋不休地宣传的政治改革。   二