跳至主要内容

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



 

评论

此博客中的热门博文

简单评测4个最好的PDF搜索引擎

借此机会将专业PDF 搜索引擎单独列出,并作简单的评测分析! 简单评测4个专业PDF搜索引擎 http://mygogou.com/mm-713/ 1、Search pdf 今天刚刚发现的专业级PDF 搜索引擎,也是基于Google,与PDFGeni十分相似,收录有225,000,000 本Ebook,支持中文关键词。界面清爽,没有广告,搜索结果可选择浏览或直接下载,支持iPaper阅读器(不推荐,速度慢!) hx9opyze 4个最好的PDF搜索引擎(简单评测) 网址:http://search-pdf-books.com/ 2、PdfGeni PdfGeni是一个专业的PDF文件搜索引擎,搜索的PDF文件可以直接下载。与Search pdf基于同一数据库,支持中文搜索,搜索结果几乎完全一样。搜索结果一页显示量大,减少分页浏览的繁琐。不过上面都是英文的PDF文档,没有中文PDF 资料。去淘一下吧,应该能找到一些不错的资源:) xcwcfmnt 4个最好的PDF搜索引擎(简单评测) 网址:http://www.pdfgeni.com/ 3、pdf-search 开 始一直和Search pdf 混淆,两者是完全独立的搜索引擎,但功能有的一拼。就功能而言,我倾向于pdf-search,提供专业的PDF文件搜索,支持中文,结果有三种分享方式:下载、浏览、代码,并且提供同一关键词doc文件、ppt文件专业搜索的入口,也就是说输入一次关键词,你可以得到三种文件的专业搜索!但是,最为遗憾的是速度较慢,甚至有打不开的现象。速度可是一个好的搜索引擎不可缺少的基本素质! v0fyk8ye 4个最好的PDF搜索引擎(简单评测) 网址:http://www.pdf-search-engine.com/ 4、Pdfdatabase Pdfdatabase 是一个不错的专项华搜索引擎,提供免费的PDF及doc文件的搜索服务,尤其是PDF搜索服务更是以大亮点。就数据库而言,与以上两者势均力敌,只是在用户操作性上更为灵活方便!不过,最大的缺陷是不支持中文搜索。 fvmhtxp4 4个最好的PDF搜索引擎(简单评测) 网址:http://pdfdatabase.com/ ------------------ 洛阳生活信息点评网:http://luoyanglife.com/ 洛阳生活信息...

新年的12个健康礼物

如果你对自己的健康不够满意的话,那么,在又一个365天即将到来的时刻,不妨送给自己的身体12个健康承诺,作为珍爱自己的特别礼物:新年的12个健康礼物  http://luoyanglife.com/blog/luoyang-faq-3146/ 1 每天半斤粮——五谷为养,粮食能滋养大脑,也能养护肠胃,适量吃主食并不会使人发胖。 2 每天一餐粗——粗粮富含维生素B族、矿物质和膳食纤维,让我们有顺畅的肠道和持久的精力。 3 每天一把豆——豆子和豆制品能帮助补充蛋白质,更是多种保健成分的来源,让我们不容易发胖,而且不容易衰老。 4 每天一斤菜——蔬菜是健康生活的永恒话题,它供应的保健成分、维生素和膳食纤维帮助人们远离多种癌症。 5 每天半斤绿——在蔬菜当中,深绿色叶菜是营养之精华,无论是强健骨骼,还是预防大脑衰老,绿叶菜都有意想不到的效用! 6 每天半斤果——水果不仅味道甘甜,还能提供多种抗氧化成分和大量的钾,对于稳定血压、控制血胆固醇和预防癌症都有益处。 7 每天一两肉——肉类和水产中的血红素铁、锌和蛋白质能帮助女性拥有红润容颜和温暖的身体,只要适量摄入,就能美味与健康兼得。 8 每天一个蛋——最新研究确信蛋黄是营养素的宝库,其中含有12种维生素和多种保健成分。它不仅无害于心脏,而且有利于延缓衰老。 9 每天一杯奶——奶类中大量的钙和多种维生素对女性不可或缺。如果不喜欢喝牛奶,没关系,酸奶毫不逊色,而且其中的益生菌好处多多。 10 每天一勺仁——坚果和种子是营养密集的食品,每天早上吃一勺,令人食欲满足,能补充多种微量元素,同时润肤美颜。 11 每天六千步——运动是保持强健心脏和苗条身材的不二法门。走路时脚步尽量快一些,加上每周两次有氧运动,能够有效延缓衰老。 12 每天8小时——睡眠是身体自我修复和充电的时间。高质量睡眠是美容的最佳方法,也是减少癌症危险的最简单方法。 2009年,一定是你人生中一个充实的年份,2010年,将是收获更加丰富的一年。但是,无论多么繁忙,对于重要的事情,人们总是有时间去做的。维护健康是每个人最重要的事业,也是期待未来成功的前提条件,因此,要把健康生活排在日程的最重要位置上,就像奥巴马和普京那样。 如果能改变自己的不健康行为,哪怕只有一项,只要切实坚持一年,那么在明年的今日,一定会感觉更加健康和自信! 最后,在新年来临之际,祝各位朋友健...

