稿A：

稿B：

Web2.0 式网页先睹为快

如果您没有足够的资源创建自己的2.0式的网站，TemplateMonster 刚发布的web2.0模版频道可以帮到你。当然，购买的模版不一定能完美的契合你的目标，但是为用户定制的设计也常常不能保证。

 简介

我将带你过一下目前优秀的网页设计特征，仔细分析最突出的特色，讲解每个点优秀的原因，并向你展示如何将他们使用在你自己的网站上。

如果让我用一个词来总结web2.0，那将是“简单”，那我们就从这开始说起。

我是简单的极力支持者，我认为它是网页设计未来的方向。目前简单、大胆、优雅的网页设计用少来传递更多：

   1. 通过引导用户视线只浏览少量但精心选择的视觉元素，使设计师能直接瞄准网站的目标
   2. 它们用更少的语言来表达更多信息，同时精心选择的图片设计去创造看的欲望
   3. 它们认为，我们能猜测用户期望从网站得到什么

一、简单

网页设计比起以前风格更简单，这是一件好事。

2.0风格设计代表着聚焦、干净和简单，但那并不代表着要极简主义，我们应该用少量但必需的元素去达到我们的目标； 有个原则是我一直坚持的：假如解决某个问题有两种方案，那么更简单的就是更好的。

这里有一些例子，注意他们把不必要的元素都剔除了，也许每个页面都可以有更多的元素，但是那样能使页面变得更强大吗？

结果你会感觉不由自主地去看主体内容，你发现自己与页面的元素互动正是设计师所希望的，而且你并不介意这种简单，同时又达到了你的目的。

为什么简单更好

·网站和每个页面都有目标

·用户的注意点是有限的资源

·帮助用户找到他们想要的（或让用户注意我们希望他们看的内容）是设计师的职责

·屏幕上的元素吸引眼球，元素越多，用户去关注的各种不同的事情就越多，同时他去关注重要内容的几率就下降了

·所以我们需要很确定的交流方式，也需要把信息噪音减少到最少，那代表着我们要找到一个尽可能少用元素的解决方案，那就是节约元素即简单

何时/如何让你的设计简单

1、何时 始终如此

2、如何做 有两个方面能让你成功做到简单

1）在不影响效果的情况下，去掉多余的元素

2）能达到同样效果的可行方案中，选择更简单的

看起来达到完美的结果，不是没有东西可再添加，而是没有任何东西可被去除的时候，每当你设计的时候，有意识的把去除多余的视觉元素作为准则。

不要把注意力特别集中在和页面目标相关性比较小的区域，因为用户视线在关注这些时会分散在主要内容和导航的注意力。利用视觉细节如线条、文字、形状和颜色去传达信息，而不仅仅是为了装饰。

这里有个设计的例子，由于不够简单而深受其害：

Yaxay 的界面用了很多像素，但是大多数都是修饰性的，一部分是页面的背景。相对少的像素被用来让用户找到或理解信息或被站点吸引。

想想这个页面看上去东西可真多啊，但是能使真正的导航、内容和交互特征清晰的元素实在太少了。

爱德华•托佛特用“数据墨水”（如可以传递信息的细节）和“非数据墨水”（如只是修饰的细节）来形容这一现象。

托佛特的衡量信息设计（图形，图表，演示等）有效性的一种标准是数据墨水和非数据墨水的使用比例，数据墨水使用的比例越高，设计的有效性可能就越高。

以Yaxay第二幅的细节图为例，它有太多被称为“繁忙”的元素，比如大量的边缘、色调、颜色变化、形状、线条……很多要看的元素，但是在这个细节真正有用的是：

   1. 网站的logo
   2. 导航按钮上的标签文字：art gallery

剩余的其他“繁忙”元素：背景上的形状、界面上的斜线、网格、渐变……所有这些噪音都是非数据墨水，因为它们都不能传达信息。

我并不反对网站设计的丰富、复杂或美感性

简单的意思：无论采用什么方式，只要是为了让信息传达更顺利的元素是越多越好，当然，通常你要传达的不是硬数据，而是软数据；

硬数据：指事实，如新闻、股票价格、列车时间或你银行账户的存款……

