<?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>KDUED.COM &#187; 前端开发</title>
	<atom:link href="http://www.kdued.com/category/frontend-dev/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.kdued.com</link>
	<description></description>
	<lastBuildDate>Fri, 27 Aug 2010 01:15:23 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>新网站被google，百度收录的小技巧</title>
		<link>http://www.kdued.com/2009/08/%e6%96%b0%e7%bd%91%e7%ab%99%e8%a2%abgoogle%ef%bc%8c%e7%99%be%e5%ba%a6%e6%94%b6%e5%bd%95%e7%9a%84%e5%b0%8f%e6%8a%80%e5%b7%a7/</link>
		<comments>http://www.kdued.com/2009/08/%e6%96%b0%e7%bd%91%e7%ab%99%e8%a2%abgoogle%ef%bc%8c%e7%99%be%e5%ba%a6%e6%94%b6%e5%bd%95%e7%9a%84%e5%b0%8f%e6%8a%80%e5%b7%a7/#comments</comments>
		<pubDate>Tue, 11 Aug 2009 01:41:01 +0000</pubDate>
		<dc:creator>xibao</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[seo优化]]></category>

		<guid isPermaLink="false">http://www.kdued.com/?p=1425</guid>
		<description><![CDATA[百度更新时间&#8212;-作 为一名网站站长，来自搜索引擎的流量已经是网站流量的一个重要组成部分，因此对搜索引擎更新特别关注，总是希望自己的网站在百度收录越来越多，天天 site，麻烦的要命，大家掌握一下百度收录的大概更新时间就不用天天site了。百度收录的大更新时间是每月11号 和 26号，特别是26号，更新幅度最大，K站也是最多的。 小更新时间:每周四。 更新时刻都在凌晨4点。 一般凌晨4点更新，对网站流量都没啥影响，只有到中午的时候，百度对网站的关键字搜索进行重新调整之后，才会有流量上的大的变化，自然流量有增自然有降。
google收录时间 &#8212;-更新后第4天 更新时间 每七天更新一次(排名影响小) 大更新时间 每月更新一次(排名影响大) PR数值更新3个月更新完一次(9月20日更新过以此类推)因为存在不同服务器更新总时间为一星期 GOOGLE有两种爬虫一种是收录爬虫,此爬虫是专门收录网站用的,还有一种是增加排名的爬虫,此爬虫是综合计算反响连接用的爬虫,并且对排名的稳定和位 置很重要. 所以有的新站,在刚收录的时候排名不是很好就是很差,这是因为第一个爬虫的原因,但是网站掉了不要着急,真正排站要在三个月后第二个爬虫来的时候来会生 效. 还有就是GOOGLE谷歌研究者们发现了一个很简单的办法，就是查看GOOGLE的几个镜像站点是否相同，因为在GOOGLE更新期间，他总是将 www2.google.com或者www3.google.com作为更新测试站点，在这期间，后两个站点中索引的页面数量和主站点将会不同。比如当我 们从www.google.com，www2.google.com ， www3.google.com 还有就是一种情况： 三个网站搜索同一个关键词，得到的结果的数量不相同，这就说明GOOGLE正在更新。 GOOGLE这种大规模的更新在国外被称为GOOGLE DANCE（狗狗跳舞），有一个专门协助我们检查他是否正在跳舞的网站 http://www.google-dance-tool.com 这个网站提供一个工具，通过这个工具，我们只需要输入一个关键词然后点击一个按钮，就可以看到GOOGLE三个镜像站点的搜索结果，很方便我们对比。
其实最重要的还是提高网站的质量，不能是网站的设计，还是内容，还是页面的代码，都需要得到很好的优化。
]]></description>
			<content:encoded><![CDATA[<p>百度更新时间&#8212;-作 为一名网站站长，来自搜索引擎的流量已经是网站流量的一个重要组成部分，因此对搜索引擎更新特别关注，总是希望自己的网站在百度收录越来越多，天天 site，麻烦的要命，大家掌握一下百度收录的大概更新时间就不用天天site了。百度收录的大更新时间是每月11号 和 26号，特别是26号，更新幅度最大，K站也是最多的。 小更新时间:每周四。 更新时刻都在凌晨4点。 一般凌晨4点更新，对网站流量都没啥影响，只有到中午的时候，百度对网站的关键字搜索进行重新调整之后，才会有流量上的大的变化，自然流量有增自然有降。</p>
<p>google收录时间 &#8212;-更新后第4天 更新时间 每七天更新一次(排名影响小) 大更新时间 每月更新一次(排名影响大) PR数值更新3个月更新完一次(9月20日更新过以此类推)因为存在不同服务器更新总时间为一星期 GOOGLE有两种爬虫一种是收录爬虫,此爬虫是专门收录网站用的,还有一种是增加排名的爬虫,此爬虫是综合计算反响连接用的爬虫,并且对排名的稳定和位 置很重要. 所以有的新站,在刚收录的时候排名不是很好就是很差,这是因为第一个爬虫的原因,但是网站掉了不要着急,真正排站要在三个月后第二个爬虫来的时候来会生 效. 还有就是GOOGLE谷歌研究者们发现了一个很简单的办法，就是查看GOOGLE的几个镜像站点是否相同，因为在GOOGLE更新期间，他总是将 www2.google.com或者www3.google.com作为更新测试站点，在这期间，后两个站点中索引的页面数量和主站点将会不同。比如当我 们从www.google.com，www2.google.com ， www3.google.com 还有就是一种情况： 三个网站搜索同一个关键词，得到的结果的数量不相同，这就说明GOOGLE正在更新。 GOOGLE这种大规模的更新在国外被称为GOOGLE DANCE（狗狗跳舞），有一个专门协助我们检查他是否正在跳舞的网站 http://www.google-dance-tool.com 这个网站提供一个工具，通过这个工具，我们只需要输入一个关键词然后点击一个按钮，就可以看到GOOGLE三个镜像站点的搜索结果，很方便我们对比。</p>
<p>其实最重要的还是提高网站的质量，不能是网站的设计，还是内容，还是页面的代码，都需要得到很好的优化。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kdued.com/2009/08/%e6%96%b0%e7%bd%91%e7%ab%99%e8%a2%abgoogle%ef%bc%8c%e7%99%be%e5%ba%a6%e6%94%b6%e5%bd%95%e7%9a%84%e5%b0%8f%e6%8a%80%e5%b7%a7/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>第一届{一个问题}嚼嚼会</title>
		<link>http://www.kdued.com/2009/08/one-question/</link>
		<comments>http://www.kdued.com/2009/08/one-question/#comments</comments>
		<pubDate>Mon, 10 Aug 2009 13:52:27 +0000</pubDate>
		<dc:creator>cnscorpio</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[用户体验]]></category>

		<guid isPermaLink="false">http://www.kdued.com/?p=1404</guid>
		<description><![CDATA[{一个问题}嚼嚼会
&#8212;有问题？周五嚼了它

先说说嚼嚼会的“红本本”：
{一个问题}的宗旨：每次我们只有且只解决一个问题
&#8212;因为问题很多，我们需要找到他们的根源，把它fix，那其他的都迎刃而解
{一个问题}的目标：解决能触及的一个问题
&#8212;虽然每次只解决一个，但在交流过程中，分享过程中，大家都得到了各自需要的和我们这个团队所需要的
{一个问题}的义务：在嚼“它”的同时，共同嚼掉它，不嚼者将被清理
&#8212;你知道我说的“它”是什么意思的，对吧？想嚼更多？请你多多发起问题
{一个问题}的范围：任何问题
&#8212;但在开始前，请偷偷跟KDUED里某位成员交流这个问题是否有讨论的价值，是否能让大都数人参与讨论，当然，如果你是证明哥德巴赫猜想，请你分享！最后，在开始前一天公布所有问题，大家投票决定“嚼”哪一个。

第一届的主题是：web中，信息到底应该怎么展现？
这个话题可大可小，我们也天马行空，尽量的广，谈到了信息架构层级的问题，也有数据挖掘相关&#8230;..但总的来说，还是要围绕一个关键的点：UCD，以用户为中心。
不过主要集中的，还是在内容的建设和呈现过程中的交互上。
1.信息需要满满堆吗？
很多情况是：我想第一层级就把信息都放出来，让浏览者能一下全部看完，不管它有多长，有多少。认为只要稍稍通过视觉上的区分就能达到效果。
其实，这样做的初衷是对的，那就是尽量快的让浏览者获取信息，但如果用的不好，也会产生极大的干扰，出现要找的信息找不到，不好找的结果，因为满满堆肯定会导致布局过于复杂。例如友商网的注册成功后显示的祝贺页面就是这样，把所有的服务信息都放了出来，密密麻麻，让人压抑。、
这里涉及到一个信息纵深的问题，也就是说，你如何平衡让浏览者获取信息需要进入的层级数量以及上下层级关联问题，是第一页就能获取，还是不断点击到第五页才能看到？是不是第一层给了个链接到第二层，第二层页面上却不找不到第一层所提示的信息，或者很难找到。

并且上图这样的呈现方式不好的另一个方面是对于不同的用户，它都是一样的面孔，丝毫没有变化，这个就牵涉出另一个问题。
2.能否按需“上菜”
需要“酸菜”的时候，我才上，而不是强制你一定要点。看图大家就会明白：

其实就是通过不同的交互方式来将信息隐藏，仅仅显示最常用的，或者说最贴近你需求的信息。你需要的时候，再去小小的“发现”，把它挖出来。这里我总结为：稍稍让你找。意思就是你如果需要更多，很容易的，就能通过在目前着眼的区域附近通过某个小操作来获取。就例如上图中gmail的“6 more”。此类的交互方式，其实是沿用了大家的计算机操作习惯，对于绝大部分的人来说肯定会熟悉以下这个图：

对，这个就是window xp中的文件夹操作时的左边的菜单快捷方式，“详细信息”，默认进来的时候是隐藏的，为的是减少干扰，简洁，用户也就是通过右边的小箭头来进行显示并获取更多。
3.但是，如何解决上下层级的连接脱节呢？
也就是说，如何吸引浏览者在某一层页面时，进入下一层呢？这个就需要谈到另一个概念：吸引渐进。
当你让用户“稍稍找”的时候，势必会造成某种意义上的脱节，通过上一个页面的链接，进入另一个页面后才能看到所需信息的这个现象就是“脱节”。为了弥补它，需要增加这个链接的吸引力和下一个页面的对应吸引力，甚至到下下个页面，需要保持一致性和流畅性，引导深入。
从某种意义上讲，注册流程页面就是这样一个例子，通过在头部显示整个简单的注册层级，以及最后的“成功”暗示语，让人有耐心继续下去。

4.定制，是不是更好？
从某种意义上讲，把主动权给用户是一种尊重的体现，也是一种重要的交互方式，它能让用户自己根据需要决定显示些什么，不显示些什么。这个应该更符合人的某种意义上的个性化，私有欲望的习惯。例如雅虎首页左边的my favorites ，允许用户自己添加或者删除某些社会化功能，这个东西貌似是老生常谈，但又有几个站点做到了呢？

5.cookie，是否能迎合你？
如果做了记录登陆用户的浏览产品习惯，那么可以通过这些浏览习惯，在他下一次登陆时候推送某些通过科学统计得出的迎合用户的产品。这个地方，淘宝做的好，还别说，有时候还真能猜对。

6.用研告诉你
这个需要通过定制的分析系统分析大样本量，得出用户浏览的趋势和某些现象，然后通过这些结论来展现某块区域的信息。这样，它，就不再是死的了。这个做的最好的，我想就是google的suggestion和amazon的用户数据分析了。
最后说说让信息既能简单，又能不失真的传递的三个诀窍：
A.减少，藏起来&#8212;舍，会得到更多。用过apple东西的人都会说，真简单，真简洁，但它们的简洁不是简单的简洁，它们是有着合理的流畅的交互流程在支撑的，它们少，藏，符合美学，但不难学习。
B.组织&#8212;有条理的，有合理的信息层级，能使多变的少。记住，分类不是分的越多、越细就越好，要合理，合理，度？需要自己根据实际站点来衡量，不断调整。
C.学习&#8212;人类的本能。既然是人类的本能，那我们是否可以让用户在某些点上学会沿用旧有习惯（例如上面说的windows xp的详细信息），又能通过小小的摸索学习新的交互方式，从而让信息的展现多样化。例如：友商网首页的客户评价，专家评价，现在都是全部罗列既占布局，又会让页面臃肿，是否可以通过隐藏部分，需要的时候用户自己稍稍找找。你一定要坚信，并不是越傻瓜，越好，不要把用户想的很笨，很笨，他没那么笨。
D.社会化&#8212;太多的站点通过类似twitter这种更时尚、更方便的工具来进行信息传播，记住：上你这个站点，不是获取信息的唯一方式。
]]></description>
			<content:encoded><![CDATA[<h2 style="text-align: center;font-size:24px;">{一个问题}嚼嚼会</h2>
<h3 style="text-align: center;">&#8212;有问题？周五嚼了它</h3>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-1423" title="one-question1" src="http://www.kdued.com/wp-content/uploads/one-question1.png" alt="one-question1" width="295" height="212" /></p>
<p>先说说嚼嚼会的“红本本”：</p>
<p>{一个问题}的宗旨：每次我们只有且只解决一个问题</p>
<p style="padding-left: 30px;">&#8212;因为问题很多，我们需要找到他们的根源，把它fix，那其他的都迎刃而解</p>
<p>{一个问题}的目标：解决能触及的一个问题</p>
<p style="padding-left: 30px;">&#8212;虽然每次只解决一个，但在交流过程中，分享过程中，大家都得到了各自需要的和我们这个团队所需要的</p>
<p>{一个问题}的义务：在嚼“它”的同时，共同嚼掉它，不嚼者将被清理</p>
<p style="padding-left: 30px;">&#8212;你知道我说的“它”是什么意思的，对吧？想嚼更多？请你多多发起问题</p>
<p>{一个问题}的范围：任何问题</p>
<p style="padding-left: 30px;">&#8212;但在开始前，请偷偷跟KDUED里某位成员交流这个问题是否有讨论的价值，是否能让大都数人参与讨论，当然，如果你是证明哥德巴赫猜想，请你分享！最后，在开始前一天公布所有问题，大家投票决定“嚼”哪一个。</p>
<p style="padding-left: 30px;"><span id="more-1404"></span></p>
<p style="text-align: center;"><strong>第一届的主题是：web中，信息到底应该怎么展现？</strong></p>
<p style="text-align: left;">这个话题可大可小，我们也天马行空，尽量的广，谈到了信息架构层级的问题，也有数据挖掘相关&#8230;..但总的来说，还是要围绕一个关键的点：UCD，以用户为中心。</p>
<p style="text-align: left;">不过主要集中的，还是在内容的建设和呈现过程中的交互上。</p>
<p style="text-align: left;"><strong>1.信息需要满满堆吗？</strong></p>
<p style="text-align: left;">很多情况是：我想第一层级就把信息都放出来，让浏览者能一下全部看完，不管它有多长，有多少。认为只要稍稍通过视觉上的区分就能达到效果。</p>
<p style="text-align: left;">其实，这样做的初衷是对的，那就是尽量快的让浏览者获取信息，但如果用的不好，也会产生极大的干扰，出现要找的信息找不到，不好找的结果，因为满满堆肯定会导致布局过于复杂。例如友商网的注册成功后显示的祝贺页面就是这样，把所有的服务信息都放了出来，密密麻麻，让人压抑。、</p>
<p style="text-align: left;">这里涉及到一个信息纵深的问题，也就是说，你如何平衡让浏览者获取信息需要进入的层级数量以及上下层级关联问题，是第一页就能获取，还是不断点击到第五页才能看到？是不是第一层给了个链接到第二层，第二层页面上却不找不到第一层所提示的信息，或者很难找到。</p>
<p style="text-align: center;"><img class="size-full wp-image-1406  aligncenter" title="kdued" src="http://www.kdued.com/wp-content/uploads/kdued.png" alt="kdued" width="651" height="207" /></p>
<p style="text-align: left;">并且上图这样的呈现方式不好的另一个方面是对于不同的用户，它都是一样的面孔，丝毫没有变化，这个就牵涉出另一个问题。</p>
<p style="text-align: left;"><strong>2.能否按需“上菜”</strong></p>
<p style="text-align: left;">需要“酸菜”的时候，我才上，而不是强制你一定要点。看图大家就会明白：</p>
<p style="text-align: center;"><img class="size-full wp-image-1407  aligncenter" title="kdued3" src="http://www.kdued.com/wp-content/uploads/kdued3.png" alt="kdued3" width="674" height="429" /></p>
<p style="text-align: left;">其实就是通过不同的交互方式来将信息隐藏，仅仅显示最常用的，或者说最贴近你需求的信息。你需要的时候，再去小小的“发现”，把它挖出来。这里我总结为：稍稍让你找。意思就是你如果需要更多，很容易的，就能通过在目前着眼的区域附近通过某个小操作来获取。就例如上图中gmail的“6 more”。此类的交互方式，其实是沿用了大家的计算机操作习惯，对于绝大部分的人来说肯定会熟悉以下这个图：</p>
<p style="text-align: center;"><img class="size-full wp-image-1408  aligncenter" title="duibi" src="http://www.kdued.com/wp-content/uploads/duibi.png" alt="duibi" width="397" height="272" /></p>
<p style="text-align: left;">对，这个就是window xp中的文件夹操作时的左边的菜单快捷方式，“详细信息”，默认进来的时候是隐藏的，为的是减少干扰，简洁，用户也就是通过右边的小箭头来进行显示并获取更多。</p>
<p style="text-align: left;"><strong>3.但是，如何解决上下层级的连接脱节呢？</strong></p>
<p style="text-align: left;">也就是说，如何吸引浏览者在某一层页面时，进入下一层呢？这个就需要谈到另一个概念：吸引渐进。</p>
<p style="text-align: left;">当你让用户“稍稍找”的时候，势必会造成某种意义上的脱节，通过上一个页面的链接，进入另一个页面后才能看到所需信息的这个现象就是“脱节”。为了弥补它，需要增加这个链接的吸引力和下一个页面的对应吸引力，甚至到下下个页面，需要保持一致性和流畅性，引导深入。</p>
<p style="text-align: left;">从某种意义上讲，注册流程页面就是这样一个例子，通过在头部显示整个简单的注册层级，以及最后的“成功”暗示语，让人有耐心继续下去。</p>
<p style="text-align: center;"><img class="size-full wp-image-1409  aligncenter" title="zhece" src="http://www.kdued.com/wp-content/uploads/zhece.png" alt="zhece" width="572" height="165" /></p>
<p style="text-align: left;"><strong>4.定制，是不是更好？</strong></p>
<p style="text-align: left;">从某种意义上讲，把主动权给用户是一种尊重的体现，也是一种重要的交互方式，它能让用户自己根据需要决定显示些什么，不显示些什么。这个应该更符合人的某种意义上的个性化，私有欲望的习惯。例如雅虎首页左边的my favorites ，允许用户自己添加或者删除某些社会化功能，这个东西貌似是老生常谈，但又有几个站点做到了呢？</p>
<p style="text-align: center;"><img class="size-full wp-image-1410  aligncenter" title="dingzhi" src="http://www.kdued.com/wp-content/uploads/dingzhi.png" alt="dingzhi" width="243" height="90" /></p>
<p style="text-align: left;"><strong>5.cookie，是否能迎合你？</strong></p>
<p style="text-align: left;">如果做了记录登陆用户的浏览产品习惯，那么可以通过这些浏览习惯，在他下一次登陆时候推送某些通过科学统计得出的迎合用户的产品。这个地方，淘宝做的好，还别说，有时候还真能猜对。</p>
<p style="text-align: center;"><img class="size-full wp-image-1411  aligncenter" title="cai" src="http://www.kdued.com/wp-content/uploads/cai.png" alt="cai" width="282" height="161" /></p>
<p style="text-align: left;"><strong>6.用研告诉你</strong></p>
<p style="text-align: left;">这个需要通过定制的分析系统分析大样本量，得出用户浏览的趋势和某些现象，然后通过这些结论来展现某块区域的信息。这样，它，就不再是死的了。这个做的最好的，我想就是google的suggestion和amazon的用户数据分析了。</p>
<p style="text-align: left;"><strong>最后说说让信息既能简单，又能不失真的传递的三个诀窍：</strong></p>
<p style="text-align: left;"><strong>A.减少，藏起来</strong>&#8212;<strong>舍，会得到更多。</strong>用过apple东西的人都会说，真简单，真简洁，但它们的简洁不是简单的简洁，它们是有着合理的流畅的交互流程在支撑的，它们少，藏，符合美学，但不难学习。</p>
<p style="text-align: left;"><strong>B.组织</strong>&#8212;<strong>有条理的，有合理的信息层级，能使多变的少。</strong>记住，分类不是分的越多、越细就越好，要合理，合理，度？需要自己根据实际站点来衡量，不断调整。</p>
<p style="text-align: left;"><strong>C.学习</strong>&#8212;<strong>人类的本能。</strong>既然是人类的本能，那我们是否可以让用户在某些点上学会沿用旧有习惯（例如上面说的windows xp的详细信息），又能通过小小的摸索学习新的交互方式，从而让信息的展现多样化。例如：友商网首页的客户评价，专家评价，现在都是全部罗列既占布局，又会让页面臃肿，是否可以通过隐藏部分，需要的时候用户自己稍稍找找。你一定要坚信，并不是越傻瓜，越好，不要把用户想的很笨，很笨，他没那么笨。</p>
<p style="text-align: left;"><strong>D.社会化</strong>&#8212;太多的站点通过类似twitter这种更时尚、更方便的工具来进行信息传播，记住：上你这个站点，不是获取信息的唯一方式。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kdued.com/2009/08/one-question/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>说说tab设计</title>
		<link>http://www.kdued.com/2009/07/%e8%af%b4%e8%af%b4tab%e8%ae%be%e8%ae%a1/</link>
		<comments>http://www.kdued.com/2009/07/%e8%af%b4%e8%af%b4tab%e8%ae%be%e8%ae%a1/#comments</comments>
		<pubDate>Fri, 24 Jul 2009 17:09:05 +0000</pubDate>
		<dc:creator>光耀</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[tab]]></category>

		<guid isPermaLink="false">http://www.kdued.com/?p=1343</guid>
		<description><![CDATA[要想在不宽裕的页面展现丰富的内容，现在通用的做法使用tab，在一块区域通过tab切换来更换该区域的内容。这篇文章分析了tab设计很在理，今天我也谈谈我抓了几个案例，谈谈对tab设计的看法。
我的意见是合理的tab设计应该是这两种类型：
第1种  鼠标单击切换。此种情形下tab是没有链接的（但是在选中的tab区域内增加 更多或者more链接）。
第2种  鼠标悬浮切换。此种情况下很多tab都加了链接，所以 a:hover 应该生效，也就是鼠标停靠时有下滑下或颜色等提示。其实这也是Norman设计理念里，对于用户恰当Feedback（反馈）的实践。
在实际案例中，我们看到了一些好的设计，也有些我不赞成的设计，这里稍做分享。

案例一：yahoo美国首页，属于第1种tab设计，但是注意右下角的框框哦。







案例二：淘宝首页的tab设计有三处，但是仔细看一下，却发觉各有差异。比较疑惑的是，为什么首页只有3个tab设计，但是却各不一样呢？难道一个页面需要多个前端介入？








第一个tab设计属于单击切换，无附加链接。（顶）








第二个tab设计属于悬浮切换，但是没有 a:hover 来反馈tab上的链接。（扁）








第三个tab设计属于悬浮切换，添加了 a:hover 反馈tab上的链接。（顶）
案例三：QQ弹窗。








最不招人喜欢的QQ弹窗，tab上也没有链接反馈，相信qq.com的流量很多是被这样无辜地骗来的。（扁）
插播一段：我一直对QQ弹窗的设计有微辞，一个只能放5个tab的位置居然间接的放了7个，于是不得不多出一个左右翻滚tab的设计。至于增加一个看起来意义不大却比较显眼的 [您可以拖动该页卡进行排序] 真正价值有多少。
]]></description>
			<content:encoded><![CDATA[<p>要想在不宽裕的页面展现丰富的内容，现在通用的做法使用tab，在一块区域通过tab切换来更换该区域的内容。<a href="http://blog.d8in.com/posts/455.html">这篇文章分析了tab设计很在理</a>，今天我也谈谈我抓了几个案例，谈谈对tab设计的看法。</p>
<p>我的意见是合理的tab设计应该是这两种类型：</p>
<p><strong>第1种  鼠标单击切换。</strong>此种情形下tab是没有链接的（但是在选中的tab区域内增加 更多或者more链接）。</p>
<p><strong>第2种  鼠标悬浮切换。</strong>此种情况下很多tab都加了链接，所以 a:hover 应该生效，也就是鼠标停靠时有下滑下或颜色等提示。其实<a href="http://www.imguangyao.com/archives/72">这也是Norman设计理念里，对于用户恰当Feedback（反馈）的实践</a>。<br />
在实际案例中，我们看到了一些好的设计，也有些我不赞成的设计，这里稍做分享。</p>
<p><span id="more-1343"></span></p>
<p><strong>案例一</strong>：yahoo美国首页，属于第1种tab设计，但是注意右下角的框框哦。</p>
<table border="1">
<tbody>
<tr>
<td><img class="alignnone size-full wp-image-637" src="http://www.imguangyao.com/wp-content/uploads/2009/07/tab-yahoo.jpg" alt="tab-yahoo" width="399" height="277" /></td>
</tr>
</tbody>
</table>
<p><strong>案例二</strong>：淘宝首页的tab设计有三处，但是仔细看一下，却发觉各有差异。比较疑惑的是，为什么首页只有3个tab设计，但是却各不一样呢？难道一个页面需要多个前端介入？</p>
<table border="1">
<tbody>
<tr>
<td><img class="alignnone size-full wp-image-638" src="http://www.imguangyao.com/wp-content/uploads/2009/07/tab-taobao01.jpg" alt="tab-taobao01" width="278" height="148" /></td>
</tr>
<tr></tr>
</tbody>
</table>
<p>第一个tab设计属于单击切换，无附加链接。（顶）</p>
<table border="1">
<tbody>
<tr>
<td><img class="alignnone size-full wp-image-642" src="http://www.imguangyao.com/wp-content/uploads/2009/07/tab-taobao03.jpg" alt="tab-taobao03" width="269" height="267" /></td>
</tr>
<tr></tr>
</tbody>
</table>
<p>第二个tab设计属于悬浮切换，但是没有 a:hover 来反馈tab上的链接。（扁）</p>
<table border="1">
<tbody>
<tr>
<td><img class="alignnone size-full wp-image-639" src="http://www.imguangyao.com/wp-content/uploads/2009/07/tab-taobao02.jpg" alt="tab-taobao02" width="272" height="159" /></td>
</tr>
<tr></tr>
</tbody>
</table>
<p>第三个tab设计属于悬浮切换，添加了 a:hover 反馈tab上的链接。（顶）</p>
<p><strong>案例三</strong>：QQ弹窗。</p>
<table border="1">
<tbody>
<tr>
<td><img class="alignnone size-full wp-image-640" src="http://www.imguangyao.com/wp-content/uploads/2009/07/tab-qq02.jpg" alt="tab-qq02" width="434" height="50" /></td>
</tr>
<tr></tr>
</tbody>
</table>
<p>最不招人喜欢的QQ弹窗，tab上也没有链接反馈，相信qq.com的流量很多是被这样无辜地骗来的。（扁）<br />
插播一段：我一直对QQ弹窗的设计有微辞，一个只能放5个tab的位置居然间接的放了7个，于是不得不多出一个左右翻滚tab的设计。至于增加一个看起来意义不大却比较显眼的 [您可以拖动该页卡进行排序] 真正价值有多少。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kdued.com/2009/07/%e8%af%b4%e8%af%b4tab%e8%ae%be%e8%ae%a1/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>全自动登陆储钱罐～～网络机器人ruby初探</title>
		<link>http://www.kdued.com/2009/07/auto-ruby-spider/</link>
		<comments>http://www.kdued.com/2009/07/auto-ruby-spider/#comments</comments>
		<pubDate>Thu, 23 Jul 2009 14:58:31 +0000</pubDate>
		<dc:creator>cnscorpio</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[团队]]></category>
		<category><![CDATA[用户体验]]></category>

		<guid isPermaLink="false">http://www.kdued.com/?p=1272</guid>
		<description><![CDATA[Ruby诞生于1993年2月24日的晚上, Ruby的爸爸是一位日本人叫松本行弘，妈妈就不知晓了，可能由于日语语言的问题，导致Ruby的潜力一直被埋没在了那座孤岛上，后来为了Ruby的前程，它老爸将它交由了Ruby社区来培养．目前Ruby在自动化测试方面取的了卓越的成效．可以说小Ruby就像一个网络机器人，能模拟你能干的一切．
 
罗嗦了这么久，让我们睽睽Ruby如何帮我们自动登陆到咱们的友商网的储钱罐：
 
1. 点击下载安装 ruby186-26.exe 别手痒痒乱选别的版本，否则会很惨，安装完成后，到　开始－＞运行－＞cmd环境下分别运行如下命令，第一个命令是升级你当前的版本，因为要连网更新，必须要有网络环境　，第二个命令是安装watir框架, 它是一个使用 Ruby 实现的开源Web 自动化测试框架，执行完成可能需要几分钟，可先去ＷＣ轻松一下
gem update &#8211;system 　(注意system前面是２横)
gem install watir

 
2. 打开开始－＞程序－＞ruby-186-26 －＞SciTE，SciTE是一款Ruby的编辑器，在里面输入:
puts &#8220;hello MM&#8221;
将文件保存到桌面 ys.rb ,注意：文件后缀一定要加＂.rb＂，　否则Ruby将识别不了！然后  按F5,倘若右边窗口输出了 hello MM
恭喜你，安装一切顺利！
 
3. 下面我们开始真正进入实验状态，在刚才的编辑器里面输入如下东东：


require 'watir'

ie = Watir::IE.new

#进入友商网登陆页面
ie.goto("https://sso.youshang.com/sso/userAuthnAction.do")

#自动输入用户名，密码, 注意要修改成你自己的噢
ie.text_field(:id,"name").set("geven")
ie.text_field(:id,"password").set("123456")

#模拟点击登陆的链接
ie.link(:href,"https://sso.youshang.com/sso/userAuthnAction.do#").click

#模拟点击在线储钱罐的链接
ie.link(:text,"在线储钱罐").click


 
Over 就这些代码，最好自己编辑输入，SciTE编辑器对中文支持不好，直接复制会将编码改变，按F5 　神奇的时候 边喝茶边观看吧，直到咱们的Ruby帮我们到达储钱罐这个页面．把这个代码文件（一定要.rb格式的文件）直接放在桌面，以后直接点击一哈，一切自动！！
 
后话： 帮想了解Ruby的同学解析解析上面的那几行东东吧，因为我们这个是模拟浏览器点击事件，所以需要引入watir框架，然后我们创建一个ie对象让其先到达友商网的登陆页，Ruby自动设置你的用户名为geven，密码为123456，程序里面对号入座，不然登陆不了，注意登陆页有个唯一的元素＂登陆＂，Ｒuby会自动获取这个元素的链接地址并点击它，ＯＫ，不说了，不懂程序的人估计都没撒子问题．ruby的作用还远不只我上面的那个小例子，据这两天的了解，它在正则内容抽取方面非常强大，以后好好研究研究～～
 
提供几个学习Ruby的小网站给大家，喜欢官方的　～～ ok 处女帖完毕，献给咋们那群可爱的弟弟妹妹们　～～
Watir 主页：http://wtr.rubyforge.org/
Ruby中文手册：http://www.ruby-cn.org/doc.html
Ruby主页：http://ruby-lang.org/en/
]]></description>
			<content:encoded><![CDATA[<p>Ruby诞生于1993年2月24日的晚上, Ruby的爸爸是一位日本人叫松本行弘，妈妈就不知晓了，可能由于日语语言的问题，导致Ruby的潜力一直被埋没在了那座孤岛上，后来为了Ruby的前程，它老爸将它交由了Ruby社区来培养．目前Ruby在自动化测试方面取的了卓越的成效．可以说小Ruby就像一个网络机器人，能模拟你能干的一切．</p>
<p> </p>
<p>罗嗦了这么久，让我们睽睽Ruby如何帮我们自动登陆到咱们的友商网的储钱罐：</p>
<p> </p>
<p>1. 点击下载安装 <a href="http://rubyforge.org/frs/download.php/29263/ruby186-26.exe" target="_blank"><span style="color: orange;cursor:hand;">ruby186-26.exe</span></a><span style="color: #0000ff;"> </span>别手痒痒乱选别的版本，否则会很惨，安装完成后，到　开始－＞运行－＞cmd环境下分别运行如下命令，第一个命令是升级你当前的版本，因为要连网更新，必须要有网络环境　，第二个命令是安装watir框架, 它是一个使用 Ruby 实现的开源Web 自动化测试框架，执行完成可能需要几分钟，可先去ＷＣ轻松一下</p>
<p><span style="color: orange;">gem update &#8211;system 　(注意system前面是２横)</span></p>
<p><span style="color: orange;">gem install watir</span></p>
<p><span id="more-1272"></span></p>
<p> </p>
<p>2. 打开<span style="color: orange;">开始－＞程序－＞ruby-186-26 －＞SciTE</span>，SciTE是一款Ruby的编辑器，在里面输入:</p>
<p><span style="color: orange;">puts &#8220;hello MM&#8221;</span></p>
<p>将文件保存到桌面 ys.rb ,注意：文件后缀一定要加＂.rb＂，　否则Ruby将识别不了！然后  按F5,倘若右边窗口输出了 hello MM</p>
<p>恭喜你，安装一切顺利！</p>
<p> </p>
<p>3. 下面我们开始真正进入实验状态，在刚才的编辑器里面输入如下东东：</p>
<div style="margin-left:30px; padding:10px;border:blue 1px dotted; color:orange">
<pre>
require 'watir'

ie = Watir::IE.new

#进入友商网登陆页面
ie.goto("https://sso.youshang.com/sso/userAuthnAction.do")

#自动输入用户名，密码, 注意要修改成你自己的噢
ie.text_field(:id,"name").set("geven")
ie.text_field(:id,"password").set("123456")

#模拟点击登陆的链接
ie.link(:href,"https://sso.youshang.com/sso/userAuthnAction.do#").click

#模拟点击在线储钱罐的链接
ie.link(:text,"在线储钱罐").click
</pre>
</div>
<p> </p>
<p>Over 就这些代码，最好自己编辑输入，SciTE编辑器对中文支持不好，直接复制会将编码改变，按F5 　神奇的时候 边喝茶边观看吧，直到咱们的Ruby帮我们到达储钱罐这个页面．把这个代码文件（一定要.rb格式的文件）直接放在桌面，以后直接点击一哈，一切自动！！<br />
 </p>
<p>后话： 帮想了解Ruby的同学解析解析上面的那几行东东吧，因为我们这个是模拟浏览器点击事件，所以需要引入watir框架，然后我们创建一个ie对象让其先到达友商网的登陆页，Ruby自动设置你的用户名为geven，密码为123456，程序里面对号入座，不然登陆不了，注意登陆页有个唯一的元素＂登陆＂，Ｒuby会自动获取这个元素的链接地址并点击它，ＯＫ，不说了，不懂程序的人估计都没撒子问题．ruby的作用还远不只我上面的那个小例子，据这两天的了解，它在正则内容抽取方面非常强大，以后好好研究研究～～</p>
<p> </p>
<p>提供几个学习Ruby的小网站给大家，喜欢官方的　～～ ok 处女帖完毕，献给咋们那群可爱的弟弟妹妹们　～～</p>
<p>Watir 主页：<a href="http://wtr.rubyforge.org/" target="_blank">http://wtr.rubyforge.org/</a></p>
<p>Ruby中文手册：<a href="http://www.ruby-cn.org/doc.html" target="_blank">http://www.ruby-cn.org/doc.html</a></p>
<p>Ruby主页：<a href="http://ruby-lang.org/en/" target="_blank">http://ruby-lang.org/en/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.kdued.com/2009/07/auto-ruby-spider/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>基于zend framework开发的blog系统zfblog1.1发布</title>
		<link>http://www.kdued.com/2009/06/%e5%9f%ba%e4%ba%8ezend-framework%e5%bc%80%e5%8f%91%e7%9a%84blog%e7%b3%bb%e7%bb%9fzfblog11%e6%8f%90%e4%be%9b%e4%b8%8b%e8%bd%bd/</link>
		<comments>http://www.kdued.com/2009/06/%e5%9f%ba%e4%ba%8ezend-framework%e5%bc%80%e5%8f%91%e7%9a%84blog%e7%b3%bb%e7%bb%9fzfblog11%e6%8f%90%e4%be%9b%e4%b8%8b%e8%bd%bd/#comments</comments>
		<pubDate>Thu, 04 Jun 2009 16:14:15 +0000</pubDate>
		<dc:creator>pconline</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[团队]]></category>

		<guid isPermaLink="false">http://www.kdued.com/?p=1193</guid>
		<description><![CDATA[自己在业余不断奋斗使得zfblog进展顺利，现在汇报下zfblog的功能和下个版本的新增功能。
先介绍下的我博客功能：
1、前后台独立，zf多模块的实现。
2、自动安装的实现，轻松搭建自己的blog系统。
3、多模板的切换，随时更改自己的blog皮肤。
4、对留言评论回复时自动发送邮件。
5、发布文章时自动保存草稿，保证文章不会因断电死机带来的损失。
下个版本需要做的如下：围绕用户体验角度改善blog使用，让用户体验更加友好，另外本系统用户功能少，用户功能的增加势在必行啊，让用户可以定义自己的头像，登陆保存cookie，轻松发布留言，评论等信息。重要的功能是让zfblog支持ucenter，让blog用户能和其他应用系统同步。最最重要的功能就是插件的开发，那样可以用php开发个储钱罐集成到blog中会怎么样呢？呵呵。。。
zfblog下载地址：http://blog.conshare.com/public/upload/zfblog1.1.zip
另外在googlecode上也有下载地址：http://code.google.com/p/zf-blog/
更多详情请访问我的blog：http://blog.conshare.com 有什么问题各位多交流，呵呵。

]]></description>
			<content:encoded><![CDATA[<p>自己在业余不断奋斗使得zfblog进展顺利，现在汇报下zfblog的功能和下个版本的新增功能。</p>
<p>先介绍下的我博客功能：<br />
1、前后台独立，zf多模块的实现。<br />
2、自动安装的实现，轻松搭建自己的blog系统。<br />
3、多模板的切换，随时更改自己的blog皮肤。<br />
4、对留言评论回复时自动发送邮件。<br />
5、发布文章时自动保存草稿，保证文章不会因断电死机带来的损失。</p>
<p>下个版本需要做的如下：围绕用户体验角度改善blog使用，让用户体验更加友好，另外本系统用户功能少，用户功能的增加势在必行啊，让用户可以定义自己的头像，<span class="t_tag">登陆</span>保存cookie，轻松发布留言，评论等信息。重要的功能是让zfblog支持ucenter，让blog用户能和其他应用<span class="t_tag">系统</span>同步。最最重要的功能就是插件的开发，那样可以用php开发个储钱罐集成到blog中会怎么样呢？呵呵。。。</p>
<p><span class="t_tag">zfblog下载</span>地址：<a href="http://blog.conshare.com/public/upload/zfblog1.1.zip" target="_blank">http://blog.conshare.com/public/upload/zfblog1.1.zip</a></p>
<p>另外在googlecode上也有下载地址：<a href="http://code.google.com/p/zf-blog/" target="_blank">http://code.google.com/p/zf-blog/</a></p>
<p>更多详情请访问我的blog：<a href="http://blog.conshare.com/" target="_blank">http://blog.conshare.com </a>有什么问题各位多交流，呵呵。<a href="http://blog.conshare.com/" target="_blank"><br />
</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.kdued.com/2009/06/%e5%9f%ba%e4%ba%8ezend-framework%e5%bc%80%e5%8f%91%e7%9a%84blog%e7%b3%bb%e7%bb%9fzfblog11%e6%8f%90%e4%be%9b%e4%b8%8b%e8%bd%bd/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>HTML邮件的又一点思考</title>
		<link>http://www.kdued.com/2009/04/html-mail-2/</link>
		<comments>http://www.kdued.com/2009/04/html-mail-2/#comments</comments>
		<pubDate>Tue, 28 Apr 2009 13:41:38 +0000</pubDate>
		<dc:creator>cnscorpio</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[用户体验]]></category>

		<guid isPermaLink="false">http://www.kdued.com/?p=934</guid>
		<description><![CDATA[
要做好一个HTML邮件，说简单，还真不怎么复杂，说它复杂，其实也不难。-_-!!
以前写过类似的[ 关于HTML邮件的总结 ]，最近又犯愁，就再唠叨几句。
简单的是：技术实现要求不是太高，只要做好xhtml页面就能使用邮件发送服务来发送。
难的是：如要做到兼容国内几乎所有邮箱，兼容Gmail，Yahoo mail，outlook等，却也有点难度。因为各大邮箱对css，HTML标签的支持程度各不相同，有的会在邮件主体的外层使用一些干扰的样式，有的对图片的支持也不清不楚，邮件客户端就更是千奇百怪。

要想做好最大的兼容性，建议：
1.用table进行布局，想要布局不乱，尽量用他，很多时候web标准在这里行不通，想用float？到了人家的邮箱里，就不一定浮的起来了。。
2.少用图片作为背景，因为outlook 2007和某些web 邮箱是不支持背景图片的。
3.图片给出alt属性，防止图片无法显示时，出现红叉叉。
其他的，请参考上面给出的总结，业界也有不少关于这个话题的好帖子，可以搜索一下。
现在，再谈谈如何在HTML邮件上做一点点用研，提高它的回报率。
首先，有一条是必须的：你所发出的邮件对用户来说，是确实有意义的，而不是在糟蹋广大劳动人民的智慧。
1.  它面向的用户群体主要是某站点的会员，包括购买了产品的用户和没有购买产品的用户，没有购买产品的用户又包含活跃会员与普通用户，往下还可以细分。与用户的沟通，或者说互动，有很多的途径，HTML邮件就是其中之一，[ 虽然我极不推荐用这个古老而收效甚微的方法，其他的方式，往后再聊聊] ，它以精准而著称，如果接受者不是我们的有效目标受众，不但浪费了资源，更违背了HTML邮件或者叫EDM的宗旨及意义。这一点是首先要明确的。
2.  我们来看看这个小用研的重点在哪？先模拟一下用户打开邮件的整个过程：

A、B、C三个点可以说都是关键点，因为这三个点是一个用户真正做决定的点，但是，其中的A是一个EDM能否产生真正应用价值的，是否有存活在这个世界上的时间点。这个地方需要考虑的是标题的创新包装，所以A是这三个点中，最重要的。
B点是视觉风格&#8211;&#62;内容的天地，也是用户是否会深入了解该邮件的过程。
C点是真正对用户产生价值的地方，是能否给用户带来效益的地方，也是站点与用户能否双赢的时间段。这一次的用户调研，将主要在这三个点设计调研点。
剩下的，就是控制好样本量和选取合适的调研方法，可以是问卷，访谈，Focus group，可用性实验室等，最简单的，就是问卷和访谈。访谈，可以是真实的面对面的，也可以是通过语音。我们此次的调研主要采用的就是上面提到的前两种，效果还算理想。

]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><img class="aligncenter size-full wp-image-933" title="mail" src="http://www.kdued.com/wp-content/uploads/mail.png" alt="mail" width="350" height="350" /></p>
<p>要做好一个HTML邮件，说简单，还真不怎么复杂，说它复杂，其实也不难。-_-!!</p>
<p>以前写过类似的[ <a href="http://www.kdued.com/2009/01/html-mail/" target="_blank">关于HTML邮件的总结 ]</a>，最近又犯愁，就再唠叨几句。</p>
<p>简单的是：技术实现要求不是太高，只要做好xhtml页面就能使用邮件发送服务来发送。</p>
<p>难的是：如要做到兼容国内几乎所有邮箱，兼容Gmail，Yahoo mail，outlook等，却也有点难度。因为各大邮箱对css，HTML标签的支持程度各不相同，有的会在邮件主体的外层使用一些干扰的样式，有的对图片的支持也不清不楚，邮件客户端就更是千奇百怪。</p>
<p><span id="more-934"></span></p>
<p>要想做好最大的兼容性，建议：</p>
<p>1.用table进行布局，想要布局不乱，尽量用他，很多时候web标准在这里行不通，想用float？到了人家的邮箱里，就不一定浮的起来了。。</p>
<p>2.少用图片作为背景，因为outlook 2007和某些web 邮箱是不支持背景图片的。</p>
<p>3.图片给出alt属性，防止图片无法显示时，出现红叉叉。</p>
<p>其他的，请参考上面给出的总结，业界也有不少关于这个话题的好帖子，可以搜索一下。</p>
<p>现在，再谈谈如何在HTML邮件上做一点点用研，提高它的回报率。</p>
<p>首先，有一条是必须的：<strong>你所发出的邮件对用户来说，是确实有意义的，而不是在糟蹋广大劳动人民的智慧</strong>。</p>
<p>1.  它面向的用户群体主要是某站点的会员，包括购买了产品的用户和没有购买产品的用户，没有购买产品的用户又包含活跃会员与普通用户，往下还可以细分。与用户的沟通，或者说互动，有很多的途径，HTML邮件就是其中之一，[ 虽然我极不推荐用这个古老而收效甚微的方法，其他的方式，往后再聊聊] ，它以精准而著称，如果接受者不是我们的有效目标受众，不但浪费了资源，更违背了HTML邮件或者叫EDM的宗旨及意义。这一点是首先要明确的。</p>
<p>2.  我们来看看这个小用研的重点在哪？先模拟一下用户打开邮件的整个过程：</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-935" title="flow" src="http://www.kdued.com/wp-content/uploads/flow.png" alt="flow" width="543" height="599" /></p>
<p style="text-align: left;"><strong>A、B、C</strong>三个点可以说都是关键点，因为这三个点是一个用户真正做决定的点，但是，其中的<strong>A</strong>是一个EDM能否产生真正应用价值的，是否有存活在这个世界上的时间点。这个地方需要考虑的是标题的创新包装，所以<strong>A是这三个点中，最重要的</strong>。<br />
<strong>B</strong>点是视觉风格&#8211;&gt;内容的天地，也是用户是否会深入了解该邮件的过程。<br />
<strong>C</strong>点是真正对用户产生价值的地方，是能否给用户带来效益的地方，也是站点与用户能否双赢的时间段。这一次的用户调研，将主要在这三个点设计调研点。</p>
<p style="text-align: left;">剩下的，就是控制好样本量和选取合适的调研方法，可以是问卷，访谈，Focus group，可用性实验室等，最简单的，就是问卷和访谈。访谈，可以是真实的面对面的，也可以是通过语音。我们此次的调研主要采用的就是上面提到的前两种，效果还算理想。</p>
<p style="text-align: left;">
]]></content:encoded>
			<wfw:commentRss>http://www.kdued.com/2009/04/html-mail-2/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>图片格式问题和对性能产生的影响</title>
		<link>http://www.kdued.com/2009/04/833/</link>
		<comments>http://www.kdued.com/2009/04/833/#comments</comments>
		<pubDate>Tue, 07 Apr 2009 13:48:24 +0000</pubDate>
		<dc:creator>martilo</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[视觉设计]]></category>
		<category><![CDATA[图片优化]]></category>
		<category><![CDATA[图片输出]]></category>

		<guid isPermaLink="false">http://www.kdued.com/?p=833</guid>
		<description><![CDATA[


文字一出各路诸侯杀出，一个措手不及待吾友商发布！
前不久视觉组同事们讨论了一个老话题 &#8212; 网站图片格式问题和对性能产生的影响
其实大家每天都与图片色彩文字打交道，经验给大家带来了熟练的技巧！但是对图片格式对站点性能产生的影响大家都发表了自己的看法，分享了自己的经验。
目标:提高浏览器访问页面速度
我们设计和制作中能做的：  
1、尽量少图片；尽量好交互
      浏览器页面尽量少用图片或精细化图片
2、图片尽量用色彩和像素点代替
      解决好 美观和下载速度这把双刃剑
3、做切割对比测试
      制作人员掌握图片切割规律
]]></description>
			<content:encoded><![CDATA[<div style="width:555px;margin:0 auto;">
<iframe src='http://docs.google.com/EmbedSlideshow?docid=dc338b7f_0hfm7ng6m&amp;size=m' frameborder='0' width='555' height='451'></iframe>
</div>
<p>文字一出各路诸侯杀出，一个措手不及待吾友商发布！</p>
<p>前不久视觉组同事们讨论了一个老话题 &#8212; 网站图片格式问题和对性能产生的影响</p>
<p>其实大家每天都与图片色彩文字打交道，经验给大家带来了熟练的技巧！但是对图片格式对站点性能产生的影响大家都发表了自己的看法，分享了自己的经验。</p>
<p>目标:提高浏览器访问页面速度</p>
<p><span style="color: green; font-family: 微软雅黑; mso-ascii-font-family: 微软雅黑; mso-fareast-font-family: 微软雅黑; mso-hansi-font-family: 微软雅黑;">我们设计和制作中能做的：</span><span style="font-family: 微软雅黑; mso-ascii-font-family: 微软雅黑; mso-fareast-font-family: 微软雅黑; mso-hansi-font-family: 微软雅黑;"><span style="mso-spacerun: yes;">  </span></span><span style="font-family: 微软雅黑; mso-ascii-font-family: 微软雅黑; mso-fareast-font-family: 微软雅黑; mso-hansi-font-family: 微软雅黑;"><span style="mso-spacerun: yes;"><br />
1、尽量少图片；尽量好交互<br />
      浏览器页面尽量少用图片或精细化图片<br />
2、图片尽量用色彩和像素点代替<br />
      解决好 美观和下载速度这把双刃剑<br />
3、做切割对比测试<br />
      制作人员掌握图片切割规律</span></span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.kdued.com/2009/04/833/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>CMS系统浅析</title>
		<link>http://www.kdued.com/2009/03/cms/</link>
		<comments>http://www.kdued.com/2009/03/cms/#comments</comments>
		<pubDate>Fri, 06 Mar 2009 08:16:45 +0000</pubDate>
		<dc:creator>elgin</dc:creator>
				<category><![CDATA[前端开发]]></category>

		<guid isPermaLink="false">http://www.kdued.com/?p=733</guid>
		<description><![CDATA[处女帖已经酝酿许久，最终决定简单的分析一下CMS系统的架构。
首先大家看看下面这个图，这是网易页面的一部分：(为了博客的效果，我把图缩小了,不好意思,请点击放大)

第一感觉是不是内容很多，很复杂。那我们把它分解一下，再看看图2：(为了博客的效果，我把图缩小了,不好意思,请点击放大)

是不是清晰很多，它是由这些红色的块组成。下面我再取一部分出来：

 
看看这部分代码：
&#60;div class=&#8221;list&#8221;&#62;
&#60;ul&#62;
&#60;li&#62;&#60;a href=&#8221;http://blog.163.com/jzchenyong/blog/static/1042960432009265137898/&#8220;&#62;报道假币记者怒斥央行&#60;/a&#62;&#60;/li&#62;
&#60;li&#62;&#60;a href=&#8221;http://adong360.blog.163.com/blog/static/21725364200926103415811/&#8220;&#62;中国女性是出版业救星?&#60;/a&#62;&#60;/li&#62;
&#60;li&#62;&#60;a href=&#8221;http://shiqinyao2005.blog.163.com/blog/static/665324720092695548890/&#8220;&#62;如何成为女明星男朋友&#60;/a&#62;&#60;/li&#62;
&#60;li&#62;&#60;a href=&#8221;http://keyunlu2006.blog.163.com/blog/static/41051792009269358859/&#8220;&#62;怎样读书才能改变命运&#60;/a&#62;&#60;/li&#62;
&#60;li&#62;&#60;a href=&#8221;http://d.p.hill.blog.163.com/blog/static/89123982009247426250/&#8220;&#62;广州最简陋的法院(图)&#60;/a&#62;&#60;/li&#62;
&#60;li&#62;&#60;a href=&#8221;http://adong360.blog.163.com/blog/static/21725364200926103757559/&#8220;&#62;两会会场外的各国记者&#60;/a&#62;&#60;/li&#62;
&#60;li&#62;&#60;a href=&#8221;http://weimin17104.blog.163.com/blog/static/960595002009230258210/&#8220;&#62;&#8221;无人&#8221;报亭背后的故事&#60;/a&#62;&#60;/li&#62;
&#60;/ul&#62;
&#60;/div&#62;
我再用程序来解释他，
&#60;div class=&#8221;list&#8221;&#62;
&#60;ul&#62;
&#60;?php
foreach ($list as $value) {
?&#62;
&#60;li&#62;&#60;a href=&#8221;&#60;?php echo $url?&#62;&#8221;&#62; &#60;?php echo $title?&#62;&#60;/a&#62;&#60;/li&#62;
&#60;?php
}
?&#62;
&#60;/ul&#62;
&#60;/div&#62;
很亲切吧！那我们倒推回去，实际一个页面的组成是这样的：

一个页面实际上是由一些有规则代码的块组成，那么这些块可以由程序的循环来解释。这一点的理解是构建一个大型CMS的基础。那么下面将一下CMS系统的基本结构，请看图，我喜欢用图来解释，这样比文字更直观。

简单说一下模块的设计，那么模块就是提取指定频道（可以是任一频道不一定是本频道的）的资讯，包括提取的条数，是否显示图片，是否显示描述文字，标题的字数，描述文字的字数等，这样再生成一段代码，去替换频道页面相应的模块名。就拿上面那段代码来做实例吧，
频道页面模板的显示代码：
&#60;div class=&#8221;list&#8221;&#62;
&#60;ul&#62;
{template_list}
&#60;/ul&#62;
&#60;/div&#62;
模块生成的代码：
&#60;li&#62;&#60;a href=&#8221;http://blog.163.com/jzchenyong/blog/static/1042960432009265137898/&#8220;&#62;报道假币记者怒斥央行&#60;/a&#62;&#60;/li&#62;
&#60;li&#62;&#60;a href=&#8221;http://adong360.blog.163.com/blog/static/21725364200926103415811/&#8220;&#62;中国女性是出版业救星?&#60;/a&#62;&#60;/li&#62;
&#60;li&#62;&#60;a href=&#8221;http://shiqinyao2005.blog.163.com/blog/static/665324720092695548890/&#8220;&#62;如何成为女明星男朋友&#60;/a&#62;&#60;/li&#62;
&#60;li&#62;&#60;a href=&#8221;http://keyunlu2006.blog.163.com/blog/static/41051792009269358859/&#8220;&#62;怎样读书才能改变命运&#60;/a&#62;&#60;/li&#62;
&#60;li&#62;&#60;a href=&#8221;http://d.p.hill.blog.163.com/blog/static/89123982009247426250/&#8220;&#62;广州最简陋的法院(图)&#60;/a&#62;&#60;/li&#62;
&#60;li&#62;&#60;a href=&#8221;http://adong360.blog.163.com/blog/static/21725364200926103757559/&#8220;&#62;两会会场外的各国记者&#60;/a&#62;&#60;/li&#62;
&#60;li&#62;&#60;a href=&#8221;http://weimin17104.blog.163.com/blog/static/960595002009230258210/&#8220;&#62;&#8221;无人&#8221;报亭背后的故事&#60;/a&#62;&#60;/li&#62;
那么在生成页面的时候用此代码替换。
这里讲的并不详细，只是提供给大家一个思路。如果想了解更多或者有好的想法讨论，可以在此发表评论或者发邮件elgin_chen&#8217;at&#8217;163.com，加我的QQ：31524932
]]></description>
			<content:encoded><![CDATA[<p>处女帖已经酝酿许久，最终决定简单的分析一下CMS系统的架构。<span id="more-733"></span><br />
首先大家看看下面这个图，这是网易页面的一部分：(为了博客的效果，我把图缩小了,不好意思,请点击放大)</p>
<p><a href="http://www.kdued.com/wp-content/uploads/e7bd91e69893e9a696e9a1b5.png" target="_blank"><img class="aligncenter size-full wp-image-734" src="http://www.kdued.com/wp-content/uploads/e7bd91e69893e9a696e9a1b5.png" alt="网易部分首页" width="650" height="440" /></a></p>
<p>第一感觉是不是内容很多，很复杂。那我们把它分解一下，再看看图2：(为了博客的效果，我把图缩小了,不好意思,请点击放大)</p>
<p><a href="http://www.kdued.com/wp-content/uploads/e7bd91e69893e9a696e9a1b5e58886e8a7a3.png" target="_blank"><img class="aligncenter size-full wp-image-735" src="http://www.kdued.com/wp-content/uploads/e7bd91e69893e9a696e9a1b5e58886e8a7a3.png" alt="分解" width="650" height="440" /></a></p>
<p>是不是清晰很多，它是由这些红色的块组成。下面我再取一部分出来：</p>
<p><img class="aligncenter size-full wp-image-736" src="http://www.kdued.com/wp-content/uploads/e7bd91e69893e9a696e9a1b5e58886e8a7a32.png" alt="分解2" width="145" height="143" /><br />
 <br />
看看这部分代码：<br />
&lt;div class=&#8221;list&#8221;&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;&lt;a href=&#8221;<a href="http://blog.163.com/jzchenyong/blog/static/1042960432009265137898/">http://blog.163.com/jzchenyong/blog/static/1042960432009265137898/</a>&#8220;&gt;报道假币记者怒斥央行&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&#8221;<a href="http://adong360.blog.163.com/blog/static/21725364200926103415811/">http://adong360.blog.163.com/blog/static/21725364200926103415811/</a>&#8220;&gt;中国女性是出版业救星?&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&#8221;<a href="http://shiqinyao2005.blog.163.com/blog/static/665324720092695548890/">http://shiqinyao2005.blog.163.com/blog/static/665324720092695548890/</a>&#8220;&gt;如何成为女明星男朋友&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&#8221;<a href="http://keyunlu2006.blog.163.com/blog/static/41051792009269358859/">http://keyunlu2006.blog.163.com/blog/static/41051792009269358859/</a>&#8220;&gt;怎样读书才能改变命运&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&#8221;<a href="http://d.p.hill.blog.163.com/blog/static/89123982009247426250/">http://d.p.hill.blog.163.com/blog/static/89123982009247426250/</a>&#8220;&gt;广州最简陋的法院(图)&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&#8221;<a href="http://adong360.blog.163.com/blog/static/21725364200926103757559/">http://adong360.blog.163.com/blog/static/21725364200926103757559/</a>&#8220;&gt;两会会场外的各国记者&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&#8221;<a href="http://weimin17104.blog.163.com/blog/static/960595002009230258210/">http://weimin17104.blog.163.com/blog/static/960595002009230258210/</a>&#8220;&gt;&#8221;无人&#8221;报亭背后的故事&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ul&gt;<br />
&lt;/div&gt;<br />
我再用程序来解释他，<br />
&lt;div class=&#8221;list&#8221;&gt;<br />
&lt;ul&gt;<br />
&lt;?php<br />
foreach ($list as $value) {<br />
?&gt;<br />
&lt;li&gt;&lt;a href=&#8221;&lt;?php echo $url?&gt;&#8221;&gt; &lt;?php echo $title?&gt;&lt;/a&gt;&lt;/li&gt;<br />
&lt;?php<br />
}<br />
?&gt;<br />
&lt;/ul&gt;<br />
&lt;/div&gt;<br />
很亲切吧！那我们倒推回去，实际一个页面的组成是这样的：</p>
<p><img class="aligncenter size-full wp-image-737" src="http://www.kdued.com/wp-content/uploads/18.jpg" alt="18" width="439" height="308" /></p>
<p>一个页面实际上是由一些有规则代码的块组成，那么这些块可以由程序的循环来解释。这一点的理解是构建一个大型CMS的基础。那么下面将一下CMS系统的基本结构，请看图，我喜欢用图来解释，这样比文字更直观。</p>
<p><img class="aligncenter size-full wp-image-738" src="http://www.kdued.com/wp-content/uploads/23.jpg" alt="23" width="414" height="423" /></p>
<p>简单说一下模块的设计，那么模块就是提取指定频道（可以是任一频道不一定是本频道的）的资讯，包括提取的条数，是否显示图片，是否显示描述文字，标题的字数，描述文字的字数等，这样再生成一段代码，去替换频道页面相应的模块名。就拿上面那段代码来做实例吧，<br />
频道页面模板的显示代码：<br />
&lt;div class=&#8221;list&#8221;&gt;<br />
&lt;ul&gt;<br />
{template_list}<br />
&lt;/ul&gt;<br />
&lt;/div&gt;<br />
模块生成的代码：<br />
&lt;li&gt;&lt;a href=&#8221;<a href="http://blog.163.com/jzchenyong/blog/static/1042960432009265137898/">http://blog.163.com/jzchenyong/blog/static/1042960432009265137898/</a>&#8220;&gt;报道假币记者怒斥央行&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&#8221;<a href="http://adong360.blog.163.com/blog/static/21725364200926103415811/">http://adong360.blog.163.com/blog/static/21725364200926103415811/</a>&#8220;&gt;中国女性是出版业救星?&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&#8221;<a href="http://shiqinyao2005.blog.163.com/blog/static/665324720092695548890/">http://shiqinyao2005.blog.163.com/blog/static/665324720092695548890/</a>&#8220;&gt;如何成为女明星男朋友&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&#8221;<a href="http://keyunlu2006.blog.163.com/blog/static/41051792009269358859/">http://keyunlu2006.blog.163.com/blog/static/41051792009269358859/</a>&#8220;&gt;怎样读书才能改变命运&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&#8221;<a href="http://d.p.hill.blog.163.com/blog/static/89123982009247426250/">http://d.p.hill.blog.163.com/blog/static/89123982009247426250/</a>&#8220;&gt;广州最简陋的法院(图)&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&#8221;<a href="http://adong360.blog.163.com/blog/static/21725364200926103757559/">http://adong360.blog.163.com/blog/static/21725364200926103757559/</a>&#8220;&gt;两会会场外的各国记者&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href=&#8221;<a href="http://weimin17104.blog.163.com/blog/static/960595002009230258210/">http://weimin17104.blog.163.com/blog/static/960595002009230258210/</a>&#8220;&gt;&#8221;无人&#8221;报亭背后的故事&lt;/a&gt;&lt;/li&gt;<br />
那么在生成页面的时候用此代码替换。</p>
<p>这里讲的并不详细，只是提供给大家一个思路。如果想了解更多或者有好的想法讨论，可以在此发表评论或者发邮件<a href="mailto:elgin_chen@163.com">elgin_chen&#8217;at&#8217;163.com</a>，加我的QQ：31524932</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kdued.com/2009/03/cms/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>IE8 &#8212;-和谐？还是混乱？</title>
		<link>http://www.kdued.com/2009/02/ie8-china%ef%bc%9for-somalia%ef%bc%9f/</link>
		<comments>http://www.kdued.com/2009/02/ie8-china%ef%bc%9for-somalia%ef%bc%9f/#comments</comments>
		<pubDate>Fri, 27 Feb 2009 12:39:33 +0000</pubDate>
		<dc:creator>cnscorpio</dc:creator>
				<category><![CDATA[前端开发]]></category>

		<guid isPermaLink="false">http://www.kdued.com/?p=677</guid>
		<description><![CDATA[关注IE8很长时间了，最近已经开始RTM，所以写个了个PPT跟大家交流一下。从总体上来说，IE8的确是向标准迈出了一大步，对CSS2.1是进行全兼容，web slices 和 activity也是改善用户体验的很好的功能。准备的比较仓促，写的可能有些问题，欢迎指出。。
1.IE8只是换花衣裳?
2.Just Test
3.Solution
4.一点有趣的东西



]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;">关注IE8很长时间了，最近已经开始RTM，所以写个了个PPT跟大家交流一下。从总体上来说，IE8的确是向标准迈出了一大步，对CSS2.1是进行全兼容，web slices 和 activity也是改善用户体验的很好的功能。准备的比较仓促，写的可能有些问题，欢迎指出。。</p>
<p style="text-align: left;">1.IE8只是换花衣裳?<br />
2.Just Test<br />
3.Solution<br />
4.一点有趣的东西</p>
<div style="width: 555px;margin:0 auto;">
<iframe src='http://docs.google.com/EmbedSlideshow?docid=dgm2g5kc_0hfz6v4gx&amp;size=m' frameborder='0' width='555' height='451'></iframe>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.kdued.com/2009/02/ie8-china%ef%bc%9for-somalia%ef%bc%9f/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>爱恨交加的HTML邮件</title>
		<link>http://www.kdued.com/2009/01/html-mail/</link>
		<comments>http://www.kdued.com/2009/01/html-mail/#comments</comments>
		<pubDate>Thu, 22 Jan 2009 08:01:06 +0000</pubDate>
		<dc:creator>cnscorpio</dc:creator>
				<category><![CDATA[前端开发]]></category>

		<guid isPermaLink="false">http://www.kdued.com/?p=557</guid>
		<description><![CDATA[2008年一年下来，做了很多群发会员邮件的小项目，对HTML邮件是爱恨交加，爱的是它能很快的将我们想表达的信息直接推到会员面前，恨的是，各大邮箱系统的兼容性问题。这类帖子在行内不少UED BLOG上都有朋友写过了，大部分也是我碰到过的，我这里写点我的个人感受吧。
1.邮件兼容性问题
1.1 table布局比较靠谱
div布局在部分变态邮箱里没法看，因为这部分邮箱会默认对某些标签添加自有的样式,如sina.com的邮箱和hotmail.com的邮箱。甚至这些邮箱有BUG的话，会出现一些莫名奇妙的问题，如：QQ邮箱会在某些情况下（至今未知）自动给图片的格式后缀再多加一个“点”，a.jpg会变成a..jpg,-_-!!
而table布局在这个时候就很强势，很兼容，很可靠，很强大了，根据多次测试，table布局的可靠率达到90%以上，像QQ邮箱，网易邮箱，都是将邮件的主体内容放在一个iframe中，QQ邮箱就在iframe中设定了默认图片display:inline;的样式，这些样式如果你不注意，等你百思不得其解为何你的邮件中图片乱七八糟的时候，就应该看看这个了。

1.2 尽量少用图片
很多邮箱默认下，是不会下载图片的，例如live mail,也就是hotmail,gmail默认状态下也是不会下载背景图片和img的，只会提示你是否要显示，是否以后都信任这个地址的邮件，这个主要是处于安全性上的考虑。而不用图片了，如果又需要有视觉上的变化那怎么办呢，可以用色块（background-color），如果要用圆角，可以用很多的标签去拼凑(-_-!，是很变态)，图片方面，一般来说大家有过seo习惯的话都会加上alt属性，这里也最好给图片加上，避免图片无法显示的时候，可以显示alt内容。

1.3 编码要注意
尽量用utf-8的编码，可以避免某些（注意，是某些）邮箱出现乱码情况。

1.4 细节多考虑
很多事情都是细节上决定结果。在做HTML邮件时，根据友商网的情况，一般是要先将这个页面和引用的资源上线到服务器，页面中的静态资源，例如图片，切记要写绝对URL，如果写了相对路径，当打开的这个邮件时，图片是无法显示的。
控制好图片的大小，过度追求图片质量换来的就是打开邮件时打开过于缓慢，接着就是会员无法容忍，直接跳出邮件。
直接在标签上写它的内联样式，否则很可能会跟邮箱系统的样式冲突。
1.5 最好要有专用的邮件发送系统，并且要做好与各大邮箱服务提供商的协调工作，否则，你会发现你发送的邮件都成了spam。


2.邮件效益问题
发送HTML邮件给会员一般有几类目的：
2.1 通知他们某些信息，如交易信息，账单，让他们得知，这类邮件需要简单扼要，不要带有过多的干扰信息。一句话提示，一个表格，一个按钮，就基本满足了需求。
2.2 对会员来说，附加的，希望他们参与的，例如：优惠活动，赠送业务。这类，首先应该在视觉上多做文章，但也不能做的过于花里胡哨，主题要更突出，避免过多干扰色彩和信息，毕竟很多人看邮件的时间比看页面的时间来的更短，垃圾邮件实在太多，太多人的心里有了阴影。
另外，【标题】和【发件人】也是要注意的，吸引人的标题能第一时间抓住人的好奇心理，“祝您新年快乐”这个标题就没有“携冯氏幽默给您拜年”吸引人。所以说，标题党在这里同样适用。
别忘了，发件人要写的正式，如果面向的会员绝大部分是中国人，那最好是中文（毕竟这里是中国），如果是英文字母，不知有多少人的第一反应就是：垃圾邮件，接着就是delete。这个需要用研和文案多考虑考虑。
2.3  表达一些喜庆信息，例如元宵节。这类邮件需要传递一种喜悦，需要能跟会员互动，那就最好在站点上还有相关的专题，应用或者创意的东西去支撑它，邮件只作为一个入口。
想要发好一个邮件，真的不容易，想要有效果，那就要多方合作，更多的研究用户群体，才能做出好的邮件来。
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;update 20090224&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-
在outlook 2007 中对HTML邮件的支持相当有限，所以如果客户端使用的是outlook 2007，那么请你抑郁吧。
它只支持CSS 1.0，HTML 4.01，对background-image，style属性等不支持。具体请看微软官方文档：
http://msdn.microsoft.com/en-us/library/aa338201.aspx
http://msdn.microsoft.com/en-us/library/aa338200.aspx

]]></description>
			<content:encoded><![CDATA[<p>2008年一年下来，做了很多群发会员邮件的小项目，对HTML邮件是爱恨交加，爱的是它能很快的将我们想表达的信息直接推到会员面前，恨的是，各大邮箱系统的兼容性问题。这类帖子在行内不少UED BLOG上都有朋友写过了，大部分也是我碰到过的，我这里写点我的个人感受吧。</p>
<p><strong>1.邮件兼容性问题</strong></p>
<p style="padding-left: 30px;"><strong>1.1 table布局比较靠谱</strong></p>
<p>div布局在部分变态邮箱里没法看，因为这部分邮箱会默认对某些标签添加自有的样式,如sina.com的邮箱和hotmail.com的邮箱。甚至这些邮箱有BUG的话，会出现一些莫名奇妙的问题，如：QQ邮箱会在某些情况下（至今未知）自动给图片的格式后缀再多加一个“点”，<strong><span style="color: #ff0000;">a.jpg</span></strong>会变成<strong><span style="color: #ff0000;">a..jpg</span></strong>,-_-!!</p>
<p>而table布局在这个时候就很强势，很兼容，很可靠，很强大了，根据多次测试，table布局的可靠率达到90%以上，像QQ邮箱，网易邮箱，都是将邮件的主体内容放在一个iframe中，QQ邮箱就在iframe中设定了默认图片display:inline;的样式，这些样式如果你不注意，等你百思不得其解为何你的邮件中图片乱七八糟的时候，就应该看看这个了。</p>
<p style="padding-left: 30px; text-align: center;"><img class="size-full wp-image-559 aligncenter" title="img" src="http://www.kdued.com/wp-content/uploads/img.gif" alt="img" width="211" height="27" /></p>
<p style="padding-left: 30px;"><strong>1.2 尽量少用图片</strong></p>
<p>很多邮箱默认下，是不会下载图片的，例如live mail,也就是hotmail,gmail默认状态下也是不会下载背景图片和img的，只会提示你是否要显示，是否以后都信任这个地址的邮件，这个主要是处于安全性上的考虑。而不用图片了，如果又需要有视觉上的变化那怎么办呢，可以用色块（background-color），如果要用圆角，可以用很多的标签去拼凑(-_-!，是很变态)，图片方面，一般来说大家有过seo习惯的话都会加上alt属性，这里也最好给图片加上，避免图片无法显示的时候，可以显示alt内容。</p>
<p style="padding-left: 30px; text-align: center;"><img class="size-full wp-image-558 aligncenter" title="tupian" src="http://www.kdued.com/wp-content/uploads/tupian.gif" alt="tupian" width="327" height="43" /></p>
<p style="padding-left: 30px;"><strong>1.3 编码要注意</strong></p>
<p style="padding-left: 30px;">尽量用utf-8的编码，可以避免某些（注意，是某些）邮箱出现乱码情况。</p>
<p style="padding-left: 30px;"><span id="more-557"></span></p>
<p style="padding-left: 30px;"><strong>1.4 细节多考虑</strong></p>
<p style="padding-left: 30px;">很多事情都是细节上决定结果。在做HTML邮件时，根据友商网的情况，一般是要先将这个页面和引用的资源上线到服务器，页面中的静态资源，例如图片，切记要写绝对URL，如果写了相对路径，当打开的这个邮件时，图片是无法显示的。</p>
<p style="padding-left: 30px;">控制好图片的大小，过度追求图片质量换来的就是打开邮件时打开过于缓慢，接着就是会员无法容忍，直接跳出邮件。</p>
<p style="padding-left: 30px;">直接在标签上写它的内联样式，否则很可能会跟邮箱系统的样式冲突。</p>
<p style="padding-left: 30px;"><strong>1.5 最好要有专用的邮件发送系统，并且要做好与各大邮箱服务提供商的协调工作，否则，你会发现你发送的邮件都成了spam。</strong></p>
<p style="padding-left: 30px;"><strong><br />
</strong></p>
<p><strong>2.邮件效益问题</strong></p>
<p style="padding-left: 30px;">发送HTML邮件给会员一般有几类目的：</p>
<p>2.1 通知他们某些信息，如交易信息，账单，让他们得知，这类邮件需要简单扼要，不要带有过多的干扰信息。一句话提示，一个表格，一个按钮，就基本满足了需求。</p>
<p>2.2 对会员来说，附加的，希望他们参与的，例如：优惠活动，赠送业务。这类，首先应该在视觉上多做文章，但也不能做的过于花里胡哨，主题要更突出，避免过多干扰色彩和信息，毕竟很多人看邮件的时间比看页面的时间来的更短，垃圾邮件实在太多，太多人的心里有了阴影。</p>
<p>另外，【标题】和【发件人】也是要注意的，吸引人的标题能第一时间抓住人的好奇心理，“祝您新年快乐”这个标题就没有“携冯氏幽默给您拜年”吸引人。所以说，标题党在这里同样适用。</p>
<p>别忘了，发件人要写的正式，如果面向的会员绝大部分是中国人，那最好是中文（毕竟这里是中国），如果是英文字母，不知有多少人的第一反应就是：垃圾邮件，接着就是delete。这个需要用研和文案多考虑考虑。</p>
<p>2.3  表达一些喜庆信息，例如元宵节。这类邮件需要传递一种喜悦，需要能跟会员互动，那就最好在站点上还有相关的专题，应用或者创意的东西去支撑它，邮件只作为一个入口。</p>
<p style="padding-left: 30px;"><strong>想要发好一个邮件，真的不容易，想要有效果，那就要多方合作，更多的研究用户群体，才能做出好的邮件来。</strong></p>
<p style="padding-left: 30px;"><strong>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;update 20090224&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-</strong></p>
<p style="padding-left: 30px;"><strong>在outlook 2007 中对HTML邮件的支持相当有限，所以如果客户端使用的是outlook 2007，那么请你抑郁吧。</strong></p>
<p style="padding-left: 30px;"><strong>它只支持CSS 1.0，HTML 4.01，对background-image，style属性等不支持。具体请看微软官方文档：</strong></p>
<p style="padding-left: 30px;"><a href="http://msdn.microsoft.com/en-us/library/aa338201.aspx" target="_blank">http://msdn.microsoft.com/en-us/library/aa338201.aspx</a><br />
<a href="http://msdn.microsoft.com/en-us/library/aa338200.aspx" target="_blank">http://msdn.microsoft.com/en-us/library/aa338200.aspx</a></p>
<p style="padding-left: 30px;">
]]></content:encoded>
			<wfw:commentRss>http://www.kdued.com/2009/01/html-mail/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
	</channel>
</rss>
