<?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>Jaybird</title>
	<atom:link href="http://www.obird.net/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.obird.net</link>
	<description>Interaction and User Experience Designer</description>
	<lastBuildDate>Mon, 02 Aug 2010 08:41:33 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>手机商旅产品体验设计浅析</title>
		<link>http://www.obird.net/user-experience/%e6%89%8b%e6%9c%ba%e5%95%86%e6%97%85%e4%ba%a7%e5%93%81%e4%bd%93%e9%aa%8c%e8%ae%be%e8%ae%a1%e6%b5%85%e6%9e%90/</link>
		<comments>http://www.obird.net/user-experience/%e6%89%8b%e6%9c%ba%e5%95%86%e6%97%85%e4%ba%a7%e5%93%81%e4%bd%93%e9%aa%8c%e8%ae%be%e8%ae%a1%e6%b5%85%e6%9e%90/#comments</comments>
		<pubDate>Mon, 02 Aug 2010 08:40:26 +0000</pubDate>
		<dc:creator>Jaybird</dc:creator>
				<category><![CDATA[UX design]]></category>

		<guid isPermaLink="false">http://www.obird.net/?p=477</guid>
		<description><![CDATA[同行产品概览
3G时代的来临，推动着手机成为下一代主流移动设备。截止2009年，中国有互联网用户3.84亿，移动互联网用户2.33亿.根据用户需求，WAP产品大致可分以下分类：
浏览类型：按照预定的轨迹去浏览，过程很少让用户主动交互。如：手机资讯网、手机杂志等。
互动类型：强调身份概念，在使用过程中鼓励用户主动输入内容，产生交互。如：新浪微博等。
携程无线

航空管家

Kayak

Concur

功能趋势




携程无线
航空管家
Concur
Kayak


国内机票联程


●
●


机票价格趋势（7 天）

●




机票特价机票(30 天内)

●




航班进出港动态

●

●


登机口导航

●




机场延误情况

●




google 地图定位
●

●
●


周边酒店查询
●





快速通道（常住酒店）
●





天气预报


●



国际机票


●
●


国际酒店


●
●


个人信息管理
●

●
●


订单管理
●

●
●


租车


●
●


费用报销


●



订餐


●



分享旅行


●



航空公司查询



●


帮助
●


●



交互体验分析
由于手机屏幕大小的局限性，提升手机屏幕交互体验，在设计中需遵守以下几个原则：

简单性：少即是多，界面元素的简洁可减少用户认知难度、便于了解
一致性：视觉与交互形式
合理布局导航：有明确的方位导航，时刻让用户知道所在位置
高效率：核心功能层次目录不宜过深，并能方便的找到。减少浏览时的按键触发

Kayak iPhone

首页是系统交互的起点，其战略意义为重中之中。除了要树立产品品牌形象，更重要是要告诉用户可以做什么。
Kayak首页将界面分成三个功能区域头部区、主体内容区、提醒区。并根据7±2 原则(人类短期记忆只能记住5-9个事物)和功能维度，优先显示8个核心功能，并将其它5个辅助功能通过切换显示。图标设计也直观清晰，用户一眼就可辨识。背景采用高光投影，让整体显得更有立体感。

Kayak头部导航始终如一保持了其一致性，左侧后退，右侧返回首页，方便用户使用。

Kayak在系统中集成了Google地图，来作为酒店周边搜索和位置的定位，这将大大提升整个搜索交互的体验，也可帮助用户了解酒店位置周边的旅行资源（交通、景点、酒店、酒吧等），但对现阶段国内手机3G未普及时的带宽速度也是个挑战。
Concur Mobile iPhone

Concur首页的中间主体内容和底部在导航设计上提供了“多通道”，方便用户进入功能子页时可迅速切换至其它功能入口。但目前Concur有个缺点，纵向列表图标和横向标签都显示不全所有功能链接。

把保存按钮放在右边，首先从颜色上和了区分，让保存按钮更加突出和引导视觉流；也符合用户左边拿手机，右边操作的行为习惯。取消在左，保存在右，也可避免用户误点错按钮。
携程无线 iPhone

携程无线的界面设计简洁大方，在色彩选择也延续了其官网的蓝色系，沉稳而具有商务特质。一进入首页就直奔正题，按钮加上标题，让功能更易于用户认知。
携程无线在功能上没有太多亮点，基本也是将B2C平台上的功能往手机上作了移植。
航班管家 iPhone

航班管家提供了3个有别于它家的个性化服务，记录历史查询、价格趋势、特价机票。
总结
随着3G和手机技术的普及发展，新一代基于手机商旅服务平台将为旅游出行者提供更为丰富便捷的消费体验。
国内除了携程和极少数的企业推出的手机商旅软件能够满足“一站式”旅游需求，其它都因速度慢、信息量少、无法走完全流程而显得有点名不符实。
手机互联网是未来发展的趋势，手机产品对界面交互也提出了更多的要求，产品的设计已由功能化和标准化需求慢慢演变成情感化服务，没有好的用户体验，最终很难留住越来越挑剔的用户。
]]></description>
			<content:encoded><![CDATA[<h2><a href="http://www.obird.net/wp-content/uploads/2010/08/7.jpg"></a><a href="http://www.obird.net/wp-content/uploads/2010/08/11.jpg"></a>同行产品概览</h2>
<p>3G时代的来临，推动着手机成为下一代主流移动设备。截止2009年，中国有互联网用户3.84亿，移动互联网用户2.33亿.根据用户需求，WAP产品大致可分以下分类：<br />
浏览类型：按照预定的轨迹去浏览，过程很少让用户主动交互。如：手机资讯网、手机杂志等。<br />
互动类型：强调身份概念，在使用过程中鼓励用户主动输入内容，产生交互。如：新浪微博等。</p>
<h3>携程无线</h3>
<p><a href="http://www.obird.net/wp-content/uploads/2010/08/1.jpg"><img class="alignnone size-full wp-image-478" title="携程无线" src="http://www.obird.net/wp-content/uploads/2010/08/1.jpg" alt="" width="754" height="901" /></a><span id="more-477"></span></p>
<h3>航空管家</h3>
<p><a href="http://www.obird.net/wp-content/uploads/2010/08/2.jpg"><img class="alignnone size-full wp-image-481" title="航班管家" src="http://www.obird.net/wp-content/uploads/2010/08/2.jpg" alt="" width="751" height="880" /></a></p>
<h3>Kayak</h3>
<p><a href="http://www.obird.net/wp-content/uploads/2010/08/3.jpg"><img class="alignnone size-full wp-image-483" title="Kayak" src="http://www.obird.net/wp-content/uploads/2010/08/3.jpg" alt="" width="748" height="827" /></a></p>
<h3>Concur</h3>
<p><a href="http://www.obird.net/wp-content/uploads/2010/08/4.jpg"><img class="alignnone size-full wp-image-485" title="Concur" src="http://www.obird.net/wp-content/uploads/2010/08/4.jpg" alt="" width="748" height="827" /></a></p>
<h3>功能趋势</h3>
<table border="0" cellspacing="1" cellpadding="1" width="90%">
<tbody>
<tr>
<th scope="col"></th>
<th scope="col">携程无线</th>
<th scope="col">航空管家</th>
<th scope="col">Concur</th>
<th scope="col">Kayak</th>
</tr>
<tr>
<td align="right">国内机票联程</td>
<td></td>
<td></td>
<td>●</td>
<td>●</td>
</tr>
<tr>
<td align="right">机票价格趋势（7 天）</td>
<td></td>
<td>●</td>
<td></td>
<td></td>
</tr>
<tr>
<td align="right">机票特价机票(30 天内)</td>
<td></td>
<td>●</td>
<td></td>
<td></td>
</tr>
<tr>
<td align="right">航班进出港动态</td>
<td></td>
<td>●</td>
<td></td>
<td>●</td>
</tr>
<tr>
<td align="right">登机口导航</td>
<td></td>
<td>●</td>
<td></td>
<td></td>
</tr>
<tr>
<td align="right">机场延误情况</td>
<td></td>
<td>●</td>
<td></td>
<td></td>
</tr>
<tr>
<td align="right">google 地图定位</td>
<td>●</td>
<td></td>
<td>●</td>
<td>●</td>
</tr>
<tr>
<td align="right">周边酒店查询</td>
<td>●</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="right">快速通道（常住酒店）</td>
<td>●</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="right">天气预报</td>
<td></td>
<td></td>
<td>●</td>
<td></td>
</tr>
<tr>
<td align="right">国际机票</td>
<td></td>
<td></td>
<td>●</td>
<td>●</td>
</tr>
<tr>
<td align="right">国际酒店</td>
<td></td>
<td></td>
<td>●</td>
<td>●</td>
</tr>
<tr>
<td align="right">个人信息管理</td>
<td>●</td>
<td></td>
<td>●</td>
<td>●</td>
</tr>
<tr>
<td align="right">订单管理</td>
<td>●</td>
<td></td>
<td>●</td>
<td>●</td>
</tr>
<tr>
<td align="right">租车</td>
<td></td>
<td></td>
<td>●</td>
<td>●</td>
</tr>
<tr>
<td align="right">费用报销</td>
<td></td>
<td></td>
<td>●</td>
<td></td>
</tr>
<tr>
<td align="right">订餐</td>
<td></td>
<td></td>
<td>●</td>
<td></td>
</tr>
<tr>
<td align="right">分享旅行</td>
<td></td>
<td></td>
<td>●</td>
<td></td>
</tr>
<tr>
<td align="right">航空公司查询</td>
<td></td>
<td></td>
<td></td>
<td>●</td>
</tr>
<tr>
<td align="right">帮助</td>
<td>●</td>
<td></td>
<td></td>
<td>●</td>
</tr>
</tbody>
</table>
<h2>交互体验分析</h2>
<p>由于手机屏幕大小的局限性，提升手机屏幕交互体验，在设计中需遵守以下几个原则：</p>
<ul>
<li>简单性：少即是多，界面元素的简洁可减少用户认知难度、便于了解</li>
<li>一致性：视觉与交互形式</li>
<li>合理布局导航：有明确的方位导航，时刻让用户知道所在位置</li>
<li>高效率：核心功能层次目录不宜过深，并能方便的找到。减少浏览时的按键触发</li>
</ul>
<h3>Kayak iPhone</h3>
<p><a href="http://www.obird.net/wp-content/uploads/2010/08/6.jpg"><img class="alignnone size-full wp-image-489" title="kayak" src="http://www.obird.net/wp-content/uploads/2010/08/6.jpg" alt="" width="747" height="528" /></a></p>
<p>首页是系统交互的起点，其战略意义为重中之中。除了要树立产品品牌形象，更重要是要告诉用户可以做什么。</p>
<p>Kayak首页将界面分成三个功能区域头部区、主体内容区、提醒区。并根据7±2 原则(人类短期记忆只能记住5-9个事物)和功能维度，优先显示8个核心功能，并将其它5个辅助功能通过切换显示。图标设计也直观清晰，用户一眼就可辨识。背景采用高光投影，让整体显得更有立体感。</p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/08/7.jpg"><img title="kayak" src="http://www.obird.net/wp-content/uploads/2010/08/7.jpg" alt="" width="762" height="453" /></a></p>
<p>Kayak头部导航始终如一保持了其一致性，左侧后退，右侧返回首页，方便用户使用。</p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/08/8.jpg"><img class="alignnone size-full wp-image-491" title="google map" src="http://www.obird.net/wp-content/uploads/2010/08/8.jpg" alt="" width="787" height="390" /></a></p>
<p>Kayak在系统中集成了Google地图，来作为酒店周边搜索和位置的定位，这将大大提升整个搜索交互的体验，也可帮助用户了解酒店位置周边的旅行资源（交通、景点、酒店、酒吧等），但对现阶段国内手机3G未普及时的带宽速度也是个挑战。</p>
<h3>Concur Mobile iPhone</h3>
<p><a href="http://www.obird.net/wp-content/uploads/2010/08/9.jpg"><img class="alignnone size-full wp-image-492" title="Concur" src="http://www.obird.net/wp-content/uploads/2010/08/9.jpg" alt="" width="614" height="433" /></a></p>
<p>Concur首页的中间主体内容和底部在导航设计上提供了“多通道”，方便用户进入功能子页时可迅速切换至其它功能入口。但目前Concur有个缺点，纵向列表图标和横向标签都显示不全所有功能链接。</p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/08/10.jpg"><img class="alignnone size-full wp-image-493" title="Concur" src="http://www.obird.net/wp-content/uploads/2010/08/10.jpg" alt="" width="597" height="290" /></a></p>
<p>把保存按钮放在右边，首先从颜色上和了区分，让保存按钮更加突出和引导视觉流；也符合用户左边拿手机，右边操作的行为习惯。取消在左，保存在右，也可避免用户误点错按钮。</p>
<h3>携程无线 iPhone</h3>
<p><a href="http://www.obird.net/wp-content/uploads/2010/08/11.jpg"><img title="携程无线" src="http://www.obird.net/wp-content/uploads/2010/08/11.jpg" alt="" width="712" height="505" /></a></p>
<p>携程无线的界面设计简洁大方，在色彩选择也延续了其官网的蓝色系，沉稳而具有商务特质。一进入首页就直奔正题，按钮加上标题，让功能更易于用户认知。</p>
<p>携程无线在功能上没有太多亮点，基本也是将B2C平台上的功能往手机上作了移植。</p>
<h3>航班管家 iPhone</h3>
<p><a href="http://www.obird.net/wp-content/uploads/2010/08/12.jpg"><img class="alignnone size-full wp-image-498" title="航班管家" src="http://www.obird.net/wp-content/uploads/2010/08/12.jpg" alt="" width="734" height="536" /></a><br />
航班管家提供了3个有别于它家的个性化服务，记录历史查询、价格趋势、特价机票。</p>
<h2>总结</h2>
<p>随着3G和手机技术的普及发展，新一代基于手机商旅服务平台将为旅游出行者提供更为丰富便捷的消费体验。</p>
<p>国内除了携程和极少数的企业推出的手机商旅软件能够满足“一站式”旅游需求，其它都因速度慢、信息量少、无法走完全流程而显得有点名不符实。</p>
<p>手机互联网是未来发展的趋势，手机产品对界面交互也提出了更多的要求，产品的设计已由功能化和标准化需求慢慢演变成情感化服务，没有好的用户体验，最终很难留住越来越挑剔的用户。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.obird.net/user-experience/%e6%89%8b%e6%9c%ba%e5%95%86%e6%97%85%e4%ba%a7%e5%93%81%e4%bd%93%e9%aa%8c%e8%ae%be%e8%ae%a1%e6%b5%85%e6%9e%90/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>UX design. What, how and why.</title>
		<link>http://www.obird.net/user-experience/ux-design-what-how-and-why/</link>
		<comments>http://www.obird.net/user-experience/ux-design-what-how-and-why/#comments</comments>
		<pubDate>Wed, 23 Jun 2010 15:41:01 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[UX design]]></category>

		<guid isPermaLink="false">http://www.obird.net/?p=451</guid>
		<description><![CDATA[

View more presentations from Serena Facchinetti.
]]></description>
			<content:encoded><![CDATA[<div id="__ss_3301672" style="width: 425px;"><strong style="display: block; margin: 12px 0 4px;"></strong><object id="__sse3301672" 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=uxpresentationxbitmamaslidesharefinalcompresso-100228163954-phpapp01&amp;rel=0&amp;stripped_title=ux-design-what-how-and-why" /><param name="name" value="__sse3301672" /><param name="allowfullscreen" value="true" /><embed id="__sse3301672" type="application/x-shockwave-flash" width="425" height="355" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=uxpresentationxbitmamaslidesharefinalcompresso-100228163954-phpapp01&amp;rel=0&amp;stripped_title=ux-design-what-how-and-why" allowscriptaccess="always" allowfullscreen="true" name="__sse3301672"></embed></object></div>
<p><span id="more-451"></span></p>
<div style="padding: 5px 0 12px;">View more <a href="http://www.slideshare.net/">presentations</a> from <a href="http://www.slideshare.net/chiyaserena">Serena Facchinetti</a>.</div>
]]></content:encoded>
			<wfw:commentRss>http://www.obird.net/user-experience/ux-design-what-how-and-why/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>英文字母不换行这个BUG要不要解决？</title>
		<link>http://www.obird.net/user-experience/%e8%8b%b1%e6%96%87%e5%ad%97%e6%af%8d%e4%b8%8d%e6%8d%a2%e8%a1%8c%e8%bf%99%e4%b8%aabug%e8%a6%81%e4%b8%8d%e8%a6%81%e8%a7%a3%e5%86%b3%ef%bc%9f/</link>
		<comments>http://www.obird.net/user-experience/%e8%8b%b1%e6%96%87%e5%ad%97%e6%af%8d%e4%b8%8d%e6%8d%a2%e8%a1%8c%e8%bf%99%e4%b8%aabug%e8%a6%81%e4%b8%8d%e8%a6%81%e8%a7%a3%e5%86%b3%ef%bc%9f/#comments</comments>
		<pubDate>Fri, 07 May 2010 02:14:34 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[UX design]]></category>

		<guid isPermaLink="false">http://www.obird.net/?p=432</guid>
		<description><![CDATA[首先肯定的是：英文字母不换行是个BUG；这个BUG我在很多产品研发过程中也遇到了，跟测试、开发也PK不少。问题都是相对性的，对与错只是大家看待问题的角度和立场不同。
那我今天想讨论的是该BUG要不要解决和解决的方式。
我们先来看看国内外许多大型系统的做法：



系统名称 
处理方式 
实现成本
备注


携程
录入前普通限制 + 置之不理
普通
影响布局


艺龙
录入前普通限制 + 超出不给予输入
普通
不影响布局


Concur
录入前不作限制 + 超出自动截断
较复杂
不影响布局


淘宝
录入前严格验证 + 置之不理
复杂
影响布局


google
录入前普通验证 + 超出自动截断
较复杂
不影响布局



1、携程

在携程系统上如果用户输入一大堆没有意义的英文字母，是不会换行的。而这种情况更多只能出现在测试的时候。
2、艺龙

艺龙采用了严格的限制，超出字段指定最大值后不允许输入。
3、Concur
输入前

提交后显示效果：

Concur输入前不做严格限制，但在灵气显示时字数多余的全都不见了，系统超出自动截断，这样有个好处就是不影响布局。
4、淘宝

淘宝做法首先的字段上都作了详细的数据验证，强制不允许用户输入纯数字或字母的字符。
但依然没有逃过我精心的数字+字母不空格数据，我们看看这是我数字加字母后的淘宝的页面效果：

5、gmail

Gmail采用的是超出内容超出布局自动截断。
小结：
该问题在众多系统中都能看到它的存在，想单靠CSS是无法彻底解决的，大多的系统面对此问题也是“置之不理”。如结合JS，虽可以解决此问题，但也会给页面增添其它不确定因素。回头我再综合做个实验。
]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.obird.net/wp-content/uploads/2010/05/2.png"></a><a href="http://www.obird.net/wp-content/uploads/2010/05/7.jpg"></a><a href="http://www.obird.net/wp-content/uploads/2010/05/7.png"></a><a href="http://www.obird.net/wp-content/uploads/2010/05/8.png"></a><a href="http://www.obird.net/wp-content/uploads/2010/05/9.png"></a>首先肯定的是：英文字母不换行是个BUG；这个BUG我在很多产品研发过程中也遇到了，跟测试、开发也PK不少。问题都是相对性的，对与错只是大家看待问题的角度和立场不同。<br />
那我今天想讨论的是该BUG要不要解决和解决的方式。<br />
我们先来看看国内外许多大型系统的做法：</p>
<table border="0" cellspacing="1" cellpadding="1">
<tbody>
<tr>
<td width="122" valign="top"><strong>系统名称</strong><strong> </strong></td>
<td width="302" valign="top"><strong>处理方式</strong><strong> </strong></td>
<td width="113" valign="top"><strong>实现成本</strong><strong></strong></td>
<td width="132" valign="top"><strong>备注</strong><strong></strong></td>
</tr>
<tr>
<td width="122" valign="top">携程</td>
<td width="302" valign="top">录入前普通限制 + 置之不理</td>
<td width="113" valign="top">普通</td>
<td width="132" valign="top">影响布局</td>
</tr>
<tr>
<td width="122" valign="top">艺龙</td>
<td width="302" valign="top">录入前普通限制 + 超出不给予输入</td>
<td width="113" valign="top">普通</td>
<td width="132" valign="top">不影响布局</td>
</tr>
<tr>
<td width="122" valign="top">Concur</td>
<td width="302" valign="top">录入前不作限制 + 超出自动截断</td>
<td width="113" valign="top">较复杂</td>
<td width="132" valign="top">不影响布局</td>
</tr>
<tr>
<td width="122" valign="top">淘宝</td>
<td width="302" valign="top">录入前严格验证 + 置之不理</td>
<td width="113" valign="top">复杂</td>
<td width="132" valign="top">影响布局</td>
</tr>
<tr>
<td width="122" valign="top">google</td>
<td width="302" valign="top">录入前普通验证 + 超出自动截断</td>
<td width="113" valign="top">较复杂</td>
<td width="132" valign="top">不影响布局</td>
</tr>
</tbody>
</table>
<p><strong><span id="more-432"></span>1、携程</strong><br />
<a href="http://www.obird.net/wp-content/uploads/2010/05/1.png"><img class="alignnone size-full wp-image-435" title="携程" src="http://www.obird.net/wp-content/uploads/2010/05/1.png" alt="" width="741" height="638" /></a><br />
在携程系统上如果用户输入一大堆没有意义的英文字母，是不会换行的。而这种情况更多只能出现在测试的时候。</p>
<p><strong>2、艺龙</strong></p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/05/2.png"><img title="艺龙" src="http://www.obird.net/wp-content/uploads/2010/05/2.png" alt="" width="703" height="393" /></a></p>
<p>艺龙采用了严格的限制，超出字段指定最大值后不允许输入。</p>
<p><strong>3、Concur</strong></p>
<p>输入前<br />
<a href="http://www.obird.net/wp-content/uploads/2010/05/3.png"><img class="alignnone size-full wp-image-437" title="输入前" src="http://www.obird.net/wp-content/uploads/2010/05/3.png" alt="" width="700" height="455" /></a></p>
<p>提交后显示效果：<br />
<a href="http://www.obird.net/wp-content/uploads/2010/05/4.png"><img class="alignnone size-full wp-image-438" title="显示" src="http://www.obird.net/wp-content/uploads/2010/05/4.png" alt="" width="628" height="72" /></a></p>
<p>Concur输入前不做严格限制，但在灵气显示时字数多余的全都不见了，系统超出自动截断，这样有个好处就是不影响布局。</p>
<p><strong>4、淘宝</strong></p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/05/5.png"><img class="alignnone size-full wp-image-439" title="5" src="http://www.obird.net/wp-content/uploads/2010/05/5.png" alt="" width="483" height="93" /></a><a href="http://www.obird.net/wp-content/uploads/2010/05/6.png"><img class="alignnone size-full wp-image-440" title="6" src="http://www.obird.net/wp-content/uploads/2010/05/6.png" alt="" width="484" height="92" /></a></p>
<p>淘宝做法首先的字段上都作了详细的数据验证，强制不允许用户输入纯数字或字母的字符。<br />
但依然没有逃过我精心的数字+字母不空格数据，我们看看这是我数字加字母后的淘宝的页面效果：<br />
<a href="http://www.obird.net/wp-content/uploads/2010/05/8.png"><img title="8" src="http://www.obird.net/wp-content/uploads/2010/05/8.png" alt="" width="885" height="614" /></a></p>
<p>5、gmail</p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/05/9.png"><img title="9" src="http://www.obird.net/wp-content/uploads/2010/05/9.png" alt="" width="668" height="424" /></a></p>
<p>Gmail采用的是超出内容超出布局自动截断。</p>
<p><strong>小结：</strong></p>
<p>该问题在众多系统中都能看到它的存在，想单靠CSS是无法彻底解决的，大多的系统面对此问题也是“置之不理”。如结合JS，虽可以解决此问题，但也会给页面增添其它不确定因素。回头我再综合做个实验。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.obird.net/user-experience/%e8%8b%b1%e6%96%87%e5%ad%97%e6%af%8d%e4%b8%8d%e6%8d%a2%e8%a1%8c%e8%bf%99%e4%b8%aabug%e8%a6%81%e4%b8%8d%e8%a6%81%e8%a7%a3%e5%86%b3%ef%bc%9f/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>微软IE9-3D图形时代即将来临</title>
		<link>http://www.obird.net/news/%e5%be%ae%e8%bd%afie9-%e5%9b%be%e5%bd%a2%e6%97%b6%e4%bb%a3%e5%8d%b3%e5%b0%86%e6%9d%a5%e4%b8%b4/</link>
		<comments>http://www.obird.net/news/%e5%be%ae%e8%bd%afie9-%e5%9b%be%e5%bd%a2%e6%97%b6%e4%bb%a3%e5%8d%b3%e5%b0%86%e6%9d%a5%e4%b8%b4/#comments</comments>
		<pubDate>Thu, 18 Mar 2010 01:03:13 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[IE9]]></category>

		<guid isPermaLink="false">http://www.obird.net/?p=421</guid>
		<description><![CDATA[北京时间3月17日，微软公开了其IE的最新版本IE9技术预览版。这次微软IE9的升级目标不像是以前那样更多的只是修修BUG，没啥突破性的创新。
IE9虽然现处于技术预览版阶段，但未来IE9有几点是值得大家去期待的：

全面支持HTML5和CSS3
加强图形显示
矢量图形（SVG）功能
利用图形硬件加速提升性能
新增Javascript引擎（Chakra）

附：
IE 9预览版地址：http://ie.microsoft.com/testdrive/Default.html
IE9预览版下载：http://ie.microsoft.com/testdrive/info/ThankYou/Default.html


]]></description>
			<content:encoded><![CDATA[<p>北京时间3月17日，微软公开了其IE的最新版本IE9技术预览版。这次微软IE9的升级目标不像是以前那样更多的只是修修BUG，没啥突破性的创新。</p>
<p>IE9虽然现处于技术预览版阶段，但未来IE9有几点是值得大家去期待的：</p>
<ul>
<li>全面支持HTML5和CSS3</li>
<li>加强图形显示</li>
<li>矢量图形（SVG）功能</li>
<li>利用图形硬件加速提升性能</li>
<li>新增Javascript引擎（Chakra）</li>
</ul>
<p><strong>附：</strong><br />
IE 9预览版地址：<a href="http://ie.microsoft.com/testdrive/Default.html">http://ie.microsoft.com/testdrive/Default.html</a><br />
IE9预览版下载：<a href="http://ie.microsoft.com/testdrive/info/ThankYou/Default.html">http://ie.microsoft.com/testdrive/info/ThankYou/Default.html</a><br />
<span id="more-421"></span><br />
<a href="http://www.obird.net/wp-content/uploads/2010/03/ie9.jpg"><img class="alignnone size-full wp-image-422" title="ie9" src="http://www.obird.net/wp-content/uploads/2010/03/ie9.jpg" alt="ie9" width="996" height="788" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.obird.net/news/%e5%be%ae%e8%bd%afie9-%e5%9b%be%e5%bd%a2%e6%97%b6%e4%bb%a3%e5%8d%b3%e5%b0%86%e6%9d%a5%e4%b8%b4/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>淘宝新版登录新体验</title>
		<link>http://www.obird.net/user-experience/%e6%b7%98%e5%ae%9d%e6%96%b0%e7%89%88%e7%99%bb%e5%bd%95%e6%96%b0%e4%bd%93%e9%aa%8c-%e7%9c%81%e7%95%a5%e5%ae%89%e8%a3%85%e5%ae%89%e5%85%a8%e7%bb%84%e4%bb%b6/</link>
		<comments>http://www.obird.net/user-experience/%e6%b7%98%e5%ae%9d%e6%96%b0%e7%89%88%e7%99%bb%e5%bd%95%e6%96%b0%e4%bd%93%e9%aa%8c-%e7%9c%81%e7%95%a5%e5%ae%89%e8%a3%85%e5%ae%89%e5%85%a8%e7%bb%84%e4%bb%b6/#comments</comments>
		<pubDate>Thu, 04 Mar 2010 02:11:50 +0000</pubDate>
		<dc:creator>Jaybird</dc:creator>
				<category><![CDATA[UX design]]></category>

		<guid isPermaLink="false">http://www.obird.net/?p=400</guid>
		<description><![CDATA[今天登录了淘宝网，看到新版邀请，进去体验了一把。

据相关数据统计报导，09年的淘宝交易额达到了2000亿，注册用户达到近1.8亿。登录、注册页好比一家商场的门面，酒店的迎宾，是一切产品体验的源头入口。
相比旧版登录，我觉得有以下几方面的改进和体验提升：

降低了登录页过多的视觉噪音，现有登录页颜色杂乱，链接满天飞。
弱化了登录页的密码安全插件，安全和体验这曾经是一个长期备受争议的问题，当在互联网的前期，保证客户信息安全也是个赖之生存的根本之一。但对于新用户，频繁地提示你安装插件是件很讨人厌的事情。腾讯QQ就经常干这种事情，经常打着升级，保护安全的旗号推销自己的产品，所以现在我偶尔登录一次QQ就要手工关闭一次所谓QQ医生的安排提示，QQ你烦不烦呀。

去掉了广告

精确视觉引导注意力。现有的登录页登录和任务几乎是并行，有时会让用户搞不清我究意是到了注册还是登录，而点击登录页的大多数目标用户主任务就是我要登录，新版的设计很好地解决了这问题，一进来就把用户的注意力集中到了登录按钮。

一款 好的产品需要长期的修改和优化的过程，作为一个具备百万在线用户数的门户，现有设计已渐渐力不从心，同时也完成了他的历史性任务（2亿用户），渐渐地退出了舞台。
不过，现有的淘宝登录还是个Beta，会不会流产仍是个未知数，就让我们拭目以待吧。。。
]]></description>
			<content:encoded><![CDATA[<p>今天登录了淘宝网，看到新版邀请，进去体验了一把。<a href="http://www.obird.net/wp-content/uploads/2010/03/taobao1.jpg"><br />
</a><a href="http://www.obird.net/wp-content/uploads/2010/03/taobao1.jpg"><img class="alignnone size-full wp-image-410" title="新版体验提示" src="http://www.obird.net/wp-content/uploads/2010/03/taobao1.jpg" alt="新版体验提示" width="533" height="516" /></a></p>
<p>据相关数据统计报导，09年的淘宝交易额达到了2000亿，注册用户达到近1.8亿。登录、注册页好比一家商场的门面，酒店的迎宾，是一切产品体验的源头入口。<span id="more-400"></span></p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/03/taobao2.jpg"><img class="alignnone size-full wp-image-411" title="新版登录" src="http://www.obird.net/wp-content/uploads/2010/03/taobao2.jpg" alt="新版登录" width="923" height="604" /></a>相比旧版登录，我觉得有以下几方面的改进和体验提升：</p>
<ol>
<li>降低了登录页过多的视觉噪音，现有登录页颜色杂乱，链接满天飞。</li>
<li><strong>弱化了登录页的密码安全插件</strong>，安全和体验这曾经是一个长期备受争议的问题，当在互联网的前期，保证客户信息安全也是个赖之生存的根本之一。但对于新用户，频繁地提示你安装插件是件很讨人厌的事情。腾讯QQ就经常干这种事情，经常打着升级，保护安全的旗号推销自己的产品，所以现在我偶尔登录一次QQ就要手工关闭一次所谓QQ医生的安排提示，QQ你烦不烦呀。<br />
<a href="http://www.obird.net/wp-content/uploads/2010/03/taobao3.jpg"><img class="alignnone size-full wp-image-406" title="密码安全控件" src="http://www.obird.net/wp-content/uploads/2010/03/taobao3.jpg" alt="密码安全控件" width="871" height="446" /></a></li>
<li>去掉了广告<br />
<a href="http://www.obird.net/wp-content/uploads/2010/03/taobao.jpg"><img class="alignnone size-full wp-image-407" title="淘宝登录" src="http://www.obird.net/wp-content/uploads/2010/03/taobao.jpg" alt="淘宝广告" width="821" height="401" /></a></li>
<li>精确视觉引导注意力。现有的登录页登录和任务几乎是并行，有时会让用户搞不清我究意是到了注册还是登录，而点击登录页的大多数目标用户主任务就是我要登录，新版的设计很好地解决了这问题，一进来就把用户的注意力集中到了登录按钮。</li>
</ol>
<p>一款 好的产品需要长期的修改和优化的过程，作为一个具备百万在线用户数的门户，现有设计已渐渐力不从心，同时也完成了他的历史性任务（2亿用户），渐渐地退出了舞台。</p>
<p>不过，现有的淘宝登录还是个Beta，会不会流产仍是个未知数，就让我们拭目以待吧。。。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.obird.net/user-experience/%e6%b7%98%e5%ae%9d%e6%96%b0%e7%89%88%e7%99%bb%e5%bd%95%e6%96%b0%e4%bd%93%e9%aa%8c-%e7%9c%81%e7%95%a5%e5%ae%89%e8%a3%85%e5%ae%89%e5%85%a8%e7%bb%84%e4%bb%b6/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>设计从心开始</title>
		<link>http://www.obird.net/user-experience/%e8%ae%be%e8%ae%a1%e4%bb%8e%e5%bf%83%e5%bc%80%e5%a7%8b/</link>
		<comments>http://www.obird.net/user-experience/%e8%ae%be%e8%ae%a1%e4%bb%8e%e5%bf%83%e5%bc%80%e5%a7%8b/#comments</comments>
		<pubDate>Mon, 01 Mar 2010 01:11:18 +0000</pubDate>
		<dc:creator>Jaybird</dc:creator>
				<category><![CDATA[UX design]]></category>
		<category><![CDATA[老人机]]></category>

		<guid isPermaLink="false">http://www.obird.net/?p=382</guid>
		<description><![CDATA[何谓创新
很多时间大家觉得，在产品设计过程中，创新一定就是标新立异。而今天想分享的是：哪怕只有解决用户存在的很小的问题，只要它对用户有用，就可称之为创新。
设计中的5W原则
这是从新闻写作中的5W+H引申过来的互联网产品设计的原则。

Who :  为谁设计，购买者和使用者是谁？
What ： 设计的本质是为了解决什么问题。
Why ：为什么要这样设计，是否有其它的解决方式
Where ： 用户在什么样和哪里的坏境下使用
When ： 行业趋势如何，如何设定计划


好的设计，要有人文关怀
前段时间听老妈子说她现在的手机不好用，老妈用的是一款索爱手机，主要问题是电池太快，按键太小，屏幕显示文字小，界面功能繁杂。找遍了国美、顺电的手机款式功能都是清一色，几乎没有一个适合像我老妈这个人物角色使用的手机。无意之中却找到了专为老年人设计的专用手机。

老人机的设计主要以易用为理念，只保留打电话、发信息的核心功能， 界面上采用大按钮、大字体，简化了传统的菜单结构和任务操作步骤，以达到让老年人们不看说明书就能操作上手。同时还增强的屏幕显示的对比色，老年人不带老花眼镜，都能看得清。更有创意和重要的亲情号码功能，从上图手机键盘的下方，可以设置儿子和女儿快速拨打功能，只要按一键就能联通儿子或女儿。这还不够，背面还是SOS键，预防老年人在紧急情况下使用，一旦触发即联接120等急救中心，预设短信同步发给亲人。
这已不但是一个追求产品功能的时代，还是个通过设计传达情感的时代。

]]></description>
			<content:encoded><![CDATA[<h5>何谓创新</h5>
<p>很多时间大家觉得，在产品设计过程中，创新一定就是标新立异。而今天想分享的是：哪怕只有解决用户存在的很小的问题，只要它对用户有用，就可称之为创新。</p>
<h5>设计中的5W原则</h5>
<p>这是从新闻写作中的5W+H引申过来的互联网产品设计的原则。</p>
<ul>
<li>Who :  为谁设计，购买者和使用者是谁？</li>
<li>What ： 设计的本质是为了解决什么问题。</li>
<li>Why ：为什么要这样设计，是否有其它的解决方式</li>
<li>Where ： 用户在什么样和哪里的坏境下使用</li>
<li>When ： 行业趋势如何，如何设定计划</li>
</ul>
<p><span id="more-382"></span></p>
<h5>好的设计，要有人文关怀</h5>
<p>前段时间听老妈子说她现在的手机不好用，老妈用的是一款索爱手机，主要问题是电池太快，按键太小，屏幕显示文字小，界面功能繁杂。找遍了国美、顺电的手机款式功能都是清一色，几乎没有一个适合像我老妈这个人物角色使用的手机。无意之中却找到了专为老年人设计的专用手机。</p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/老人机.png"><img class="alignnone size-full wp-image-393" title="老人机" src="http://www.obird.net/wp-content/uploads/2010/02/老人机.png" alt="老人机" width="706" height="716" /></a></p>
<p>老人机的设计主要以易用为理念，只保留<strong>打电话、发信息</strong>的核心功能， 界面上采用大按钮、大字体，简化了传统的菜单结构和任务操作步骤，以达到让老年人们<strong>不看说明书就能操作上手</strong>。同时还增强的屏幕显示的对比色，老年人不带老花眼镜，都能看得清。更有创意和重要的亲情号码功能，从上图手机键盘的下方，可以设置儿子和女儿快速拨打功能，只要按一键就能联通儿子或女儿。这还不够，背面还是SOS键，预防老年人在紧急情况下使用，一旦触发即联接120等急救中心，预设短信同步发给亲人。</p>
<p>这已不但是一个<strong>追求产品功能的时代</strong>，还是个通过<strong>设计传达情感的时代</strong>。</p>
<p><img src="file:///C:/Users/jaybird/AppData/Local/Temp/moz-screenshot.png" alt="" /><img src="file:///C:/Users/jaybird/AppData/Local/Temp/moz-screenshot-1.png" alt="" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.obird.net/user-experience/%e8%ae%be%e8%ae%a1%e4%bb%8e%e5%bf%83%e5%bc%80%e5%a7%8b/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>云计算 机遇与未来</title>
		<link>http://www.obird.net/news/%e4%ba%91%e8%ae%a1%e7%ae%97-%e6%9c%ba%e9%81%87%e4%b8%8e%e6%9c%aa%e6%9d%a5/</link>
		<comments>http://www.obird.net/news/%e4%ba%91%e8%ae%a1%e7%ae%97-%e6%9c%ba%e9%81%87%e4%b8%8e%e6%9c%aa%e6%9d%a5/#comments</comments>
		<pubDate>Tue, 23 Feb 2010 01:11:41 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[云计算]]></category>

		<guid isPermaLink="false">http://www.obird.net/?p=376</guid>
		<description><![CDATA[大家相信吗？如果终有一天，你也许可以选择不需要安装Windows，不需要安排任何软件就可以使用电脑了。
随着云计算概念的掀起，云计算再一次又掀起了互联网革命大潮，也将再一次带来新的机遇。全球引领云计算技术的两大巨头微软(Microsoft)、谷歌(Google)在云计算上的商业模式也是各有所向。
话说回来，我还是更看好Microsoft的云计算概念，以软件为基础，再结合PC、手机、电视等多种终端来给客户提供服务。而google的云计算推崇的是未来的用户软件不需要安装，所有软件来自于云端，客户端你只需要一个浏览器，这一点从google  calander、google doc、google  talk。。。等产品的大布局可预测得到。以目前的互联网带宽、数据、习惯、政策风险等，还是个蛮遥远的，这一点也很敬佩google，不走寻常路，敢于冒险赌未来。
满足云计算的基础设施就是数据存放、目前微软、雅虎、谷歌已在全球开始了数据中心建设，我看了微软数据中心的创造成本，一个数据中心就是10个亿，整个数据中心采用的是最新的集装箱服务器，不再是以前的塔式、刀片服务器了。这样的前期投入只有大巨头才舍得花。
期待云计算带来的创新与机遇，给企业带来的好处也，但数据安全和存储速度更是用户关心的重中之中。

]]></description>
			<content:encoded><![CDATA[<p>大家相信吗？如果终有一天，你也许可以选择不需要安装Windows，不需要安排任何软件就可以使用电脑了。</p>
<p>随着云计算概念的掀起，云计算再一次又掀起了互联网革命大潮，也将再一次带来新的机遇。全球引领云计算技术的两大巨头微软(Microsoft)、谷歌(Google)在云计算上的商业模式也是各有所向。</p>
<p>话说回来，我还是更看好Microsoft的云计算概念，以软件为基础，再结合PC、手机、电视等多种终端来给客户提供服务。而google的云计算推崇的是未来的用户软件不需要安装，所有软件来自于云端，客户端你只需要一个浏览器，这一点从google  calander、google doc、google  talk。。。等产品的大布局可预测得到。以目前的互联网带宽、数据、习惯、政策风险等，还是个蛮遥远的，这一点也很敬佩google，不走寻常路，敢于冒险赌未来。<span id="more-376"></span></p>
<p>满足云计算的基础设施就是数据存放、目前微软、雅虎、谷歌已在全球开始了数据中心建设，我看了微软数据中心的创造成本，一个数据中心就是10个亿，整个数据中心采用的是最新的集装箱服务器，不再是以前的塔式、刀片服务器了。这样的前期投入只有大巨头才舍得花。</p>
<p>期待云计算带来的创新与机遇，给企业带来的好处也，但数据安全和存储速度更是用户关心的重中之中。</p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/cloud.jpg"><img class="alignnone size-full wp-image-378" title="cloud" src="http://www.obird.net/wp-content/uploads/2010/02/cloud.jpg" alt="云计算" width="800" height="404" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.obird.net/news/%e4%ba%91%e8%ae%a1%e7%ae%97-%e6%9c%ba%e9%81%87%e4%b8%8e%e6%9c%aa%e6%9d%a5/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Web前端性能优化项目</title>
		<link>http://www.obird.net/web-standards/web%e5%89%8d%e7%ab%af%e6%80%a7%e8%83%bd%e4%bc%98%e5%8c%96%e9%a1%b9%e7%9b%ae/</link>
		<comments>http://www.obird.net/web-standards/web%e5%89%8d%e7%ab%af%e6%80%a7%e8%83%bd%e4%bc%98%e5%8c%96%e9%a1%b9%e7%9b%ae/#comments</comments>
		<pubDate>Tue, 09 Feb 2010 01:22:59 +0000</pubDate>
		<dc:creator>Jaybird</dc:creator>
				<category><![CDATA[Front-end]]></category>
		<category><![CDATA[前端性能]]></category>

		<guid isPermaLink="false">http://www.obird.net/web-standards/web%e5%89%8d%e7%ab%af%e6%80%a7%e8%83%bd%e4%bc%98%e5%8c%96%e9%a1%b9%e7%9b%ae/</guid>
		<description><![CDATA[前段时间，为自己的三年前负责的WEB产品重新作了一次性能优化，回顾到3年前的那些日子，W3C标准在国内仍处于萌芽状态，Table布局泛滥于中国互联网各大大小小互联网产品之中，W3C标准只是个互联网时尚的代名词。截到今天为止，W3C标准已不在是一种口号，而是实现的依据和标准。
推动WEB前端性能优化，我觉得需把握以下关键三要点：

提升WEB前端响应性能，性能为王。没有速度，就会失去用户，这是用户体验的基石之一；
易于维护，内容与表现合理地分离。这是一个敏捷的时代，产品的更新维护和团队的协作更讲究的是效率。
符合满足SEO的要求，你的产品不是只为自己和客户服务，更要为我们桥接于用户的搜索引擎服务，只有这样你才能有收益，才能有后期的ROI和转化率。

作为以网络起家的YAHOO及其性能团队，所总结出来的2/8原则已成为WEB前端性能优化法则：只有10~20%用户响应时间花在从Web服务器获取HTML文档并传送到浏览器中。其余的80%~90%时间花在下载页面中的所有组件中。

基于以上的结论，我们很有必要去关注WEB前端性能，并通过各种方法去改善提升它。如将后端响应执行速度提高一倍，整体也只能减少5~10%，而关注前端性能，同样减少一半，那它带来的整体响应速度将可减少40~50%。
优化指导
由于当年实施该项目时的历史原因问题，给前端性能方面埋下了不少的弊端，以下是我负责整个优化实施的优化指导。
前端性能优化更重要的是分析问题的方法、思路和细节的把握。因项目保密原因，请原谅我以下资料提供的完整性，仅供参考：



优化结果
一切的努力也同样需要数据来说话，这是优化前后的对比。



 
原版 
优化后 


YSlow
D
B


Page weight
884k
426k


Http Request
40
13


Response time
18.6sec
4.4sec



备注：数据来源于：http://tools.pingdom.com/ 及 YSlow
其实整个性能来说几乎可做到YSLOW的A，遗憾的是CDN方面仍有所欠缺。
]]></description>
			<content:encoded><![CDATA[<p>前段时间，为自己的三年前负责的WEB产品重新作了一次性能优化，回顾到3年前的那些日子，W3C标准在国内仍处于萌芽状态，Table布局泛滥于中国互联网各大大小小互联网产品之中，W3C标准只是个互联网时尚的代名词。截到今天为止，W3C标准已不在是一种口号，而是实现的依据和标准。</p>
<p>推动WEB前端性能优化，我觉得需把握以下关键三要点：</p>
<ol>
<li>提升WEB前端响应性能，性能为王。没有速度，就会失去用户，这是用户体验的基石之一；</li>
<li>易于维护，内容与表现合理地分离。这是一个敏捷的时代，产品的更新维护和团队的协作更讲究的是效率。</li>
<li>符合满足SEO的要求，你的产品不是只为自己和客户服务，更要为我们桥接于用户的搜索引擎服务，只有这样你才能有收益，才能有后期的ROI和转化率。</li>
</ol>
<p>作为以网络起家的YAHOO及其性能团队，所总结出来的2/8原则已成为WEB前端性能优化法则：<strong>只有10~20%用户响应时间花在从Web服务器获取HTML文档并传送到浏览器中。其余的80%~90%时间花在下载页面中的所有组件中。<a href="http://www.obird.net/wp-content/uploads/2010/02/13.jpg"><img class="alignnone size-full wp-image-369" title="前端后端" src="http://www.obird.net/wp-content/uploads/2010/02/13.jpg" alt="" width="593" height="361" /></a></strong></p>
<p><span id="more-368"></span></p>
<p>基于以上的结论，我们很有必要去关注WEB前端性能，并通过各种方法去改善提升它。<strong>如将后端响应执行速度提高一倍，整体也只能减少5~10%，而关注前端性能，同样减少一半，那它带来的整体响应速度将可减少40~50%。</strong></p>
<h3>优化指导</h3>
<p>由于当年实施该项目时的历史原因问题，给前端性能方面埋下了不少的弊端，以下是我负责整个优化实施的优化指导。</p>
<p>前端性能优化更重要的是<strong>分析问题的方法、思路和细节的把握</strong>。因项目保密原因，请原谅我以下资料提供的完整性，仅供参考：</p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/22.jpg"><img class="alignnone size-full wp-image-370" title="HTTP请求" src="http://www.obird.net/wp-content/uploads/2010/02/22.jpg" alt="" width="691" height="715" /></a></p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/32.jpg"><img class="alignnone size-full wp-image-371" title="expires头" src="http://www.obird.net/wp-content/uploads/2010/02/32.jpg" alt="" width="674" height="755" /></a></p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/41.jpg"><img class="alignnone size-full wp-image-372" title="iframe" src="http://www.obird.net/wp-content/uploads/2010/02/41.jpg" alt="" width="671" height="505" /></a></p>
<h3>优化结果</h3>
<p>一切的努力也同样需要数据来说话，这是优化前后的对比。</p>
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="198" valign="top"><strong> </strong></td>
<td width="198" valign="top"><strong>原版</strong><strong> </strong></td>
<td width="198" valign="top"><strong>优化后</strong><strong> </strong></td>
</tr>
<tr>
<td width="198" valign="top"><strong>YSlow</strong></td>
<td width="198" valign="top"><strong>D</strong></td>
<td width="198" valign="top">B</td>
</tr>
<tr>
<td width="198" valign="top"><strong>Page weight</strong></td>
<td width="198" valign="top">884k</td>
<td width="198" valign="top">426k</td>
</tr>
<tr>
<td width="198" valign="top"><strong>Http Request</strong></td>
<td width="198" valign="top">40</td>
<td width="198" valign="top">13</td>
</tr>
<tr>
<td width="198" valign="top"><strong>Response time</strong></td>
<td width="198" valign="top">18.6sec</td>
<td width="198" valign="top">4.4sec</td>
</tr>
</tbody>
</table>
<p>备注：数据来源于：<a href="http://tools.pingdom.com/">http://tools.pingdom.com/</a> 及 YSlow</p>
<p>其实整个性能来说几乎可做到YSLOW的A，遗憾的是CDN方面仍有所欠缺。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.obird.net/web-standards/web%e5%89%8d%e7%ab%af%e6%80%a7%e8%83%bd%e4%bc%98%e5%8c%96%e9%a1%b9%e7%9b%ae/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>海南游 &#8211; 下</title>
		<link>http://www.obird.net/my-life/%e6%b5%b7%e5%8d%97%e6%b8%b8-%e4%b8%8b/</link>
		<comments>http://www.obird.net/my-life/%e6%b5%b7%e5%8d%97%e6%b8%b8-%e4%b8%8b/#comments</comments>
		<pubDate>Mon, 23 Nov 2009 13:13:40 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[My Life]]></category>
		<category><![CDATA[呀诺达]]></category>
		<category><![CDATA[海南]]></category>

		<guid isPermaLink="false">http://www.obird.net/?p=344</guid>
		<description><![CDATA[海南岛的热带雨带-呀诺达]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.obird.net/wp-content/uploads/2009/11/10.jpg"></a>一天下来回到酒店就1点了，三亚太美了，应该多看看，睡觉有点太奢侈了！^0^­</p>
<p>第二天的行程是海南热南雨林-呀诺达，全美式服务，不过更多的是洗脑服务。­</p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/12.jpg"><img class="alignnone size-full wp-image-346" title="牛郎织女" src="http://www.obird.net/wp-content/uploads/2010/02/12.jpg" alt="" width="630" height="400" /></a><br />
呀诺达大门口，感觉像新婚似的<br />
<span id="more-344"></span></p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/21.jpg"><img class="alignnone size-full wp-image-347" title="呀诺达班车" src="http://www.obird.net/wp-content/uploads/2010/02/21.jpg" alt="呀诺达班车" width="670" height="445" /></a><br />
坐上呀诺达的班车了</p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/31.jpg"><img class="alignnone size-full wp-image-348" title="椰子树" src="http://www.obird.net/wp-content/uploads/2010/02/31.jpg" alt="" width="670" height="470" /></a><br />
沿路风光</p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/51.jpg"><img class="alignnone size-full wp-image-349" title="山顶别墅" src="http://www.obird.net/wp-content/uploads/2010/02/51.jpg" alt="" width="670" height="420" /></a><br />
山顶湖</p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/61.jpg"><img class="alignnone size-full wp-image-350" title="桥" src="http://www.obird.net/wp-content/uploads/2010/02/61.jpg" alt="" width="670" height="445" /></a><br />
摇晃的桥</p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/7.jpg"><img class="alignnone size-full wp-image-351" title="瞭望台" src="http://www.obird.net/wp-content/uploads/2010/02/7.jpg" alt="" width="531" height="800" /></a><br />
爬上呀诺达山上的瞭望台</p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/81.jpg"><img class="alignnone size-full wp-image-352" title="凳子" src="http://www.obird.net/wp-content/uploads/2010/02/81.jpg" alt="" width="670" height="445" /></a><br />
超有个性的凳子</p>
<p><a href="http://www.obird.net/wp-content/uploads/2009/11/9.jpg"><img class="alignnone size-full wp-image-354" title="酒店游泳池" src="http://www.obird.net/wp-content/uploads/2009/11/9.jpg" alt="" width="670" height="387" /></a><br />
临走了，回到Boss住的酒店，游下泳再拍几张留念一下。</p>
<p><a href="http://www.obird.net/wp-content/uploads/2009/11/10.jpg"><img title="椭子林" src="http://www.obird.net/wp-content/uploads/2009/11/10.jpg" alt="" width="670" height="445" /></a><br />
临走前来了海边，再次看到椰子林</p>
<p><a href="http://www.obird.net/wp-content/uploads/2009/11/11.jpg"><img class="alignnone size-full wp-image-356" title="酒吧" src="http://www.obird.net/wp-content/uploads/2009/11/11.jpg" alt="" width="670" height="420" /></a><br />
很惬意的海边酒边，播着超炫的爵士音乐。</p>
<p><a href="http://www.obird.net/wp-content/uploads/2009/11/12.jpg"><img class="alignnone size-full wp-image-357" title="彩霞" src="http://www.obird.net/wp-content/uploads/2009/11/12.jpg" alt="" width="670" height="419" /></a><br />
日落黄昏，天空中慢慢出现了一片彩霞。</p>
<p><a href="http://www.obird.net/wp-content/uploads/2009/11/13.jpg"><img class="alignnone size-full wp-image-358" title="美酒" src="http://www.obird.net/wp-content/uploads/2009/11/13.jpg" alt="" width="670" height="445" /></a><br />
很美，酒不醉人自醉也！</p>
<p><a href="http://www.obird.net/wp-content/uploads/2009/11/14.jpg"><img class="alignnone size-full wp-image-359" title="天涯海角" src="http://www.obird.net/wp-content/uploads/2009/11/14.jpg" alt="" width="670" height="445" /></a><br />
别了，天涯海角，下次再会！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.obird.net/my-life/%e6%b5%b7%e5%8d%97%e6%b8%b8-%e4%b8%8b/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>海南游 &#8211; 上</title>
		<link>http://www.obird.net/my-life/%e6%b5%b7%e5%8d%97%e6%b8%b8-%e7%ac%ac%e4%b8%80%e5%a4%a9/</link>
		<comments>http://www.obird.net/my-life/%e6%b5%b7%e5%8d%97%e6%b8%b8-%e7%ac%ac%e4%b8%80%e5%a4%a9/#comments</comments>
		<pubDate>Thu, 19 Nov 2009 03:55:00 +0000</pubDate>
		<dc:creator>Jaybird</dc:creator>
				<category><![CDATA[My Life]]></category>
		<category><![CDATA[海南，海南岛]]></category>

		<guid isPermaLink="false">http://www.obird.net/my-life/%e6%b5%b7%e5%8d%97%e6%b8%b8-%e7%ac%ac%e4%b8%80%e5%a4%a9/</guid>
		<description><![CDATA[从海南三亚回来后，总算闲下来整理图片写写游记了！此次组织的Team Building三亚游虽行程匆匆，但三亚整体给我留下的印象还是不错的。­
 
出发地：深圳宝安机场

 
到达海南凤凰机场，这机场很小，感觉就跟个大一点的汽车站差不多  

飞机延迟了2小时，到达机场时已是12点整。  

海南的早晨，透过窗户，看到三亚市的市树-椰子树  

吃完酒店的自助早餐，开始出发。。。  

第一站：天涯海角，感觉很普通，按说是三亚市最普通的景点了，本地人一般都不来，没办法，我是外地来的。  

特喜欢三亚的天空和海，很蓝很清澈！  

走了好长一段，终于快接近天涯海角了，其实就一块石头！  

这场图像极了韩剧里常用的场景，最令人回味的景观。  

飞艇
第二站：亚龙湾，听同事说这里比夏威夷的水还要清，我下去游玩了好一阵，确实很漂亮。还去潜了水，不过没潜深，没
留下什么图片  

走累了，看着就想躺下好好坐上一会  

怡人沙滩  

逛了一天，终于要吃上海鲜了，海边餐厅，够贵，没有一个菜低于100元的。  
  

全身长满刺的海胆。
第三站：在海边喝饱吃足后，和同事一起唱K。   
 
三亚市区某夜景，游玩一天完毕，打道回府！！！
]]></description>
			<content:encoded><![CDATA[<p>从海南三亚回来后，总算闲下来整理图片写写游记了！此次组织的Team Building三亚游虽行程匆匆，但三亚整体给我留下的印象还是不错的。­</p>
<p> <a href="http://www.obird.net/wp-content/uploads/2010/02/11.jpg"><img class="alignnone size-medium wp-image-310" title="深圳宝安机场" src="http://www.obird.net/wp-content/uploads/2010/02/11-600x398.jpg" alt="" width="600" height="398" /></a><br />
出发地：深圳宝安机场</p>
<p><span id="more-308"></span></p>
<p> <a href="http://www.obird.net/wp-content/uploads/2010/02/2.jpg"><img class="alignnone size-medium wp-image-311" title="海南三亚机场" src="http://www.obird.net/wp-content/uploads/2010/02/2-600x398.jpg" alt="" width="600" height="398" /></a><br />
到达海南凤凰机场，这机场很小，感觉就跟个大一点的汽车站差不多  </p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/3.jpg"><img class="alignnone size-medium wp-image-312" title="海南酒店" src="http://www.obird.net/wp-content/uploads/2010/02/3-398x600.jpg" alt="" width="398" height="600" /></a><br />
飞机延迟了2小时，到达机场时已是12点整。  </p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/4.jpg"><img class="alignnone size-medium wp-image-313" title="海南早晨" src="http://www.obird.net/wp-content/uploads/2010/02/4-600x398.jpg" alt="" width="600" height="398" /></a><br />
海南的早晨，透过窗户，看到三亚市的市树-椰子树  </p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/5.jpg"><img class="alignnone size-medium wp-image-314" title="自助餐" src="http://www.obird.net/wp-content/uploads/2010/02/5-600x519.jpg" alt="" width="600" height="519" /></a><br />
吃完酒店的自助早餐，开始出发。。。  </p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/6.jpg"><img class="alignnone size-medium wp-image-315" title="天涯海角" src="http://www.obird.net/wp-content/uploads/2010/02/6-600x360.jpg" alt="" width="600" height="360" /></a><br />
第一站：天涯海角，感觉很普通，按说是三亚市最普通的景点了，本地人一般都不来，没办法，我是外地来的。  </p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/8.jpg"><img class="alignnone size-medium wp-image-316" title="海南天空" src="http://www.obird.net/wp-content/uploads/2010/02/8-600x398.jpg" alt="" width="600" height="398" /></a><br />
特喜欢三亚的天空和海，很蓝很清澈！  </p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/9.jpg"><img class="alignnone size-medium wp-image-317" title="路标" src="http://www.obird.net/wp-content/uploads/2010/02/9-600x350.jpg" alt="" width="600" height="350" /></a><br />
走了好长一段，终于快接近天涯海角了，其实就一块石头！  </p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/10.jpg"><img class="alignnone size-medium wp-image-318" title="海中长廊" src="http://www.obird.net/wp-content/uploads/2010/02/10-600x398.jpg" alt="" width="600" height="398" /></a><br />
这场图像极了韩剧里常用的场景，最令人回味的景观。  </p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/111.jpg"><img class="alignnone size-medium wp-image-319" title="船" src="http://www.obird.net/wp-content/uploads/2010/02/111-398x600.jpg" alt="" width="398" height="600" /></a><br />
飞艇</p>
<p>第二站：亚龙湾，听同事说这里比夏威夷的水还要清，我下去游玩了好一阵，确实很漂亮。还去潜了水，不过没潜深，没</p>
<p>留下什么图片  </p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/14.jpg"><img class="alignnone size-medium wp-image-321" title="亚龙湾" src="http://www.obird.net/wp-content/uploads/2010/02/14-600x398.jpg" alt="" width="600" height="398" /></a><br />
走累了，看着就想躺下好好坐上一会  </p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/15.jpg"><img class="alignnone size-medium wp-image-322" title="亚龙湾沙滩" src="http://www.obird.net/wp-content/uploads/2010/02/15-600x326.jpg" alt="" width="600" height="326" /></a><br />
怡人沙滩  </p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/16.jpg"><img class="alignnone size-medium wp-image-323" title="东海龙宫" src="http://www.obird.net/wp-content/uploads/2010/02/16-600x379.jpg" alt="" width="600" height="379" /></a><br />
逛了一天，终于要吃上海鲜了，海边餐厅，够贵，没有一个菜低于100元的。  <br />
  </p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/17.jpg"><img class="alignnone size-medium wp-image-324" title="海胆" src="http://www.obird.net/wp-content/uploads/2010/02/17-600x398.jpg" alt="" width="600" height="398" /></a><br />
全身长满刺的海胆。</p>
<p>第三站：在海边喝饱吃足后，和同事一起唱K。   </p>
<p><a href="http://www.obird.net/wp-content/uploads/2010/02/18.jpg"><img class="alignnone size-medium wp-image-325" title="海南夜景" src="http://www.obird.net/wp-content/uploads/2010/02/18-600x398.jpg" alt="" width="600" height="398" /></a> <br />
三亚市区某夜景，游玩一天完毕，打道回府！！！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.obird.net/my-life/%e6%b5%b7%e5%8d%97%e6%b8%b8-%e7%ac%ac%e4%b8%80%e5%a4%a9/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
