阅读更多

12顶
0踩

互联网

转载新闻 2009年海外Web设计风潮(上)

2009-01-20 09:59 by 资深编辑 withyou 评论(3) 有5693人浏览
Web

这是 Smashing Magazine 花费几个月的时间研究编写的 2009 年 Web 设计风格与潮流,Smashing Magazine 的编辑们对当前流行的大量 Web 设计风格进行分析,总结出那些可能在 2009 年风行的潮流,包括新的设计元素,新的图形方式,并给出大量的漂亮的示例。这是第一部分10个潮流,第二部分15个潮流将于下周推出。

2009 Web 设计风潮

  1. 凸版印刷风格
  2. Web Design Trends 2009

  3. 富UI

    Web Design Trends 2009

  4. 透明 PNG

    Web Design Trends 2009

  5. 大字体

    Web Design Trends 2009

  6. 代用字体

    Web Design Trends 2009

  7. 灯箱框

    Web Design Trends 2009

  8. 媒体块

    Web Design Trends 2009

  9. 杂志式样

    Web Design Trends 2009

  10. 幻灯滚动

    Web Design Trends 2009

  11. 重点展示区域

    Web Design Trends 2009

 

1. 凸版印刷风格

这种风格有些出人意料,可能因为之前很少有人使用。该风格在在各种主题的网站中都有,但主要用于产品设计或在线服务类网站。

 

2. 富UI

现代 Web 中的 UI 变得越来越漂亮,越来越好用。过去的一年,Web 中的 UI 有了显著提高,有了一种接近桌面的感觉。Ajax 和 Flash 被广泛使用。

特别是我们比去年看到了更多留白区域,还看到很多现代的 UI 技术会显示用户同系统之间交流的视觉状态,比如,按钮在正常和被按下时显示不同的样子,用户同系统交互时能及时得到反馈,另外,越来越多的服务可以被用户定制。

这些设计显示 Web 设计师将更多精力放到了用户体验上。

 

3. 透明 PNG

使用 PNG 实现透明虽然不被 IE6 支持,却在过去的一年大行其道。设计师们似乎正在尝试将背景图片和内容融合并实现一些印刷媒体的风格。比如,将 PNG 半透明图片放到整体背景的某个区域上,用来加亮显示这个区域,如标题或声明。一些 PNG 同名技术还用来实现灯箱框效果。

Smashing Magazine 去年曾有篇使用透明效果实现创意设计的文章,很多设计师在他们的作品中开始尝试这些技巧。有趣的是,透明效果常被用于页首和页尾部分,不过也有些例外

 

4. 巨大字体

以前文章中我们曾介绍过巨型字体设计,2009年,巨型字体设计还会风行,尤其是那些设计社,以及展示型,产品介绍型,或在线服务型网站,他们会使用巨型字体显示重要信息。

巨型字体设计中使用的字号往往超过36px,设计师们对字体编排注入了更多关注,以实现更漂亮,更连贯,更值得信赖的站点。

 

5. 代用字体

设计师们还把更多注意力放到字体上,虽然经典的 Web 字体,Helvetica, Arial, Georgia 以及 Verdana 等仍占主流,一些代用字体正浮出水面(如 sIFR)。

有趣的是,这些字体会和设计无缝地衔接,设计师们似乎并非为字体而字体,而是要将字体同他们的设计结合在一起实现更漂亮的效果。

 

6. 灯箱效果

灯箱框是第二代弹窗,它们比第一代基于 JavaScript 的弹窗更友好,可以让用户将注意力集中到最重要的部分。这些窗口一般由用户的某个行为激发,并显示在其它内容的上层,他们有时候是半透明的,并包含一个关闭按钮。

 

7. 媒体块

随着宽带接入的普及,用户现在可以承担更丰富的内容,设计师们也借机提出更有吸引力的内容。越来越多产品网站使用媒体块显示视频,让用户更容易理解 这些内容。用户只需靠在椅子上看视频,不需要一步一步往下点,这些食品通常比较短,直奔主题,虽然很正规,但也包含一些娱乐性。

不过请注意,视频应当是你内容展示方式的次要选项,并不是所有人都有宽带接入,也不是所有人都喜欢有视频播放(他们可能正在后台听网络收音机或播放音乐),另外,也不是所有人都启用了 Flash 和 Javascript。

 

