第一篇⭕原文来自://www.ontoinfo.com/2006/09/13/current-trends-in-web-design/ 作者将现在的优秀设计总结为8种风格,建议去原文看看作者所截取的图形举例.

　　1.Web桌面化

　　www.yahoo.com

　　mail.yahoo.com

　　www.live.com

　　正方:看起来很爽，值得细细欣赏

　　反方:花销太大

　　尽可能地接近于桌面上绚丽的图形，这是最优雅的风格。结果呢，这种风格看起🔯来很棒，但是需要极大的工作量，而且很耗 网络资源。总之，桌面风格以其四周的角度、富于表现力的图形、阴影和对桌ꦰ面应用的模仿而独树一帜。

　　桌面元素的特征举例:

　　块级(block):屏幕上一个区域通常伴随着边 框、头部、底部(border、headerജ、footer)，来连接了逻辑上类似的元素，诸如:链接、文本、记分卡(注:我想到了digg那个分数栏)、文章预览。块 级通常伴随着看似随意的阴影(optional shadow)。

　　迷你块: 通常他们是小图片和精细文本的组合。

　　按钮:这种设计元素伴随着一定角度、风格化的边框、看似随意的阴影。按钮♔可能是玻璃风格，并且有一些从下方投射的灯光产生的阴影，当鼠标移上去还会有视觉反馈效果ꦑ。

　　标签(Tabs):它们也使用了角度、风格化的边框、看似随意的阴影。也有鼠标悬浮的反馈。

　　2.水银橙风格

　　www.mozilla.com/firefox

　　www.digg.com

　　www.silverorange.com

　　正方:可用性好、轻量级的、简单的

　　反方:时尚、追随者众、稍稍昂贵

　　看起来稍显简约，在风格化和轻量级间追求平衡，水银橙较之视觉丰富的界面更集中体现了可用性。它不像桌面风格那样试图给浏览者留下深刻印象，而是提供了优秀的可用性体🔯验。应运而生的silverorange.com就是专门水银橙风格的设计者。

　　水银橙风格的特征举例:

　　顶部菜单:通常它是深色的，文字颜色为浅色，在背景上，突出的角度颜色富于变化，并形成强烈对比。

　　引导线 :更有立体感，引导线和顶部菜单背景色形成对比，文字颜色为灰色。

　　文本分割线:更有立体感，分隔线看起来很适度。

　　3.苹果风格

　　www.apple.com

　　正方: 高雅、有品质、华贵

　　反方:太有特色，花销太大

　　这种以玻璃标签和按钮作为主要特征的设计，对小字体不太适合，但幸运的是，如果你通常不使用小字体，这种风格也是可以接受的。工作量大，因为你需要做很多设计。有特点，你需要通过设计来꧑保持独特性，所以使用苹果设计we𝔉b，几乎不可能。

　　苹果风格的特征举例:

　　苹果菜单:苹果的菜单集中体现了苹果风格，每一处都有同样的风格: 玻璃按钮、立体感、圆角……

　　4.微软风格

　　www.microsoft.com

　　www.msn.com

　　www.rsdn.ru

　　正方:功能性强、简约、开发成本低

　　反方:你是一个MS盟友

　💃　最主要的一件事，比如微软风格网站左栏的浮动ඣ菜单导航清晰，但太土了。简约、清晰但普通。就像是工程师为工程师创建的。

　　微软风格的特征举例:

　　微软菜单: 微软风格的主菜单是灰色的、功能性强、简约的。占𒅌꧒据左边栏的仅仅是边框、鼠标悬浮效果、浮动子菜单……

　　微软风格与众不同之处在于header处的ౠ立体感，当你🍃从左向右扫视，直到右上角搜索框的地方就会发现这一特征。

　　所有的块级(block)都是以清晰的灰线条分割的，我想，这是由于视点的可用性考虑。人们﷽在微软上有太广泛的选择了，但有一点是清晰的:微软的设计风🐓格是简约、功能性强、可用性好的。

　　相比苹果风格，它不够华贵。但运行起来还不错。

　　5.杂志风格

　　www.style.com

　　www.drive.ru

　　正方:吸引人、简约、浓缩

　　反方:需要许多照片和文字，内容的质量是关键

　　Web杂志设计风格是……嗯，就像杂志。它在你的电脑屏幕上看起来就像视觉效果出色的杂𒉰志，所以你完全可以用看杂志的眼光审视网页。

　　你会意识到，在高质量的照片和图像中有许多链到文章的链接。

　　杂志风格的目标群就是杂志的阅读者。不是工程师，也不是网页设计者，甚至不是网虫。这𝄹确实是由一群专业的设计师设计出来的，他们非常热爱自己的工作。如果你的目标是这类设计师🥀，那就要为你自己工作，并深爱它……

　　6.圆角朴素风格

　　www.youtube.com

　　正方:简约、清新、内容突出

　　反方:有点令人厌倦，不新颖，不易留下印象

　　这种设计一点也不坏。它的目的就是让浏览者的目🍌光集中在内容上，同时还可以减轻流量。典型站点 (www.youtube.com) 的顶部导航只有圆角和故意最简单的元素。

　　7.Web 2.0设计风格

　　blogger.com

　　netflix.com

　　target.com

　　ruby-lang.org

　　yelp.com

　　blubolt.com

　　正方:现代、易被大众接受、新颖

　　反方:可用性问题、固定宽度

　　识别web2.0的设计风格可以通过:

　　-固定宽度

　　-圆角形状和阴影

　　-大字体

　　-高亮颜色的header

　　-Substantial amount of gray text

　　-字型很宽

　　-圆角形状和按钮

　　-阴影，玻璃效果，更有立体感

　　8.Adobe / Macromedia风格

　　adobe.com

　　macromedia.com

　　正方:干净、简约、平衡、高贵

　　反方:花销大、个性突出、可用性问题

　　这种风格很像苹果风格: 一旦你看过它，你会立即识别其他模仿者。这种设计花销很大，追🔯求图形🤪效果，并且追求整体上的 平衡。它是Macromedia在几年前原创的风格，但现在仍然是最棒的web设计之一。

　　Macromedia设计风格的与众不同之处:复杂的立体按钮，圆角🎐块，阴影很独特，固定💖宽度，中心感。

　　另一篇文章对照多个世界优秀站点的设计,总结出它们的共同特点,如下:

　　1.布局简单

　　2.中心定位

　　3.3D效果

　　4.柔和,多采用自然背景色

　　5.颜色鲜亮(但谨慎使用)

　　6.可爱的图标

　　7.有许多留白

　　8.大字体