<?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>Xiaoxiao&#039;s Weblog &#187; 网站</title>
	<atom:link href="http://liuyuntian.com/tag/%e7%bd%91%e7%ab%99/feed" rel="self" type="application/rss+xml" />
	<link>http://liuyuntian.com</link>
	<description></description>
	<lastBuildDate>Mon, 06 Feb 2012 16:54:24 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>网站有效设计的10个原则</title>
		<link>http://liuyuntian.com/2008/02/04/10-principles-of-effective-web-design-chinese-version.html</link>
		<comments>http://liuyuntian.com/2008/02/04/10-principles-of-effective-web-design-chinese-version.html#comments</comments>
		<pubDate>Mon, 04 Feb 2008 09:09:39 +0000</pubDate>
		<dc:creator>xiaoxiao</dc:creator>
				<category><![CDATA[体验与设计]]></category>
		<category><![CDATA[交互]]></category>
		<category><![CDATA[以用户为中心]]></category>
		<category><![CDATA[信息]]></category>
		<category><![CDATA[可用性测试]]></category>
		<category><![CDATA[标准]]></category>
		<category><![CDATA[测试]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[研究]]></category>
		<category><![CDATA[网站]]></category>
		<category><![CDATA[网站设计]]></category>
		<category><![CDATA[翻译]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://liuyuntian.com/2008/02/04/10-principles-of-effective-web-design-chinese-version.html</guid>
		<description><![CDATA[原文：10 Principles Of Effective Web Design 翻译：熊猫　2008-02-03 本文由熊猫同学授权翻译首发。并不是专业翻译，仅供参考。 　　决定一个网站成败命运的，不是视觉设计，而是设计的可用性和有效性。访问网页的用户们握着鼠标，决定一切，“以用户为中心”已然是成功网站的标准设计方向。总之，用户不用的功能，就不该存在。 　　我们并不打算重复探讨操作细节（比如：“搜索工具栏”应当怎么放置），相反，我们的目光将集中在网站有效设计的核心原则、启发式方法和入门上。这些如果能够使用得当，可以催产出更丰富的设计作品，且使呈现的信息更容易被获取。 请注意 我们有相关文章可供参考： 10大可用性梦魇 和 可用性30专题。 接下来论文中将涉及更多有效设计原则，你可以考虑订阅我们的RSS源。 　　为了能够合理利用这些原则，我们首先需要理解用户是怎样与网页交互活动的，是怎么思考的，行为的基本模式又是怎样的。 用户们是怎么思考的？ 　　通俗地讲，用户在互联网上的行为习惯与日常商店中的顾客们并无二样。来访者们扫视每个新页面，浏览其中的一些文本，点击他们最感兴趣的链接，或者隐约觉得能带他们找到他们想要内容的链接。事实上，页面的绝大部分，他们根本不看。 　　许多用户找寻感兴趣（或者他们觉得有用）且可以点击的信息，只要一些看起来符合期望的目标出现，用户就会去点击。如果新页面没有满足用户的期望，用户将点击“后退”，继续搜索。 用户看重质量和信誉。如果一个网站向用户提供了高质量的内容，用户就演绎忍受广告和糟糕的设计。这就是为何有些网站设计平平，但提供了高质量内容，就年复一年拥有着骄人的流量。内容重于形式。 用户不是阅读，而是浏览。用户分析一个网页的时候，寻找一些重要的节点或者锚点，目的是希望这些链接能够指引他们到期望的内容。 　　  用户不是阅读，而是扫视浏览。主要“高亮”区域在页面内容的中间断开了。这是典型的扫视浏览模式。　　 互联网用户是无耐心且必须立即被满足的。非常简单的原则：如果一个网站没有达到用户的期望，设计师的工作就失败了，公司也会有经济损失。认知负荷越高、导航越不直观，用户越倾向于离开这个网站，寻找它的替代品。　　 用户不做最优的抉择。用户不会寻找最便捷的方法找到他们需要的信息。他们也不是线性浏览一个网页，按顺序从一个站点跳转到另一个站点。相反，用户是很容易满足的，他们通常选择第一个让他们满意的选项。只要他们找到一个他们觉得能指向期望目标的链接，他们通常会立即点击。最优的抉择是有难度的，需要花费很多时间。满意即可非常高效。【视频】 　　  　　 　　两个图片都显示：网页阅读模式是非线性的。右下方的路径图显示了用户浏览一个网页的视线轨迹。 用户遵从他们的直觉。在通常的情况下，用户杂乱无章地扫视而非阅读设计师们呈现的信息。根据Steve Krug的研究，最根本的原因是：用户不关心。“如果我们发现一些东西奏效，我们就会被吸引。这些东西是怎么运作的对我们来说不重要，我们只要能够使用它们就足够了。如果你的受众喜欢大的公告栏，就要做的就是设计一个更大的，公告栏。” 用户希望有可控感。用户想控制他们自己的浏览行为本身，且依赖网站呈现的连续的内容。例如，他们不想一个新窗口出乎意料地弹出，他们希望用“后退”按钮返回刚刚的页面；因此，从不在一个新的浏览窗口中打开超链接是一个好的行为。 　　1.   别让用户思考 　　根据Krug的可用性第一原则，网页应当清晰且不言自明。当你创建一个网站的时候，你的工作就是避免问题——那些需要用户反复慎重考虑前因后果才能做出决定的选择。 　　如果网站的导航和结构不是直观的，产生的问题就会数量大增，且使得用户很难理解系统是如何工作的，怎样才能从A点跳转到B点。一个清晰的架构，中等强度温和的视觉引导，易于识别的链接，可以帮助用户找到实现目标的途径。 　　   　　让我们来看一个案例。Beyondis.co.uk 宣称自己是“超越栏目，超越产品，超越分布”的。这是何含义呢？自从发现用户倾向于“F”模式的网页浏览习惯，以上提到“栏目、产品、分布”是用户浏览网页时，首先必见的三元素。 　　虽然设计本身非常简单且直观，但用户仍然需要去找寻才能明白这个网页是做什么的。这就是所谓的不必要的问题。设计师职责是要让问题降到0。具有视觉效果的解释已经放在右边。只要交换左右模块的位置，可用性就会增加。 　　   　　ExpressionEngine 使用了与Beyondi非常相似的结构，但避免了不必要的问题。更进一步的是，宣传性的口号起到了效果，用户们会选择尝试服务，下载免费使用版本。 　　通过减少认知负荷，你可以使访客更容易获取系统背后的思想。只要你做到了这一点，你就可以理解为何这个系统是有用的，而用户又是怎样从中获益的。如果人们在你的网页上迷路的话，他们是不会使用你的网站的。 　　2. 别浪费用户的耐心 　　在任何一个你想向用户提供服务或者使用工具的项目工程了，尽量使你的门槛降低，对用户的要求减少。一项服务要求用户付出的越少，越有可能被一个随机进入的访者真正尝试。如果不用填那些他们以后都不会再次用到的长长的网页表格，首次来访的用户都会愿意尝试服务。请让用户自由浏览网页，让他们不用交换私人信息就能尝试你的服务。强迫用户填写电子邮箱地址来测试用户特征是不合理的。 　　 　　正如37Signals team的开发者Ryan Singe所言，用户们如果在看到产品之后被要求留下电子邮箱地址的话，可能是愿意的，因此他们对于留下电邮的回报是有想法的。 　　   [...]]]></description>
			<content:encoded><![CDATA[<p>原文：<a target="_blank" href="http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/">10 Principles Of Effective Web Design<br />
</a>翻译：熊猫　2008-02-03</p>
<p><strong>本文由熊猫同学授权翻译首发。并不是专业翻译，仅供参考。</strong></p>
<p>　　决定一个网站成败命运的，不是视觉设计，而是设计的可用性和有效性。访问网页的用户们握着鼠标，决定一切，“以用户为中心”已然是成功网站的标准设计方向。总之，用户不用的功能，就不该存在。<br />
　　我们并不打算重复探讨操作细节（比如：“搜索工具栏”应当怎么放置），相反，我们的目光将集中在网站有效设计的核心原则、启发式方法和入门上。这些如果能够使用得当，可以催产出更丰富的设计作品，且使呈现的信息更容易被获取。</p>
<p>请注意</p>
<ul>
<li>我们有相关文章可供参考： <a target="_blank" href="http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/">10大可用性梦魇</a> 和 <a target="_blank" href="http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/">可用性30专题</a>。</li>
<li>接下来论文中将涉及更多有效设计原则，你可以考虑<a target="_blank" href="http://www.smashingmagazine.com/wp-rss.php">订阅我们的RSS源</a>。</li>
</ul>
<p>　　为了能够合理利用这些原则，我们首先需要理解用户是怎样与网页交互活动的，是怎么思考的，行为的基本模式又是怎样的。</p>
<p><strong>用户们是怎么思考的？</strong></p>
<p>　　通俗地讲，用户在互联网上的行为习惯与日常商店中的顾客们并无二样。来访者们扫视每个新页面，浏览其中的一些文本，点击他们最感兴趣的链接，或者隐约觉得能带他们找到他们想要内容的链接。事实上，页面的绝大部分，他们根本不看。</p>
<p>　　许多用户找寻感兴趣（或者他们觉得有用）且可以点击的信息，只要一些看起来符合期望的目标出现，用户就会去点击。如果新页面没有满足用户的期望，用户将点击“后退”，继续搜索。</p>
<ul>
<li>用户看重质量和信誉。如果一个网站向用户提供了高质量的内容，用户就演绎忍受广告和糟糕的设计。这就是为何有些网站设计平平，但提供了高质量内容，就年复一年拥有着骄人的流量。内容重于形式。</li>
<li>用户不是阅读，而是浏览。用户分析一个网页的时候，寻找一些重要的节点或者锚点，目的是希望这些链接能够指引他们到期望的内容。</li>
</ul>
<p>　　 <img src="http://liuyuntian.com/wp-content/uploads/2008/02/scan.jpg" alt="Scan" /></p>
<p><span id="more-619"></span></p>
<ul>用户不是阅读，而是扫视浏览。主要“高亮”区域在页面内容的中间断开了。这是典型的扫视浏览模式。　　</p>
<li>互联网用户是无耐心且必须立即被满足的。非常简单的原则：如果一个网站没有达到用户的期望，设计师的工作就失败了，公司也会有经济损失。认知负荷越高、导航越不直观，用户越倾向于离开这个网站，寻找它的替代品。　　</li>
<li>用户不做最优的抉择。用户不会寻找最便捷的方法找到他们需要的信息。他们也不是线性浏览一个网页，按顺序从一个站点跳转到另一个站点。相反，用户是很容易满足的，他们通常选择第一个让他们满意的选项。只要他们找到一个他们觉得能指向期望目标的链接，他们通常会立即点击。最优的抉择是有难度的，需要花费很多时间。满意即可非常高效。【<a target="_blank" href="http://www.etre.com/usability/eyetracking/showme/">视频</a>】</li>
</ul>
<p>　　<a href="http://searchengineland.com/070413-121955.php"></a> <img src="http://liuyuntian.com/wp-content/uploads/2008/02/froogle.png" alt="froogle" /></p>
<p>　　<img src="http://liuyuntian.com/wp-content/uploads/2008/02/scanpath.jpg" alt="scanpath" /><a href="http://blog.eyetools.net/eyetools_research/4_community_of_learning/index.html"></a></p>
<p>　　两个图片都显示：网页阅读模式是非线性的。右下方的路径图显示了用户浏览一个网页的视线轨迹。</p>
<ul>
<li>用户遵从他们的直觉。在通常的情况下，用户杂乱无章地扫视而非阅读设计师们呈现的信息。根据Steve Krug的研究，最根本的原因是：用户不关心。“如果我们发现一些东西奏效，我们就会被吸引。这些东西是怎么运作的对我们来说不重要，我们只要能够使用它们就足够了。如果你的受众喜欢大的公告栏，就要做的就是设计一个更大的，公告栏。”</li>
<li>用户希望有可控感。用户想控制他们自己的浏览行为本身，且依赖网站呈现的连续的内容。例如，他们不想一个新窗口出乎意料地弹出，他们希望用“后退”按钮返回刚刚的页面；因此，从不在一个新的浏览窗口中打开超链接是一个好的行为。</li>
</ul>
<p><strong>　　1.   别让用户思考</strong><br />
　　根据Krug的可用性第一原则，网页应当清晰且不言自明。当你创建一个网站的时候，你的工作就是避免问题——那些需要用户反复慎重考虑前因后果才能做出决定的选择。</p>
<p>　　如果网站的导航和结构不是直观的，产生的问题就会数量大增，且使得用户很难理解系统是如何工作的，怎样才能从A点跳转到B点。一个清晰的架构，中等强度温和的视觉引导，易于识别的链接，可以帮助用户找到实现目标的途径。</p>
<p>　　<img src="http://liuyuntian.com/wp-content/uploads/2008/02/beyondis.png" alt="beyondis" /><a href="http://www.beyondis.co.uk/"></a><br />
 <br />
　　让我们来看一个案例。<a href="http://www.beyondis.co.uk/">Beyondis.co.uk</a> 宣称自己是“超越栏目，超越产品，超越分布”的。这是何含义呢？自从发现用户倾向于<a target="_blank" href="http://www.useit.com/alertbox/reading_pattern.html">“F”模式</a>的网页浏览习惯，以上提到“栏目、产品、分布”是用户浏览网页时，首先必见的三元素。</p>
<p>　　虽然设计本身非常简单且直观，但用户仍然需要去找寻才能明白这个网页是做什么的。这就是所谓的不必要的问题。设计师职责是要让问题降到0。具有视觉效果的解释已经放在右边。只要交换左右模块的位置，可用性就会增加。</p>
<p>　　<img src="http://liuyuntian.com/wp-content/uploads/2008/02/ee.png" alt="ee" /><a href="http://expressionengine.com/"></a><br />
 <br />
　　<a href="http://expressionengine.com/">ExpressionEngine</a> 使用了与Beyondi非常相似的结构，但避免了不必要的问题。更进一步的是，宣传性的口号起到了效果，用户们会选择尝试服务，下载免费使用版本。</p>
<p>　　通过减少认知负荷，你可以使访客更容易获取系统背后的思想。只要你做到了这一点，你就可以理解为何这个系统是有用的，而用户又是怎样从中获益的。如果人们在你的网页上迷路的话，他们是不会使用你的网站的。</p>
<p><strong>　　2. 别浪费用户的耐心</strong><br />
<strong>　　</strong>在任何一个你想向用户提供服务或者使用工具的项目工程了，尽量使你的门槛降低，对用户的要求减少。一项服务要求用户付出的越少，越有可能被一个随机进入的访者真正尝试。如果不用填那些他们以后都不会再次用到的长长的网页表格，首次来访的用户都会愿意尝试服务。请让用户自由浏览网页，让他们不用交换私人信息就能尝试你的服务。强迫用户填写电子邮箱地址来测试用户特征是不合理的。<strong> </strong>　　</p>
<p>　　正如37Signals team的开发者Ryan Singe所言，用户们如果在看到产品之后被要求留下电子邮箱地址的话，可能是愿意的，因此他们对于留下电邮的回报是有想法的。</p>
<p>　　<img src="http://liuyuntian.com/wp-content/uploads/2008/02/stikkit.jpg" alt="stikkit" /><a href="http://www.stikkit.com/signup"></a><br />
 <br />
　　<a target="_blank" href="http://www.stikkit.com/signup">Stikkit</a>是一个用户友好的极佳例子，它清晰易懂，且几乎不向访客索取任何东西。这也是你在你的网站应当使你的用户体验到的。</p>
<p>　　<a href="https://appmite.de/account/erstellen"></a> <img src="http://liuyuntian.com/wp-content/uploads/2008/02/bemite.png" alt="bemite" /><br />
　　<br />
　　很明显，<a href="https://appmite.de/account/erstellen">Mite</a>就索取很多。但是整个注册表可以在30秒之内完成——因为网页是横向的，用户不需要滚动页面。</p>
<p>　　如果要理想化地去除所有的障碍，首先就是不需要贡献些什么或者填写注册。仅仅一个用户注册表本身就足以阻碍用户在网站的随意浏览行为，且会对网站浏览产生很大不利影响。</p>
<p><strong>　　3. 抓住用户的注意</strong><br />
<strong>　　</strong>因为网站都是通常既提供静态的内容又提供动态的内容，一些用户界面就会比另一些更加吸引人。很明显，图像比文本更吸引眼球——就好像加粗的句子比未加粗的更容易引起注意。</p>
<p><strong> </strong>　　人类的眼睛是一个高度非线性运作的设备，网页用户能够直觉地识别边界、模式和运动。这是为什么视频广告特别容易引起反感，但是从市场营销的角度来说，他们的确完美地吸引了用户的注意。</p>
<p>　　<img src="http://liuyuntian.com/wp-content/uploads/2008/02/enso.png" alt="enso" /><a href="http://www.humanized.com/"></a><br />
 <br />
　　<a href="http://www.humanized.com/">Humanized.com</a>很好地利用了焦点原理。这个页面上直接呈现给用户的视觉元素只有一个“free”，它非常地吸引注意力，当仍然非常简洁且信息传递单纯。细小的线索给用户提供了充分地信息去找到“free”的产品。</p>
<p>　　使用中等强度的视觉元素来将用户的注意力吸引到网页的特定区域，能够使你网站的访客不假思索地从A点轻松到达B点，忽略背后可能存在的逻辑关系。访客遇到的问题越少，就越会具有良好的方向感，且会更加信任这个网站呈现的公司。换言之：对于这个屏幕呈现的内容需要琢磨的越少，可用性的首要目标——用户体验，就会越好。</p>
<p>　　<strong>4. 尽量使特征明显呈现</strong><br />
　　</p>
<p>　　当代网页设计总是嘲笑用鲜明视觉效果的大按钮指示用户：第一步——第二步——第三步……但是从设计的角度来说，这些元素事实上并非化石。相反的，这些导航是极其有效的，因为他们能够以一种非常简单和友好地方式带领网页的浏览者在网站内容间穿梭。</p>
<p>　　<img src="http://liuyuntian.com/wp-content/uploads/2008/02/dibusoft.jpg" alt="dibusoft" /><a href="http://dibusoft.com/"></a><br />
 <br />
　　<a href="http://dibusoft.com/">Dibusoft.com</a>将视觉的宜人性和清晰的网站结构相结合。这个网张有9个主要的导航选择，都放置在一眼能够看见的位置上。尽管，这些导航的颜色也许有些太浅了。<br />
　　让用户看清楚功能的合理性是成功用户界面的基准。这个是否达到了，实际上并不重要，重要的是内容是否被很好地理解了，而用户是否觉得他们与这个系统的交互非常舒服。</p>
<p>　　<strong>5. 有效书写<br />
</strong></p>
<p>　　由于网站与打印出版史不一样，它需要与用户喜欢的书写方式相匹配，且与浏览习惯相契合。鼓吹浮夸的文字将不会被阅读。大段没有图像、标粗或者斜体关键字的文本将被忽略。夸张的语言将被忽略。</p>
<p>　　说正经的。避免太过于高校或者自作聪明的名字，市场导向的名字，公司名，或者不被树枝的技术名词。例如，如果你描述了一种服务，需要用户注册一个账户，“注册”比“就从这开始吧！”要好，而后者依然好过“探寻我们打服务”。</p>
<p>　　<img src="http://liuyuntian.com/wp-content/uploads/2008/02/eleven2.png" alt="eleven" /><a href="http://www.eleven2.com/"></a><br />
 <br />
　　<a href="http://www.eleven2.com/">Eleven2.com</a>直击要害。没有华丽的语辞，没有夸张的陈述。取而代之的是一个价格：这就是用户来此需要的。</p>
<p>　　有效书写的优化解决方案</p>
<ul>
<li>使用简短的语句（直击要害，越快越好）</li>
<li>使用铺陈的方式（将内容分类，使用多层标题，用视觉线索和树状图）</li>
<li>使用平白直观的语言（一个宣传口号不用听上去像广告；给用户一些理性和客观的理由，让他们驻足在你的网站，享用你的服务）</li>
</ul>
<p>　　<strong>6. 尽量简洁<br />
</strong></p>
<p>　　 “简洁”是网站设计的首要原则。用户们很少驻足一个网站是因为喜欢它的设计，通常情况下他们是在找寻他们需要的信息，当然设计为他们提供了寻找帮助。尽量简洁，而不是复杂。</p>
<p>　　<img src="http://liuyuntian.com/wp-content/uploads/2008/02/crc.png" alt="crc" /><a href="http://crcbus.mattiaviviani.net/"></a><br />
 <br />
　　<a href="http://crcbus.mattiaviviani.net/">Crcbus</a>为网页访客提供了一个整洁简单的设计。也许因为它是意大利语的，你不能明白这个网站是干嘛的，但是，可以可以清晰地识别出导航，标题，内容区域和脚注。注意，图标都可以清晰地传递信息。只要将鼠标悬浮在图标上，更多的信息就自动呈现出来。</p>
<p>　　从用户的角度出发，好网页应当是一个纯文本的，没有广告的，新加内容与用户寻找目标密切相关的。这也是一个方便打印的网页带来用户良好体验的原因之一<br />
 </p>
<p>　　<img src="http://liuyuntian.com/wp-content/uploads/2008/02/simple.png" alt="simple" /><a href="http://getfinch.com/"></a> <br />
　　Finch清晰地呈现了网站信息，让用户在没有无关内容干扰的情况下，做出进一步浏览的选择。</p>
<p>　　<strong>7. 别怕留白<br />
</strong></p>
<p>　　事实上，在网页上留出空白区域的好处怎么估计都不过分。它不仅使网页访客的认知负荷减少，而且更容易获取网页所呈现的信息。新用户浏览网页时要做的第一件事情，通常是扫视全页，将内容区域在心理上划分成合适的组块，然后再对信息进行加工。<br />
　　复杂的结构不易于阅读，扫视，分析和使用。如果有两种选择，一是用明显的竖线将两个区域隔开，另一个是使用一些空白达到这种效果，通常比较好的选择是后者，即留出空白。分层减少页面复杂感（Simon法则）：视觉上的层次感觉越好，你网页上的内容信息就越容易被获取。</p>
<p>　　<img src="http://liuyuntian.com/wp-content/uploads/2008/02/cameron.jpg" alt="cameron" /><a href="http://cameron.io/"></a><br />
 <br />
　　空白区域是很好的。<a href="http://cameron.io/">Cameron.io</a>用空白区域作为设计的主打元素。这样就使得主要信息被层次鲜明地突出了。</p>
<p>　　<strong>8. 用“可视化”语言有效交流<br />
</strong></p>
<p>　　Aaron Marcus在“有效的视觉表达”一文中，曾经提及过<a target="_blank" href="http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html">三个基本原则</a>，其中一个就“视觉语言”，即用户在屏幕上所看到的内容。</p>
<ul>
<li>组织：为用户提供清晰稳定的概念结构。一致性，页面布局，模块关系和页面导航是组织中的重要概念。同样的表达方式和规则适用于所有元素。</li>
<li>经济化：尽量少地使用视觉元素。简约、清晰、区别性和重点突出，这四个要点需要被权衡。简约的含义是：只有表达需要的重要元素才可以被呈现。清晰则指的是：所有的组件都应当与它们传递的意义相吻合，不要引起歧义或者表达含糊。区别性是非常重要的，它要求所有元素都应当是独一无二的。重点突出则是指：关键的元素要能够被认知轻易捕获。</li>
<li>表达：使用用户能力能够接受的表达方式。为了使得表达顺畅，用户界面必须在可读性，易读性，结构，象征性，许多的观点，颜色和材质效果之间来找到一种平衡。在一个页面里最多只能用三种字体,最多只能用3种字号——文本每行最多呈现18个字或者50-80个字符。</li>
</ul>
<p>　　<strong>9. 规范是我们的朋友<br />
</strong></p>
<p>　　使用传统的元素设计出的网站并非索然无趣。事实上，传统规范非常有用，因为他们减少了学习的周期且节省了去收集有效性的精力。例如，如果所有网站对于RSS源都启用不同的视觉特征，这将是可用性的一个梦魇。这与我们习惯于对数据规范整理，或者对于商场的货架规律摆放，并无区别。</p>
<p>　　如果你遵从规范，你将获得用户的信心，信赖，信任，且证明你的可靠。遵从用户的希望——理解他们对于一个网站导航、文字结构、搜索栏位置的期望，等等。（参考Nielsen： <a target="_blank" href="http://www.useit.com/alertbox/">Usability Alertbox</a>）</p>
<p>　　<img src="http://liuyuntian.com/wp-content/uploads/2008/02/babelfish.png" alt="babelfish" /><a href="http://babelfish.yahoo.com/"></a><br />
 <br />
　　BabelFish in use: Amazon.com in Russian.<br />
　　</p>
<p>　　在可用性测试方面一个典型的例子是：将网页翻译成日语（假设你的网站用户不懂日语，例如，是使用<a href="http://babelfish.yahoo.com/">Babelfish</a>的），然后请你的可用性测试被试在异种语言的网页中寻找一些内容。如果规范被良好的遵从，那么用户是可以找到一些不适特别特殊的目标内容的，尽管他们对于这种语言一窍不通。</p>
<p>　　Steve Krug建议仅仅在你确认自己有一个更好的想法的时候再去创新，但是如果没有的话，好好遵守现有规范。</p>
<p>　　<strong>10. 早些测试，常常测试。<br />
</strong></p>
<p>　　TETO原则可被应用于任何网页设计，因为对于现有布局的重要的问题和细节，可用性测试总是能提供关键的洞见。<br />
测试不要做的太迟，太少，或是为了不合适的理由而做。“不为了不合适的理由儿测试”的意思是，许多设计方面的决策是为着当下的，你不能普适性地宣布某些布局方式就一定优于其它，因为你需要从一个特殊的角度去权衡（考虑需求，投资者的利益，预算，等等）</p>
<p>一些要点需要牢记于心:</p>
<ul>
<li>根据Steve Krug的研究，测试一个用户要比一个都不测好一倍，且在项目启动之初测试一个用户要比项目告罄的时候测试五十个要好得多。根据Boehm的法则一，错误在需求和设计活动中是非常常见的，而越迟被发现，代价就越昂贵。</li>
<li>测试是一个迭代的过程。这意味着你需要设计些东西，然后接着就测试它，修正它，然后再接着测试。也许第一轮不能发现一些问题，因为这些问题可能被其它问题所覆盖，用户们在其它问题上就已经被绊住了。</li>
<li>可用性测试总是带来有用的结果。无论是被指出现有网站存在的问题或者是没有触犯某些主流的设计错误，都会使您对于自己的项目做出一个有意义的审视。</li>
<li>根据Weinberg’的法则，网站的代码开发者不适合做为测试人员。这个原则同样适用于设计师。因为你对一个网站设计了相当长的时间，你已经不能够从一个全新的角度去审视它。你知道它是如何搭建的、如何工作的——你比独立的测试人员和网站访客们“知道的太多”。</li>
</ul>
<p>基线原则：如果你想做出一个极好的网站，那一定得测试。</p>
<p>参考文献</p>
<li><a href="http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html">Designing Effective User Interfaces</a> by <em>Suzanne Martin</em></li>
<li><a href="http://nibis.ni.schule.de/~lepke/homepage/webdesign/webdesign.html">Summary on Web Design</a></li>
<li><a href="http://www.macgregor.net/speaking/digitaleve/UID.swf">UID presentation</a> (Flash)</li>
<li><a href="http://www.usability.gov/pdfs/guidelines.html">Research-Based Web Design &amp; Usability Guidelines</a></li>
<li>“The psychology of computer programming” by <em>Gerald Weinberg</em></li>
<li>“Designing Web Usability” by <em>Jakob Nielsen</em> [JN / DWU]</li>
<li>“Prioritizing Web Usability” by <em>Jakob Nielsen</em></li>
<li>“Don’t Make Me Think” by <em>Steve Krug</em></li>
<li>“Usability for the Web: Designing Web Sites that Work” by <em>Tom Brinck, Darren Gergle, Scott Wood</em></li>
<li><a href="http://www.sylvantech.com/~talin/projects/ui_design.html">A Summary of Principles for User-Interface Design</a></li>
<hr /><h2>相关文章</h2><ul><li><a href="http://liuyuntian.com/2007/04/18/css-zen-garden-the-chinese-version.html" rel="bookmark" title="Permanent Link: 《CSS禅意花园》中文版">《CSS禅意花园》中文版</a></li><li><a href="http://liuyuntian.com/2008/04/03/googles-design-guidelines.html" rel="bookmark" title="Permanent Link: Google的设计导引">Google的设计导引</a></li><li><a href="http://liuyuntian.com/2008/12/02/update-wordpress-27-rc1.html" rel="bookmark" title="Permanent Link: 升级到WordPress2.7RC1">升级到WordPress2.7RC1</a></li></ul><hr /><small>Copyright &copy;  2003-2009 Xiaoxiao's Weblog All rights reserved.<br /> </small>]]></content:encoded>
			<wfw:commentRss>http://liuyuntian.com/2008/02/04/10-principles-of-effective-web-design-chinese-version.html/feed</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>他穿着带WordPress标志的T-Shirt</title>
		<link>http://liuyuntian.com/2008/01/05/want-buy-wordpress-tshirt.html</link>
		<comments>http://liuyuntian.com/2008/01/05/want-buy-wordpress-tshirt.html#comments</comments>
		<pubDate>Sat, 05 Jan 2008 14:30:25 +0000</pubDate>
		<dc:creator>xiaoxiao</dc:creator>
				<category><![CDATA[个人随笔]]></category>
		<category><![CDATA[boy]]></category>
		<category><![CDATA[flickr]]></category>
		<category><![CDATA[Hoodie]]></category>
		<category><![CDATA[tshirt]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[价格]]></category>
		<category><![CDATA[深圳]]></category>
		<category><![CDATA[照片]]></category>
		<category><![CDATA[网站]]></category>

		<guid isPermaLink="false">http://liuyuntian.com/post/580.html</guid>
		<description><![CDATA[Ronan, originally uploaded by ryancboren. 　　这几天在WP的官方网站上乱晃，看到WP还有一个专卖店（http://shop.wordpress.net），专门出售T-shirt和长袖运动衫，显然WordPress已经成为一种文化了。Flickr上还有专门的照片展，瞧上面的Boy，很酷吧？目前运动衫的价格是16英镑，约合人民币230元左右；T-shirt9.5英镑，约合人币民136元左右。本来是想弄件的，一加上130多元的运费，运到深圳来估计赶上Nike的价格了。臭鱼建议我直接画一个logo找个地儿直接印了算了。 　 　　想要的可以订一件试试，顺便告之下质量如何。实在不行，过完年就去华强北弄件了。下载WP的Logo源文件（AI格式） 　　这里还有教程，有喜欢Wordpress的哥们可以用Photoshop试下。 相关文章升级到WordPress2.7RC1买了件Rokey&#8217;s T-shirtWordPress2.4后台视频预览Copyright &#169; 2003-2009 Xiaoxiao's Weblog All rights reserved.]]></description>
			<content:encoded><![CDATA[<style type="text/css">                    .flickr-photo { border: 1px solid #CCCCCC;padding: 5px; }  .flickr-yourcomment { }  .flickr-frame { text-align: left; padding: 3px; }  .flickr-caption { font-size: 0.8em; margin-top: 0px; }</style>
<p class="flickr-frame"><a href="http://www.flickr.com/photos/ryanboren/2123124510/" title="photo sharing"><img src="http://farm3.static.flickr.com/2359/2123124510_8b1ee685e0.jpg" class="flickr-photo" /></a></p>
<p><span class="flickr-caption"><a href="http://www.flickr.com/photos/ryanboren/2123124510/">Ronan</a>, originally uploaded by <a href="http://www.flickr.com/people/ryanboren/">ryancboren</a>.</span></p>
<p class="flickr-yourcomment">　　这几天在WP的官方网站上乱晃，看到WP还有一个专卖店（<a href="http://shop.wordpress.net/">http://shop.wordpress.net</a>），专门出售T-shirt和长袖运动衫，显然WordPress已经成为一种文化了。Flickr上还有专门的<a target="_blank" href="http://www.flickr.com/groups/wordpress-apparel/" title="穿Wordpress衣服的哥们">照片展</a>，瞧上面的Boy，很酷吧？目前运动衫的价格是16英镑，约合人民币230元左右；T-shirt9.5英镑，约合人币民136元左右。本来是想弄件的，一加上130多元的运费，运到深圳来估计赶上Nike的价格了。臭鱼建议我直接画一个logo找个地儿直接印了算了。</p>
<p class="flickr-yourcomment"><img border="0" width="169" src="http://shop.wordpress.net/images/sku/WP5495NVY/WP5495NVY-flat.jpg" alt="长袖运动衫" height="183" />　<img border="0" width="169" src="http://shop.wordpress.net/images/sku/WP2102RED/WP2102RED-flat.jpg" alt="Tshirt" height="237" /></p>
<p class="flickr-yourcomment">　　想要的可以订一件试试，顺便告之下质量如何。实在不行，过完年就去华强北弄件了。下载<a href="http://wordpress.org/style/wp-logo.ai" title="Download a vector image of the WordPress Logo">WP的Logo源文件（AI格式）</a></p>
<p class="flickr-yourcomment">　　<a target="_blank" href="http://3nhanced.com/photoshop/how-to-make-a-badass-wordpress-logo/" title="英文版教程">这里还有教程</a>，有喜欢Wordpress的哥们可以用Photoshop试下。</p>
<hr /><h2>相关文章</h2><ul><li><a href="http://liuyuntian.com/2008/12/02/update-wordpress-27-rc1.html" rel="bookmark" title="Permanent Link: 升级到WordPress2.7RC1">升级到WordPress2.7RC1</a></li><li><a href="http://liuyuntian.com/2005/08/22/bought-pieces-of-rokey-tshirt.html" rel="bookmark" title="Permanent Link: 买了件Rokey&#8217;s T-shirt">买了件Rokey&#8217;s T-shirt</a></li><li><a href="http://liuyuntian.com/2008/01/03/wordpress24-background-video-preview.html" rel="bookmark" title="Permanent Link: WordPress2.4后台视频预览">WordPress2.4后台视频预览</a></li></ul><hr /><small>Copyright &copy;  2003-2009 Xiaoxiao's Weblog All rights reserved.<br /> </small>]]></content:encoded>
			<wfw:commentRss>http://liuyuntian.com/2008/01/05/want-buy-wordpress-tshirt.html/feed</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>Understanding Web Design</title>
		<link>http://liuyuntian.com/2007/11/21/understanding-web-design.html</link>
		<comments>http://liuyuntian.com/2007/11/21/understanding-web-design.html#comments</comments>
		<pubDate>Wed, 21 Nov 2007 14:01:49 +0000</pubDate>
		<dc:creator>xiaoxiao</dc:creator>
				<category><![CDATA[体验与设计]]></category>
		<category><![CDATA[转载备份]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[网站]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://liuyuntian.com/2007/11/21/understanding-web-design.html</guid>
		<description><![CDATA[转载来源：[url=http://www.alistapart.com/articles/understandingwebdesign]A List Apart[/url]

[size=9]We get better design when we understand our medium. Yet even at this late cultural hour, many people don’t understand web design. Among them can be found some of our most distinguished business and cultural leaders, including a few who possess a profound grasp of design—except as it relates to the web.

Some who don’t understand web design nevertheless]]></description>
			<content:encoded><![CDATA[<p>转载来源：<a target="_blank" href="http://www.alistapart.com/articles/understandingwebdesign">A List Apart</a></p>
<p><span style="font-size: 9pt">We get better design when we understand our medium. Yet even at this late cultural hour, many people don’t understand web design. Among them can be found some of our most distinguished business and cultural leaders, including a few who possess a profound grasp of design—except as it relates to the web.</span><span style="font-size: 9pt">Some who don’t understand web design nevertheless <span id="more-485"></span>have the job of creating websites or supervising web designers and developers. Others who don’t understand web design are nevertheless professionally charged with evaluating it on behalf of the rest of us. Those who understand the least make the most noise. They are the ones leading charges, slamming doors, and throwing money—at all the wrong people and things.</p>
<p>If we want better sites, better work, and better-informed clients, the need to educate begins with us.</p>
<p>Preferring real estate to architecture<br />
It’s hard to understand web design when you don’t understand the web. And it’s hard to understand the web when those who are paid to explain it either don’t get it themselves, or are obliged for commercial reasons to suppress some of what they know, emphasizing the Barnumesque over the brilliant.</p>
<p>The news media too often gets it wrong. Too much internet journalism follows the money; too little covers art and ideas. Driven by editors pressured by publishers worried about vanishing advertisers, even journalists who understand the web spend most of their time writing about deals and quoting dealmakers. Many do this even when the statement they’re quoting is patently self-serving and ludicrous—like Zuckerberg’s Law.</p>
<p>It’s not that Zuckerberg’s not news; and it’s not that business isn’t some journalists’ beat. But focusing on business to the exclusion of all else is like reporting on real estate deals while ignoring architecture.</p>
<p>And one tires of the news narrative’s one-dimensionalism. In 1994, the web was weird and wild, they told us. In ‘99 it was a kingmaker; in ‘01, a bust. In ‘02, news folk discovered blogs; in ‘04, perspiring guest bloggers on CNN explained how citizen journalists were reinventing news and democracy and would determine who won that year’s presidential election. I forget how that one turned out.</p>
<p>When absurd predictions die ridiculous deaths, nobody resigns from the newsroom, they just throw a new line into the water—like marketers replacing a slogan that tanked. After decades of news commoditization, what’s amazing is how many good reporters there still are, and how hard many try to lay accurate information before the public. Sometimes you can almost hear it beneath the roar of the grotesque and the exceptional.</p>
<p>The sustainable circle of self-regard<br />
News media are not the only ones getting it wrong. Professional associations get it wrong every day, and commemorate their wrongness with an annual festival. Each year, advertising and design magazines and professional organizations hold contests for “new media design” judged by the winners of last year’s competitions. That they call it “new media design” tells them nothing and you and me everything.</p>
<p>Although there are exceptions, for the most part the creators of winning entries see the web as a vehicle for advertising and marketing campaigns in which the user passively experiences Flash and video content. For the active user, there is gaming—but what you and I think of as active web use is limited to clicking a “Digg this page” button.</p>
<p>The winning sites look fabulous as screen shots in glossy design annuals. When the winners become judges, they reward work like their own. Thus sites that behave like TV and look good between covers continue to be created, and a generation of clients and art directors thinks that stuff is the cream of web design.</p>
<p>Design critics get it wrong, too<br />
People who are smart about print can be less bright about the web. Their critical faculties, honed to perfection during the Kerning Wars, smash to bits against the barricades of our profession.</p>
<p>The less sophisticated lament on our behalf that we are stuck with ugly fonts. They wonder aloud how we can enjoy working in a medium that offers us less than absolute control over every atom of the visual experience. What they are secretly asking is whether or not we are real designers. (They suspect that we are not.) But these are the juniors, the design students and future critics. Their opinions are chiefly of interest to their professors, and one prays they have good ones.</p>
<p>More sophisticated critics understand that the web is not print and that limitations are part of every design discipline. Yet even these eggheads will sometimes succumb to fallacious comparatives. (I’ve done it myself, although long ago and strictly for giggles.) Where are the masterpieces of web design, these critics cry. That Google Maps might be as representative of our age as the Mona Lisa was of Leonardo’s—and as brilliant, in its way—satisfies many of us as an answer, but might not satisfy the design critic in search of a direct parallel to, oh, I don’t know, let’s say Milton Glaser’s iconic Bob Dylan poster.</p>
<p>Typography, architecture, and web design<br />
The trouble is, web design, although it employs elements of graphic design and illustration, does not map to them. If one must compare the web to other media, typography would be a better choice. For a web design, like a typeface, is an environment for someone else’s expression. Stick around and I’ll tell you which site design is like Helvetica.</p>
<p>Architecture (the kind that uses steel and glass and stone) is also an apt comparison—or at least, more apt than poster design. The architect creates planes and grids that facilitate the dynamic behavior of people. Having designed, the architect relinquishes control. Over time, the people who use the building bring out and add to the meaning of the architect’s design.</p>
<p>Of course, all comparisons are gnarly by nature. What is the “London Calling” of television? Who is the Jane Austen of automotive design? Madame Butterfly is not less beautiful for having no car chase sequence, peanut butter no less tasty because it cannot dance.</p>
<p>So what is web design?<br />
Web design is not book design, it is not poster design, it is not illustration, and the highest achievements of those disciplines are not what web design aims for. Although websites can be delivery systems for games and videos, and although those delivery systems can be lovely to look at, such sites are exemplars of game design and video storytelling, not of web design. So what is web design?</p>
<p>Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.</p>
<p>Let’s repeat that, with emphasis:</p>
<p><strong>Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.</strong></p>
<p>She walks in beauty<br />
Great web designs are like great typefaces: some, like Rosewood, impose a personality on whatever content is applied to them. Others, like Helvetica, fade into the background (or try to), magically supporting whatever tone the content provides. (We can argue tomorrow whether Helvetica is really as neutral as water.)</p>
<p>Which web design is like that? For one, Douglas Bowman’s white “Minima” layout for Blogger, used by literally millions of writers—and it feels like it was designed for each of them individually. That is great design.</p>
<p>Great web designs are like great buildings. All office buildings, however distinctive, have lobbies and bathrooms and staircases. Websites, too, share commonalities.</p>
<p>Although a great site design is completely individual, it is also a great deal like other site designs that perform similar functions. The same is true of great magazine and newspaper layouts, which differ from banal magazine and newspaper layouts in a hundred subtle details. Few celebrate great magazine layouts, yet millions consciously or unconsciously appreciate them, and nobody laments that they are not posters.</p>
<p>The inexperienced or insufficiently thoughtful designer complains that too many websites use grids, too many sites use columns, too many sites are “boxy.” Efforts to avoid boxiness have been around since 1995; while occasionally successful, they have most often produced aesthetically wretched and needlessly unusable designs.</p>
<p>The experienced web designer, like the talented newspaper art director, accepts that many projects she works on will have headers and columns and footers. Her job is not to whine about emerging commonalities but to use them to create pages that are distinctive, natural, brand-appropriate, subtly memorable, and quietly but unmistakably engaging.</p>
<p>If she achieves all that and sweats the details, her work will be beautiful. If not everyone appreciates this beauty—if not everyone understands web design—then let us not cry for web design, but for those who cannot see.</p>
<p></span></p>
<hr /><h2>相关文章</h2><ul><li><a href="http://liuyuntian.com/2007/06/08/the-10-designers-commandment.html" rel="bookmark" title="Permanent Link: 我看《设计师十之诫》">我看《设计师十之诫》</a></li><li><a href="http://liuyuntian.com/2007/06/16/design-of-the-design.html" rel="bookmark" title="Permanent Link: 读后感：《设计中的设计》">读后感：《设计中的设计》</a></li><li><a href="http://liuyuntian.com/2008/08/10/my-reader-share-2008-08-10.html" rel="bookmark" title="Permanent Link: 我的阅读分享2008.08.10">我的阅读分享2008.08.10</a></li></ul><hr /><small>Copyright &copy;  2003-2009 Xiaoxiao's Weblog All rights reserved.<br /> </small>]]></content:encoded>
			<wfw:commentRss>http://liuyuntian.com/2007/11/21/understanding-web-design.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>QQ实验室网站上线</title>
		<link>http://liuyuntian.com/2006/09/12/qq-lab-website-publish.html</link>
		<comments>http://liuyuntian.com/2006/09/12/qq-lab-website-publish.html#comments</comments>
		<pubDate>Tue, 12 Sep 2006 12:02:00 +0000</pubDate>
		<dc:creator>for3w</dc:creator>
				<category><![CDATA[转载备份]]></category>
		<category><![CDATA[QQ相关]]></category>
		<category><![CDATA[实验室]]></category>
		<category><![CDATA[网站]]></category>
		<category><![CDATA[腾讯]]></category>

		<guid isPermaLink="false">http://liuyuntian.com/2006/09/12/qq-lab-website-publish.html</guid>
		<description><![CDATA[　　QQ实验室网站地址 http://labs.qq.com
　　[img]http://static.flickr.com/83/241289738_335cac8ce5_m.jpg[/img]
　　QQ实验室是公司推出的创新网站。QQ实验室以创新为核心，建立完整的创新体系，挖掘用户需求，改善产品，最终服务于广大Q民。在室验室里会有一些新idea和新的活动推出。如马上会封测的[color=Green]QQvideo[/color]，还有[url=http://labs.qq.com/club/]腾讯创新俱乐部[/url]。

　　另外，如果您喜欢创新，够Cool的想法和有能力转化为产品的念头，可以看下:[url=http://tic.qq.com/]2006年度腾讯创新大赛[/url]，最高创新金奖是￥10000元和1个5年免费QQ会员资格。

　　BTW:QQmail基本版小范围测试上线。
      　]]></description>
			<content:encoded><![CDATA[<p>　　QQ实验室网站地址 http://labs.qq.com<br />
　　<img src="http://static.flickr.com/83/241289738_335cac8ce5_m.jpg" /><br />
　　QQ实验室是公司推出的创新网站。QQ实验室以创新为核心，建立完整的创新体系，挖掘用户需求，改善产品，最终服务于广大Q民。在室验室里会有一些新idea和新的活动推出。如马上会封测的<span style="color:Green">QQvideo</span>，还有<a href="http://labs.qq.com/club/" target="_blank">腾讯创新俱乐部</a>。</p>
<p>　　另外，如果您喜欢创新，够Cool的想法和有能力转化为产品的念头，可以看下:<a href="http://tic.qq.com/" target="_blank">2006年度腾讯创新大赛</a>，最高创新金奖是￥10000元和1个5年免费QQ会员资格。</p>
<p>　　BTW:QQmail基本版小范围测试上线。<br />
      　<span id="more-298"></span></p>
<hr /><h2>相关文章</h2><ul><li><a href="http://liuyuntian.com/2005/12/14/site-upgrades-website-of-the-large-number-of-ideas-and-issues-requiring-attention.html" rel="bookmark" title="Permanent Link: 大型网站升级改版的一些想法及需要注意的问题">大型网站升级改版的一些想法及需要注意的问题</a></li><li><a href="http://liuyuntian.com/2009/03/24/2009%e5%b9%b4%e5%85%b3%e4%ba%8ewebux%e7%b1%bb%e7%9a%84%e6%96%b0%e4%b9%a6.html" rel="bookmark" title="Permanent Link: 2009年关于WebUX类的新书">2009年关于WebUX类的新书</a></li><li><a href="http://liuyuntian.com/2006/10/19/on-skii-incident-and-the-site-standards.html" rel="bookmark" title="Permanent Link: 谈SKII事件和网站标准">谈SKII事件和网站标准</a></li></ul><hr /><small>Copyright &copy;  2003-2009 Xiaoxiao's Weblog All rights reserved.<br /> </small>]]></content:encoded>
			<wfw:commentRss>http://liuyuntian.com/2006/09/12/qq-lab-website-publish.html/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>MSDN上的IE开发中心网站更新</title>
		<link>http://liuyuntian.com/2006/09/05/msdn%e4%b8%8a%e7%9a%84ie%e5%bc%80%e5%8f%91%e4%b8%ad%e5%bf%83%e7%bd%91%e7%ab%99%e6%9b%b4%e6%96%b0.html</link>
		<comments>http://liuyuntian.com/2006/09/05/msdn%e4%b8%8a%e7%9a%84ie%e5%bc%80%e5%8f%91%e4%b8%ad%e5%bf%83%e7%bd%91%e7%ab%99%e6%9b%b4%e6%96%b0.html#comments</comments>
		<pubDate>Tue, 05 Sep 2006 09:57:01 +0000</pubDate>
		<dc:creator>for3w</dc:creator>
				<category><![CDATA[转载备份]]></category>
		<category><![CDATA[ie]]></category>
		<category><![CDATA[msds]]></category>
		<category><![CDATA[开发中心]]></category>
		<category><![CDATA[网站]]></category>

		<guid isPermaLink="false">http://liuyuntian.com/2006/09/05/msdn%e4%b8%8a%e7%9a%84ie%e5%bc%80%e5%8f%91%e4%b8%ad%e5%bf%83%e7%bd%91%e7%ab%99%e6%9b%b4%e6%96%b0.html</guid>
		<description><![CDATA[　　地址：http://msdn.microsoft.com/ie/　

　　增加了IE 7的很多归纳，特别是盒模型的一些变化，仅以备份，作为参考。如：
[list]
[*][url=http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/cols/dnexpie/ie7_css_compat.asp]Cascading Style Sheet Compatibility in Internet Explorer 7[/url]
[*][url=http://msdn.microsoft.com/library/default.asp?url=/workshop/essentials/whatsnew/whatsnew_70_sdk.asp]What's New in Internet Explorer 7[/url]
[*][url=http://msdn.microsoft.com/li]]></description>
			<content:encoded><![CDATA[<p>　　地址：http://msdn.microsoft.com/ie/　</p>
<p>　　增加了IE 7的很多归纳，特别是盒模型的一些变化，仅以备份，作为参考。如：</p>
<ul>
<li><a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/cols/dnexpie/ie7_css_compat.asp" target="_blank">Cascading Style Sheet Compatibility in Internet Explorer 7</a>
</li>
<li><a href="http://msdn.microsoft.com/library/default.asp?url=/workshop/essentials/whatsnew/whatsnew_70_sdk.asp" target="_blank">What&#8217;s New in Internet Explorer 7</a>
</li>
<li><a href="http://msdn.microsoft.com/li<span id="more-293"></span>brary/default.asp?url=/library/en-us/IETechCol/cols/dnexpie/ie7_css_compat.asp&#8221; target=&#8221;_blank&#8221;>Enhanced Styles In Internet Explorer 7</a>
</li>
</ul>
<p>　　当然在近期的新闻中，还看到有反IE的，比如这里，连域名也是　http://www.stopie.com/。</p>
<hr /><h2>相关文章</h2><ul><li><a href="http://liuyuntian.com/2006/08/30/windows-vista-user-experience-guidelines.html" rel="bookmark" title="Permanent Link: Windows Vista User Experience Guidelines">Windows Vista User Experience Guidelines</a></li><li><a href="http://liuyuntian.com/2005/06/28/continue-to-pay-attention-to-the-news-ie7.html" rel="bookmark" title="Permanent Link: 继续关注IE7的一些新闻">继续关注IE7的一些新闻</a></li><li><a href="http://liuyuntian.com/2005/07/01/%e4%bb%8a%e5%a4%a9%e7%9a%84%e5%8f%91%e7%8e%b01.html" rel="bookmark" title="Permanent Link: 今天的发现(1)">今天的发现(1)</a></li></ul><hr /><small>Copyright &copy;  2003-2009 Xiaoxiao's Weblog All rights reserved.<br /> </small>]]></content:encoded>
			<wfw:commentRss>http://liuyuntian.com/2006/09/05/msdn%e4%b8%8a%e7%9a%84ie%e5%bc%80%e5%8f%91%e4%b8%ad%e5%bf%83%e7%bd%91%e7%ab%99%e6%9b%b4%e6%96%b0.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[转]十五个改变了世界的网站</title>
		<link>http://liuyuntian.com/2006/08/15/%e8%bd%ac%e5%8d%81%e4%ba%94%e4%b8%aa%e6%94%b9%e5%8f%98%e4%ba%86%e4%b8%96%e7%95%8c%e7%9a%84%e7%bd%91%e7%ab%99.html</link>
		<comments>http://liuyuntian.com/2006/08/15/%e8%bd%ac%e5%8d%81%e4%ba%94%e4%b8%aa%e6%94%b9%e5%8f%98%e4%ba%86%e4%b8%96%e7%95%8c%e7%9a%84%e7%bd%91%e7%ab%99.html#comments</comments>
		<pubDate>Tue, 15 Aug 2006 07:00:04 +0000</pubDate>
		<dc:creator>for3w</dc:creator>
				<category><![CDATA[体验与设计]]></category>
		<category><![CDATA[改变]]></category>
		<category><![CDATA[改变世界]]></category>
		<category><![CDATA[网站]]></category>

		<guid isPermaLink="false">http://liuyuntian.com/2006/08/15/%e8%bd%ac%e5%8d%81%e4%ba%94%e4%b8%aa%e6%94%b9%e5%8f%98%e4%ba%86%e4%b8%96%e7%95%8c%e7%9a%84%e7%bd%91%e7%ab%99.html</guid>
		<description><![CDATA[　　[exurl=http://observer.guardian.co.uk/]Observer[/exurl]最近评出来影响全球的15个网站，看了一下，有两个网站居然是第一次打开。另人奇怪的是，这十五个网站都是清一色的英文站点，如果说十五个网站改变了世界，为什么不说英语的国家侵略了世界的文化？以下是十五个站点:

　　1. [exurl=http://www.eBay.com]eBay.com[/exurl]　Founded: Pierre Omidyar, 1995, US
　　2. [exurl=http://www.wikipedia.com]wikipedia.com[/exurl]　Founded: Jimmy Wales, 2001, US
　　3. [exurl=http://www.napster.com]napster.com[/exurl]napster.com　Founded: Shawn Fanning, 1999, US
　　4. [exurl=http://www.youtube.com]youtube.com[/exurl]　Founded:]]></description>
			<content:encoded><![CDATA[<p>　　[exurl=http://observer.guardian.co.uk/]Observer[/exurl]最近评出来影响全球的15个网站，看了一下，有两个网站居然是第一次打开。另人奇怪的是，这十五个网站都是清一色的英文站点，如果说十五个网站改变了世界，为什么不说英语的国家侵略了世界的文化？以下是十五个站点:</p>
<p>　　1. [exurl=http://www.eBay.com]eBay.com[/exurl]　Founded: Pierre Omidyar, 1995, US<br />
　　2. [exurl=http://www.wikipedia.com]wikipedia.com[/exurl]　Founded: Jimmy Wales, 2001, US<br />
　　3. [exurl=http://www.napster.com]napster.com[/exurl]napster.com　Founded: Shawn Fanning, 1999, US<br />
　　4. [exurl=http://www.youtube.com]youtube.com[/exurl]　Founded: <span id="more-260"></span>Chad Hurley, Steve Chen and Jawed Karim, 2005, US<br />
　　5. [exurl=http://www.blogger.com]blogger.com[/exurl]　Founded: Evan Williams, 1999, US<br />
　　6. [exurl=http://www.friendsreunited.com]friendsreunited.com[/exurl]　Founded: Steve and Julie Pankhurst, 1999, UK<br />
　　7. [exurl=http://www.drudgereport.com]drudgereport.com[/exurl]　Founded: Matt Drudge, 1994, US<br />
　　8. [exurl=http://www.myspace.com]www.myspace.com[/exurl]　Founded: Tom Anderson and Chris DeWolfe, 2003, US<br />
　　9. [exurl=http://www.amazon.com]amazon.com[/exurl]　Founded: Jeff Bezos, 1994, US<br />
　　10. [exurl=http://www.slashdot.org]slashdot.org[/exurl]　Founded: Rob Malda, 1997, US<br />
　　11. [exurl=http://www.salon.com]salon.com[/exurl]　Founded: David Talbot, 1995, US<br />
　　12. [exurl=http://www.craigslist.org]craigslist.org[/exurl]　Founded: Craig Newmark, 1995, US<br />
　　13. [exurl=http://www.google.com]google.com[/exurl]　Founded: Larry Page and Sergey Brin, 1998, US<br />
　　14. [exurl=http://www.yahoo.com]yahoo.com[/exurl]　Founded: David Filo and JerryYang, 1994, US<br />
　　15. [exurl=http://www.easyjet.com]easyjet.com[/exurl]　Founded: Stelios Haji-Ioannou, 1995, UK</p>
<p>原文：http://observer.guardian.co.uk/review/story/0,,1843263,00.html</p>
<hr /><small>Copyright &copy;  2003-2009 Xiaoxiao's Weblog All rights reserved.<br /> </small>]]></content:encoded>
			<wfw:commentRss>http://liuyuntian.com/2006/08/15/%e8%bd%ac%e5%8d%81%e4%ba%94%e4%b8%aa%e6%94%b9%e5%8f%98%e4%ba%86%e4%b8%96%e7%95%8c%e7%9a%84%e7%bd%91%e7%ab%99.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Netscape的新页面开始测试</title>
		<link>http://liuyuntian.com/2006/06/19/netscape-began-testing-a-new-page.html</link>
		<comments>http://liuyuntian.com/2006/06/19/netscape-began-testing-a-new-page.html#comments</comments>
		<pubDate>Mon, 19 Jun 2006 19:17:03 +0000</pubDate>
		<dc:creator>for3w</dc:creator>
				<category><![CDATA[体验与设计]]></category>
		<category><![CDATA[netscape]]></category>
		<category><![CDATA[更新]]></category>
		<category><![CDATA[测试]]></category>
		<category><![CDATA[网站]]></category>

		<guid isPermaLink="false">http://liuyuntian.com/2006/06/19/netscape-began-testing-a-new-page.html</guid>
		<description><![CDATA[　　地址：http://www.beta.netscape.com/

　　从昨天开始就开始争议了，[url=http://www.readwriteweb.com/archives/digg_ceo_jay_ad.php]看这里[/url]

　　对于这次改版，我保持继续观望中。]]></description>
			<content:encoded><![CDATA[<p>　　地址：http://www.beta.netscape.com/</p>
<p>　　从昨天开始就开始争议了，<a target="_blank" href="http://www.readwriteweb.com/archives/digg_ceo_jay_ad.php">看这里</a></p>
<p>　　对于这次改版，我保持继续观望中。<span id="more-219"></span></p>
<hr /><h2>相关文章</h2><ul><li><a href="http://liuyuntian.com/2006/09/18/webqq-began-trial-application.html" rel="bookmark" title="Permanent Link: WebQQ开始试用申请">WebQQ开始试用申请</a></li><li><a href="http://liuyuntian.com/2005/06/22/dreamweaver-8-began-testing.html" rel="bookmark" title="Permanent Link: Dreamweaver 8 开始测试">Dreamweaver 8 开始测试</a></li><li><a href="http://liuyuntian.com/2006/10/17/qq-video-began-demo.html" rel="bookmark" title="Permanent Link: QQ视频开始公测">QQ视频开始公测</a></li></ul><hr /><small>Copyright &copy;  2003-2009 Xiaoxiao's Weblog All rights reserved.<br /> </small>]]></content:encoded>
			<wfw:commentRss>http://liuyuntian.com/2006/06/19/netscape-began-testing-a-new-page.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>live.com下周变脸</title>
		<link>http://liuyuntian.com/2006/06/11/livecom-face-next-week.html</link>
		<comments>http://liuyuntian.com/2006/06/11/livecom-face-next-week.html#comments</comments>
		<pubDate>Sun, 11 Jun 2006 20:05:37 +0000</pubDate>
		<dc:creator>for3w</dc:creator>
				<category><![CDATA[体验与设计]]></category>
		<category><![CDATA[Live]]></category>
		<category><![CDATA[更新]]></category>
		<category><![CDATA[网站]]></category>

		<guid isPermaLink="false">http://liuyuntian.com/2006/06/11/livecom-face-next-week.html</guid>
		<description><![CDATA[　　来自zdnet的[url=http://blogs.zdnet.com/web2explorer/?p=206]消息[/url]，Live.com下周将会变脸。来自Live的[url=http://spaces.msn.com/kristopherbarton/]Kris Barton[/url]提到在个性化主页的时候使用新的体验帮助用户快速设置好自己感兴趣的内容，其中主要变化有：１、界面UI将会和MSN Live Messenger保持一致；２、会把搜索作为缺省主页；３、会成为一个个性化可定置的主页（类似Google）；４、Live.com将会变成一个服务中心的入口。种种迹象表明，Live战略越来越近了。

　　以下为[url=http://www.live.com]Live.com[/url]新的界面。

　　[img]http://blogs.zdnet.com/images/live1.png[/img]

　　[img]http://blogs.zdnet.com/images/live2.png[/img]

　　[img]http://blogs.zdnet.com/images/live3.png[/img]
　　]]></description>
			<content:encoded><![CDATA[<p>　　来自zdnet的<a target="_blank" href="http://blogs.zdnet.com/web2explorer/?p=206">消息</a>，Live.com下周将会变脸。来自Live的<a target="_blank" href="http://spaces.msn.com/kristopherbarton/">Kris Barton</a>提到在个性化主页的时候使用新的体验帮助用户快速设置好自己感兴趣的内容，其中主要变化有：１、界面UI将会和MSN Live Messenger保持一致；２、会把搜索作为缺省主页；３、会成为一个个性化可定置的主页（类似Google）；４、Live.com将会变成一个服务中心的入口。种种迹象表明，Live战略越来越近了。</p>
<p>　　以下为<a target="_blank" href="http://www.live.com">Live.com</a>新的界面。</p>
<p>　　<img src="http://blogs.zdnet.com/images/live1.png" /></p>
<p>　　<img src="http://blogs.zdnet.com/images/live2.png" /></p>
<p>　　<img src="http://blogs.zdnet.com/images/live3.png" /><br />
　　<span id="more-215"></span></p>
<hr /><h2>相关文章</h2><ul><li><a href="http://liuyuntian.com/2010/11/11/my-bike-week-experience.html" rel="bookmark" title="Permanent Link: 骑车一周感受">骑车一周感受</a></li><li><a href="http://liuyuntian.com/2005/12/01/annual-leave-and-he-blog-week-suspension-update.html" rel="bookmark" title="Permanent Link: 年假到了，Blog暂停更新一周">年假到了，Blog暂停更新一周</a></li><li><a href="http://liuyuntian.com/2009/04/12/don-norman-on-user-experience-design.html" rel="bookmark" title="Permanent Link: Don Norman on User Experience Design">Don Norman on User Experience Design</a></li></ul><hr /><small>Copyright &copy;  2003-2009 Xiaoxiao's Weblog All rights reserved.<br /> </small>]]></content:encoded>
			<wfw:commentRss>http://liuyuntian.com/2006/06/11/livecom-face-next-week.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>推荐一个聚合RSS的网站</title>
		<link>http://liuyuntian.com/2005/09/28/recommend-a-site-polymerization-rss.html</link>
		<comments>http://liuyuntian.com/2005/09/28/recommend-a-site-polymerization-rss.html#comments</comments>
		<pubDate>Wed, 28 Sep 2005 13:40:31 +0000</pubDate>
		<dc:creator>for3w</dc:creator>
				<category><![CDATA[体验与设计]]></category>
		<category><![CDATA[rss]]></category>
		<category><![CDATA[网站]]></category>

		<guid isPermaLink="false">http://liuyuntian.com/2005/09/28/recommend-a-site-polymerization-rss.html</guid>
		<description><![CDATA[点击－> [url=http://www.netvibes.com/]Netvibes[/url]

    当XML成为一种标准的时候，都开始利用了。in other words，聚合开始了，我只想要我要的信息。

    那么订阅是不是该收费了？]]></description>
			<content:encoded><![CDATA[<p>点击－&gt; <a target="_blank" href="http://www.netvibes.com/">Netvibes</a></p>
<p>当XML成为一种标准的时候，都开始利用了。in other words，聚合开始了，我只想要我要的信息。</p>
<p>那么订阅是不是该收费了？<span id="more-99"></span></p>
<hr /><h2>相关文章</h2><ul><li><a href="http://liuyuntian.com/2006/04/29/recommend-this-book-search.html" rel="bookmark" title="Permanent Link: 推荐今年新书《搜》">推荐今年新书《搜》</a></li><li><a href="http://liuyuntian.com/2007/11/26/garry-emery-keywords-hint.html" rel="bookmark" title="Permanent Link: &#8220;暗示&#8221; 格力·艾米的关键词之一">&#8220;暗示&#8221; 格力·艾米的关键词之一</a></li><li><a href="http://liuyuntian.com/2007/12/07/garry-emery-keywords-conversion.html" rel="bookmark" title="Permanent Link: &#8220;转换&#8221; 格力·艾米的关键词之三">&#8220;转换&#8221; 格力·艾米的关键词之三</a></li></ul><hr /><small>Copyright &copy;  2003-2009 Xiaoxiao's Weblog All rights reserved.<br /> </small>]]></content:encoded>
			<wfw:commentRss>http://liuyuntian.com/2005/09/28/recommend-a-site-polymerization-rss.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>闻老同事正在做的两个站</title>
		<link>http://liuyuntian.com/2005/09/20/wen-old-colleagues-are-doing-two-stations.html</link>
		<comments>http://liuyuntian.com/2005/09/20/wen-old-colleagues-are-doing-two-stations.html#comments</comments>
		<pubDate>Tue, 20 Sep 2005 14:25:02 +0000</pubDate>
		<dc:creator>for3w</dc:creator>
				<category><![CDATA[个人随笔]]></category>
		<category><![CDATA[网站]]></category>
		<category><![CDATA[老同事]]></category>

		<guid isPermaLink="false">http://liuyuntian.com/2005/09/20/wen-old-colleagues-are-doing-two-stations.html</guid>
		<description><![CDATA[http://www.gougou.com/

http://www.duowan.com/

这两个站不谈技术，思路都相当的好。]]></description>
			<content:encoded><![CDATA[<p>http://www.gougou.com/</p>
<p>http://www.duowan.com/</p>
<p>这两个站不谈技术，思路都相当的好。<span id="more-95"></span></p>
<hr /><h2>相关文章</h2><ul><li><a href="http://liuyuntian.com/2008/01/20/to-my-colleagues-on-the-paper-2.html" rel="bookmark" title="Permanent Link: 同事给我的小纸条">同事给我的小纸条</a></li><li><a href="http://liuyuntian.com/2006/08/25/recommended-several-colleagues-blog.html" rel="bookmark" title="Permanent Link: 推荐几个同事的Blog">推荐几个同事的Blog</a></li><li><a href="http://liuyuntian.com/2006/12/16/to-my-colleagues-on-the-paper.html" rel="bookmark" title="Permanent Link: 同事给我的小纸条">同事给我的小纸条</a></li></ul><hr /><small>Copyright &copy;  2003-2009 Xiaoxiao's Weblog All rights reserved.<br /> </small>]]></content:encoded>
			<wfw:commentRss>http://liuyuntian.com/2005/09/20/wen-old-colleagues-are-doing-two-stations.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

