最近在构思一个新思路的站点，无意中搜索到了这篇好文。 思路清晰自然，配图张张经典，同时可以向学习一下标准的建站流程。 开发过程中的几个角色：程序员，网页设计师，美工设计师，网站策划师和客户； 下面图片中用 designer来统一描述网页设计师，美工设计师，网站策划师 programmer 程序员 client 客户 步骤1：项目讨论 在接到项目后首先需要开项目开发讨论会，讨论网站的栏目，开发方向，文字内容和图片等等。 步骤2：激发灵感 网站策划师考虑网站结构，根据客户需求整理材料，组织文字；美工设计师则要认识客户中心思想要体现的内容，按客户需求展开创意的灵感。 步骤3：框架导航 程序员和设计师具体讨论网站整体制作 步骤4：项目计划 整个项目组确定项目大概工作量和所需的时间，写成项目计划书给客户看。这项工作通常由项目经理来做，俗称“老大”。 步骤5：设计初稿 美工设计师作最基本的设计工作，主页和主要分页。设计师作最基本的设计工作，主页和主要分页。 步骤6：客户反馈 客户对设计初稿提出建议。 步骤7：重新设计 跟据客户对设计初稿建议和项目需求，进行修改设计或重新设计。 步骤8：客户满意 经过：设计初稿-客户反馈-重新设计的过程，最后得到了客户的满意。 步骤9：其它页设计 最基本的设计同意, 您就能开始制作站点每个页的布局和设计。 步骤10：客户确认 再一次让客户反馈，得到最后确认。 步骤11：制作HTML 网页设计师将美工设计师制作出的页面，作成HTML页。并由美工设计师确定与设计稿无误。 步骤12：…和CSS 对网站进行良好的规划，完成CSS和其它工作。 步骤13：交给客户 由程序员完成后台程序，然后再返回网页设计师确认完成后页面，最后交给客户反馈，直到站点完成。 步骤14：测试 项目最后阶段是测试。站点需要进行跨平台测试，解决所技术问题和错误。 步骤15：发布 最后收款，完成项目。 …….

我们经常被问到这样的问题，尤其是网页设计和开发人员，用户最常使用的分辨率/操作系统/浏览器是什么。为了确认，我们开始从访问SmashingApps.com的用户中捕获数据。下面是我们的统计数据。 屏幕分辨率 我们发现上面的图片中，最常用的分辨率是1280×1024，而1024×768排在第二，1280×800排第三。 浏览器统计数据 我们发现用户最常用的浏览器是Firefox，而微软的IE则排在第二，Safari排在第三。 操作系统 很明显，排第一的是微软，其次是苹果麦金塔，然后是linux。 浏览器和操作系统混合数据 我们发现最常见的搭配是微软的平台，Firefox浏览器，而微软和IE只是位居第二。 总结 通过分析上面的数据，网页开发和设计人员应该能找到目前的流行趋势了。这样就能保证你们的网站提供最佳的用户体验