8. 杂志外观

传统印刷媒体设计中使用的编排技术也出现在 Blog 设计中,文章的编排,文字排版,图片甚至对其方式。基于网格的设计也很流行,但主要用于展示与产品页以及大型博客,极少用于公司网站或网店。

 

9. 滚动幻灯导航

幻灯片水平和垂直滚动,可以向不同方向滚动,当前项加大加亮。这种导航技术可以让用户快速直观地浏览站点中的内容。一般常用语娱乐性网站,另外,设计者还可以使用该技术展示他们的作品。

 

10. 在重点位置做形象展示

网站的左上方一般是一个站点最重要的区域,因为那是用户注意力最集中的地方。因此,在那个部位放上网站中最重要的信息是明智之举。

事实上很多设计师正是这样做的,不管是 Web 程序,公司网站,在线服务还是作品展示,设计师们将口号或简介性内容放在那里,并使用醒目的排版给用户以良好的第一印象。这些内容长短不一,不管哪种方 式,但它们都占据可观的空间,一般横跨整个幅面,高度在250到400之间。不过这些形象展示性区域一般并不用于博客或在线商店。

 

未完待续

本文国际来源:http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
中文翻译来源:COMSHARP CMS 官方网站(35公里译)

12
0
评论 共 3 条 请登录后发表评论
3 楼 whaosoft 2009-01-21 09:55
呃 好多啊
2 楼 aixinnature 2009-01-21 09:44
非常棒的文章!
1 楼 rubycoo 2009-01-20 12:22
相比以前的设计师,我们有了很多可参考的模式。

如果能够在我的页面设计或产品设计中更好的运用“界面习惯用法”。

这样,即使用户并没有使用过我们网页或产品功能,但是通过界面给其“熟悉感”。

我们的网页或产品就会被接受。

感谢这些设计师以及汇总人员能够给我们提供如此好的设计模式。

