<?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://nishuang.de/archives/tag/%e4%ba%a7%e5%93%81%e8%ae%be%e8%ae%a1/feed" rel="self" type="application/rss+xml" />
	<link>http://nishuang.de</link>
	<description>easy life</description>
	<lastBuildDate>Tue, 27 Mar 2012 06:36:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>[有关设计] 从QQ圈子说起产品设计者的同理心</title>
		<link>http://nishuang.de/archives/3600</link>
		<comments>http://nishuang.de/archives/3600#comments</comments>
		<pubDate>Mon, 26 Mar 2012 23:31:49 +0000</pubDate>
		<dc:creator>倪爽</dc:creator>
				<category><![CDATA[工作]]></category>
		<category><![CDATA[QQ圈子]]></category>
		<category><![CDATA[交互设计]]></category>
		<category><![CDATA[产品设计]]></category>
		<category><![CDATA[同理心]]></category>

		<guid isPermaLink="false">http://nishuang.de/?p=3600</guid>
		<description><![CDATA[<p>前几天QQ圈子公测，引发用户大恐慌，这又让我想起&#8220;同理心&#8221;这个老话题。（本文适合产品经理、产品设计师，技术人员也可以参考）</p>
<div>&#160;</div>
<div><img alt="" class="alignnone size-full wp-image-3601" height="" src="http://img.nishuang.de/wp/qq_quan_zi.jpg" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; width: 500px; height: 260px;border-color:#333; " title="QQ圈子" width="" /></div>
<div>&#160;</div>
<div>这次公测的QQ圈子，某些方面比较缺心眼。以其杀手级功能为例：QQ圈子把用户含糊的&#8220;弱关系&#8221;数据，整理成清晰的&#8220;强关系&#8221;，并直观地呈现给用户。大量用户惊恐地发现：自己没有进行任何主动操作、没进行任何授权，腾讯已经把包括&#8220;我的小学同学女友的老师&#8221;在内的资料全部挖掘出来，并工工整整地放在那里，欢迎别人来查看&#8230;&#8230;也难怪八卦见长的天涯用户将这一功能评为&#8220;抓三利器！&#8221;。一方面功能过于强大，超出用户的常识、超出用户认知范围，另一方面QQ圈子团队未能预估用户的反应、没有安排足够的用户引导，结果引起大面积恐慌。</div>
<div>&#160;</div>
<div>由于QQ圈子产品团队在产品定位、用户引导等方面缺乏同理心，导致误判用户心态，上线时才会发生拿自己的卖点、吓坏自己的用户这种怪事。</div>
<div>&#160;</div>
<div>同理心，也被描述为换位思维、感同身受、设身处地，即站在别人立场上思考，了解别人的感受。对产品设计者而言，同理心是一项至关重要的基本能力，它帮助设计者了解用户的真实想法、并最终设计出符合用户需要的产品。一个人的同理心不仅来自性格、文化、教育、家庭，也来自工作中的不断训练。</div>
<div>&#160;</div>
<div>该怎么提升自己的同理心，避免出现QQ圈子那种尴尬呢？日常工作中，产品经理、产品设计师们可注意以下方面：</div>
<div>&#160;</div>
<div>[......]</div><p class='read-more'><a href='http://nishuang.de/archives/3600'>继续阅读</a></p>]]></description>
			<content:encoded><![CDATA[<p>前几天QQ圈子公测，引发用户大恐慌，这又让我想起&ldquo;同理心&rdquo;这个老话题。（本文适合产品经理、产品设计师，技术人员也可以参考）</p>
<div>&nbsp;</div>
<div><img alt="" class="alignnone size-full wp-image-3601" height="" src="http://img.nishuang.de/wp/qq_quan_zi.jpg" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; width: 500px; height: 260px;border-color:#333; " title="QQ圈子" width="" /></div>
<div>&nbsp;</div>
<div>这次公测的QQ圈子，某些方面比较缺心眼。以其杀手级功能为例：QQ圈子把用户含糊的&ldquo;弱关系&rdquo;数据，整理成清晰的&ldquo;强关系&rdquo;，并直观地呈现给用户。大量用户惊恐地发现：自己没有进行任何主动操作、没进行任何授权，腾讯已经把包括&ldquo;我的小学同学女友的老师&rdquo;在内的资料全部挖掘出来，并工工整整地放在那里，欢迎别人来查看&hellip;&hellip;也难怪八卦见长的天涯用户将这一功能评为&ldquo;抓三利器！&rdquo;。一方面功能过于强大，超出用户的常识、超出用户认知范围，另一方面QQ圈子团队未能预估用户的反应、没有安排足够的用户引导，结果引起大面积恐慌。</div>
<div>&nbsp;</div>
<div>由于QQ圈子产品团队在产品定位、用户引导等方面缺乏同理心，导致误判用户心态，上线时才会发生拿自己的卖点、吓坏自己的用户这种怪事。</div>
<div>&nbsp;</div>
<div>同理心，也被描述为换位思维、感同身受、设身处地，即站在别人立场上思考，了解别人的感受。对产品设计者而言，同理心是一项至关重要的基本能力，它帮助设计者了解用户的真实想法、并最终设计出符合用户需要的产品。一个人的同理心不仅来自性格、文化、教育、家庭，也来自工作中的不断训练。</div>
<div>&nbsp;</div>
<div>该怎么提升自己的同理心，避免出现QQ圈子那种尴尬呢？日常工作中，产品经理、产品设计师们可注意以下方面：</div>
<div>&nbsp;</div>
<div><span id="more-3600"></span></div>
<div>&nbsp;</div>
<div><strong>1，保持谦卑，尊重用户</strong></div>
<div>&nbsp;</div>
<div>你是海归博士、你买了apple所有最新产品、你的产品逻辑滴水不漏连最聪明的工程师也啧啧称奇&hellip;&hellip;So what？和用户交流时，你只是普通的工作人员，那些看起来木木的普通用户，才是你真正的衣食父母。抛开居高临下的优越感，真诚地与用户平视，你才有可能感同身受。</div>
<div>&nbsp;</div>
<div><strong>2，用户的KPI是快乐</strong></div>
<div>&nbsp;</div>
<div>你背多少KPI、你竞争对手比你快多少、你同事怎么死活不合作&hellip;&hellip;那都是你的痛苦，用户压根儿不在乎。用户只是来玩的，别拿你的需要假装用户的需要，你完成多少KPI、用户不会得到同比例的快乐。所谓换位思维，记得先交换价值观。</div>
<div>&nbsp;</div>
<div><strong>3，避免先入为主</strong></div>
<div>&nbsp;</div>
<div>产品从设计、开发到上线，短则数月、长则数年，产品团队难免形成思维定式，认为全世界都这么想。不妨以QQ圈子为例，产品团队八成觉得&ldquo;算法是核心，其他小意思&rdquo;，殊不知用户看到产品，第一反应是&ldquo;秘密很重要，这下曝光了&rdquo;。先认定自己不了解用户，再试着体会用户的想法。</div>
<div>&nbsp;</div>
<div><strong>4，多用常识思考，少用专业技能思考</strong></div>
<div>&nbsp;</div>
<div>所谓常识，是大多数人已经认同的基本知识，每个人生活中都会遇到不明白的事情，每到此时，我们都会照以往的常识来作判断。比如QQ圈子，用户虽然从未见过这样的产品，但这不妨碍用户以生活常识来描述QQ圈子，说&ldquo;象进了公安局档案室&rdquo;。如果QQ圈子的产品团队，能用公安局、档案这些常识作参考，去揣摩分析和理解用户心态，相信他们会把产品策略做得更人性。和别人说事，得用他能听懂的话；揣摩别人的心思，也得用他自己的语言；用常识去琢磨用户心态，可以了解普通用户的心思。</div>
<div>&nbsp;</div>
<div>日积月累，你也可以善解人意。</div>
]]></content:encoded>
			<wfw:commentRss>http://nishuang.de/archives/3600/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[有关设计] 新浪的“屏蔽微博”功能</title>
		<link>http://nishuang.de/archives/3592</link>
		<comments>http://nishuang.de/archives/3592#comments</comments>
		<pubDate>Tue, 15 Nov 2011 19:00:22 +0000</pubDate>
		<dc:creator>倪爽</dc:creator>
				<category><![CDATA[工作]]></category>
		<category><![CDATA[sns]]></category>
		<category><![CDATA[产品设计]]></category>
		<category><![CDATA[微博]]></category>

		<guid isPermaLink="false">http://nishuang.de/?p=3592</guid>
		<description><![CDATA[<p>今天，新浪微博推出了一个有特色的新功能，官方介绍是：不想看到TA的微博，但碍于某些原因又不方便取消关注怎么办？微博功能新推荐：屏蔽微博功能。您可在微博首页直接点叉屏蔽某位关注对象的微博。屏蔽后，系统将屏蔽该用户的新微博。从线上的反馈来看，相当比例的用户挺喜欢这个功能。</p>
<p>知乎上有人问“你觉得新浪微博“关注但屏蔽某人的微博进入时间线”的功能怎么样？”（<a href="http://www.zhihu.com/question/19916699">http://www.zhihu.com/question/19916699</a>）</p>
<p><strong>从产品设计的角度，我是这么回答的：[......]</strong></p><p class='read-more'><a href='http://nishuang.de/archives/3592'>继续阅读</a></p>]]></description>
			<content:encoded><![CDATA[<p>今天，新浪微博推出了一个有特色的新功能，官方介绍是：不想看到TA的微博，但碍于某些原因又不方便取消关注怎么办？微博功能新推荐：屏蔽微博功能。您可在微博首页直接点叉屏蔽某位关注对象的微博。屏蔽后，系统将屏蔽该用户的新微博。从线上的反馈来看，相当比例的用户挺喜欢这个功能。</p>
<p>知乎上有人问“你觉得新浪微博“关注但屏蔽某人的微博进入时间线”的功能怎么样？”（<a href="http://www.zhihu.com/question/19916699">http://www.zhihu.com/question/19916699</a>）</p>
<p><strong>从产品设计的角度，我是这么回答的：<span id="more-3592"></span></strong></p>
<ol>
<li>这是一个合情合理的功能。有了它，新浪“平均粉丝数”等等商业数据更好看了、媒体特征更强烈了、市值自然更高；同时，用户也解决了面子问题 &#8211; 我相信前者是新浪的初衷；</li>
<li>每个功能，都会带来一堆新问题：提供“关注但不订阅”按钮好吧？取消关注时提示“你是要取消呢？还是只是不想听他啰嗦呢”好吧？为喜欢阅读但不喜欢被打搅的人提供“订阅但不关注”功能好吧？对了，我屏蔽了搓人的消息、但我还能看到朋友转发搓人的消息，不如也屏蔽了好吧？！</li>
<li>如果一个功能看起来既可以添加、也可以不添加，那么新浪一定选择添加两个功能。让我们一起期待屏蔽功能的下文；</li>
<li>通过叉掉一条消息的方式，屏蔽一个用户（而不是直接对用户头像、主页进行操作），这违背产品设计常识，这种只在乎结果、不在乎方式的做法很有新浪特色；</li>
<li>新浪永远只有最重要的功能，没有一般的、次要的、不重要的功能，天天用的、有时用的、极少用的，什么功能新浪都平等地放在用户面前。屏蔽功能没有改变这一“平衡”。</li>
</ol>
<p>小结：<strong>理由很充分。处理方式很不舒服</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://nishuang.de/archives/3592/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>解读2011新版Facebook产品设计(上)</title>
		<link>http://nishuang.de/archives/3589</link>
		<comments>http://nishuang.de/archives/3589#comments</comments>
		<pubDate>Fri, 23 Sep 2011 08:31:52 +0000</pubDate>
		<dc:creator>倪爽</dc:creator>
				<category><![CDATA[工作]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[sns]]></category>
		<category><![CDATA[产品设计]]></category>

		<guid isPermaLink="false">http://nishuang.de/archives/3589</guid>
		<description><![CDATA[<p>9月22日的Facebook F8开发者大会上，Facebook正式对外发布了其新产品。2011年的Facebook新产品主要包括：能够记录一生的Timeline、能创造更多信息的Any Verb、能接入更多信息源的新Open Graph、以及可显示各种信息的Ticker。</p>
<p>业界和媒体正从各自角度解[......]</p><p class='read-more'><a href='http://nishuang.de/archives/3589'>继续阅读</a></p>]]></description>
			<content:encoded><![CDATA[<p>9月22日的Facebook F8开发者大会上，Facebook正式对外发布了其新产品。2011年的Facebook新产品主要包括：能够记录一生的Timeline、能创造更多信息的Any Verb、能接入更多信息源的新Open Graph、以及可显示各种信息的Ticker。</p>
<p>业界和媒体正从各自角度解读Facebook新产品，这里从我从事的产品设计角度，说说Facebook的新产品。文章分两部分，分别说说这个产品设计的目的、以及方法。欢迎各位一起交流，我的微博地址是：<a title="倪爽的微博" href="http://weibo.com/nishuang" target="_blank">weibo.com/nishuang</a>。</p>
<p><strong>记录一生的Timeline</strong></p>
<p><a href="http://nishuang.de/files/2011/09/new_facebook_timeline.jpg"><img style="border-bottom: 0px;border-left: 0px;padding-left: 0px;padding-right: 0px;border-top: 0px;border-right: 0px;padding-top: 0px" border="0" alt="new_facebook_timeline" src="http://nishuang.de/files/2011/09/new_facebook_timeline_thumb.jpg" width="550" height="364" /></a></p>
<p>我们日常所说Timeline，一般指feed，即所有来自我朋友的消息；Facebook的Timeline，是个人主页（Profile）的一部分，即所有关于我的消息。</p>
<p>MySpace之类古典社交网站上，用户胡乱发布信息、并胡乱显示在主页上；而Facebook等社交网站里，系统从你注册帐号之后，有序记录你发布的信息，以及你从游戏、应用、like里产生的各种数据，一并显示在你的主页里。</p>
<p>新版Facebook把这种记录再延伸了一步：可以记录你注册之前的信息，哪怕是你出生那天的信息，Facebook用一个精巧设计的时间轴，展示你一生的各种信息。</p>
<p><strong>Why</strong>？－Timeline改变的规则、改进的设计，目的都是一个：鼓励你创造更多信息。</p>
<p><strong>创造更多信息的“新Like”</strong></p>
<p>在古典社交网站年代，你得动手创作每一个信息：一篇博客、一张图片、一句留言；Facebook年代里，你的很多信息无需你动手创作，你玩的游戏、使用的APP、参加的活动……你的行为自动产生了信息，记录在你的名下－尤其是Like功能出现之后，Facebook把用户创造信息的难度降到了最低：你点一下就好了。</p>
<p><a href="http://nishuang.de/files/2011/09/new_facebook_like.jpg"><img style="border-bottom: 0px;border-left: 0px;padding-left: 0px;padding-right: 0px;border-top: 0px;border-right: 0px;padding-top: 0px" border="0" alt="new_facebook_like" src="http://nishuang.de/files/2011/09/new_facebook_like_thumb.jpg" width="550" height="294" /></a></p>
<p>Twitter有RT、Google有+1，二者与Like作用相似，在新版中，Facebook用“Any Verb”创造了“新Like”：你可以用任何动词、对任何东西做动作－－什么都可以点、怎么点都OK，随便点一下、立刻为你产生一条新信息。</p>
<p><strong>Why</strong>？－如果Timeline能为某用户增添30%的新信息，那么新Like也许能帮用户多产生3倍、5倍的信息，还是那个目的：帮助你创造更多信息。</p>
<p><strong>接入更多信息源的新Open Graph</strong></p>
<p>通俗点说，Open Graph对用户的作用是：导入你在其他网站的数据，显示在Facebook里。</p>
<p>Open Graph是Facebook作为平台的镇宅之宝，新Open Graph增加了信息来源，目前可见的新信息来源有音乐网站、视频网站、新闻网站。新Open Graph还简化了APP和其他信息源的接入方法，相信今后的大部分接入，会简化到随便点点－瞬间接入外部网站的信息、以及外部网站的用户关系。</p>
<p><a href="http://nishuang.de/files/2011/09/new_facebook_open_graph_music.jpg"><img style="border-bottom: 0px;border-left: 0px;padding-left: 0px;padding-right: 0px;border-top: 0px;border-right: 0px;padding-top: 0px" border="0" alt="new_facebook_open_graph_music" src="http://nishuang.de/files/2011/09/new_facebook_open_graph_music_thumb.jpg" width="550" height="364" /></a>    <br /><font size="2">接入的音乐网站</font></p>
<p><a href="http://nishuang.de/files/2011/09/new_facebook_open_graph_spotify.jpg"><img style="border-bottom: 0px;border-left: 0px;padding-left: 0px;padding-right: 0px;border-top: 0px;border-right: 0px;padding-top: 0px" border="0" alt="new_facebook_open_graph_spotify" src="http://nishuang.de/files/2011/09/new_facebook_open_graph_spotify_thumb.jpg" width="550" height="364" /></a>    <br /><font size="2">好友正在收听的歌曲</font></p>
<p>Facebook还改进了用户共享信息的方式，增加了同步欣赏功能。以前只能简单显示一句“在××游戏里得到了◎◎”，现在你可以看到好友在听什么歌、点一下这首歌，你立刻和他开始欣赏同一首歌、完全同步－那个华丽的海豚音出现之后，你俩同时动词了。激动吧？用户会爱死这些新玩法，并随之产生更多新信息。</p>
<p><strong>Why？</strong>－基于Open Graph接入信息，可以帮助Facebook积累更大数量级的用户信息。按这个趋势，下一步（3、5年内），连你家冰箱的数据都能导入Facebook。</p>
<p><strong>显示各种信息的Ticker</strong></p>
<p>Facebook里的用户信息太多了，好东西、差东西、屎东西，都被淹没在信息的洪流里啦！简单说，Ticker在你页面上单独列出一小块区域，专门显示一些有意思、有价值、且容易被错过的信息－比如你的好友正在听什么歌。</p>
<p><a href="http://nishuang.de/files/2011/09/new_facebook_ticker.jpg"><img style="border-bottom: 0px;border-left: 0px;padding-left: 0px;padding-right: 0px;border-top: 0px;border-right: 0px;padding-top: 0px" border="0" alt="new_facebook_ticker" src="http://nishuang.de/files/2011/09/new_facebook_ticker_thumb.jpg" width="550" height="364" /></a></p>
<p>信息过载是所有现代SNS的通病，Ticker是帮助用户过滤信息、获取信息的一种方式。它和新设计的Timeline一样，帮助页面承载更多信息、帮助用户更简单地阅读信息。</p>
<p><strong>Why？</strong>－既然你能够阅读更多信息，那么你就不怕创造更多信息。仍然是那个目的：创造更多信息。</p>
<p><strong>然后呢？</strong></p>
<p>综合以上解读，我们不难发现：新版Facebook的主要意图，都围绕着产生更多信息。但是“产生更多信息”只是方法，并非最终目的。</p>
<p>Twitter、Google、Facebook都在使劲积累信息。三者不同在于：Twitter象个广告公司，只知道你喜欢什么、不清楚你是谁。Google是拥有太多数据的工程师，不清楚你是谁、大概知道你喜欢什么、勉强知道你和谁有关－这二者都难以充分利用掌握的大量信息。</p>
<p>而Facebook从开始之日起，就是洞察人心的生意人，他们事无巨细地分析用户关系、发掘用户信息的价值。只有Facebook能利用手头的信息，卖出更多广告，并且每个广告都是量身定做的、由不得你反抗<strong>。</strong></p>
<p>Facebook的目的向来很明确：<strong>丧心病狂地将围绕用户的各种信息转化为广告、销售</strong>。</p>
<p>这些即将上线的新产品，将帮助Facebook更接近自己的目的。毫无疑问，Facebook将因此更强大。或者说更邪恶。</p>
]]></content:encoded>
			<wfw:commentRss>http://nishuang.de/archives/3589/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>[有关设计] 都来学一点跨领域的技能</title>
		<link>http://nishuang.de/archives/3214</link>
		<comments>http://nishuang.de/archives/3214#comments</comments>
		<pubDate>Sun, 02 Aug 2009 10:28:13 +0000</pubDate>
		<dc:creator>倪爽</dc:creator>
				<category><![CDATA[工作]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[产品经理]]></category>
		<category><![CDATA[产品设计]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://nishuang.de/archives/3214</guid>
		<description><![CDATA[<p><strong>要不要学</strong></p>
<p>产品设计圈子里，不时提及这样的问题：产品经理要不要学设计？或者：设计师要不要学技术？</p>
<p>这类问题既然能问出来，答案已经挺清楚：要学。大家反复争论的，其实是与之相关的两个问题：怎么学？学多少？</p>
<p><strong>学多少</strong>？</p>
<p>普通人掌握一门技能，一般经过了解、理解、熟练、精通这些过程。</p>
<p> [......]</p><p class='read-more'><a href='http://nishuang.de/archives/3214'>继续阅读</a></p>]]></description>
			<content:encoded><![CDATA[<p><strong>要不要学</strong></p>
<p>产品设计圈子里，不时提及这样的问题：产品经理要不要学设计？或者：设计师要不要学技术？</p>
<p>这类问题既然能问出来，答案已经挺清楚：要学。大家反复争论的，其实是与之相关的两个问题：怎么学？学多少？</p>
<p><strong>学多少</strong>？</p>
<p>普通人掌握一门技能，一般经过了解、理解、熟练、精通这些过程。</p>
<p> <span id="more-3214"></span>
<p>学会所有相关技能的成本较高，所以正常情况下，现实的方法是&#8221;按需学习&#8221;。</p>
<p>比如产品经理这种综合性工作，需要广泛了解相关领域，并至少理解其中某些领域。设计师是流程中一个环节，设计师需要了解和自己衔接的上下游领域，理解那些影响交接的关键点。而工程师到市场这种跨度较大的情况，有所了解、并且随时学习，也就足以胜任了。</p>
<p>什么叫做了解？－－你听得懂同事说的是什么。什么叫做理解呢？－－你明白同事为什么这么说。如果和同事交流时，你脑子里有很多个&#8221;啊？&#8221;，那么说明你对他们的技能，还学得不够。如果某天你发现，自己理解并熟练掌握了某个相关领域技能，那么恭喜你，你已经具备了跨领域的竞争力。</p>
<p><strong>怎么学</strong>？</p>
<p>每个人有自己的学习方法，不多说。这里说说怎么降低跨领域学习的难度。</p>
<p>一是事先发现自己的短处。某位严谨的工程师缺想象力，某位浪漫的设计师没有逻辑性，这就是短处。扬长避短可以大大减少学习难度。</p>
<p>二是从具体实例回头去补充理论知识。学习其他领域知识，最大难度在于无法在有限时间内，完成基础知识到实际应用的积累，无法循序渐进地形成知识体系。所以学习其他领域知识，有点象学口语：先把嘴皮子说利索了，回头再补语法也来得及。</p>
<p>三是利用身边的老师。我们的身边有各种熟练、精通某领域的专家，你要做的只是一句&#8221;请教……&#8221;</p>
<p>四是好心情。看看这两幅照片，相信你一下就记住了两个新知识：现在的&lt;img&gt;也需要关门，z-index，数字越大、越在上面（其实z-index还可以是负数，详情去请教身边的前端工程师吧）。</p>
<p><img src="http://img.nishuang.de/wp/html_tag_img.jpg" height="290" alt="html_tag_img.jpg" width="499" /></p>
<p><img src="http://img.nishuang.de/wp/html_tag_z_index.jpg" height="414" alt="html_tag_z-index.jpg" width="500" /></p>
<p>照片出处：<a href="http://www.flickr.com/photos/exey/" target="_blank">在这里</a> &gt;&gt;</p>
<p>欢迎交流，请自行穿越、自行翻越，到遥远深邃的<a href="http://twitter.com/nishuang" target="_blank">twitter上follow我</a>。</p>
<p></p>
]]></content:encoded>
			<wfw:commentRss>http://nishuang.de/archives/3214/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>[有关设计] 错误设计导致错误操作的问题</title>
		<link>http://nishuang.de/archives/3213</link>
		<comments>http://nishuang.de/archives/3213#comments</comments>
		<pubDate>Fri, 24 Jul 2009 16:11:17 +0000</pubDate>
		<dc:creator>倪爽</dc:creator>
				<category><![CDATA[工作]]></category>
		<category><![CDATA[交互]]></category>
		<category><![CDATA[产品设计]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://nishuang.de/archives/3213</guid>
		<description><![CDATA[<p><strong>问题开始于抱怨</strong></p>
<p>同事姐姐在9911上抱怨：&#8221;<span>绝大多数出租车司机，都无法区别空调温度高低和风量大小这两个不同概念，每次我说&#8217;能否把空调温度调高点&#8217;，90%的司机会伸手把风量从3扭到1档，而不是把温度从蓝色区域往蓝红渐变方向调高。产品设计的问题？&#8221;</span></p>
<p><img src="http://img.nishuang.de/wp/ac_control_taxi.jpg" height="206" alt="ac_control_taxi.jpg" width="400" /></p>

<p>这个问题很有意思。在互联网产品设计中，错误设计导致错误操作的事情很常见，怎么从其他产品设计中学习经验呢？所以我一边等车，一边分析产生这一现象的可能原因。</p>
<p> [......]</p><p class='read-more'><a href='http://nishuang.de/archives/3213'>继续阅读</a></p>]]></description>
			<content:encoded><![CDATA[<p><strong>问题开始于抱怨</strong></p>
<p>同事姐姐在9911上抱怨：&#8221;<span>绝大多数出租车司机，都无法区别空调温度高低和风量大小这两个不同概念，每次我说&#8217;能否把空调温度调高点&#8217;，90%的司机会伸手把风量从3扭到1档，而不是把温度从蓝色区域往蓝红渐变方向调高。产品设计的问题？&#8221;</span></p>
<p><img src="http://img.nishuang.de/wp/ac_control_taxi.jpg" height="206" alt="ac_control_taxi.jpg" width="400" /></p>
</p>
<p>这个问题很有意思。在互联网产品设计中，错误设计导致错误操作的事情很常见，怎么从其他产品设计中学习经验呢？所以我一边等车，一边分析产生这一现象的可能原因。</p>
<p> <span id="more-3213"></span>
<p><strong>需求决定方法</strong></p>
<p>古人早说了：物中主人意，必是好东西。 改进用户体验，得从 了解用户需求开始。</p>
<p>油价高涨，司机师傅首要需求是省钱。也许调温比调风速更耗油？这种假设貌似比较牵强。</p>
<p><strong>形式对应使用方式</strong></p>
<p>有凹坑的按钮是按的，有纹路的按钮是转的，下面有槽的按钮是滑动的…按钮的样子，对应它的使用方式。</p>
<p>这是我想到的第二组原因：汽车空调风扇开关，和温控节开关，也许形式有什么不同？（正在阅读的您，不妨也在脑子回想一下这两种开关的外观）大部分汽车上，它们都是圆的、把手都是转动的、大小基本一致、位置非常接近……乍一看很相似啊！不过风扇开关和温控开关，设计上其实有很大差别：前者有刻度，后者连续变化。风扇有1、2、3档，档是一个绝对的概念，3档对应的风速永远那么大。而温控开关属于无级调整，只有相对的大小，转一下，既没法估计&#8221;变大了多少&#8221;、也没法了解&#8221;现在有多大&#8221;。</p>
<p>不同设计的开关，对应不同的用法，司机师傅选择有刻度的风扇开关，放弃无刻度的温控开关，这种用法一定有它好处。</p>
<p>用有刻度的开关，好处在于心里有数，心里有数意味着安全，安全意味着可以长期反复操作。汽车如此，网站也一样。</p>
<p><strong>环境改变使用方式</strong></p>
<p>想到此，我正好打到了空taxi。上车后，我立刻去看风扇和温控开关，一看我就笑了。</p>
<p>两种开关和我记忆中完全一致，操作方法的确不同，风扇开关的确有刻度、的确更容易操作，但我忘记一个重要外因：位置。风扇开关靠近司机，温控开关离手比较远。一边开车、一边看路、一边弄开关，使用环境的复杂，让开关位置变得很重要。所以我发现问题的第三种可能性是：顺手。</p>
<p>联系到我们的工作：拥挤的网页上，如果按钮位置不顺手，麻烦就大了。</p>
<p>至于我为什么看了就笑呢？－闭门造车、凭空设想、脱离群众的分析可笑呗。</p>
<p><strong>故事还没有结束</strong></p>
<p>回到最初的问题，问题答案是肯定的：司机师傅的操作，的确和产品设计有关。</p>
<p>第二天吃饭时，我向设计师、产品经理问了同样的问题，由此我们聊出去很远。其实还有很多疑问，比如：为什么不直接问师傅呢？会不会是某种行业习惯呢？也许是数据采样太少了呢？我很少让司机操作、而是自己动手，我是怎么做并且保证不被司机暴打呢？</p>
<p>不如您来告诉我更多问题、以及答案。请自行穿越、自行翻越，到遥远深邃的<a href="http://twitter.com/nishuang" target="_blank">twitter上follow我</a>。</p>
<hr />
<p><strong>附录</strong>：几种典型的汽车空调风扇、温控开关设计</p>
<p><img src="http://img.nishuang.de/wp/ac_control_vw.jpg" height="201" alt="ac_control_vw.jpg" width="400" /> <br />桑塔纳，风扇是有刻度的拨盘，温控是水平滑动的把手</p>
<p><img src="http://img.nishuang.de/wp/ac_control_jetta.jpg" height="168" alt="ac_control_jetta.jpg" width="400" /> <br />捷达的，温控器变成了圆形无刻度转盘。右侧四格的控制风向</p>
<p><img src="http://img.nishuang.de/wp/ac_control_hundai.jpg" height="202" alt="ac_control_hundai.jpg" width="400" /> <br />伊兰特，风扇开关被放到了中间</p>
<p><img src="http://img.nishuang.de/wp/ac_control_hundai_new.jpg" height="188" alt="ac_control_hundai_new.jpg" width="400" /> <br />新版伊兰特，依然保留了风扇的刻度</p>
<p><img src="http://img.nishuang.de/wp/ac_control_tt.jpg" alt="ac_control_tt.jpg" height="190" width="400" /> <br />Audi TT的不同设计：风扇无级变速，温控有刻度</p></p>
]]></content:encoded>
			<wfw:commentRss>http://nishuang.de/archives/3213/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>欢迎下载WordPress模板－7color 1.0版</title>
		<link>http://nishuang.de/archives/3184</link>
		<comments>http://nishuang.de/archives/3184#comments</comments>
		<pubDate>Tue, 09 Jun 2009 01:26:30 +0000</pubDate>
		<dc:creator>倪爽</dc:creator>
				<category><![CDATA[工作]]></category>
		<category><![CDATA[7color]]></category>
		<category><![CDATA[Theme]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[产品设计]]></category>

		<guid isPermaLink="false">http://nishuang.de/archives/3184</guid>
		<description><![CDATA[<p>感谢网友反馈，我对7color模板进行了修改。提交到WordPress后，审核已经通过。欢迎下载1.0版本的7color theme for WordPress。</p>
<p><a href="http://wordpress.org/extend/themes/7color" target="_blank" title="download!"><img src="http://wp-themes.com/wp-content/themes/7color/screenshot.png" height="225" alt="7color, theme for WordPress" width="300" /></a></p>
<p><a href="http://wordpress.org/extend/themes/7color" target="_blank" title="Download"><strong>Download</strong></a> &#124; <a href="http://wp-themes.com/7color/?TB_iframe=true&#38;width=1153&#38;height=562" target="_blank"><strong>Demo</strong></a></p>
<p><strong>Change Log</strong></p>
<p><strong>1.0.4</strong> 2009/7/12</p>
<ul>
<li>修改头部title在FireFox下无法点击的[......]</li></ul><p class='read-more'><a href='http://nishuang.de/archives/3184'>继续阅读</a></p>]]></description>
			<content:encoded><![CDATA[<p>感谢网友反馈，我对7color模板进行了修改。提交到WordPress后，审核已经通过。欢迎下载1.0版本的7color theme for WordPress。</p>
<p><a href="http://wordpress.org/extend/themes/7color" target="_blank" title="download!"><img src="http://wp-themes.com/wp-content/themes/7color/screenshot.png" height="225" alt="7color, theme for WordPress" width="300" /></a></p>
<p><a href="http://wordpress.org/extend/themes/7color" target="_blank" title="Download"><strong>Download</strong></a> | <a href="http://wp-themes.com/7color/?TB_iframe=true&amp;width=1153&amp;height=562" target="_blank"><strong>Demo</strong></a></p>
<p><strong>Change Log</strong></p>
<p><strong>1.0.4</strong> 2009/7/12</p>
<ul>
<li>修改头部title在FireFox下无法点击的错误</li>
</ul>
<p><strong>1.0.2</strong> 2009/7/10</p>
<ul>
<li>修改头部title行间距</li>
<li>修改sidebar list颜色</li>
</ul>
<p><strong>1.0.1</strong> 2009/6/10</p>
<ul>
<li>修改顶部导航栏上的rss连接地址</li>
</ul>
<p><strong>1.0</strong> 2009/6/7</p>
<ul>
<li>重新设计顶部搜索框和导航栏，解决了屏幕过窄时排版错位的问题</li>
<li>重新设计底部widget容器，固定宽度，解决了屏幕过窄时排版错位的问题</li>
<li>改进页面框架，解决IE6兼容性问题</li>
<li>footer部分增加版权信息</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://nishuang.de/archives/3184/feed</wfw:commentRss>
		<slash:comments>75</slash:comments>
		</item>
		<item>
		<title>WordPress模板－7color，设计背后的故事</title>
		<link>http://nishuang.de/archives/3182</link>
		<comments>http://nishuang.de/archives/3182#comments</comments>
		<pubDate>Tue, 02 Jun 2009 00:44:26 +0000</pubDate>
		<dc:creator>倪爽</dc:creator>
				<category><![CDATA[工作]]></category>
		<category><![CDATA[生活]]></category>
		<category><![CDATA[7color]]></category>
		<category><![CDATA[Theme]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[产品设计]]></category>

		<guid isPermaLink="false">http://nishuang.de/archives/3182</guid>
		<description><![CDATA[<p>本站使用的WordPress模板叫做<a href="http://wordpress.org/extend/themes/7color" target="_blank">7color</a>，<a href="http://wordpress.org/extend/themes/7color" target="_blank">欢迎各位下载</a>。</p>
<p>这个模板从年初开始设计，在线测试OK后，上周提交到WordPress，现在已通过审核。</p>
<p>说起这个模板，有点八卦。最初的设计图，是休假期间在我奶奶家画的，而CSS部分，基本上在叫做&#8221;雕刻时光&#8221;的咖啡店里完成。以下是写CSS过程中拍的照片。</p>
<p><img src="http://img.nishuang.de/wp/_igp5987.jpg" alt="_igp5987.jpg" height="521" width="772" /> <br />我的电脑，WAMP环境，<a href="http://nishuang.de/theme/7color" target="_blank">7color模板</a>第一次在本地测试。背景是南京的&#8221;雕刻时光&#8221;，靠窗男子是小老板。</p>
<p> [......]</p><p class='read-more'><a href='http://nishuang.de/archives/3182'>继续阅读</a></p>]]></description>
			<content:encoded><![CDATA[<p>本站使用的WordPress模板叫做<a href="http://wordpress.org/extend/themes/7color" target="_blank">7color</a>，<a href="http://wordpress.org/extend/themes/7color" target="_blank">欢迎各位下载</a>。</p>
<p>这个模板从年初开始设计，在线测试OK后，上周提交到WordPress，现在已通过审核。</p>
<p>说起这个模板，有点八卦。最初的设计图，是休假期间在我奶奶家画的，而CSS部分，基本上在叫做&#8221;雕刻时光&#8221;的咖啡店里完成。以下是写CSS过程中拍的照片。</p>
<p><img src="http://img.nishuang.de/wp/_igp5987.jpg" alt="_igp5987.jpg" height="521" width="772" /> <br />我的电脑，WAMP环境，<a href="http://nishuang.de/theme/7color" target="_blank">7color模板</a>第一次在本地测试。背景是南京的&#8221;雕刻时光&#8221;，靠窗男子是小老板。</p>
<p> <span id="more-3182"></span>
<p><img src="http://img.nishuang.de/wp/_igp5986.jpg" alt="_igp5986.jpg" height="520" width="772" /> <br />写模板时用的鼠标。效果不错，我已经推荐N个人购买了</p>
<p><img src="http://img.nishuang.de/wp/_igp5995.jpg" alt="_igp5995.jpg" height="520" width="772" /> <br />满满两书架的书，可惜我一直忙着弄模板，一本都没欣赏</p>
<p><img src="http://img.nishuang.de/wp/_igp6003.jpg" alt="_igp6003.jpg" height="521" width="772" /> <br />另外一个书架上的小鸭子和电子琴，怀旧尺度刚刚好</p>
<p><img src="http://img.nishuang.de/wp/_igp6015.jpg" alt="_igp6015.jpg" height="521" width="772" /> <br />咖啡馆门口的告示栏、广告栏，这就是古代的BBS</p>
<p><img src="http://img.nishuang.de/wp/_igp6021.jpg" alt="_igp6021.jpg" height="521" width="772" /> <br />咖啡馆入口</p>
<p>改日介绍设计制作这个模板的过程。</p>
<p><a href="http://wordpress.org/extend/themes/7color" target="_blank">欢迎各位下载</a>，欢迎留言交流。</p>
]]></content:encoded>
			<wfw:commentRss>http://nishuang.de/archives/3182/feed</wfw:commentRss>
		<slash:comments>39</slash:comments>
		</item>
		<item>
		<title>[用户体验] Bing Vs Google，使用速度对比测试，bing完败</title>
		<link>http://nishuang.de/archives/3181</link>
		<comments>http://nishuang.de/archives/3181#comments</comments>
		<pubDate>Mon, 01 Jun 2009 18:20:36 +0000</pubDate>
		<dc:creator>倪爽</dc:creator>
				<category><![CDATA[工作]]></category>
		<category><![CDATA[bing]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[产品设计]]></category>
		<category><![CDATA[用户体验]]></category>

		<guid isPermaLink="false">http://nishuang.de/archives/3181</guid>
		<description><![CDATA[<p>在网络产品用户体验中，最基础、最重要的因素是：<strong>速度</strong>。</p>
<p>微软的新搜索引擎必应bing.com刚刚推出，作为互联网产品设计、用户体验方面的从业人员，我（<a href="http://nishuang.de">http://nishuang.de</a>）对bing和google做了使用速度对比测试。此处&#8221;使用速度&#8221;的定义是：按照搜索引擎最基础[......]</p><p class='read-more'><a href='http://nishuang.de/archives/3181'>继续阅读</a></p>]]></description>
			<content:encoded><![CDATA[<p>在网络产品用户体验中，最基础、最重要的因素是：<strong>速度</strong>。</p>
<p>微软的新搜索引擎必应bing.com刚刚推出，作为互联网产品设计、用户体验方面的从业人员，我（<a href="http://nishuang.de">http://nishuang.de</a>）对bing和google做了使用速度对比测试。此处&#8221;使用速度&#8221;的定义是：按照搜索引擎最基础操作，测试其最基础页面的载入速度，并以此来模拟用户在实际使用中感受到的速度。</p>
<p>在我所做的对比测试中，选取了5个基础页面和1个特殊页面，它们分别是欢迎页、搜索网页结果页、搜索图片结果页、搜索视频结果页、搜索新闻结果页，以及bing引擎新增的ajax方式搜索更多图片页。为了模拟日常搜索的真实情况，我选择的搜索关键词是&#8221;单反 5D II&#8221;，这个关键词是一款数码相机。</p>
<p>测试使用FireFox浏览器＋FireBug，FireBug可以测试的数据有：页面http请求数，页面下载数据量，页面下载所需时间。测试过程中，每次载入页面之前先清空缓存。测试成对进行，每一对测试，先测试bing、再测试google，bing页面下载完成后、立即测试google，以最大限度减少网速变化带来的偏差。由于时间关系，测试比较简单，我只测试了一轮，请各位包涵。</p>
<p>为方便一般读者理解，我只采用了下载数据量、下载时间这两项数据。有数据有真相，最终测试结果是：</p>
<p><img src="http://img.nishuang.de/wp/0_graph.png" height="472" alt="Bing Vs Google，使用速度对比测试－测试结果" width="554" /></p>
<p>以上所有图形，都是越短越好。</p>
<p><strong>一共测试了5对、20个数据，使用速度对比测试结果是：bing VS google，0:20，bing完败</strong>。</p>
<p>另外我还测试了bing搜索引擎的一个特殊页面：bing搜索图片时，不需要象一般搜索引擎那样不断点&#8221;下一页&#8221;，bing采用了ajax，只要用户往下滚动页面，bing在页面下面自动添加一行新图片……相信会有很多用户觉得这个功能很酷，anyway，我所关注的是搜索引擎的最基础因素：速度。测试这一个特殊页面是，我不断往下滚动页面，直到bing返回第280张图片。这一过程，累计下载2MB数据，累计使用72秒。（下载这么多数据的感觉，以及内存和CPU的占用情况，不在本测试范围内，作为参考，我的个人感受是：卡。）</p>
<p>回到我测试的初衷：为什么专家、高手们测试bing和google的强大，而我要对比测试bing和google的速度呢？－因为速度是网络产品用户体验中，最基础、最重要的因素。</p>
<p>如果您对以上这个简单测试有什么想法，欢迎<a href="http://nishuang.de/archives/3181" target="_blank">留言讨论</a>，或者<a href="http://twitter.com/nishuang" target="_blank">在twitter上follow我</a>，给我反馈</p>
<p><strong>附件1</strong>：测试数据</p>
<p><img src="http://img.nishuang.de/wp/0_result.png" height="408" alt="Bing Vs Google，使用速度对比测试－测试结果" width="554" /></p>
<p><strong>附件2</strong>：测试截屏，左边bing、右边google，可以点开大图</p>
<p>1，欢迎页 <br /><a href="http://img.nishuang.de/wp/1_cover_bing.png" rel="lightbox"><img src="http://img.nishuang.de/wp/1_cover_bing.png" height="171" alt="Bing Vs Google，使用速度对比测试－测试结果" width="240" /></a> <a href="http://img.nishuang.de/wp/1_cover_google.png" rel="lightbox"><img src="http://img.nishuang.de/wp/1_cover_google.png" height="171" alt="Bing Vs Google，使用速度对比测试－测试结果" width="240" /></a></p>
<p>2，搜索网页 <br /><img src="http://img.nishuang.de/wp/2_text_bing.png" height="172" alt="Bing Vs Google，使用速度对比测试－测试结果" width="240" /> <img src="http://img.nishuang.de/wp/2_text_google.png" height="172" alt="Bing Vs Google，使用速度对比测试－测试结果" width="240" /></p>
<p>3，搜索图片 <br /><a href="http://img.nishuang.de/wp/3_images_bing.png" rel="lightbox"><img src="http://img.nishuang.de/wp/3_images_bing.png" height="172" alt="Bing Vs Google，使用速度对比测试－测试结果" width="240" /></a> <a href="http://img.nishuang.de/wp/3_images_google.png" rel="lightbox"><img src="http://img.nishuang.de/wp/3_images_google.png" height="172" alt="Bing Vs Google，使用速度对比测试－测试结果" width="240" /></a></p>
<p>4，搜索图片至第280个结果 <br /><a href="http://img.nishuang.de/wp/3_images_bing_280.png" rel="lightbox"><img src="http://img.nishuang.de/wp/3_images_bing_280.png" height="172" alt="Bing Vs Google，使用速度对比测试－测试结果" width="240" /></a> <a href="http://img.nishuang.de/wp/3_images_google_280.png" rel="lightbox"><img src="http://img.nishuang.de/wp/3_images_google_280.png" height="172" alt="Bing Vs Google，使用速度对比测试－测试结果" width="240" /></a></p>
<p>5，搜索视频 <br /><a href="http://img.nishuang.de/wp/4_videos_bing.png" rel="lightbox"><img src="http://img.nishuang.de/wp/4_videos_bing.png" height="172" alt="Bing Vs Google，使用速度对比测试－测试结果" width="240" /></a> <a href="http://img.nishuang.de/wp/4_videos_google.png" rel="lightbox"><img src="http://img.nishuang.de/wp/4_videos_google.png" height="172" alt="Bing Vs Google，使用速度对比测试－测试结果" width="240" /></a></p>
<p>6，搜索新闻 <br /><a href="http://img.nishuang.de/wp/5_news_bing.png" rel="lightbox"><img src="http://img.nishuang.de/wp/5_news_bing.png" height="172" alt="Bing Vs Google，使用速度对比测试－测试结果" width="240" /></a> <a href="http://img.nishuang.de/wp/5_news_google.png" rel="lightbox"><img src="http://img.nishuang.de/wp/5_news_google.png" height="172" alt="Bing Vs Google，使用速度对比测试－测试结果" width="240" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://nishuang.de/archives/3181/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>[有关设计] 微软的Bing会是一个好名字么？</title>
		<link>http://nishuang.de/archives/3178</link>
		<comments>http://nishuang.de/archives/3178#comments</comments>
		<pubDate>Fri, 29 May 2009 04:10:48 +0000</pubDate>
		<dc:creator>倪爽</dc:creator>
				<category><![CDATA[工作]]></category>
		<category><![CDATA[bing]]></category>
		<category><![CDATA[palm pre]]></category>
		<category><![CDATA[产品设计]]></category>
		<category><![CDATA[品牌]]></category>
		<category><![CDATA[手机]]></category>
		<category><![CDATA[营销]]></category>
		<category><![CDATA[黑莓]]></category>

		<guid isPermaLink="false">http://nishuang.de/archives/3178</guid>
		<description><![CDATA[<p>微软即将推出新的搜索品牌： <a href="http://www.bing.com/" target="_blank"><strong>Bing</strong></a> ，中文名为&#8221;<strong>必应</strong>&#8220;。</p>
<p>微软称Bing 为&#8221;决策引擎 Decision Engine&#8221;，瞄准4 大领域： <strong><span>购物、旅游、健康以及本地</span></strong> （<a href="http://livesino.net/archives/2065.live/trackback" target="_blank">via</a>）。这几个服务，是不是有点耳熟呢？没错，今天的bing，就是昨天的Kumo，[......]</p><p class='read-more'><a href='http://nishuang.de/archives/3178'>继续阅读</a></p>]]></description>
			<content:encoded><![CDATA[<p>微软即将推出新的搜索品牌： <a href="http://www.bing.com/" target="_blank"><strong>Bing</strong></a> ，中文名为&#8221;<strong>必应</strong>&#8220;。</p>
<p>微软称Bing 为&#8221;决策引擎 Decision Engine&#8221;，瞄准4 大领域： <strong><span>购物、旅游、健康以及本地</span></strong> （<a href="http://livesino.net/archives/2065.live/trackback" target="_blank">via</a>）。这几个服务，是不是有点耳熟呢？没错，今天的bing，就是昨天的Kumo，一个<a href="http://it.hexun.com/2009-05-25/118034228.html" target="_blank">被奚落</a>的日本式品牌名。微软希望用Bing来代替现有的Live Search品牌，对不太会起名字的微软来说，bing还真是个简短有趣的好名字，有了bing，原先繁复诡秘的Live Search Farecast，今天就成了简单直观的Bing Travel。</p>
<p><img src="http://img.nishuang.de/wp/bing.com_logo.jpg" height="167" alt="微软bing.com" width="300" /></p>
<p>从产品到商品，需要品牌设计，在品牌设计的诸多环节中，最基础一步：起个合适的名字。</p>
<p>关于起名字，先说个正面例子。palm上一个商品品牌叫做palm treo，在业务低落若干年后，palm洗心革面，推出新手机、新操作系统。OK，新东西需要新名字。新操作系统名字蛮简单：Web OS，web直指其网络特色；新手机叫什么好呢？palm找到命名公司Catchword。从内部的产品名nova开始，经过对几千个名称的取舍（包括命名要避开数以百计的法律障碍，还要关注全球适用性），最后的答案：<strong>Palm Prē</strong>（<a href="http://www.ifanr.com/2045" target="_blank">via</a>）。Catchword还真是起名字的专家，看看他们的广告语：<em>If you can dream it, we can name it. And give it wings</em>.</p>
<p><img src="http://img.nishuang.de/wp/palm_pre_2.jpg" height="326" alt="palm pre" width="300" /></p>
<p>接着是个谣传，还是palm，还是pre。作为万众期待的新智能手机，美国运营商激烈争夺发售权，最后Sprint获胜，AT&amp;T<a href="http://it.sohu.com/20090528/n264213058.shtml" target="_blank">只有眼馋</a>。据说，Sprint好容易拿到palm pre发售权后，做了匪夷所思的决定：把palm pre，改叫做<strong>Jones</strong>。wa！你是indiana jones还是jack jones啊？好在是个谣传，否则年轻貌美的女士们，每天贴身揣个jones，那还不窘死？相比之下，palm粉丝给palm pre起的中文名真不错：<strong>胖梨</strong>，非但听起来可爱，还直指手机市场上欺行霸市的那些水果：苹果、黑莓。</p>
<p>还有关于品牌的冷笑话，来自<strong>黑莓</strong>。黑莓品牌有两则冷笑话，一个关于名字－－黑莓用户在街上用黑莓，被路人搭讪：&#8221;你用的是蓝莓吧！&#8221;。另一笑话关于长相－－黑莓用户在街上用黑莓，被路人鄙视：&#8221;看旁边那个人用的山寨E71，丑死了&#8221;。其实黑莓很无辜啊，&#8221;黑莓&#8221;是个很贴切的好名字，来自早期黑莓产品的两大特点：黑色，象草莓籽一样密密麻麻的QWERTY键盘。</p>
<p>那么，回到微软的问题：Bing会是一个好名字么？放在微软手上，这个事还真不好说。一个公司，强大到可以抛弃<strong>live</strong>这么好的名称，显然有能力把bing推向全世界，显然也有能力把bing变成下一个live。</p>
<p>而且，即便bing是个好名字，并不等于bing将是个好品牌。即便bing是个好品牌，并不等于bing将是个用户喜欢的好产品。</p>
<p><a href="http://livesino.net/archives/2061.live/trackback" target="_blank">有关Bing品牌的其他八卦</a> &gt;&gt;</p>
]]></content:encoded>
			<wfw:commentRss>http://nishuang.de/archives/3178/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>[有关设计] 人性化的星星点点</title>
		<link>http://nishuang.de/archives/3139</link>
		<comments>http://nishuang.de/archives/3139#comments</comments>
		<pubDate>Mon, 11 May 2009 14:43:46 +0000</pubDate>
		<dc:creator>倪爽</dc:creator>
				<category><![CDATA[工作]]></category>
		<category><![CDATA[生活]]></category>
		<category><![CDATA[产品设计]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://nishuang.de/archives/3139</guid>
		<description><![CDATA[<p><strong>抽血</strong></p>
<p>上周体检，照例抽血。</p>
<p>早些年抽血，台词一般是大妈略带贬义说：&#8221;男同志，胆子那么小？&#8221;。再进化一点，医生会安慰一句&#8221;马上就好&#8221;，算不上体贴，但总算有点善意。感谢市场竞争、感谢私营医院的出现，终于出现了更人性化、更贴近普通人的抽血台词：&#8221;[......]</p><p class='read-more'><a href='http://nishuang.de/archives/3139'>继续阅读</a></p>]]></description>
			<content:encoded><![CDATA[<p><strong>抽血</strong></p>
<p>上周体检，照例抽血。</p>
<p>早些年抽血，台词一般是大妈略带贬义说：&#8221;男同志，胆子那么小？&#8221;。再进化一点，医生会安慰一句&#8221;马上就好&#8221;，算不上体贴，但总算有点善意。感谢市场竞争、感谢私营医院的出现，终于出现了更人性化、更贴近普通人的抽血台词：&#8221;疼吗？&#8221;，这一阶段，医院终于开始顾及用户的切身感受。</p>
<p>回到当日，扎针过程中，年轻貌美气质佳的女医生，忽然看着我眼睛问：&#8221;是不是很疼？&#8221;。没想到医生会这么问，一时间我不知道如何作答，只好含糊地说&#8221;OK啦&#8221;。</p>
<p><strong>查水表</strong></p>
<p>上班族，平日家里没人，查不了水表。</p>
<p>某天回家，门上有小纸条，标题斗大一个&#8221;水&#8221;字。正文说：因您工作忙，人不在家，所以我没法查水表，麻烦您自己查一下读数，然后打手机通知我，我的号码是某某某某。因为开头一句设身处地的&#8221;因您工作忙……&#8221;，我没顾上嘘嘘，立刻看水表、打电话、飞快搞定一切。</p>
<p>以前自来水行业，没有市场化意识，查水表师傅都异常冷酷。要么理直气壮数落用户，要么一言不发拿眼神杀人。</p>
<p><strong>红绿灯</strong></p>
<p>上班路上，我要经过两组人性化的红绿灯。</p>
<p>以前的红绿灯，不考虑细节，搞出很多白痴状况。比较典型一例在南京：两个路口相距50米，各有一组红绿灯，两组红绿灯之间不联动，如果运气不好，司机会连续被红绿灯堵两次……大约120秒。</p>
<p>现在这两组红绿灯，行人红灯提前亮、绿灯提前灭，意思是说：人比汽车慢，如果行人和汽车的红绿灯开关时间一致，那么行人很有可能被困在路中间。</p>
<p><strong>关门曲</strong></p>
<p>最后一个小细节，来自我们家附近的商场。</p>
<p>小时候，商场关门之前，会响起凛冽的电铃声，大家一听就明白：哦，马上打烊了。后来的商场，把电铃换作了悠扬的音乐，比如kenny G，在悠扬音乐中，有个略不耐烦的声音提醒：即将关门，请顾客们赶紧结束购物。</p>
<p>目前最新版的商场打烊提示语，大意如下：即将关门，不用紧张，您慢慢选购，我们等你走了再关门。</p>
<p><strong>至于我们</strong></p>
<p>有时候我挺惭愧，这些曾经嚣张的人，他们慢慢学会人性化。而我们，围绕着用户需求，创造出那么多不人性的产品。</p>
]]></content:encoded>
			<wfw:commentRss>http://nishuang.de/archives/3139/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[有关设计] 传说中的纸上线框图</title>
		<link>http://nishuang.de/archives/3068</link>
		<comments>http://nishuang.de/archives/3068#comments</comments>
		<pubDate>Sun, 10 May 2009 09:43:30 +0000</pubDate>
		<dc:creator>倪爽</dc:creator>
				<category><![CDATA[工作]]></category>
		<category><![CDATA[互联网]]></category>
		<category><![CDATA[产品设计]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://nishuang.de/archives/3068</guid>
		<description><![CDATA[<p>画线框图/原型图，是每个产品设计人员的基本功。</p>
<p>可以用绘制画线框图的软件工具很多，从word、ppt这样的办公软件，到PhotoShop、illustrator、visio之类的设计软件，当然还有专用的Balsamiq、Axure等等。</p>
<p>那么如何选择线框图/原型图工具呢？</p>
<ul>
<li><strong>目的决定方法</strong>：明确目的，[......]</li></ul><p class='read-more'><a href='http://nishuang.de/archives/3068'>继续阅读</a></p>]]></description>
			<content:encoded><![CDATA[<p>画线框图/原型图，是每个产品设计人员的基本功。</p>
<p>可以用绘制画线框图的软件工具很多，从word、ppt这样的办公软件，到PhotoShop、illustrator、visio之类的设计软件，当然还有专用的Balsamiq、Axure等等。</p>
<p>那么如何选择线框图/原型图工具呢？</p>
<ul>
<li><strong>目的决定方法</strong>：明确目的，按照目的选择－－不选好工具，选合适的工具</li>
<li><strong>结合自己的能力</strong>：产品人员各有专长，有些偏管理、有些偏设计、有些偏开发－－选一个能够扬长避短的工具</li>
<li><strong>习惯成自然</strong>：无论选择哪种工具，频繁地使用它、把它用在不同场合－－通过反复训练，掌握它</li>
</ul>
<p>此外，还有一组很常用的传统工具：<strong>纸</strong>、<strong>笔</strong>。</p>
<p>一些新的产品设计人员不太喜欢old school的办法，为什么有那么多强大工具，还要回到老土的笔和纸呢？不如看一下成功人士的实例。PhotoShop不能让你成为毕加索，word不能让你成为JK·罗琳，但毕加索一定画了成千上万张草稿，而JK·罗琳在纸上描绘出了你所熟悉的哈里·波特，你和成功人士的差别在于－－他们以简便的手段积累能力，而你把时间用来研究工具。</p>
<p>所以，请在产品设计中，特别是在学习和练习性质的简单设计中，充分利用手边的纸笔。</p>
<p>下面有两张比较详细的纸上线框图，来自<a href="http://culturedcode.com/things/" target="_blank">things</a>的开发公司。这两张图，显示了<a href="http://culturedcode.com/things/iphone" target="_blank">things iphone</a>版的产品设计，原图比较大，请点开图片看细节。</p>
<p><a href="http://img.nishuang.de/wp/thingstouch_interfacestilllife.jpg" target="_blank" rel="lightbox"><img src="http://img.nishuang.de/wp/thingstouch_interfacestilllife.jpg" height="320" alt="thingstouch-interfacestilllife.jpg" width="480" /></a></p>
<p><a href="http://img.nishuang.de/wp/thingstouch_papercollage.jpg" target="_blank" rel="lightbox"><img src="http://img.nishuang.de/wp/thingstouch_papercollage.jpg" height="388" alt="thingstouch-papercollage.jpg" width="480" /></a></p>
<p><a href="http://culturedcode.com/things/blog/2008/06/a-phone-an-ipod-an-internet-communicator-and-a-full-featured-task-manager.html" target="_blank">全文看这里</a> &gt;&gt;</p>
<p><img src="http://img.nishuang.de/wp/things_touch_screenshot_01.jpg" height="345" alt="things-touch-screenshot-01.jpg" width="240" /> <img src="http://img.nishuang.de/wp/zrclip_001p7156e7da.png" height="345" width="240" /></p>
<p>这是产品的实际界面。<a href="http://culturedcode.com/things/iphone/" target="_blank">Things iPhone更多界面见这里</a> &gt;&gt;</p>
<p>最终，Things得到的评价是：<em>Things definitely tops our list of GTD applications for the iPhone.</em></p>
<p class="zoundry_raven_tags">  <!-- Tag links generated by Zoundry Raven. Do not manually edit. http://www.zoundryraven.com -->  <span class="ztags"><span class="ztagspace">Flickr</span> : <a href="http://www.flickr.com/photos/tags/%E4%BA%92%E8%81%94%E7%BD%91" class="ztag" rel="tag">互联网</a>, <a href="http://www.flickr.com/photos/tags/%E4%BA%A7%E5%93%81%E8%AE%BE%E8%AE%A1" class="ztag" rel="tag">产品设计</a>, <a href="http://www.flickr.com/photos/tags/%E8%AE%BE%E8%AE%A1" class="ztag" rel="tag">设计</a></span> </p>
]]></content:encoded>
			<wfw:commentRss>http://nishuang.de/archives/3068/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>[网络传播] twitter遭黑客侵入，泄露26张管理界面截图</title>
		<link>http://nishuang.de/archives/2888</link>
		<comments>http://nishuang.de/archives/2888#comments</comments>
		<pubDate>Wed, 06 May 2009 14:00:33 +0000</pubDate>
		<dc:creator>倪爽</dc:creator>
				<category><![CDATA[工作]]></category>
		<category><![CDATA[twitter]]></category>
		<category><![CDATA[互联网]]></category>
		<category><![CDATA[产品设计]]></category>
		<category><![CDATA[黑客]]></category>

		<guid isPermaLink="false">http://nishuang.de/archives/2888</guid>
		<description><![CDATA[<p>Twitter证实，已遭某不知名人士闯入并登入十个帐户，从法国博客网站贴出的屏幕画面照片看来，可能包括艺人布兰妮和艾什顿·库彻的帐户。</p>
<p>Korben博客和另一个网站贴出的13张屏幕画面照片，其中不但显示这些名人Twitter帐户的管理页面，还显示被他们打入黑名单的使用者清单页面，以及其他管理页面。</p>
[......]<p class='read-more'><a href='http://nishuang.de/archives/2888'>继续阅读</a></p>]]></description>
			<content:encoded><![CDATA[<p>Twitter证实，已遭某不知名人士闯入并登入十个帐户，从法国博客网站贴出的屏幕画面照片看来，可能包括艺人布兰妮和艾什顿·库彻的帐户。</p>
<p>Korben博客和另一个网站贴出的13张屏幕画面照片，其中不但显示这些名人Twitter帐户的管理页面，还显示被他们打入黑名单的使用者清单页面，以及其他管理页面。</p>
<p>实际流出的twitter管理界面截图不止13张，目前我拿到26张。以下是最重要的一张截图：</p>
<p><img src="http://img.nishuang.de/wp/twitter_admin.jpg" height="634" alt="twitter_admin.jpg" width="242" /></p>
<p>通过这张截图，结合其他具体界面截图，大致可以推测出twitter运营管理的一些想法。</p>
<p>而twitter被黑客侵入的原因也很冷幽默：技术上，这个办法叫做&#8221;社会工程学&#8221;、&#8221;社交工程学&#8221;，按照通俗的话来说，黑客猜到了twitter管理员所使用的密码。</p>
<p class="zoundry_raven_tags">  <!-- Tag links generated by Zoundry Raven. Do not manually edit. http://www.zoundryraven.com -->  <span class="ztags"><span class="ztagspace">Flickr</span> : <a href="http://www.flickr.com/photos/tags/twitter" class="ztag" rel="tag">twitter</a>, <a href="http://www.flickr.com/photos/tags/%E6%B3%84%E5%AF%86" class="ztag" rel="tag">泄密</a></span> </p>
]]></content:encoded>
			<wfw:commentRss>http://nishuang.de/archives/2888/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>[有关设计] 互联网产品设计的矛盾－－方法和能力</title>
		<link>http://nishuang.de/archives/2857</link>
		<comments>http://nishuang.de/archives/2857#comments</comments>
		<pubDate>Sat, 25 Apr 2009 10:01:34 +0000</pubDate>
		<dc:creator>倪爽</dc:creator>
				<category><![CDATA[工作]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[互联网]]></category>
		<category><![CDATA[产品设计]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://nishuang.de/archives/2857</guid>
		<description><![CDATA[<p>近期互联网行业，有若干和产品设计相关的新闻。</p>
<p><strong>这是一个好新闻，这不是一件好事</strong></p>
<p>新闻之一，关于设计师：《 <a href="http://c.chinavisual.com/2009/03/23/c56130/index.shtml" target="_blank"><span>Google顶尖设计师离职 撰文批评公司缺乏灵活性</span></a> 》。</p>
<p><img style="width: 300px;height: 367px;border: #000000 1px solid" src="http://img.nishuang.de/wp/google_Doug_Bowman_talking.jpg" alt="google_德格·鲍曼" width="300" height="367" /></p>
<p>照片上这位就是事主，Google首席视觉设计师：德格·鲍曼（ <a href="http://stopdesign.com/" target="_blank"><span>Doug Bowman</span></a> ）。</p>
<p>为什么世界一流的互联网设计师，指责世界一流的[......]</p><p class='read-more'><a href='http://nishuang.de/archives/2857'>继续阅读</a></p>]]></description>
			<content:encoded><![CDATA[<p>近期互联网行业，有若干和产品设计相关的新闻。</p>
<p><strong>这是一个好新闻，这不是一件好事</strong></p>
<p>新闻之一，关于设计师：《 <a href="http://c.chinavisual.com/2009/03/23/c56130/index.shtml" target="_blank"><span>Google顶尖设计师离职 撰文批评公司缺乏灵活性</span></a> 》。</p>
<p><img style="width: 300px;height: 367px;border: #000000 1px solid" src="http://img.nishuang.de/wp/google_Doug_Bowman_talking.jpg" alt="google_德格·鲍曼" width="300" height="367" /></p>
<p>照片上这位就是事主，Google首席视觉设计师：德格·鲍曼（ <a href="http://stopdesign.com/" target="_blank"><span>Doug Bowman</span></a> ）。</p>
<p>为什么世界一流的互联网设计师，指责世界一流的互联网公司？鲍曼批评google过分依赖数据。比如在两种蓝色中选择一种，必须以41种辅助色来佐证。又比如想调整3、4个像素，也被要求拿数据来证明其必要性。当数据变成所有设计的基础，这种情况下，设计师就无法做出大胆的决定，从而禁锢了人的设计思维。</p>
<p>以鲍曼为首的一批google设计师，矛头直指google美女副总裁玛丽萨·梅尔( <a href="http://www.google.cn/search?client=aff-os-worldbrowser&amp;forid=1&amp;ie=utf-8&amp;oe=UTF-8&amp;hl=zh-CN&amp;q=Marissa+Mayer" target="_blank"><span>Marissa Mayer</span></a> )，她是google用户体验方面的负责人。</p>
<p>美女副总裁玛丽萨尚未回应。之前，她曾阐释：&#8221;当我在做用户界面设计时，设计师会过来对我说，这里要用这种绿色，或另一种绿色，而我没有必要武断地作出决定，因为我只需要将它们都放在网页上，然后观察用户回馈数据，这样我们就可以通过用户的回馈来科学地证明哪种颜色更好。&#8221;</p>
<p>那么强调创造性的顶尖设计师，和依赖数据的美女副总裁，谁对？－－答案是：都对了。都错了。</p>
<p>一切要从数据调查说起……</p>
<p><strong>什么叫做用数字说话呢</strong></p>
<p>设计这种关乎感觉的事，什么叫做用数字说话呢？以快餐店为例，一个典型的数据调查是这样的：</p>
<p>有一天，麦当劳叔叔琢磨：咱们干快餐的，顾客吃饭速度越快、人流量越大、销售额越高，so，怎么让顾客赶紧滚蛋呢？于是他找到了科学家：</p>
<p>&#8220;王科学家，我怎么让顾客赶紧吃完走人呢？&#8221;<br />
&#8220;这个简单啊！红色能刺激神经，你把店堂刷成红色，顾客还没吃完，就想走人了&#8221;<br />
&#8220;这么简单？你不会骗人吧！&#8221;<br />
&#8220;我们拿数据说话！&#8221;科学家提供的方案是：&#8221;选两家店，一家刷成红色，一家刷成白色，天天数人头，三个月后再看数字，保准红店子里流动的人更多。&#8221;</p>
<p>于是麦大叔安排小伙子蹲在店门口数人头，三个月后，果然红店多接待了20％的顾客。再一问会计，果然红店多赚了20％还不止。这就是数据的力量。所以，麦当劳、肯德基、永乐豆浆……快餐店一律都是红色的。</p>
<p>互联网企业也用类似的方法，解决设计中的不确定因素。</p>
<p><strong>但是！</strong></p>
<p>被动地统计数据，并不能解决创造性问题。</p>
<p><img style="width: 300px;height: 237px;border: #000000 1px solid" src="http://img.nishuang.de/wp/Mcdonald_s_Drive_Thru.jpg" alt="麦当劳_得来速" width="300" height="237" /></p>
<p>比如&#8221;不下车（drive-through）&#8221;快餐店，顾客在车里接受服务。别管红色还是绿色，我们连店堂都不要了。这个违背常规的想法，一定是麦大叔他们扯蛋时忽然想到的。所以，数据统计的方法是对的，拍脑袋的能力也是对的。</p>
<p>但是两边都对的事情，怎么google美女总裁就给办砸了呢？</p>
<p>围绕互联网产品开发，有产品经理、设计师、工程师、客服各色人等。大家专长不同、方法不同、能力不同，吵架的事情，太常见了。所以需要谈判。如果双方说的有道理，形势当然僵持不下，谈判谈不下去怎么办呢！我们干互联网的，总不能撩衣服掏家伙吧？！这时候，就需要领导了。</p>
<p><img style="width: 300px;height: 300px;border: #000000 1px solid" src="http://img.nishuang.de/wp/google_Marissa_Mayer_seat.jpg" alt="google美女副总裁玛丽萨·梅尔" width="300" height="300" /></p>
<p><strong>现实环境里，难得到理想结果</strong></p>
<p>在一个理想的环境里，一位称职的google副总裁，大约会这么和首席设计师说话：</p>
<p>&#8220;虽然我们只用数据说话，但鲍老师您设计水准那是相当的高！（潜台词：别生气，我们还靠您混哪）&#8221;<br />
&#8220;玛丽萨姐您真会说话，老鲍我心领啦！（潜台词：嗯我留下来继续努力）&#8221;</p>
<p>可惜，现实中，google的美女和牛人都做错了。估计当时的情形，八成是这样：</p>
<p>&#8220;虽然鲍老师您设计水准那是相当的高，但我们只用数据说话！（潜台词：无所谓，不乐意你就滚蛋）&#8221;<br />
&#8220;玛丽萨姐您真会说话，老鲍我心领啦！（潜台词：嗯你们全家都是数据）&#8221;</p>
<p>虽然二者都没处理好，但考虑到领导和被领导的关系，美女玛丽莎显然错得更厉害。</p>
<p>谢谢google，给我们来了这么生动形象的一堂课。</p>
<p>网络转载，请注明出处：<a href="http://nishuang.de/archives/2857" target="_blank">http://nishuang.de/archives/2857</a>，传统媒体转载， <a href="http://nishuang.de/about" target="_blank"><span>请与我联系</span></a> 。</p>
<p><strong>最后附赠一个八卦：事情还没有结束</strong></p>
<p>那么鲍老师后来怎么样了呢？</p>
<p>鲍老师去了一家以短小、流行为特色的互联网公司：twitter，对了，就是每句话不超过140个字，连obama都在用的twitter。顺便做一小广告，欢迎<a href="http://twitter.com/nishuang" target="_blank">在twitter上follow我</a>。</p>
<p>然后，然后事情就黑色幽默了。</p>
<p>此后数天内，网上出现google收购twiiter的消息，消息连绵不绝至今。</p>
<p>如果交易成功，鲍老师将重回google怀抱。</p>
<p>（END）</p>
]]></content:encoded>
			<wfw:commentRss>http://nishuang.de/archives/2857/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
<!-- This Quick Cache file was built for (  nishuang.de/archives/tag/%e4%ba%a7%e5%93%81%e8%ae%be%e8%ae%a1/feed ) in 0.24816 seconds, on May 16th, 2012 at 1:37 pm UTC. -->
<!-- This Quick Cache file will automatically expire ( and be re-built automatically ) on May 16th, 2012 at 11:37 pm UTC -->
