<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Alipay UED</title>
	<atom:link href="http://ued.alipay.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://ued.alipay.com</link>
	<description>Simple is power</description>
	<lastBuildDate>Mon, 30 Aug 2010 05:29:21 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>你说的是真的吗？ ──如何保证访谈收集信息的真实性</title>
		<link>http://ued.alipay.com/2010/08/you-say-is-true-how-to-ensure-the-authenticity-of-interviews-to-gather-information/</link>
		<comments>http://ued.alipay.com/2010/08/you-say-is-true-how-to-ensure-the-authenticity-of-interviews-to-gather-information/#comments</comments>
		<pubDate>Mon, 30 Aug 2010 05:29:09 +0000</pubDate>
		<dc:creator>瑶芝</dc:creator>
				<category><![CDATA[用户研究]]></category>
		<category><![CDATA[访谈技巧]]></category>

		<guid isPermaLink="false">http://ued.alipay.com/?p=1677</guid>
		<description><![CDATA[一、访谈对象撒谎是有特别原因的。
二、穿过谎言到达真相是有小技巧的。
三、有些谎言是可以忽略跳过的。
最后说说要不要揭穿访谈对象的谎言。
希望在这个“全民参与用户研究”的时代，大家都能通过访谈拿到自己真正想要的真实信息，希望访谈双方能有更舒服的过程体验。
]]></description>
			<content:encoded><![CDATA[<p>Ella老师说我是个不会说谎的人，玩杀人游戏时总是用很多废话掩饰自己的谎话，神情也明显不对。我很不服气──长这么大，难道连个小谎都说不好么？</p>
<p>既然人都会或多或少地说或大或小的慌，在访谈时，如何保证所收集的信息是真实的呢？搜索了一下发现相关理论也不少，结合实践，总结成以下几点，供大家批评讨论。</p>
<p><span id="more-1677"></span></p>
<p>一、访谈对象撒谎是有特别原因的。</p>
<p>1、心理上的距离感。<br />
“我跟你不熟，凭什么告诉你全部真相呢？”<br />
“这环境让我感到紧张，所以无意识地说了一些假话……”</p>
<p>2、好感或反感。<br />
“这个产品体验好不好？”<br />
“我觉得你对我的态度蛮好的，所以我说，挺好的（其实我没用过这个产品耶）。”<br />
“我不太喜欢你额，而且我赶时间，所以我说，我根本都没用过这个产品（其实用过）。”</p>
<p>3、问题太敏感，或答案涉及价值判断。<br />
“有几张银行卡？这事儿是我的隐私，我就随便说个数给你吧。”<br />
“填写的信息是不是真的？我怎么会不诚信呢，都是真的呀。”</p>
<p>4、问题本身有预设。<br />
”你是不是觉得网上购物安全最重要？”<br />
“对对对（其实可能有更在乎的，比如价格）。”</p>
<p>5、心理防御机制。<br />
“我认为那个吃不到的葡萄很酸，我手中这个柠檬吃起来好甜噢。”<br />
“我都这么大年纪了，如果告诉你我还不会用这个功能，会不会太丢人了？我告诉你我其实很早就会用了。”</p>
<p>6、真的是回忆不起来了，或者习惯性地夸大真相。<br />
“人家不是故意说谎啦。”</p>
<p>7、……</p>
<p>二、穿过谎言到达真相是有小技巧的。</p>
<p>1、营造轻松自在的氛围。</p>
<p>首先，要让访谈对象保持控制感；比如，告诉他今天访谈的目的、主题、大致过程、时长、在场其他人（如果有的话）的姓名，介绍饮水机、杂志报刊和洗手间的位置等等。</p>
<p>其次，在正式访谈前，根据访谈对象的特点，在他可能感兴趣的领域，挑选话题闲聊几句，自然过渡到访谈主题；比如，访谈对象是还没尝试过亲自网上付款的女大学生，在等待时津津有味地看淘宝天下杂志中的彩妆专题文章，访谈一开始就可从这件事切入：<br />
“这本杂志以前看过吗”<br />
“没有，是第一次看”<br />
“我看你对这些彩妆比较感兴趣，平时自己也会买彩妆吗？”<br />
“是的”<br />
“一般会在哪里买呢”<br />
“以前在商场买得比较多，近一年有时也让我的朋友在淘宝上帮我买……”<br />
像这样可以自然引入网购、网上支付相关的主题。</p>
<p>再次，访谈员自己也要保持放松。着装不必过于正式，坐姿和访谈者正好围成约90度角为宜（面对面坐更像谈判，有紧张对立感；并排坐着很难有目光交流，只适合更亲密的关系），上身微微前倾表示关注（过于前倾可能暗示有攻击倾向，过于靠后暗示过于放松、置身事外之意），语速保持适中（语速过快往往带来紧张感），面带微笑，并随着访谈对象的讲述，做出相应表情和“嗯”“是吗”等语气词反应，保持倾听姿态。</p>
<p>2、非预设的立场。</p>
<p>如果访谈员在访谈前就强烈地倾向于两个设计方案A、B中的A方案，可能会在访谈过程中无意识地引导访谈对象发表对方案A更有利的观点。<br />
因此，访谈员需要保持非预设、非利益相关的立场，甚至需要事先向访谈对象说明自己的立场。访谈中要对用户的言论保持开放的、非价值判断的态度，谨防对用户的答案做明显的正向、负向反应。作为对主题领域较为熟悉的访谈员，对访谈对象认知、操作上的明显错误，不要急于纠正，否则可能会使其产生弱势感，自我掩饰的倾向会增强。</p>
<p>3、刨根问底。</p>
<p>访谈时出现的谎话，多数还是缺乏充分准备的，因此当访谈员层层递进、刨根问底时，访谈对象就很难“圆谎”了。比如：<br />
“我很早就接触网上购物了，易趣、贝宝我以前也常用的”<br />
“那大约是哪一年的事情呢”<br />
“……好像是2000年吧，记不清了”<br />
“当时买了什么东西还记得吗”<br />
“……时间太久了，想不起来了”<br />
“在易趣买东西大致是怎样一个过程啊？和在淘宝买一样吗？”<br />
“一样吧，差不多”</p>
<p>至此，“常用易趣、贝宝”要打上一个大大的问号了，是谎言的嫌疑较大。</p>
<p>4、多重验证。</p>
<p>一个人一辈子说一次谎话并不难，难的是多次在不同时间对同一件事情说内容高度统一的谎话。<br />
当发现疑似谎话时，当时可以不动声色，然后隔一小段时间，尤其是当出现明显的前后矛盾时，再问一次前面的问题，看访谈对象怎么说。比如：<br />
“您有担心过安全方面的问题吗”<br />
“完全没有担心”<br />
“是吗”<br />
“是啊，几十块钱的东西，没什么好担心的”<br />
……<br />
“您刚刚说以前在其他网站有过被骗的经历，那这次买这个几十块钱的东西，最终结果怎么样？”<br />
“这次还好”<br />
“过程中有没有不顺利的地方？”<br />
“还行吧，就是买之前反复和卖家确认”<br />
“确认什么呢？”<br />
“看这个卖家是不是靠谱啊”<br />
“您担心什么呢？”<br />
“担心再次被骗啊”</p>
<p>至此，说明访谈对象还是担心安全问题的。</p>
<p>5、察言观色识破谎言。</p>
<p>嘴巴说谎的同时，身体语言可能在“说实话”。动作、表情的不协调、回避眼神交汇、结结巴巴、出汗、语气的突然改变等等，可以作为识别谎言的的佐证。 这个小技巧更适用于像我这样不太会撒谎的撒谎者。</p>
<p>6、……</p>
<p>三、有些谎言是可以忽略跳过的。</p>
<p>以下判断标准供参考：</p>
<p>1、是不是和访谈的主要关注点直接相关。<br />
如果访谈主题是安全感，那么关于迟到的原因，说个小谎又有什么关系呢？</p>
<p>2、是不是有其他渠道了解真相。<br />
如果事先已经确认了访谈对象是未满18岁，那么他关于年龄的谎言可以忽略。</p>
<p>3、问题本身是不是触到了用户的忌讳。<br />
用户认为关于密码设置习惯的问题侵犯了他的隐私，而说了谎，这是可以理解的，再追问下去有难度，可以跳过该问题。</p>
<p>*************************************</p>
<p>最后说说要不要揭穿访谈对象的谎言。<br />
我的观点是可以直接说明自己的疑惑，但不要下定论。有两个原因：<br />
一是我们可能真的判断错误，事情本身就是存在想象之外的可能性；比如“您说您没有绑定手机，但我们通过手机联系到您的，说明您绑定了呀”“噢，我老公有时也用我的账户的，可能是他绑定的”。<br />
二是访谈毕竟不是审判，义正词严的质问可能不利于访谈双方信任关系的建立；随着信任的加深，访谈对象越来越放松，会自然吐露更多心声的。</p>
<p>说了这么多，当然不是说被访谈的人都是“大话王”，而是希望在这个“全民参与用户研究”的时代，大家都能通过访谈拿到自己真正想要的真实信息，希望访谈双方能有更舒服的过程体验。相信读完全文的你，有更多更好的办法和建议，欢迎交流！</p>
]]></content:encoded>
			<wfw:commentRss>http://ued.alipay.com/2010/08/you-say-is-true-how-to-ensure-the-authenticity-of-interviews-to-gather-information/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>打败 IE 的葵花宝典：CSS Bug Table</title>
		<link>http://ued.alipay.com/2010/07/ie-beat-the-holy-canon-css-bug-table/</link>
		<comments>http://ued.alipay.com/2010/07/ie-beat-the-holy-canon-css-bug-table/#comments</comments>
		<pubDate>Wed, 28 Jul 2010 12:21:02 +0000</pubDate>
		<dc:creator>sofish</dc:creator>
				<category><![CDATA[前端技术]]></category>
		<category><![CDATA[bug]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[haslayout]]></category>

		<guid isPermaLink="false">http://ued.alipay.com/?p=1665</guid>
		<description><![CDATA[作为一名前端，我们通常要做的就是让页面在各系统A-Grade浏览器，甚至网站浏览份额0.1%以上的浏览器上良好显示。当然，还有性能问题。不过，今天要说的是样式的兼容问题。在IE/Mozilla/Webkit/Opera四分天下的今天，IE6-9/Mozilla（Gecko）系列/Chrome/Safari/Opera etc. 这些浏览器的兼容，无不让前端们头痛。而在这之中，最让人头痛的当数IE，特别是IE6。搞定了IE6，基本也就能称霸半个江山了。搞定了IE，也相当于占领了7、80%的领地。你想做一个统治页面兼容的主么？反正我是想的。

今天，趁着想完善公司的内部样式框架，把HasLayout.net的IE CSS Bug过了一遍。整理中收获了不少东西，一些官方的不足，也根据自己的知识升级了一下。当然，也顺利地升级了框架的一些内容，感觉甚爽。随后，便将一些值得去看的Bug整理成一个列表，基于Alipay前端伟大的分享精神，分享出来以供团队工友们和大家参考。
同时，由于整理仓促，有些理解和表达不当和其他纰漏在所难免，还请大家帮忙更正。谢谢。





问题
浏览器
DEMO
解决方法


Hacking Rules: 
property:all-ie\9; property:gte-ie8\0;*property:lte-ie7; +property:ie7; _property:ie6;




1
input[button &#124; submit] 不能用 margin:0 auto; 居中
IE8
bug &#124; fixed
为input添加width


2
body{overflow:hidden;}没有去掉滚动条
IE6/7
bug &#124; fixed
设置html{overflow:hidden;}


3
hasLayout的标签拥有高度
IE6/7
bug &#124; fixed
*height:0;
_overflow:hidden;


4
form&#62;[hasLayout]元素有margin-left时，子元素中的[input &#124; textarea] 出现2×margin-left
IE6/7
bug &#124; fixed
form &#62; [hasLayout 元素]{margin-left:宽度;}
form div{*margin-left:宽度÷2;}


5
当border-width有1条&#60;边3条时被设置成dotted时，1px的边dotted显示成dashed
IE7
bug &#124; fixed
不在同一个元素上使用不同宽度的 dotted


6
当子元素有position:relative的时候，父元素设置overflow:[hidden&#124;auto]相当于给子元素设置了position:visible;
IE6/7
bug &#124; fixed
给父元素设置position:relative;


7
:hover伪类不能改变有position:absolute的子级元素的left/top值
IE7
bug &#124; fixed
把top/left的值设置成除0%外的所有百分值；或添加一个margin-[所有方向]除0外的所有值，包括0%


8
:focus + selector {} 选择器失效
IE8
bug &#124; fixed
在失效选择器后面添加一个空选择器, :focus{}


9
列表中混乱的浮动：在list中浮动图片时，图片出现溢出正常位置；或没有list-style
IE8
bug &#124; fixed
用背景图片替换list-style


10
th 不会自动继承上级元素的 text-align
IE8
bug &#124; fixed
给th添加text-align:inherit;


11
样式(包括link/style/@import(link)) 最多允许个为是：32
IE6-8
─ 常识
99.99%的情况下，不会遇到


12
:hover 时若background-color为#fff, 失效
IE7
bug [...]]]></description>
			<content:encoded><![CDATA[<p>作为一名前端，我们通常要做的就是让页面在各系统A-Grade浏览器，甚至网站浏览份额0.1%以上的浏览器上良好显示。当然，还有性能问题。不过，今天要说的是样式的兼容问题。在IE/Mozilla/Webkit/Opera四分天下的今天，IE6-9/Mozilla（Gecko）系列/Chrome/Safari/Opera etc. 这些浏览器的兼容，无不让前端们头痛。而在这之中，最让人头痛的当数IE，特别是IE6。搞定了IE6，基本也就能称霸半个江山了。搞定了IE，也相当于占领了7、80%的领地。你想做一个统治页面兼容的主么？反正我是想的。</p>
<p><a href="http://ued.alipay.com/wp-content/uploads/2010/07/ie_bug_table.jpg"><img class="alignnone size-full wp-image-1671" title="ie_bug_table" src="http://ued.alipay.com/wp-content/uploads/2010/07/ie_bug_table.jpg" alt="" width="500" height="163" /></a></p>
<p>今天，趁着想完善公司的内部样式框架，把<a rel="nofollow" href="http://HasLayout.net">HasLayout.net</a>的IE CSS Bug过了一遍。整理中收获了不少东西，一些官方的不足，也根据自己的知识升级了一下。当然，也顺利地升级了框架的一些内容，感觉甚爽。随后，便将一些值得去看的Bug整理成一个列表，基于Alipay前端伟大的分享精神，分享出来以供团队工友们和大家参考。</p>
<p>同时，由于整理仓促，有些理解和表达不当和其他纰漏在所难免，还请大家帮忙更正。谢谢。<br />
<span id="more-1665"></span></p>
<table width="520">
<thead>
<tr>
<th width="30"></th>
<th width="120">问题</th>
<th width="60">浏览器</th>
<th width="90">DEMO</th>
<th width="120">解决方法</th>
</tr>
<tr>
<td colspan="5"><strong>Hacking Rules: </strong></p>
<p><span style="font: italic 12px georgia;">property:all-ie\9; property:gte-ie8\0;*property:lte-ie7; +property:ie7; _property:ie6;</span></td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>input[button | submit] 不能用 margin:0 auto; 居中</td>
<td>IE8</td>
<td><a href="http://haslayout.net/demos/No-Auto-Margin-Center-on-Buttons-Inconsistency-Demo.html">bug</a> | <a href="http://haslayout.net/demos/No-Auto-Margin-Center-on-Buttons-Inconsistency-Fixed-Demo-CS.html">fixed</a></td>
<td>为input添加width</td>
</tr>
<tr>
<td>2</td>
<td>body{overflow:hidden;}没有去掉滚动条</td>
<td>IE6/7</td>
<td><a href="http://haslayout.net/demos/Document-Scrollbars-Overflow-Inconsistency-Demo.html">bug</a> | <a href="http://haslayout.net/demos/Document-Scrollbars-Overflow-Inconsistency-Fixed-Demo.html">fixed</a></td>
<td>设置html{overflow:hidden;}</td>
</tr>
<tr>
<td>3</td>
<td>hasLayout的标签拥有高度</td>
<td>IE6/7</td>
<td><a href="http://haslayout.net/demos/Empty-Element-Height-Bug-Demo.html">bug</a> | <a href="http://haslayout.net/demos/Empty-Element-Height-Bug-Fixed-Demo.html">fixed</a></td>
<td>*height:0;<br />
_overflow:hidden;</td>
</tr>
<tr>
<td>4</td>
<td>form&gt;[hasLayout]元素有margin-left时，子元素中的[input | textarea] 出现2×margin-left</td>
<td>IE6/7</td>
<td><a href="http://haslayout.net/demos/Form-Control-Double-Margin-Bug-Demo.html">bug</a> | <a href="http://haslayout.net/demos/Form-Control-Double-Margin-Bug-Fixed-Demo.html">fixed</a></td>
<td>form &gt; [hasLayout 元素]{margin-left:宽度;}<br />
form div{*margin-left:宽度÷2;}</td>
</tr>
<tr>
<td>5</td>
<td>当border-width有1条&lt;边3条时被设置成dotted时，1px的边dotted显示成dashed</td>
<td>IE7</td>
<td><a href="http://haslayout.net/demos/IE7-1px-Dotted-Border-Appears-As-Dashed-Bug-Demo.html">bug</a> | <a href="http://haslayout.net/demos/IE7-1px-Dotted-Border-Appears-As-Dashed-Bug-Fixed-Demo.html">fixed</a></td>
<td>不在同一个元素上使用不同宽度的 dotted</td>
</tr>
<tr>
<td>6</td>
<td>当子元素有position:relative的时候，父元素设置overflow:[hidden|auto]相当于给子元素设置了position:visible;</td>
<td>IE6/7</td>
<td><a href="http://haslayout.net/demos/relative-overflow-failure-bug-demo.html">bug</a> | <a href="http://haslayout.net/demos/relative-overflow-failure-bug-demo-fixed.html">fixed</a></td>
<td>给父元素设置position:relative;</td>
</tr>
<tr>
<td>7</td>
<td>:hover伪类不能改变有position:absolute的子级元素的left/top值</td>
<td>IE7</td>
<td><a href="http://haslayout.net/demos/ie7-broken-hover-absolute-bug-demo.html">bug</a> | <a href="http://haslayout.net/demos/ie7-broken-hover-absolute-bug-demo-fixed.html">fixed</a></td>
<td>把top/left的值设置成除0%外的所有百分值；或添加一个margin-[所有方向]除0外的所有值，包括0%</td>
</tr>
<tr>
<td>8</td>
<td>:focus + selector {} 选择器失效</td>
<td>IE8</td>
<td><a href="http://haslayout.net/demos/ignored-focus-bug-demo.html">bug</a> | <a href="http://haslayout.net/demos/ignored-focus-bug-demo-fixed.html">fixed</a></td>
<td>在失效选择器后面添加一个空选择器, :focus{}</td>
</tr>
<tr>
<td>9</td>
<td>列表中混乱的浮动：在list中浮动图片时，图片出现溢出正常位置；或没有list-style</td>
<td>IE8</td>
<td><a href="http://haslayout.net/demos/image-float-bullet-chaos-demo.html">bug</a> | <a href="http://haslayout.net/demos/image-float-bullet-chaos-demo-fixed.html">fixed</a></td>
<td>用背景图片替换list-style</td>
</tr>
<tr>
<td>10</td>
<td>th 不会自动继承上级元素的 text-align</td>
<td>IE8</td>
<td><a href="http://haslayout.net/demos/non-inherited-th-text-align-bug-demo.html">bug</a> | <a href="http://haslayout.net/demos/non-inherited-th-text-align-bug-demo-fixed.html">fixed</a></td>
<td>给th添加text-align:inherit;</td>
</tr>
<tr>
<td>11</td>
<td>样式(包括link/style/@import(link)) 最多允许个为是：32</td>
<td>IE6-8</td>
<td>─ 常识</td>
<td>99.99%的情况下，不会遇到</td>
</tr>
<tr>
<td>12</td>
<td>:hover 时若background-color为#fff, 失效</td>
<td>IE7</td>
<td><a href="http://haslayout.net/demos/hover-white-background-ignore-bug.html">bug</a> | <a href="http://haslayout.net/demos/hover-white-background-ignore-bug-fixed-demo.html">fixed</a></td>
<td>把background-color改成background。或者，非#fff || #ffffff</td>
</tr>
<tr>
<td>13</td>
<td>忽略&#8217;&gt;&#8217;后有注释的选择器：selector&gt; /**/ selector{}</td>
<td>IE7</td>
<td><a href="http://haslayout.net/demos/ie7-child-selector-comment-bug-demo.html">bug</a> | <a href="http://haslayout.net/demos/ie7-child-selector-comment-bug-demo.html">fixed</a></td>
<td>官方DEMO有误</td>
</tr>
<tr>
<td>14</td>
<td>* html</td>
<td>IE6</td>
<td>─ HACK</td>
<td>只对IE6有效</td>
</tr>
<tr>
<td>15</td>
<td>PNG图片中的颜色和背景颜色的值相同，但显示不同</td>
<td>IE6-7</td>
<td><a href="http://haslayout.net/demos/png-color-mismatch-demo.html">bug</a> | <a href="http://haslayout.net/demos/png-color-mismatch-demo-fixed.html">fixed</a></td>
<td>利用 <a href="http://pmt.sourceforge.net/pngcrush/">pngcrush</a> 去除图片中的 Gamma profiles</td>
</tr>
<tr>
<td>16</td>
<td>margin:0 auto; 不能让block元素水平居中</td>
<td>IE6-8</td>
<td><a href="http://haslayout.net/demos/no-auto-margin-center-pseudo-bug-demo.html">bug</a> | <a href="http://haslayout.net/demos/no-auto-margin-center-pseudo-bug-demo-fixed.html">fixed</a></td>
<td>给block元素添加一个width</td>
</tr>
<tr>
<td>17</td>
<td>使用伪类 :first-line | :first-letter, 属性的值中出现!important 会使属性失效</td>
<td>IE8</td>
<td><a href="http://haslayout.net/demos/ie8-first-line-important-bug.html">bug</a> | <a href="http://haslayout.net/demos/ie8-first-line-important-bug-fixed.html">fixed</a></td>
<td>!important is evil, don&#8217;t use it anymore</td>
</tr>
<tr>
<td>18</td>
<td>:first-letter 失效</td>
<td>IE6</td>
<td><a href="http://haslayout.net/demos/ie6-first-letter-ignore-bug.html">bug</a> | <a href="http://haslayout.net/demos/ie6-first-letter-ignore-bug-fixed.html">fixed</a></td>
<td>把 :first-letter 移到离{}最近的地方，如 h1, p:first-letter{}，而非 p:first-letter h1{}</td>
</tr>
<tr>
<td>19</td>
<td>Position:absolute元素中，a display:block, 在非:hover时只有文本可点击</td>
<td>IE6/7</td>
<td><a href="http://haslayout.net/demos/partial-click-v2-demo.html">bug</a> | <a href="http://haslayout.net/demos/partial-click-v2-demo-fixed.html">fixed</a></td>
<td>给a添加background, 如果背景透明，使用background:url(&#8216;任何页面中已经缓存的文件链接&#8217;)，不推荐background：url(#)[<a href="http://haslayout.net/css/Partial-Click-Bug-v2">官方的解决方法</a>]，因为会增加一下HTTP请求</td>
</tr>
<tr>
<td>20</td>
<td>float列表元素不水平对齐：li不设置float，a设置display:block;float:[方向]，li不水平对齐</td>
<td>IE6/7</td>
<td><a href="http://haslayout.net/demos/staircase-bug-demo.html">bug</a> | <a href="http://haslayout.net/demos/staircase-bug-demo-fixed.html">fixed</a></td>
<td>给li设置display:inline 或 float:[方向]</td>
</tr>
<tr>
<td>21</td>
<td>dt, dd, li 背景失效</td>
<td>IE6</td>
<td><a href="http://haslayout.net/demos/disappearing-list-background-bug-demo.html">bug</a> | <a href="http://haslayout.net/demos/disappearing-list-background-bug-demo-fixed.html">fixed</a></td>
<td>dt, dd, li{position:relative;}</td>
</tr>
<tr>
<td>22</td>
<td>&lt;noscript /&gt;元素的样式在启用javascript的情况下显示了样式</td>
<td>IE6-8</td>
<td><a href="http://haslayout.net/demos/noscript-ghost-bug-demo.html">bug</a> | <a href="http://haslayout.net/demos/noscript-ghost-bug-demo-fixed.html">fixed</a></td>
<td>利用js给&lt;noscript /&gt;添加display:none;</td>
</tr>
<tr>
<td>23</td>
<td>使用filter处理的透明背景图片的透明部分不可点</td>
<td>IE6-8</td>
<td><a href="http://haslayout.net/demos/no-transparency-click-bug-demo.html">bug</a> | <a href="http://haslayout.net/demos/no-transparency-click-bug-demo-fixed.html">fixed</a></td>
<td>把background:none变成background:url(&#8216;链接&#8217;)，链接到本身和图片之外的任何文件</td>
</tr>
<tr>
<td>24</td>
<td>li内元素偏离 baseline 向下拉</td>
<td>IE8</td>
<td><a href="http://haslayout.net/demos/list-drop-shift-bug-demo.html">bug</a> | <a href="http://haslayout.net/demos/list-drop-shift-bug-demo-fixed.html">fixed</a></td>
<td>给li设置display:inline 或 float:[方向]</td>
</tr>
<tr>
<td>25</td>
<td>列表中li的list-style不显示</td>
<td>IE6/7</td>
<td><a href="http://haslayout.net/demos/no_li_ol_bullets_demo.html">bug</a> | <a href="http://haslayout.net/demos/no_li_ol_bullets_demo_fixed.html">fixed</a></td>
<td>给li添加margin-left，留空间来显示（不要加在ul上）</td>
</tr>
<tr>
<td>26</td>
<td>图片不能垂直居中</td>
<td>IE6/7</td>
<td><a href="http://haslayout.net/css/No-line-height-Vertical-Center-on-Images-Bug">bug/fixed</a></td>
<td>添加一个空标签，并赋给&#8221;Layout&#8221;, 比如display:inline-block;</td>
</tr>
<tr>
<td>27</td>
<td>不能自定义指针样式</td>
<td>IE6-8</td>
<td><a href="http://haslayout.net/demos/cursor/a/demo.html">bug</a> | <a href="http://haslayout.net/demos/cursor/a/demo_fixed.html">fixed</a></td>
<td>给指针文件设置绝对路径</td>
</tr>
<tr>
<td>28</td>
<td>背景溢出，拖动滚动条后显示正常</td>
<td>IE6</td>
<td><a href="http://haslayout.net/demos/backgroundleak_demo.html">bug</a> | <a href="http://haslayout.net/demos/backgroundleak_demo_ls_fixed.html">fixed</a></td>
<td>给父元素添加overflow:hidden防止溢出，并赋予hasLayout,如果添加_zoom:1;</td>
</tr>
<tr>
<td>29</td>
<td>高度超过height定义的高</td>
<td>IE6</td>
<td><a href="http://haslayout.net/css/Expanding-Height-Bug">bug/fixed</a></td>
<td>添加_overflow:hidden;(推荐)或者_font-size:0;</td>
</tr>
<tr>
<td>30</td>
<td>宽度超过width定义的宽</td>
<td>IE6</td>
<td><a href="http://haslayout.net/css/Expanding-Width-Bug">bug/fixed</a></td>
<td>添加_overflow:hidden;</td>
</tr>
<tr>
<td>31</td>
<td>双倍边距</td>
<td>IE6</td>
<td>─ 常识</td>
<td>添加display:inline到float元素中</td>
</tr>
<tr>
<td>32</td>
<td>margin负值隐藏：hasLayout的父元素内的非hasLayout元素，使用负边距时，超出父元素部分不可见</td>
<td>IE6/7</td>
<td><a href="http://haslayout.net/css/Negative-Margin-Bug">bug/fixed</a></td>
<td>去掉父元素的hasLayout；或者赋hasLayout给子元素,并添加position:relative;</td>
</tr>
<tr>
<td>33</td>
<td>给两个浮动元素的某中一个的文字设定为斜体，另一个元素下拉在有斜体文字元素的下面</td>
<td>IE6</td>
<td><a href="http://haslayout.net/css/Italics-Float-Bug">bug/fixed</a></td>
<td>给有斜体文字的元素添加overflow:hidden;</td>
</tr>
<tr>
<td>35</td>
<td>3px 间隔：在float元素后的元素，会有3px间隔</td>
<td>IE6</td>
<td><a href="http://haslayout.net/css/3px-Gap-Bug-aka-Text-Jog-Bug">bug/fixed</a></td>
<td>因为是确切的3px，所以，用“暴力破解”吧，比如_margin-left:-3px;</td>
</tr>
<tr>
<td>35</td>
<td>text-align 影响块级元素</td>
<td>IE6/7</td>
<td><a href="http://haslayout.net/css/Text-Align-Bug">bug/fixed</a></td>
<td>整理你的float；或者分开设置text-align</td>
</tr>
</tbody>
</table>
]]></content:encoded>
			<wfw:commentRss>http://ued.alipay.com/2010/07/ie-beat-the-holy-canon-css-bug-table/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
		<item>
		<title>我们的厦门：前端开发组2010年OUTING</title>
		<link>http://ued.alipay.com/2010/07/our-xiamen-front-end-development-team-in-2010-outing/</link>
		<comments>http://ued.alipay.com/2010/07/our-xiamen-front-end-development-team-in-2010-outing/#comments</comments>
		<pubDate>Thu, 22 Jul 2010 11:55:35 +0000</pubDate>
		<dc:creator>sofish</dc:creator>
				<category><![CDATA[团队活动]]></category>

		<guid isPermaLink="false">http://ued.alipay.com/2010/07/our-xiamen-front-end-development-team-in-2010-outing/</guid>
		<description><![CDATA[距离2010年公司OUTING之厦门行的第一天，已有一周。本周回来投入到工作中，大家的状态也已经从出游的兴奋恢复到了平时的满血加班状态。中午吃饭的时候又提起这次很爽很充实的旅行，并决定一秀。让我们从这张图开始吧，这是我们厦门行的缩影：

怎么形容呢？用&#8221;很爽很充实&#8221;就像&#8221;很傻很天真&#8221;，没有实情，只有内幕。在蓝天下、大海上、长长海滩边和大大太阳底，我们用照片来细说吧。
一、厦门，我们来啦

下了火车，厦门，我们来啦。天热很热，加情满腔热情，看磊哥都湿了，嗯，头发湿了。还有干干车长（后面似乎是周爱民大神）拿&#8221;二号车&#8221;的片子，和工友们一起等大队坐车去宾馆。

厦门的天很蓝。当天下午，回到宾馆没多久，大伙就都奔向海边，我们8个（么么茶、磊哥、大伯、天蓬、臻儿、干干、大高，还有我）也不例外：

这张照片是在&#8221;一国两际&#8221;边上那个海滩拍的，如果按时间顺序来写这篇文章的话，其实时间还没到这点。不过，先弄张HIGH照来秀一下。看天蓬跳得多高，表情多HIGH。都快变身了。冒着大太阳，在海边逛了一圈，由于天气和空空肚子的呼喊，我们先是想到的是中心路，找个可以休息的地方，找个让肚子满足的地方：

中山，呃，国父的名字真是无所不在啊，像深圳有中山公园，杭州有，厦门也有，当然，中山路，就更不用说了。而且，这里，还是不错的。重点推荐一下鹭江宾馆。这个地方，如果白天来，可以在茶餐厅的右边（以下电梯的方向为前的话）坐下，看海景；晚上来，可以在左边的露天雅座上观夜景，喝喝小酒，吹吹少见，谈谈人生，多惬意。

先秀一下&#8221;沙茶面&#8221;，普通得不能再普通的东西，是一家传说中有100多年历史的老店的产品。我们去吃了，味道也很普通，不过，心情很好。像这碗面，厦门也是个普通的地方，只是，刚好碰巧大家一起出来玩，因此变得特别起来。想想，如果工作的时候，我们也用这样的心态去看自己做的东西，也同样以大家都是在为同样的更好支付体验在奋斗，或许这此忙碌，这些重复，也会是让人欢喜的。

先臭美一下，这是在中山路周围那一片的旧城楼老街旁拍的。某个中国男青年。做人不能这样，怎么能只臭美自己呢，为了不受围欧，先摆这张：

HoHo&#8230; 帅多们美女们。造型不错，色彩不错，看得两眼发光。一一介绍么？最前的是天蓬，从前到后，二排左是大高，右边是磊哥，然后是前端美女臻儿，蓝色衣服的大伯，还有托着眼镜的么么茶。

逛完了中山路，我们去了海边。看了传说中的可以望见金门的那个写有&#8221;一国两际&#8221;大牌边上的海滩。傍晚的海边都是漂亮的。心情依然大好。看看大伯和么么茶跳得多高，你就知道了。我也跳了，那只手是我的，哈哈哈哈哈&#8230; 然后，我发现了这群小龟，给他们摆好POSE，拍了个照。被问了句&#8221;你是谁？&#8221;（假装台词是这样）。

之前，大家又拍啊，跳啊，玩玩水，坐坐沙滩之类的。天色慢慢暗了下来。我们也准备离开。最终，决定了去&#8221;小眼镜大排档&#8221;。先上菜：

鲜美的鲍鱼。说到这份鲍鱼，囧，可能是这家的生意太好了，去的时候只剩下了7只，结果，我们有8个人。到最近，么么茶、磊哥和大伯为了照顾小盆友们，都争着说不吃。要是写小学作文的话，那句&#8221;继承了中华民族的优良传统&#8221;是肯定要出现的。

吃小鱼啦。其实我也不知道是什么，反正就是小条的鱼，吃吧，吃小鱼。肉很嫩，味也鲜，真不错。

粉。臻儿太厉害啦，在当时这么饿的情况下，都把这些照片拍得这么好。表扬表扬表扬。还有那个啥，看：

就不把所有菜都列出来了。总结性地感叹一下，这餐吃的真爽。海鲜+啤酒+超靓的心情，很是享受。工友们纷纷表示吃得爽，当然，也饮得爽，问么么茶，哈哈。然后，再集体去泡脚。最近在厦门的夜色下，慢慢走回所在的宾馆。这一天完美收场。
二、鼓浪屿

鼓浪屿是个漂亮、安静的地方。没有汽车，有成群的鸽子，蓝的天，漂亮的旧房子，还有懒懒的猫，更有漂亮的海。喜欢这里的各种好吃的东西，比如鱼丸，比如林记的。大伯说，林记鱼丸不怎样，其实，鱼丸都那样嘛。

这里不得不说一下可以寄给未来的明信片店。大家都寄了，我也一样，寄了一张。不知道谁会收到。这是标准格式：

好玩吧，如果你也去的话，记得去寄一张。玩一下，多好。

这是在路旁边看到的，似乎当时是想起了某部电视的某个场景，有这样的一个在街帝的小盆栽。这，应该是种青春的感觉，反正当时我是这么想的。除了明信片，这里还有一些很好玩的卖小东西的店：

像这只小猫。可爱吧。听说，鼓浪屿上很少有狗，但是有很多猫。我在游记中写到，这或许也是有&#8221;张三疯&#8221;奶茶和BabyCat的原因吧。当然，还有卖其他东西的。小资的、创意的，XX的。还有漂亮的留言本：

这是那家卖小熊的店的周年纪念留言本。老板看我们带着相机，对我们说，欢迎拍照。绅士地，温柔地，进店就感觉很舒服了。留言和盖章是这里的一大特色。比如比较鸡婆的我，就到处留言，说说这个，说说那个的：

逛啊逛的，走了好久。累了，我们找了个咖啡厅休息。从那里的篱笆往上往，天，还是那么蓝。

1932，这，年代还挺久远的。

话说，这里的院子，是一个极适合拍照的地方，看看臻儿，这POSE多有范儿，当然，也要大赞天蓬的拍照技术：

拍了不少照片。后来我们离开这里。去买一下吃的，准备带回来的东西。哈哈，先看看这个：最佳老婆奖。磊哥（传说中的小鱼的师傅）是在帮师母领的吧。

还有个也挺有意思的，&#8221;至今单身&#8221;，看，帅哥干干拿着的感觉就是不同呀。

好吧，东西带够了。大家都背着满满的包，慢慢走向鼓浪屿的最后一站：海滩。后来，游泳的游泳，不游的在海边吹风、喝茶。要怎么形容呢？就一个字，爽。介于有&#8221;露点&#8221;照，就只放一张&#8221;LOST&#8221;造型的合照吧（天蓬在帮我拍，没照进来）：

至此，鼓浪屿之旅也到尾声了。至少心情怎样呢？看我们快要离开的时候，天蓬的这个造型就知道了：

一切都是美的。就连那条普通的，通向回去轮船回去的桥，在夕下，也是如此的美：

晚上，我们又出去玩了。过程省略。厦门第二天的鼓浪屿之旅完结。
三、第三天
不知道用什么来形容第三天。行程太满，今天要去的地方太多，有南普陀寺，有炮台，有厦门大学。先来看看这张出门时的照片：

这是黑社会老大？保镖？还是什么。对比一下么么茶和后面&#8221;大师&#8221;的表情，真是，啧啧啧。这表情，对于一下那个清纯可爱的么么茶，真是天壤之别啊？

你看，你看，哈哈哈。这造型，完全是两个人嘛。

最近，大家都说太累了，只有我和大高去了厦门大学。照片中的对面是群贤楼。对厦门的印象不是很深，唯一觉得不错的就是湖边那个小Cafe 和古色古香的宿舍楼。

最后，上一张这次前端组的8人的唯一合照。厦门之行完结，文章也就此完结吧。期待团队另一批人在千岛湖的游记。
]]></description>
			<content:encoded><![CDATA[<p>距离2010年公司OUTING之厦门行的第一天，已有一周。本周回来投入到工作中，大家的状态也已经从出游的兴奋恢复到了平时的满血加班状态。中午吃饭的时候又提起这次很爽很充实的旅行，并决定一秀。让我们从这张图开始吧，这是我们厦门行的缩影：</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_001p1540d415.png" height="313" width="500"/></p>
<p>怎么形容呢？用&#8221;很爽很充实&#8221;就像&#8221;很傻很天真&#8221;，没有实情，只有内幕。在蓝天下、大海上、长长海滩边和大大太阳底，我们用照片来细说吧。</p>
<p>一、厦门，我们来啦</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_002p76ec010a.png" height="333" width="500"/></p>
<p>下了火车，厦门，我们来啦。天热很热，加情满腔热情，看磊哥都湿了，嗯，头发湿了。还有干干车长（后面似乎是周爱民大神）拿&#8221;二号车&#8221;的片子，和工友们一起等大队坐车去宾馆。</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_003p33978911.png" height="335" width="500"/></p>
<p>厦门的天很蓝。当天下午，回到宾馆没多久，大伙就都奔向海边，我们8个（么么茶、磊哥、大伯、天蓬、臻儿、干干、大高，还有我）也不例外：</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_004n4caf0746.png" height="375" width="500"/></p>
<p>这张照片是在&#8221;一国两际&#8221;边上那个海滩拍的，如果按时间顺序来写这篇文章的话，其实时间还没到这点。不过，先弄张HIGH照来秀一下。看天蓬跳得多高，表情多HIGH。都快变身了。冒着大太阳，在海边逛了一圈，由于天气和空空肚子的呼喊，我们先是想到的是中心路，找个可以休息的地方，找个让肚子满足的地方：</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_005n7eb7d593.png" height="375" width="500"/></p>
<p>中山，呃，国父的名字真是无所不在啊，像深圳有中山公园，杭州有，厦门也有，当然，中山路，就更不用说了。而且，这里，还是不错的。重点推荐一下鹭江宾馆。这个地方，如果白天来，可以在茶餐厅的右边（以下电梯的方向为前的话）坐下，看海景；晚上来，可以在左边的露天雅座上观夜景，喝喝小酒，吹吹少见，谈谈人生，多惬意。</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_006n25153f2a.png" height="333" width="500"/></p>
<p>先秀一下&#8221;沙茶面&#8221;，普通得不能再普通的东西，是一家传说中有100多年历史的老店的产品。我们去吃了，味道也很普通，不过，心情很好。像这碗面，厦门也是个普通的地方，只是，刚好碰巧大家一起出来玩，因此变得特别起来。想想，如果工作的时候，我们也用这样的心态去看自己做的东西，也同样以大家都是在为同样的更好支付体验在奋斗，或许这此忙碌，这些重复，也会是让人欢喜的。</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_007n4315d5ec.png" height="333" width="500"/></p>
<p>先臭美一下，这是在中山路周围那一片的旧城楼老街旁拍的。某个中国男青年。做人不能这样，怎么能只臭美自己呢，为了不受围欧，先摆这张：</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_008p5fd706f.png" height="335" width="500"/></p>
<p>HoHo&#8230; 帅多们美女们。造型不错，色彩不错，看得两眼发光。一一介绍么？最前的是天蓬，从前到后，二排左是大高，右边是磊哥，然后是前端美女臻儿，蓝色衣服的大伯，还有托着眼镜的么么茶。</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_010p430ed81a.png" height="500" width="454"/></p>
<p>逛完了中山路，我们去了海边。看了传说中的可以望见金门的那个写有&#8221;一国两际&#8221;大牌边上的海滩。傍晚的海边都是漂亮的。心情依然大好。看看大伯和么么茶跳得多高，你就知道了。我也跳了，那只手是我的，哈哈哈哈哈&#8230; 然后，我发现了这群小龟，给他们摆好POSE，拍了个照。被问了句&#8221;你是谁？&#8221;（假装台词是这样）。</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_009p2e174a9.png" height="333" width="500"/></p>
<p>之前，大家又拍啊，跳啊，玩玩水，坐坐沙滩之类的。天色慢慢暗了下来。我们也准备离开。最终，决定了去&#8221;小眼镜大排档&#8221;。先上菜：</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_011n23e9cbb0.png" height="375" width="500"/></p>
<p>鲜美的鲍鱼。说到这份鲍鱼，囧，可能是这家的生意太好了，去的时候只剩下了7只，结果，我们有8个人。到最近，么么茶、磊哥和大伯为了照顾小盆友们，都争着说不吃。要是写小学作文的话，那句&#8221;继承了中华民族的优良传统&#8221;是肯定要出现的。</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_012p274d3322.png" height="375" width="500"/></p>
<p>吃小鱼啦。其实我也不知道是什么，反正就是小条的鱼，吃吧，吃小鱼。肉很嫩，味也鲜，真不错。</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_013n98e4fba.png" height="375" width="500"/></p>
<p>粉。臻儿太厉害啦，在当时这么饿的情况下，都把这些照片拍得这么好。表扬表扬表扬。还有那个啥，看：</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_014p1145f939.png" height="375" width="500"/></p>
<p>就不把所有菜都列出来了。总结性地感叹一下，这餐吃的真爽。海鲜+啤酒+超靓的心情，很是享受。工友们纷纷表示吃得爽，当然，也饮得爽，问么么茶，哈哈。然后，再集体去泡脚。最近在厦门的夜色下，慢慢走回所在的宾馆。这一天完美收场。</p>
<p>二、鼓浪屿</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_015n36c88521.png" height="375" width="500"/></p>
<p>鼓浪屿是个漂亮、安静的地方。没有汽车，有成群的鸽子，蓝的天，漂亮的旧房子，还有懒懒的猫，更有漂亮的海。喜欢这里的各种好吃的东西，比如鱼丸，比如林记的。大伯说，林记鱼丸不怎样，其实，鱼丸都那样嘛。</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_016n4aae1ca5.png" height="335" width="500"/></p>
<p>这里不得不说一下可以寄给未来的明信片店。大家都寄了，我也一样，寄了一张。不知道谁会收到。这是标准格式：</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_017n2d556875.png" height="333" width="500"/></p>
<p>好玩吧，如果你也去的话，记得去寄一张。玩一下，多好。</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_018p464a5506.png" height="333" width="500"/></p>
<p>这是在路旁边看到的，似乎当时是想起了某部电视的某个场景，有这样的一个在街帝的小盆栽。这，应该是种青春的感觉，反正当时我是这么想的。除了明信片，这里还有一些很好玩的卖小东西的店：</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_019p28b82ca5.png" height="333" width="500"/></p>
<p>像这只小猫。可爱吧。听说，鼓浪屿上很少有狗，但是有很多猫。我在游记中写到，这或许也是有&#8221;张三疯&#8221;奶茶和BabyCat的原因吧。当然，还有卖其他东西的。小资的、创意的，XX的。还有漂亮的留言本：</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_020n32e6f37e.png" height="333" width="500"/></p>
<p>这是那家卖小熊的店的周年纪念留言本。老板看我们带着相机，对我们说，欢迎拍照。绅士地，温柔地，进店就感觉很舒服了。留言和盖章是这里的一大特色。比如比较鸡婆的我，就到处留言，说说这个，说说那个的：</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_021p2fb92e6a.png" height="333" width="500"/></p>
<p>逛啊逛的，走了好久。累了，我们找了个咖啡厅休息。从那里的篱笆往上往，天，还是那么蓝。</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_022n3753fde7.png" height="333" width="500"/></p>
<p>1932，这，年代还挺久远的。</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_023n1eb06a02.png" height="333" width="500"/></p>
<p>话说，这里的院子，是一个极适合拍照的地方，看看臻儿，这POSE多有范儿，当然，也要大赞天蓬的拍照技术：</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_024nc4ae82c.png" height="500" width="334"/></p>
<p>拍了不少照片。后来我们离开这里。去买一下吃的，准备带回来的东西。哈哈，先看看这个：最佳老婆奖。磊哥（传说中的小鱼的师傅）是在帮师母领的吧。</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_025n59f671e0.png" height="500" width="333"/></p>
<p>还有个也挺有意思的，&#8221;至今单身&#8221;，看，帅哥干干拿着的感觉就是不同呀。</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_026p3a047679.png" height="640" width="426"/></p>
<p>好吧，东西带够了。大家都背着满满的包，慢慢走向鼓浪屿的最后一站：海滩。后来，游泳的游泳，不游的在海边吹风、喝茶。要怎么形容呢？就一个字，爽。介于有&#8221;露点&#8221;照，就只放一张&#8221;LOST&#8221;造型的合照吧（天蓬在帮我拍，没照进来）：</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_027n47ab09db.png" height="335" width="500"/></p>
<p>至此，鼓浪屿之旅也到尾声了。至少心情怎样呢？看我们快要离开的时候，天蓬的这个造型就知道了：</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_028p5951ea67.png" height="335" width="500"/></p>
<p>一切都是美的。就连那条普通的，通向回去轮船回去的桥，在夕下，也是如此的美：</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_029n6da0d74c.png" height="333" width="500"/></p>
<p>晚上，我们又出去玩了。过程省略。厦门第二天的鼓浪屿之旅完结。</p>
<p>三、第三天</p>
<p>不知道用什么来形容第三天。行程太满，今天要去的地方太多，有南普陀寺，有炮台，有厦门大学。先来看看这张出门时的照片：</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_030p2de584e3.png" height="333" width="500"/></p>
<p>这是黑社会老大？保镖？还是什么。对比一下么么茶和后面&#8221;大师&#8221;的表情，真是，啧啧啧。这表情，对于一下那个清纯可爱的么么茶，真是天壤之别啊？</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_031p46b5928a.png" height="333" width="500"/></p>
<p>你看，你看，哈哈哈。这造型，完全是两个人嘛。</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_032n29b7b023.png" height="333" width="500"/></p>
<p>最近，大家都说太累了，只有我和大高去了厦门大学。照片中的对面是群贤楼。对厦门的印象不是很深，唯一觉得不错的就是湖边那个小Cafe 和古色古香的宿舍楼。</p>
<p><img src="http://ued.alipay.com/wp-content/uploads/2010/07/zrclip_033p2c3a7354.png" height="335" width="500"/></p>
<p>最后，上一张这次前端组的8人的唯一合照。厦门之行完结，文章也就此完结吧。期待团队另一批人在千岛湖的游记。</p>
]]></content:encoded>
			<wfw:commentRss>http://ued.alipay.com/2010/07/our-xiamen-front-end-development-team-in-2010-outing/feed/</wfw:commentRss>
		<slash:comments>21</slash:comments>
		</item>
		<item>
		<title>人物角色实践记</title>
		<link>http://ued.alipay.com/2010/07/practice-note-characters-2/</link>
		<comments>http://ued.alipay.com/2010/07/practice-note-characters-2/#comments</comments>
		<pubDate>Fri, 09 Jul 2010 03:47:24 +0000</pubDate>
		<dc:creator>tianyan</dc:creator>
				<category><![CDATA[用户研究]]></category>
		<category><![CDATA[人物角色 用户研究]]></category>

		<guid isPermaLink="false">http://ued.alipay.com/?p=1610</guid>
		<description><![CDATA[最近在跟其他两位同事瑶芝、绿绿一起创建支付宝的全站人物角色。这次项目主要是为了在公司内普及人物角色的方法，提高大家的用户意识。
通过学习Lene Nielsen的十步人物角色创建法，结合定量、定性数据，我们将相关步骤进行了如下合并处理。
 1.	头脑风暴：建立假设，确定区分维度和分析框架
创建人物角色，最重要的就是明确按照什么标准来划分不同用户群。区分标准不仅要考虑用户使用行为的实际差异，还应结合产品的商业目标区分主要角色、次要角色和辅助角色。
我们发现以往研究中常用的区分维度主要包括需求、行为和动机三类。结合第三方支付的特性，我们假设可以按照使用经验（三种水平：≦6个月，6-24个月，≧24个月）和需求强度（是否将网上支付作为首选：是、否、不一定）这两个维度来划分用户群。

分析框架指的是每个人物角色包含哪些具体内容。通常需包括背景信息（如人口学特征、网龄、收入水平等）、使用行为（如支付宝使用频率等）、目标和典型场景（如用支付宝缴水电煤等）。

 2.	定量分析：验证假设，分析不同用户群的行为差异
有了分类假设后，我们就采用验证性方法来分析定量数据：以使用经验和需求强度为自变量，分析不同用户群的行为差异。考虑到低需求用户样本较少，商业价值也不大，因此分析时暂将这部分数据抛弃。
定量分析发现：高需求用户的特征较为明显，不同经验用户的使用行为也有较多差异。如高需求老用户中，男性比例高于女性，收入水平也是所有人物角色中最高的。

而中需求用户的特征则并不那么明显，三种经验水平的用户在性别、年龄、职业等方面均不存在显著差异。这使得我们开始反思用经验水平来划分中需求用户是否合适。
3.	归纳分类：分析不同人物角色的目标，定义使用情境
我们对每类用户的具体行为差异进行梳理、比较，重点关注差异较大的行为，进而概括出不同的行为目标。这一步的重点和难点是突出角色差异。我们采用了1-2个词组用于说明角色的行为目标或关键词，并提供与目标密切相关的标志性语言。
由于中需求用户特征不够明显，因此我们补充考虑了用户的目标，最终将中需求用户分解为想赚钱的卖家、担心网上付款安全的小白领和刚上手买游戏币的学生玩家。

4.	定性验证：结合定性资料，细化角色的典型行为，进行有效性和细节的补充
 这一步首先要避免的是把自己或周围的人当成用户，把用户的非典型行为当成典型行为。有时，一个用户会同时包含几类角色的行为特征。在这种情况下，我们采取的办法是从角色的行为目标出发，把单个用户的行为拆散，分别放到不同角色中去。
为了使人物角色真实、鲜活，我们给每个角色赋予性别、年龄、工作情况、收入水平等基本信息，附上他/她生活的场景照片，描述了他/她使用支付宝的具体操作过程。要注意撰写场景故事时，语言要尽量简洁明了、清晰易懂。
此外，展示完每个人物角色后，最好能对所有角色的相关特征进行比较和小结，这样能帮助其他人更好地理解并记忆角色。
以下是我们创建的一个人物角色。

5.	角色迭代：进行内外部宣讲，收集建议更新人物角色，后续跟踪
人物角色后续的关键问题是如何让公司同事对角色达成共识。
我们先与设计师沟通，获得了一些改进建议；然后在一次管理层的用户体验会议中进行宣讲，效果良好。后续还将采用传统海报、公司平台等形式，普及人物角色。
总结这次项目，我们觉得可以在起始阶段投入更大精力，如通过员工互动等形式搜集大家对用户的看法，多找一些不同背景的同事进行头脑风暴，或者采取探索性分析方法挖掘后台数据聚类等等。
]]></description>
			<content:encoded><![CDATA[<p>最近在跟其他两位同事瑶芝、绿绿一起创建支付宝的全站人物角色。这次项目主要是为了在公司内普及人物角色的方法，提高大家的用户意识。<br />
通过学习Lene Nielsen的十步人物角色创建法，结合定量、定性数据，我们将相关步骤进行了如下合并处理。<br />
<strong> 1.	头脑风暴：建立假设，确定区分维度和分析框架</strong><br />
创建人物角色，最重要的就是明确按照什么标准来划分不同用户群。区分标准不仅要考虑用户使用行为的实际差异，还应结合产品的商业目标区分主要角色、次要角色和辅助角色。<br />
我们发现以往研究中常用的区分维度主要包括<strong>需求</strong>、<strong>行为</strong>和<strong>动机</strong>三类。结合第三方支付的特性，我们假设可以按照<strong>使用经验</strong>（三种水平：≦6个月，6-24个月，≧24个月）和<strong>需求强度</strong>（是否将网上支付作为首选：是、否、不一定）这两个维度来划分用户群。</p>
<p><a href="http://ued.alipay.com/wp-content/uploads/2010/07/Persona分类标准配图.png"><img class="alignnone size-medium wp-image-1608" title="Persona分类标准配图" src="http://ued.alipay.com/wp-content/uploads/2010/07/Persona分类标准配图-275x230.png" alt="分类标准" width="275" height="230" /></a></p>
<p>分析框架指的是每个人物角色包含哪些具体内容。通常需包括<strong>背景信息</strong>（如人口学特征、网龄、收入水平等）、<strong>使用行为</strong>（如支付宝使用频率等）、<strong>目标和典型场景</strong>（如用支付宝缴水电煤等）。</p>
<p><span id="more-1610"></span><br />
<strong> 2.	定量分析：验证假设，分析不同用户群的行为差异</strong><br />
有了分类假设后，我们就采用验证性方法来分析定量数据：以使用经验和需求强度为自变量，分析不同用户群的行为差异。考虑到低需求用户样本较少，商业价值也不大，因此分析时暂将这部分数据抛弃。<br />
定量分析发现：高需求用户的特征较为明显，不同经验用户的使用行为也有较多差异。如高需求老用户中，男性比例高于女性，收入水平也是所有人物角色中最高的。</p>
<p><a href="http://ued.alipay.com/wp-content/uploads/2010/07/Persona收入配图.png"><img class="alignnone size-medium wp-image-1612" title="Persona收入配图" src="http://ued.alipay.com/wp-content/uploads/2010/07/Persona收入配图-380x230.png" alt="" width="380" height="230" /></a></p>
<p>而中需求用户的特征则并不那么明显，三种经验水平的用户在性别、年龄、职业等方面均不存在显著差异。这使得我们开始反思用经验水平来划分中需求用户是否合适。</p>
<p><strong>3.	归纳分类：分析不同人物角色的目标，定义使用情境</strong><br />
我们对每类用户的具体行为差异进行梳理、比较，重点关注差异较大的行为，进而概括出不同的行为目标。这一步的重点和难点是突出角色差异。我们采用了1-2个词组用于说明角色的行为目标或关键词，并提供与目标密切相关的<strong>标志性语言</strong>。<br />
由于中需求用户特征不够明显，因此我们补充考虑了用户的目标，最终将中需求用户分解为想赚钱的卖家、担心网上付款安全的小白领和刚上手买游戏币的学生玩家。</p>
<p><a href="http://ued.alipay.com/wp-content/uploads/2010/07/Persona卖家配图.png"><img class="size-medium wp-image-1613  alignleft" title="Persona卖家配图" src="http://ued.alipay.com/wp-content/uploads/2010/07/Persona卖家配图-257x230.png" alt="" width="257" height="230" /></a></p>
<p><strong>4.	定性验证：结合定性资料，细化角色的典型行为，进行有效性和细节的补充</strong></p>
<p><strong><span style="font-weight: normal;"> 这一步首先要避免的是把自己或周围的人当成用户，把用户的非典型行为当成典型行为。有时，一个用户会同时包含几类角色的行为特征。在这种情况下，我们采取的办法是从角色的行为目标出发，把单个用户的行为拆散，分别放到不同角色中去。</span></strong></p>
<p>为了使人物角色真实、鲜活，我们给每个角色赋予性别、年龄、工作情况、收入水平等基本信息，附上他/她生活的场景照片，描述了他/她使用支付宝的具体操作过程。要注意撰写场景故事时，语言要尽量简洁明了、清晰易懂。<br />
此外，展示完每个人物角色后，最好能对所有角色的相关特征进行比较和小结，这样能帮助其他人更好地理解并记忆角色。<br />
以下是我们创建的一个人物角色。</p>
<p><a href="http://ued.alipay.com/wp-content/uploads/2010/07/Persona高需求一般用户配图.png"><img class="alignnone size-medium wp-image-1614" title="Persona高需求一般用户配图" src="http://ued.alipay.com/wp-content/uploads/2010/07/Persona高需求一般用户配图-322x230.png" alt="" width="322" height="230" /></a></p>
<p><strong>5.	角色迭代：进行内外部宣讲，收集建议更新人物角色，后续跟踪</strong><br />
人物角色后续的关键问题是如何让公司同事对角色达成共识。<br />
我们先与设计师沟通，获得了一些改进建议；然后在一次管理层的用户体验会议中进行宣讲，效果良好。后续还将采用传统海报、公司平台等形式，普及人物角色。</p>
<p>总结这次项目，我们觉得可以在起始阶段投入更大精力，如通过员工互动等形式搜集大家对用户的看法，多找一些不同背景的同事进行头脑风暴，或者采取探索性分析方法挖掘后台数据聚类等等。</p>
]]></content:encoded>
			<wfw:commentRss>http://ued.alipay.com/2010/07/practice-note-characters-2/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>JavaScript for: i++ vs i&#8211;</title>
		<link>http://ued.alipay.com/2010/06/javascript-for-and-weak-typing/</link>
		<comments>http://ued.alipay.com/2010/06/javascript-for-and-weak-typing/#comments</comments>
		<pubDate>Sun, 20 Jun 2010 05:21:37 +0000</pubDate>
		<dc:creator>太伯</dc:creator>
				<category><![CDATA[前端技术]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://ued.alipay.com/?p=1555</guid>
		<description><![CDATA[JavaScript 循环中，i++ 与 i&#8211; 那个比较快？相信有不少朋友看过相关的讨论文章，比如这篇。文章解释了开启优化选项后，i&#8211; 的 Java 代码节省了 1 条指令，从而可以运行得更快。那么，JavaScript 上运用 i&#8211; 是否有同样的表现呢？
这里试图从语言层面分析造成差异的原因，并展示不同 JavaScript 运行环境产生的差异。
JavaScript Loop: Optimization of Weak Typing
点这里以更大窗口阅读。

]]></description>
			<content:encoded><![CDATA[<p>JavaScript 循环中，i++ 与 i&#8211; 那个比较快？相信有不少朋友看过相关的讨论文章，比如<a href="http://www.limodev.cn/blog/archives/631">这篇</a>。文章解释了开启优化选项后，i&#8211; 的 Java 代码节省了 1 条指令，从而可以运行得更快。那么，JavaScript 上运用 i&#8211; 是否有同样的表现呢？</p>
<p>这里试图从语言层面分析造成差异的原因，并展示不同 JavaScript 运行环境产生的差异。</p>
<div id="__ss_4046002" style="width: 425px;"><strong><a title="JavaScript Loop: Optimization of Weak Typing" href="http://www.slideshare.net/janlay/javascript-loop">JavaScript Loop: Optimization of Weak Typing</a></strong><object id="__sse4046002" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="355" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="src" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=javascriptloop-100511012048-phpapp01&amp;stripped_title=javascript-loop" /><param name="name" value="__sse4046002" /><param name="allowfullscreen" value="true" /><embed id="__sse4046002" type="application/x-shockwave-flash" width="425" height="355" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=javascriptloop-100511012048-phpapp01&amp;stripped_title=javascript-loop" name="__sse4046002" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<div style="padding: 5px 0 12px;">点<a href="http://www.slideshare.net/janlay/javascript-loop" target="_blank">这里</a>以更大窗口阅读。</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://ued.alipay.com/2010/06/javascript-for-and-weak-typing/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>