软数据：涉及信息传达的质量，如公司给人的第一印象，服务提供者是否亲切，一种产品是否适合你……这些都是同样重要的。

无论你要传达的是硬数据还是软数据，你都应该有意识并谨慎的使用元素数量。

以下图为例：

Alex Dukal的站点很丰富、有趣、吸引人，它用了一系列视觉技巧来引起你注意，让你感觉有趣，对Alex的工作给你一种温暖的感觉。但是它也是简单的，因为它谨慎而敏感的使用像素、墨水或繁忙元素，它并非是没必要的，而是节俭而丰富的。

无论怎么说，当你使用墨水、像素时要明智的选择，用它来传达首要的信息，同时，问问自己用少量的元素能否有效的传达信息，如果可以，就这样做。[未完待续……]

一句话，要不要标准规范？绝对要！站点大了嘛，内容多了嘛，涉及的方面和参与的人员广了嘛，不建立一套标准和规范怎么行？对这个有异议或不肯定的同行们可去读一读阿里、淘宝、雅虎等的ued博客，国内这些大的网站UI部门运作的相对成熟。

产品和UI的前期
以我所在单位房价网为例，UI框架标准规范的建立并不是一开始就花时间做这个东西，而是网站发展过程中逐步制定和完善起来的，早期，在产品策划上可能是个模糊未很成型的东西，这时候ui是与产品及公司高层的详尽沟通下，尽可能的了解他们的愿望及暂时可用的质料对产品进行定位，比如是做行业门户、新闻资讯、企业形象、社区、电子商务、功能服务等等，各种类型的网站在UI设计的思想上都不同，进而在后面细节上都有非常大的区别和取向。这个定位是个大方向上的，这点最好公司上下不要含糊。然后分析网站的受众和服务群体，美工在脑中初步对设计风格、色彩有个把握。有了这些酝酿和准备，再根据提供的产品原型设计出平面稿，待产品和高层审稿修改确认后制作demo，如果有UE人员，将对demo进行评审，确认后交由功能开发上线。

制定标准规范的时机
这个阶段是网站最初版本上线，设计开发告一段落，那这个时候是做标准规范的时机，因为早点时候所有东西都是新的未经受用户客户的考验，许多东西没法做成定标准和规范，而再往后就会进入东西多头绪乱甚至回头修改设计和代码以符合标准的状态。所以这个时候制定UI框架的标准和规范比较合适，可能这个标准的制定会耗很长的时间和资源，甚至某些组件没法制定标准，这都是值得并且有必要去做的，这是个最初UI的构想和规范，是要后面不断去完善的。磨刀不误砍柴功!

标准规范的内容
有了最初版本的上线，这时候就要花些时间好好把规范标准整理出来文档化了。
内容包括UI视觉设计和前端代码相关，制定标准规范的准则是整站UI统一性、可用及易用性、可扩展性、兼容性、重用性。
UI视觉设计具体有：logo、标准色、主色调及配色、排版布局、导航、按钮、表单、icon、布局模块、tab、列表
前端代码相关包括 css样式规范和html代码结构规范，具体有：
1．文字样式（链接、字符串、文本段落）
2．框架样式
3．模块样式（包括各类边距等细节、 写一个规范代码）
4．链接样式
5．图片样式
6．标签样式
7．表单样式
html代码结构规范的原则是：尽量少的代码量规范且规律的写法实现设计效果，标签使用上尽量保持页面元素其原本涵义（如该用h、p、table、hr等标签的地方用相应标签，不能用div用上瘾了），及照顾到seo的写法。

想想看有了这些标准规范，ui人员还时常痛苦吗？产品人员还迷惑吗？大家还要为些小细节争吵不休吗？

简要列一些房价网的标准规范内容：

布局logo 色彩 及文字等

模块样式

模块Tab

模块内容

按钮 列表

五：重要页面、关键页面、过程页面、结果页面

网站的页面类型和等级可做归类。
有些是“重要页面”，有些是“关键页面”，有些是“过程页面”，有些是“结果页面”。
这些根据页面存在的目的和作用分别。
“重要页面”和“关键页面”等级高于“过程页面”和“结果页面”

用户行为分析