事实是这样吗？你不妨先回答我下面这两个问题： ① Web2.0 作为一个新生的“概念”，是否不需要一个清晰的“视觉表现”？② 你认为自己已经找到体现 Web2.0 概念足够清晰的“视觉表现方式”了吗？ 如果你的回答都是“是”，那么我强烈建议你不要再往下看这篇文章，它完全在浪费你的时间。 如果你心存疑虑犹豫不决，而你又想更详细的了解关于“WEb2.0视觉风格”的内容，就请抱着一同探究的心态，和我一起来完成这个“进化过程”吧。 Web2.0 需要“视觉识别”，吗？Web2.0 Need "VI", Is it? 如果我们把“Web2.0”看作“形象识别”的一个主体（因为它有着区别于以往Web概念的需求），那么我们就很容易看清它应该有的体系结构：作为“理念识别 (Mind Identity)”的“Web2.0概念”现在应该不会有人再怀疑，否则你也不会来看我这篇文章。因此我们可以说，作为“理念识别”的这个部分，已经基本完成。那么在在“理念识别”指导下的“行为识别(Behavior Identity)”和“视觉识别 (Visual Identity)”就应该逐步的完善和清晰起来。 可喜的是，对于“Web2.0的行为特征”我们现在也已经有了很明确的概念，它的交互性，参与性，资料的产生和分配的动作方式，可移动性等等都将“Web2.0”的“行为识别”进行得如此生动鲜活，你很快就可以判定：“噢，这个网站是以web2.0的方式在玩！” 可惜的是，对于“视觉识别”的范畴，我们拥有了这样一套清晰完整的，可以传达理念，表现特性的“视觉组件”了吗？没有！因此，作为有职业敏感和操守的设计师的你，为什么不和我一起来共同把我们需要做的工作完成呢？你还在等着一本装订成册，封面用荧光色印着“Web2.0 视觉手册”的书送到你的手里吗？Come On, You OUT! 图注：网上的兄弟们自己“颁发”的“Web2.0设计师证”，你也可以给自己来一个。 我真的希望看到这里的你觉得我上面的解释是一大堆废话！因为这说明你真的知道作为一个设计师自己应该去做些什么，想些什么。 视觉的进化与沿革Evolution of Visual Elements 谈到视觉元素的沿革，很多人兴趣就高涨起来了——你看看论坛上的那些个帖子，点击量最高的，回复最多的不就是“最新XXX效果，附教程”之类的吗。一些人又说了：我们这不是一直追赶潮流吗？是啊，弄潮和追潮只有一字之差而已。 好吧，就从论坛的热点帖子说起：之前有个帖子是关于Web2.0的Logo的，这个话题真是热得烫手。可惜的是，我在查找证据之后发现，许多所谓的“大公司的新Web2.0风格Logo”其实是某些“好事者”所为。呵呵，不必失望，这些行为颇有点Web2.0的风格，况且，其中的有据可查的确实被采用的Logo，有一小部分，也可以从这些版本中找到——你现在可以把你喜欢的样式直接推荐给产品影响全球数以万亿计客户量的大公司，影响它们，改变它们！你不觉得Web2.0的可爱吗？ 换个角度来讲，很多公司在“Web1.0时代”没有改变它们的Logo，现在到了“Web2.0时代”为什么就都迫不及待的要改变Logo的设计呢？这除了说明Web2.0是“真正意义上的网络”以外，难道你还觉察不出“Web2.0的视觉设计”的重要吗？ 图注：上面这些Logo，下排都是未被证实的“自作多情”作品。和“现任”Logo的比对。 图注：还是来看看真正的Web2.0的色彩和符号在怎么玩吧！大公司老是跑在前面，一点不错，后续的文章还会详细介绍关于“可口可乐”的进化例子。 我想说的是，你应该从这些真真假假的Logo中看出来，哪些才是真的符合Web2.0的标准而不被表象的那些所谓的渐变应该怎么拉，高光应该怎么做，影子的参数是多少所迷惑。觉得有些难度是吧？我们的这几篇文章不是为了Web2.0而说Web2.0，只是想从“视觉进化”的规则中告诉你怎么来鉴别和找出“真正的Web2.0风格”！ 进化的概念What’s the meaning of "Evolution"? 很清楚，所谓“进化”，就是在原有“物种”的基础上向前进步。在英语中的“Evolution”也可以翻译成“演变”，但是我宁可用“进化”这个比较积极的词汇。 对于视觉元素的进化，由来久矣。谈到这里，我不得不提到一个人，因为我在分析新Web2.0的Logo走向（趋势）时，好多的Logo源头都指向了他，上面那个图里面4个原有的logo，3个都是他设计的。他的名字是：保罗·兰德（Paul Rand　1914-1996） 图注：兰德为IBM做的海报，视觉音译了I.B.M (Eye, Bee, M) 你可能会奇怪，他怎么会出现在苹果的“想法与众不同”(Think Different)海报里，这里我引用一段介绍，详细的，你可以区下面的链接找寻。 保罗.兰德（Paul Rand，1914-1996）兰德作为当今美国乃至世界上最杰出的图形设计师、思想家及设计教育家之一，其先导地位和作用是勿庸争辩的。兰德1929-1932年就学于纽约Parsons设计学院。年仅23岁便成为Esquire [...]