维生素C有什么作用?哪些人需要补充维生素C?怎样合理补充维生素C?

哪些水果富含维生素C?维生素C有什么作用?哪些人需要补充维生素C?怎样合理补充维生素C? 加入消费者保障计划的 保健品店铺 : 维生素C宝贝 。 已加入消费者保障计划的淘宝3钻店铺: 进口蛋白粉 维生素C 。 维生素C有什么作用? 1、合成Collagen(胶原蛋白)-以形成软骨、骨质、牙釉质及血管上皮的重要基质。 2、促进脯胺酸转变为氢脯胺酸之反应,而氢脯胺酸为构成胶原重要成分之一,因此维生素C可促进胶原之生成。 3、维持结缔组织之正常-因为胶原是构成结缔组织之细胞间质。 4、参加体内氧化还原反应-维生素C可参加酪胺酸及某些物质的氧化反应。 5、制造肾上腺类固醇激素。 6、增进伤口愈合及增加对受伤及感染等压力的感受力。 7、在受感染、发热时,此维生素之损失亦随之增加,故其对刺激之反应扮演重要角色。 8、解毒作用; 9、改善心肌功能,减低毛细血管脆性,增加机体抵抗力; 10、对抗游离基,有助于防癌,降低胆固醇,防止坏血病。 维生素C的作用以及怎样合理补充维生素C? http://luoyanglife.com/blog/luoyang-faq-3305/ 哪些水果富含维生素C? 第一层: 鲜枣、沙棘、猕猴桃、柚子 每100克中的维生素C含量超过100毫克 第二层: 青椒、桂圆、番茄、草莓、甘蓝、柑橘、 每100克中维生素C含量超过50毫克 第三层: 萝卜 每100克中维生素C含量超过30——50毫克。 富含维生素C的蔬果。维生素C可以预防雀斑的产生,从而抑制黑色素的形成,保持肌肤美白。相反,缺乏维生素C则容易皮肤粗糙枯干,并且引发皮炎、脱皮等敏感症状。尤其在夏季,多吃富含维生素C的水果蔬菜,有助于恢复皮肤弹性,防止过敏反应的发生。水果如柠檬、橙子、橘子、猕猴桃、草莓等维生素C含量高。蔬菜中绝大多数绿叶菜、甘蓝、青椒等都含有丰富的维生素C。 哪些人需要补充维生素C? 维生素C又称抗坏血酸,属于水溶性维生素,容易从体内流失,必须每天从富含维生素C的物品中摄取来满足身体的需要。在所有的维生素中,维生素C是人体每天需要最多的维生素,主要因为维生素C比其他维生素和矿物质更多的参与人体各种机能。其主要作用有生成胶原蛋白、促进微血管健康、帮助铁的吸收、防治坏血病、增加免疫力、预防心血管疾病。 维生素C在生物氧化及还原过程和细胞呼吸中起重要作用。维生素C参与氨基酸代谢、神经递质的合...