这样分类是为了帮助产品设计和SEO工作。重要页面，如我们网站（现在就职单位www.fangjia.com） 首页、二手房频道页、租房频道页、小区纵览页及子栏目页，关键页面如短信定房源频道页，房源页面即使重要页面也是关键页面。过程页面是串联这些重要页面和关键页面之间的页面，如登录页面、注册页面、注册引导页面，结果页面是用户行为的结束页面，如注册成功、订阅成功、房源过期、及搜索结果不存在页面等。 过程页面目的是为引导用户完成某个或一系列动作而存在，它的作用是集中用户注意力去流畅的完成动作，所以这类页面设计要简单，不应存在分散用户做此动作的注意力，于之无关的东西一概不要放。 结果页面是用户某个行为的终点，也应简单，主要内容就是行为终点的提示和下一个动作的引导。所以重要页面里展现的信息不应该也往这些页面里塞，尽量保持页面本身面目。这些页面也不是SEO的重点。 重要页面产品设计和SEO照顾的重点。关键页面是实现模块或网站目的关键点，是产品设计要密切关注的页面。

四：做产品设计的方法，调研、学习、思考、创造

做产品设计的方法，我认为可以这样的步骤进行。（以下阐述只从产品原型设计及UI设计讲）
首先是调研，搞清楚要做个什么东西后，可对目前存在的同类产品做全面的深入的调查研究，了解产品的设计趋势，和目前流行的设计。这也是知己知彼得过程。不得不去做，不得不深入的全面的去做。
其次，分析好的成功的产品，总结他们的长处。学习借鉴他们好的地方。这里切记，不能复制别人的东西。
（此处省略若干图文，因为涉及所在公司内部工作资料）

 其三，思考。前面说到产品设计方法的 调研 和学习。思考就是对前面两个步骤的总结，加深对产品的理解。结合我们产品的环境，做些想像、推断。不细述。
其四，创造。就像武术一样，遍阅百家，学习、审查、批判、汲取，揉合众家之长，结合自身情况，产生一套自我功夫。创造不是封闭的，不是完全接纳的，是体现自我的，是前面那些步骤做到一定程度而自然产生的。

此部分内容实为工作方法之理论，是工作的基础，是重中之重。看似简单枯燥且空洞，其实这是个根本、是指导思想。其中每一条都可深深挖掘。归结起来就这么几条，由于涉及所在公司内部工作资料也省略若干说明内容。

三：产品产生的过程

1、市场调研需求分析。产品产生的前期阶段，完成想清楚要做个什么东西。
2、产品原型
   设计产品的逻辑。主要是分析产品的实质，明确产品的目的，设计产品的信息架构、功能、功能布设、用户行为流程、页面元素、交互细节等等。这个步骤实际是产品设计的关键，从产品逻辑的产生到最终用户使用效果的预见都要在脑中深思熟虑。为了实现目的，会构思多种实现方法，寻找一种最有效。需要很强的对信息架构、功能设计及布设、用户行为引导、用户体验、交互细节的整体权驾能力。需要在脑中像放电影一样从需求产生到最终用户行为结束从头到尾思考成熟。所以需要很强的综合能力。最终，就是用画图软件或word等把它画出来，如：
 

产品原型图

这个东西是直接交给UI设计师的，这个图画的细到什么程度，应该是经量细，至少里面要展现的信息元素
要展现完全。不应该让UI设计师去考虑应展现哪些信息数据。当然，也不必细到考虑布局尺寸，文案的字数，段落间距的程度。有些东西要留给设计师去发挥，太细了限制了UI设计。但文案初步内容，列表名称，导航名称，页面上要展现的数据，页面内容块的主次关系等应给出。 

最后原型是要拿来被修改的，这个是产品设计先独自完成的，肯定是要被修改的。千万不要对UI设计师说这个已经讨论定下来，就按这个做。这个先是被产品设计的上级leader，老板，前期市场调研相关人员等修改。当然，这个修改是产品设计对他们沟通解释，讨论后的修改，毕竟只是个草图，别人会想当然的提些意见。但这个修改必须是对产品设计理解了的修改，是通过解释让别人真正理解了，别人完全理解了产品实质的基础上给出的产品设计认同的修改。  后面还有程序开发人员和UI设计师的修改。 UI设计师的修改会比较多比较细节， 因UI设计师会从头到尾要理解此页面的逻辑，知道页面的目的，分清楚页面内容的主次关系，用户行为的流程，用户体验等。比如上图右边数据列表的展现方式，有很多种，哪种用户体验比较好，哪种在视觉上对页面整体比较协调等等，这时UI会给出比较细节专业的建议。但这个可以不必再画出来，可以在此草图上直接圈出来标明让UI看着办。