GOOD JOB

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • HOOK API技术

    里面是我从网站上查询的HOOK技术,对此有了个了解急需赚取积分下载文件,请原谅

  • API Hook完全手册

    1 基本原理org:http://blog.csdn.net/ATField/archive/2007/02/10/1507122.aspxAPI Hook是什么我就不多说了,直接进入正题。API Hook技术主要有下面的技术难点:1. 如何将自己的的代码Inject到其他进程2. 如何Hook到API 1.1 代码的Injection常用的方法有:1. 使用注册表HKLM

  • 没有HOOK就没有病毒?详谈HOOK API技术(转)

    HOOK API是一个永恒的话题,如果没有HOOK,许多技术将很难实现,也许根本不能实现。这里所说的API,是广义上的API,它包括DOS下的中断,WINDOWS里的API、中断服务、IFS和NDIS过滤等。比如大家熟悉的即时翻...

  • 浅谈API HOOK技术

             APIHook一直是使大家感兴趣的话题。屏幕取词,内码转化,屏幕翻译,中文平台等等都涉及到了此项技术。有很多文章涉及到了这项技术,但都闪烁其词不肯明明白白的公布。我仅在这里公布以下我用Delphi制作APIHook的一些心得。       通常的APIHOOK有这样几种方法:      1、自己写一个动态链接库,里面定义自己写的想取代系统的API。把这个动态链接库映射到2G以

  • API HOOK技术

    API HOOK技术是一种用于改变API执行结果的技术,Microsoft 自身也在Windows操作系统里面使用了这个技术,如Windows兼容模式等。 API HOOK 技术并不是计算机病毒专有技术,但是计算机病毒经常使用这个技术来达到隐藏自己的目的。 外文名 API HOOK      用于 改变API执行结果的技术 应用 如Windows兼容模式等 ...

  • Hook textout可能遇到的问题

    一、因为TextOutA等函数还会调用ExtTextOutW之类函数,如果hook所有TextOut函数,则对同一次文本输出,会产生两次拦截。 二、ExtTextOutA(.......UINT c,.....)函数中,参数c表示输出字符串的个数。按API参手册,如果c为-1,则字符串必须以'\0'字符结束。这是一个陷阱,c 是UINT类型,不可能等于-1。如果不仔细,很容易根据参考手册写出以下...

  • ApiHook 技术大全 ApiHook 技术大全 ApiHook 技术大全

    ApiHook 技术大全 ApiHook 技术大全 ApiHook 技术大全

  • 利用API hook拦截技术监视文件操作.pdf

    介绍了API拦截(API Hook)技术及其应用领域,并在此基础上,详细说明了利 用陷阱式API HOOK技术实现文件操作监视的原理和实现方法

  • API hook原理和实例快速入门(inline hook),以dll线程注入方式使用(win7-64bit)

    一个完整的hook,如果hook程序是以dll形式生成的,是分两步:1.完成dll本身的设计和生成,2.完成dll注入程序的设计和生成 本文完成第一步。 第二步在http://blog.csdn.net/arvon2012/article/details/7767437有详细讲解。   最近在64位win7上hook文件复制,拖拽和剪切的hook(这个要通过hook IFileOperat

  • 什么是HOOK功能?

    HOOK API是一个永恒的话题,如果没有HOOK,许多技术将很难实现,也许根本不能实现。这里所说的API,是广义上的API,它包括DOS下的中断,WINDOWS里的API、中断服务、IFS和NDIS过滤等。比如大家熟悉的即时翻译软件,就是靠HOOK TextOut()或ExtTextOut()这两个函数实现的,在操作系统用这两个函数输出文本之前,就把相应的英文替换成中文而达到即时翻译;...

  • VC++实现全局钩子勾住textout金山快译的原理实现

    大家都对金山快译可以讲英文软件翻译成中文软件感到惊奇其实就是全局钩子勾住textout函数钩子头文件如下void __declspec(dllexport) WINAPI InstallHook(BOOL,DWORD); BOOL WINAPI UnInstallHook(); LRESULT CALLBACK GetMsgProC(int code,WPARAM wParam,LPARA...

  • 浅谈API HOOK技术(一)

    浅谈API HOOK技术(一)        APIHook一直是使大家感兴趣的话题。屏幕取词,内码转化,屏幕翻译,中文平台等等都涉及到了此项技术。有很多文章涉及到了这项技术,但都闪烁其词不肯明明白白的公布。我仅在这里公布以下我用Delphi制作APIHook的一些心得。       通常的APIHOOK有这样几种方法:      1、自己写一个动态链接库,里面定义自己写的想取代系统的API。

  • 向窗口输出文字--TextOut和DrawText函数

    在《一个完整的Windows程序框架》一节中,我们使用 DrawText() 向客户区的中间位置输出了一段文本,但并没有详细解释,这节我们来重点说一下文字的输出。 设备环境(DC) 在Windows中,一切能在显示器上看到的都是图形,不但包括点、线、矩形、圆等,也包括文字、字体。对用户来说文字和图片是不同的,但它们在本质上都是图形,都需要在显示器上画出来。这也是Windows被称作图形

  • 进程隐藏之API HOOK

    // 在Windows中,用户进程的所有操作都是基于WIN32 API来实现的,例如使用任务管理器来查看进程等操作。 // API HOOK技术是一种改变API执行结果的技术。 // PS:ZwQuerySystemInformation函数: // 功能:获取指定的系统信息。 // 原型:NTSTASTUS WINAPI ZwQuerySystemInformation ( // _In_ SYSTEM_INFORMATION_CLASS SystemInformationClass,

  • 在已有软件加壳保护 下实现 Inline hook

    如写的不好请见谅,本人水平有限。 个人简历及水平:。 http://www.cnblogs.com/hackdragon/p/3662599.html 正常情况: 接到一个项目实现对屏幕输出内容的获取,于是OD载入,发现是XX加壳保护,正常情况写代码采用jmp跳转到自己的代码处 采用前人使用的CHookApi_Jmp类 源码在http://www.cnblogs.com/showna/art...

  • Hook API 原理 解析

    1 什么是Hook API 简单的说,一个应用程序要调用一个API函数,例如CreateFileW,那么应用程序必须要知道函数的地址,才能调用它,我对Hook API的理解是,把这个函数地址替换为另一个函数MyCreateFileW的地址,那么每当程序调用CreateFileW时,就会调用MyCreateFileW 2 Hook API有什么用 在《Rootkits——W...

  • 9.3 挂钩API技术(HOOK API)

    9.3 挂钩API技术(HOOK API)

Global site tag (gtag.js) - Google Analytics