<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
<title><![CDATA[叁石博客]]></title>
<link>http://www.30design.com/30designblog/</link>
<description><![CDATA[记录我们成长的点点滴滴]]></description>
<language>zh-cn</language>
<copyright><![CDATA[Copyright 2005 PBlog3 v2.8]]></copyright>
<webMaster><![CDATA[30design@163.com(【三石】)]]></webMaster>
<generator>PBlog2 v2.4</generator> 
<image>
	<title>叁石博客</title>
	<url>http://www.30design.com/30designblog/images/logos.gif</url>
	<link>http://www.30design.com/30designblog/</link>
	<description>叁石博客</description>
</image>

			<item>
			<link>http://www.30design.com/30designblog/article.asp?id=271</link>
			<title><![CDATA[DIV+CSS解决IE6，IE7，IE8，FF兼容问题]]></title>
			<author>30design@163.com(【三石】)</author>
			<category><![CDATA[WEB标准]]></category>
			<pubDate>Sun,27 Jun 2010 20:31:25 +0800</pubDate>
			<guid>http://www.30design.com/30designblog/default.asp?id=271</guid>
		<description><![CDATA[<p><strong>1.ie8下兼容问题，这个最好处理，转化成ie7兼容就可以。</strong>在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了<br />
&lt;meta http-equiv=&quot;x-ua-compatible&quot; content=&quot;ie=7&quot; /&gt;</p>
<p><strong>2.flaot浮动造成IE6下面双倍边距问题</strong>，这个最常见，也最好处理，!important解决，比如<br />
margin-left:10px !important;;<br />
margin-left:5px;<br />
+height:120px;</p>
<p>5.有时候，会在布局的时候，发现，有一个DIV浮动了，接下来的一个DIV本来是要在下面显示的，结果跑上面去了，这种情况一般在FF下面会出现，解决的办法就是清除一下浮动，在设置过浮动的那个DIV下面加一个DIV，CSS面写个clear:both;如下&lt;div style=&quot;float:left;height:100px; width:500px;&quot;&gt;<br />
<strong>&lt;div style=&quot;clear:both;&quot;&gt;</strong><br />
&lt;div style=&quot;height:100px; width=300px&quot;&gt;</p>
<p>6. 再就是<strong>居中问题</strong>，这个问题在新手身上很多，主要原因是对盒子模型不够理解，没熟记盒子模型，如果发现你的页面没有局中，我现在知道的，有这几个原因：1. 一个是没盒子，就是BODY后的一个大DIV把所有DIV装起来的那个，你没写。2.就是你写了，但是宽度没用绝对宽度：而是用一个相对的宽度，想局中，必须用绝对宽度。-</p>
<p>7.扩展：如果我想在设计的时候，实现IE6，IE7,FF下出现三种不同的效果，比如IE6下背景红色，IE7下蓝色FF下绿色，这里，我自己试过，可以，<strong>用兼容的方法（注意顺序</strong>，可以好好理解一下）。7 L&amp; t- o7 k- a1 I<br />
<strong>background:red;<br />
+background:blue !important;<br />
+background:green;</strong></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p sizset="60" sizcache="4">DIV CSS设计时IE6、IE7、FF 与兼容性有关的特性2008-03-28 14:21在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网，就应该更注意IE6 IE7 FF对CSS样式的兼容，不然，你的网乱可能出去不想出现的效果！<br />
所有浏览器 通用 height: 100px; <br />
IE6 专用 _height: 100px; <br />
IE6 专用 *height: 100px;<br />
IE7 专用 *+height: 100px;<br />
IE7、FF 共用 height: 100px !important;<br />
一、CSS 兼容 <br />
以下两种方法几乎能解决现今所有兼容. <br />
1, !important (不是很推荐，用下面的一种感觉最安全) <br />
随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.) <br />
代码: <br />
&lt;style&gt; <br />
#wrapper { <br />
width: 100px!important; /* IE7+FF */ <br />
width: 80px; /* IE6 */ <br />
} <br />
&lt;/style&gt; <br />
2, IE6/IE77对FireFox &lt;from 针对firefox ie6 ie7的css样式&gt; <br />
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签. <br />
代码: <br />
&lt;style&gt; <br />
#wrapper { width: 120px; } /* FireFox */ <br />
*html #wrapper { width: 80px;} /* ie6 fixed */ <br />
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */ <br />
&lt;/style&gt; <br />
注意: <br />
*+html 对IE7的兼容 必须保证HTML顶部有如下声明： <br />
代码: <br />
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;　&quot;<a href="http://www.w3.org/TR/html4/loose.dtd" target="_blank"><font color="#556c88">http://www.w3.org/TR/html4/loose.dtd</font></a>&quot;&gt; <br />
二、万能 float 闭合(非常重要!) 可以用这个解决多个div对齐时的间距不对，<br />
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup] <br />
将以下代码加入Global CSS 中,给需要闭合的div加上 class=&rdquo;clearfix&rdquo; 即可,屡试不爽. <br />
代码: <br />
&lt;style&gt; <br />
/* Clear Fix */ <br />
.clearfix:after { <br />
content:&quot;.&quot;; <br />
display:block; <br />
height:0; <br />
clear:both; <br />
visibility:hidden; <br />
} <br />
.clearfix { <br />
display:inline-block; <br />
} <br />
/* Hide from IE Mac \*/ <br />
.clearfix {display:block;} <br />
/* End hide from IE Mac */ <br />
/* end of clearfix */ <br />
&lt;/style&gt;</p>
<p>三、其他兼容技巧(相当有用) <br />
1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) <br />
2, 居中问题. <br />
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vetical-align: middle.( 注意内容不要换行.) <br />
2).水平居中. margin: 0 auto;(当然不是万能) <br />
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签) <br />
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题. <br />
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表) <br />
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应. <br />
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.贴上代码: <br />
兼容代码:兼容最推荐的模式。 <br />
/* FF */ <br />
.submitbutton { <br />
float:left; <br />
width: 40px; <br />
height: 57px; <br />
margin-top: 24px; <br />
margin-right: 12px; <br />
} <br />
/* IE6 */ <br />
*html .submitbutton { <br />
margin-top: 21px; <br />
} <br />
/* IE7 */ <br />
*+html .submitbutton { <br />
margin-top: 21px; <br />
} <br />
什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写CSS的时候会很恼火，刚修复了这 个浏览器的问题，结果另外一个浏览器却出了新问题。而兼容就是一种办法，能让你在一个CSS里面独立的写支持不同浏览器的样式。这下就和谐了。呵呵！ <br />
最近微软发布的IE7浏览器的兼容性确实给一些网页制作人员添加了一个沉重的负担，虽然IE7已经走向标准化，但还是有许多和FF不同的地方，所以需要用 到IE7的兼容，有许多朋友问过IE7的兼容是什么，其实我也不知道。暂时还没找到IE7专用的兼容。除了前面那片文章，《针对firefox ie6 ie7的css样式》中的兼容方式也是很好用的。 <br />
有一点逻辑思想的人都会知道可以用IE和FF的兼容结合起来使用，下面介绍三个兼容，例如：（适合新手，呵呵，高手就在这里路过吧。） <br />
程序代码 <br />
第一个兼容，IE FF 所有浏览器 公用（其实也不算是兼容） <br />
height:100px; <br />
第二个兼容 IE6专用 <br />
_height:100px; <br />
第三个兼容 IE6 IE7公用 <br />
*height:100px; <br />
介绍完了这三个兼容了，下面我们再来看看如何在一个样式里分别给一个属性定义IE6 IE7 FF专用的兼容，看下面的代码，顺序不能错哦： <br />
程序代码 <br />
height:100px; <br />
*height:120px; <br />
_height:150px; <br />
下面我简单解释一下各浏览器怎样理解这三个属性： <br />
在FF下，第2、3个属性FF不认识，所以它读的是 height:100px; <br />
在IE7下，第三个属性IE7不认识，所以它读第1、2个属性，又因为第二个属性覆盖了第一个属性，所以IE7最终读出的是第2个属性 *height:120px; <br />
在IE6下，三个属性IE6都认识，所以三个属性都可以读取，又因为第三个属性覆盖掉前2个属性，所以IE6最终读取的是第三个属性。 <br />
1 针对firefox ie6 ie7的css样式 <br />
现在大部分都是用!important来兼容，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面 没按要求显示！找到一个针对IE7不错的兼容方式就是使用&ldquo;*+html&rdquo;，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样： <br />
#1 { color: #333; } /* Moz */ <br />
* html #1 { color: #666; } /* IE6 */ <br />
*+html #1 { color: #999; } /* IE*/</p>
<p>那么在firefox下字体颜色显示为#333IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。 <br />
2 css布局中的居中问题 <br />
主要的样式定义如下： <br />
body {TEXT-ALIGN: center;} <br />
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } <br />
说明： <br />
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。 <br />
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上&ldquo;MARGIN-RIGHT: auto;MARGIN-LEFT: auto; &rdquo; <br />
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。 <br />
3 盒模型不同解释. <br />
#box{ <br />
width:600px; <br />
//for ie6.0- w\idth:500px; <br />
//for ff+ie6.0 <br />
} <br />
#box{ <br />
width:600px!important <br />
//for ff <br />
width:600px; <br />
//for ff+ie6.0 <br />
width /**/:500px; <br />
//for ie6.0- <br />
} <br />
4 浮动ie产生的双倍距离 <br />
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} <br />
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,&hellip;不可控制(内嵌元素); <br />
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果</p>
<p>iplay:table;</p>
<p>5 IE与宽度和高度的问题 <br />
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里 这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重 要的。要解决这个问题，可以这样：</p>
<p>#box{ width: 80px; height: 35px;}html&gt;body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}</p>
<p>6 页面的最小宽度 <br />
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个&lt;div&gt; 放到 &lt;body&gt; 标签下，然后为div指定一个类： <br />
然后CSS这样设计：<br />
#container{ <br />
min-width: 600px; <br />
width:e-xpression(document.body.clientWidth &lt; 600? &ldquo;600px&rdquo;: &ldquo;auto&rdquo; ); <br />
} <br />
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。</p>
<p>7 清除浮动 <br />
.兼容box{ <br />
display:table; <br />
//将对象作为块元素级的表格显示 <br />
} <br />
或者 <br />
.兼容box{ <br />
clear:both; <br />
} <br />
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的 <br />
&hellip;&hellip;#box:after{ <br />
content: &ldquo;.&rdquo;; <br />
display: block; <br />
height: 0; <br />
clear: both; <br />
visibility: hidden; <br />
} <br />
8 DIV浮动IE文本产生3象素的bug <br />
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. <br />
#box{ <br />
float:left; <br />
width:800px;} <br />
#left{ <br />
float:left; <br />
width:50%;} <br />
#right{ <br />
width:50%; <br />
} <br />
*html #left{ <br />
margin-right:-3px; <br />
//这句是关键 <br />
} <br />
HTML代码 <br />
&lt;DIV id=box&gt; <br />
&lt;DIV id=left&gt;&lt;/DIV&gt; <br />
&lt;DIV id=right&gt;&lt;/DIV&gt; <br />
&lt;/DIV&gt;</p>
<p>9 属性选择器(这个不能算是兼容,是隐藏css的一个bug) <br />
p[id]{}div[id]{} <br />
p[id]{}div[id]{}</p>
<p>这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用 <br />
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的. <br />
10 IE捉迷藏的问题 <br />
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。 <br />
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 <br />
解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。 <br />
11 高度不适应 <br />
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用 <br />
margin 或paddign 时。例： <br />
&lt;div id=&rdquo;box&rdquo;&gt; <br />
&lt;p&gt;p对象中的内容&lt;/p&gt; <br />
&lt;/div&gt; <br />
CSS： <br />
#box {background-color:#eee; } <br />
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } <br />
解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。 <br />
屏蔽IE浏览器（也就是IE下不显示） <br />
*:lang(zh) select {font:12px !important;} /*FF,OP可见*/ <br />
select:empty {font:12px !important;} /*safari可见*/ <br />
这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。 <br />
仅IE7识别 <br />
*+html {&hellip;} <br />
当面临需要只针对IE7做样式的时候就可以采用这个兼容。 <br />
IE6及IE6以下识别 <br />
* html {&hellip;} <br />
这个地方要特别注意很多地主都写了是IE6的兼容其实IE5.x同样可以识别这个兼容。其它浏览器不识别。 <br />
html/**/ &gt;body select {&hellip;&hellip;} <br />
这句与上一句的作用相同。 <br />
仅IE6不识别 <br />
select { display /*IE6不识别*/:none;} <br />
这里主要是通过CSS注释分开一个属性与值，流释在冒号前。 <br />
仅IE6与IE5不识别 <br />
select/**/ { display /*IE6,IE5不识别*/:none;} <br />
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。 <br />
仅IE5不识别 <br />
select/*IE5不识别*/ { display:none;} <br />
这一句是在上一句中去掉了属性区的注释。只有IE5不识别</p>
<p>盒模型解决方法 <br />
selct {width:IE5.x宽度; voice-family :&quot;&quot;}&quot;&quot;; voice-family:inherit; width:正确宽度;} <br />
盒模型的清除方法不是通过!important来处理的。这点要明确。</p>
<p>清除浮动 <br />
select:after {content:&quot;.&quot;; display:block; height:0; clear:both; visibility:hidden;} <br />
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的兼容来对父级做一次定义，那么就可以解决这个问题 。</p>
<p>截字省略号 <br />
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; } <br />
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。</p>
<p>只有Opera识别 <br />
@media all and (min-width: 0px){ select {&hellip;&hellip;} } <br />
针对Opera浏览器做单独的设定。</p>
<p>以上都是写CSS中的一些兼容，建议遵循正确的标签嵌套(div ul li 嵌套结构关系)，这样可以减少你使用兼容的频率，不要进入理解误区，并不是一个页面就需要很多的兼容来保持多浏览器兼容)，很多情况下也许一个兼容都不用 也可以让浏览器工作得非常好，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在 CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。</p>
<p>IE5.x的过滤器，只有IE5.x可见 <br />
@media tty { <br />
i{content:&quot;&quot;;/*&quot; &quot;*/}} @import &rsquo;ie5win.css&rsquo;; /*&quot;;} <br />
}/* */</p>
<p>IE5/MAC的过滤器，一般用不着 <br />
/**//*/ <br />
@import &quot;ie5mac.css&quot;; <br />
/**/</p>
<p>下面是IE的条件注释，个人觉得用条件注释调用相应 兼容是比较完美的多浏览器兼容的解决办法。把需要兼容的地方单独放到一个文件里面，当浏览器版本符合的时候就可以调用那个被兼容的样式，这样不仅使用起来 非常方便，而且对于制作这个CSS本身来讲，可以更严格的观察到是否有必要使用兼容，很多情况下，当我本人写CSS如果把全部代码包括兼容都写到一个 CSS文件的时候的时候会很随意，想怎么兼容就怎么兼容，而你独立出来写的时候，你就会不自觉的考虑是否有必要兼容，是先兼容 CSS？还是先把主CSS里面的东西调整到尽可能的不需要兼容？当你仅用很少的兼容就让很多浏览器很乖很听话的时候，你是不是很有成就感呢？你知道怎么选 择了吧～～呵呵</p>
<p>IE的if条件兼容 自己可以灵活使用参看这篇IE条件注释 <br />
Only IE <br />
所有的IE可识别</p>
<p>只有IE5.0可以识别 <br />
Only IE 5.0+ <br />
IE5.0包换IE5.5都可以识别</p>
<p>仅IE6可识别 <br />
Only IE 7/- <br />
IE6以及IE6以下的IE5.x都可识别 <br />
Only IE 7/- <br />
仅IE7可识别</p>
<p>Css 当中有许多的东西不不按照某些规律来的话，会让你很心烦，虽然你可以通过很多的兼容，很多的!important 来控制它，但是你会发现长此以往你会很不甘心，看看许多优秀的网站，他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起 来完美无缺是不是很羡慕？而他们看似复杂的模版下面使用的兼容 少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐，我们找到一定的方法，是完全可以让他们和谐共处的。不要你认为发现了兼容的办法，你就掌握了一切，我们并不是兼容的奴隶。</p>
<p>div ul li 的嵌套顺序</p>
<p>今天只讲一个规则。就是&lt;div&gt;&lt;ul&gt;&lt;li&gt;的三角关系。我的经验就是&lt;div&gt;在最外面，里面 是&lt;ul&gt;，然后再是&lt;li&gt;，当然&lt;li&gt;里面又可以嵌套&lt;div&gt;什么的，但是并不建议你嵌套很多 东西。当你符合这样的规则的时候，那些倒霉的，不听话的间隙就不会在里面出现了，当你仅仅是&lt;div&gt;里面放&lt;li&gt;，而不用 &lt;ul&gt;的时候，你会发现你的间隙十分难控制，一般情况下，IE6和IE7会凭空多一些间距。但很多情况你来到下一行，间隙就没了，但是前面 的内容又空了很大一块，出现这种情况虽然你可以改变IE的Margin，然后调整Firefox下面的Padding，以便使得两者显示起来得效果很相 似，但是你得CSS将变得臭长无比，你不得不多考虑更多可能出现这种问题补救措施，虽然你知道千篇一律来兼容它们，但是你会烦得要命。</p>
<p>具体嵌套写法</p>
<p>遵循上面得嵌套方式，&lt;div&gt;&lt;ul&gt;&lt;li&gt;&lt;/li&gt;&lt;/ul&gt;&lt; /div&gt; 然后在CSS 里面告诉 ul {Margin:0px;Padding:0px;list-style:none;}，其中list-style:none是不让&lt;li&gt; 标记的最前方显示圆点或者数字等目录类型的标记，因为IE和Firefox显示出来默认效果有些不一样。因此这样不需要做任何手脚，你的IE6、和 IE7、Firefox显示出来的东西(外距，间距，高度，宽度)就几乎没什么区别了，也许细心的你会在某一个时刻发现一、两个象素的差别，但那已经很完 美了，不需要你通过调整大片的CSS来控制它们的显示了，你愿意，你可以仅仅兼容一两个地方，而且通常这种兼容可以适应各种地方，不需要你重复在不同的地 方调试不同的兼容方式&ndash;减轻你的烦。你可以ul.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出你要兼容的地方，而统一兼容。尝试一下吧，再也不要乱嵌套了，虽然在Div+CSS的方式下你几乎可以想怎么嵌套 就怎么嵌套，但是按照上面的规律你将轻松很多，从而事半功倍</p>
<p><br />
用css hack解决IE5 IE5.5 IE6 Firefox浏览器兼容性<br />
2006年12月08日 星期五 上午 08:49<br />
一直比较关注，最近找了一个比较全的，分享一下。 <br />
为了不同浏览器的观看效果，我们当然没必要为每个浏览器的不同版本写一个样式，这里我们利用&ldquo;IE条件注释&rdquo;。 <br />
找了一些相关的CSS HACK后，总结的几个方法。 <br />
1. 区别FF和IE <br />
1-1 <br />
首先，当然是!important大法，可以提升指定样式规则的应用优先权，如下面的例子： <br />
插入代码：<br />
div{ <br />
background-color: red !important; <br />
background-color: blue; <br />
}因为!important声明在IE6中并不是绝对的，它会被之后的同名属性定义所替换。也就是说在上面的例子中，IE6所应用的是最后一个背景色的值，即&ldquo;blue&rdquo;；而在FF中背景色的值为&ldquo;red&rdquo;。 <br />
1-2 <br />
还有一种方法，就是IE浏览器可以识别&ldquo;&gt;&rdquo;等一些符号，如&ldquo;~&rdquo;、&ldquo;`&rdquo;、&ldquo;<br />
插入代码：<br />
div{ <br />
background-color: red; <br />
&gt;background-color: blue; <br />
}在FF中得到的是背景色红色，而在IE中得到的背景色是蓝色，根据样式重定义的规则，如果浏览器可以识别&ldquo;&gt;&rdquo;，则应该得到的蓝色的背景，因此可以知道&ldquo;&gt;&rdquo;只有IE可以识别。 <br />
这样，我们就可以把FF和IE的样式分离开。下面就是解决IE自己的问题了。 <br />
2. 区别IE5.5和IE的其他版本 <br />
看一个例子： <br />
插入代码：<br />
div{ <br />
&gt;background-color: black; <br />
&gt;background-color /*IE5.5*/: green; <br />
}这个例子使用了&ldquo;&gt;&rdquo;，只有IE可以识别，在IE6中得到了黑色的背景；而在IE5.5中得到的绿色的背景；在IE5中也得到了黑色的背景。这就说明了第二句定义只有IE5.5能识别，这是个很早就公布的HACK，可以在网上找到相关的资料，要注意的就是在属性名之后是有一个空格的。 <br />
到此我们已经把FF、IE5.5、IE6分离出来了，那IE5呢？其实现在我们只要把IE5跟IE6分开就OK了。 <br />
3. 区别IE5与IE5.5+ <br />
插入代码：<br />
div{ <br />
&gt;background-color: red; <br />
} <br />
div/*IE5.5+*/{ <br />
&gt;background-color: black; <br />
}这里我们又用到一个HACK，就是&ldquo;div/**/{}&rdquo;，这个定义在IE5以上的版本才能识别出来。这个例子得到的结果是，在IE5中的背景色为红色；在IE5以上版本中得到的是黑色背景。 <br />
4. 完整的Hack <br />
这样我们就可以为不同的浏览器定义不同的样式了。来看个完整的例子： <br />
插入代码：<br />
div{ <br />
width: 500px; <br />
height: 50px; <br />
background-color: red !important;/*FF*/ <br />
background-color: blue;/*IE5*/ <br />
text-align:center; <br />
} <br />
div/*IE5.5+*/{ <br />
&gt;/*IE on<wbr></wbr>ly*/background-color: black;/*IE6*/ <br />
&gt;/*IE on<wbr></wbr>ly*/background-color /*IE5.5*/: green; <br />
}需要注意的是，在上面例子中&ldquo;background-color&rdquo;定义的顺利不能改变，即FF-IE5-IE6-IE5.5。对于IE的定义在属性前要加&ldquo;&gt;&rdquo;，因为&ldquo;div/**/{}&rdquo;这个HACK在FF中可以识别。</p>
<p>鼠标手形:(兼容IE FF) hand等同于pointer，而后者可以兼容IE和F！<br />
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@<br />
在ff测试div+css的过程中发现不少问题，主要原因是代码的不规范书写。</p>
<p>1、居中问题<br />
div里的内容，ie默认为居中，而ff默认为左对齐。<br />
使ff内容居中的方法是增加代码margin:auto;</p>
<p><br />
2、高度问题<br />
设有两横行div排列，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在ff中会出现两个div重叠的现象；但在ie中， 下面的div会自动给上面的div让出空间。所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节。<br />
或者设置：overflow:hidden</p>
<p><br />
3、clear:both;<br />
拿footer为例，有时候如果上面使用 了float控制的n列的布局，那么在用ff浏览时footer很有可能不老实，到处乱动&mdash;&mdash;因为他还在受到浮动（float）的控制。如果想让它老老实 实呆在页面下方，在footer的div中写入clear:both;就可以达到效果了！</p>
<p><br />
4、浮动ie产生的双倍距离<br />
#box{<br />
float:left;<br />
width:100px;<br />
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离<br />
display:inline; //使浮动忽略<br />
}</p>
<p><br />
5、重点讲解：display:block,inline两个元素 display(显示)<br />
display:block; //可以为内嵌元素模拟为块元素<br />
display:inline; //实现同一行排列的的效果<br />
diplay:table; //for ff,模拟table的效果</p>
<p>Display:block元素的特点是：<br />
总是在新行上开始；<br />
高度，行高以及顶和底边距都可控制；<br />
宽度缺省是它的容器的100%，除非设定一个宽度<br />
&lt;div&gt;, &lt;p&gt;, &lt;h1&gt;, &lt;form&gt;, &lt;ul&gt; 和 &lt;li&gt;是块元素的例子。</p>
<p>display:inline就是将元素显示为行内元素.<br />
inline元素的特点是：<br />
和其他元素都在一行上；<br />
高，行高及顶和底边距不可改变；<br />
宽度就是它的文字或图片的宽度，不可改变。<br />
&lt;span&gt;, &lt;a&gt;, &lt;label&gt;, &lt;input&gt;, &lt;img&gt;, &lt;strong&gt; 和&lt;em&gt;是inline元素的例子。</p>
<p sizset="61" sizcache="4">例子：<br />
&lt;html xmlns=&quot;<a href="http://www.w3.org/1999/xhtml" target="_blank"><font color="#556c88">http://www.w3.org/1999/xhtml</font></a>&quot;&gt;<br />
&lt;head&gt;<br />
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt;<br />
&lt;title&gt;无标题文档&lt;/title&gt;<br />
&lt;style type=&quot;text/css&quot;&gt;<br />
#inline{width:400px; height:40px;background:#99CCCC;padding:15px 0px 0px 15px}<br />
#inline ul{ margin:0px; list-style:none;}<br />
#inline ul li{display:inline; font-size:12px;margin-left:5px}<br />
#block{width:400px; height:40px;background:#FFCC99;padding:15px 0px 0px 15px}<br />
#block ul{ margin:0px; list-style:none;}<br />
#block ul li{display:block; font-size:12px;height:20px}<br />
#div_inline{ width:800px;display:inline;height:120px;}<br />
&lt;/style&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;div id=&quot;inline&quot;&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;天天招生网<br />
&lt;li&gt;心血管网<br />
&lt;li&gt;高血压网<br />
&lt;li&gt;先心病网<br />
&lt;/ul&gt;<br />
&lt;/div&gt;<br />
&lt;p&gt;<br />
&lt;div id=&quot;block&quot;&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;天天招生网&lt;/li&gt;<br />
&lt;li&gt;心血管网&lt;/li&gt;<br />
&lt;li&gt;高血压网&lt;/li&gt;<br />
&lt;li&gt;先心病网&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;/div&gt;<br />
&lt;/p&gt;<br />
&lt;/body&gt;&lt;/html&gt;</p>
<p><br />
6、IE与FF宽度和高度的问题<br />
min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。整体最窄770px，最宽1024px，也就 是说窗口小于770xp就出底部滚动条，如果大于1024px自动屏幕居中。IE不认得min-这个定义，但实际上它把正常的width和height当 作有min的情况来使。这样，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根 本等于没有设置宽度和高度。<br />
CSS这样设计：<br />
#container{<br />
min-width: 600px;<br />
width:expression(document.body.clientWidth &lt; 600? &quot;600px&quot;: &quot;auto&quot; );<br />
}</p>
<p>第一个min-width是正常的；但第2行的width使用了Javascrīpt，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascrīpt的判断来实现最小宽度。</p>
<p>同样的办法也可以为IE实现最大宽度：<br />
#container<br />
{<br />
min-width: 600px;<br />
max-width: 1200px;<br />
width:expression(document.body.clientWidth &lt; 600? &quot;600px&quot; : document.body.clientWidth &gt; 1200? &rdquo;1200px&ldquo; : &rdquo;auto&quot;;<br />
}</p>
<p><br />
7、FF: 支持 !important, IE 则忽略,<br />
可用 !important （例：height:30px!important; height:26px;）为 FF 特别设置样式<br />
div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行<br />
cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以<br />
FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行（背景图片需要设置 float: left ）。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格<br />
在FF和IE中的BOX模型解释不一致导致相差2px解决方法：<br />
div{margin:30px!important;margin:28px;}</p>
<p>注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：</p>
<p>div css xhtml xml Example Source Code Example Source Code [www.52css.com]<br />
div{maring:30px;margin:28px}</p>
<p>重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;</p>
<p><br />
在Firefox/Mozilla 浏览器中，对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)；而在IE/Opera浏览器中，对象的实际宽度 = (margin-left) + width + (margin-right)。</p>
<p>##########################################################<br />
五招解决Div+CSS网页兼容IE和FF2009-03-31 13:36使用div+css建站的朋友一定都知道CSS兼容的问题。由其是初学者在IE环境下好不容易写出了一个像模像样的网站来，一拿到FF下就变样了。所以在这里建议新手写代码时切忌要在IE和FF两个环境下去测试。今天教大家五招方法完全可以解决浏览器兼容问题。 <br />
　　这里大家要知道CSS不兼容的原因是因为各浏览器给CSS默认属性值不一样造成的。</p>
<p>　　第一招：给常用CSS规定属性值。<br />
body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0;padding:0;}<br />
img{border:0px;}<br />
ul {margin:0px;padding:0px;}/<br />
ul li {list-style:none;}<br />
上面的建站常用代码就相是格式化CSS样式，让各浏览器按照我们设置的属性值渲染网页</p>
<p>　　第二招：IE和FF下对象居中问题<br />
IE下大家应该知道只要设置body{text-align:center;}这样就可以居中显示。<br />
但是这样的方法在FF不行的。这里就需要给修改成body:{text-align:center;margin:0px auto;}Margin的意思就是上下距离为0像素，左右为自动。所以FF就会居中显示。</p>
<p>　　第三招：垂直居中（仅只用于一行）<br />
比如说一个高30px的div，问题默认是会显示在左上角，如果想垂直居中对其可以加个line- height:30px;样式。如果你想让他居下方则在修改line-height:30px;数值越大越局下，为了防止撑破层，还需要再给一个样式 overflow:hidden;(超出的部分不显示)</p>
<p>　　第四招：给每一个块对象设置三个样式<br />
width:**px;height:**px;overflow:hidden;即便高、宽是属性值是自动那么也需要去设置这三个样式。目的就是解决浏览器默认值的问题。</p>
<p>第五招：针对IE6、IE7、FF的css样式(这一招在特殊情况下经常用到)<br />
原来建设网站经常使用!important来设置优先权，但有了IE7之后就不行了。下面给大家个可以解决IE6、IE7、FF各个CSS优先权的方法<br />
#1 { color: #333; } /* FF环境 */ <br />
* html #1 { color: #666; } /* IE6环境 */ <br />
*+html #1 { color: #999; } /* IE7环境 */ <br />
上面的书写顺序一定不能去改变。<br />
这样子网页在FF下显示#333，IE6下显示#666，IE7下显示#999;</p>]]></description>
		</item>
		
			<item>
			<link>http://www.30design.com/30designblog/article.asp?id=270</link>
			<title><![CDATA[一些精美的页面，确实让人耳目一新，喜欢这种设计！]]></title>
			<author>30design@163.com(【三石】)</author>
			<category><![CDATA[设计欣赏]]></category>
			<pubDate>Thu,25 Feb 2010 15:17:19 +0800</pubDate>
			<guid>http://www.30design.com/30designblog/default.asp?id=270</guid>
		<description><![CDATA[<p>在别人空间看到的，对方分享的一些精美的页面，确实让人耳目一新，喜欢这种设计，特此转来.</p>
<p><br />
<a target="_blank" href="http://www.bohemiancoding.com/index.html"><span><img class="blogimg" alt="" border="0" small="0" src="http://hiphotos.baidu.com/inoc/pic/item/e608e6135c2ef412dc540101.jpg" /></span></a><br />
<br />
<br />
<br />
<font size="3"><strong>Yazsoft</strong></font><br />
<br />
这个网页好像是改版了一次之后的，以前也见到过这个，没有现在见到的这么酷。&ldquo;酷&rdquo;的设计总伴随着黑色。<br />
<br />
<a target="_blank" href="http://yazsoft.com/"><span><img class="blogimg" alt="" border="0" small="0" src="http://hiphotos.baidu.com/inoc/pic/item/e13b940133c30b32728da55b.jpg" /></span></a><br />
<br />
<font size="3"><strong><br />
<br />
Cultured</strong></font><br />
<br />
这个页面整体设计非常的简约，很干净，非常喜欢这种设计风格。<br />
<br />
<a target="_blank" href="http://culturedcode.com/"><span><img class="blogimg" alt="" border="0" small="0" src="http://hiphotos.baidu.com/inoc/pic/item/bedba83518ad1a2091ef3938.jpg" /></span></a><br />
<br />
<br />
<br />
<br />
<font size="3"><strong>Panic</strong></font><br />
<br />
相信这个很多人应该都知道，他们的软件在Mac系统上非常的流行，图标和界面设计也都很漂亮，产品页的布局很是特别。<br />
<br />
<a target="_blank" href="http://www.panic.com/"><span><img class="blogimg" alt="" border="0" small="0" src="http://hiphotos.baidu.com/inoc/pic/item/640a22241f202402c9955916.jpg" /></span></a><br />
<br />
<br />
<br />
<font size="3"><strong>Fi</strong></font><br />
<br />
这个是最近才找到的，最开始是因为它的banner做的很精致，也很有感觉，页面做的倒是很简洁，不过网页结构很普通。<br />
<br />
<a target="_blank" href="http://f-i.com/"><span><img class="blogimg" alt="" border="0" small="0" src="http://hiphotos.baidu.com/inoc/pic/item/c71603dd4e5e81e88c10291a.jpg" /></span></a></p>]]></description>
		</item>
		
			<item>
			<link>http://www.30design.com/30designblog/article.asp?id=269</link>
			<title><![CDATA[以用户为中心设计UCD海侃摘录]]></title>
			<author>30design@163.com(【三石】)</author>
			<category><![CDATA[群龙汇聚]]></category>
			<pubDate>Thu,17 Dec 2009 11:07:41 +0800</pubDate>
			<guid>http://www.30design.com/30designblog/default.asp?id=269</guid>
		<description><![CDATA[<p>【三石】赵鹏(909383961)&nbsp; 11:00:03<br />
<span style="color: #ff6600"><strong>其实每个网站也是有气质的，跟人的气质一样，我们都喜欢有亲和力气质的人</strong></span><br />
【三石】赵鹏(909383961)&nbsp; 11:00:35<br />
<span style="color: #ff6600"><strong>我们的目标就是设计制作和营造一个有亲和力气质的网站</strong></span><br />
Kimcool(606176)&nbsp; 11:00:34<br />
感情你哪天娶个网站当媳妇？<br />
咖啡鱼(568157)&nbsp; 11:01:16<br />
亲和力气质的网站</p>
<p>【三石】赵鹏(909383961)&nbsp; 11:01:50<br />
<span style="color: #ff6600"><strong>如何达到这个目标呢？<br />
我们需要给他美容--视觉设计<br />
我们需要提高他的内涵---网站内容<br />
我们需要纠正一些不合理的举止---交互</strong></span></p>
<p>Kimcool(606176)&nbsp; 11:01:50<br />
我理解为，能够让人心情变化的网站。<br />
莲百合(82320416)&nbsp; 11:02:01<br />
我喜欢既亲和 又华丽的<br />
Kimcool(606176)&nbsp; 11:02:15<br />
那怎么排序呢？<br />
咖啡鱼(568157)&nbsp; 11:02:13<br />
如何达到这个目标呢？<br />
我们需要给他美容--视觉设计<br />
我们需要提高他的内涵---网站内容<br />
我们需要纠正一些不合理的举止---交互</p>
<p><br />
顶这个<br />
Kimcool(606176)&nbsp; 11:02:26<br />
嗯。。收录到今天的日志<br />
咖啡鱼(568157)&nbsp; 11:02:27<br />
很有条理<br />
Kimcool(606176)&nbsp; 11:02:47<br />
到底内容重要还是视觉重要？<br />
【三石】赵鹏(909383961)&nbsp; 11:02:52<br />
<strong><span style="color: #ff6600">其实做网站也是在做人</span></strong><br />
Kimcool(606176)&nbsp; 11:02:57<br />
好哲理。。<br />
咖啡鱼(568157)&nbsp; 11:03:13<br />
Kimcool(606176)&nbsp; 11:00:34<br />
感情你哪天娶个网站当媳妇？<br />
【三石】赵鹏(909383961)&nbsp; 11:02:52<br />
其实做网站也是在做人</p>
<p><br />
【三石】赵鹏(909383961)&nbsp; 11:03:51<br />
<strong><span style="color: #ff6600">穿的好看的没有内涵<br />
穿的一般但是很有内涵，<br />
穿的好看并且很有内涵</span></strong><br />
莲百合(82320416)&nbsp; 11:03:52<br />
视觉重要 内容更重要<br />
&nbsp;</p>]]></description>
		</item>
		
			<item>
			<link>http://www.30design.com/30designblog/article.asp?id=268</link>
			<title><![CDATA[界面设计测试规范]]></title>
			<author>30design@163.com(【三石】)</author>
			<category><![CDATA[群龙汇聚]]></category>
			<pubDate>Thu,10 Dec 2009 15:22:20 +0800</pubDate>
			<guid>http://www.30design.com/30designblog/default.asp?id=268</guid>
		<description><![CDATA[<p>作者：flowingice<br />
我在工作中总结了一些有关界面设计与测试的规范，与大家共享。<br />
<br />
界面设计与测试规则 <br />
<br />
界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的*作，起到向导的作用。同时界面如同人的面孔，具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失败，让用户有挫败感，再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。目前界面的设计引起软件设计人员的重视的程度还远远不够，直到最近网页制作的兴起，才受到专家的青睐。而且设计良好的界面由于需要具有艺术美的天赋而遭拒绝。 <br />
目前流行的界面风格有三种方式：多窗体、单窗体以及资源管理器风格，无论那种风格，以下规则是应该被重视的。 <br />
<br />
1：易用性： <br />
按钮名称应该易懂，用词准确，屏弃没楞两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确*作。 <br />
<br />
易用性细则： <br />
1):完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式。 <br />
2):完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。 <br />
3):按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。 <br />
4):界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能。 <br />
5):界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。 <br />
6):同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。 <br />
7):分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab <br />
8):默认按钮要支持Enter及选*作，即按Enter后自动执行默认按钮对应*作。 <br />
9):可写控件检测到非法输入后应给出说明并能自动获得焦点。 <br />
10):Tab键的顺序与控件排列顺序要一直，目前流行总体从上到下，同时行间从左到右的方式。 <br />
11):复选框和选项框按选择几率的高底而先后排列。 <br />
12):复选框和选项框要有默认选项，并支持Tab选择。 <br />
13):选项数相同时多用选项框而不用下拉列表框。 <br />
14):界面空间较小时使用下拉框而不用选项框。 <br />
15):选项数叫少时使用选项框，相反使用下拉列表框。 <br />
16):专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。 <br />
2： 规范性： <br />
通常界面设计都按Windows界面的规范来设计，即包含&ldquo;菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单&rdquo;的标准格式，可以说：界面遵循规范化的程度越高，则易用性相应的就越好。小型软件一般不提供工具厢。 <br />
<br />
规范性细则： <br />
1):常用菜单要有命令快捷方式。 <br />
2):完成相同或相近功能的菜单用横线隔开放在同一位置。 <br />
3):菜单前的图标能直观的代表要完成的*作。 <br />
4):菜单深度一般要求最多控制在三层以内。 <br />
5):工具栏要求可以根据用户的要求自己选择定制。 <br />
6):相同或相近功能的工具栏放在一起。 <br />
7):工具栏中的每一个按钮要有及时提示信息。 <br />
8):一条工具栏的长度最长不能超出屏幕宽度。 <br />
9): 工具栏的图标能直观的代表要完成的*作。 <br />
10):系统常用的工具栏设置默认放置位置。 <br />
11):工具栏太多时可以考虑使用工具厢。 <br />
12):工具厢要具有可增减性，由用户自己根据需求定制。 <br />
13):工具厢的默认总宽度不要超过屏幕宽度的1/5。 <br />
14): 状态条要能显示用户切实需要的信息，常用的有： <br />
目前的*作、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一*作需要的时间较长，还应该显示进度条和进程提示。 <br />
15)：滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比。 <br />
16)：状态条的高度以放置五好字为宜，滚动条的宽度比状态条的略窄。 <br />
17)：菜单和工具条要有清楚的界限;菜单要求凸出显示，这样在移走工具条时仍有立体感。 <br />
18)：菜单和状态条中通常使用5号字体。工具条一般比菜单要宽，但不要宽的太多，否则看起来很不协调。 <br />
19):右键快捷菜单采用与菜单相同的准则。 <br />
<br />
<br />
3：帮助设施： <br />
系统应该提供详尽而可靠的帮助文档，在用户使用产生迷惑时可以自己寻求解决方法。 <br />
<br />
帮助设施细则： <br />
1)：帮助文档中的性能介绍与说明要与系统性能配套一致。(我们的系统帮助文档都是系统的祖先时期的说明，让人困惑)。 <br />
2)：打包新系统时，对作了修改的地方在帮助文档中要做相应的修改。 <br />
3)：*作时要提供及时调用系统帮助的功能。常用F1。 <br />
4)：在界面上调用帮助时应该能够及时定位到与该*作相对的帮助位置。也就是说帮助要有即时针对性。 <br />
5)：最好提供目前流行的联机帮助格式或HTML帮助格式。 <br />
6)：用户可以用关键词在帮助索引中搜索所要的帮助，当然也应该提供帮助主题词。 <br />
7)：如果没有提供书面的帮助文档的话，最好有打印帮助的功能。 <br />
8 )：在帮助中应该提供我们的技术支持方式，一旦用户难以自己解决可以方便的寻求新的帮助方式。 <br />
<br />
4：合理性： <br />
屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置。 <br />
<br />
合理性细则： <br />
1)：父窗体或主窗体的中心位置应该在对角线焦点附近。 <br />
2)：子窗体位置应该在主窗体的左上角或正中。 <br />
3)：多个子窗体弹出时应该依次向右下方偏移，以显示窗体出标题为宜。 <br />
4)：重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。 <br />
5)：错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。横排开头或最后与竖排最后为易点位置。 <br />
6)：与正在进行的*作无关的按钮应该加以屏蔽(Windows中用灰色显示，没法使用该按钮)。 <br />
7)：对可能造成数据无法恢复的*作必须提供确认信息,给用户放弃选择的机会。 <br />
8)：非法的输入或*作应有足够的提示说明。 <br />
9): 对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期的等待。 <br />
10):提示、警告、或错误说明应该清楚、明了、恰当。 <br />
5：美观与协调性： <br />
界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。 <br />
<br />
美观与协调性细则： <br />
1): 长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。 <br />
2): 布局要合理,不宜过于密集，也不能过于空旷，合理的利用空间。 <br />
3): 按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置。 <br />
4): 按钮的大小要与界面的大小和空间要协调。 <br />
5): 避免空旷的界面上放置很大的按钮。 <br />
6)：放置完控件后界面不应有很大的空缺位置。 <br />
7): 字体的大小要与界面的大小比例协调, 通常使用的字体中宋体9-12较为美观，很少使用超过12号的字体。 <br />
8): 前景与背景色搭配合理协调，反差不宜太大，最好少用深色，如大红、大绿等。常用色考虑使用Windows界面色调。 <br />
9): 如果使用其他颜色，主色要柔和，具有亲和力与磁力，坚决杜绝刺目的颜色。 <br />
10): 大型系统常用的主色有&quot;#E1E1E1&quot;、&quot;#EFEFEF&quot;、&quot;#C0C0C0&quot;等。 <br />
11): 界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。 <br />
12): 如果窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放。 <br />
13)：对于含有按钮的界面一般不应该支持缩放，即右上角只有关闭功能。 <br />
14): 通常父窗体支持缩放时，子窗体没有必要缩放。 <br />
15)：如果能给用户提供自定义界面风格则更好，由用户自己选择颜色、字体等。 <br />
<br />
6：菜单位置： <br />
菜单是界面上最重要的元素，菜单位置按照按功能来组织。 <br />
<br />
菜单设测试细则： <br />
1)：菜单通常采用&ldquo;常用--主要--次要--工具--帮助&rdquo;的位置排列，符合流行的Windows风格。 <br />
2):常用的有&ldquo;文件&rdquo;、&ldquo;编辑&rdquo;，&ldquo;查看&rdquo;等，几乎每个系统都有这些选项，当然要根据不同的系统有所取舍。 <br />
3):下拉菜单要根据菜单选项的含义进行分组，并切按照一定的规则进行排列，用横线隔开。 <br />
4): 一组菜单的使用有先后要求或有向导作用时，应该按先后次序排列。 <br />
5): 没有顺序要求的菜单项按使用频率和重要性排列，常用的放在开头， 不常用的靠后放置；重要的放在开头，次要的放在后边。 <br />
6): 如果菜单选项较多，应该采用加长菜单的长度而减少深度的原则排列。 <br />
7): 菜单深度一般要求最多控制在三层以内。 <br />
8): 对常用的菜单要有快捷命令方式，组合原则见8。 <br />
9):对与进行的*作无关的菜单要用屏蔽的方式加以处理，如果采用动态加载方式&mdash;&mdash;即只有需要的菜单才显示&mdash;&mdash;最好。 <br />
10)：菜单前的图标不宜太大，与字高保持一直最好。 <br />
11):主菜单的宽度要接近，字数不应多于四个，每个菜单的字数能相同最好。 <br />
12)：主菜单数目不应太多，最好为单排布置。 <br />
。7:独特性： <br />
如果一味的遵循业界的界面标准，则会丧失自己的个性.在框架符合以上规范的情况下，设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。 <br />
<br />
1):安装界面上应有单位介绍或产品介绍，并有自己的图标。 <br />
2):主界面，最好是大多数界面上要有公司图标。 <br />
3):登录界面上要有本产品的标志，同时包含公司图标。 <br />
4):帮助菜单的&ldquo;关于&rdquo;中应有版权和产品信息。 <br />
5):公司的系列产品要保持一直的界面风格，如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。 <br />
<br />
8：快捷方式的组合 <br />
在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户*作得更快一些 在西文Windows及其应用软件中快捷键的使用大多是一致的。 <br />
菜单中： <br />
1):面向事务的组合有: <br />
Ctrl-D 删除 ；Ctrl-F 寻找 ；Ctrl &ndash;H替换；Ctrl-I 插入 ；Ctrl-N 新记录 ；Ctrl-S 保存 Ctrl-O 打开。 <br />
2)：列表: <br />
Ctrl-R ，Ctrl-G定位；Ctrl-Tab下一分页窗口或反序浏览同一页面控件；。 <br />
3):编辑: <br />
Ctrl-A全选；Ctrl-C 拷贝；Ctrl-V 粘贴；Ctrl-X 剪切；Ctrl-Z撤消*作；Ctrl-Y恢复*作。 <br />
4)文件*作: <br />
Ctrl-P 打印；Ctrl-W 关闭。 <br />
5):系统菜单 <br />
Alt-A文件；Alt-E编辑；Alt-T工具；Alt－W窗口；Alt－H帮助。 <br />
6):MS Windows保留键: <br />
Ctrl-Esc 任务列表 ；Ctrl-F4 关闭窗口； Alt-F4 结束应用；Alt-Tab 下一应用 ；Enter 缺省按钮/确认*作 ；Esc 取消按钮/取消*作 ；Shift-F1 上下文相关帮助 。 <br />
按钮中： <br />
可以根据系统需要而调节，以下只是常用的组合。 <br />
Alt-Y确定(是)；Alt-C取消；Alt-N 否；Alt-D删除；Alt-Q退出；Alt-A添加；Alt-E编辑；Alt-B浏览；Alt-R读；Alt-W写。 <br />
这些快捷键也可以作为开发中文应用软件的标准,但亦可使用汉语拼音的开头字母。 <br />
9:安全性考虑： <br />
在界面上通过下列方式来控制出错几率，会大大减少系统因用户人为的错误引起的破坏。开发者应当尽量周全地考虑到各种可能发生的问题,使出错的可能降至最小。如应用出现保护性错误而退出系统,这种错误最容易使用户对软件失去信心。因为这意味着用户要中断思路,并费时费力地重新登录,而且已进行的*作也会因没有存盘而全部丢失。 <br />
<br />
<br />
安全性细则： <br />
1)：最重要的是排除可能会使应用非正常中止的错误。 <br />
2)：应当注意尽可能避免用户无意录入无效的数据。 <br />
3)：采用相关控件限制用户输入值的种类。 <br />
4)：当用户作出选择的可能性只有两个时,可以采用单选框。 <br />
5)：当选择的可能再多一些时,可以采用复选框,每一种选择都是有效的,用户不可能输入任何一种无效的选择。 <br />
6)：当选项特别多时，可以采用列表框，下拉式列表框。 <br />
7)：在一个应用系统中,开发者应当避免用户作出未经授权或没有意义的*作。 <br />
8)：对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。 <br />
9):对可能发生严重后果的*作要有补救措施。通过补救措施用户可以回到原来的正确状态。 <br />
10):对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。 <br />
11)：对错误*作最好支持可逆性处理，如取消系列*作。 <br />
12):在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的*作。 <br />
13):对可能造成等待时间较长的*作应该提供取消功能。 <br />
14)：特殊字符常有；;&rsquo;&rdquo;&gt;&lt;,｀&lsquo;：&ldquo;［&rdquo;｛、\|｝］+=)-(_*&amp;&amp;^%$#@!~,.。?/还有空格。 <br />
15)：与系统采用的保留字符冲突的要加以限制。 <br />
16)：在读入用户所输入的信息时，根据需要选择是否去掉前后空格。 <br />
17)：有些读入数据库的字段不支持中间有空格，但用户切实需要输入中间空格，这时要在程序中加以处理。 <br />
<br />
10:多窗口的应用与系统资源： <br />
设计良好的软件不仅要有完备的功能，而且要尽可能的占用最底限度的资源。 <br />
1)： 在多窗口系统中，有些界面要求必须保持在最顶层，避免用户在打开多个窗口时，不停的切换甚至最小化其他窗口来显示该窗口。 <br />
<br />
2)：在主界面载入完毕后自动卸出内存，让出所占用的WINDOWS系统资源。 <br />
3)：关闭所有窗体，系统退出后要释放所占的所有系统资源 ，除非是需要后台运行的系统。 <br />
4)：尽量防止对系统的独占使用。</p>]]></description>
		</item>
		
			<item>
			<link>http://www.30design.com/30designblog/article.asp?id=267</link>
			<title><![CDATA[【转】庞升东：色情交易者在51.com的生存空间很有限了]]></title>
			<author>30design@163.com(【三石】)</author>
			<category><![CDATA[运营&amp;策划]]></category>
			<pubDate>Mon,07 Dec 2009 17:11:40 +0800</pubDate>
			<guid>http://www.30design.com/30designblog/default.asp?id=267</guid>
		<description><![CDATA[<p>什么是中国互联网业最稀缺的资源？答案可能并不是技术或商业模式，而是声誉。 　　关于商业模式的正当性，似乎总有太多道德指摘的余地，因此便不难理解，为什么腾讯、百度和淘宝们，常年处于一种&ldquo;被很多人骂，同时被很多人用&rdquo; 的奇怪处境。但在中国互联网业，恐怕没有哪家公司比<a href="http://www.pbdigg.net/index.php?tag=51.com"><span style="text-decoration: underline"><font color="#2686cd">51.com</font></span></a>承受着更多的批评、轻蔑甚至鄙夷：有人说其创始人庞升东是个&ldquo;聪明的骗子&rdquo;，而这家网站早期的成长是因为开发并捆绑流氓软件，后期的崛起则因为它把自己打造成为了&ldquo;中国最大一夜情社区&rdquo;&mdash;&mdash;种种极端说法，都从道德上将其判以极刑。 　　然而形成鲜明反差的是，它又同时被视为当今中国最有商业前途的社交网站。风投业一位资深人士对《环球企业家》称：&ldquo;2000年以后，中国网络业真正做出来的公司只有两到三家：迅雷、51，或者再加上猫扑。&rdquo;迄今，51已经完成了两轮融资，投资者中不乏在国内口碑甚佳的红杉资本，以及在美国有过投资MySpace经验的红点创投。而业内最新的传闻是，51正在筹备第三轮总额达3000万美元的融资，大约在今年6月间，将有重量级人物成为其投资者。在今年，51已经正式提出了2010年登陆纳斯达克的说法。 　　毁誉对立之下，值得探究的问题是：51的成功是否真实？其成果究竟是被催生、包装出来的，还是确实可靠的？ 　　验证这一问题并不困难，只要看一看它目前的战略究竟会取得何种结果&mdash;&mdash;51公开的战略，是一个中国网络创业公司最不愿意想到的选择：挑战腾讯。 　　私下里，庞从不掩饰他对腾讯和马化腾的钦佩。在4月的互联网站长大会上，针对千橡集团CEO陈一舟&ldquo;国内SNS战斗已经结束&rdquo;的观点，他毫不犹豫地回应&ldquo;只有马化腾能说SNS的战斗已经结束&rdquo;。而在受邀参观腾讯公司总部，与包括马化腾在内的高管团队交流之后，他对《环球企业家》坦言&ldquo;心情复杂，很多天都睡不好觉&rdquo;。的确，相较2007年总收入为38亿元人民币、盈利为15亿元的腾讯，每月收入达到百万美元规模但尚未收支平衡的51的压力是可想而知。 　　但诱惑也是巨大的：当腾讯成为中国年轻人最主要的娱乐选择之一，以往对它的轻视之词大多烟消云散了。换句话说，如果庞升东能让51成为下一家腾讯，他就拥有了充分将网站&ldquo;洗白&rdquo;的时间和涂抹历史的权力。 　　以追随始 　　庞升东瞄准腾讯，始于2005年7月，也即51成立之初。 　　原因很简单，全球范围内也很难找到更好的模仿对象。彼时，QQ注册用户已逾4亿，而MySpace和Facebook们还默默无闻。 　　庞升东和另一位合伙创始人张剑福相信，完全拷贝QQ的模式，无疑是自寻死路，但抓住QQ庞大产品线的某一个新的应用持续&ldquo;学习&rdquo;的话，应该可以成功。 　　&ldquo;其实要明白，互联网根本不存在什么蓝海，所谓的不一样和差异化，都是暂时的、阶段性和不稳定的，能在红海里获得成功才是真的成功&rdquo;，自1998年就进入网络业的庞升东愿意这样总结。 　　于是他们把QQ产品线上最新的产品&ldquo;Qzone&rdquo;当坐标，打造51的个人空间。但不能忽视的是两者之间天然的巨大差异：腾讯QQ庞大的用户基础使其Qzone具备任何对手无可匹敌的优势；而51则需从头开始。 　　需承认，51得以迅速崛起，除了经常为同行所指摘的&ldquo;依靠流氓插件&rdquo;，也跟庞升东所率领的&ldquo;草根团队&rdquo;的小聪明有关。 　　比如，它的一个营销手段是，用户登录管理中心页面后，会收到系统的提示：&ldquo;为便于您的记忆，请将您的主页地址填在QQ资料里，这样还能给您的主页增加访问量。&rdquo;这样，51的个人主页间接得以在QQ拥有数亿用户的平台上病毒式传播。 　　再比如，意识到网络交友的一个关键点在于照片的真实性，51发明了&ldquo;视频认证&rdquo;功能：用户可以用摄像头拍下自己的照片，与51的客服人员进行真人与照片的对照认证，合格者的头像下面会有一个粉色的认证标志。在业界至今探讨用户是否应使用真实身份上网时，51近乎讨巧的化解了这个问题：身份真实与否并不重要，只要能确定网络另一端的面孔是真实的，多数人已经知道是否值得认识对方。恰好，中国数以万计的网吧的电脑上几乎必备摄像头。 　　而51另一个曲线包围腾讯的方法，正是模仿网游业，仔细耕作网吧市场。他早早建立起深入到地市级网吧的推广经理团队，在网吧内提供51鼠标垫、 51海报和51文化衫等产品，创造与用户&ldquo;对接&rdquo;的机会。效仿QQ秀、QQ商城等模式，51也推出了类似的&ldquo;51秀&rdquo;、&ldquo;51商城&rdquo;等产品，同样需要用户通过货币充值的形式购买，但与QQ不同的是，在全国80%的网吧，用户可以通过51特定的分销渠道购买到充值卡&mdash;&mdash;它反向地拓展了51在网吧的影响力。 &ldquo;如果在网吧搞抽样调查，你会发现51的用户已超过了QQ空间，在广东、湖南等南方省份，51的总体用户数也已经超过了QQ空间。&rdquo;庞升东对《环球企业家》说。 　　需承认，这些四两拨千斤的手段，跟庞升东的个人风格不无关系。2005年6月在网络上发布&ldquo;晒家底&rdquo;文章《一个老站长说：我是如何通过网络赚到几百万的》时，他就不惮于承认自己需要&ldquo;鬼点子多，擅长投机取巧&rdquo;的合作者&mdash;&mdash;精明、投机，有时不讲规则，正是庞留给大多数业内同行最深刻的印象。51最初的投资者、红杉资本中国创始合伙人沈南鹏对本刊表示，沈当初看中庞升东的公司，主要因为他的&ldquo;草根&rdquo;，正因草根，而能够较为深刻理解网民的真实需求。 　　但硬币的另一面是，在国内，称得上草根的站长不计其数，为何庞升东能够成为腾讯的挑战者？&ldquo;庞升东渴望成功，他没有像很多同期的个人站长一样沿着老路走下去，而是专心致志地做一件事并试图把它做好。&rdquo;奇虎网董事长周鸿祎评价说。周曾因&ldquo;与51共同开发流氓软件&rdquo;和&ldquo;融资陷阱&rdquo;等谣言深受困扰，并因此对庞升东避之不及。然而近年来，在他与庞的有限接触中，他对本刊坦承庞升东&ldquo;有了很大的进步&rdquo;。 　　竞争力 　　推动庞成长的动力并不复杂：他面临着绝大多数同行所没有的生存压力。复制QQ的模式，把QQ用户分流到51的平台上，甚至抢先QQ推出一些有趣的应用，的确能取得一些不错的效果，但这些显然并不足以让51获得颠覆性力量，还会引来马化腾的高度注意。51靠什么为自己建立一道护城河呢？ 　　沈南鹏说：&ldquo;51的与众不同之处在于它对用户体验的关注。&rdquo;这听起来像一句陈词滥调，但业内仔细看过51的人士，无不承认这是一个细节丰富的网站：新用户注册之后，系统会自动地先后推荐3名异性&ldquo;用户&rdquo;：分别邀请你上传自己的照片、到她(他)的空间逛逛⋯⋯而稍加留意便会发现，这3名&ldquo;用户&rdquo;其实都是系统管理员。而聪明之处在于：51的系统会区分用户性别，使他们在异性的&ldquo;摆布&rdquo;下，完善个人资料并熟悉社区。而用户每次登录进入&ldquo;管理中心&rdquo;页面后，系统会自动推荐4位好友人选，异性用户与本地用户都占了绝大多数&mdash;&mdash;必须承认，它相当贴近大多数人的网络社交心理。 　　毫无疑问，这种建立在对人性和心理的微妙把握基础上的产品逻辑，迅速为51招揽了大量年轻的中低端用户。这种&ldquo;体贴入微&rdquo;的把握在更多的细节中体现：用户注册完成，系统会提示用户把ID和密码写下来或存在手机里，实际而且人性化；个人用户管理中心最下两栏提供了常用网址和软件的下载以及链接，并支持用户添加更多自己喜欢的链接；用51&ldquo;同生缘&rdquo;可以找到相同出生日期的网友，但是否将自己的年龄显示在主页上，51则将决定权交给用户⋯⋯类似的细节从技术上操作极为简单，但却鲜有同类网站考虑得如此周全。 　　总体规划51产品框架和思路的，是庞升东收购的10770.com个人站长、51联合创始人兼高级副总裁、1982年出生的张剑福。据51员工称，在产品设计上，庞升东完全委任张剑福，几乎从不插手。 　　张没念过大学，曾卖过医疗器械，混迹于迪厅和酒吧等场所，后来又开办个人网站，貌似具备互联网&ldquo;草根&rdquo;的外部特质。真正重要的是：&ldquo;边缘&rdquo;的经历使张剑福更易洞悉占中国网民大多数的中低端用户的隐秘需求。一个事实或许能体现这种洞察力：在与《环球企业家》记者交谈时，他刚收到产品经理发来的 &ldquo;51群组列表&rdquo;改版设计方案。对&ldquo;成员人数&rdquo;一栏位置偏下且数字并不突出的设计，他十分不满：&ldquo;人数越多，用户就越有参与感，成员人数应该当做重要信息和管理员ID并列放在第一排，而且要把数字放大，用户一眼就能知道这个群有多热闹，然后直接点旁边的&lsquo;我要加入&rsquo;就OK了。&rdquo; 　　对于细节的掌控力，成为了51进攻腾讯的武器。几乎QQ每推出一款新的功能和应用，51都能很快&ldquo;移植&rdquo;到自己的平台上：&ldquo;51秀&rdquo;、&ldquo;51商城&rdquo;、&ldquo;51群组&rdquo;甚至&ldquo;51问问&rdquo;，无不是迅速复制QQ模式的产物&mdash;&mdash;目前51已几乎拷贝了QQ产品线上的全部应用。 　　但无论庞升东、沈南鹏，还是旁观者周鸿掉，都提到了一点：&ldquo;一模一样的产品，51需要提供一些独特功能。&rdquo;比如&ldquo;在线大头照拍摄&rdquo;、&ldquo;给网友照片打分&rdquo;和&ldquo;乱弹&rdquo;等QQ并不曾拥有、更能刺激用户参与的功能。甚至，尽管马化腾曾表示要让腾讯像FaceBook那样成为用户多元互动的社区，但产品一直未成型。而51最近已推出类似newsfeed的&ldquo;新闻联播&rdquo;功能，帮助用户追踪好友在站内的行踪&mdash;&mdash;这一步显然走在了QQ的前面。 　但在一个最关键的问题上&mdash;&mdash;商业模式&mdash;&mdash;51还在尽可能参考QQ。 　　51目前主要通过增值服务和各种形式的广告获得收入。前者包括VIP会员收费、虚拟商品购买和交易甚至发布在首页的个人&ldquo;广播&rdquo;。后者的形式更为多样：用户可以自行选择是否在主页上保留广告位，并&ldquo;挑选&rdquo;不同的广告挂在主页上。而调动51活跃用户的&ldquo;病毒式&rdquo;在线营销正在让一些广告主体会到真正的&ldquo;可量化&rdquo;效果：2007年，百事可乐与包括51在内的几家国内社区开展&ldquo;我要上罐&rdquo;推广活动，用户提交个人照片参与用户投票&ldquo;选秀&rdquo;，优胜者的照片会被印在百事可乐的易拉罐上。活动结束时，51的报名人数高达130万，而其他4家社区加在一起只有50万。 　　据庞升东对《环球企业家》透露，目前51每月可获得百万美元量级的收入&mdash;&mdash;其中增值服务和广告收入的比例为3∶1。虽未开始盈利，但收支已接近平衡。而硬币的另一面是：一些迹象表明，51正试图成为社交网站中的&ldquo;征途&rdquo;。以虚拟物品和&ldquo;魅力值&rdquo;两项增值服务为例：越来越多的用户在被陌生人加为好友时设置了&ldquo;赠送玫瑰花&rdquo;的门槛，而一朵虚拟的玫瑰花价值5个51币，每个51币的真实价格为0.5元，收到50朵玫瑰花的用户在51中并不罕见&mdash;&mdash;这说明51至少从一个类似的活跃用户身上赚取了125元。另一些用户需要靠提高&ldquo;51魅力值&rdquo;的办法吸引别人的关注，1000点&ldquo;魅力值&rdquo;的价格为25元人民币，而魅力值至少在10000点以上才有收效，它意味着51从一个用户身上赚取数百元的&ldquo;魅力钱&rdquo;并不是什么难事。这类似史玉柱网络《征途》，只要通过钱就能买到服务的做法会在多大程度上破坏社交网络的真正意义并引发&ldquo;泡沫&rdquo;，不能不令人关注。 　　打造正规军 　　51高速成长背后的种种争议和隐忧，其实最终指向一个根本的问题：51必须尽快从一个&ldquo;剑走偏锋&rdquo;的另类玩家，成为互联网业的正规军。它需要更强大的技术支持、运营体制和人才储备，还有至关重要的品牌声誉。 　　谈何容易。一家在3年内使用户突破1亿大关、员工人数从10余人扩张到300多人的创业公司，需要兼顾的事情太多了。通常的情况是：刚刚完成阶段性目标，新的门槛和瓶颈随即出现在眼前。 　　最令庞升东感同身受的是51的硬件资源：公司成立不过一年的时候，用户即突破1000万，向着5000万迈进，必须从既有的200台服务器迅速增容到1000台服务器。而第二年用户数继续向1亿大关挺进，1000台服务器必须尽快变成2000台才能勉强支持需求。即便如此，用户还是不免抱怨视频和音乐经常卡断，这显然是服务器资源跟不上所致。 　　在51管理层内部，围绕对硬件的投入，还曾导致相当激烈冲突。庞升东和技术背景的首席运营官王兴华等人坚持在硬件和带宽上不惜血本地花钱，一轮又一轮地购买昂贵的服务器和光存储设备，而传统行业出身的原51执行总裁杨冰则认为：作为一家创业公司，庞在服务器上的花钱如流水，不知何日才能获得回报，这是导致杨冰日后出走的重要原因。 　　&ldquo;因为这种事情，我被一些人批判，拿着风险投资的钱大手大脚&rdquo;，庞升东笑称。不过凭心而论，如果没有在硬件上的持续投入，51如何面对1亿多用户对带宽和存储的需求，恐怕很难被回答。 　　同样引起争议的，是51&ldquo;大手大脚&rdquo;的人才引进。对成熟的产品开发和技术人才，51经常不惜用重金和期权拉拢。据称，51对产品和技术人才开出的薪水和福利，一般高过腾讯同类职位的15%。对腾讯的人才，51会报销机票请他们从深圳到上海面谈加盟事宜，据称，腾讯员工一下飞机便会被专车接到酒店。目前，已有数十名原腾讯员工加盟了51。 　　同时，51也在2007年启动了校园招聘，和谷歌、腾讯、百度和阿里巴巴等主流互联网公司争夺潜在的产品和技术人才。前后两轮融资，51都给员工提高了薪水，并为大部分员工配置了期权。逢节假日，公司会替员工的父母购买礼物和年货，而作为福利的年度体检也同时涵盖了员工的家属。 　　一个经常出现的误读是：51的管理团队由&ldquo;草根&rdquo;构成。其实，除了1977年出生的创始人兼CEO庞升东和1982年出生的创始合伙人兼高级副总裁张剑福是不折不扣的&ldquo;草根&rdquo;，管理层的其他成员基本都具备在知名跨国和本土公司供职的经历：COO兼CTO王兴华20世纪80年代曾在中科院工作， 1993年&ldquo;下海&rdquo;开发人工智能拼音系统，赚得第一桶金，后来还参与创建了名噪一时的本土软件公司用友华表，具有技术开发和管理的丰富经验；副总裁姚永和与戴建清分别来自知名跨国公司和国内的网游公司；董事长助理黄绍麟来自台湾，曾任新浪网台湾网站总监和3G电信咨询公司管理层。&ldquo;我们管理层的平均年龄是 36岁，大家都是精英，只有个别人是草根。&rdquo;庞升东笑称。 　　这个团队推动着51向&ldquo;正规军&rdquo;演进。51刚刚成立的时候，所有产品人员都被称为&ldquo;策划&rdquo;，没有更明确的分工，直到2006年中期，才有了&ldquo;产品经理&rdquo;的头衔，并赋予了不同的分工。现在，即使是草根出身的庞升东本人，也更体会到管理的重要性：他每周都会把全体副总裁和中层经理聚集到会议室，&ldquo;集体学习&rdquo;管理学书籍。&ldquo;每一次开会大家都只看同一本书的同一章节，静默阅读，随时有心得就出来发言，然后大家讨论，之后再阅读，&rdquo;庞升东对本刊说，&ldquo;公司很可能在未来的2年扩展到1000人的规模，而我们现在显然还不具备管理1000人团队的能力。&rdquo; 　　除了硬件资源、人才储备和管理水平等因素外，制约着51未来发展更危险的因素：是其至今不佳的品牌声誉。51的产品设计和人际互动过于依靠&ldquo;异性相吸&rdquo;的朴素理念，甚至51公司内部也承认，他们一度默认了这种被称做&ldquo;泡与被泡&rdquo;的文化。在初期聚拢用户阶段，它不失为一种行之有效的手段；然而随着用户的几何级增长，这种&ldquo;文化&rdquo;的泛滥则带有危险的倾向。很难想象：一家频繁被人与<a href="http://www.pbdigg.net/index.php?tag=%C9%AB%C7%E9"><span style="text-decoration: underline"><font color="#2686cd">色情</font></span></a>和性交易联系在一起的网站，如何能获得资本市场的认可并成功上市？ 　　显然，51正试图解决这一问题：2007年，当意识到&ldquo;泡与被泡&rdquo;的文化已使51成为一些色情交易孳生的土壤后，51迅速屏蔽了在百度上的用户个人主页搜索引擎，从而规避了任何人通过百度的关键词搜索进入到这些非法主页的可能。继而，51建立了一套敏感词筛选的24小时监控机制，员工全天候地监控用户个人主页的非法信息、字符和图片。&ldquo;现在她们(色情交易者)在51上的生存空间已经很有限了。&rdquo;庞升东说。 　　但愿如此。</p>]]></description>
		</item>
		
			<item>
			<link>http://www.30design.com/30designblog/article.asp?id=266</link>
			<title><![CDATA[(转)心理学：气质类型测试→　胆汁质◆多血质◆黏液质◆抑郁质]]></title>
			<author>30design@163.com(【三石】)</author>
			<category><![CDATA[群龙汇聚]]></category>
			<pubDate>Mon,07 Dec 2009 17:01:23 +0800</pubDate>
			<guid>http://www.30design.com/30designblog/default.asp?id=266</guid>
		<description><![CDATA[<p>下面60道题，可以帮助你大致确定自己的气质类型，请根据自己的情况在&ldquo;很符合、比较符合、　介于符合与不符合之间、比较不符、完全不符合&rdquo;五个答案中选择一个适合自己的。很符合2分，比较符合1分，介于符合与不符合之间0分，比较不符合-1分，完全不符合-2分&nbsp;&nbsp; <br />
<br />
================================================================&nbsp; <br />
<br />
1、做事力求稳妥，一般不做无把握的事。&nbsp;&nbsp; <br />
2、遇到可气的事就怒不可遏，想把心里话全说出来才痛快。&nbsp;&nbsp; <br />
3、宁可一个人干事，不愿很多人在一起。&nbsp;&nbsp; <br />
4、到一个新环境很快就能适应。&nbsp;&nbsp; <br />
5、厌恶那些强烈的刺激，如尖叫、噪音、危险镜头。&nbsp;&nbsp; <br />
6、和人争吵时总是先发制人，喜欢挑衅。&nbsp;&nbsp; <br />
7、喜欢安静的环境。&nbsp;&nbsp; <br />
8、善于和人交往。&nbsp;&nbsp; <br />
9、羡慕那种善于克制自己感情的人。&nbsp;&nbsp; <br />
10、生活有规律，很少违反作息制度。&nbsp;&nbsp; <br />
11、在多数情况下情绪是乐观的。&nbsp;&nbsp; <br />
12、碰到陌生人觉得很拘束。&nbsp;&nbsp; <br />
13、遇到令人气愤的事，能很好地克制自我。&nbsp;&nbsp; <br />
14、做事总是有旺盛的精力。&nbsp;&nbsp; <br />
15、遇到问题总是举棋不定，优柔寡断。&nbsp;&nbsp; <br />
16、在人群中从不觉得过分拘束。&nbsp;&nbsp; <br />
17、情绪高昂时，觉得干什么都有趣；情绪低落时，又觉得什么都没意思。&nbsp;&nbsp; <br />
18、当注意力集中于一事物时，别的事很难使我分心。&nbsp;&nbsp; <br />
19、理解问题总比别人快。&nbsp;&nbsp; <br />
20、碰到危险情境，常有一种极度恐怖感。&nbsp;&nbsp; <br />
21、对学习、工作、事业怀有很高的热情。&nbsp;&nbsp; <br />
22、能够长时间做枯燥，单调的工作。&nbsp;&nbsp; <br />
23、符合兴趣的事情，干起来劲头十足，否则就不想干。&nbsp;&nbsp; <br />
24、一点小事就能引起情绪波动。&nbsp;&nbsp; <br />
25、讨厌做那种需要耐心、细致的工作。&nbsp;&nbsp; <br />
26、与人交往不卑不亢。&nbsp;&nbsp; <br />
27、喜欢参加热烈的活动。&nbsp;&nbsp; <br />
28、爱看感情细腻、描写人物内心活动的文学作品。&nbsp;&nbsp; <br />
29、工作学习时间长了，常感到厌倦。&nbsp;&nbsp; <br />
30、不喜欢长时间谈论一个问题，愿意实际动手干。&nbsp;&nbsp; <br />
31、宁愿侃侃而谈，不愿切切私语。&nbsp;&nbsp; <br />
32、别人总是说我闷闷不乐。&nbsp;&nbsp; <br />
33、理解问题常比别人慢些。&nbsp;&nbsp; <br />
34、疲倦时只要短暂的休息就能精神抖擞，重新投入工作。&nbsp;&nbsp; <br />
35、心理有话宁愿自己想，不愿说出来。&nbsp;&nbsp; <br />
36、认准一个目标就希望尽快实现，不达目的，誓不罢休。&nbsp;&nbsp; <br />
37、学习、工作一段时间后，常比别人更疲倦。&nbsp;&nbsp; <br />
38、做事有些莽撞，常常不考虑后果。&nbsp;&nbsp; <br />
39、老师讲授新知识时，总希望他讲得慢些，多重复几遍。&nbsp;&nbsp; <br />
40、能够很快地忘记那些不愉快的事情。&nbsp;&nbsp; <br />
41、做作业或完成一件工作总比别人花的时间多。&nbsp;&nbsp; <br />
42、喜欢运动量大的剧烈体育运动或参加各种文艺活动。&nbsp;&nbsp; <br />
43、不能很快地把注意力从一件事转移到另一件事上去。&nbsp;&nbsp; <br />
44、接受一个任务后，就希望能把它迅速解决。&nbsp;&nbsp; <br />
45、认为墨守成规比冒风险强些。&nbsp;&nbsp; <br />
46、能够同时注意几件事物。&nbsp;&nbsp; <br />
47、当我烦闷的时候，别人很难使我高兴起来。&nbsp;&nbsp; <br />
48、爱看情节起伏跌宕激动人心的小说。&nbsp;&nbsp; <br />
49、对工作抱认真严谨、始终一贯的态度。&nbsp;&nbsp; <br />
50、和周围人的关系总相处不好。&nbsp;&nbsp; <br />
51、喜欢复习学过的知识，重复做能熟练做的工作。&nbsp;&nbsp; <br />
52、希望做变化大、花样多的工作。&nbsp;&nbsp; <br />
53、小时候会背的诗歌，我似乎比别人记得清楚。&nbsp;&nbsp; <br />
54、别人说我&ldquo;出语伤人&rdquo;，可我并不觉得这样。&nbsp;&nbsp; <br />
55、在体育活动中，常因反应慢而落后。&nbsp;&nbsp; <br />
56、反应敏捷、头脑机智。&nbsp;&nbsp; <br />
57、喜欢有条理而不甚麻烦的工作。&nbsp;&nbsp; <br />
58、兴奋的事情常使我失眠。&nbsp;&nbsp; <br />
59、老师讲新概念，常常听不懂，但是弄懂了以后很难忘记。&nbsp;&nbsp; <br />
60、假如工作枯燥无味，马上就会情绪低落。&nbsp;&nbsp; <br />
记分：&nbsp;&nbsp; <br />
胆汁质型得分：&nbsp;2、6、9、14、17、21、27、31、36、38、42、48、50、54、58的得分之和。&nbsp;&nbsp; <br />
多血质型得分：&nbsp;4、8、11、16、19、23、25、29、34、40、44、46、52、56、60的得分之和。&nbsp;&nbsp; <br />
粘液质型得分：&nbsp;1、7、10、13、18、22、26、30、33、39、43、45、49、55、57的得分之和。&nbsp;&nbsp; <br />
抑郁质型得分：为3、5、12、15、20、24、28、32、35、37、41、47、51、53、59的得分之和。&nbsp;</p>
<p>-------------------------------------------------------------&nbsp;&nbsp; <br />
确定气质类型的标准：&nbsp;&nbsp; <br />
1、如果某类气质得分明显高出其他三种，均高出4分以上，则可定为该类气质。如果该类气质得分超过20分，则为典型；如果该类得分在10－20分，则为一般型。&nbsp;&nbsp; <br />
2、两种气质类型得分接近，其差异低于3分，而且又明显高于其他两种，高出4分以上，则可定为这两种气质的混合型3、三种气质得分均高于第四种，而且接近，则为三种气质的混合型，如多血&mdash;胆汁&mdash;粘液质混合型或粘液&mdash;多血&mdash;抑郁质混合型。&nbsp;&nbsp; <br />
<font color="#ff0000">胆汁质类型</font>特点：精力充沛、情绪发生快而强、言语动作急速而难于控制；热情、显得直爽或胆大、易怒、急躁等等。&nbsp;&nbsp; <br />
<font color="#ff0000">多血质类型</font>特点：活泼好动、敏感、情绪发生快而多变、注意和兴趣容易转移、思维言语动作敏捷、善于交际、亲切、有生气，但也往往表现出轻率、不真挚等。&nbsp;&nbsp; <br />
<font color="#ff0000">粘液质类型</font>特点：安静、沉稳、情绪发生慢而弱、言语动作和思维比较迟缓、注意稳定、显得庄重、坚忍，但也往往表现出执拗、淡漠。&nbsp;&nbsp; <br />
<font color="#ff0000">抑郁质类型</font>特点：柔弱易倦、情绪发生慢而强、体验深沉、言行迟缓无力、胆小、忸怩，善于觉察到别人不易觉察到的细小事物，容易变得孤僻。&nbsp;</p>]]></description>
		</item>
		
			<item>
			<link>http://www.30design.com/30designblog/article.asp?id=265</link>
			<title><![CDATA[转载：UED你需要的是什么样的结果?]]></title>
			<author>30design@163.com(【三石】)</author>
			<category><![CDATA[群龙汇聚]]></category>
			<pubDate>Mon,07 Dec 2009 16:42:22 +0800</pubDate>
			<guid>http://www.30design.com/30designblog/default.asp?id=265</guid>
		<description><![CDATA[<p>这个话题很敏感，写这编的时候一半是热血沸腾，一半是冷汗直流。点公开还是隐藏时犹豫了将近两个小时。最近被人评价为越来越奋青，那就着这个评价大胆的奋青一把。本着有位同学说的要死鸟朝上写出来等待讨伐。</p>
<p>大概是04年吧，全中国开始热炒Web2.0，跟随着这个三个英文字母加带小数点数字的名词雀起，所谓的用户体验也鸡犬升天。交互设计师这个职位成为一个互联网界带着神秘且高贵的职位。一个个的设计师及产品经理开始带着改变人们&ldquo;生命&rdquo;的使命，以救世主方式出现，高喊着&ldquo;以用户为中心的设计&rdquo;成立起了中国互联网公司的一个个UED(用户体验设计)。<br />
看上帝笑了！看中国互联网的UED，看中国的交互设计师们，他们不知道怎么去以用户为中心的设计，只知道这是个美妙且高尚的词汇。拿着上帝那要来的上方宝剑耀武扬威。可中国的互联网产品却始终保持着这群人最敏感及最容易跳起来的以商业结果为中心，当这群人们拿着这把剑去和互联网公司的老板说话的时候，才发现原来握在手里的是一只咸鱼。<br />
于是UED们开始想着如何脱颖而出，变着法的去找用户为中心的设计是有商业结果的。于是UED们开始想我们不能老是一直被动着响应产品设计（简称PD）们的需求，100%的精力都放到他们的&ldquo;商业目标&rdquo;驱动的项目上，试着以用户为中心的设计思想去做产品。于是产品就铺天盖地的来了，一个个的产品似乎创意都不错，可见鬼的是没有一个能拿到老板们想要的money。于是有人想通了，原来我们一直理解错了。老板嘛，非要有money才信服以用户为中心的设计，多么的矛盾啊。讽刺的开始，讽刺的变化。<br />
看看UED们怎么有这个过程的，故事又开始了。想听下去吗？不想听我也说！<br />
&ldquo;某某设计师觉得XX项目有很大的问题，于是做了一个分析想进行改进，结果发现这个产品上的模块居然是不同产品线的，分别不同的PD负责。为了推动我的设计，需要找好几方进行沟通。根本无法估计这样改动会造成什么样的后果，可能直接会损失几亿哪，你怕不怕？&rdquo;<br />
有人说：&ldquo;你觉得那个东西很难用？那就对了。我们不是不想改啊？方案都出了好几版了，同样有上面的问题，可是咱没资源呀，沟通资源？你知道要牵涉多少部门吗？改？！算了吧，放着吧同志，于是就一直保持&lsquo;难用&rsquo;。&rdquo;<br />
还有人说：&ldquo;哎呀，干嘛这么麻烦，放左边与放右边有什么区别，花2个小时能给我们赚多少钱呀？啊？不能赚钱？败家玩意，一边凉快去。&rdquo;<br />
&ldquo;另外一个同学稍稍幸运点，他比较能折腾自己做产品，一直往上沟通直接找负责人。累的吐血的写出了自认为完美的MRD与PRD，所有人都信服的竖起大拇指，这个创意太棒了。不过？这个东西不如和某产品结合的来做吧。直接交给负责这个产品的PD好了。欲哭无泪的结果。操他妈的结果！那我算什么，可怜的母鸡？下完蛋你们拿去做&lsquo;荷包蛋&rsquo;吗？我们不是不通情理，不是不懂是非。就是通情理才认为你们都能讲道理，是懂是非才不会奋起拍桌子骂街。问问他们原因吧，没关系我们再通情理点。答复是这个创意不知道能不能带来商业价值，PD们背负着沉重的考核压力，俗称KPI。你有吗，要做也行！你背KPI去做PD吧，别做设计师了！操！没错我没有！操！没错我不是PD！操！那这个创意不要做了！！故事又开始了，想听下去吗？不想听！我照样说，记得香山饭店吗？认识贝聿铭吗？当中方改了香山饭店的设计后，贝老头拍桌子骂街说：以后不要让我给中国设计！&rdquo;于是有人分析，所有的原因都可以归结为：&ldquo;资源、组织架构、沟通&rdquo;问题！原来每个设计师都有悲哀。贝老头的事也是中国设计界的悲哀。或许在这里他们不尊重设计这两个字吧？反问难道互联网的交互设计最终的出路真的是成为PD吗?<br />
看看原来是这样：设计方案存在潜在的风险，投入大产出慢，没有直接的商业价值； 而且开发资源紧张，无法投入，多方沟通不能顺畅推动，七砍八砍手脚全没了，这个创意就变成了尸体标本，因为没有手脚。做是可能做出来了，可是活体变成了标本。难道继续再发起体验设计改版从头再来一遍吗？<br />
看出来了吗？互联网的UED们，你们想要以上什么样的结果？都不要？哈哈那拆到产品组去吧，每个产品下面放些美术资源，放几个交互设计师，听产品经理（PD）的！</p>
<p>&nbsp;所以中国现在的UED们结局有以下这么几种：<br />
&nbsp;&nbsp;&nbsp;&nbsp; 1、名为UED实为UI，完全听PD PM的。为他们的KPI奋斗。你的工作是刷墙和漆匠<br />
&nbsp;&nbsp;&nbsp;&nbsp; 2、改名叫设计中心，像特种部队只出规范和方案，形同虚设<br />
&nbsp;&nbsp;&nbsp;&nbsp; 3、UED与PD合并成为产品设计部，最终发现走的是纯PD路线与第1种差不多<br />
&nbsp;&nbsp;&nbsp;&nbsp; 4、拆到产品组<br />
&nbsp;&nbsp;&nbsp;&nbsp; 6、转职去PD，放弃设计师的理想<br />
&nbsp;&nbsp;&nbsp;&nbsp; 5、痛苦探索中&hellip;&hellip;</p>]]></description>
		</item>
		
			<item>
			<link>http://www.30design.com/30designblog/article.asp?id=264</link>
			<title><![CDATA[如何让你的产品更具响应性]]></title>
			<author>30design@163.com(【三石】)</author>
			<category><![CDATA[运营&amp;策划]]></category>
			<pubDate>Wed,25 Nov 2009 17:10:42 +0800</pubDate>
			<guid>http://www.30design.com/30designblog/default.asp?id=264</guid>
		<description><![CDATA[<p>如何让你的产品更具响应性，在讨论之前我们先看两个问题？<br />
　　既然人脑是世界上最智能的东西，为啥我们还需要电脑？<br />
　　为啥如今<a href="http://www.xiuze.net/show.php?tid=2475" target="_blank"><font color="#2f5fa1">web技术发展</font></a>理论上已经能够实现所有的客户端功能，为什么我们还需要客户端？<br />
　　原因都很简单，因为后者比前者更快，响应更迅速。<br />
　　什么是响应性？<br />
　　过去的几十年当中累积的大量证据表明，响应性（即软件应用程序跟上用户、不让他们等待的能力）是确定用户满意度的最重要因素。相比安全性，稳定性，易用性，响应性无疑是最容易最方便被用户所感知的。在使用计算机或者手持设备的时候，用户对于等待的憎恶比对其他任何事情的喜爱程度都要深。<br />
　　然而，用户对于响应性的感知其实包括两个因素的：<br />
　　速度：指的是机器自身的计算能力，机器性能越强，速度越快。<br />
　　流畅感：使用时系统的反馈能否满足用户的时间支配需求。<br />
　　如何提高速度？<br />
　　<a href="http://www.xiuze.net/show.php?tid=2475" target="_blank"><font color="#2f5fa1">Google</font></a>是一间非常注意速度的公司，他们对自身产品的10条要求中，就包括Fast，在他们的用户体验规范中，是这么写道的：<br />
　　Nothing is more valuable than people&rsquo;s time.<br />
　　Speed is a boon to users. It is also a competitive advantage that Google doesn&rsquo;t sacrifice without good reason.<br />
　　没有什么比用户的时间更珍贵了，高速是对用户的礼物。他也是我们的竞争优势，除非有很好的理由，google绝不牺牲速度。<br />
　　那么如何提高应用的速度呢，方法其实非常的简单，主要为以下三点：<br />
　　让你的应用更小更轻便<br />
　　在一开始，你就要放弃你对于技术与功能的崇拜，因为那只能够满足你内心的小小的骄傲感而已。用户不会关心你是否采用了Ajax，是否能够让其同时做8个任务，他们只关心多久能完成任务。<br />
　　而这样的例子在一些注重用户体验的产品上比比皆是:Google把首页精简到光秃秃；IE6下Gmail的很多高级功能被取消了（这些功能并不是无法实现）；Chromium OS启动只需要7秒钟，我们的网速变得越来越快，有些产品的安装包却越来越小。<br />
　　延迟非关键性的任务<br />
　　我们把一些非时间关键的任务降低其优先级，分配后后台进程去做，把更多的资源用于响应用户，把那些漫长的，无需马上反馈的任务放在一边。如杀毒软件的文件监控，QQ文件中转站上传窗口支持最小化。<br />
　　提供更好的硬件设备<br />
　　更好的设备，无疑能从最根本上提升应用的速度，Google就畅享拥有1000万台服务器，为其搜索提速；网易抢得魔兽世界代理权，丁磊还为魔兽买了全新服务器。<br />
　　如何提高用户使用的流畅感？<br />
　　用户的流畅感，主要来源于系统的反馈。即使在软件运行速度很慢的情况下，仍然可以提供给用户流畅感，就比如即使你进入一家几乎爆满的餐厅，即使上菜需要等很久，但你也可很容易从服务员那里得知什么时候能上菜。<br />
　　在相同配置的一台电脑上，统计时windows7速度比xp慢，但感觉起来，他又比xp要快。原因是什么？windows7的反馈更好了。<br />
　　windows7与Mac OS X都是伟大的系统，他们如何做到更好的反馈呢，也许他们的一些设计原则能够带给我们一些启发。<br />
　　让动画的移动变得流畅清晰<br />
　　如果说在使用XP时你看到的是一帧一帧的画面，那么使用windows7你看到的就是一部流畅的电影。<br />
　　windows独特的<a href="http://www.xiuze.net/show.php?tid=2475" target="_blank"><font color="#2f5fa1">aero</font></a>效果提供轻量级的视觉体验，能够让用户更专注其操作的具体。同时提供类似Mac OS动态缓冲式的窗口切换动画，让窗口的切换不再那些机械突兀，给用户流动的感觉。在这里的2秒钟，用户感觉只有1秒钟。<br />
　　同样的设计也出现在iPhone上，iPhone的软件启动，有效的减低用户的等待感。已有人说了，就不细说。<br />
　　N秒原则<br />
　　如果一项任务时间超过2秒就必须提供反馈。<br />
　　如果一项任务时间超过10秒必须提供能够取消的反馈。<br />
　　这样的反馈有效的提高了用户对系统的了解，即使有可能等待很久，但他也会感觉较为流畅，他甚至可以利用起这段时间做点其他的事情，降低他对等待的憎恶感。<br />
　　有效沟通节省不必要的工作<br />
　　在很多时候，用户很多的请求是试探性的，一旦他发现这个命令对其毫无意义时就会马上取消它。如：<br />
　　我想要开通QQ黄钻用户！<br />
　　你确定吗？开通黄钻用户每月将从你手机话费中扣除10元？<br />
　　啊？不是免费的啊，那我不开通了。<br />
　　从以上的范例能得知，有效的沟通避免了用户等待错误命令的执行时间，从另一方面提供了操作的流畅感，并且降低了出错率。<br />
　　为什么要提高响应性，它在设计中的比重到底有多少？<br />
　　似乎很多人都无法放下心中对技术的贪婪以及对外观的崇拜，响应性往往被其所牺牲，然而，看看我们的用户，他们对速度的的追求，是多么的强烈啊！<br />
　　我们喜欢新窗口看内容，为什么？因为中国网络慢，如果同时开多个窗口，这样我就能在看一篇文章的同时加载另外一篇文章，提高速度。<br />
　　我们喜欢用迅雷。迅雷曾推出过英文版Gigaget，可事实上外国人对此并不感冒：高速的网络让他们不需依赖下载加速工具，但迅雷在中国确凭借其P2P技术，成为中国网民下载工具的首选。<br />
　　iPhone中程序使用内存超过20M，就随时可能被系统强制终止。苹果宁愿禁止所有第三方程序的后台功能，也不愿意冒风险损害敏捷的响应。由此，iPhone成为这个世界上最快，最被尊崇的手机。（来自iFanr）<br />
　　让我们回到最初的两个问题，其实答案已经呼之欲出，在不久的将来，我们可以预见的是，高响应性将成为所有产品的一致追求，而且这也将成为最有效的竞争优势，互联网时代，以快制胜。<br />
　　最后引用小马哥的一段话结尾：<br />
　　要做大，你首先要考虑的就是如何让人家想到也追不上。这么多年在IDC(互联网数据中心)上的积累我们不能浪费，高速上传、城域网中转站，支持高速地上传；很快可能又会发现新的问题，如果不是邮件，在IM(即时通讯软件)上又该怎么实现。我们的目的是要让用户感到超快、飞快，让用户体验非常好，这些都需要大量技术和后台来配合。<br />
&nbsp;</p>]]></description>
		</item>
		
			<item>
			<link>http://www.30design.com/30designblog/article.asp?id=263</link>
			<title><![CDATA[关于VIP用户研究与产品设计]]></title>
			<author>30design@163.com(【三石】)</author>
			<category><![CDATA[运营&amp;策划]]></category>
			<pubDate>Wed,25 Nov 2009 16:06:01 +0800</pubDate>
			<guid>http://www.30design.com/30designblog/default.asp?id=263</guid>
		<description><![CDATA[<p>一、 VIP服务设计的中心思想</p>
<p>派恩二世，吉尔摩在《体验经济》中提出了体验经济时代产品和服务的划分，从这个角度来看，我们可以将用户全集合理解为正在使用和可能使用产品的用户，VIP用户则为使用高级服务的用户。</p>
<p>我们由此可以产生一个假设，如果VIP用户存在，则意味着产品服务可以进行分级，而且存在一些高级用户愿意为了某些特殊服务（主要是定制服务）付出更高的代价，这个在各个行业都是普遍的，比如高级成衣制作，银行贵宾卡服务，VIP游戏玩家等等。</p>
<p>那么我们可以将核心问题转移到：为什么那些高级用户愿意为特殊服务付出更高的代价。对于这个问题, 尼尔.雷克汉姆的提出：&ldquo;没有需求，没有销售。&rdquo;用户的需求又由用户使用该服务获得的价值而决定。我们可以归纳为一个公式：</p>
<p>&ldquo;用户购买高级服务的期望=用户使用高级服务获得价值-用户付出的价值&rdquo;</p>
<p>当然很多时候这个价值标准是很难量化的，我们通常需要研究各种数据来确定，比如定价提高后用户使用率的曲线图也是一种很好方法。作为商业机构，我们需要根据多维度来进行观察，我们可以使用以下公式来预测VIP业务商业价值</p>
<p>&ldquo;定价&times;用户使用率&times;alpha = VIP业务商业价值&rdquo;</p>
<p>所以，提高定价和提高用户使用率是获得VIP业务商业价值的两个主要途径，但是定价与用户使用率总是成反比例关系，而这个问题主要通过产品设计来解决，即通过提高VIP服务用户可获得价值来提升定价和用户使用率，而不是向相反的方向来延伸。</p>
<p>二、 如何进行VIP用户角色模型构建？</p>
<p>VIP用户绝非有钱的用户，而是愿意为高级服务买单的用户。<br />
VIP用户研究和普通的用户研究有明显的差异，VIP用户研究需要基于产品概念假设进行研究。比如当大众普遍免费邮箱的标准是1G时，我们可以假设VIP用户可能使用海量邮箱、个性化邮箱，基于此进行用户研究，了解该项VIP业务的市场规模以及高级用户愿意为之付出的价格。即VIP用户筛选模型为：</p>
<p><img title="3" alt="3" src="http://www.xiuze.net/attachments/091016/f271878becc621aa87cd9ca4b8775ae6.jpg" width="300" height="76" jquery1259135234734="2" /></p>
<p>一般，用户角色形成需要根据大致的目标用户特征进行市场调查、访谈（比如焦点小组）研究，最终可以得到一些用户情感特征、行为特征以及用户期望，我们可以将这些归纳成为用户角色：</p>
<p><img title="4" alt="4" src="http://www.xiuze.net/attachments/091016/74c89303f241854bcc3293784dc4f32e.jpg" width="300" height="180" jquery1259135234734="3" /></p>
<p>最终，可以将用户归纳如下：</p>
<p><img title="5" alt="5" src="http://www.xiuze.net/attachments/091016/53d996a0678b027520e5b69c40f666c5.jpg" width="300" height="196" jquery1259135234734="4" /></p>
<p>有很多人提出模型过于标准化可能导致功能覆盖面不全以及概念提取不完全的问题，事实上如果后期的用户研究可以基本解决这些问题，而针对persona进行设计避免了产品设计中容易焦点分散的问题，能够有效的提升产品设计的质量。</p>
<p>三、 如何进行VIP业务规划</p>
<p>VIP业务设计和普通设计的功能业务不同，VIP业务设计需要考虑更多的市场因素和产业发展因素。比如当Google开始1G免费邮箱时，Yahoo的邮箱业务（尤其是VIP业务）自然会受到市场冲击，所以Yahoo不得不进行整体的邮箱业务升级，提出海量邮箱概念，事实证明这些产品升级活动都是有效的，尤其是升级后的VIP业务在其后给Yahoo带来了大量的利润。</p>
<p>VIP业务设计可以是对现有服务的扩展和升级，也可以是新功能的开发等等。VIP业务设计的原则是提升用户的使用价值，尤其是提升相对价值，比如增值服务等。所以当我们开始VIP业务设计时，首先应该忘掉VIP概念，而是在概念设计完成后，再通过竞争性分析提出整个业务体系的VIP部分。</p>
<p>通常，我们可以通过业务状态研究（Current Product Status）进行分析，从而进行业务规划。</p>
<p><img title="1" alt="1" src="http://www.xiuze.net/attachments/091016/7c10345582a603043c3e0b3d021f9c8d.jpg" width="300" height="161" jquery1259135234734="5" /></p>
<p>如图所示，我们可以明显地看到，业务状态研究得出的VIP业务的设计区域，（当然用户付出的价值标尺不一定是钱），我们可以通过业务状态研究得到各个业务的价值对比，从而得到产品和服务的差异化数据。此外，我们也可以用业务状态研究方法来对其它企业的相似产品线的用户体验进行桌面研究。</p>
<p><img title="2" alt="2" src="http://www.xiuze.net/attachments/091016/c02f0b9cba2ed25daea5fd982cea01d8.jpg" width="300" height="167" jquery1259135234734="6" /></p>
<p>VIP业务规划的重点在于：基于基础业务设计，分析竞争对手以及用户可获得的相对价值，估计VIP增值业务可能的范围，从而进行VIP业务规划。</p>
<p>四、 从规划到立项</p>
<p>从规划到立项有几个关键因素需要进行深入的研究：市场容量分析、盈利性研究、VIP业务对其它业务的影响（产品整合度研究）、成本研究、以及内部提供的技术准备方案。</p>
<p> 市场潜力和盈利性潜力估计<br />
我们首先要调查几个因素（当然，如果有市场部门帮助你的麻烦会少很多）：<br />
1. 业务购买者和使用者确定（目标用户）<br />
2. 购买者和使用者数目<br />
3. 估计购买率和使用率<br />
4. 竞争者市场份额</p>
<p>我们可以得到公式：<br />
&ldquo;市场潜力=目标用户数目&times;购买率&times;目前的市场份额（如果是新产品则该项为1）&rdquo;<br />
例如：假设目标对象是白领用户（约1000万人），购买率为4%，目前的市场份额为50%，那么我们可以估计市场潜力为1000万&times;4%&times;50%，约为20万。</p>
<p>由此可得<br />
&ldquo;盈利性潜力=市场潜力&times;每个产品或者服务的利润&rdquo;</p>
<p> VIP业务对其它业务的影响（产品整合度研究）</p>
<p>并不是所有的VIP业务都可能促进其它业务的，VIP业务同样有可能对其它业务产生负面影响。通常我们需要评价一个新业务对产品线带来的综合影响，如果该业务可以极大的促进普通业务发展，那么即使该业务盈利特征不明显，也对产品线完整度有重要影响。</p>
<p> 开发成本与内部技术准备分析</p>
<p>产品经理的首要责任就是通过产生超过可变成本的利润来弥补属于他们的产品的固定成本。一般情况下，成本考虑需要在公司内部收集大量的数据，主要包括以下因素：<br />
1. 可变成本：人力、监督、社会保障、销售人员佣金、客服、原材料成本（软件和互联网企业的比如源码成本等）、管理成本；<br />
2. 固定成本：例如服务器，软件，工厂厂房等等可用于长期生产使用的成本；<br />
3. 间接成本：比如行政管理等成本。<br />
这些成本共同形成成本报告，同时也有助于项目风险评估。</p>
<p>五、 从立项到设计</p>
<p>当我们心中有大概的用户模型，大致的VIP业务规划时，我们已经具备了基本的设计条件了。从规划到设计的过程主要包括了几大块内容：业务立项、概念设计、用户研究、交互设计、原型测试、原型交付。主要我们可以参考以下流程图。</p>
<p><img title="12e4baa7e59381e7aea1e79086e58a9ee6b395" alt="12e4baa7e59381e7aea1e79086e58a9ee6b395" src="http://www.xiuze.net/attachments/091016/fa5b0763a714ca7c7af3bb937f7b56bb.jpg" width="359" height="1024" jquery1259135234734="7" /></p>]]></description>
		</item>
		
			<item>
			<link>http://www.30design.com/30designblog/article.asp?id=262</link>
			<title><![CDATA[关于用户体验的一些有感悟的段落]]></title>
			<author>30design@163.com(【三石】)</author>
			<category><![CDATA[群龙汇聚]]></category>
			<pubDate>Wed,25 Nov 2009 15:57:38 +0800</pubDate>
			<guid>http://www.30design.com/30designblog/default.asp?id=262</guid>
		<description><![CDATA[<p>A方面的专家的专家并不意味着B方面的专家。</p>
<p>&nbsp;</p>
<p>如果要问&ldquo;<strong>用户体验是个什么东西</strong>&rdquo;，每个人的答案都不一样：有些人会给你搜索引擎上的结论中的文字；有些人会搬出一堆用户体验方面的书籍给你讲解；有些人会告诉你眼动仪、焦点小组、访谈、卡片分类；而我会告诉你&mdash;&mdash;<strong>用户体验是一面镜子</strong>。</p>
<p><strong>士为知己者死，女为悦己者容</strong>。每个女人除了要有满满当当的衣柜，还必须有一面镜子。我们试想，在用户体验这个词 在国内流行之前，中国的网络（软件）产品有镜子么？它们或者浓妆艳抹，或者露着&ldquo;一巴掌宽的护心毛&rdquo;，或者干脆赤条条的奔跑；那个时代很多网络（软件）公 司除了<a href="http://www.xiuze.net/show.php?tid=217"><font color="#2f5fa1">程序开发人员</font></a>，其他的全靠拍脑袋，甚至连&ldquo;撒泡尿照照&rdquo;的想法都没有。</p>
<p>用户体验是一种指导和思维方法，让网络（软件）产品有了用户尺度。每个行业有自己的特质，自成体系，很难把用户体验作为一个行业，但网络（软件）设计行业需要用户体验。</p>
<p>&nbsp;</p>
<h3>宁养贼子不生痴儿</h3>
<p><strong>&ldquo;有&rdquo;比&ldquo;好&rdquo;更迫切、更重要</strong>。所有的万维网开发者都熟悉Html，而他们有多少人知道和了解SGML？<strong>普及</strong>，是一个老生常谈的话题；<span>系统钻研</span>可能是顶端，但<span>土法上马</span>未必是坏选择，那些流行的（盈利的）网络产品，有多少是经过焦点小组、卡片分类、眼动仪一步一 步从原型到成品的？不信你看看国内一线的那些门户网站吧。拿来主义是个好东西，这是商业范畴，先做到&ldquo;有&rdquo;后做到&ldquo;好&rdquo;，未尝不可。</p>
<p>在国内网络圈，研究用户体验的过程中存在不和谐的声音：<span>懵懂的人以用户体验为噱头；混高薪的人以用户体验为救命稻草；拆旧改新的人以用户体验为画皮；厨师以用户体验为香辛料爆炒&hellip;&hellip;</span>可无论如何，这都是副产品，是打开窗户换空气时混进来的苍蝇。</p>
<p>所谓&ldquo;用户体验&rdquo;是方法还是理论，这并不重要；<span>我们这个国家不缺理论家，只缺实干者</span>；只要尊重用户、实事求是的设计观念得以普及，那用户体验的火热就是一件好事；<strong>先树立一面镜子，看清楚自己，然后再去整理卫生死角</strong>。</p>
<p>在此要特别指出&mdash;&mdash;&ldquo;尊重用户并非妥协用户&rdquo;，用户的意见未必都需要采纳，总能看到一些设计人员拿出调查数据说明问题，如果用户总是正确的，那还要设计人员干吗？干脆投票解决问题算了。冥思&ldquo;<span>用户到底需要什么？</span>&rdquo;之前，先要看看自己有什么；那些用户想要的，你未必有；看看自己手里有什么，优化它，让用户接受它，这是符合国内实际情况的做法。</p>
<p>一直强调&ldquo;用户体验&rdquo;是一种思维方法，既然是方法，就会有结果；只要结果是对的，何必在乎黑猫白猫？除非有获得更好结果的方法，且新方法的成本不高。</p>
<p>它的流行是客观存在，总有道理，只要可控，尽管让它贼子，让它流行，不免被厨师扔进锅里，总比冰箱里的臭肉一块强得多。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>知道、了解、理解、精通、钻研是一个层进关系</strong></p>]]></description>
		</item>
		
</channel>
</rss>