2. UI设计
  首先UI设计应该是从比较高的的角度着手，不单要求感性思维，更要求理性思维。这个不只是简单基础的给产品原型穿衣服的过程。应该从深刻理解产品原型基础上，形成视觉风格定位，赋予产品相应的气质、品味。所以UI设计师对产品整体感觉的把握很重要，不同程度的UI设计师对同样的产品原型做出来的设计差别很大。看看一些同类网站的UI设计就知道。好的逻辑和界面帮助用户快速的解决问题。差的逻辑和界面使得用户解决问题过程艰难、疑惑重重、信任感低。UI设计，在我们这种功能型网站，就是用户行为比较多，交互行为比较多的网站，应该追求的是 简洁、清爽、大气，而不应是华丽、眩目，这是个人机界面设计，这种类型的网页设计最基本的任务是体现产品原型的原始功能，然后才是视觉上亲和美观，高层次的是品味气质体现。对UI设计师要求上，因为是网络产品是网页设计，应具备CSS/html技术及对seo思想理解，设计上要考虑到前端开发，有的设计可能看起来不错但代码表现很困难或根本不合适。设计能力上，“对A比B重要”、“A区别于B”、“A包含B”、“A辅助说明B”等，对这些表现手段应该是多种方法成竹于胸。 整体的色彩、页面元素风格要统一。 总的来说，UI设计是件不容易的事情，是个细活，是个富挑战性的工作，好的UI设计加倍的体现产品原型，差得UI设计打击产品原型。完美的UI设计 让用户不用思考流畅地完成动作，并且得到视觉上享受，并受到产品精神的影响。

最后完成UI设计图稿，这个设计图还是会让产品设计及上层领导过目，这时候没必要让程序开发人员及市场前端调研人员等其他人员参与。当然这不是说不集思广益，不让大家都来提意见，产品设计审稿是看UI设计是否正确的体现产品设计的实质和逻辑，领导是有他的更高一层全局的想法，其他的可归到用户体验测试过程里，比如找几个用户测试看看，提提意见，市场相关人员及程序员也都可以来参加进来，但也是作为普通用户提提意见，不宜作为正式的审稿角色进入，因为他们会固有站在他们立场提意见，这样会伤害到UI设计，UI设计考虑到全局。他们针对他们角色的意见应在产品原型设计出来时的修改里。

3. 前端网页制作。 需要熟悉W3C标准，及理解创建符合标准的合理的代码结构的思想，熟练掌握html 及div + css布局，理解SEO思想。不细述。
4．把代码交给程序开发人员并配合他们开发。后面再由测试等 ，不细述。

二：流量、转化率、收益

我们所作的事情如果不是公益性质的，最终目的都应该是朝着市场方向，为了市场的目的，要产生经济效益。
引导用户最终唯一做的事情就是做我们想让他做的事情。
流量、转化率、收益；相对应的就是：  推广-产品设计、UI设计-销售

推广产生流量。 流量转化成订阅量依靠产品设计。首先是策划出方案，这个方案当然是一套逻辑流程，把这个逻辑流程画成产品的草图（也就是产品原型），再把它交给UI设计师来体现。这个环节的关键就是好的产品设计和好的UI设计。产品设计需要在脑中完成用户行为的流程图，而且这个流程是引导的、单向的，整体的想法是怎样的，在网站上不同的着陆点的怎么引导，各种不同的引导点的展现方式，是普通的文字链或者诱惑的按钮或者有趣flash等等。UI设计则需要在深刻理解产品的逻辑基础上准确地表达它。 这块产品完成之后就等待效果，也就是流量到目标动作量（根据网站性质和商业模式而各异，例如：下订单量，订阅量，下载量等等）的转化率，之后根据效果不断调整改进产品设计和UI设计。好的产品设计高效的完成目标任务，好的UI设计准确的甚至加倍体现产品设计的作用。这些工作里面有太多细节要去考究，追求完美的过程就是越做越精细做到极致的过程，追求那种在细节改进一点都能在效果上体现一点的程度。我们现在的方法是设计一个订阅器页面，在整个网站页面中布设许多引导点，在用户行为的关键点布设引导点，把这些流量行为都引导到目标关键页面，使之产生目标动作行为。

