<?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/%e6%b5%8b%e8%af%95/feed" rel="self" type="application/rss+xml" />
	<link>http://liuyuntian.com</link>
	<description>刘云天的个人博客</description>
	<lastBuildDate>Thu, 29 Jul 2010 12:56:30 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
	
<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery.ajax({type:'GET',url:'http://liuyuntian.com/wp-content/plugins/wp-postviews-plus/postviews_plus.php',data:'todowppvp=add&type=tag&id=638_1',cache:false,dataType:'script'});
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->
	<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/02/01/google-chinese-punctuation-marks-bug.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/2008/02/04/10-principles-of-effective-web-design-chinese-version.html/feed</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>Google Groups beta上线</title>
		<link>http://liuyuntian.com/2006/10/08/google-groups-beta%e4%b8%8a%e7%ba%bf.html</link>
		<comments>http://liuyuntian.com/2006/10/08/google-groups-beta%e4%b8%8a%e7%ba%bf.html#comments</comments>
		<pubDate>Sun, 08 Oct 2006 23:29:24 +0000</pubDate>
		<dc:creator>xiaoxiao</dc:creator>
				<category><![CDATA[转载备份]]></category>
		<category><![CDATA[beta]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[group]]></category>
		<category><![CDATA[测试]]></category>

		<guid isPermaLink="false">http://liuyuntian.com/2006/10/08/google-groups-beta%e4%b8%8a%e7%ba%bf.html</guid>
		<description><![CDATA[　　地址：http://groups-beta.google.com/

　　应该是EN版的换了，不是EN语言的可以点这里：[url=http://groups-beta.google.com/?hl=en]http://groups-beta.google.com/?hl=en[/url]，给我的感觉是整个界面清爽了，变化最大的莫过于Google惯用的左侧导航移到了右侧。不得不说，Group beta借鉴了[url=http://groups.yahoo.com/]Yahoo groups[/url]的一些东西，也整合了Google自己的Page Creator，每个Group还给了100M的空间，赞一个。尽管传言Google内部声称"We don't like UI Designers"，但看到Group beta对Icon的表现还是很好的。

　　同时，[url=http://www.google.com/reader/view/]Google Reader[/url]也升级了。]]></description>
			<content:encoded><![CDATA[<p>　　地址：http://groups-beta.google.com/</p>
<p>　　应该是EN版的换了，不是EN语言的可以点这里：<a href="http://groups-beta.google.com/?hl=en" target="_blank">http://groups-beta.google.com/?hl=en</a>，给我的感觉是整个界面清爽了，变化最大的莫过于Google惯用的左侧导航移到了右侧。不得不说，Group beta借鉴了<a href="http://groups.yahoo.com/" target="_blank">Yahoo groups</a>的一些东西，也整合了Google自己的Page Creator，每个Group还给了100M的空间，赞一个。尽管传言Google内部声称"We don't like UI Designers"，但看到Group beta对Icon的表现还是很好的。</p>
<p>　　同时，<a href="http://www.google.com/reader/view/" target="_blank">Google Reader</a>也升级了。<span id="more-323"></span></p>
<hr /><h2>相关文章</h2><ul><li><a href="http://liuyuntian.com/2006/08/25/live-video-search-test-version-of-the-line.html" rel="bookmark" title="Permanent Link: Live视频搜索测试版上线">Live视频搜索测试版上线</a></li><li><a href="http://liuyuntian.com/2006/01/07/google-pack.html" rel="bookmark" title="Permanent Link: Google Pack">Google Pack</a></li><li><a href="http://liuyuntian.com/2006/08/26/google-offers-services-webmaster.html" rel="bookmark" title="Permanent Link: Google提供Webmaster服务">Google提供Webmaster服务</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/10/08/google-groups-beta%e4%b8%8a%e7%ba%bf.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>[转载]进行可用性测试的8个指南</title>
		<link>http://liuyuntian.com/2006/08/03/%e8%bd%ac%e8%bd%bd%e8%bf%9b%e8%a1%8c%e5%8f%af%e7%94%a8%e6%80%a7%e6%b5%8b%e8%af%95%e7%9a%848%e4%b8%aa%e6%8c%87%e5%8d%97.html</link>
		<comments>http://liuyuntian.com/2006/08/03/%e8%bd%ac%e8%bd%bd%e8%bf%9b%e8%a1%8c%e5%8f%af%e7%94%a8%e6%80%a7%e6%b5%8b%e8%af%95%e7%9a%848%e4%b8%aa%e6%8c%87%e5%8d%97.html#comments</comments>
		<pubDate>Thu, 03 Aug 2006 10:26:41 +0000</pubDate>
		<dc:creator>for3w</dc:creator>
				<category><![CDATA[体验与设计]]></category>
		<category><![CDATA[可用性]]></category>
		<category><![CDATA[可用性测试]]></category>
		<category><![CDATA[指南]]></category>
		<category><![CDATA[测试]]></category>

		<guid isPermaLink="false">http://liuyuntian.com/2006/08/03/%e8%bd%ac%e8%bd%bd%e8%bf%9b%e8%a1%8c%e5%8f%af%e7%94%a8%e6%80%a7%e6%b5%8b%e8%af%95%e7%9a%848%e4%b8%aa%e6%8c%87%e5%8d%97.html</guid>
		<description><![CDATA[本文为转载，出处：[exurl=http://www.yangsu.cn/read.php/70.htm]进行可用性测试的8个指南[/exurl]

译文:进行可用性测试的8个指南

引言:
　　在专业的web设计圈，可用性测试会议已经成为任何重点项目的一个基本组成部分。对于关注品牌发展和产品开发的人群来来说，可用性测试是提供获取网站目标人群的反馈意见的宝贵机会，并且应该尽早开始.

　　但是你怎样才能从这些可用性测试会议中收获最多的东西呢？
　　
　　1. 选择你的课题

　　正如任何市场研究项目，结果和你需要测试的人一样，不要以你自己公司的人或者朋友以及家人作为测试人群。可以去任何一家市场研究公司或者临时代理机构和他们沟通关于这个课题的参与者。确定市场研究公司不会提供公司的名称或任何其它细节，从而避免这些东西影响参与者的判断。

　　2.可用性测试前期
　　就如生命中的任何事情，第]]></description>
			<content:encoded><![CDATA[<p>本文为转载，出处：[exurl=http://www.yangsu.cn/read.php/70.htm]进行可用性测试的8个指南[/exurl]</p>
<p>译文:进行可用性测试的8个指南</p>
<p>引言:<br />
　　在专业的web设计圈，可用性测试会议已经成为任何重点项目的一个基本组成部分。对于关注品牌发展和产品开发的人群来来说，可用性测试是提供获取网站目标人群的反馈意见的宝贵机会，并且应该尽早开始.</p>
<p>　　但是你怎样才能从这些可用性测试会议中收获最多的东西呢？<br />
　　<br />
　　1. 选择你的课题</p>
<p>　　正如任何市场研究项目，结果和你需要测试的人一样，不要以你自己公司的人或者朋友以及家人作为测试人群。可以去任何一家市场研究公司或者临时代理机构和他们沟通关于这个课题的参与者。确定市场研究公司不会提供公司的名称或任何其它细节，从而避免这些东西影响参与者的判断。</p>
<p>　　2.可用性测试前期<br />
　　就如生命中的任何事情，第<span id="more-249"></span>一印象是最关键的，每个参与者必须很放松。记住，可用性测试会议室通常是一个极端人造的环境，并且最有益和最具信息的结果就是，我们希望他们他们的行为就像他们在家里或者办公室里一样。</p>
<p>　　为如何到达可用性测试场所提供清晰的指引，必要的话，在当地会见这些参与者。不要使用诸如“可用性测试”或者“市场调查”这样的术语，因为这些会干扰参与者并使他们紧张。同样，确保参与者知道可用性测试时间需要多久，希望他们执行的任务类型是什么。</p>
<p>　　在最开始的问候和欢迎酒之后，通常会签署一些法定的条款。 这些用最通俗易懂的的英文来书写是很重要的，并且要尽可能的简短。最后一件事是任何一个紧张的可用性测试项目需要的，就是给一份类似他们签署的东西的合同。对于他们来说，你想要的全部就是保证这些测试是完全保密的，并且在测试过程中，作为我们测试结果的一部分允许生成数据。所以告诉他们这些。</p>
<p>　　3.可用性测试的开始<br />
　　<br />
　　在进入到关键任务之前，先让使用者熟悉环境，告诉他们网站的名称和URL，并且询问他们他们所喜欢的网站的类型是什么以及他们希望从他们喜欢的网站获得什么信息或者需求，从而来获得反馈。将他们使用的任何术语和语句都做下笔记，这并不仅仅代表你正在认真地对待他们的反馈，而且对于关键的功能性和导航性的可用标签可以提供有用的东西。<br />
　　<br />
　　其次，让他们看看他们所测试的网站，在他们熟悉网站之前度量他们最初的印象。</p>
<p>　　4.选择任务</p>
<p>　　设定任务对于一个新网站的成功是至关重要的，例如：（某电子商务网站）</p>
<ul>
<li>购买东西
</li>
<li>付钱
</li>
<li>联系顾客
</li>
</ul>
<p>　　记住，你并不是在寻找自我信息。网站的建立是有原因的-你的目标观众是不是在做你希望他们做的事情？</p>
<p>　　询问用户来建议任务也是一个很好的主意，虽然这会给出他们期望和需求的另一种暗示，但是这可能建议了新的功能性和优先性。</p>
<p>　　5.怎样来写任务<br />
　　<br />
　　如果你给定他们一定的情节而不是指令，人们趋向于更自然的行为。当给定他们任务时，你可能会使用这样的句子“事件A已经发生，你现在需要马上拨打公司电话-找到电话号码”。这比“找到网站的联系我们的部分”要好得多。</p>
<p>　　6.提出任务</p>
<p>　　一个事件只给参与者一个任务，这样会让他们更快或者改变他们到达测试的路径。</p>
<p>　　如果使用者从测试外部需要进行用户输入（例如：一个email地址让他们输入密码进入网站），在给他们提出的任务的表格中给出他们这些输入项。者将给整个过程的所有元素提供有用的反馈，而不是简化网站。</p>
<p>　　7.在可用性测试过程中如何执行</p>
<p>　　记住正在测试的网站非常重要，不仅是你或者课题，而且包括任何你获取的有价值的反馈-确保参与者也要知道这一点。如果他们什么也做不了，要让他们确信这不是他们的错。</p>
<p>　　在整个测试过程中你必须保持安静并且视而不见。你不能通过提供线索，暗示方向或他们所说或所作事情的反应来改变测试结果，年给出的所有反馈都必须中立的。不要摇头或发怒，但是可以诱惑！</p>
<p>　　唯一你能说话的时间就是帮助参与者给出他们的观点或者阐明的时候给予一个响应，如果存有疑惑，那就闭嘴！</p>
<p>　　让投资者参与项目，客户通常很难在测试过程中保持沉默，如果你的客户想在场，把他们安排在另一间有声音和视频连接的房间.</p>
<p>　　8.可用性测试之后<br />
　　<br />
　　在完成所有的测试之后，你应当汇集尽可能多的信息，询问对网站的整体印象将使你能够判断是否已达到预期的期望，而不管参与者对于客户或者网站的观点在这个过程中是否发生了改变。</p>
<p>　　经常的询问建议-这不仅证明你对他们想法的价值的认同，而且能更好的洞察网站如何才能更好的支持用户。</p>
<p>　　最后，询问参与者他们所能记住的网站的结构和功能。清晰的回忆将会确认网站结构的逻辑性并帮助识别任何你可能忽略的分类标签.</p>
<p>[quote]　　这篇文章由Tim Fidgeon所写，Usability at Webcredible的领头人，他热衷于可用性并且操Webcredible网站的可用性培训以及为网络培训写作。尊重作者辛苦劳动,转载请标注出处.------------------------感谢"小仙",对翻译的支持[/quote]</p>
<p>原文:<br />
Introduction<br />
In professional web design circles, the usability testing session has become an essential component of any major project. Similar to focus groups in brand development and product launches, usability testing offers a rare opportunity to receive feedback from the very people the website is aimed at - before it's too late to do anything about it.</p>
<p>But how can you get the most from these usability testing sessions?</p>
<p>1. Choosing your subjects<br />
As with any market research project, the results will only be as good as the people you test. Do not test people from your own company, or friends and family. Go to a market research firm or temp agency and ask them to source participants to a certain profile. Make sure the market research firm does not provide the name of the company or any other details that will cloud the judgement of the participants.</p>
<p>2. Before the usability testing<br />
As with everything in life, first impressions are vital. Each participant must be put at ease. Remember, the usability testing session is often an extremely artificial environment and, for the most beneficial and informative results, we want them to behave as if they were using the site at home or work.</p>
<p>Provide clear instructions on how to get to the usability testing location, and if necessary meet the participants at local stations. Do not use terms such as usability testing or market research, as these can confuse and put people on edge. Also, ensure that participants know how long the usability testing will take, and the type of tasks they will be expected to perform.</p>
<p>After the initial greeting and welcoming drinks, there are always legal forms that must be signed. It is essential that these are written in plain English, and are as short as possible. The last thing any nervous usability testing subject wants is to be given a contract that looks like they're signing their soul away. All you want is for them to be reassured that the tests are completely confidential, and for permission to use the data generated during the test as part of our results. So tell them that.</p>
<p>3. Beginning the usability testing<br />
Before diving into key tasks, get the user familiar with the environment. Tell them the website's name and URL, and ask them for initial feedback on what they would expect from the site or what they would like the site to be. Make note of any terms or phrases they use - this not only demonstrates you are taking their feedback seriously, but may provide useful tips as to possible labels for key functionality or navigation.</p>
<p>Next, let them look at the website they are testing. Gauge their first impressions before allowing them to familiarise themselves with the site.</p>
<p>These few simple tasks will help convince the participant that the usability testing will not be difficult and, perhaps most importantly, that they're not the ones being tested.</p>
<p>4. Choosing tasks<br />
Set tasks that are essential to the new site's success, such as:</p>
<p>*Buying products<br />
*Paying bills<br />
*Contacting the client</p>
<p>Remember, you're not looking for an ego massage. The site was built for a reason - can your target audience do what you need them to do?</p>
<p>It's also a good idea to ask the user to suggest tasks. While this gives another indication of their expectations and requirements, it may suggest new functionality or priorities.</p>
<p>5. How to word tasks<br />
People tend to perform more naturally if you provide them with scenarios rather than instructions. When giving them tasks, you should use phrases like Scenario A has occurred, and you need to ring the company urgently - find the telephone number. This is far better than find the contact us section of the site.</p>
<p>6. Presenting tasks<br />
Only give participants one task at a time. More than this may intimidate them, or alter their approach to the test.</p>
<p>If the user is required to use inputs from outside the test (e.g. an email giving them a password to the site), give them these inputs in the form they will be presented. This will provide useful feedback on all elements of the process, rather than simply the site.</p>
<p>7. How to behave during the usability testing<br />
It's essential that you remember that it's the website that is being tested, not you or the subject. Any feedback you get is valuable - make sure the participant knows this. If they can't do something, make sure they know it's not their fault.</p>
<p>You must stay quiet and out of sight during the test. You must not alter the test results by providing clues, suggesting directions or by reacting to things they say or do. All feedback you give must be neutral. Do not start shaking your head or huffing, however tempting it might be!</p>
<p>The only time you should speak is to help the participant give an opinion, or to clarify a response. If in doubt, shut up!</p>
<p>Given the investment made in the project, clients often find it difficult to be quiet during tests. If your client wants to be present, put them in another room with an audio/video link.</p>
<p>8. After the usability testing<br />
After all the tasks have been completed, you should gather as much information as possible. Asking for overall impressions of the site will allow you to judge whether expectations have been met, and whether the participant's view of the client or site has changed during the process.</p>
<p>Always ask for suggestions - this not only demonstrates the value you place on their thoughts, but may provide insights into how the site can better support the user.</p>
<p>Finally, ask the participant what they remember about the site structure and functions of the site. Clear recollection will confirm that the site is structured logically and help identify any labelling issues you may have missed.<br />
-----------------------------------------------------------------------------------------------------------------------</p>
<hr /><small>Copyright &copy;  2003-2009 Xiaoxiao's Weblog All rights reserved.<br /> </small>]]></content:encoded>
			<wfw:commentRss>http://liuyuntian.com/2006/08/03/%e8%bd%ac%e8%bd%bd%e8%bf%9b%e8%a1%8c%e5%8f%af%e7%94%a8%e6%80%a7%e6%b5%8b%e8%af%95%e7%9a%848%e4%b8%aa%e6%8c%87%e5%8d%97.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Microsoft.com改版测试页面</title>
		<link>http://liuyuntian.com/2006/07/25/microsoftcom-revised-test-pages.html</link>
		<comments>http://liuyuntian.com/2006/07/25/microsoftcom-revised-test-pages.html#comments</comments>
		<pubDate>Tue, 25 Jul 2006 07:35:04 +0000</pubDate>
		<dc:creator>for3w</dc:creator>
				<category><![CDATA[体验与设计]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[改版]]></category>
		<category><![CDATA[测试]]></category>

		<guid isPermaLink="false">http://liuyuntian.com/2006/07/25/microsoftcom-revised-test-pages.html</guid>
		<description><![CDATA[　　似乎在MS的新闻组里看到这条消息，IE关了一下，找不到出处了。看MS的新版公测站请点击这里： http://preview.microsoft.com/en/us/default.aspx

      测试版改进的地方有：

    一、搜索这个最重要的部分从最顶部移到了页面的右上角
    二、Microsoft的Logo在UI上变得更大，口号也更加突出，看得出MS加强了品牌性的宣传
    三、中间最大的广告区域也变了，UI由直角变成弯角，增强美感
    四、下面的区域似乎Tab翻页都在用，不过MS这次加强了针对于，很容易看得出针对的人群的不同
    五、可圈可点的是MS的右上角的站点导航；以往功能性产品导航变成了单页窗口显示，显示的效果比较平滑

    没有太仔细的观察MS这次站点所运用的技术，相信这次改版MS也花了大量的精力，能把所有的产品做在一个页面；能把有针对性的用户区分的清晰明了，实在不容易。截图如下：

      [img]http://static.flickr.com/67/197081672_3693871232_o.jpg[/img]]]></description>
			<content:encoded><![CDATA[<p>　　似乎在MS的新闻组里看到这条消息，IE关了一下，找不到出处了。看MS的新版公测站请点击这里： http://preview.microsoft.com/en/us/default.aspx</p>
<p>测试版改进的地方有：</p>
<p>一、搜索这个最重要的部分从最顶部移到了页面的右上角<br />
二、Microsoft的Logo在UI上变得更大，口号也更加突出，看得出MS加强了品牌性的宣传<br />
三、中间最大的广告区域也变了，UI由直角变成弯角，增强美感<br />
四、下面的区域似乎Tab翻页都在用，不过MS这次加强了针对于，很容易看得出针对的人群的不同<br />
五、可圈可点的是MS的右上角的站点导航；以往功能性产品导航变成了单页窗口显示，显示的效果比较平滑</p>
<p>没有太仔细的观察MS这次站点所运用的技术，相信这次改版MS也花了大量的精力，能把所有的产品做在一个页面；能把有针对性的用户区分的清晰明了，实在不容易。截图如下：</p>
<p><img src="http://static.flickr.com/67/197081672_3693871232_o.jpg" /><span id="more-240"></span></p>
<hr /><h2>相关文章</h2><ul><li><a href="http://liuyuntian.com/2009/09/18/tencent-guangzhou-recruitment.html" rel="bookmark" title="Permanent Link: 腾讯广州现场招聘会(周六9月19日)">腾讯广州现场招聘会(周六9月19日)</a></li><li><a href="http://liuyuntian.com/2008/04/09/test-flickr-video-upload.html" rel="bookmark" title="Permanent Link: 测试Flickr的视频上传效果">测试Flickr的视频上传效果</a></li><li><a href="http://liuyuntian.com/2006/02/23/yesterdays-news-that-google-could-have-opened-the-online-personal-websites.html" rel="bookmark" title="Permanent Link: 昨天的消息得到证实Google可以开通在线个人网站了">昨天的消息得到证实Google可以开通在线个人网站了</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/07/25/microsoftcom-revised-test-pages.html/feed</wfw:commentRss>
		<slash:comments>0</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>Google短信服务开始测试</title>
		<link>http://liuyuntian.com/2005/07/13/google-sms-services-begin-testing.html</link>
		<comments>http://liuyuntian.com/2005/07/13/google-sms-services-begin-testing.html#comments</comments>
		<pubDate>Wed, 13 Jul 2005 14:13:52 +0000</pubDate>
		<dc:creator>for3w</dc:creator>
				<category><![CDATA[转载备份]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[测试]]></category>
		<category><![CDATA[短信]]></category>
		<category><![CDATA[短信服务]]></category>

		<guid isPermaLink="false">http://liuyuntian.com/2005/07/13/google-sms-services-begin-testing.html</guid>
		<description><![CDATA[Google Lab便发布了Beta版Google SMS服务。Google SMS服务目前针对美国和英国地区用户，不过，Google提供了新服务在PC浏览器上的Demo，通过键入搜索资料，你可以在虚拟的手机屏幕上看到 Google将发给你的信息。需要注意的是，不可使用ok等过于简单的搜索词汇，标准搜索语法类似于：

Local : hospital San Jose CA
Phonebook : 2122269817
Weather : weather dallas tx
Froogle : price mp3 player
Zip code : 94043
Area code : 650
Calculator : 160 pounds * 4000 feet in calories

Demo页面: http://www.google.com/sms/demo.html]]></description>
			<content:encoded><![CDATA[<p>Google Lab便发布了Beta版Google SMS服务。Google SMS服务目前针对美国和英国地区用户，不过，Google提供了新服务在PC浏览器上的Demo，通过键入搜索资料，你可以在虚拟的手机屏幕上看到 Google将发给你的信息。需要注意的是，不可使用ok等过于简单的搜索词汇，标准搜索语法类似于：</p>
<p>Local : hospital San Jose CA<br />
Phonebook : 2122269817<br />
Weather : weather dallas tx<br />
Froogle : price mp3 player<br />
Zip code : 94043<br />
Area code : 650<br />
Calculator : 160 pounds * 4000 feet in calories</p>
<p>Demo页面: http://www.google.com/sms/demo.html<span id="more-54"></span></p>
<hr /><h2>相关文章</h2><ul><li><a href="http://liuyuntian.com/2006/08/26/google-offers-services-webmaster.html" rel="bookmark" title="Permanent Link: Google提供Webmaster服务">Google提供Webmaster服务</a></li><li><a href="http://liuyuntian.com/2005/10/19/yahoo-buys-whereonearth-to-enhance-local-search.html" rel="bookmark" title="Permanent Link: 雅虎收购Whereonearth以增强本地搜索">雅虎收购Whereonearth以增强本地搜索</a></li><li><a href="http://liuyuntian.com/2006/01/07/google-pack.html" rel="bookmark" title="Permanent Link: Google Pack">Google Pack</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/07/13/google-sms-services-begin-testing.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Dreamweaver 8 开始测试</title>
		<link>http://liuyuntian.com/2005/06/22/dreamweaver-8-began-testing.html</link>
		<comments>http://liuyuntian.com/2005/06/22/dreamweaver-8-began-testing.html#comments</comments>
		<pubDate>Wed, 22 Jun 2005 20:27:55 +0000</pubDate>
		<dc:creator>for3w</dc:creator>
				<category><![CDATA[转载备份]]></category>
		<category><![CDATA[Dreamweaver]]></category>
		<category><![CDATA[测试]]></category>

		<guid isPermaLink="false">http://liuyuntian.com/2005/06/22/dreamweaver-8-began-testing.html</guid>
		<description><![CDATA[这是Poorfish放出来的一个Splash，现在Dreamweaver新版本 – 产品代号Coltrane 已进入国际alpha 阶段

从[url=http://livedocs.macromedia.com/dreamweaver/mx2005/using/wwhelp/wwhimpl/js/html/wwhelp.htm]帮助[/url]页面上来看，DW8面板上的CSS面板结构可以按字母顺序调整，属性面板还增加了“Show CSS”的按钮等可以看出，CSS在控制上得到了前所未有的增强。

[img]uploads/200506/22_202138_splash.gif[/img]

从这个帮助页面上并未感觉到DW8在界面上的重大改进，可能不是一个真实的环境。期待DW8越走越好。]]></description>
			<content:encoded><![CDATA[<p>这是Poorfish放出来的一个Splash，现在Dreamweaver新版本 – 产品代号Coltrane 已进入国际alpha 阶段</p>
<p>从<a target="_blank" href="http://livedocs.macromedia.com/dreamweaver/mx2005/using/wwhelp/wwhimpl/js/html/wwhelp.htm">帮助</a>页面上来看，DW8面板上的CSS面板结构可以按字母顺序调整，属性面板还增加了“Show CSS”的按钮等可以看出，CSS在控制上得到了前所未有的增强。</p>
<p><img src="uploads/200506/22_202138_splash.gif" /></p>
<p>从这个帮助页面上并未感觉到DW8在界面上的重大改进，可能不是一个真实的环境。期待DW8越走越好。<span id="more-29"></span></p>
<hr /><h2>相关文章</h2><ul><li><a href="http://liuyuntian.com/2006/06/19/netscape-began-testing-a-new-page.html" rel="bookmark" title="Permanent Link: Netscape的新页面开始测试">Netscape的新页面开始测试</a></li><li><a href="http://liuyuntian.com/2006/05/10/dreamweaver802-upgrades-and-installation-hints.html" rel="bookmark" title="Permanent Link: Dreamweaver8.02 升级和安装提示">Dreamweaver8.02 升级和安装提示</a></li><li><a href="http://liuyuntian.com/2006/01/17/dreamweaver-8-update.html" rel="bookmark" title="Permanent Link: Dreamweaver 8 升级">Dreamweaver 8 升级</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/06/22/dreamweaver-8-began-testing.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
