<?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>大风口 &#187; 产品设计</title>
	<atom:link href="http://www.masterboke.com/category/chsj/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.masterboke.com</link>
	<description>I want to change the world!</description>
	<lastBuildDate>Fri, 16 Sep 2011 09:41:27 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>别说我了解用户</title>
		<link>http://www.masterboke.com/2009/05/21/i-have-no-idea/</link>
		<comments>http://www.masterboke.com/2009/05/21/i-have-no-idea/#comments</comments>
		<pubDate>Thu, 21 May 2009 07:25:17 +0000</pubDate>
		<dc:creator>boke</dc:creator>
				<category><![CDATA[产品设计]]></category>
		<category><![CDATA[用户体验]]></category>

		<guid isPermaLink="false">http://www.masterboke.cn/?p=461</guid>
		<description><![CDATA[<a href="http://www.masterboke.com/2009/05/21/i-have-no-idea/" title="别说我了解用户"></a>今天在Ray is thinking 看到一篇文章，这样的用户，引来看看。 晚上和无忌聊天时，扯着扯着就说到一些匪夷所思的用户行为上，举几个例子，可能是个例，但是确实在提醒我们，DMMT不能忘。 1.这个例子是听说的[也可能是看blog时看到的，忘记了]，某用户电话到淘宝客服说上不去淘宝了，客服说一切正常，问平时怎么上淘宝的，答曰：本地信息港弹出淘宝广告，点一下就进去了，现在没有广告弹出了，就不知道怎么进去了。 2.无忌说的一个例子：“我之前参加过一个会展 就躲在阿里巴巴展台后面看人家是怎么访问网站的，打开百度 搜mp3 从右边的&#8217;到阿里巴巴找mp3&#8242;进去 然后点首页” 3.自己身边的例子：过年回家时开家里电脑，一打开首页就是hao123[汗一个]，然后问老爸平时都上什么网站？答曰：新浪看新闻、优酷看电视剧、东方财富网看股票、百度搜东西。我作为忠诚的G粉丝当然不能容忍这种事情，就向老爸推荐使用google.cn[.com就算了，看不懂]，答曰记不住名字，我说可以用g.cn的，输入很快的，答曰从来不输入网址，打开hao123一切搞定。见这个不灵决定继续向他推荐伟大的非死不可，告诉他这是全球最大的交友网站[没敢说SNS]，答曰这是吹牛的吧，首页上一个人都没有还交友？看看新浪，一打开就是到处动来动去的多热闹，写博客的人都好几十万呢，这个非死不可上面冷冷清清的，不热闹，我彻底无语。。。次日，老妈要求我帮她申请QQ，我奇怪她要这个干吗？又不打字的和谁聊天去？哪知道申请完后人家一个好友都不加，直接点开QQ游戏开始斗地主，而且我在家的那些天基本上每天必玩几个小时，好忠实的用户，和聊天有什么关系呢？ 4.好像当年Yahoo刚出来时，也是发现有很多人在输入框中输入网址的名称然后点搜索，从结果中进入该网站，所以以后Yahoo才会去做directory，那个时候即使在美国，网民的水平也是不高的，可以理解。 这样的用户当然不是我们的目标用户，可是反过来我们想一想，我们自己有时是不是太超前了？推特、非死不可、卖死赔死、的哥、地里学死，看到这篇日志的有多少人和我一样的请排排坐。 眼见为实，还是要多去做做用户调研吧，坐在会议室里空想用户这样用户那样，用户会让你傻眼的。 最近似乎老听人说他了解用户，敢问这样的用户有了解不？上面只是一个特例，我们的用户是由无数个特例组成的。自以为做了几天产品设计，看了几本书就了解用户了？这种心态错的很离谱，这样的人员也很离谱。 目前的我从不敢说我了解用户，也不奢求能了解所有用户。无意批评谁，说的是一种心态。用心观察，停止空想，多做用户调研，书本与实际相结合，这才是王道。]]></description>
			<content:encoded><![CDATA[<a href="http://www.masterboke.com/2009/05/21/i-have-no-idea/" title="别说我了解用户"></a><p><span class="pleft">今天在<a href="http://www.rayisthinking.com/"><span style="color: #000000;">Ray is thinking</span></a> 看到一篇文章，<a href="http://www.rayisthinking.com/2009/05/blog-post_15.html">这样的用户</a>，引来看看。</span></p>
<blockquote><p><span style="font-size: small;">晚上和</span><a href="http://www.andoosea.com/" target="_blank"><span style="font-size: small;"><span style="color: #336699;">无忌</span></span></a><span style="font-size: small;">聊天时，扯着扯着就说到一些匪夷所思的用户行为上，举几个例子，可能是个例，但是确实在提醒我们，DMMT不能忘。</span><br />
<span style="font-size: small;"><br />
</span><br />
<span style="font-size: small;">1.这个例子是听说的[也可能是看blog时看到的，忘记了]，某用户电话到淘宝客服说上不去淘宝了，客服说一切正常，问平时怎么上淘宝的，答曰：本地信息港弹出淘宝广告，点一下就进去了，现在没有广告弹出了，就不知道怎么进去了。</span><br />
<span style="font-size: small;"><br />
</span><br />
<span style="font-size: small;">2.无忌说的一个例子：“</span><span style="border-collapse: collapse;"><span style="font-size: small;">我之前参加过一个会展 就躲在阿里巴巴展台后面看人家是怎么访问网站的，打开百度 搜mp3 从右边的&#8217;到阿里巴巴找mp3&#8242;进去 然后点首页”</span></span><br />
<span style="border-collapse: collapse;"><br />
</span><br />
<span style="border-collapse: collapse;">3.自己身边的例子：过年回家时开家里电脑，一打开首页就是hao123[汗一个]，然后问老爸平时都上什么网站？答曰：新浪看新闻、优酷看电视剧、东方财富网看股票、百度搜东西。我作为忠诚的G粉丝当然不能容忍这种事情，就向老爸推荐使用google.cn[.com就算了，看不懂]，答曰记不住名字，我说可以用g.cn的，输入很快的，答曰从来不输入网址，打开hao123一切搞定。见这个不灵决定继续向他推荐伟大的非死不可，告诉他这是全球最大的交友网站[没敢说SNS]，答曰这是吹牛的吧，首页上一个人都没有还交友？看看新浪，一打开就是到处动来动去的多热闹，写博客的人都好几十万呢，这个非死不可上面冷冷清清的，不热闹，我彻底无语。。。次日，老妈要求我帮她申请QQ，我奇怪她要这个干吗？又不打字的和谁聊天去？哪知道申请完后人家一个好友都不加，直接点开QQ游戏开始斗地主，而且我在家的那些天基本上每天必玩几个小时，好忠实的用户，和聊天有什么关系呢？</span><br />
<span style="border-collapse: collapse;"><br />
</span><br />
<span style="border-collapse: collapse;"><span style="font-size: small;">4.好像</span></span><span style="border-collapse: collapse;"><span style="font-size: small;">当年Yahoo刚出来时，也是发现有很多人在输入框中输入网址的名称然后点搜索，从结果中进入该网站，所以以后Yahoo才会去做directory，那个时候即使在美国，网民的水平也是不高的，可以理解。</span></span><br />
<span style="border-collapse: collapse;"><span style="font-size: small;"><br />
</span></span><br />
<span style="border-collapse: collapse;"><span style="font-size: small;">这样的用户当然不是我们的目标用户，可是反过来我们想一想，我们自己有时是不是太超前了？推特、非死不可、卖死赔死、的哥、地里学死，看到这篇日志的有多少人和我一样的请排排坐。</span></span><br />
<span style="border-collapse: collapse;"><br />
</span><br />
<span style="border-collapse: collapse;"><span style="font-size: small;">眼见为实，还是要多去做做用户调研吧，坐在会议室里空想用户这样用户那样，用户会让你傻眼的。</span></span></p></blockquote>
<p><span class="pleft">最近似乎老听人说他了解用户，敢问这样的用户有了解不？上面只是一个特例，我们的用户是由无数个特例组成的。自以为做了几天产品设计，看了几本书就了解用户了？这种心态错的很离谱，这样的人员也很离谱。</span></p>
<p><span class="pleft">目前的我从不敢说我了解用户，也不奢求能了解所有用户。无意批评谁，说的是一种心态。<span style="color: #ff0000;font-size:16px;"><strong>用心观察，停止空想，多做用户调研，书本与实际相结合，这才是王道。</strong></span></span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.masterboke.com/2009/05/21/i-have-no-idea/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>几篇要阅读的文章</title>
		<link>http://www.masterboke.com/2009/02/21/somearticle/</link>
		<comments>http://www.masterboke.com/2009/02/21/somearticle/#comments</comments>
		<pubDate>Sat, 21 Feb 2009 04:00:09 +0000</pubDate>
		<dc:creator>boke</dc:creator>
				<category><![CDATA[产品设计]]></category>
		<category><![CDATA[用户体验]]></category>

		<guid isPermaLink="false">http://www.masterboke.cn/?p=324</guid>
		<description><![CDATA[<a href="http://www.masterboke.com/2009/02/21/somearticle/" title="几篇要阅读的文章"></a>几篇关于交互，可用性等的文章，记下地址，慢慢看。 http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/ http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/ http://www.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/ http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/ http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/]]></description>
			<content:encoded><![CDATA[<a href="http://www.masterboke.com/2009/02/21/somearticle/" title="几篇要阅读的文章"></a><p><span class="pleft">几篇关于交互，可用性等的文章，记下地址，慢慢看。</span></p>
<p><span class="pleft"><a href="http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/">http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/</a></span></p>
<p><span class="pleft"><a href="http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/">http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/</a></span></p>
<p><span class="pleft"><a href="http://www.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/">http://www.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/</a></span></p>
<p><span class="pleft"><a href="http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/">http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/</a></span></p>
<p><span class="pleft"><a href="http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/">http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/</a></span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.masterboke.com/2009/02/21/somearticle/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>如何成为一个优秀的设计师，做一个优秀的设计</title>
		<link>http://www.masterboke.com/2009/02/06/designer/</link>
		<comments>http://www.masterboke.com/2009/02/06/designer/#comments</comments>
		<pubDate>Fri, 06 Feb 2009 15:53:12 +0000</pubDate>
		<dc:creator>boke</dc:creator>
				<category><![CDATA[产品设计]]></category>

		<guid isPermaLink="false">http://www.masterboke.cn/?p=275</guid>
		<description><![CDATA[<a href="http://www.masterboke.com/2009/02/06/designer/" title="如何成为一个优秀的设计师，做一个优秀的设计"></a>From: Aliued 如何成为优秀的设计师，都要具备那些能力，有同学可能有困惑，我把我的想法整理了一下，见下图。 我认为，做一个优秀的设计，要做到以下三点： 找准问题 提供多种解决方案 发布后衡量效果，分析并总结 具体如何来做呢？ 第一是找准问题。设计是解决问题，“Design= Problem Solving.”  这是我认为对设计最好的定义。根据这个定义，我可以说，找准了问题，优秀设计的就成功了一半。那么怎么样找准问题呢？首先要搞清楚什么样的用户，遇到了什么样的问题。很多时候设计师认为自己很清楚用户是谁，我想说搞清楚用户是谁，决定了设计的深度。知道自己的设计是给买家用的，是了解用户的一种程度，建一个详细的角色模型和任务假设，也是了解用户的一种程度。具体一点说，我们设计一个注册流程，发布流程或者别的什么，首先要做单步路径分析，搞清楚各个来源的百分比，以及各个来源不同用户的不同状态，这样做设计就有针对性了，就简单很多了。 再说对问题的假设和定义了，其实要解决的问题肯定很多，要搞清楚哪个是主要问题，这点我是凭经验的，同学们有啥好的方法，欢迎分享。针对主要问题的不同定义，我们往往按不同的方向思考，设计的方案往往非常不同。 第二是提供多种解决方案。设计就是在诸多可能性中探究多赢的解决方案，怎么在诸多可能性中探索呢？我的办法常常是穷举的，结构层框架层表现层逐层穷举各种排列组合，列出其优劣，自己就能做出合理判断并说服人家。这里要请设计师们端正心态，常在网上看到自己的设计被否定了就说被强奸了，设计就是要出多种解决方案的，这是老板出钱让你练功力，丫的有啥好抱怨的，很多设计本身就是质量有问题。还要请设计师们深入思考，《用户体验的要素》都出中文版了，设计师不是美工，即使给自己定位为视觉设计师，也不要只停留在表现层做思考，结构层框架层都有很多可能性可供探究。这个也源于各人对设计理解的不同，但用户体验是整体的，很多人对设计师的都有自己不同的理解，我想说，“心有多大，舞台就有多大。” 还要说：“用行动证明价值。” 第三是效果衡量，分析总结。先充实一下对“执行力”的理解，项目发布不是终点，拿到结果才叫“执行力”。设计师最重要的经验积累，就是自己设计成果的数据反馈。如果说出多种解决方案是练内功，数据反馈分析总结就好比是吸星大法，不但可以把自己散去的精力都吸回来，还可以吸收别人的功力。我的体会，很多时候，用户并不按你所设想的那样使用你的设计，搞清楚真实现状和当初设想之间的差异，提升设计。]]></description>
			<content:encoded><![CDATA[<a href="http://www.masterboke.com/2009/02/06/designer/" title="如何成为一个优秀的设计师，做一个优秀的设计"></a><p>From: <a href="http://www.aliued.com" target="_blank">Aliued</a></p>
<p><span style="padding-left:28px;">如何成为优秀的设计师，都要具备那些能力，有同学可能有困惑，我把我的想法整理了一下，见下图。</span><br />
<object width="500" height="500" data="http://www.masterboke.cn/wp-content/uploads/2009/02/designer.swf" type="application/x-shockwave-flash"><param name="src" value="http://www.masterboke.cn/wp-content/uploads/2009/02/designer.swf" /></object><br />
<span style="padding-left:28px;">我认为，做一个优秀的设计，要做到以下三点：</span></p>
<ol style="padding-left:28px;">
<li>找准问题</li>
<li>提供多种解决方案</li>
<li>发布后衡量效果，分析并总结</li>
</ol>
<p><span style="padding-left:28px;">具体如何来做呢？</span></p>
<p><span style="padding-left:28px;">第一是找准问题。设计是解决问题，“Design= Problem Solving.”  这是我认为对设计最好的定义。根据这个定义，我可以说，找准了问题，优秀设计的就成功了一半。那么怎么样找准问题呢？首先要搞清楚什么样的用户，遇到了什么样的问题。很多时候设计师认为自己很清楚用户是谁，我想说搞清楚用户是谁，决定了设计的深度。知道自己的设计是给买家用的，是了解用户的一种程度，建一个详细的角色模型和任务假设，也是了解用户的一种程度。具体一点说，我们设计一个注册流程，发布流程或者别的什么，首先要做单步路径分析，搞清楚各个来源的百分比，以及各个来源不同用户的不同状态，这样做设计就有针对性了，就简单很多了。</span></p>
<p><span style="padding-left:28px;">再说对问题的假设和定义了，其实要解决的问题肯定很多，要搞清楚哪个是主要问题，这点我是凭经验的，同学们有啥好的方法，欢迎分享。针对主要问题的不同定义，我们往往按不同的方向思考，设计的方案往往非常不同。</span></p>
<p><span style="padding-left:28px;">第二是提供多种解决方案。设计就是在诸多可能性中探究多赢的解决方案，怎么在诸多可能性中探索呢？我的办法常常是穷举的，结构层框架层表现层逐层穷举各种排列组合，列出其优劣，自己就能做出合理判断并说服人家。这里要请设计师们端正心态，常在网上看到自己的设计被否定了就说被强奸了，设计就是要出多种解决方案的，这是老板出钱让你练功力，丫的有啥好抱怨的，很多设计本身就是质量有问题。还要请设计师们深入思考，<a href="http://http://blog.csdn.net/MinistoneNap/archive/2007/06/15/1653617.aspx">《用户体验的要素》</a>都出中文版了，设计师不是美工，即使给自己定位为视觉设计师，也不要只停留在表现层做思考，结构层框架层都有很多可能性可供探究。这个也源于各人对设计理解的不同，但用户体验是整体的，很多人对设计师的都有自己不同的理解，我想说，“心有多大，舞台就有多大。” 还要说：“用行动证明价值。”</span></p>
<p><span style="padding-left:28px;">第三是效果衡量，分析总结。先充实一下对“执行力”的理解，项目发布不是终点，拿到结果才叫“执行力”。设计师最重要的经验积累，就是自己设计成果的数据反馈。如果说出多种解决方案是练内功，数据反馈分析总结就好比是吸星大法，不但可以把自己散去的精力都吸回来，还可以吸收别人的功力。我的体会，很多时候，用户并不按你所设想的那样使用你的设计，搞清楚真实现状和当初设想之间的差异，提升设计。</span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.masterboke.com/2009/02/06/designer/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>选项卡的设计</title>
		<link>http://www.masterboke.com/2009/02/03/%e9%80%89%e9%a1%b9%e5%8d%a1%e7%9a%84%e8%ae%be%e8%ae%a1/</link>
		<comments>http://www.masterboke.com/2009/02/03/%e9%80%89%e9%a1%b9%e5%8d%a1%e7%9a%84%e8%ae%be%e8%ae%a1/#comments</comments>
		<pubDate>Tue, 03 Feb 2009 15:56:55 +0000</pubDate>
		<dc:creator>boke</dc:creator>
				<category><![CDATA[产品设计]]></category>
		<category><![CDATA[web设计]]></category>
		<category><![CDATA[用户体验]]></category>

		<guid isPermaLink="false">http://www.masterboke.cn/?p=235</guid>
		<description><![CDATA[<a href="http://www.masterboke.com/2009/02/03/%e9%80%89%e9%a1%b9%e5%8d%a1%e7%9a%84%e8%ae%be%e8%ae%a1/" title="选项卡的设计"></a>近期要更换公司网站首页，将各项服务以选项卡的样式在首页呈现。第三版设计如下图所示： 图中搜索框下部就是要切换的各个选项卡，要求“光标悬停在标题上0.1秒后切换选项卡”，并且“选项卡中存在动态调用内容”。我感觉这种设计并不是很好，通过点击来切换选项卡更合适一些。 这种设计违反了web设计中用户可控性的原则，我认为这是不尊重用户的选择。举个例子，我现在正在看第一个选项卡里的内容，而我的鼠标就恰巧放在“门户”这个选项卡上，那么，0.1秒之后，选项卡切换了，可是我没想看第二个选项卡里的内容啊！ 采用鼠标悬停切换选项卡的设计，时间延迟是必须的，但是这个延迟时间是不好把握，不同的用户对时间的敏感度和操作快慢不同。延迟时间长，可能有的用户，在感觉鼠标移上没有反应之后，就接着做了点击操作；延迟时间短，有可能用户只是把鼠标滑过该选项卡，从而发送不必要的请求，造成不必要的加载。 悬停切换这一动作使得用户的关注点集中在选项卡内部，而我们的目的呢？让用户注意搜索框？选项卡？选项卡内部？因此首页这里使用选项卡，悬停还是需要权衡一下的。 通过onmouseover触发事件通常需要配合onmouseout来使用，这就比使用onclick要多出一个事件处理函数。而且各个浏览器对onclick事件的支持要更良性一些。 当然，鼠标悬停切换选项卡也不是完全不可以用，我们来看一下雅虎的应用： 雅虎首页上有“雅虎关系”和“雅虎邮箱”两个选项卡，通过鼠标悬停的方式进行切换。为什么说这个可以用悬停来切换呢？来看看雅虎的选项卡有什么不同。首先，这里的选项卡数量只有两个，而且这两个选项卡都很大，这样鼠标指针就不容易放在错误的选项卡上。其次，这两个选项卡都是有额外的onclick事件的，当点击鼠标左键之后，会另外打开相应的另外一个页面。 我认为，onmouseover事件还是用来显示提示信息或者某种视觉效果，配合onclick来完成某种功能更为合适一些。 最后，我收集了几个比较优秀的选项卡设计，参考一下。]]></description>
			<content:encoded><![CDATA[<a href="http://www.masterboke.com/2009/02/03/%e9%80%89%e9%a1%b9%e5%8d%a1%e7%9a%84%e8%ae%be%e8%ae%a1/" title="选项卡的设计"></a><p><span style="padding-left: 28px;">近期要更换公司网站首页，将各项服务以选项卡的样式在首页呈现。第三版设计如下图所示：</span></p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-246" title="pojaa" src="http://www.masterboke.com/wp-content/uploads/2009/02/2009-02-03_093353.jpg" alt="pojaa" width="540" height="236" /></p>
<p><span style="padding-left: 28px;">图中搜索框下部就是要切换的各个选项卡，要求“光标悬停在标题上0.1秒后切换选项卡”，并且“选项卡中存在动态调用内容”。我感觉这种设计并不是很好，通过点击来切换选项卡更合适一些。</span></p>
<p><span style="padding-left: 28px;">这种设计违反了web设计中用户可控性的原则，我认为这是不尊重用户的选择。举个例子，我现在正在看第一个选项卡里的内容，而我的鼠标就恰巧放在“门户”这个选项卡上，那么，0.1秒之后，选项卡切换了，可是我没想看第二个选项卡里的内容啊！</span></p>
<p><span style="padding-left: 28px;">采用鼠标悬停切换选项卡的设计，时间延迟是必须的，但是这个延迟时间是不好把握，不同的用户对时间的敏感度和操作快慢不同。延迟时间长，可能有的用户，在感觉鼠标移上没有反应之后，就接着做了点击操作；延迟时间短，有可能用户只是把鼠标滑过该选项卡，从而发送不必要的请求，造成不必要的加载。</span></p>
<p><span style="padding-left: 28px;">悬停切换这一动作使得用户的关注点集中在选项卡内部，而我们的目的呢？让用户注意搜索框？选项卡？选项卡内部？因此首页这里使用选项卡，悬停还是需要权衡一下的。</span></p>
<p><span style="padding-left: 28px;">通过onmouseover触发事件通常需要配合onmouseout来使用，这就比使用onclick要多出一个事件处理函数。而且各个浏览器对onclick事件的支持要更良性一些。</span></p>
<p><span style="padding-left: 28px;">当然，鼠标悬停切换选项卡也不是完全不可以用，我们来看一下雅虎的应用：</span></p>
<p style="text-align: center;"><a href="http://cn.yahoo.com"><img class="aligncenter size-full wp-image-245" title="雅虎选项卡" src="http://www.masterboke.com/wp-content/uploads/2009/02/2009-02-04_092324.jpg" alt="2009-02-04_092324" width="500" height="206" /></a></p>
<p><span style="padding-left: 28px;">雅虎首页上有“雅虎关系”和“雅虎邮箱”两个选项卡，通过鼠标悬停的方式进行切换。为什么说这个可以用悬停来切换呢？来看看雅虎的选项卡有什么不同。首先，这里的选项卡数量只有两个，而且这两个选项卡都很大，这样鼠标指针就不容易放在错误的选项卡上。其次，这两个选项卡都是有额外的onclick事件的，当点击鼠标左键之后，会另外打开相应的另外一个页面。</span></p>
<p><span style="padding-left: 28px;">我认为，onmouseover事件还是用来显示提示信息或者某种视觉效果，配合onclick来完成某种功能更为合适一些。</span></p>
<p><span style="padding-left: 28px;">最后，我收集了几个比较优秀的选项卡设计，参考一下。</span></p>
<p style="text-align: center;"><a href="http://www.forgetfoo.com/"><img class="size-full wp-image-247 aligncenter" title="forgetfoo" src="http://www.masterboke.com/wp-content/uploads/2009/02/2009-02-03_101457.jpg" alt="forgetfoo" width="500" height="284" /></a></p>
<p><a href="http://expressionengine.com/"><img class="aligncenter size-full wp-image-248" title="expressionengine" src="http://www.masterboke.com/wp-content/uploads/2009/02/2009-02-03_102331.jpg" alt="expressionengine" width="500" height="266" /></a></p>
<p><a href="http://www.komodomedia.com/"><img class="aligncenter size-full wp-image-249" title="komodomedia" src="http://www.masterboke.com/wp-content/uploads/2009/02/2009-02-03_102304.jpg" alt="komodomedia" width="500" height="276" /></a></p>
<p style="text-align: center;"><a href="http://www.apple.com/trailers/paramount/eagleeye/"><img class="aligncenter size-full wp-image-250" title="apple" src="http://www.masterboke.com/wp-content/uploads/2009/02/2009-02-03_101755.jpg" alt="apple" width="500" height="272" /></a></p>
<p><a href="http://tumblon.com/"><img class="aligncenter size-full wp-image-251" title="tumblon" src="http://www.masterboke.com/wp-content/uploads/2009/02/2009-02-03_101528.jpg" alt="tumblon" width="500" height="262" /></a></p>
<p><a href="http://mail.qq.com"><img class="aligncenter size-full wp-image-252" title="qq邮箱" src="http://www.masterboke.com/wp-content/uploads/2009/02/2009-02-03_103223.jpg" alt="qq邮箱" width="500" height="158" /></a></p>
<p><a href="http://zhidao.baidu.com"><img class="aligncenter size-full wp-image-253" title="百度知道" src="http://www.masterboke.com/wp-content/uploads/2009/02/2009-02-03_101403.jpg" alt="百度知道" width="493" height="244" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.masterboke.com/2009/02/03/%e9%80%89%e9%a1%b9%e5%8d%a1%e7%9a%84%e8%ae%be%e8%ae%a1/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>网页设计趋势之:”勾引”用户的按钮</title>
		<link>http://www.masterboke.com/2009/01/20/%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e8%b6%8b%e5%8a%bf%e4%b9%8b%e2%80%9d%e5%8b%be%e5%bc%95%e2%80%9d%e7%94%a8%e6%88%b7%e7%9a%84%e6%8c%89%e9%92%ae/</link>
		<comments>http://www.masterboke.com/2009/01/20/%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e8%b6%8b%e5%8a%bf%e4%b9%8b%e2%80%9d%e5%8b%be%e5%bc%95%e2%80%9d%e7%94%a8%e6%88%b7%e7%9a%84%e6%8c%89%e9%92%ae/#comments</comments>
		<pubDate>Tue, 20 Jan 2009 06:45:36 +0000</pubDate>
		<dc:creator>boke</dc:creator>
				<category><![CDATA[产品设计]]></category>
		<category><![CDATA[web设计]]></category>

		<guid isPermaLink="false">http://www.masterboke.cn/?p=154</guid>
		<description><![CDATA[<a href="http://www.masterboke.com/2009/01/20/%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e8%b6%8b%e5%8a%bf%e4%b9%8b%e2%80%9d%e5%8b%be%e5%bc%95%e2%80%9d%e7%94%a8%e6%88%b7%e7%9a%84%e6%8c%89%e9%92%ae/" title="网页设计趋势之:”勾引”用户的按钮"></a>所谓”勾引”用户的按钮，其实对于Web设计师来说，就是如何设计出一个能让大多来访的用户都有点击欲望的按钮。通常这些按钮被链接到下载、注册和购买等功能。 国外设计师 Seth Godin 将按钮比喻成香蕉，而你的用户则会被比喻成可爱的小猴子。我们的目标是能够让小猴子在3秒之内快速找到它们想要的香蕉(也就是在用户放弃并离开你的网站之前)。强迫你自己在设计每个网页的时候都要遵循一个且仅有一个的目标，那就是”香蕉”！让它更大、更醒目、更美观！ 这篇文章将和大家一起讨论如何设计完美”勾引”用户点击的按钮并会为大家展示30个不错的网页按钮设计实例。 如何设计完美”勾引”用户点击的按钮 好的按钮设计一定会是醒目且能”勾引”用户眼球的。以下是好的按钮设计必不可少的5个特征: 1.颜色 颜色一定要能与平静的页面相比更加与众不同，因此它要更亮而且有高对比度的颜色。 2.位置 它们应当”座落于”用户期望更容易找到它们的地方。产品旁边、页头、导航的顶部右侧…这些都是醒目且不难找到的地方。 3.文字表达 在按钮上使用什么文字表达给用户是非常重要的。它应当简短并切中要点(不罗嗦)，并以动词开始，如:注册、下载、创建、尝试等… 如果想切实的达到”勾引”用户点击的按钮，添加“免费″二字的确可以起到诱惑的效果，当然那要真的是免费，不要误导或欺骗用户。 4.尺寸问题 如果它是你最重要的按钮并且你希望更多的用户点击它，那么让它更醒目些是没有坏处的。把这个按钮设计的比其他按钮更大些并让用户在更多的地方找到并点击它。 5.可”呼吸”的空间 你的按钮不能和网页中的其他元素挤在一起。它需要充足的margin(外边距)才能更加突出，也需要更多的padding(内边距)才能让文字更容易阅读。 30个网页按钮设计实例 1.Things 2.WordPress e-Commerce 3.Skype 4. PB Wiki 5.Exceptional 6.PicsEngine 7.InCase 8.GoodBarry 9.Plan HQ 10.TypePad 11.Mozilla Firefox 12.37 Signals 13.Hambo Design &#8230;<p class="read-more"><a href="http://www.masterboke.com/2009/01/20/%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e8%b6%8b%e5%8a%bf%e4%b9%8b%e2%80%9d%e5%8b%be%e5%bc%95%e2%80%9d%e7%94%a8%e6%88%b7%e7%9a%84%e6%8c%89%e9%92%ae/">继续阅读 &#187;</a></p>]]></description>
			<content:encoded><![CDATA[<a href="http://www.masterboke.com/2009/01/20/%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e8%b6%8b%e5%8a%bf%e4%b9%8b%e2%80%9d%e5%8b%be%e5%bc%95%e2%80%9d%e7%94%a8%e6%88%b7%e7%9a%84%e6%8c%89%e9%92%ae/" title="网页设计趋势之:”勾引”用户的按钮"></a><p>所谓”勾引”用户的按钮，其实对于Web设计师来说，就是<strong>如何设计出一个能让大多来访的用户都有点击欲望的按钮</strong>。通常这些按钮被链接到<strong>下载</strong>、<strong>注册</strong>和<strong>购买</strong>等功能。</p>
<p>国外设计师 Seth Godin 将按钮比喻成<strong>香蕉</strong>，而你的用户则会被比喻成可爱的<strong>小猴子</strong>。我们的目标是能够让小猴子在<strong>3秒之内</strong>快速找到它们想要的香蕉(也就是在用户放弃并离开你的网站之前)。强迫你自己在设计每个网页的时候都要遵循一个且仅有一个的目标，那就是”香蕉”！让它更大、更醒目、更美观！</p>
<p><a href="http://blog.bingo929.com/web-design-trends-call-to-action-signup-download-buttons.html"><img class="alignnone size-medium wp-image-2216" title="网页-按钮-设计" src="http://blog.bingo929.com/wp-content/uploads/2009/01/but-500x47.gif" alt="网页-按钮-设计" width="500" height="47" /></a></p>
<p>这篇文章将和大家一起讨论<strong>如何设计完美”勾引”用户点击的按钮</strong>并会为大家展示<strong>30个不错的网页按钮设计实例</strong>。</p>
<h3>如何设计完美”勾引”用户点击的按钮</h3>
<p>好的按钮设计一定会是醒目且能”勾引”用户眼球的。以下是好的按钮设计必不可少的5个特征:</p>
<p><span style="font-size: medium;"><strong>1.颜色</strong></span></p>
<p>颜色一定要能与平静的页面相比更加与众不同，因此它要<strong>更亮</strong>而且有<strong>高对比度</strong>的颜色。</p>
<p style="text-align: center;"><img class="size-full wp-image-2217 aligncenter" title="网页设计-教程" src="http://blog.bingo929.com/wp-content/uploads/2009/01/button1.gif" alt="网页设计-教程" width="109" height="71" /></p>
<p><span style="font-size: medium;"><strong>2.位置</strong></span></p>
<p>它们应当”座落于”用户期望更容易找到它们的地方。产品旁边、页头、导航的顶部右侧…这些都是醒目且不难找到的地方。</p>
<p style="text-align: center;"><img class="size-full wp-image-2218 aligncenter" title="网页按钮-设计" src="http://blog.bingo929.com/wp-content/uploads/2009/01/button2.gif" alt="网页按钮-设计" width="403" height="61" /></p>
<p><strong><span style="font-size: medium;">3.文字表达</span></strong></p>
<p>在按钮上使用什么文字表达给用户是非常重要的。它应当简短并切中要点(不罗嗦)，并以<strong>动词</strong>开始，如:注册、下载、创建、尝试等…</p>
<p>如果想切实的达到”勾引”用户点击的按钮，添加“免费″二字的确可以起到诱惑的效果，当然那要真的是免费，不要误导或欺骗用户。</p>
<p style="text-align: center;"><img class="size-full wp-image-2219 aligncenter" title="网页设计-按钮" src="http://blog.bingo929.com/wp-content/uploads/2009/01/button4.gif" alt="网页设计-按钮" width="234" height="90" /></p>
<p><strong><span style="font-size: medium;">4.尺寸问题</span></strong></p>
<p>如果它是你最重要的按钮并且你希望更多的用户点击它，那么让它更醒目些是没有坏处的。把这个按钮设计的比其他按钮更大些并让用户在更多的地方找到并点击它。</p>
<p style="text-align: center;"><img class="size-full wp-image-2220 aligncenter" title="按钮设计" src="http://blog.bingo929.com/wp-content/uploads/2009/01/button6.gif" alt="按钮设计" width="389" height="182" /></p>
<p><strong><span style="font-size: medium;">5.可”呼吸”的空间</span></strong></p>
<p>你的按钮不能和网页中的其他元素挤在一起。它需要充足的<strong>margin</strong>(外边距)才能更加突出，也需要更多的<strong>padding</strong>(内边距)才能让文字更容易阅读。</p>
<p style="text-align: center;"><img class="size-full wp-image-2221 aligncenter" title="按钮设计-教程" src="http://blog.bingo929.com/wp-content/uploads/2009/01/button5.gif" alt="按钮设计-教程" width="241" height="104" /></p>
<h3>30个网页按钮设计实例</h3>
<p>1.<a href="http://www.culturedcode.com/things/">Things</a></p>
<p><img class="alignnone size-medium wp-image-2222" title="按钮素材" src="http://blog.bingo929.com/wp-content/uploads/2009/01/cm-capture-112-500x185.png" alt="按钮素材" width="500" height="185" /></p>
<p>2.<a href="http://www.instinct.co.nz/e-commerce/">WordPress e-Commerce</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-02.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>3.<a href="http://www.skype.com/intl/en-gb/">Skype</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-03.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>4. <a href="http://pbwiki.com/">PB Wiki</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-04.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>5.<a href="http://getexceptional.com/">Exceptional</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-05.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>6.<a href="http://picsengine.com/">PicsEngine</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-06.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>7.<a href="http://goincase.com/products/detail/fitted-sleeve-es89015">InCase</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-07.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>8.<a href="http://goodbarry.com/">GoodBarry</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-08.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>9.<a href="http://www.planhq.com/">Plan HQ</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-09.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>10.<a href="http://www.typepad.com/pricing/">TypePad</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-10.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>11.<a href="http://www.mozilla.com/en-US/firefox/">Mozilla Firefox</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-11.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>12.<a href="http://www.basecamphq.com/?source=37s+home">37 Signals</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-12.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>13.<a href="http://www.hambodesign.com.au/">Hambo Design</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-13.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>14.<a href="http://cakephp.org/">Cake PHP</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-14.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>15.<a href="http://www.playintraffik.com/">Traffik</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-15.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>16.<a href="http://boagworld.com/">Boag World</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-16.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>17.<a href="http://www.donortools.com/">Donor Tools</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-17.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>18.<a href="http://lukelarsen.com/">Luke Larsen</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-18.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>19.<a href="http://www.squarespace.com/">Square Space</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-19.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>20.<a href="http://wufoo.com/">Wu Foo</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-20.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>21.<a href="http://www.barackobama.com/">Barack Obama</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-21.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>22.<a href="http://www.freshbooks.com/">Freshbooks</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-22.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>23.<a href="http://crazyegg.com/">Crazy Egg</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-23.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>24.<a href="http://www.webnotes.net/">Web Notes</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-24.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>25.<a href="http://www.campaignmonitor.com/">Campaign Monitor</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-25.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>26.<a href="http://www.speaklight.com/">Light CMS</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-26.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>27.<a href="http://litmusapp.com/">Litmus</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-27.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>28.<a href="http://www.stumbleupon.com/">Stumble Upon</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-28.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>29.<a href="http://www.rememberthemilk.com/">Remember The Milk</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-29.png" alt="网页设计-按钮-实例" width="500" height="185" /></p>
<p>30.<a href="http://www.ekklesia360.com/">Ekklesia 360</a></p>
<p><img title="网页设计-按钮-实例" src="http://blog.bingo929.com/wp-content/uploads/2009/01/web-butten-30.png" alt="网页设计-按钮-实例" width="500" height="185" /><br />
From：<a title="960 Grid System 基本原理及使用方法" href="http://blog.bingo929.com/web-design-trends-call-to-action-signup-download-buttons.html">http://blog.bingo929.com/web-design-trends-call-to-action-signup-download-buttons.html</a></p>
<p>英文原文:<a href="http://www.leemunroe.com/web-design-trends-call-to-action-signup-download-buttons/" target="_blank">Web Design Trends: Call To Action Buttons</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.masterboke.com/2009/01/20/%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e8%b6%8b%e5%8a%bf%e4%b9%8b%e2%80%9d%e5%8b%be%e5%bc%95%e2%80%9d%e7%94%a8%e6%88%b7%e7%9a%84%e6%8c%89%e9%92%ae/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Web设计的中文排版</title>
		<link>http://www.masterboke.com/2009/01/15/web%e8%ae%be%e8%ae%a1%e7%9a%84%e4%b8%ad%e6%96%87%e6%8e%92%e7%89%88/</link>
		<comments>http://www.masterboke.com/2009/01/15/web%e8%ae%be%e8%ae%a1%e7%9a%84%e4%b8%ad%e6%96%87%e6%8e%92%e7%89%88/#comments</comments>
		<pubDate>Thu, 15 Jan 2009 07:56:04 +0000</pubDate>
		<dc:creator>boke</dc:creator>
				<category><![CDATA[产品设计]]></category>
		<category><![CDATA[web设计]]></category>

		<guid isPermaLink="false">http://www.masterboke.cn/?p=56</guid>
		<description><![CDATA[<a href="http://www.masterboke.com/2009/01/15/web%e8%ae%be%e8%ae%a1%e7%9a%84%e4%b8%ad%e6%96%87%e6%8e%92%e7%89%88/" title="Web设计的中文排版"></a>很多时候，中文的Web设计仍然扮演着追赶者的角色，主流是以英语为代表的西方语言下的设计。语言是文化的重要方面，其差异——尤其是方块文字与西 方字母文字的差异——强烈地影响了Web设计的效果，这其中或又以排版（typography）为甚。我们的Web设计师们醉心于那些优秀的西方设计，惊 喜之余照搬或临摹，用作中文网站的设计，效果却可能差之甚远。一些跨国公司设计自己的中文网站时，几乎是将英文网站的样式表原封不动地套用到中文内容，不 但整体效果失了原味，细节不当之处更不胜枚举。 微软公司的中文主页刚刚做了改版。与英文主页几乎完全一致的样式并没有给用户带来多大好处，反而增加了麻 烦。约为11px大小的英文在Mac OS/Safari、Windows Vista、IE 7以及开启了ClearType的数量不少的Windows XP用户看来无可挑剔，但同样大小的中文显示在屏幕上就不那么完美了。过小的字号让中文用户很难阅读。总不能强求用户每次打开页面都手动增大文字大小吧？ 即便使用鼠标滚轮改变字号大小并不费劲，却并没有太多用户意识到这一点。 屏幕字体显示技术小史 电脑屏幕显示的最小单位是像素，这多少是个限制。让屏幕显示水平线和竖直线都十分清晰，但让它显示斜线则有可能产生“锯齿”。消除“锯齿”的方法是 使用过渡性质的中间颜色（白和黑的过渡色是灰）。英文字母和汉字都少不了斜线和曲线，使用过渡颜色消除“锯齿”的原理可以很大程度上提高清晰度。 1998年12月，微软公司发布ClearType 字体显示技术，宣称使用该项技术，字体的分辨率能比当时的既有水平提高200%。该技术同样用于消除“锯齿”，但并非使用过渡颜色的方法。在液晶显示器 上，应用了ClearType的字体显示效果明显优于简单使用过渡颜色的效果。实际上，这正是一种利用了液晶显示器特性的技术。研究一下微软的技术文档，就不难猜到200%这一数字的由来了。使用ClearType技术确实能够有效提高液晶显示器屏幕文字显示的效果，即便是普通显示器，应用ClearType技术也能起到消除“锯齿”的作用。 不消除“锯齿”。右边为左边文字截图放大至8倍的效果。 使用过渡颜色消除“锯齿”。右边为左边文字截图放大至8倍的效果。 使用ClearType。右边为左边文字截图放大至8倍的效果。 Windows XP/2003系统已经包含了ClearType技术，然而遗憾的是，用户需要手动开启该项功能才能生效，否则，屏幕上默认显示的文字是不消除锯齿的。我 无法考察到底有多少人开启了ClearType，但这对Web设计师来说一定不是好消息，我们不能总是陶醉在自己的世界里吧？看一看你的设计在关闭 ClearType时的效果，或许会带给你一些不一样的启发。 对于中文Web设计者来说，一个更不幸的消息是，在多数情况下，中文并不是ClearType技术的受益者。对于比较小的汉字（包括Web设计中段 落文本用得最多的12px和14px），开启ClearType并不产生任何变化。下文提到“小字号”时，均是指这种大小的字号。 为什么会这样？其实，这样处理不无原因。 在Windows XP/2003以及之前的操作系统中，小字号的中文字体使用了点阵字库而非矢量字库。这些操作系统的默认中文字体是宋体，但其横细竖粗的特点往往并不会表 现出来。在字号较小时，横竖笔画都是1像素宽。也就是说，这些汉字的显示并不是像矢量字体一样根据需要的大小按比例渲染出来的，而是像点阵图一样为每一种 字号下每一个汉字使用特定的表示效果。之所以这样处理，是因为汉字的笔画比较繁杂，而字体较小时可用的像素太少（12px大小的字只有144个像素供汉字 使用）。这种处理方式反而比简单地消除“锯齿”更清晰易读。再仔细看看12px下的“算”字，中间的“目”字被显示为“日”字，这正是针对像素过少采取的 应对策略——在不引起误解的情况下，尽可能多地提高文字点阵显示效果的清晰度。 这一缺陷也对中文Web设计带来了一定程度的负面影响。一个典型的例子便是导航栏的设计。一些产品负责人要求网页导航栏上的中文使用图像替换，以达 到清晰无“锯齿”的效果。因为导航栏太重要了，而且设计师们对导航栏的视觉设计也会花足了功夫，如果配上“锯齿感”强烈的文字，不无痛惜。相形之下，英文 网站的设计师们就不必为此多虑了。 从去年开始，一种称为“微软雅黑”的字体随着Windows Vista的推出而大为众人追捧。这款字体取代宋体成为Windows新版操作系统的默认中文字体。在Vista下使用这款字体，任意大小的汉字可以像英 文一样清晰显示。Mac OS使用了类似的黑体作为系统默认字体，通常称为“苹果丽黑”。Windows &#8230;<p class="read-more"><a href="http://www.masterboke.com/2009/01/15/web%e8%ae%be%e8%ae%a1%e7%9a%84%e4%b8%ad%e6%96%87%e6%8e%92%e7%89%88/">继续阅读 &#187;</a></p>]]></description>
			<content:encoded><![CDATA[<a href="http://www.masterboke.com/2009/01/15/web%e8%ae%be%e8%ae%a1%e7%9a%84%e4%b8%ad%e6%96%87%e6%8e%92%e7%89%88/" title="Web设计的中文排版"></a><p>很多时候，中文的Web设计仍然扮演着追赶者的角色，主流是以英语为代表的西方语言下的设计。语言是文化的重要方面，其差异——尤其是方块文字与西 方字母文字的差异——强烈地影响了Web设计的效果，这其中或又以排版（typography）为甚。我们的Web设计师们醉心于那些优秀的西方设计，惊 喜之余照搬或临摹，用作中文网站的设计，效果却可能差之甚远。一些跨国公司设计自己的中文网站时，几乎是将英文网站的样式表原封不动地套用到中文内容，不 但整体效果失了原味，细节不当之处更不胜枚举。</p>
<p><a href="http://weakow.com/uploads/2008/12/web-typo-1.png"><img class="alignnone size-medium wp-image-63" title="微软中英文主页对比截图" src="http://weakow.com/uploads/2008/12/web-typo-1.png" alt="微软中英文主页对比截图" /></a></p>
<p class="image-note">微软公司的中文主页刚刚做了改版。与英文主页几乎完全一致的样式并没有给用户带来多大好处，反而增加了麻 烦。约为11px大小的英文在Mac OS/Safari、Windows Vista、IE 7以及开启了ClearType的数量不少的Windows XP用户看来无可挑剔，但同样大小的中文显示在屏幕上就不那么完美了。过小的字号让中文用户很难阅读。总不能强求用户每次打开页面都手动增大文字大小吧？ 即便使用鼠标滚轮改变字号大小并不费劲，却并没有太多用户意识到这一点。</p>
<h3>屏幕字体显示技术小史</h3>
<p>电脑屏幕显示的最小单位是像素，这多少是个限制。让屏幕显示水平线和竖直线都十分清晰，但让它显示斜线则有可能产生“锯齿”。消除“锯齿”的方法是 使用过渡性质的中间颜色（白和黑的过渡色是灰）。英文字母和汉字都少不了斜线和曲线，使用过渡颜色消除“锯齿”的原理可以很大程度上提高清晰度。</p>
<p>1998年12月，微软公司<a title="微软公司发布ClearType字体显示技术" href="http://www.microsoft.com/china/press/1998/12/1208.mspx">发布</a>ClearType 字体显示技术，宣称使用该项技术，字体的分辨率能比当时的既有水平提高200%。该技术同样用于消除“锯齿”，但并非使用过渡颜色的方法。在液晶显示器 上，应用了ClearType的字体显示效果明显优于简单使用过渡颜色的效果。实际上，这正是一种利用了液晶显示器特性的技术。研究一下微软的<a title="ClearType 概述" href="http://msdn.microsoft.com/zh-cn/library/ms749295.aspx">技术文档</a>，就不难猜到200%这一数字的由来了。使用ClearType技术确实能够有效提高液晶显示器屏幕文字显示的效果，即便是普通显示器，应用ClearType技术也能起到消除“锯齿”的作用。</p>
<p><a href="http://weakow.com/uploads/2008/12/web-typo-2.png"><img class="alignnone size-full wp-image-66" title="不消除“锯齿”" src="http://weakow.com/uploads/2008/12/web-typo-2.png" alt="" width="500" height="85" /></a></p>
<p class="image-note">不消除“锯齿”。右边为左边文字截图放大至8倍的效果。</p>
<p><a href="http://weakow.com/uploads/2008/12/web-typo-3.png"><img class="alignnone size-full wp-image-67" title="使用过渡颜色消除“锯齿”" src="http://weakow.com/uploads/2008/12/web-typo-3.png" alt="" width="500" height="85" /></a></p>
<p class="image-note">使用过渡颜色消除“锯齿”。右边为左边文字截图放大至8倍的效果。</p>
<p><a href="http://weakow.com/uploads/2008/12/web-typo-4.png"><img class="alignnone size-full wp-image-68" title="使用ClearType" src="http://weakow.com/uploads/2008/12/web-typo-4.png" alt="" width="500" height="85" /></a></p>
<p class="image-note">使用ClearType。右边为左边文字截图放大至8倍的效果。</p>
<p>Windows XP/2003系统已经包含了ClearType技术，然而遗憾的是，用户需要手动开启该项功能才能生效，否则，屏幕上默认显示的文字是不消除锯齿的。我 无法考察到底有多少人开启了ClearType，但这对Web设计师来说一定不是好消息，我们不能总是陶醉在自己的世界里吧？看一看你的设计在关闭 ClearType时的效果，或许会带给你一些不一样的启发。</p>
<p>对于中文Web设计者来说，一个更不幸的消息是，在多数情况下，中文并不是ClearType技术的受益者。对于比较小的汉字（包括Web设计中段 落文本用得最多的12px和14px），开启ClearType并不产生任何变化。下文提到“小字号”时，均是指这种大小的字号。</p>
<p>为什么会这样？其实，这样处理不无原因。</p>
<p>在Windows XP/2003以及之前的操作系统中，小字号的中文字体使用了点阵字库而非矢量字库。这些操作系统的默认中文字体是宋体，但其横细竖粗的特点往往并不会表 现出来。在字号较小时，横竖笔画都是1像素宽。也就是说，这些汉字的显示并不是像矢量字体一样根据需要的大小按比例渲染出来的，而是像点阵图一样为每一种 字号下每一个汉字使用特定的表示效果。之所以这样处理，是因为汉字的笔画比较繁杂，而字体较小时可用的像素太少（12px大小的字只有144个像素供汉字 使用）。这种处理方式反而比简单地消除“锯齿”更清晰易读。再仔细看看12px下的“算”字，中间的“目”字被显示为“日”字，这正是针对像素过少采取的 应对策略——在不引起误解的情况下，尽可能多地提高文字点阵显示效果的清晰度。</p>
<p>这一缺陷也对中文Web设计带来了一定程度的负面影响。一个典型的例子便是导航栏的设计。一些产品负责人要求网页导航栏上的中文使用图像替换，以达 到清晰无“锯齿”的效果。因为导航栏太重要了，而且设计师们对导航栏的视觉设计也会花足了功夫，如果配上“锯齿感”强烈的文字，不无痛惜。相形之下，英文 网站的设计师们就不必为此多虑了。</p>
<p>从去年开始，一种称为“微软雅黑”的字体随着Windows Vista的推出而大为众人追捧。这款字体取代宋体成为Windows新版操作系统的默认中文字体。在Vista下使用这款字体，任意大小的汉字可以像英 文一样清晰显示。Mac OS使用了类似的黑体作为系统默认字体，通常称为“苹果丽黑”。Windows XP下的Safari也会尝试将网页里的中文以黑体显示出来，但效果不佳。在Linux下使用开源的<a href="http://wenq.org/">文泉驿</a>正黑，也可以看到相同的清晰效果。</p>
<p>如果绝大多数用户都开始使用这些新的系统及字体，我们或许可以思考一种新的Web排版设计格局。但就像Web设计师们至今也无法摆脱IE 6一样，主流中文字体显示技术依然没有改变。</p>
<h3>选择字体</h3>
<p>Web设计中，为了突出显示标题文字，可以使用与正文不同的字号和颜色，甚至，呃，不同的字体？对英文来说，确实如此。Web上通常直接可用的英文字体虽然<a href="http://www.modernlifeisrubbish.co.uk/article/working-with-limited-web-font-set">有限</a>，但毕竟有选择的余地。中文字体该如何选择呢？宋体和黑体都可用吗？问题并不简单。</p>
<p>通常情况下，中文字体和英文字体的重要区别，在于英文字体不包含对中文字体的定义，而中文字体却往往包含了对英文字体的定义（仅需要为英文大小写字 母、数字及常用符号进行设计）。也就是说，对一段包含中文的文字应用英文字体，中文会表现为默认中文字体（如Windows XP等系统下为宋体），而对英文应用中文字体，这些英文的字体将由中文字体决定。下表列出了最为常见的中英文字体。</p>
<table class="in-post" border="0">
<thead>
<tr>
<th>名称</th>
<th>样例</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Times New Roman</strong></td>
<td><a href="http://weakow.com/uploads/2009/01/times.png"><img class="no-border alignnone size-medium wp-image-177" title="Times New Roman" src="http://weakow.com/uploads/2009/01/times.png" alt="Times New Roman" width="200" height="20" /></a></td>
<td>Times系列字体的代表，也是衬线（serif）字体的代表，广泛用于印刷，但通常被认为在显示Web小字体文本时相对无衬线字体来说较不利用阅读。与中文混排效果较好。</td>
</tr>
<tr>
<td><strong>Georgia</strong></td>
<td><a href="http://weakow.com/uploads/2009/01/georgia.png"><img class="no-border alignnone size-full wp-image-175" title="Georgia" src="http://weakow.com/uploads/2009/01/georgia.png" alt="Georgia" width="200" height="20" /></a></td>
<td>衬线更为突出，数字的处理尤为特别，高低错落，显得典雅而不失正式。多适用于英文标题，正文亦可使用，但与汉字排在一起则效果不佳，故中文排版中应慎用。</td>
</tr>
<tr>
<td><strong>Arial</strong></td>
<td><a href="http://weakow.com/uploads/2009/01/arial.png"><img class="no-border alignnone size-full wp-image-179" title="Arial" src="http://weakow.com/uploads/2009/01/arial.png" alt="Arial" width="200" height="20" /></a></td>
<td>无衬线（sans serif）字体的代表，为使用最广的Web字体，大型实用网站（如Google）均选用Arial作为文本字体。与中文混排效果好。</td>
</tr>
<tr>
<td><strong>Verdana</strong></td>
<td><a href="http://weakow.com/uploads/2009/01/verdana.png"><img class="no-border alignnone size-medium wp-image-182" title="verdana" src="http://weakow.com/uploads/2009/01/verdana.png" alt="" width="200" height="20" /></a></td>
<td>又一款广泛使用的无衬线字体，与Arial相比字符更宽一些。Verdana的一大优势是即便很小的字号（如9px或10px大小的文字使用 Verdana依然清晰，每个字母间都保持1像素的间隔，但同样大小的Arial文字可读性就差了许多，部分字母挤在一起）。与中文混排时，由于宽度比例 的关系，Verdana的效果较Arial稍差。</td>
</tr>
<tr>
<td><strong>宋体</strong></td>
<td><a href="http://weakow.com/uploads/2009/01/simsun.png"><img class="no-border alignnone size-full wp-image-184" title="宋体" src="http://weakow.com/uploads/2009/01/simsun.png" alt="宋体" width="200" height="20" /></a></td>
<td>最常使用的中文衬线字体，Windows XP中文版的默认字体。小字号中文显示效果较好（以点阵方式显示），但其加粗显示效果多为人所诟病。对英文字符采用等宽处理（宽度等于半个汉字的宽度）， 为大量中文网站（如新浪网）使用，虽然中英文混排显得极为整齐，实则磨灭了英文字体应有宽度不同的特点，故不可取。</td>
</tr>
<tr>
<td><strong>黑体</strong></td>
<td><a href="http://weakow.com/uploads/2009/01/simhei.png"><img class="no-border alignnone size-full wp-image-187" title="黑体" src="http://weakow.com/uploads/2009/01/simhei.png" alt="黑体" width="200" height="20" /></a></td>
<td>常用的中文无衬线字体，与宋体相比更为厚重，用于标题可起强调作用。由于汉字笔画多的缘故，小字号中文显示不如点阵宋体清晰。对英文字符亦采用等宽处理，同样不足取。</td>
</tr>
</tbody>
</table>
<p>注：上表中的宋体和黑体均指Windows XP等平台下的相应字体，不代表微软雅黑等字体。截图亦来自Windows XP平台（已开启ClearType）。此外，Mac OS中的默认字体Helvetica没有列出，它与Arial接近，CSS中常与Arial一起声明。</p>
<p>表中解释了这些中文字体对英文字符的处理方式。实际上，除了Windows XP等系统自带的宋体、黑体、楷体等字体以外，其它很多中文字体都对英文字符采取了符合英文习惯的处理方式，这其中也包括微软雅黑。使用这样的中文字体， 英文字符表现出与中文一致的风格，如微软雅黑的英文也是无衬线的。然而，由于无法保证多数电脑安装了这类字体，它们也不应选为网页字体。</p>
<p>因此，一般情况下，最好使用常用的英文字体去定义网页中的普遍文本，而让操作系统和浏览器去决定中文字体的选用。这样做会让用户对网页的阅读产生最高的效率，制作功能性较强的网站尤其应该注意这一点。</p>
<h3>选择字号</h3>
<p>字号的选择似乎并不简单——排版中对字号的讨论远多于对字体的讨论。</p>
<p>英文字体通常可以很小或很大，而中文则没有这个便利。正如文章开头所演示的，小于12px的中文在屏幕上很难阅读，任何一种系统面对笔画繁多的汉字 和有限的表现空间都捉襟见肘。正因为英文对字号的适应范围大，英文Web设计常使用相对字体大小，把一定的选择权交给用户。而中文设计则限制较多，字号太 小则笔画太过拥挤（这种情况下，矢量字体的表现比点阵字体稍好）。</p>
<p>大多数情况下，中文字体使用固定大小，如12px、14px、16px。按照W3C的<a href="http://www.w3.org/TR/CSS2/syndata.html#length-units">规范</a>，px 与em同属相对单位（relative unit），em（以及%）相对于其它字号，px则相对于显示设备对像素的显示情况。如果屏幕分辨率变高而屏幕实际大小不变的话，1像素的实际显示大小就 会变小，使用px定义字号的文字的实际显示大小也会变小。如今，屏幕分辨率越来越高，导致屏幕文字越来越小这一现象已相当突出，不少设计师已采取行动以适 应这一趋势。由于1024×768的分辨率使用人数仍然最多，网页宽度多控制在1000以内，相应地，普通文字使用12px和14px是最合适的大小。为 了方便阅读，<a href="http://www.xinhuanet.com/">新华网</a>、<a href="http://cn.yahoo.com/">中国雅虎</a>等网站将新闻内容文字的字体设成了16px，虽在小分辨率屏幕上略显肿大，却也为多数人所接受。</p>
<p>值得注意的是，Windows XP等系统下的宋体（大多数网页的中文默认显示字体）的合适大小是12px以上。在显示一些相对不重要的信息或是用户界面中使用较少的文字时，为了与普通 文字显出区别，也为了多点变化，英文往往把字号设得很小。但同样的情况下，把中文设到12px以下则会严重损坏可读性。这时，在中文Web设计中，要弱化 一段文字，如果字号降低至12px效果仍不足够，则可以考虑将颜色变浅（准确地说，是变得更接近背景颜色）或是选择网页配色中的次要颜色（并非用得最少的 颜色）。</p>
<h3>差异无处不在</h3>
<p>从一开始，本文就没有停止过对中英文排版思路与方法的比较。优秀的英文Web设计远远多于中文设计，对Web设计的研究与讨论主要集中在英语世界， 连CSS属性也是以英文等字母语言为设计对象的，这些都是实情。差异无处不在，除了字体和字号，中文Web排版还包括很多不容忽视的原则与技巧。下面试举 几例：</p>
<ul>
<li>对正文中的汉字，不要使用斜体。一方面，Windows XP等平台下，斜体小字号汉字极难认清（而且也太斜了）；另一方面，斜体文本的最后一个字会与紧接着它的下一个字挤在一起（英文排版中，单词之间都有空 格，故不存在这一问题）。不过，在非正式情况下，对大字号的标题使用斜体也并非不可。</li>
<li>依照中文的习惯，文章的标题应当居中，每段开头应当空两格。不过，在Web世界里，这些仅仅起到参考的作用，而非必须。如今，中文用户似乎也很习惯标题居左，段间留距。况且，这种情况下用户的阅读速度可能更高。</li>
<li>与英文相比，中文段落需要的行距（对应CSS中的<code>line-height</code>属性）更大。这样处理的一个简单原因是，相同字号的汉字比英文字母、数字和符号的高度更高，每行之间的距离相对就小了。</li>
</ul>
<p>诸如此类的问题还有很多，但我不愿也不能列举所有。撰写本文的目的是引起大家对面向中文Web的排版设计的关注，要求仅仅是把其中的基本问题阐释清 楚，并将读者的视线带往更广的空间。本文对读者的一个重要期待是有更多的人研究——哪怕只是零散地思考——这个问题。或许，重要的不是世界的改变本身，而 是存在改变世界的人。</p>
<p>From: http://weakow.com/articles/chinese-typography-in-web-design/</p>
]]></content:encoded>
			<wfw:commentRss>http://www.masterboke.com/2009/01/15/web%e8%ae%be%e8%ae%a1%e7%9a%84%e4%b8%ad%e6%96%87%e6%8e%92%e7%89%88/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>马化腾关于产品设计与用户体验的培训</title>
		<link>http://www.masterboke.com/2009/01/13/%e9%a9%ac%e5%8c%96%e8%85%be%e5%85%b3%e4%ba%8e%e4%ba%a7%e5%93%81%e8%ae%be%e8%ae%a1%e4%b8%8e%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c%e7%9a%84%e5%9f%b9%e8%ae%ad/</link>
		<comments>http://www.masterboke.com/2009/01/13/%e9%a9%ac%e5%8c%96%e8%85%be%e5%85%b3%e4%ba%8e%e4%ba%a7%e5%93%81%e8%ae%be%e8%ae%a1%e4%b8%8e%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c%e7%9a%84%e5%9f%b9%e8%ae%ad/#comments</comments>
		<pubDate>Tue, 13 Jan 2009 03:45:47 +0000</pubDate>
		<dc:creator>boke</dc:creator>
				<category><![CDATA[产品设计]]></category>
		<category><![CDATA[用户体验]]></category>

		<guid isPermaLink="false">http://www.masterboke.cn/?p=45</guid>
		<description><![CDATA[<a href="http://www.masterboke.com/2009/01/13/%e9%a9%ac%e5%8c%96%e8%85%be%e5%85%b3%e4%ba%8e%e4%ba%a7%e5%93%81%e8%ae%be%e8%ae%a1%e4%b8%8e%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c%e7%9a%84%e5%9f%b9%e8%ae%ad/" title="马化腾关于产品设计与用户体验的培训"></a>昨天听了pony在峰会上的讲座，收获颇丰，晚上回家后把记录的笔记整理了一下，先放上来和大家分享一下。整理时间较短，如有不周全之处，大家谅解：） 背景：pony是公司的首席体验官、首席产品经理。这次在产品峰会上pony将自己平时经验的积累与大家交流，体验较细。这次分享研发管理部，设计中心整理了些材料。主要的案例是qqmail和qq影音的内容。以此为demo来讲解。 pony的讲解主要分为三大部分：产品设计、产品运营、交互设计。 在开场首先提到，互联网同类产品竞争激烈，只有抓住用户的心才能持续走下去。产品要赢得用户的心，要从一些小的点来赢得用户。 第一部分：产品设计 这个部分，感受最深的是两个词：核心能力、口碑。这部分还着重提到了pony对产品经理素质、开发人员心态的期望。 核心能力 任何产品都有核心功能，能帮助到用户，解决用户某一方面的需求，如节省时间、解决问题，提升效率等等。 很多产品经理对核心能力的关注不够，不是说完全没有关注，而是没有关注到度。核心能力不仅仅是功能上也，也包括性能上的。对于技术出身的产品经理，特别是做后台出来的，对于性能的关注，如果自己有能力、有信心做到对核心能力的关注，肯定会渴望将速度、后台做到极限。现在很多产品都没做好，一抓问题一大堆。如，前阵子网页速度优化，好多东西可以优化，一下提速好多，之前不知道都做什么去了。之前用户忍受了很久，同时浪费时间、浪费我们的资源。不抓，都没人理，很说部过去。要在性能方面放入更多精力。 谈到核心的能力，首先要有技术突破点。如做影音的时候，不是要做人家有我也有的东西。以前公司做的你有我有的东西，总是排在第二第三，虽然也有机会，但缺乏第一次出来亮相失去用户的认同感。 第一要关注你的产品的硬指标，在设计和开发的时候要考虑到外部会将对它与竞争对手做评测。如播放能力，占用内存。qq影音的核心性能和速度直接超越暴风影音。这样就能看到用户很多的好评和口碑。所以之后如果qq影音不出大问题，发展的势头将会很好。 硬指标评测cpu占用、高清加速，当时也有很多发展方向，如网络播放啊、交流啊、分享啊，也是思路。现在都砍掉，就是要做播放器，是用户的需求，纯用户需求不需要多少钱的。高清的，并不是很多人需要的，但是是高端用户的需求（这个后面口碑创造会再提到）。只有硬指标满足了，用户说，我这个破机器，暴风影音不能放，qq影音能放。这句话说出来，这样口碑就出来了。用户知道你行，差异化出来了。口碑要有差异性。 核心能力要做到极致。要多想如何通过技术实现差异化，人家做不到，或者通过半年一年才能追上来。 如，用户总评论qq的时候说用qq唯一的理由是传文件快，有群。于是这些就是我们的优势，那我们就要将优势发挥到极致。我们需要更加深入的去想，要想到要不要做传输速度、中转啊。离线传文件在邮件体现就是一个中转站，超大文件，也不难，就是要去做。产品部门很快的去做，去测试。用户用的量也不一定大，但几个月用一次，口碑就来了。用户会说，我要传大文件，找了半天找不到可以传的地方，万般无赖之下用了很烂的qqmail，居然行了。于是我们的口碑就来了。做了很多测试、逐步放量，看变化，因为到期就删掉，成本也没提升多少。 要做大，要考虑到如何做到极致让人家想到也追不上，我们这么多年在idc上的功力不能浪费，需要我们去做。高速上传、城域网中专站，支持高速地上传……，又发现问题，如不在邮件，在im做怎么体验，这个我们在后面要逐步考虑到做起来。我们的目的是要让用户感到超快、飞快，让用户体验非常好。这些都需要大量技术和后台来配合。 产品的发展都需要产品经理来配合。现在我们产品经理有是做研发出身的不多。而很多产品和服务是需要大量技术背景的，目前我们希望的产品经理是非常资深的，做过前端、后端开发的技术研发人员晋升而来的，刚毕业的人员来做产品经理很人担心。好的产品最好交到一个有技术能力的、有经验的产品人员手上，会让大家更加放心。如果产品人员太烂，让很多兄弟陪着干，结果发现方向错误是非常浪费和挫伤团队士气的。 产品最难的是订优先级和先后次序。要看哪个是用户最核心的。功能好不好不是说有用户用了，用量多少了，写个报告统计下流量证明是好。这个是很错误的，好不好要看用户是不是要用这个功能，用户要用的实时出现。腾讯很多产品经理的激情还不够，做出来的产品比较大路货。虽然挑剔不出很不对的东西，但放出去用户也没有感觉，最后就不了了之。pony有时候很痛心，希望大家在产品设计之初就想的透彻一点。产品经理需要投入更多的关注度，关注度不一样，结果出来的很不一样。 口碑 做产品要做口碑，要关注高端用户、意见领袖关注的点。以前的思路是抓大放小，满足大部分小白用户的需求。但是高端用户这块是真正可以拿口碑的。 如何提高口碑，看最高端用户的关注，这个是在基础功能比较好的情况下考虑。如邮件搜索啊，rss啊，这些是很炫的用户会在博客和论坛里面提及的。做起来也不难，在有能力的情况下保证。在产品已经成型的情况下，要考虑到，对高端用户的心态要不一样。如果想要获得高端用户的口碑，还需要在产品的设计上大气些。如，让用户在我们的qqmail上使用别的邮箱的地址，而不带任何自己qqmail的尾巴。之前我们做的时候不会自动保存别的邮箱的地址，自己心里打个小九九，让别人不方便使用外部邮箱地址，好使用我们的。这些小九九，高端用户都是看的出来，反倒不好。所以要改掉，要做到真正的方便到用户。 改变用户习惯要让他信任你，改变有过程的，需要通过我们的努力让用户慢慢改过来。如，关闭数字帐号，发现很多bug，拍拍都不知道改。如，独立密码，之前不是双密码，而是改整体密码。 需要满足高端用户，让他不要怀疑你、bs你。如浏览器到兼容，可能你会考虑很多浏览器的覆盖率不高而不去做，但在高端用户来看，这是个态度问题，如果你的产品连这个都没考虑，其他的我就都怀疑了。你这个产品团队的意识好不好。再如同文件夹是否对齐，是否会引起杀毒软件的报警，都是小事但要关注。 个性化服务，并不是大众化服务，也是拿口碑的。 一个产品在没有口碑的时候，不要滥用平台，如要im带呀，投入营销资源呀，要marking联系pr公司投放广告呀，广告位提要求……等着人家砍，想一半也够了。产品经理精力好像分布的很好50%产品、30%营销、20%……。如果你在基础处控制的好，也可以。但90%的时候第一点都做不好。如果你的实力和胜算不到70-80%，那么把精力放在最核心的地方。在已经获得良好口碑，处于上升期的产品才考虑这些。 产品经理关注最最核心、获得用户口碑的战略点，如果这块没做透，做营销只是告诉用户过来，失望，再花更多的精力弥补，是得不偿失的。当用户没有自动在增长（用户会主动给朋友推荐来使用我们的产品的时候），看着用户的增长，否则不要去打扰用户，否则可能是好心办坏事。这个时候，每做一件事情，每加一个东西要很慎重的考虑，真的是有建设性的去增加产品的一个口碑。当用户口碑坏掉后，再将用户拉回来很难。 加功能，在管理控制功能上也要有技巧。在核心功能做好后，常用功能是要逐步补齐的。产品在局部、细小之处的创新需要永不满足。作为一个有良好口碑的产品，每加一个功能都要考虑清楚，这个功能给10%的用户带来好感的时候是否会给90%的用户带来困惑。如果有冲突的要聪明点，分情况避免。每个功能不一定要用的多才是好，而是用了的人都觉得好就是好。 做产品开发的时候需要有较强的研发机制保证，这样可以让产品开发更加敏捷更加快速。有些需求，提一下都可以得到很快反应。qqmail也会每天排好规划，为什么能很快反应，如文件加锁。有些产品做个东西写ppt、做汇报……，人家顺手就做了。很多产品不敏捷，大家要敏捷点、就算是大项目也要灵活。不能说等3个月后再给你个东西看，这个时候竞争对手都不知道跑到好远了。 开发人员的心态要关注产品，不要是公事公办的态度。你要知道用户、同行会关注你的产品，在这种驱动下开发人员要自动去完成。不能说什么都要产品做好后，流水线样的送过来我才做。开发人员要参与，40-50%左右的产品最终体验应该是由开发人员决定的。产品人员不要嫉妒有些工作是是开发人员设计的，只有这样才是团队共同参与的。如果都是产品想的就完蛋了，那么这个team做这个产品没有什么机会，必然会产生产品迭代慢的效果。这样一个格局太不行了。 运营式管理 这个部分感受最深的一个词：天天用。这部分还谈到了pony眼中产品经理的一些基本要求。 我们的产品不是单机版，需要有强的用户感和技术功底外，很重要的是服务。我们要关注很多很复杂的内容，如架构啊，应用啊，产品需要有更好的架构，这个是需要花很多精力，常态下可能看不出来。所以需要高层从kpi上考虑。这个是考功力，谁做的好，总办领导是看得到的。设计的好的架构不会手乱脚乱。如把核心的东西做成组件模块分发。 发现产品的不足，最简单的方法就是产品天天用。天天去看，去论坛，去博客、去订阅。产品经理要敏感点，找出你的产品不足之处。有的产品经理说找不出来很奇怪，上线的时候坚持三个月天天用，问题是有限的，一天发现一个，解决掉，这样慢慢的已经开始逼近你那个很有口碑的点了。不要因为工作没有技术含量就不去做，很多好的产品都是靠这个方法做出来的。对于高层来说，不仅仅是安排下面的人去做就可以了，一定要自己做。这些都不难，关键要坚持。意识要提高。你要做到每个周末，都心痒痒要去做。心里一定要想着，这个周末不试，肯定出事。这样坚持，到一个产品基本成型，就可以去看下个产品了。 从哪个地方找，论坛啊、博客啊，rss订阅啊。高端用户不屑于去论坛提，在博客提，需要产品经理自己去追出来。如qqmail、影音的产品经理自己去查、去搜，然后主动和用户接触，解决，有些确实是用户搞错了，有些是我们的问题。产品经理心态要很好，希望用户能找出问题我们再解决掉。哪怕再小的问题解决了也是完成一件大事。有些事情做了，见效很快。运营方面要天天去看的，产品经理要关注多个方面，比如说你的产品慢，用户不会管你的idc烂或者其他原因，只是知道你慢。产品经理要全面，服务器端哪个方面的问题能找出来。跟踪用户定位问题。如果pony都能搜索到的问题，没看到产品经理出现，那么就是你没做到位。 交互设计 交互要求我们细致，视觉简洁清爽。 产品经理要想到自己是个挑剔的用户，想像自己是个笨用户，复杂的看不懂。 产品人员的精力有限，交互内容很多，所以要抓最常见的一块。流量、用量最大的地方都要考虑。规范到要让用户使用的舒服。要在感觉、触觉上都有琢磨，有困惑要想到去改善。如鼠标少移动、可快速点到等等。 像邮箱的一个按钮“返回”放在哪儿，上线测，放右边还是左边，大家都会多放琢磨，怎么放更好，并上线尝试，现在的方案折中比较好。如输入邮箱密码出错，输入框内的内容select上，不用用户清楚可以直接输出。这些都是对用户体验的优化。 如对同个用户发信，在此用户有多个邮箱的情况下会默认选最近用的一个帐号。这些需求都小，但你想清楚，用户就会说好，虽然用户未必说的出好在哪儿。 产品的使用要符合用户的习惯，如写邮件的时候copy东西，更多人习惯用键盘来操作。虽然有些技术难度，但也可以解决。交互，对鼠标反馈的灵敏性，便捷性。 &#8230;<p class="read-more"><a href="http://www.masterboke.com/2009/01/13/%e9%a9%ac%e5%8c%96%e8%85%be%e5%85%b3%e4%ba%8e%e4%ba%a7%e5%93%81%e8%ae%be%e8%ae%a1%e4%b8%8e%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c%e7%9a%84%e5%9f%b9%e8%ae%ad/">继续阅读 &#187;</a></p>]]></description>
			<content:encoded><![CDATA[<a href="http://www.masterboke.com/2009/01/13/%e9%a9%ac%e5%8c%96%e8%85%be%e5%85%b3%e4%ba%8e%e4%ba%a7%e5%93%81%e8%ae%be%e8%ae%a1%e4%b8%8e%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c%e7%9a%84%e5%9f%b9%e8%ae%ad/" title="马化腾关于产品设计与用户体验的培训"></a><blockquote><p>昨天听了pony在峰会上的讲座，收获颇丰，晚上回家后把记录的笔记整理了一下，先放上来和大家分享一下。整理时间较短，如有不周全之处，大家谅解：）<br />
背景：pony是公司的首席体验官、首席产品经理。这次在产品峰会上pony将自己平时经验的积累与大家交流，体验较细。这次分享研发管理部，设计中心整理了些材料。主要的案例是qqmail和qq影音的内容。以此为demo来讲解。<br />
pony的讲解主要分为三大部分：产品设计、产品运营、交互设计。<br />
在开场首先提到，互联网同类产品竞争激烈，只有抓住用户的心才能持续走下去。产品要赢得用户的心，要从一些小的点来赢得用户。</p>
<p>第一部分：产品设计<br />
这个部分，感受最深的是两个词：核心能力、口碑。这部分还着重提到了pony对产品经理素质、开发人员心态的期望。<br />
核心能力<br />
任何产品都有核心功能，能帮助到用户，解决用户某一方面的需求，如节省时间、解决问题，提升效率等等。<br />
很多产品经理对核心能力的关注不够，不是说完全没有关注，而是没有关注到度。核心能力不仅仅是功能上也，也包括性能上的。对于技术出身的产品经理，特别是做后台出来的，对于性能的关注，如果自己有能力、有信心做到对核心能力的关注，肯定会渴望将速度、后台做到极限。现在很多产品都没做好，一抓问题一大堆。如，前阵子网页速度优化，好多东西可以优化，一下提速好多，之前不知道都做什么去了。之前用户忍受了很久，同时浪费时间、浪费我们的资源。不抓，都没人理，很说部过去。要在性能方面放入更多精力。<br />
谈到核心的能力，首先要有技术突破点。如做影音的时候，不是要做人家有我也有的东西。以前公司做的你有我有的东西，总是排在第二第三，虽然也有机会，但缺乏第一次出来亮相失去用户的认同感。<br />
第一要关注你的产品的硬指标，在设计和开发的时候要考虑到外部会将对它与竞争对手做评测。如播放能力，占用内存。qq影音的核心性能和速度直接超越暴风影音。这样就能看到用户很多的好评和口碑。所以之后如果qq影音不出大问题，发展的势头将会很好。<br />
硬指标评测cpu占用、高清加速，当时也有很多发展方向，如网络播放啊、交流啊、分享啊，也是思路。现在都砍掉，就是要做播放器，是用户的需求，纯用户需求不需要多少钱的。高清的，并不是很多人需要的，但是是高端用户的需求（这个后面口碑创造会再提到）。只有硬指标满足了，用户说，我这个破机器，暴风影音不能放，qq影音能放。这句话说出来，这样口碑就出来了。用户知道你行，差异化出来了。口碑要有差异性。<br />
核心能力要做到极致。要多想如何通过技术实现差异化，人家做不到，或者通过半年一年才能追上来。<br />
如，用户总评论qq的时候说用qq唯一的理由是传文件快，有群。于是这些就是我们的优势，那我们就要将优势发挥到极致。我们需要更加深入的去想，要想到要不要做传输速度、中转啊。离线传文件在邮件体现就是一个中转站，超大文件，也不难，就是要去做。产品部门很快的去做，去测试。用户用的量也不一定大，但几个月用一次，口碑就来了。用户会说，我要传大文件，找了半天找不到可以传的地方，万般无赖之下用了很烂的qqmail，居然行了。于是我们的口碑就来了。做了很多测试、逐步放量，看变化，因为到期就删掉，成本也没提升多少。<br />
要做大，要考虑到如何做到极致让人家想到也追不上，我们这么多年在idc上的功力不能浪费，需要我们去做。高速上传、城域网中专站，支持高速地上传……，又发现问题，如不在邮件，在im做怎么体验，这个我们在后面要逐步考虑到做起来。我们的目的是要让用户感到超快、飞快，让用户体验非常好。这些都需要大量技术和后台来配合。<br />
产品的发展都需要产品经理来配合。现在我们产品经理有是做研发出身的不多。而很多产品和服务是需要大量技术背景的，目前我们希望的产品经理是非常资深的，做过前端、后端开发的技术研发人员晋升而来的，刚毕业的人员来做产品经理很人担心。好的产品最好交到一个有技术能力的、有经验的产品人员手上，会让大家更加放心。如果产品人员太烂，让很多兄弟陪着干，结果发现方向错误是非常浪费和挫伤团队士气的。<br />
产品最难的是订优先级和先后次序。要看哪个是用户最核心的。功能好不好不是说有用户用了，用量多少了，写个报告统计下流量证明是好。这个是很错误的，好不好要看用户是不是要用这个功能，用户要用的实时出现。腾讯很多产品经理的激情还不够，做出来的产品比较大路货。虽然挑剔不出很不对的东西，但放出去用户也没有感觉，最后就不了了之。pony有时候很痛心，希望大家在产品设计之初就想的透彻一点。产品经理需要投入更多的关注度，关注度不一样，结果出来的很不一样。<br />
口碑<br />
做产品要做口碑，要关注高端用户、意见领袖关注的点。以前的思路是抓大放小，满足大部分小白用户的需求。但是高端用户这块是真正可以拿口碑的。<br />
如何提高口碑，看最高端用户的关注，这个是在基础功能比较好的情况下考虑。如邮件搜索啊，rss啊，这些是很炫的用户会在博客和论坛里面提及的。做起来也不难，在有能力的情况下保证。在产品已经成型的情况下，要考虑到，对高端用户的心态要不一样。如果想要获得高端用户的口碑，还需要在产品的设计上大气些。如，让用户在我们的qqmail上使用别的邮箱的地址，而不带任何自己qqmail的尾巴。之前我们做的时候不会自动保存别的邮箱的地址，自己心里打个小九九，让别人不方便使用外部邮箱地址，好使用我们的。这些小九九，高端用户都是看的出来，反倒不好。所以要改掉，要做到真正的方便到用户。 改变用户习惯要让他信任你，改变有过程的，需要通过我们的努力让用户慢慢改过来。如，关闭数字帐号，发现很多bug，拍拍都不知道改。如，独立密码，之前不是双密码，而是改整体密码。<br />
需要满足高端用户，让他不要怀疑你、bs你。如浏览器到兼容，可能你会考虑很多浏览器的覆盖率不高而不去做，但在高端用户来看，这是个态度问题，如果你的产品连这个都没考虑，其他的我就都怀疑了。你这个产品团队的意识好不好。再如同文件夹是否对齐，是否会引起杀毒软件的报警，都是小事但要关注。<br />
个性化服务，并不是大众化服务，也是拿口碑的。<br />
一个产品在没有口碑的时候，不要滥用平台，如要im带呀，投入营销资源呀，要marking联系pr公司投放广告呀，广告位提要求……等着人家砍，想一半也够了。产品经理精力好像分布的很好50%产品、30%营销、20%……。如果你在基础处控制的好，也可以。但90%的时候第一点都做不好。如果你的实力和胜算不到70-80%，那么把精力放在最核心的地方。在已经获得良好口碑，处于上升期的产品才考虑这些。<br />
产品经理关注最最核心、获得用户口碑的战略点，如果这块没做透，做营销只是告诉用户过来，失望，再花更多的精力弥补，是得不偿失的。当用户没有自动在增长（用户会主动给朋友推荐来使用我们的产品的时候），看着用户的增长，否则不要去打扰用户，否则可能是好心办坏事。这个时候，每做一件事情，每加一个东西要很慎重的考虑，真的是有建设性的去增加产品的一个口碑。当用户口碑坏掉后，再将用户拉回来很难。<br />
加功能，在管理控制功能上也要有技巧。在核心功能做好后，常用功能是要逐步补齐的。产品在局部、细小之处的创新需要永不满足。作为一个有良好口碑的产品，每加一个功能都要考虑清楚，这个功能给10%的用户带来好感的时候是否会给90%的用户带来困惑。如果有冲突的要聪明点，分情况避免。每个功能不一定要用的多才是好，而是用了的人都觉得好就是好。<br />
做产品开发的时候需要有较强的研发机制保证，这样可以让产品开发更加敏捷更加快速。有些需求，提一下都可以得到很快反应。qqmail也会每天排好规划，为什么能很快反应，如文件加锁。有些产品做个东西写ppt、做汇报……，人家顺手就做了。很多产品不敏捷，大家要敏捷点、就算是大项目也要灵活。不能说等3个月后再给你个东西看，这个时候竞争对手都不知道跑到好远了。<br />
开发人员的心态要关注产品，不要是公事公办的态度。你要知道用户、同行会关注你的产品，在这种驱动下开发人员要自动去完成。不能说什么都要产品做好后，流水线样的送过来我才做。开发人员要参与，40-50%左右的产品最终体验应该是由开发人员决定的。产品人员不要嫉妒有些工作是是开发人员设计的，只有这样才是团队共同参与的。如果都是产品想的就完蛋了，那么这个team做这个产品没有什么机会，必然会产生产品迭代慢的效果。这样一个格局太不行了。</p>
<p>运营式管理<br />
这个部分感受最深的一个词：天天用。这部分还谈到了pony眼中产品经理的一些基本要求。<br />
我们的产品不是单机版，需要有强的用户感和技术功底外，很重要的是服务。我们要关注很多很复杂的内容，如架构啊，应用啊，产品需要有更好的架构，这个是需要花很多精力，常态下可能看不出来。所以需要高层从kpi上考虑。这个是考功力，谁做的好，总办领导是看得到的。设计的好的架构不会手乱脚乱。如把核心的东西做成组件模块分发。<br />
发现产品的不足，最简单的方法就是产品天天用。天天去看，去论坛，去博客、去订阅。产品经理要敏感点，找出你的产品不足之处。有的产品经理说找不出来很奇怪，上线的时候坚持三个月天天用，问题是有限的，一天发现一个，解决掉，这样慢慢的已经开始逼近你那个很有口碑的点了。不要因为工作没有技术含量就不去做，很多好的产品都是靠这个方法做出来的。对于高层来说，不仅仅是安排下面的人去做就可以了，一定要自己做。这些都不难，关键要坚持。意识要提高。你要做到每个周末，都心痒痒要去做。心里一定要想着，这个周末不试，肯定出事。这样坚持，到一个产品基本成型，就可以去看下个产品了。<br />
从哪个地方找，论坛啊、博客啊，rss订阅啊。高端用户不屑于去论坛提，在博客提，需要产品经理自己去追出来。如qqmail、影音的产品经理自己去查、去搜，然后主动和用户接触，解决，有些确实是用户搞错了，有些是我们的问题。产品经理心态要很好，希望用户能找出问题我们再解决掉。哪怕再小的问题解决了也是完成一件大事。有些事情做了，见效很快。运营方面要天天去看的，产品经理要关注多个方面，比如说你的产品慢，用户不会管你的idc烂或者其他原因，只是知道你慢。产品经理要全面，服务器端哪个方面的问题能找出来。跟踪用户定位问题。如果pony都能搜索到的问题，没看到产品经理出现，那么就是你没做到位。</p>
<p>交互设计<br />
交互要求我们细致，视觉简洁清爽。<br />
产品经理要想到自己是个挑剔的用户，想像自己是个笨用户，复杂的看不懂。<br />
产品人员的精力有限，交互内容很多，所以要抓最常见的一块。流量、用量最大的地方都要考虑。规范到要让用户使用的舒服。要在感觉、触觉上都有琢磨，有困惑要想到去改善。如鼠标少移动、可快速点到等等。<br />
像邮箱的一个按钮“返回”放在哪儿，上线测，放右边还是左边，大家都会多放琢磨，怎么放更好，并上线尝试，现在的方案折中比较好。如输入邮箱密码出错，输入框内的内容select上，不用用户清楚可以直接输出。这些都是对用户体验的优化。<br />
如对同个用户发信，在此用户有多个邮箱的情况下会默认选最近用的一个帐号。这些需求都小，但你想清楚，用户就会说好，虽然用户未必说的出好在哪儿。<br />
产品的使用要符合用户的习惯，如写邮件的时候copy东西，更多人习惯用键盘来操作。虽然有些技术难度，但也可以解决。交互，对鼠标反馈的灵敏性，便捷性。<br />
不强迫用户，如点亮图标。如qqmail，不为1%的需求骚扰99%的用户<br />
操作便利，如qq音乐，新旧列表，两者都要兼顾到，如qq影音的快捷播放，从圆形到方形，最后因为影响性能而放弃。<br />
美术、淡淡的，点到即止，如qqmail，qqmail在ui上的启发，不用太重也能做的很好。后来用在大量的产品，如hummer、影音。有图案和简洁不矛盾。<br />
重点突出，防止不必要的低龄化，还提到了一些内容，如产品成功关键点等等，这些在pony的ppt上有，没有记下来，大家可以在之后腾讯峰会吧（http://km.oa.com/group/forum）直接看pony的ppt。</p>
<p>最后pony谈了一下有些产品的态度问题——态度很好，不解决问题。只做表面功夫，与其花一段时间写个长长的报告，不如实实际际的去解决问题。<br />
外部也有很多优秀的产品可以学习，学习不是学皮毛，学样子，要学会。<br />
外部可以学习的优秀产品，web类的，google、yahoo、facebook、apple，非web类的没有记录下来。</p>
<p>总结一下：<br />
1、核心功能要做透，做的人家追不上，自己的优势要尽量的发挥；<br />
2、产品口碑要建立，要关注高端用户，要调整自己心态；<br />
3、敏捷、快，产品迭代要快，快速实现、快速响应，要做到真正的迭代；<br />
4、产品人员要全面，要能找出核心需求，要关注技术（架构、服务是不是好），要关注产品（天天用），要关注用户（还需要出去寻找问题并解决）；<br />
5、开发人员心态要好，要有参与感，不要被动的等；<br />
6、交互设计简洁，关注要点，当自己是个挑剔的、笨的用户；<br />
7、想办法利用公司的资源，如pony等人都是大家的公共资源，要争取到pony对自己产品的关注，会给你的产品带来很多好的指导和创意。（这个不是pony说的，是后来jeff提到的，不过很实在，pony做过这么多的产品，有这么好的产品感觉，如果给你的产品提出建议，是对产品很大的帮助）</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.masterboke.com/2009/01/13/%e9%a9%ac%e5%8c%96%e8%85%be%e5%85%b3%e4%ba%8e%e4%ba%a7%e5%93%81%e8%ae%be%e8%ae%a1%e4%b8%8e%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c%e7%9a%84%e5%9f%b9%e8%ae%ad/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