如果这块客户产品设计是成功的，剩下关键是市场和销售对客户的营销。

所以从头走到尾整个逻辑是这样一个流程，推广有它的一套逻辑（没有阐述），产品设计有它一套逻辑（包括客户服务产品，没有细述），销售有它一套逻辑（没有阐述），这些逻辑构成整体的逻辑。每个环节有它的关键，环环相扣，哪个环节掉链整体就不行了。每个环节有其目的，实现目的的方法都需要细细考究。所以搞清楚每个环节的目的、环节之间的关系和联系，如果整体出现问题，可以知道问题出在哪里。

网站的各个服务模块在网站建设发展过程中怎么分布组合，和现有的商业模式模块的联系关系，都需要谨密的考虑，要明确到细枝末页的细节程度，不能只是放上去，而要联通起来，构成网站系统逻辑的骨骼、脉络、神经。时刻做到我们来看网站时，对整个网站及页面的理解会深入，我们知道这个页面为什么存在，知道页面某个内容块，么个链接、按钮甚至图标为什么存在，目的是什么，起什么作用，对分逻辑起什么作用，对网站总体起什么作用。当我们做变动，我们不会疑惑犹豫，什么东西该放，什么东西存在根本就没意义。简言之，好似对网站进行解剖了，我们对网站了如指掌，所有尽收眼底。

    当你计划搜索引擎优化策略是 meta标签是非常重要的。尽管如此，一般的加入meta 并不能帮助你在搜索引擎中获得更好的排名。有好几种meta标签，但重要的有以下几个:description标签, keywords标签, title标签(严格来说title不算是一个标签)。当你不时刷新标签时这几个标签显得特别的重要。如果你希望搜索引擎对你的网站进行索引时就会用到 html标签的重定向(redirect)标签与robots标签.
　　注意:调查表只有20%的网页用到“关键字”与“描述”标签(即keyword, description)
　　多个关键字用逗号分开。

　　title 标签

　　title 标签可能是你网页中最重要的标签，它是你网页中最先看到的部分。把它放在description 与 keyword前。在这个标签中最好是加上你网站的关键字，title标签在搜索引擎的搜索中占有非常重要的地位。最好是把它放在其他meta标签前，这更有利于你网站的排名。(注意:有些搜索引擎会按title标签的字母的优先权进行排名，尽量在你的title中使用开始的字母)title标签是人们在搜索引擎中第一个看到有关你网站的描述，所以尽量把它弄得简单、明了。让人一看就知道你的网站是关于什么的。

　　Description标签

　　Description标签就在title后面，该标签可以是一小段(一个或者两个句子)。用于描述你网站。与title标签一样，这也是人们在搜索引擎列表中链接到你网站的点击。这些描述将鼓动人们去浏览你的网站而不是你竞争对手的。(描述不能太夸张。不然，当访问者到你网站发现内容根本不是你说的那个样子，那么他很快就会退出去。)很多搜索引擎允许描述的字数在150个左右，所以你要保证你的描述在150以下，否则搜索引擎会自动把多余的部分剪去从而造成你网站的描述的不完整。搜索引擎认为描述里的关键字远比网页中的内容要重要(好像现在这种情况不是那么明显了)。真如上所述，这里提供了非常重要的信息:确定你的描述能正确的反映你网站的主题，尽量在描述中加入你主要的关键字，越靠meta的关键字意义越大。这样会突显你的关键字。

　　现在大多的搜索引擎(google除外)都会支持descriptin标签。如果你不使用的话你将会失去排名靠前的可能。

　　keyword 标签

　　相比于description与title标签，keyword标签显得并不是那么重要了。有些搜索引擎把它完全地忽略，但是使用下正确的keyword标签对提高排名仍然有效。

