技术资讯
网页设计趋势发展历程之2006
2009-01-20 09:01:00
Pavel Senko版权所有
作者:Pavel Senko
译者:UCD翻译小组,波希米亚
译者序:虽然说不是权威的设计趋势报告,但作者依然收集了很多有代表性的案例对2006年的网页风格变化加以很好的演示和说明。网页设计风格每年都在发生着新的变化,与此同时也会涌现出许多新的风格和优秀的作品,作为网页设计的从业者,应当从中学习好的思想和创作灵感,应用到自己的设计中来。
我访问过许多网站,比如CSS Zen Garden或者其他什么的,并坚持每天浏览网页,我认为这是一篇高质量的文章,因为它涵盖了很多当代设计趋势。
即使如此,我也会简明扼要地切入要点。
网页桌面风格 ———-———-———-———-———-———-
正方:样子看起来很品牌
反方:成本太高(根据作者回复的解释,是指可能需要很多专业的设计师为此工作,需要用到某些软件,比如Photoshop,要反复设计达到完美,并且需要花大力气在细节上等等)
这是最精致的风格,尽可能的试图去接近图形桌面的感观和感觉。因此,这种风格看起来很漂亮,但需要花费很大工夫,并且通常耗尽流量。
简而言之,桌面风格以渐变、丰富的图形、阴影和其他桌面应用模拟为特征。
与众不同的网页桌面元素案例:

区块。通常,它是屏幕上一个拥有边框、头部、底部的区域,用来聚集逻辑上相关的元素:链接、文本、记分卡和文章预览。区块可以伴随有阴影。

迷你区块。区块中的区块:通常包含小图片和少量的文本。

按钮。这些网页设计元素伴随着渐变、有反差的边框、和可选择的阴影。按钮可以有镜面效果,有从下打光的倒影。通常当鼠标悬停时按钮有反应(当用户把鼠标移到按钮上时,做一些视觉效果)。

Tabs.它们也用渐变、有反差的边框、和可选择的阴影。当鼠标悬停时做出反应。
Silver Orange风格 ———-———-———-———-———-———-
正方:可用性,轻量级,简单
反方:时尚,追随者,成本稍微有点高
稍微简单一点儿的感观和感觉,在样式和轻量级创作之间有着很好的平衡。Silver Orange的网页设计风格相对于丰富的界面来说,更侧重于可用性。
它不强求用户铭记(与桌面风格不同),相反是为他提供更好的可用性体验。
正如你所料,silverorange.com正是Silver Orange设计风格的缔造者。
与众不同的Silver Orange风格元素案例:

顶部菜单。通常是暗底配亮颜色的文字;背景伴有彩色渐变和反差分隔。

Logo和指导线(面包屑)。指导线与顶部菜单背景相比,更多渐变,文字颜色用灰色。

渐变和文字分隔。更多渐变,轻微分隔。
苹果风格 ———-———-———-———-———-———-
正方:品牌,优质,奢华
反方:非常有特色,成本高
这个风格中的水晶tabs和按钮是整个设计的精髓。不是很实用,由于大量使用小型或微型字体,但依然很舒服,假设你不是经常与小字文本打交道。
成本高,需要做很多工作。与众不同,所以非常难做到和原版一样,使用苹果风格来设计网页,几乎不可能。
与众不同的苹果风格案例:

苹果菜单。苹果菜单是苹果网页设计风格的精髓。每个东西都有几乎一样漂亮的样式:水晶按钮,渐变,圆角区块等等。
微软风格 ———-———-———-———-———-———-
正方:实用,简单,成本低
反方:观点:你隶属于微软
让一个网站看上去像微软风格,最主要的一点就是用在左栏使用灰色的、有浮动菜单的导航面板。简单,干净并且方法普通。
是工程师为工程师创造的。
与众不同的微软风格案例:

微软菜单。微软网页设计风格中的主菜单是灰色的,实用并且简单。有边框,有”mouSEOver”事件,有浮动的子菜单等等。通常它都占据左栏位置。
微软网页设计风格的另一个与众不同之处,是头部从左到右逐渐加深的渐变,它一直延伸到右上角的搜索框。
所有区块都被清晰的灰线分隔。我想,这来自于可用性观点。人们可能对微软的商业模式有很宽泛的看法,但有一件事是无疑的:微软设计风格是简单、实用并且有着很好的可用性的。
与苹果风格相比,它不那么丰富或奢华。但它依然玩得转。
杂志风格 ———-———-———-———-———-———-
正方:吸引人,简单,精炼
反方:需要很多文本和照片,太依赖内容质量
杂志网页设计风格就是…没错,就是杂志的样子。它试图为你带来高质量的视觉创作,所以你会感激杂志设计者为此所完成的所有工作。
你可以通过混合有大量文章链接的照片和图片识别它。
与众不同的杂志风格案例:

杂志风格的目标读者是阅读杂志的人们。不是工程师,不是网页设计师,更不是有经验的网站用户。

这确实是个品牌的东西,由专业设计师创作,他们十分喜爱自己的工作。为了要做同样的事情,你有一个相关职业更好,同时也会拥有相当可观的报酬。
? 圆角朴素风格 ———-———-———-———-———-———-
正方:简单,轻巧,让内容成为重点
反方:有点单调,不新颖,无法给人留下深刻印象
设计成这样并不全是坏事。它的意图是让注意力更集中于内容。它产生的流量也非常小。
有代表性的站点有带圆角的顶部导航菜单,元素也故意设计的很简单。
与众不同的圆角朴素风格案例:

Web 2.0 设计风格 ———-———-———-———-———-———-
正方:现代,得到很好的公认,新潮
反方:可用性争论,定宽




Web 2.0 设计风格可被归纳于
定宽
主要(圆角)外形有阴影
大量渐变和体积
大字体
头部,用鲜亮的颜色突出
大量暗调文本
文本尺寸宽泛
圆角的外形和按钮
阴影,水晶效果,更多渐变
Adobe / Macromedia 风格 ———-———-———-———-———-———-
正方:干净,简单,平衡,品牌
反方:成本高,与众不同,可用性争论
这个风格很像苹果的:你看到它时,会认为很多地方都是效仿苹果。成本很高的设计,从图形效果方面来说非常强大,总体非常平衡。追溯到几年前,起初这是由Macromedia公司创造的,现在这种网页设计风格依然是最好之一。
与众不同的Macromedia网页设计风格元素案例:
复杂的阴影渐变菜单,带阴影的圆角区块,菜单下的圆角banner,定宽,居中。


这篇文章不是…
这篇文章不是视图给出网页设计风格趋势的完整描述;我仅仅是把一些事物(我个人喜欢的)放在一起并解释它们与众不同的特点。
其他一些网页设计风格(尤其是出自“艺术设计”分类的)没有被解释。决不是因为我觉得它们没价值或是不漂亮,而多半是因为可用性的原因。在日常生活中,你不可能把艺术品拆开了用。你不是假设。
从可用性到美感方面,我没有找到吸引人的地方的那些风格,也没有被突出。
近期更新
- [2023-07-26 14:17:28] 为品牌赋能,海外官网品牌数字化
- [2023-05-06 10:32:26] 青岛网站建设公司,品牌网站定制,一站式网站服务——力图数字科技
- [2023-04-27 13:47:54] 品牌定制网站建设——从满足预期到走向超预期
- [2023-04-11 09:17:49] H5页面设计开发——移动端传播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力图数字科技配套网站服务支持
- [2021-05-18 10:14:11] 青岛网站建设的流程
- [2021-04-29 10:14:38] 企业定制化官网建设项目
- [2021-03-05 10:34:45] 移动互联时代房地产行业的微信小程序解决方案
- [2021-01-22 17:29:38] 微信小程序有哪些优势?为什么要开发微信小程序?
- [2021-01-08 17:28:04] 网站建设最容易忽略的人性化设计
- [2020-12-16 16:55:32] 建设一个常规的公司网站建设成本大概是多少?
延伸阅读
- [2016-09-01 09:01:00] 营销型网站建设的营销策略
- [2012-05-27 01:28:35] 网页设计好做吗
- [2013-07-14 21:52:03] 网页设计中的图片运用与重要性
- [2009-03-11 16:18:00] 网页设计图标使用指南
- [2008-03-04 13:34:00] 肤浅网页设计
- [2008-07-02 11:53:00] 从网页设计到UI设计—重在设计理念的转变
- [2008-10-15 15:43:00] 探索网页设计中的黄金比例
- [2011-11-10 00:07:02] 谷歌搜索引擎算法升级 预计将影响35%的搜索结果
- [2011-11-10 12:03:09] 青岛网站设计之网页设计的细节处理
- [2012-08-21 23:19:29] dede后台文章添加页手动增加字段
- [2014-11-27 09:15:06] 网页设计中如何使用透明效果
- [2012-11-07 11:24:02] 网页设计元素的减法式优化
