跳至主要内容

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



 

评论

此博客中的热门博文

6岁小朋友在PSP上看到不该看的东西

美国佛州的一位母亲Thamtha Tovar为自己六岁的儿子在Manatee的沃尔玛购买了一个礼物,一台全新的PSP, 然而当这位六岁的小朋友打开此PSP的时候,映入眼帘的却是一位"一丝不挂"的美女,惊恐之下,小朋友向自己的母亲哭诉了自己的遭遇。 伟 大的母亲听说此事勃然大怒,愤然找到沃尔玛的负责人要求对此事件作出合理解释,为何刚购买的PSP里的记忆卡会有"美女"在里面。沃尔玛的工作人员如此说 道:"呃,你把机器带来过,我们把卡帮你取出来,然后我们会给您儿子免费提供一个新的游戏。"这位母亲说:"我很乐意,但是恐怕你们没有明白我说的话。" 沃尔玛的一位发言人称他们正在调查为何发生此事,寻求解决此问题,而Tovar女士则要求更换一台全新的PSP并要求沃尔玛为此事道歉。 ------------------ 洛阳生活信息点评网:http://luoyanglife.com/ 洛阳生活信息,我爱打折论坛:http://bbs.luoyanglife.com/ 河南招生考试网:http://www.edu-ha.com/  

照着做,你的人生一定很顺利!

  01.犯了错误就该诚实地认错——狡辩、诿过只会害了自己。   02. 朋友 之间要保持距离——这样的 友谊 才能长久。     03.钱追人,人追健康——有了健康,还怕挣不到钱么?     04.别轻易转行——转行的风险很高,最好不要轻率为之。     05.适度地抬高身价——在就业市场中,人也是一种商品。     06.把敬业变成 习惯 ——从长期看是为了自己。     07.运用累积法壮大资产——不求快,不求多,不中断。     08.忍一时,争千秋形势比人强时,必须忍。     09.与其你死我活,不如你活我也活——这就是双赢,是良性竞争。     10.以"播种"的 心态 经营人际关系——种子播得越早越坚韧。     11.做事切勿率性而为——率性而为只会害了自己。     12.遇到魔鬼型的主管时——接受他的磨练可让你的 性格 越来越坚韧。     13.不要当众和主管吵架——那会让你无路可走,只有走人。     14.向不同行业的人学习新知识——记住,要用请教的 态度 。     15.所有的困难都是好事——这是老天爷在磨练你,目的是把重任交给你。     16.用吃亏就是占便宜的心态 做人 做事——那样你就可以迅速长大。     17.不要在失意者面前谈论你的得意——那样 伤害 你的人际关系。     18.不要小看守时这件事——守时是对别人的尊重。     19.用 时间 来看人——时间是检验大师。     20.用打听来看人——把获得的信息汇总,就可以了解那个人。     21.建立一个朋友档案——以免人到用时方恨少。     22.扩大交友圈——主动出击,不要等别人上门找你。     23.保持交友的弹性——敌人也可以变成朋友。     24.要交 喜欢 "修理"你的朋友——这种朋友是你的 人生 导师。   25.毛遂自荐,好处多多——让别人看到你,知道你的存在,知道你的能力。     26.小心突然升温的 友情 ——对待这种友情的正确态度是:不推不迎,礼尚往来。     27.做老二,不做老大——老大没当好,容易变成老三老四。     28.做人要中规中矩——目的是赢得他人的尊重和信赖。   ...

FTP服务器关于断点续传权限的防范问题

FTP服务器关于断点续传权限的防范问题    假设ftp服务器中存在一个文件Readme.txt,文件大小为1000 bytes,连接上这个ftp服务器(假设我有写权限,ftp服务器是支持断点再传的),我本地中也有一个叫Readme.txt的文件,文件大小为 500 bytes。好了,我开始做坏事。    1、连接上这个ftp服务器(用系统自带的 ftp://ftp.exe/,在内网的可能无法使用,因为 ftp://ftp.exe/用的是port模式)    2、dir(查看Readme.txt大小,确定了是1000 bytes)    3、quote rest 1000(告诉ftp服务器我将要传送的文件是从文件位置1000开始)    4、send Readme.txt    5、dir(再次查看Readme.txt大小,现在Readme。txt变成1500 bytes了)    为什么Readme.txt会变大了?很简单,因为我本地的那个Readme.txt的500字节上传成功,并写入到ftp服务器中存在的那个 1000 bytes的Readme.txt文件中了。问题是出在第二条命令,如果没有第二条命令,我的第4个命令(Send Readme.txt),就会得到一个Permission Deny的错误,第二条命令是让ftp服务器信任我们将要进行一个断点再传的操作,如果没有第二条命令,ftp服务器将以为我们进行的是一个复盖原文件的操作(复盖原文件操作需要另外的权限才可以进行)。    这个问题只是在允许断点再传的FTP服务中存在,但现在90%的FTP服务程序都是允许断点再传的,所以这问题在普遍的FTP服务器都会存在。    防范方法:    如果一定需要给用户上传权限的话,最好的防范方法是每个用户都给他建立一个目录,将那个用户的权限完全锁在这个目录内,那么用户就没有权限可以查看其它用户的目录,也就是说无法造成以上所说的破坏。