导语 在设计论坛之前的讨论中曾经谈到过“设计师应该抓住这个时代的情感”，这是设计师的设计嗅觉和职业特性的体现，那么在纷纷扰扰中“裂变”的Web2.0向我们袭来之时，作为设计师的你，抓住了Web2.0的趋势与风格了吗？现在我们从设计演变的角度，通过分析和鉴别，来让我们的设计师们快速的进行“向 Web2.0风格的进化”过程！ 引论 在设计论坛之前的讨论中曾经谈到过“设计师应该抓住这个时代的情感”，这是设计师的设计嗅觉和职业特性的体现，那么在纷纷扰扰中“裂变”的Web2.0向我们袭来之时，作为设计师的你，抓住了Web2.0的趋势与风格了吗？现在我们从设计演变的角度，通过分析和鉴别，来让我们的设计师们快速的进行“向 Web2.0风格的进化”过程！ 什么是“风格”What is the "Style"? 什么是“风格”? 汉语词典中说它是：一个时代、一个民族、一个流派或一个人的文艺作品所表现的主要的思想特点和艺术特点。简而言之，它应该包含 ①时代特色 ②思想特色 ③表现特色。在英文中，“风格”的对应词是“Style”(发音：时’代要)，然而，“In Style”的意思译成中文是“有品味”。那么我们是不是把上面那句话也可以理解成为“一个有品味的设计师应该抓住今天的风格”呢？是了，如果作为一个设计师，连当下的风格都把握不住，又如何去创造或者引领未来的风格？ 风格的视觉组成元素 既然我们是讨论 视觉风格，就应当了解一种特别的视觉风格到底是由哪些部分构成——我努力的想去找到一些前辈大师的言论来当外套，让我的论点显得更“优雅华丽”一些，但是很可惜的没有如愿。我只好把我的见解就这样“赤裸裸”的展现出来。我仔细的回味了传统美术和设计史中对各阶段风格的描述，认为能反映一个“成熟的风格”的特征元素应该是以下四个方面： ① 色彩倾向：如同我在之前的一篇文章《关于时间和色彩的游戏》里面谈到的那样，色彩的规划在现代设计中的地位已经跃升到最高的地位。这一点我想各位都不会怀疑，即便是时隔久远，你也不会将“印象派风格”的色彩和“巴洛克风格”的色彩相混淆；或者说得简单点，你绝不会听到“可乐”想到绿色，而听到“雪碧”想到红色，这就是因为它们有不同的“色彩风格”。 图注：印象派的色彩追求感性，笔调欢快。巴洛克属华丽的古典风格，色彩理性，忠实而严谨。其实你也可以把印象派理解成为大光圈高快门速度的高饱和度照片，而巴洛克是追求精致的小光圈慢快门写实照片。 在后续的文章里，我们会一起来看看这些关于Web2.0视觉风格的特征元素，因为色彩一节比较特殊而重要，我决定将它放在最后来讲，因为我怕可能会越讲越长，让整个文章的结构打乱掉。（其实我准备给蓝色的说辞是：希望先发些相关的内容，看看点击量和关注程度来决定后续的内容。唉，蓝色是我遇到的最没有机心的人，是机心不是心机，没错。） 写到这里我觉得我似乎在血液里也开始涌动着Web2.0的泡泡，它影响我的行文风格发生了些许小小的变化，不是吗？这就是潜移默化的进化过程。 ② 结构布局：这个在传统美术中叫做构图，书法叫章法，国画叫布局，现代设计中叫构成，排版上称版式设定……说这么多，无非是想告诉你：你了解其中的任何一个词汇，你就明白我想表达什么了。举例来讲，即便你没练过书法，你也不会把颜体和欧体相混淆，因为颜体的丰腴宽厚的结构特征和欧体的险峻严整会让你过目不忘，这是结构上的风格区分。 书法太难理解？OK，想一下中世纪欧洲宫廷的梳妆台和你在“宜家”(IKEA)买回来的电脑桌有什么不同就好了。 图注：我老是在怀疑用书法作比喻会不会产生岐义，因为书法的结构和用笔（也就是表现方法）是捆绑在一起的，你不可能用左边颜体的笔画去写右边欧体的间架。但是设计中却是可以用不同的表现方法套用在同一个结构上的，希望没有给大家带来困惑。 乔纳山(Jonathan)的“Web2.0的视觉设计”(The visual design of Web 2.0)中认为Web2.0的布局排版部分占的比重不是太大，但是我觉得他指的是布局的难度系数而不是布局的展现方式。就像下围棋，Web2.0可能就是一盘布局简单的棋，但是你不能说布局简单厮杀就不精彩，就没有胜负可言，那就错了。 ③ 造型方法：作为一个艺术家，掌握多种艺术方法和找到合适的造型方法来完成自己的作品，恐怕是一生的追求。就像 毕加索(Pablo Picasso) 对着一头公牛 (Le Taureau)画七八遍一样，很多勤奋的人都在这么干。设计师也面对同样的问题，同样的题材可以有好多种表现的方法，你能想到有多少种，在于你的创造力；你能否找到合适表现你的题材的那种，在于你的判断和鉴赏力。想要成为一个优秀的设计师，就必须锻炼这两种力。现在你应该了解什么是一个“Powerful Design”了。 图注：公牛，我只采用了首尾和中间的4个，其实毕加索画了11个同样的这个牛，目的是探索抽象的方法，摆在一起就显示出从写实到抽象的进化过程。右边的苹果Logo，也是显示出不同时期的进化过程，最右下角那个你也许觉得陌生，那就是传说中的Web2.0的苹果Logo。 Web2.0应该从现有的造型方法中选择一个什么样的方式，或者派生，或者改良出一个怎样的造型方式来与众不同呢？我们的后续文章会慢慢告诉你。 ④ 笔调特色：笔调这个词很好，很传神，它既可以用来对比不同的艺术家的作品，也可以用来对比某个艺术家自己的不同作品。比如，我们可以说 梵高(Vincent van Gogh) 的“ 星夜(Starry Night) ”和“ 向日葵(Sunflowers) ”笔调完全不同，这里的“笔调”，不光是指“笔触”，还指画面所带给我们的可以感知的画作者创作时的一种心态。同样的内容，笔调不同就产生不同的情态。 [...]