　　除了搜索引擎外，一般情况下人们是看不到的。keyword标签是一个隐藏的标签，向搜索引擎提供了一组与你的页面有关的的关键字或关键短语列表。你可以用相应的工具找出一系列适用于你网站的关键字。(注意:关键字标签中只能包括与你本页内容相关的关键字列表。所有在这里的关键字必须与页面的内容相联系。)
　　提示:在你每一个页面中组织相关的关键字，每个页面必须专注于不同的产品或者内容。在标签中列满关键字对于提高你网站的排名并没有好处。多个关键字间用逗号用隔，逗号表示是逻辑“或”的意思。空格表示逻辑“与”。这是正式在keyword标签中描述关键字必须的。尽管如此，很多搜索引擎也会把关键字间以空格分开以达到能搜索出更相关的结果的目的。这样做的意义是，搜索引擎会把空格分开的关键字根据一定的方式自由组合。可以尝试用两种方法，看哪一种更加适合你。

　　关键字不宜以同一形式重复3-6次，一般这已经认为是最大的关键字重复数(好像现在又发生了变化)。所以，尽量避免把你的关键字一次又一次地不断重复。这对于每一个搜索引擎来说是SPAM(关键字垃圾)，你会因此而受到惩罚。大多数的搜索引擎会允许你在 keyword标签中使用最多1000个字符。通常，对每一个页面使用相关连的关键字会提高你网站的排名。一个很重要的因素是你关键字冗余度，如果你一个关键字是一个字符，而你的keyword标签中有100个字符，那么你关键字的冗余度就为1%。搜索引擎将会利用相关的算法对你的关键字冗余度进行统计你网页中的每一个重要的词或短语。去除多余的关键字有利于提高你网站的排名。

一：目的、方针、方法

我们做一件事情有个目的。或者我们为什么要去做一件事情。这是我们做一件事情之前不得不解决的问题。
创办一个公司有个目的，创办者不得不解决的问题。
创造一个网站有个目的，创造者不得不解决的问题。

只有清楚的解决了这个问题，才能制订出比较准确的目标，才能在总体上对所作的事情有一个大的逻辑。因此根据这个逻辑制定一套执行方针。根据方针策划出实现方法。
在大逻辑下，执行正确的方针和方法，进而达到我们的目的。

这里有个大的方针问题，就是互联网公司创建过程中，网站建设和公司盈利的关系。回答这个问题需要解决三个问题，就是公司创建和发展的规律，互联网络公司创建和发展的规律，中国互联网络公司创建和发展的规律。
对于网络公司，这些问题涉及到互联网与人们生活的关系，互联网行业发展与社会发展的关系。领导者解决当前的方针问题不得不考虑到这些因素，虽然不可能对后面所有东西都预见到，都是在摸索中发展，但职责是解决这些问题基础上制定相对正确的方针。

创造网站的实体是我们所作事情的大逻辑下的一部分和主要部分。那么策划这个网站有它的一套分逻辑，即产品设计或网站设计、网站策划。

这个逻辑就是组织信息和布设功能的方法，它的目的即是引导用户做我们想让其做的事情，比如，使用功能、获取信息、发布信息、传播信息等。它是贯穿我们整个网站系统的，而且体现在每个细胞单元的，从整体的逻辑到分布下来某个模块的逻辑，到某张页面的逻辑，再到页面中某个内容块、某个元素的逻辑。这些都归于系统总体大逻辑下，有它自己的逻辑，服从它上一层的逻辑，构成统一逻辑下的枝枝叶叶。 这样一个严谨明确的统一逻辑下，每一点都有它自己的职责任和作用，这些作用汇总都为实现一个统一的目的，别无他用。 这就像一个有机生命体，我们对他进行解剖，他分成很多部位，部位的组织结构，部位之间的关系和关联，连接部位的骨骼，联通部位的血脉，驱动生命的心脏，吸收排泄，能量转化，神经调节，等等这些构成机体的循环运转。当我们把这些搞清楚了，再来看这个生命体，我们的理解会真正深刻。看着他健康，知道他为什么健康，生病了知道病在哪里，别人强大，知道我们弱在哪里。所谓知己知彼，就是知道自己和对方内在。所有一切尽收眼底。