<?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>阿石的日志</title>
	<atom:link href="http://www.ashnotes.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ashnotes.com</link>
	<description>关注产品（网站）策划、信息架构、网站分析、网站优化</description>
	<lastBuildDate>Thu, 04 Mar 2010 09:25:00 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>体验新版豆瓣</title>
		<link>http://www.ashnotes.com/exp-newer-douban/</link>
		<comments>http://www.ashnotes.com/exp-newer-douban/#comments</comments>
		<pubDate>Thu, 04 Mar 2010 07:04:59 +0000</pubDate>
		<dc:creator>ashnotes</dc:creator>
				<category><![CDATA[信息架构]]></category>
		<category><![CDATA[信息设计]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[豆瓣]]></category>

		<guid isPermaLink="false">http://www.ashnotes.com/?p=338</guid>
		<description><![CDATA[
在上一篇日志《豆瓣改版分析》中理了一下豆瓣改版的背景和原因，这次通过亲身体验来明晰新版豆瓣的亮点与瑕疵。
1 首页导航
彻底颠覆了旧版的传统二级导航，以弱化一级强化二级并中间横线分割的形式将社区、读书、电影、音乐等产品与其下面各自的子频道展开。这种导航设计其优点是迎合了“扩充产品线和深化产品服务”战略目的，以便于豆瓣运营人员对各自自产品深耕细作的同时，新用户和老用户各取所需，社区噪音不干扰原创积累；缺点是违背了导航设计的演化特征，固有的信息找寻路径要么新增一步、要么难以发现，让老用户一时无法接受，另外也让有的用户看上去觉得乱而晕。如下图豆瓣旧版导航与抬头新版导航对比

2 豆列调整
豆列调整无疑是这次新版豆瓣豆油们反应最强烈的。每个混合了书影音三类条目的豆列都会出现以下让用户指定豆列类型的情境。豆列这款产品设计的初衷是让用户整合个人偏好的主题，将散布于豆瓣千万书影音条目以豆列的形式串接在一起，深得豆油们喜爱，艺术的共通性是她们的信念！然而这次豆瓣改版将这些混合豆列指定类型，且在用户实施过程中出现条目丢失、清空等这样那样的bug，让豆油们骂声一片！针对豆列这种一分为三的意图，正如豆油樱桃程所质问调侃：
 “未来都是湿乎乎的了，豆瓣还想把自己榨的干巴巴的吗”

3 信息设计冗余
新版UI设计简洁、干净，信息密度分布适中，显得更加大气。但也有种种不合理的信息设计依然存在
例如 站内搜索中的站内搜索， 豆瓣的站内搜索一直为人诟病，但这种将自己弱点二次暴露的就少之又少了。如豆瓣各分站点如音乐站内搜索的冗余设计，对用户来说搜索功能看不出差异 性，画 圈处1完全可以去掉。尤其是令人不解的是豆瓣音乐画圈处1还有radio筛选选项，多之又多，令人不解！


豆瓣每次改版都能给业界带来震撼，更多的是前期招致大量豆油愤青的辱骂、甚至是抵制！从这次改版的“一天之内的惊鸿一瞥到小规模的A/B test” 发布模式也可以看出豆瓣团队的成熟，越来越学会倾听用户的声音和心跳。产品设计既需要满足用户的需求，也要照顾商业利益的发展，两者相辅相成，内容定中间。从豆瓣官方博客开始新一轮规模化招人可以看出，我们相信阿北有实力为我们提供更丰富、更实用的豆瓣式服务，总之豆瓣的演化进程值得期待。
附上新版豆瓣信息架构，以便大家快速了解查阅！（点击URL链接查看http://mind42.com/pub/mindmap?mid=b8a7d1b7-f385-47f0-ac4d-98bf65e58c4f

]]></description>
			<content:encoded><![CDATA[<div id="_mcePaste"><a href="http://www.ashnotes.com/wp-content/uploads/2010/02/新版豆瓣2.png"><img class="aligncenter size-full wp-image-335" title="新版豆瓣_阿石的日志" src="http://www.ashnotes.com/wp-content/uploads/2010/02/新版豆瓣2.png" alt="" width="630" height="117" /></a></div>
<div>在上一篇日志《<a href="http://www.ashnotes.com/newer-douban-analysis/" target="_blank">豆瓣改版分析</a>》中理了一下豆瓣改版的背景和原因，这次通过亲身体验来明晰新版豆瓣的亮点与瑕疵。</div>
<div id="_mcePaste"><strong>1 首页导航</strong></div>
<div id="_mcePaste">彻底颠覆了旧版的传统二级导航，以弱化一级强化二级并中间横线分割的形式将社区、读书、电影、音乐等产品与其下面各自的子频道展开。这种导航设计其优点是迎合了“扩充产品线和深化产品服务”战略目的，以便于豆瓣运营人员对各自自产品深耕细作的同时，新用户和老用户各取所需，社区噪音不干扰原创积累；缺点是违背了导航设计的演化特征，固有的信息找寻路径要么新增一步、要么难以发现，让老用户一时无法接受，另外也让有的用户看上去觉得乱而晕。如下图豆瓣旧版导航与抬头新版导航对比</div>
<div><a href="http://www.ashnotes.com/wp-content/uploads/2010/03/旧版豆瓣首页导航_阿石的日志.png"><img class="aligncenter size-full wp-image-343" title="旧版豆瓣首页导航_阿石的日志" src="http://www.ashnotes.com/wp-content/uploads/2010/03/旧版豆瓣首页导航_阿石的日志.png" alt="" width="963" height="76" /></a></div>
<div><strong>2 豆列调整</strong></div>
<div id="_mcePaste">豆列调整无疑是这次新版豆瓣豆油们反应最强烈的。每个混合了书影音三类条目的豆列都会出现以下让用户指定豆列类型的情境。豆列这款产品设计的初衷是让用户整合个人偏好的主题，将散布于豆瓣千万书影音条目以豆列的形式串接在一起，深得豆油们喜爱，艺术的共通性是她们的信念！然而这次豆瓣改版将这些混合豆列指定类型，且在用户实施过程中出现条目丢失、清空等这样那样的bug，让豆油们骂声一片！针对豆列这种一分为三的意图，正如豆油樱桃程所质问调侃：</div>
<div id="_mcePaste" style="text-align: center;"><a href="http://www.douban.com/online/10338773/discussion/21885619/" target="_blank"> “未来都是湿乎乎的了，豆瓣还想把自己榨的干巴巴的吗</a>”</div>
<div><a href="http://www.ashnotes.com/wp-content/uploads/2010/03/豆列调整_阿石的日志.jpg"><img class="aligncenter size-full wp-image-342" title="豆列调整_阿石的日志" src="http://www.ashnotes.com/wp-content/uploads/2010/03/豆列调整_阿石的日志.jpg" alt="" width="600" height="352" /></a></div>
<div><strong>3 信息设计冗余</strong></div>
<div id="_mcePaste">新版UI设计简洁、干净，信息密度分布适中，显得更加大气。但也有种种不合理的信息设计依然存在</div>
<div id="_mcePaste">例如 站内搜索中的站内搜索， 豆瓣的站内搜索一直为人诟病，但这种将自己弱点二次暴露的就少之又少了。如豆瓣各分站点如音乐站内搜索的冗余设计，对用户来说搜索功能看不出差异 性，画 圈处1完全可以去掉。尤其是令人不解的是豆瓣音乐画圈处1还有radio筛选选项，多之又多，令人不解！</div>
<div><a href="http://www.ashnotes.com/wp-content/uploads/2010/03/站内搜索Music_阿石的日志.png"><img class="aligncenter size-full wp-image-344" title="站内搜索Music_阿石的日志" src="http://www.ashnotes.com/wp-content/uploads/2010/03/站内搜索Music_阿石的日志.png" alt="" width="592" height="205" /></a><a href="http://www.ashnotes.com/wp-content/uploads/2010/03/站内搜索Movie_阿石的日志.png"><img class="aligncenter size-full wp-image-346" title="站内搜索Movie_阿石的日志" src="http://www.ashnotes.com/wp-content/uploads/2010/03/站内搜索Movie_阿石的日志.png" alt="" width="578" height="194" /></a><a href="http://www.ashnotes.com/wp-content/uploads/2010/03/站内搜索Book_阿石的日志.png"></a></div>
<div><a href="http://www.ashnotes.com/wp-content/uploads/2010/03/站内搜索Book_阿石的日志.png"><img class="aligncenter size-full wp-image-345" title="站内搜索Book_阿石的日志" src="http://www.ashnotes.com/wp-content/uploads/2010/03/站内搜索Book_阿石的日志.png" alt="" width="575" height="152" /></a></div>
<div>豆瓣每次改版都能给业界带来震撼，更多的是前期招致大量豆油愤青的辱骂、甚至是抵制！从这次改版的“一天之内的惊鸿一瞥到小规模的A/B test” 发布模式也可以看出豆瓣团队的成熟，越来越学会倾听用户的声音和心跳。产品设计既需要满足用户的需求，也要照顾商业利益的发展，两者相辅相成，内容定中间。从豆瓣官方博客开始新一轮规模化招人可以看出，我们相信阿北有实力为我们提供更丰富、更实用的豆瓣式服务，总之豆瓣的演化进程值得期待。</div>
<div><strong><em>附上新版豆瓣信息架构，以便大家快速了解查阅！（点击URL链接查看<span style="font-style: normal; font-weight: normal;"><a href="http://mind42.com/pub/mindmap?mid=b8a7d1b7-f385-47f0-ac4d-98bf65e58c4f">http://mind42.com/pub/mindmap?mid=b8a7d1b7-f385-47f0-ac4d-98bf65e58c4f</a></span></em></strong></div>
<div><a href="http://www.ashnotes.com/wp-content/uploads/2010/03/新版豆瓣信息架构+++++++阿石制作+ashnotes.com_.png"><img class="aligncenter size-full wp-image-351" title="新版豆瓣信息架构+++++++阿石制作+ashnotes.com" src="http://www.ashnotes.com/wp-content/uploads/2010/03/新版豆瓣信息架构+++++++阿石制作+ashnotes.com_.png" alt="" width="736" height="662" /></a></div>
]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/exp-newer-douban/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>豆瓣改版分析</title>
		<link>http://www.ashnotes.com/newer-douban-analysis/</link>
		<comments>http://www.ashnotes.com/newer-douban-analysis/#comments</comments>
		<pubDate>Sat, 27 Feb 2010 16:00:19 +0000</pubDate>
		<dc:creator>ashnotes</dc:creator>
				<category><![CDATA[互联网]]></category>
		<category><![CDATA[信息架构]]></category>
		<category><![CDATA[新版]]></category>
		<category><![CDATA[豆瓣]]></category>

		<guid isPermaLink="false">http://www.ashnotes.com/?p=331</guid>
		<description><![CDATA[
从上个月新版豆瓣昙花一现，到这次新版豆瓣小规模测试，相对于上一次07年底改版一样招致很多老豆油们一片质疑，这次改版却引起了老豆油们更加强劲反弹。从阿北在《豆瓣变形记》 后面生机勃勃的评论中可以看出，这次他们抱怨的不是新版豆瓣的发布模式，而是整个豆瓣架构的重新调整以及部分功能修改对豆油们的情感伤害，综合起来大致有以下三个原因
             1 读书、音乐、电影独立运营
             2 豆瓣社区，豆瓣也要buzz嘛？
             3 破坏已有豆列生存规则，  将豆列分流
（注：豆列是豆瓣网友将书籍、音乐、电影中有某种共同特征的具体条目打包成一个链接，方便资源的整合与传播，是豆瓣网友们辛勤编织的劳动成果）这其中第3个破坏已有豆列影响最恶劣，于是就有了豆油发起了《反对豆列分拆大签名!》，截止目前有1414人参加 。而这些都说明一方面豆瓣在演化进程中充满争议；另一方面令人羡慕是阿北有着这么一群可爱的豆油拥趸发表意见、指出不足，无论如何对豆瓣的发展是值得庆幸的！
写这篇文章的目地一是为了了解豆瓣这次改版的用户反馈；二次是利用信息架构、信息设计等UE知识分析下这次豆瓣改版的背景和原因，以供同行切磋。下面对豆瓣改版的背景和原因进行分析。
可能大家在争论豆瓣这次藐视书影音艺术“通用性”的同时忽视了以下两个因素：
一是豆瓣网在2009年底拿到近1个亿的二轮投资，规模化商业进程开始逐渐启动，阿北及其团队需要扩充产品线和深化产品服务迎合资本方；
二是之去年中开始和腾讯、百度等合作开放平台嵌入应用而带来的近3kw新用户爆发性增长，海量新用户产生的噪音干扰豆瓣最为宝贵的财富且将自身定位为小众而高端老用户，迫使他们担心豆瓣变质迫使自己离开，这也就是阿北在《豆瓣变形记》提到的担忧——“高度活跃的社区对书影乐服务内容可能的干扰，比如社区内的人际冲突会波及到评论和条目内容”。
 看清了以上两个原因之后就可以明白新版豆瓣的信息架构调整，一方面建立豆瓣社区，统一整合用户空间、线上线下社区功能，强化广播（微博、buzz，没办法大势所趋）属性，照顾腾讯空间过来的新用户行为习惯；另一方面是将读书、音乐、电影以独立二级域名形式独立运营，以便日后对老用户提供更好的服务，当然了，也不排除“将鸡蛋放在3个篮子”说法，降低豆瓣运营风险；然而这次豆瓣效果究竟如何呢，请看下一篇《体验新版豆瓣》，敬请期待！
]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.ashnotes.com/wp-content/uploads/2010/02/新版豆瓣2.png"><img class="aligncenter size-full wp-image-335" title="新版豆瓣_阿石的日志" src="http://www.ashnotes.com/wp-content/uploads/2010/02/新版豆瓣2.png" alt="" width="630" height="117" /></a></p>
<p>从上个月新版豆瓣昙花一现，到这次新版豆瓣小规模测试，相对于上一次07年底改版一样招致很多老豆油们<a href="http://blog.douban.com/douban/2007/11/21/99/ " target="_blank">一片质疑</a>，这次改版却引起了老豆油们更加强劲反弹。从阿北在<a href="http://blog.douban.com/douban/2010/02/03/805/" target="_blank">《豆瓣变形记》</a> 后面生机勃勃的评论中可以看出，这次他们抱怨的不是新版豆瓣的发布模式，而是整个豆瓣架构的重新调整以及部分功能修改对豆油们的情感伤害，综合起来大致有以下三个原因</p>
<p>             1 读书、音乐、电影独立运营</p>
<p>             2 豆瓣社区，豆瓣也要buzz嘛？</p>
<p>             3 破坏已有豆列生存规则，  将豆列分流</p>
<p><em>（注：豆列是豆瓣网友将书籍、音乐、电影中有某种共同特征的具体条目打包成一个链接，方便资源的整合与传播，是豆瓣网友们辛勤编织的劳动成果）</em><em></em>这其中第3个破坏已有豆列影响最恶劣，于是就有了豆油发起了<a href="http://www.douban.com/online/10338773/ " target="_blank">《反对豆列分拆大签名!》，</a>截止目前有1414人参加 。而这些都说明一方面豆瓣在演化进程中充满争议；另一方面令人羡慕是阿北有着这么一群可爱的豆油拥趸发表意见、指出不足，无论如何对豆瓣的发展是值得庆幸的！</p>
<p lang="en-US">写这篇文章的目地一是为了了解豆瓣这次改版的用户反馈；二次是利用信息架构、信息设计等UE知识分析下这次豆瓣改版的背景和原因，以供同行切磋。下面对豆瓣改版的背景和原因进行分析。</p>
<p>可能大家在争论豆瓣这次藐视书影音艺术“通用性”的同时忽视了以下两个因素：</p>
<p>一是豆瓣网在2009年底拿到近1个亿的<a href="http://tech.sina.com.cn/i/2010-01-25/08013800102.shtml" target="_blank">二轮投资</a>，规模化商业进程开始逐渐启动，阿北及其团队需要扩充产品线和深化产品服务迎合资本方；</p>
<p>二是之去年中开始和腾讯、百度等合作开放平台嵌入应用而带来的近3kw新用户爆发性增长，海量新用户产生的噪音干扰豆瓣最为宝贵的财富且将自身定位为小众而高端老用户，迫使他们担心豆瓣变质迫使自己离开，这也就是阿北在《豆瓣变形记》提到的担忧——“<a href="http://blog.douban.com/douban/2010/02/03/805/" target="_blank">高度活跃的社区对书影乐服务内容可能的干扰，比如社区内的人际冲突会波及到评论和条目内容</a>”。</p>
<p> 看清了以上两个原因之后就可以明白新版豆瓣的信息架构调整，一方面建立豆瓣社区，统一整合用户空间、线上线下社区功能，强化广播（微博、buzz，没办法大势所趋）属性，照顾腾讯空间过来的新用户行为习惯；另一方面是将读书、音乐、电影以独立二级域名形式独立运营，以便日后对老用户提供更好的服务，当然了，也不排除“将鸡蛋放在3个篮子”说法，降低豆瓣运营风险；然而这次豆瓣效果究竟如何呢，请看下一篇《体验新版豆瓣》，敬请期待！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/newer-douban-analysis/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Axure组件值传递妙用</title>
		<link>http://www.ashnotes.com/axure-label-and-value-app/</link>
		<comments>http://www.ashnotes.com/axure-label-and-value-app/#comments</comments>
		<pubDate>Sat, 23 Jan 2010 01:57:29 +0000</pubDate>
		<dc:creator>ashnotes</dc:creator>
				<category><![CDATA[互联网]]></category>
		<category><![CDATA[信息架构]]></category>
		<category><![CDATA[axure]]></category>
		<category><![CDATA[交互设计]]></category>
		<category><![CDATA[动态层面板]]></category>
		<category><![CDATA[组件]]></category>

		<guid isPermaLink="false">http://www.ashnotes.com/?p=310</guid>
		<description><![CDATA[
Axure是产品原型设计的一大利器，其所作出每一个原型都有以下组件（widget）构成，如文本块（Text Panel）、矩形框（Rectangle)、按钮（button）、文本输入框(Text Field)、以及让众多Axurers喜爱的动态层面板（Dynamic Panel）等。正是因为这些功能形态各异的组件组成了一个产品的基本框架、原始形态，而每个组件都可以拥有一个名号&#8211;标签（label）,通过对标签命名、组件赋值就可以作出一些令人惊喜的交互效果。
一、利用组件赋值值传递
淘宝改版了，但淘宝的登录入口还是没变，可见阿里人对淘宝登录入口的自信。

利用AxureRP5.6做的原型(下载RP文件请点击taobao-login-axure，查看效果请点击这里)，如下图

步骤分解如下：
1 如上图,建立帐户名和密码两个输入框,分别打上user和password标签(label)，便于登录按钮识别判断
2 新建立动态层面板（dynamic panel)，将面板命名为error ，右键将其隐藏
3 由于有帐户名和密码两个输入框需要鉴权判断,因此需要至少建立两个动态层显示判断异常错误.右键error动态层面板，新建两 个动态层,分别命名为user_error和password_error
4 编辑两个动态层，如将user_error编辑为“用户不存在”、将password_error编辑为“密码不匹配”，这里只考虑简单的两个判断，登录前端后端鉴权多达几十种判断都可以在error动态层里面显示
5 关键一步，编辑case条件对输入框赋值并进行判断：点击登录按钮,Axure右上侧会出现&#8221;注释&#38;交互&#8221;栏，建立两个case条件：一是当帐户名输入框user不等于ashnotes.com时，在error动态层面板触发显示user_error动态层；二是当密码输入框password不等于123456时，在error动态层面板触发显示password_error动态层，具体步骤如下图所示。

3 由于有帐户名和密码两个输入框需要鉴权判断,因此需要至少建立两个动态层显示判断异常错误.
右键error动态层面板，新建两个动态层,分别命名为user_error和password_error
6 最后是case条件的处理来控制error动态层面板，及其他出错提示。在实际运用过程中由于case判断过多的情 况下，可以在需求书上加以详细描述，便于后台开发人员了解判断逻辑及编码。
二、利用标签命名值传递
 
京东的订单核对页在处理新老收货人信息,点击修改者切换到输入新地址状态，保存则回到填写好的地址状态，只有切花，交互清晰明了，值得模仿、推荐。

利用AxureRP5.6做的原型(下载RP文件请点击360buy-confirm-axure,查看效果请点击这里)，如下图


1 新建modify和address两个动态层面板，每个面板新建两个层，各自对应命名为1、2号层
2 具体原理是对动态层面板各组件命名，交叉触发显示，即利用modify的1号动态层同时触发显示其本身的2号层及address的2号动态层；modify的2号动态层触发显示其本身的1号层及address的1号动态层。呵呵，说起来拗口，点击“修改”和“关闭”后看看效果就知道了
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-可爱的分割线&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;
备注：丁宇同学曾在《从“产品需求文档”（PRD）到“产品设计文档”（PDD）》 提出将产品原型与PRD融在一个文档中。这是一个很好的倡议，但得基于产品与开发两方的深度认可。毕竟axure的独门利器集中于快速交付html交互产出物 ，在产品设计沟通、体验模拟、展示演说方面才是他的初衷，而PRD更多的是产品研发过程中所需要的详细雕琢的文档。

]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone" title="Axure" src="http://www.ashnotes.com/wp-content/uploads/2009/12/axure.png" alt="" width="613" height="122" /></p>
<p><strong>Axure</strong>是产品原型设计的一大利器，其所作出每一个原型都有以下组件（widget）构成，如文本块（Text Panel）、矩形框（Rectangle)、按钮（button）、文本输入框(Text Field)、以及让众多Axurers喜爱的动态层面板（Dynamic Panel）等。正是因为这些功能形态各异的组件组成了一个产品的基本框架、原始形态，而每个组件都可以拥有一个名号&#8211;标签（label）,通过对标签命名、组件赋值就可以作出一些令人惊喜的交互效果。</p>
<p><strong>一、利用组件赋值值传递</strong></p>
<p>淘宝改版了，但淘宝的登录入口还是没变，可见阿里人对淘宝登录入口的自信。</p>
<p><img class="alignnone size-full wp-image-313" title="taobao_login" src="http://www.ashnotes.com/wp-content/uploads/2010/01/taobao_login1.jpg" alt="taobao_login" width="671" height="267" /></p>
<p>利用AxureRP5.6做的原型<span style="font-family: 'Lucida Grande', 'Helvetica Neue', Arial, 'Lucida Sans Unicode', sans-serif; line-height: 20px; color: #4d4d4d;">(下载RP文件请点击<a title="下载自阿石的日志www.ashnotes.com" href="http://www.box.net/shared/iepozjdpyu" target="_blank">taobao-login-axure</a>，查看效果请点击<a href="http://www.ashnotes.com/experience/taobao_login_axure/" target="_self">这里</a>)<span style="color: #000000; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px;">，如下图</span></span></p>
<p><img class="alignnone size-full wp-image-315" title="taobao_login_axure" src="http://www.ashnotes.com/wp-content/uploads/2010/01/taobao_login_axure.jpg" alt="taobao_login_axure" width="620" height="267" /></p>
<p>步骤分解如下：</p>
<p>1 如上图,建立帐户名和密码两个输入框,分别打上user和password标签(label)，便于登录按钮识别判断</p>
<p>2 新建立动态层面板（dynamic panel)，将面板命名为error ，右键将其隐藏</p>
<p>3 由于有帐户名和密码两个输入框需要鉴权判断,因此需要至少建立两个动态层显示判断异常错误.右键error动态层面板，新建两 个动态层,分别命名为user_error和password_error</p>
<p>4 编辑两个动态层，如将user_error编辑为“用户不存在”、将password_error编辑为“密码不匹配”，这里只考虑简单的两个判断，登录前端后端鉴权多达几十种判断都可以在error动态层里面显示</p>
<p>5 <strong>关键一步</strong>，编辑case条件对输入框赋值并进行判断：点击登录按钮,Axure右上侧会出现&#8221;注释&amp;交互&#8221;栏，建立两个case条件：一是当帐户名输入框user不等于ashnotes.com时，在error动态层面板触发显示user_error动态层；二是当密码输入框password不等于123456时，在error动态层面板触发显示password_error动态层，具体步骤如下图所示。</p>
<p><img class="alignnone size-full wp-image-319" title="taobao_login_axure2" src="http://www.ashnotes.com/wp-content/uploads/2010/01/taobao_login_axure2.jpg" alt="taobao_login_axure2" width="880" height="546" /></p>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 865px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">3 由于有帐户名和密码两个输入框需要鉴权判断,因此需要至少建立两个动态层显示判断异常错误.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 865px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">右键error动态层面板，新建两个动态层,分别命名为user_error和password_error</div>
<p>6 最后是case条件的处理来控制error动态层面板，及其他出错提示。在实际运用过程中由于case判断过多的情 况下，可以在需求书上加以详细描述，便于后台开发人员了解判断逻辑及编码。</p>
<p><strong>二、利用标签命名值传递</strong></p>
<p><strong> </strong></p>
<p><span style="font-weight: normal;">京东的订单核对页在处理新老收货人信息,点击修改者切换到输入新地址状态，保存则回到填写好的地址状态，只有切花，交互清晰明了，值得模仿、推荐。</span></p>
<p><span style="font-weight: normal;"><img class="alignnone size-full wp-image-322" title="360buy_confirm" src="http://www.ashnotes.com/wp-content/uploads/2010/01/360buy_confirm.jpg" alt="360buy_confirm" width="642" height="318" /></span></p>
<div><span style="color: #4d4d4d; font-family: 'Lucida Grande', 'Helvetica Neue', Arial, 'Lucida Sans Unicode', sans-serif; line-height: 20px;">利用AxureRP5.6做的原型(下载RP文件请点击<a title="下载自阿石的日志 www.ashnotes.com" href="http://www.box.net/shared/kitedib9gk" target="_blank">360buy-confirm-axure</a>,查看效果请点击<a href="http://www.ashnotes.com/experience/360buy_confirm_axure/" target="_self">这里</a>)，如下图</span></div>
<div><span style="color: #4d4d4d; font-family: 'Lucida Grande', 'Helvetica Neue', Arial, 'Lucida Sans Unicode', sans-serif; line-height: 20px;"><img class="alignnone size-full wp-image-323" title="360buy_confirm_axure" src="http://www.ashnotes.com/wp-content/uploads/2010/01/360buy_confirm_axure.jpg" alt="360buy_confirm_axure" width="625" height="272" /></span></div>
<div><span style="color: #4d4d4d; font-family: 'Lucida Grande', 'Helvetica Neue', Arial, 'Lucida Sans Unicode', sans-serif; line-height: 20px;"></p>
<div>1 新建modify和address两个动态层面板，每个面板新建两个层，各自对应命名为1、2号层</div>
<div>2 具体原理是对动态层面板各组件命名，交叉触发显示，即利用modify的1号动态层同时触发显示其本身的2号层及address的2号动态层；modify的2号动态层触发显示其本身的1号层及address的1号动态层。呵呵，说起来拗口，点击<a href="http://www.ashnotes.com/experience/360buy_confirm_axure/" target="_self">“修改”和“关闭”</a>后看看效果就知道了</div>
<div>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-可爱的分割线&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;</div>
<div>备注：丁宇同学曾在<a href="http://dingyu.me/blog/posts/view/product-design-document" target="_blank">《从“产品需求文档”（PRD）到“产品设计文档”（PDD）》</a> 提出将产品原型与PRD融在一个文档中。这是一个很好的倡议，但得基于产品与开发两方的深度认可。毕竟axure的独门利器集中于<a href="http://www.ashnotes.com/axure-and-guanglei/" target="_blank">快速交付html交互产出物</a> ，在产品设计沟通、体验模拟、展示演说方面才是他的初衷，而PRD更多的是产品研发过程中所需要的详细雕琢的文档。</div>
<p></span></div>
]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/axure-label-and-value-app/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>2010年用户体验挂历</title>
		<link>http://www.ashnotes.com/2010-ue-calender/</link>
		<comments>http://www.ashnotes.com/2010-ue-calender/#comments</comments>
		<pubDate>Wed, 23 Dec 2009 06:29:32 +0000</pubDate>
		<dc:creator>ashnotes</dc:creator>
				<category><![CDATA[互联网]]></category>
		<category><![CDATA[2010]]></category>
		<category><![CDATA[UE]]></category>
		<category><![CDATA[信息设计]]></category>
		<category><![CDATA[用户体验]]></category>

		<guid isPermaLink="false">http://www.ashnotes.com/?p=277</guid>
		<description><![CDATA[
2009年马上就要结束了,“用户体验&#8221;已成为上至领导老大下至我等平民百姓挂在嘴边的口头禅。
究竟体验是什么？体验好,但又好在哪里？以下列出国外Frank Spillers 作的2010年用户体验挂历，
加上阿石对09年各产品用户体验的理解加以点评，不到之处欢迎指正！
一月份 Intuitive（ 让产品具有让人产生直觉的）
直觉意思就是不需要理解。对一个产品来说，一个让人有直觉的产品是通过设计来满足用户期望的;对用户产品说直觉就是产品就如、自己期望的那样运行操作，而且她们也没必要过问自己为什么那样。
如QQ2009面板中个人信息面板中，空间、邮箱、钱包、邮箱上的数字消息提醒，一看就让人明白有新的、多少消息提醒，点击进去后直觉告诉用户回去哪里。

二月份 Sociability(让产品具有社交性的)
社交性给予了用户扩展社交交互和社交行为的方法.一个产品越具有高度的社交性,那么它也就越能够更好的将用户和社区联系在一起.社交界面可以促进用户状态、用户的归属感及群体解决问题的能力，而这些可以使得用户参与贡献、分享及共同进步。
如Slideshare是一家做Slide、PPT稿件上传分享的网站，里面有象twitter那样follow和发送短消息那样的社交功能。

三月份 Explicitness（让产品直截了当的吧）
条条框框是直截了当的死敌。产品给使用过程中的条条框框和逻辑能力要求会导致用户挫败感。&#8221;dumbing it down&#8221;的意思就是产品设计过程中要注意避免用户不知道你所知道的。
淘宝的站内搜索在之前阿石日志《站内搜索的演化——淘宝篇》中提到过，新版淘宝站内搜索给用户最大的观感就是直截了当的一搜就看到搜索结果，不像现在正式版中搜索到的还有一大堆筛选分类，搜索结果在类目多时第一眼看上去更像是分类器。不过这种直截了当的做法也可能引起老用户的反弹，如最近《万店签名！共同抵制淘宝的按“人气”排名》的帖子引起很大反响，其实淘宝站内搜索还是在A/B test，但A Test中已然在改动实际触犯了老用户的真金白银实际利益。

四月份 Context of Use(注意产品使用过程中的情境）
任何一款产品或者一组用户行为都“生存在”在一个独特的情境当中，这个情境是由产品所在的环境、企业文化、工作流程、产品设计情感、社会现象等各种因素塑造的。拥抱产品使用情境的设计吧，这样就能更加懂得什么样的用户什么时候需要她（产品）。
如豆瓣9点的根据用户上网时间情境的白天、黑夜模式自动切换


五月份 Personas(请关注产品的用户身份）
“用户身份”本意是拉丁语的“面具”。一个“用户身份”就是一个用户档案，抑或是一个具体用户、用户行为、用户期望和用户需求的快照。好的“用户身份”，植根于用户行为的深度观察和了解，用以帮助优化产品设计并对其追踪跟进，以及使产品设计更加体现真实的生活。
如新浪微薄的对名人推出的新浪认证小徽章，因为有真实，才会有用户努力追求真实。对比与139说客的“真实互联”，新浪的认证更容易形成用户层级，也富于可操作性。


&#8212;&#8212;&#8212;&#8212;&#8212;到了2010下半年的分页符，转载请注明来自阿石的日志www.ashnotes.com&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;

六月份 Task-Oriented Design（面向任务的产品设计）
一个面向任务的产品设计可以给予用户有益的产品功能点和特点，使得她们可以更加容易地完成任务（或一组动作流程）、更快的达到她们的目标和释放产品学习和使用过程中造成的阻滞感。
如京东的购物车流程设计，随着用户购买的进度区分购买流程的步骤，到了订单核对页，还可以点击进度导航往前一级回退，这个细节设计让人佩服，值得学习。

七月份 Progressive Disclosure(进度显示）
进度显示是一项连续界面过程中展示信息和动作交互设计技艺，用以避免用户感到不知所措。通过显示信息的进度，你可以向用户展示每一步的产品信息主要部分，这样可以帮助用户在使用过程中的发现她们平时不易发现的产品强大特点和功能。
如QQ软件安装进度展示，不仅显示安装进度， 还可以在安装过程中以简单、清晰图文展示新版推出的功能，在QQ版本屡创“新高”的09年这一招无疑是个很好的熨贴。



八月份 Pleasurability（令人心情舒畅的）
令人心情舒畅的产品会让人产生一种深度情感体验的满足感。越是让人心情舒畅的产品，它也就越能够从社交、生理及认知上满足用户，甚至是她们的价值观。用户会对一个高度令人舒畅的产品产生积极反应，甚至会“爱上”这款产品。
如身边的苹果控们热爱力推的iphone 3Gs,谁也不能否认“信乔布斯哥”的威力，谁说产品不能让人产生信仰？

九月份 Cognitive Overload(信息设计中关于认知的过度加载）
认知的过度加载描述了这样的一个情境：用户在海量信息中感到不知所措，以至于达到认知的极限。困惑、沮丧、神奇、甚至无助等用户使用产品过程中产生的阻滞感都是常常都是来自于认知过度加载。当用户抱怨道：“太多了”时，这其实就是用户对产品发出认知“被”过度加载的信号!
信息设计的认知过度加载实在是太常见了，一本《don&#8217;t make me think》道尽了信息设计过程出现的种种现象，著名的Krug三大定律也是解决这个问题的良方


十月份 Containership（UI设计中的集装箱理论）
“集装箱”讲的是相关类信息的视觉组合。只要有联系的信息都可以被组合或是在界面的同一区域看上去是组合的，或包含的。提供好的集装箱意味着提供可以将各种控制走到一起清晰的边界。例如，在产品设计过程中，一个表现为“局域性”的动作不能表现为和“全局性”动作。
如江苏移动首页“优惠与活动”中全球通、动感地带、神州行三个Tab切换，全球通的品牌色是蓝色，区块背景是全球通的logo，当切换到动感地带时，Tab标题的颜色也随之切换为动感地带的品牌色橙色，背景换位动感地带的logo。局域性有封装的“集装箱”，也有清晰的边界。


十一月份 Synch （让用户与产品一起同步心跳）
“同步”即在用户和产品之间存在的一种直觉合并的状态或者是“流”。产品和谐的运行在用户的工作韵律当中，例如产品以更少的错误、和用户在一起、以及和用户一起“心跳”。带有 同步感的产品设计会让用户产生一种“情感孽债”，而这种情感会帮助用户完成任务、强化用户的满足感以及提高产品的舒适感。
如豆瓣电台，用户期盼豆瓣算法可以向其推送好的歌曲，豆瓣算法也需要吸收统计用户的偏好（我喜欢、不在播放、跳过曲目）等动作，用户和产品各取所需，两者之间自然有一条一起心跳的“流”。


十二月份 Desirability (让用户对产品产生令人向往性)
“令人向往性”是指用户实际想要和需要的一个特点或一些功能点，这里不仅指的是她们需要这些，更是期望这些都在产品用户体验里面。可用性将目光聚焦于使产品使用变得更加容易，令人向往性呢这是和用户在一起想要、需要、以至一起向往。不管是可用性还是令人向往性，都是一个好的用户体验的必须，而令人向往性则须优先考虑。
令人向往性的产品今年非Google wave莫属，社交娱乐、即时通讯、团队协作集成到一个平台下无疑是一个平台级产品的梦想，也十分令人向往的。不过Frank Spillers本人在可用性与令人向往性的优先上，阿石认为值得商榷，给用户“画饼想像”的理念当然很好，如果基本的可用性不能达到要求，令人向往性则成了无本之末。

]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-279" title="2010年用户体验挂历" src="http://www.ashnotes.com/wp-content/uploads/2009/12/2010年用户体验挂历.jpg" alt="2010年用户体验挂历" width="637" height="257" /></p>
<p>2009年马上就要结束了,“用户体验&#8221;已成为上至领导老大下至我等平民百姓挂在嘴边的口头禅。</p>
<p>究竟体验是什么？体验好,但又好在哪里？以下列出国外Frank Spillers 作的<a href="http://www.slideshare.net/farreaching/user-experience-calendar-2010" target="_blank">2010年用户体验挂历</a>，</p>
<p>加上阿石对09年各产品用户体验的理解加以点评，不到之处欢迎指正！</p>
<p><strong>一月份 Intuitive（ 让产品具有让人产生直觉的</strong>）</p>
<p>直觉意思就是不需要理解。对一个产品来说，一个让人有直觉的产品是通过设计来满足用户期望的;对用户产品说直觉就是产品就如、自己期望的那样运行操作，而且她们也没必要过问自己为什么那样。</p>
<p>如QQ2009面板中个人信息面板中，空间、邮箱、钱包、邮箱上的数字消息提醒，一看就让人明白有新的、多少消息提醒，点击进去后直觉告诉用户回去哪里。</p>
<p style="text-align: center;"><img class="size-full wp-image-283 aligncenter" title="一月份 Intuitive（ 让产品具有让人产生直觉的）" src="http://www.ashnotes.com/wp-content/uploads/2009/12/一月份-Intuitive（-让产品具有让人产生直觉的）.png" alt="一月份 Intuitive（ 让产品具有让人产生直觉的）" width="362" height="96" /></p>
<p><strong>二月份 Sociability(让产品具有社交性的)</strong></p>
<p>社交性给予了用户扩展社交交互和社交行为的方法.一个产品越具有高度的社交性,那么它也就越能够更好的将用户和社区联系在一起.社交界面可以促进用户状态、用户的归属感及群体解决问题的能力，而这些可以使得用户参与贡献、分享及共同进步。</p>
<p>如Slideshare是一家做Slide、PPT稿件上传分享的网站，里面有象twitter那样follow和发送短消息那样的社交功能。</p>
<p style="text-align: center;"><img class="size-full wp-image-284 aligncenter" title="二月份 Sociability(让产品具有社交性的)" src="http://www.ashnotes.com/wp-content/uploads/2009/12/二月份-Sociability让产品具有社交性的.png" alt="二月份 Sociability(让产品具有社交性的)" width="297" height="426" /></p>
<p><strong>三月份 Explicitness（让产品直截了当的吧）</strong></p>
<p>条条框框是直截了当的死敌。产品给使用过程中的条条框框和逻辑能力要求会导致用户挫败感。&#8221;dumbing it down&#8221;的意思就是产品设计过程中要注意避免用户不知道你所知道的。</p>
<p>淘宝的站内搜索在之前阿石日志<a href="http://www.ashnotes.com/evolution-of-internal-site-search-at-taobao/">《</a><a href="http://www.ashnotes.com/evolution-of-internal-site-search-at-taobao/" target="_self">站内搜索的演化——淘宝篇》</a>中提到过，新版淘宝站内搜索给用户最大的观感就是直截了当的一搜就看到搜索结果，不像现在正式版中搜索到的还有一大堆筛选分类，搜索结果在类目多时第一眼看上去更像是分类器。不过这种直截了当的做法也可能引起老用户的反弹，如最近《<a href="http://bangpai.taobao.com/group/thread/154503-3211761.htm">万店签名！共同抵制淘宝的按“人气”排名</a>》的帖子引起很大反响，其实淘宝站内搜索还是在A/B test，但A Test中已然在改动实际触犯了老用户的真金白银实际利益。</p>
<p style="text-align: center;"><img class="size-full wp-image-285 aligncenter" title="三月份 Explicitness（让产品直截了当的吧）" src="http://www.ashnotes.com/wp-content/uploads/2009/12/三月份-Explicitness（让产品直截了当的吧）.png" alt="三月份 Explicitness（让产品直截了当的吧）" width="612" height="179" /></p>
<p><strong>四月份 Context of Use(注意产品使用过程中的情境</strong>）</p>
<p>任何一款产品或者一组用户行为都“生存在”在一个独特的情境当中，这个情境是由产品所在的环境、企业文化、工作流程、产品设计情感、社会现象等各种因素塑造的。拥抱产品使用情境的设计吧，这样就能更加懂得什么样的用户什么时候需要她（产品）。</p>
<p>如豆瓣9点的根据用户上网时间情境的白天、黑夜模式自动切换</p>
<p style="text-align: center;"><img class="size-full wp-image-286 aligncenter" title="四月份 Context of Use(注意产品使用过程中的情境）1" src="http://www.ashnotes.com/wp-content/uploads/2009/12/四月份-Context-of-Use注意产品使用过程中的情境）1.png" alt="四月份 Context of Use(注意产品使用过程中的情境）1" width="515" height="74" /></p>
<p style="text-align: center;"><img class="size-full wp-image-287 aligncenter" title="四月份 Context of Use(注意产品使用过程中的情境）2" src="http://www.ashnotes.com/wp-content/uploads/2009/12/四月份-Context-of-Use注意产品使用过程中的情境）2.png" alt="四月份 Context of Use(注意产品使用过程中的情境）2" width="490" height="40" /></p>
<p><strong>五月份 Personas(请关注产品的用户身份）</strong></p>
<p>“用户身份”本意是拉丁语的“面具”。一个“用户身份”就是一个用户档案，抑或是一个具体用户、用户行为、用户期望和用户需求的快照。好的“用户身份”，植根于用户行为的深度观察和了解，用以帮助优化产品设计并对其追踪跟进，以及使产品设计更加体现真实的生活。</p>
<p>如新浪微薄的对名人推出的新浪认证小徽章，因为有真实，才会有用户努力追求真实。对比与139说客的“真实互联”，新浪的认证更容易形成用户层级，也富于可操作性。</p>
<p><img class="alignleft size-full wp-image-288" title="五月份 Personas(请关注产品的用户身份）" src="http://www.ashnotes.com/wp-content/uploads/2009/12/五月份-Personas请关注产品的用户身份）.png" alt="五月份 Personas(请关注产品的用户身份）" width="773" height="206" /></p>
<p lang="en-US">
<p>&#8212;&#8212;&#8212;&#8212;&#8212;<em>到了2010下半年的分页符，转载请注明来自阿石的日志www.ashnotes.com</em>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;</p>
<p lang="en-US">
<p><strong>六月份 Task-Oriented Design（面向任务的产品设计）</strong></p>
<p>一个面向任务的产品设计可以给予用户有益的产品功能点和特点，使得她们可以更加容易地完成任务（或一组动作流程）、更快的达到她们的目标和释放产品学习和使用过程中造成的阻滞感。</p>
<p>如京东的购物车流程设计，随着用户购买的进度区分购买流程的步骤，到了订单核对页，还可以点击进度导航往前一级回退，这个细节设计让人佩服，值得学习。</p>
<p style="text-align: center;"><img class="size-full wp-image-289 aligncenter" title="六月份 Task-Oriented Design（面向任务的产品设计）" src="http://www.ashnotes.com/wp-content/uploads/2009/12/六月份-Task-Oriented-Design（面向任务的产品设计）.png" alt="六月份 Task-Oriented Design（面向任务的产品设计）" width="626" height="77" /></p>
<p><strong>七月份 Progressive Disclosure(进度显示）</strong></p>
<p>进度显示是一项连续界面过程中展示信息和动作交互设计技艺，用以避免用户感到不知所措。通过显示信息的进度，你可以向用户展示每一步的产品信息主要部分，这样可以帮助用户在使用过程中的发现她们平时不易发现的产品强大特点和功能。</p>
<p>如QQ软件安装进度展示，不仅显示安装进度， 还可以在安装过程中以简单、清晰图文展示新版推出的功能，在QQ版本屡创“新高”的09年这一招无疑是个很好的熨贴。</p>
<p style="text-align: center;"><img class="size-full wp-image-290 aligncenter" title="七月份 Progressive Disclosure(进度显示）" src="http://www.ashnotes.com/wp-content/uploads/2009/12/七月份-Progressive-Disclosure进度显示）.png" alt="七月份 Progressive Disclosure(进度显示）" width="506" height="283" /></p>
<p><strong><br />
</strong></p>
<p><strong>八月份 Pleasurability（令人心情舒畅的）</strong></p>
<p>令人心情舒畅的产品会让人产生一种深度情感体验的满足感。越是让人心情舒畅的产品，它也就越能够从社交、生理及认知上满足用户，甚至是她们的价值观。用户会对一个高度令人舒畅的产品产生积极反应，甚至会“爱上”这款产品。</p>
<p>如身边的苹果控们热爱力推的iphone 3Gs,谁也不能否认“信乔布斯哥”的威力，谁说产品不能让人产生信仰？</p>
<p style="text-align: center;"><img class="size-full wp-image-292 aligncenter" title="八月份 Pleasurability（令人心情舒畅的）" src="http://www.ashnotes.com/wp-content/uploads/2009/12/八月份-Pleasurability（令人心情舒畅的）.png" alt="八月份 Pleasurability（令人心情舒畅的）" width="137" height="182" /></p>
<p><strong>九月份 Cognitive Overload(信息设计中关于认知的过度加载）</strong></p>
<p>认知的过度加载描述了这样的一个情境：用户在海量信息中感到不知所措，以至于达到认知的极限。困惑、沮丧、神奇、甚至无助等用户使用产品过程中产生的阻滞感都是常常都是来自于认知过度加载。当用户抱怨道：“太多了”时，这其实就是用户对产品发出认知“被”过度加载的信号!</p>
<p>信息设计的认知过度加载实在是太常见了，一本《<a href="http://www.douban.com/subject/1440223/">don&#8217;t make me think</a>》道尽了信息设计过程出现的种种现象，著名的<a href="http://www.douban.com/note/19270607/" target="_blank">Krug三大定律</a>也是解决这个问题的良方</p>
<p style="text-align: center;"><img class="size-full wp-image-293 aligncenter" title="九月份 Cognitive Overload(信息设计中关于认知的过度加载）" src="http://www.ashnotes.com/wp-content/uploads/2009/12/九月份-Cognitive-Overload信息设计中关于认知的过度加载）.png" alt="九月份 Cognitive Overload(信息设计中关于认知的过度加载）" width="323" height="416" /></p>
<p lang="en-US">
<p><strong>十月份 Containership（UI设计中的集装箱理论）</strong></p>
<p>“集装箱”讲的是相关类信息的视觉组合。只要有联系的信息都可以被组合或是在界面的同一区域看上去是组合的，或包含的。提供好的集装箱意味着提供可以将各种控制走到一起清晰的边界。例如，在产品设计过程中，一个表现为“局域性”的动作不能表现为和“全局性”动作。</p>
<p>如<a href="http://www.js.chinamobile.com/">江苏移动</a>首页“优惠与活动”中全球通、动感地带、神州行三个Tab切换，全球通的品牌色是蓝色，区块背景是全球通的logo，当切换到动感地带时，Tab标题的颜色也随之切换为动感地带的品牌色橙色，背景换位动感地带的logo。局域性有封装的“集装箱”，也有清晰的边界。</p>
<p style="text-align: center;"><img class="size-full wp-image-294 aligncenter" title="十月份 Containership（UI设计中的集装箱理论）1" src="http://www.ashnotes.com/wp-content/uploads/2009/12/十月份-Containership（UI设计中的集装箱理论）1.png" alt="十月份 Containership（UI设计中的集装箱理论）1" width="373" height="314" /><img class="size-full wp-image-295 aligncenter" title="十月份 Containership（UI设计中的集装箱理论）2" src="http://www.ashnotes.com/wp-content/uploads/2009/12/十月份-Containership（UI设计中的集装箱理论）2.png" alt="十月份 Containership（UI设计中的集装箱理论）2" width="371" height="313" /></p>
<p lang="en-US">
<p><strong>十一月份 Synch （让用户与产品一起同步心跳）</strong></p>
<p>“同步”即在用户和产品之间存在的一种直觉合并的状态或者是“流”。产品和谐的运行在用户的工作韵律当中，例如产品以更少的错误、和用户在一起、以及和用户一起“心跳”。带有 同步感的产品设计会让用户产生一种“情感孽债”，而这种情感会帮助用户完成任务、强化用户的满足感以及提高产品的舒适感。</p>
<p>如豆瓣电台，用户期盼豆瓣算法可以向其推送好的歌曲，豆瓣算法也需要吸收统计用户的偏好（我喜欢、不在播放、跳过曲目）等动作，用户和产品各取所需，两者之间自然有一条一起心跳的“流”。</p>
<p style="text-align: center;"><img class="size-full wp-image-296 aligncenter" title="十一月份 Synch （让用户与产品一起同步心跳）" src="http://www.ashnotes.com/wp-content/uploads/2009/12/十一月份-Synch-（让用户与产品一起同步心跳）.png" alt="十一月份 Synch （让用户与产品一起同步心跳）" width="430" height="249" /></p>
<p lang="en-US">
<p><strong>十二月份 Desirability (让用户对产品产生令人向往性)</strong></p>
<p>“令人向往性”是指用户实际想要和需要的一个特点或一些功能点，这里不仅指的是她们需要这些，更是期望这些都在产品用户体验里面。可用性将目光聚焦于使产品使用变得更加容易，令人向往性呢这是和用户在一起想要、需要、以至一起向往。不管是可用性还是令人向往性，都是一个好的用户体验的必须，而令人向往性则须优先考虑。</p>
<p>令人向往性的产品今年非Google wave莫属，社交娱乐、即时通讯、团队协作集成到一个平台下无疑是一个平台级产品的梦想，也十分令人向往的。不过Frank Spillers本人在可用性与令人向往性的优先上，阿石认为值得商榷，给用户“画饼想像”的理念当然很好，如果基本的可用性不能达到要求，令人向往性则成了无本之末。</p>
<p style="text-align: center;"><img class="size-full wp-image-297 aligncenter" title="十二月份 Desirability (让用户对产品产生令人向往性)" src="http://www.ashnotes.com/wp-content/uploads/2009/12/十二月份-Desirability-让用户对产品产生令人向往性.png" alt="十二月份 Desirability (让用户对产品产生令人向往性)" width="676" height="262" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/2010-ue-calender/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>AxureRP及广磊兄</title>
		<link>http://www.ashnotes.com/axure-and-guanglei/</link>
		<comments>http://www.ashnotes.com/axure-and-guanglei/#comments</comments>
		<pubDate>Fri, 18 Dec 2009 06:08:02 +0000</pubDate>
		<dc:creator>ashnotes</dc:creator>
				<category><![CDATA[互联网]]></category>
		<category><![CDATA[信息架构]]></category>
		<category><![CDATA[axure]]></category>
		<category><![CDATA[UE]]></category>
		<category><![CDATA[广磊]]></category>

		<guid isPermaLink="false">http://www.ashnotes.com/?p=262</guid>
		<description><![CDATA[
Axure RP作为一款“快速实现、准确表达、带有交互效果且易于上手”的原型设计工具，在UE(user experiencet,用户体验）越来越受到互联网行业产品经理、策划、和公司领导重视的今天，Axure已经可以和office类软件、脑图软件在产品设计过程中 产品设计人员UED实践过程的必用善软，可以称谓为“三大产品设计利器”。但是在这款工具在实际运用过程中却有一些争议。

“做出来的效果怎么这么山寨啊，一点都不好看”，有的市场负责人、公司领导如是说
“把原型直接做成DIV+CSS不是更好吗?直接给程序套不是又快又省事嘛”，有负责前端的同学就是这样干的
“操作难度大，学习成本高，还是洋文的！”，新人还未上手埋怨道

之所以出现以上争议现象，是因为在现今互联网行业精细化运作与领导拍脑袋加拍板、传统个人站长“一人可以搞定一切”相互碰撞的结果，而这种结果就误解了 Axure这款工具需求的初衷。
在Axure官网下面有用三个单词组成的原型设计流程图“设计、体验、展示”，这也道出了无论是个人打法还是团队协作，都需要先做好信息设计、 搞定流程交互，然后在正式上马之前还要给个人大脑呈现或大家面前demo展示一下这样的工作进程。   但是问题出来了，信息设计word可以做，流程visio、excel也可以搞，演示用ppt也能代替为何非要用另外一套Axure呢？这其实是个好问题，很多人用Axure的人避而不答，一味的追新立意。Axure作为一款快速原型设计工具，其核心特点是快速产出html交互产出物，在领导拍脑袋之前也有时间让他看看跳跃于众人脑袋中的需求模型呈现效果如何；也可以让市场、开发人员一起 过来碰碰，碰一下市场策略在页面如何展示、开发实施可行性等，一旦遇到修改意见Axure可快速迭代保存并发布给各团队角色进行二次PK，Axure在团队之间沟通高效率在这里就体现出来了。 论及个人，word、excel等善软能够vba高级编程、div+css实现也未尝有何不好，所谓“草木竹石，皆可为剑”，如何使用工具表达信息架构，让用户用较少的时间和思考完成信息找寻及将一款工具用到极致人机合一才是王道。但交互演示、团队沟通这两方面功效目前还没有工具和Axure媲美的。
关于Axure操作难度，阿石认为较难的无非是dynamic panel（动态面板，axure的层，可以制作弹出框、Tab等）和一些传值调用（可以赋予逻辑条件相关值，可以一次控制N个层），看看官方视频、 切合自己实际摸索基本也都会了，在这里推一下尹广磊兄，我与广磊兄07年在网上相识，当时都在搞育儿项目。他的webppd网站产品原型设计论坛集中了国内原型设计的实战高手和各种axure实践经验分享，而他本身就是Axure大拿，为人热肠有求必应，且是axure.org域名的持有者，为Axure在中国产品人员的普及做了很大的贡献，可谓Axure在中国的布道者，有什么问题和想法可以去看看，看看总有收获。
]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-268" title="axure" src="http://www.ashnotes.com/wp-content/uploads/2009/12/axure.png" alt="axure" width="613" height="122" /></p>
<p>Axure RP作为一款“<a href="http://www.axure.org/" target="_blank">快速实现、准确表达、带有交互效果且易于上手</a>”的原型设计工具，在UE(user experiencet,用户体验）越来越受到互联网行业产品经理、策划、和公司领导重视的今天，Axure已经可以和office类软件、脑图软件在产品设计过程中 产品设计人员UED实践过程的必用善软，可以称谓为“三大产品设计利器”。但是在这款工具在实际运用过程中却有一些争议。</p>
<ul>
<li>“做出来的效果怎么这么山寨啊，一点都不好看”，有的市场负责人、公司领导如是说</li>
<li>“把原型直接做成DIV+CSS不是更好吗?直接给程序套不是又快又省事嘛”，有负责前端的同学就是这样干的</li>
<li>“操作难度大，学习成本高，还是洋文的！”，新人还未上手埋怨道</li>
</ul>
<p>之所以出现以上争议现象，是因为在现今互联网行业精细化运作与领导拍脑袋加拍板、传统个人站长“一人可以搞定一切”相互碰撞的结果，而这种结果就误解了 Axure这款工具需求的初衷。</p>
<p>在<a href="http://www.axure.com" target="_blank">Axure官网</a>下面有用三个单词组成的原型设计流程图“<span style="color: #ff0000;">设计、体验、展示</span>”，这也道出了无论是个人打法还是团队协作，都需要先做好信息设计、 搞定流程交互，然后在正式上马之前还要给个人大脑呈现或大家面前demo展示一下这样的工作进程。   但是问题出来了，信息设计word可以做，流程visio、excel也可以搞，演示用ppt也能代替为何非要用另外一套Axure呢？这其实是个好问题，很多人用Axure的人避而不答，一味的追新立意。Axure作为一款快速原型设计工具，其核心特点是<span style="color: #ff0000;">快速产出html交互产出物</span>，在领导拍脑袋之前也有时间让他看看跳跃于众人脑袋中的需求模型呈现效果如何；也可以让市场、开发人员一起 过来碰碰，碰一下市场策略在页面如何展示、开发实施可行性等，一旦遇到修改意见Axure可快速迭代保存并发布给各团队角色进行二次PK，Axure在团队之间<span style="color: #ff0000;">沟通高效率</span>在这里就体现出来了。 论及个人，word、excel等善软能够vba高级编程、div+css实现也未尝有何不好，所谓“草木竹石，皆可为剑”，<span style="color: #ff0000;">如何使用工具表达信息架构，让用户用较少的时间和思考完成信息找寻及将一款工具用到极致人机合一才是王道</span>。但交互演示、团队沟通这两方面功效目前还没有工具和Axure媲美的。</p>
<p>关于Axure操作难度，阿石认为较难的无非是dynamic panel（动态面板，axure的层，可以制作弹出框、Tab等）和一些传值调用（可以赋予逻辑条件相关值，可以一次控制N个层），看看官方视频、 切合自己实际摸索基本也都会了，在这里推一下<a href="http://www.yintop.com/yintop/" target="_self">尹广磊兄</a>，我与广磊兄07年在网上相识，当时都在搞育儿项目。他的<a href="http://www.webppd.com/" target="_blank">webppd网站产品原型设计论坛</a>集中了国内原型设计的实战高手和各种axure实践经验分享，而他本身就是Axure大拿，为人热肠有求必应，且是axure.org域名的持有者，为Axure在中国产品人员的普及做了很大的贡献，可谓Axure在中国的布道者，有什么问题和想法可以去看看，看看总有收获。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/axure-and-guanglei/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Protonotes:在线原型注释工具</title>
		<link>http://www.ashnotes.com/protonotes/</link>
		<comments>http://www.ashnotes.com/protonotes/#comments</comments>
		<pubDate>Thu, 26 Nov 2009 08:54:40 +0000</pubDate>
		<dc:creator>ashnotes</dc:creator>
				<category><![CDATA[互联网]]></category>
		<category><![CDATA[信息架构]]></category>
		<category><![CDATA[axure]]></category>
		<category><![CDATA[protonotes]]></category>
		<category><![CDATA[原型]]></category>

		<guid isPermaLink="false">http://www.ashnotes.com/?p=248</guid>
		<description><![CDATA[
Protonotes，顾名思义，是由prototype和notes和两个单词组成的合成词，翻译为“原型注释”，之所以加上在线二字，是因为产品团队制作原型时可通过Protonotes官方提供的数据库和自己设定的数据库，把相关的注释文字写进数据库、团队协作查看，让文本注释在线随时随地查看，方便沟通需求的好工具。
使用Protonotes也超级简单，不须下载任何工具，通过网上注册，填写邮箱地址申请团队协作码（groupnumber）。注意查收来自info@protonotes.com的电子邮件，内容一般如下：
 
Welcome to Protonotes!
Using Protonotes is easy. Your Protonotes group number is EkfN4pUZF8BG. All you need to do is copy and paste the code below into the &#60;head&#62; of any page of your prototype:
&#60;script src=&#8221;http://www.protonotes.com/js/protonotes.js&#8221; type=&#8221;text/javascript&#8221;&#62;&#60;/script&#62;
&#60;script type=&#8221;text/javascript&#8221;&#62;
var groupnumber=&#8221;EkfN4pUZF8BG&#8220;;
&#60;/script&#62;
&#8230;&#8230;&#8230;.
这个回复邮件目地是告诉申请人两件事情：
一是团队协作码EkfN4pUZF8BG，这应该是随机并唯一的。任何团队成员共享一个团队协作码，便于统一使用查看；
二是在原型（如axure生成的index.html)插入 &#60;script&#62;&#60;/script&#62;JS代码段，便于加载Protonotes；
这里要说明的是JS代码段必须插在原型html页面的&#60;head&#62;和&#60;/head&#62;之间，并随时保证网络链接通畅。
下面是官方的测试页面和截图 http://www.protonotes.com/test-protonotes-out.html

团队任何成员通过嵌入的Protonotes导航，可以在原型页面任何位置新建、拖曳、查看备份注释标签，并传到Protonotes给用户设定官方数据库，为数据安全隐私起见用户自己也可以设定数据库来同步注释文本。无论如何，团队成员只要通过以下链接都可以查看注释文本（备注：其中groupnumber是都各自不同的，这里是阿石自己申请的）
http://www.protonotes.com/get-all-group-notes.html?groupnumber=EkfN4pUZF8BG
如果是自己设定的数据库，Protonotes会在设定数据库完成后分配一个privetedb码，具体查看
http://www.protonotes.com/get-all-group-notes.html?groupnumber=EkfN4pUZF8BG&#38;privatedb=SdT68P9ab0yp
AxureRP本身是带有注释功能，但在展示透明效果略差以及缺少注释同步备份功能上，虽然有团队share功能，但在给领导演示、产品展示方面Protonotes有可乘之机～稍微不足的是Protonote不支持中文，中文打注释时会出现乱码。另外我自己利用Protonotes的注释效果，也欢迎各位有兴趣的同学在上面打注释，：）http://www.ashnotes.com/experience/i-dong-game-center/



]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-250" title="Protonotes" src="http://www.ashnotes.com/wp-content/uploads/2009/11/Protonotes.jpg" alt="Protonotes" width="604" height="141" /></p>
<p>Protonotes，顾名思义，是由<span style="color: #ff0000;">proto</span>type和<span style="color: #ff0000;">notes</span>和两个单词组成的合成词，翻译为“<span style="color: #ff0000;">原型注释</span>”，之所以加上<span style="color: #ff0000;">在线</span>二字，是因为产品团队制作原型时可通过Protonotes官方提供的数据库和自己设定的数据库，把相关的注释文字写进数据库、团队协作查看，让文本注释在线随时随地查看，方便沟通需求的好工具。</p>
<p>使用Protonotes也超级简单，不须下载任何工具，通过<a title="protonotes注册" href="http://www.protonotes.com/sign-up-for-protonotes.html" target="_blank">网上注册</a>，填写邮箱地址申请团队协作码（<em>groupnumber</em>）。注意查收来自info@protonotes.com的电子邮件，内容一般如下：<br />
<span style="line-height: 20px;"><em> </em></span></p>
<p><span style="line-height: 20px;"><em>Welcome to Protonotes!</em></span></p>
<p style="line-height: 20px;"><em>Using Protonotes is easy. Your Protonotes group number is </em><strong><em>EkfN4pUZF8BG</em></strong><em>. All you need to do is copy and paste the code below into the </em><em>&lt;head&gt;</em><em> of any page of your prototype:</em></p>
<p style="line-height: 20px;"><em>&lt;script src=&#8221;</em><a style="color: #006699; text-decoration: underline; cursor: pointer;" href="http://www.protonotes.com/js/protonotes.js" target="_blank"><em>http://www.protonotes.com/js/protonotes.js</em></a><em>&#8221; type=&#8221;text/javascript&#8221;&gt;&lt;/script&gt;<br />
</em><em>&lt;</em><em>script type=&#8221;text/javascript&#8221;&gt;<br />
var groupnumber=&#8221;</em><strong><em>EkfN4pUZF8BG</em></strong><em>&#8220;;<br />
&lt;/script&gt;</em></p>
<p style="line-height: 20px;"><em>&#8230;&#8230;&#8230;.</em></p>
<p style="line-height: 20px;">这个回复邮件目地是告诉申请人两件事情：<br />
一是团队协作码<strong><em>EkfN4pUZF8BG</em></strong>，这应该是随机并唯一的。任何团队成员共享一个团队协作码，便于统一使用查看；<br />
二是在原型（如axure生成的index.html)插入 &lt;script&gt;&lt;/script&gt;JS代码段，便于加载Protonotes；</p>
<p style="line-height: 20px;">这里要说明的是JS代码段必须插在原型html页面的&lt;head&gt;和&lt;/head&gt;之间，并随时保证网络链接通畅。<br />
下面是官方的测试页面和截图 <a href="http://www.protonotes.com/test-protonotes-out.html">http://www.protonotes.com/test-protonotes-out.html</a></p>
<p style="line-height: 20px; text-align: center; "><img class="aligncenter size-full wp-image-252" title="Protonotes_test1" src="http://www.ashnotes.com/wp-content/uploads/2009/11/Protonotes_test1.jpg" alt="Protonotes_test1" width="886" height="282" /></p>
<p style="line-height: 20px; text-align: left; ">团队任何成员通过嵌入的Protonotes导航，可以在原型页面任何位置新建、拖曳、查看备份注释标签，并传到Protonotes给用户设定官方数据库，为数据安全隐私起见用户自己也可以<a href="https://ssl.perfora.net/protonotes.com/privatedbSecure.html" target="_blank">设定数据库</a>来同步注释文本。无论如何，团队成员只要通过以下链接都可以查看注释文本（备注：其中groupnumber是都各自不同的，这里是阿石自己申请的）</p>
<p style="line-height: 20px; text-align: left; "><a href="http://www.protonotes.com/get-all-group-notes.html?groupnumber=EkfN4pUZF8BG">http://www.protonotes.com/get-all-group-notes.html?</a><span style="color: #ff0000;"><a href="http://www.protonotes.com/get-all-group-notes.html?groupnumber=EkfN4pUZF8BG">groupnumbe</a></span><span style="color: #ff0000;"><a href="http://www.protonotes.com/get-all-group-notes.html?groupnumber=EkfN4pUZF8BG">r</a></span><a href="http://www.protonotes.com/get-all-group-notes.html?groupnumber=EkfN4pUZF8BG">=EkfN4pUZF8BG</a></p>
<p style="line-height: 20px; text-align: left; ">如果是自己设定的数据库，Protonotes会在设定数据库完成后分配一个privetedb码，具体查看</p>
<p style="line-height: 20px; text-align: left; "><a href="http://www.protonotes.com/get-all-group-notes.html?groupnumber=EkfN4pUZF8BG&amp;privatedb=SdT68P9ab0yp">http://www.protonotes.com/get-all-group-notes.html?<span style="color: #ff0000;">groupnumbe</span>r=EkfN4pUZF8BG&amp;<span style="color: #ff0000;">privatedb</span>=SdT68P9ab0yp</a></p>
<p style="line-height: 20px; text-align: left; ">AxureRP本身是带有注释功能，但在展示透明效果略差以及缺少注释同步备份功能上，虽然有团队share功能，但在给领导演示、产品展示方面Protonotes有可乘之机～稍微不足的是Protonote不支持中文，中文打注释时会出现乱码。另外我自己利用Protonotes的注释效果，也欢迎各位有兴趣的同学在上面打注释，：）<a href="http://www.ashnotes.com/experience/i-dong-game-center/">http://www.ashnotes.com/experience/i-dong-game-center/</a></p>
<p style="line-height: 20px; text-align: left; ">
<p style="line-height: 20px; text-align: left; ">
<p style="line-height: 20px;">
]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/protonotes/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>网上商城广告页是否需要面包屑导航</title>
		<link>http://www.ashnotes.com/breadcrumb-navigation-in-malladpage/</link>
		<comments>http://www.ashnotes.com/breadcrumb-navigation-in-malladpage/#comments</comments>
		<pubDate>Thu, 05 Nov 2009 11:47:41 +0000</pubDate>
		<dc:creator>ashnotes</dc:creator>
				<category><![CDATA[信息架构]]></category>
		<category><![CDATA[电子商务]]></category>
		<category><![CDATA[广告页]]></category>
		<category><![CDATA[面包屑]]></category>
		<category><![CDATA[面包屑导航]]></category>

		<guid isPermaLink="false">http://www.ashnotes.com/?p=234</guid>
		<description><![CDATA[
【背景知识】 
电子商务在中国各地四处开花，深度运营是任何B2C团队日常工作的必备思想，根据市场策略、产品特征，需要设计师制作各种各样的专题页、促销页，这里同统称“广告页”。
 面包屑导航，又叫层级菜单，之所以叫面包屑导航，是起源于格林童话中hansel 和 gretel仍在森林的面包屑踪迹，而防止自己迷路。可用性大师Jakob在起官网 《面包屑导航在主流网上商城广告页的现状》
 广告页作为各大网上商城搞活动运营的必备良药，其在网站的层级结构中一般为“首页 &#62; 广告页”的二级模式，为了维护管理，可能还需要“首页 &#62; 专题 &#62; 广告页”等更多层级模式（这一点可在各大网站链接结构可以看出来）。然而广告页作为市场领导宏伟战略的高地、页面设计师肆意发挥艺术才华的自留地，面包屑导航却甚少得到二者的青睐，如： 
 
 
 凡客的广告页 http://www.vancl.com/zhuanti/yrf_091104.htm 没有面包屑导航
 拍拍的广告页 http://www.paipai.com/promote/2009/10/lf/?PTAG=20041.5.4 没有面包屑导航
 京东的广告页http://market.360buy.com/hd/ganentehui1091103/index.htm 没有面包屑导航
 新蛋的广告页http://www.newegg.com.cn/xdv/CommonSale.aspx?SysNo=435&#38;cm_sp=insitebulliten-_-Campus-ambassador-_-Christy 有面包屑导航

看到这些主流的网上商城，还有无论是淘宝还是鼎鼎大名的amazon，广告页都没有标识面包屑，让人甚是不解。那不禁让人发问：广告页不需要面包屑导航吗？
 
【为什么需要面包屑导航?】
 Jakob在文章指出，80%美国年度获奖的网站都使用了面包屑导航，而之所以使用，无外基于以下几点：

 

 显示用户浏览网站的当前位置
 一次点击直达网站结构最高级（首页） 
 在用户可用性测试中，用户使用面包屑导航没有发生问题
 占页面很少位置（潜台词：既然很少，为何不用呢？） 

【网上商城广告页是否需要面包屑导航?】
按照Jakob说法，究竟是否使用面包屑导航，起实质是偏重网站结构与还是照顾用户浏览行为问题。试想一个用户刚来一个网站（首页），或才浏览了一个页面，对用户来说“我在哪里并不重要，重要的是网站能给我带来啥”，这时网站结构是主要问题，如何在页面设计中给用户造成很好的逻辑清晰、来回自如的页面效果是用户期望的；而当用户逛了N个页面，从A目录跳到B目录，从公告跳到专题，来来回回，象“hansel 和 gretel迷路”的那样的用户体验感就会产生，此时照顾用户浏览行为就成为主要矛盾，面包屑导航就成了必要。
【小结】
广告页作为一个单独页面，来源路径无外是网上商城首页广告、营销电子邮件、第三方网站广告，在此之前可以说用户浏览前置路径是NULL，用户在此网上的浏览轨迹几乎是零，如何给用户呈现最佳页面效果是主要的，因此“占用空间、破坏美感”的面包屑导航是可以缺失的。但若是方便用户查看历史广告页管理，由于在在“首页&#62;广告页&#8221;中加入了“首页&#62;广告列表页&#62;广告页”要给用户呈现列表，此时面包屑导航则不可缺少。
]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-236" title="hansel_and_gretel" src="http://www.ashnotes.com/wp-content/uploads/2009/11/hansel_and_gretel.jpg" alt="hansel_and_gretel" width="400" height="400" /></p>
<p><strong>【背景知识】 </strong></p>
<p>电子商务在中国各地四处开花，深度运营是任何B2C团队日常工作的必备思想，根据市场策略、产品特征，需要设计师制作各种各样的专题页、促销页，这里同统称“广告页”。</p>
<p><span style="background-color: #ffffff; "> 面包屑导航，又叫层级菜单，之所以叫面包屑导航，是起源于格林童话中hansel 和 gretel仍在森林的面包屑踪迹，而防止自己迷路。可用性大师Jakob在起官网<strong><a style="background-color: #ffffff; " title="面包屑导航" onclick="javascript:urchinTracker('/outgoing/useit');&gt;《面包屑导航——提高可用性》&lt;/a&gt; 中提到面包屑导航是使用一行文字了显示一个页面在网站层级结构中的当前位置，同时会给用户便捷浏览带来好处的导航工具。文章抬头也是hansel 和 gretel这两个小家伙封面图。&lt;/span&gt;&lt;/p&gt; &lt;p&gt;&lt;span style=" href="http://www.useit.com/alertbox/breadcrumbs.html"> 《<span style="font-weight: normal;">面包屑导航在主流网上商城广告页的现状》</span><br />
</a> </strong>广告页作为各大网上商城搞活动运营的必备良药，其在网站的层级结构中一般为“首页 &gt; 广告页”的二级模式，为了维护管理，可能还需要“首页 &gt; 专题 &gt; 广告页”等更多层级模式（这一点可在各大网站链接结构可以看出来）。然而广告页作为市场领导宏伟战略的高地、页面设计师肆意发挥艺术才华的自留地，面包屑导航却甚少得到二者的青睐，如： </span><a style="background-color: #ffffff; " title="面包屑导航" onclick="javascript:urchinTracker('/outgoing/useit');&gt;《面包屑导航——提高可用性》&lt;/a&gt; 中提到面包屑导航是使用一行文字了显示一个页面在网站层级结构中的当前位置，同时会给用户便捷浏览带来好处的导航工具。文章抬头也是hansel 和 gretel这两个小家伙封面图。&lt;/span&gt;&lt;/p&gt; &lt;p&gt;&lt;span style=" href="http://www.useit.com/alertbox/breadcrumbs.html"></a></p>
<p><a style="background-color: #ffffff; " title="面包屑导航" onclick="javascript:urchinTracker('/outgoing/useit');&gt;《面包屑导航——提高可用性》&lt;/a&gt; 中提到面包屑导航是使用一行文字了显示一个页面在网站层级结构中的当前位置，同时会给用户便捷浏览带来好处的导航工具。文章抬头也是hansel 和 gretel这两个小家伙封面图。&lt;/span&gt;&lt;/p&gt; &lt;p&gt;&lt;span style=" href="http://www.useit.com/alertbox/breadcrumbs.html"> </a></p>
<ul><a style="background-color: #ffffff; " title="面包屑导航" onclick="javascript:urchinTracker('/outgoing/useit');&gt;《面包屑导航——提高可用性》&lt;/a&gt; 中提到面包屑导航是使用一行文字了显示一个页面在网站层级结构中的当前位置，同时会给用户便捷浏览带来好处的导航工具。文章抬头也是hansel 和 gretel这两个小家伙封面图。&lt;/span&gt;&lt;/p&gt; &lt;p&gt;&lt;span style=" href="http://www.useit.com/alertbox/breadcrumbs.html"> </a></p>
<li><a style="background-color: #ffffff; " title="面包屑导航" onclick="javascript:urchinTracker('/outgoing/useit');&gt;《面包屑导航——提高可用性》&lt;/a&gt; 中提到面包屑导航是使用一行文字了显示一个页面在网站层级结构中的当前位置，同时会给用户便捷浏览带来好处的导航工具。文章抬头也是hansel 和 gretel这两个小家伙封面图。&lt;/span&gt;&lt;/p&gt; &lt;p&gt;&lt;span style=" href="http://www.useit.com/alertbox/breadcrumbs.html"><span style="background-color: #ffffff; "> 凡客的广告页 </span></a><a href="http://www.vancl.com/zhuanti/yrf_091104.htm">http://www.vancl.com/zhuanti/yrf_091104.htm</a> 没有面包屑导航</li>
<li><span style="background-color: #ffffff; "> 拍拍的广告页 <a href="http://www.paipai.com/promote/2009/10/lf/?PTAG=20041.5.4">http://www.paipai.com/promote/2009/10/lf/?PTAG=20041.5.4</a> 没有面包屑导航</span></li>
<li><span style="background-color: #ffffff; "> 京东的广告页<a href="http://market.360buy.com/hd/ganentehui1091103/index.htm">http://market.360buy.com/hd/ganentehui1091103/index.htm</a> 没有面包屑导航</span></li>
<li><span style="background-color: #ffffff; "> 新蛋的广告页<a href="http://www.newegg.com.cn/xdv/CommonSale.aspx?SysNo=435&amp;cm_sp=insitebulliten-_-Campus-ambassador-_-Christy">http://www.newegg.com.cn/xdv/CommonSale.aspx?SysNo=435&amp;cm_sp=insitebulliten-_-Campus-ambassador-_-Christy</a> 有面包屑导航</span></li>
</ul>
<p>看到这些主流的网上商城，还有无论是<a href="http://www.mall.taobao.com/go/act/other/waitui090706.php?ad_id=&amp;am_id=1300122751fd2117c022&amp;cm_id=&amp;pm_id=" target="_blank">淘宝</a>还是鼎鼎大名的<a href="http://www.amazon.com/gp/goldbox/ref=cs_top_nav_gb27" target="_blank">amazon</a>，广告页都没有标识面包屑，让人甚是不解。那不禁让人发问：广告页不需要面包屑导航吗？<br />
<span style="background-color: #ffffff; "> </span></p>
<p><span style="background-color: #ffffff; "><strong>【为什么需要面包屑导航?】<br />
</strong> Jakob在文章指出，80%美国年度获奖的网站都使用了面包屑导航，而之所以使用，无外基于以下几点：<strong><br />
</strong></span></p>
<p><strong> </strong></p>
<ul>
<li><span style="background-color: #ffffff; font-weight: normal; "><strong> </strong>显示用户浏览网站的当前位置</span></li>
<li><span style="background-color: #ffffff; font-weight: normal; "> 一次点击直达网站结构最高级（首页） </span></li>
<li><span style="background-color: #ffffff; font-weight: normal; "> 在用户可用性测试中，用户使用面包屑导航没有发生问题</span></li>
<li style="text-align: left; "><span style="background-color: #ffffff; font-weight: normal; "> 占页面很少位置（潜台词：既然很少，为何不用呢？） </span></li>
</ul>
<p><strong>【网上商城广告页是否需要面包屑导航?】</strong></p>
<p>按照Jakob说法，究竟是否使用面包屑导航，起实质是偏重网站结构与还是照顾用户浏览行为问题。试想一个用户刚来一个网站（首页），或才浏览了一个页面，对用户来说“我在哪里并不重要，重要的是网站能给我带来啥”，这时网站结构是主要问题，如何在页面设计中给用户造成很好的逻辑清晰、来回自如的页面效果是用户期望的；而当用户逛了N个页面，从A目录跳到B目录，从公告跳到专题，来来回回，象“hansel 和 gretel迷路”的那样的用户体验感就会产生，此时照顾用户浏览行为就成为主要矛盾，面包屑导航就成了必要。</p>
<p><strong>【小结】</strong></p>
<p>广告页作为一个单独页面，来源路径无外是网上商城首页广告、营销电子邮件、第三方网站广告，在此之前可以说用户浏览前置路径是NULL，用户在此网上的浏览轨迹几乎是零，如何给用户呈现最佳页面效果是主要的，因此“占用空间、破坏美感”的面包屑导航是可以缺失的。但若是方便用户查看历史广告页管理，由于在在“首页&gt;广告页&#8221;中加入了“首页&gt;广告列表页&gt;广告页”要给用户呈现列表，此时面包屑导航则不可缺少。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/breadcrumb-navigation-in-malladpage/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>站内搜索的演化——淘宝篇</title>
		<link>http://www.ashnotes.com/evolution-of-internal-site-search-at-taobao/</link>
		<comments>http://www.ashnotes.com/evolution-of-internal-site-search-at-taobao/#comments</comments>
		<pubDate>Tue, 20 Oct 2009 13:10:40 +0000</pubDate>
		<dc:creator>ashnotes</dc:creator>
				<category><![CDATA[信息架构]]></category>
		<category><![CDATA[电子商务]]></category>
		<category><![CDATA[信息设计]]></category>
		<category><![CDATA[淘宝]]></category>
		<category><![CDATA[站内搜索]]></category>

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




淘宝今天正式公测它的站内搜索.在“大淘宝”的思路下，之前风传淘宝会推出一款搜索引擎以和百度抗衡，但就现在发布的公测效果来看，淘宝搜索还是面向于淘宝的卖家和买家，而不是所谓的&#8221;通用搜索引擎&#8221;.也有人称是独立搜索，由于采用的是二级域名，我们依然可以将其称为站内搜索的升级版。由于上次在《谈谈站内搜索》中提到淘宝，通过站内搜索的易用性、信息设计方面对其深入探讨，分享给大家。
1 提升搜索易用性，挖掘技术也很重要
 
通过比较旧版的淘宝站内搜索，和新的升级版的淘宝站内搜索，会发现一些有趣的事情。例如以“魅族”关键词为例，旧版得出的结果为“在当前分类中共找到“魅族 ”宝贝1394件” ,而在新版中得出的结果为“找到相关宝贝27286件”。由此可见在搜索数量在新版比旧版“挖到”得更多。在精确性的比较上，旧版的搜索原理是在“魅族”其所属分类上进行检索，搜索前几项都是魅族的MP4产品；而在新版中出现的则是人气极高的M8，当然也是“装作用户”的我想要的。因此，在搜索的数量和精确度上，新版提升了原版站内搜索的易用性。另外对比二者的链接也有意思：

淘宝站内搜索旧：http://search1.taobao.com/browse/0/n-g,67enpzi&#8212;&#8212;-2&#8212;&#8212;-b&#8211;40&#8211;commend-0-all-0.htm?ssid=e-s1&#38;at_topsearch=1
淘宝站内搜索新：http://search.taobao.com/search?q=%F7%C8%D7%E5

 以上是以“魅族”为关键词作为搜索案例，能辨析出淘宝搜索的技术转变 ，如果对比于百度的链接，则淘宝的志向可不容小觑。
 百度搜索：http://www.baidu.com/s?wd=%F7%C8%D7%E5 
 2 以用户为中心的信息设计
 
信息设计是是“人们对信息进行处理的技巧和实践，通过信息设计可以提高人们应用信息的效能”。站内搜索的目地是在纷繁芜杂的商品大海中找到用户心仪的那颗“针”，中间步骤是越少越好，前提是又不能丧失搜索结果的精确性。淘宝站内搜索旧版的搜索结果中首屏一般呈现不是搜索结果，而是杂七杂八的分类、筛选条件、以及淘宝商城的“横插一脚”，整个搜索结果的信息设计没有照顾“用户要看搜索结果”的核心需求，可谓是陷入了泥淖，大大降低了用户查询结果、“寻针”的效率。

新版不同，继承了旧版的布局，在砍掉过多分类、去掉过多筛选、对重要信息字段的信息设计，给人的感觉是清新、简单、易用，用户对搜索核心诉求得到了释放。如以下细节

B区淘宝推荐类目、将相关搜索的智能推荐提到筛选区的位置之上加以强调，
C区对人气TAB标签内容中用户关注的销量、运费、价格等信息的设计重视，淘宝商城以icon小图标的形式建议区分，而非以广告栏的形式既节约、有效利用页面区域，又能保证搜索的公正性；
D区掌柜热卖虽然压缩了旧版的信息展示高度，信息集中、一览无余的同时，还提示卖家做“直通车”的广告，对卖家用户来说这样的信息设计也是个提醒作用。

（阿石备注：据腾讯科技，淘宝高管路鹏称不做竞价排名，要学Google那样在搜索结果右侧推出广告位）
 3 对产品质量的谦卑，关注用户反馈
 在现在互联网大行于世的“快速发布，逐次迭代”的产品发布模式，产品的变动在所难免，对应的对产品质量缺要求越来越低，在这一点尤其表现在对用户反馈的重视上。在新版淘宝站内搜索底部，一句“搜的不爽？！我要说两句”深获我心。看看淘宝自己认为不足的选项也很有意思，前四项都聚焦与搜索的精确性上，其次才是信息设计，再次是搜索响应速度，无论与否，这都是构成搜索用户体验的要素。

淘宝自从去年屏蔽百度爬虫，到今天的独立发展站内搜索，已经在实质上实践着站内搜索的演化，下一步该如何走？或许百度的框运算也可供其未来发展参考模式，欢迎阅读阿石前面写的《谈谈站内搜索》，敬请指正！
]]></description>
			<content:encoded><![CDATA[<div class="mceTemp">
<dl id="attachment_222" class="wp-caption alignnone" style="width: 590px;">
<dt class="wp-caption-dt"><img class="size-full wp-image-222" title="淘宝_搜索" src="http://www.ashnotes.com/wp-content/uploads/2009/10/淘宝_搜索1.jpg" alt="淘宝站内搜索" width="580" height="136" /></dt>
</dl>
</div>
<p>淘宝今天<a href="http://tech.qq.com/a/20091020/000265.htm" target="_blank">正式公测</a>它的<a href="http://search.taobao.com">站内搜索</a>.在“大淘宝”的思路下，之前风传淘宝会推出一款搜索引擎以和百度抗衡，但就现在发布的公测效果来看，淘宝搜索还是面向于淘宝的卖家和买家，而不是所谓的&#8221;通用搜索引擎&#8221;.也有人称是独立搜索，由于采用的是二级域名，我们依然可以将其称为站内搜索的升级版。由于上次在<a title="谈谈站内搜索——阿石的日志" href="http://www.ashnotes.com/talk-about-internal-site-search/" target="_self">《谈谈站内搜索》</a>中提到淘宝，通过站内搜索的易用性、信息设计方面对其深入探讨，分享给大家。</p>
<p><strong>1 提升搜索易用性，挖掘技术也很重要</strong></p>
<p><strong> </strong></p>
<p>通过比较旧版的淘宝站内搜索，和新的升级版的淘宝站内搜索，会发现一些有趣的事情。例如以“魅族”关键词为例，旧版得出的结果为“<em><a href="http://search1.taobao.com/browse/0/n-g,67enpzi-------2-------b--40--commend-0-all-0.htm?ssid=e-s1&amp;at_topsearch=1" target="_blank">在当前分类中共找到“</a></em><strong><em><a href="http://search1.taobao.com/browse/0/n-g,67enpzi-------2-------b--40--commend-0-all-0.htm?ssid=e-s1&amp;at_topsearch=1" target="_blank">魅族 </a></em></strong><em><a href="http://search1.taobao.com/browse/0/n-g,67enpzi-------2-------b--40--commend-0-all-0.htm?ssid=e-s1&amp;at_topsearch=1" target="_blank">”宝贝</a></em><span style="color: #ff5500 !important; font-weight: 700; position: static;"><em><a href="http://search1.taobao.com/browse/0/n-g,67enpzi-------2-------b--40--commend-0-all-0.htm?ssid=e-s1&amp;at_topsearch=1" target="_blank"><span style="color: #ff0000;">1394</span></a></em></span><em><a href="http://search1.taobao.com/browse/0/n-g,67enpzi-------2-------b--40--commend-0-all-0.htm?ssid=e-s1&amp;at_topsearch=1" target="_blank">件</a></em>”<strong> ,</strong>而在新版中得出的结果为“<em><a href="http://search.taobao.com/search?q=%F7%C8%D7%E5" target="_blank">找到相关宝贝</a></em><em><a href="http://search.taobao.com/search?q=%F7%C8%D7%E5" target="_blank"><span style="color: #ff0000;"><strong>27286</strong></span></a></em><a href="http://search.taobao.com/search?q=%F7%C8%D7%E5" target="_blank">件</a>”。由此可见在搜索数量在新版比旧版“挖到”得更多。在精确性的比较上，旧版的搜索原理是在“魅族”其所属分类上进行检索，搜索前几项都是魅族的MP4产品；而在新版中出现的则是人气极高的M8，当然也是“装作用户”的我想要的。因此，在搜索的数量和精确度上，新版提升了原版站内搜索的易用性。另外对比二者的链接也有意思：</p>
<ul>
<li><span style="background-color: #ffffff;"><em><strong>淘宝站内搜索旧</strong></em>：<a href="http://search1.taobao.com/browse/0/n-g,67enpzi-------2-------b--40--commend-0-all-0.htm?ssid=e-s1&amp;at_topsearch=1">http://search1.taobao.com/browse/0/n-g,67enpzi&#8212;&#8212;-2&#8212;&#8212;-b&#8211;40&#8211;commend-0-all-0.htm?ssid=e-s1&amp;at_topsearch=1</a></span></li>
<li><span style="background-color: #ffffff;"><strong><em>淘宝站内搜索新</em></strong><em>：<span style="font-style: normal; background-color: #ffffff;"><a href="http://search.taobao.com/search?q=%F7%C8%D7%E5">http://search.taobao.com/search?q=<span style="color: #ff0000;">%F7%C8%D7%E5</span></a></span></em></span></li>
</ul>
<p><span style="background-color: #ffffff;"> 以上是以“魅族”为关键词作为搜索案例，能辨析出淘宝搜索的技术转变 ，如果对比于百度的链接，则淘宝的志向可不容小觑。<br />
<strong><em> 百度搜索</em></strong>：<a href="http://www.baidu.com/s?wd=%F7%C8%D7%E5">http://www.baidu.com/s?wd=<span style="color: #ff0000;">%F7%C8%D7%E5</span></a><span style="color: #ff0000;"> </span></span></p>
<p><strong> 2 以用户为中心的信息设计</strong></p>
<p><strong> </strong></p>
<p><a title="信息设计" href="http://baike.baidu.com/view/2228852.htm" target="_blank">信息设计</a>是是“人们对信息进行处理的技巧和实践，通过信息设计可以提高人们应用信息的效能”。站内搜索的目地是在纷繁芜杂的商品大海中找到用户心仪的那颗“针”，中间步骤是越少越好，前提是又不能丧失搜索结果的精确性。淘宝站内搜索旧版的搜索结果中首屏一般呈现不是搜索结果，而是杂七杂八的分类、筛选条件、以及淘宝商城的“横插一脚”，整个搜索结果的信息设计没有照顾“用户要看搜索结果”的核心需求，可谓是陷入了泥淖，大大降低了用户查询结果、“寻针”的效率。<br />
<img class="alignnone size-full wp-image-227" title="淘宝_搜索_结果页" src="http://www.ashnotes.com/wp-content/uploads/2009/10/淘宝_搜索_结果页.jpg" alt="淘宝_搜索_结果页" width="580" height="333" /></p>
<p>新版不同，继承了旧版的布局，在砍掉过多分类、去掉过多筛选、对重要信息字段的信息设计，给人的感觉是清新、简单、易用，用户对搜索核心诉求得到了释放。如以下细节</p>
<ul>
<li><span style="background-color: #ffffff;">B区淘宝推荐类目、将相关搜索的智能推荐提到筛选区的位置之上加以强调，</span></li>
<li><span style="background-color: #ffffff;">C区对人气TAB标签内容中用户关注的销量、运费、价格等信息的设计重视，淘宝商城以icon小图标的形式建议区分，而非以广告栏的形式既节约、有效利用页面区域，又能保证搜索的公正性；</span></li>
<li><span style="background-color: #ffffff;">D区掌柜热卖虽然压缩了旧版的信息展示高度，信息集中、一览无余的同时，还提示卖家做<a href="http://www.taobao.com/go/act/other/zhitongchezx.php" target="_blank">“直通车</a>”的广告，对卖家用户来说这样的信息设计也是个提醒作用。</span></li>
</ul>
<p><span style="background-color: #ffffff;"><em>（阿石备注：<a href="http://tech.qq.com/a/20091020/000265.htm" target="_blank">据腾讯科技</a>，淘宝高管路鹏称不做竞价排名，要学Google那样在搜索结果右侧推出广告位）</em></span></p>
<p><strong> 3 对产品质量的谦卑，关注用户反馈</strong></p>
<p><strong> </strong>在现在互联网大行于世的“快速发布，逐次迭代”的产品发布模式，产品的变动在所难免，对应的对产品质量缺要求越来越低，在这一点尤其表现在对用户反馈的重视上。在新版淘宝站内搜索底部，一句“<span style="color: #ff0000;">搜的不爽？！我要说两句</span>”深获我心。看看淘宝自己认为不足的选项也很有意思，前四项都聚焦与搜索的精确性上，其次才是信息设计，再次是搜索响应速度，无论与否，这都是构成搜索用户体验的要素。<br />
<img class="alignnone size-full wp-image-229" title="淘宝_搜索_反馈" src="http://www.ashnotes.com/wp-content/uploads/2009/10/淘宝_搜索_反馈.jpg" alt="淘宝_搜索_反馈" width="580" height="265" /></p>
<p>淘宝自从去年屏蔽百度爬虫，到今天的独立发展站内搜索，已经在实质上实践着站内搜索的演化，下一步该如何走？或许百度的框运算也可供其未来发展参考模式，欢迎阅读阿石前面写的<a title="站内搜索" href="http://www.ashnotes.com/talk-about-internal-site-search/" target="_self">《谈谈站内搜索》</a>，敬请指正！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/evolution-of-internal-site-search-at-taobao/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>信息架构的十大误区</title>
		<link>http://www.ashnotes.com/top10-mistakes-of-information-architecture/</link>
		<comments>http://www.ashnotes.com/top10-mistakes-of-information-architecture/#comments</comments>
		<pubDate>Fri, 09 Oct 2009 13:13:52 +0000</pubDate>
		<dc:creator>ashnotes</dc:creator>
				<category><![CDATA[信息架构]]></category>
		<category><![CDATA[导航设计]]></category>
		<category><![CDATA[框架结构]]></category>
		<category><![CDATA[站内搜索]]></category>

		<guid isPermaLink="false">http://www.ashnotes.com/?p=199</guid>
		<description><![CDATA[
Jakob Nielsen是可用性工程方面的大师，在其可用性信息技术网站上有一篇关于信息架构方面的文章，觉得不错，翻译如下：


信息架构的十大误区



 内容大概：框架结构和导航设计要紧密联系，且要和站内搜索、整个子网站相辅相成。要知道信息架构的复杂度、不一致性、隐藏的选项以及臃肿的用户界面设计等因素妨碍了用户寻找她们想要的信息,Jakob Nielsen从两个方面来阐述信息架构的十大误区：一是框架结构误区、二是导航设计误区。


一、框架结构误区


1、没有框架结构


最显著的框架结构问题是当产品设计师将网站视为一个混乱的大沼泽地，对个性化类目忽视一般组织结构原理。是的，用户可能通过使用站内搜索、当下促销的链接、外部网站来到这个大沼泽地并有可能找到“大鱼”。但无论用户怎么挖掘也仅此而已，因为她们没有机会了解网站的其他产品信息和当下相关的类目。而这个问题普遍存在于那些将文章资讯页、产品详情页视为独立单元而不牵涉其他相关信息的新网站和以分类为基础的电子商务网站当中。毫无疑问，用户会立即离开这样的网站。

2、没有整合过的站内搜索与框架结构


我们老早就知道用户表现出的由搜索主导上网行为的偏好(阿石注：例如传统购物习惯AIDMA到现在AISAS的转变）。但这并不意味着搜索就是她们所需要的全部。通过搜索来到某个页面的概率好比一个伞兵空降到一个指定城市，就像你要去巴黎，你期望在那里着陆而不是在阿姆斯特丹（荷兰的首都）那样，因此在任何情况下，你都不太可能精确到达你最喜欢餐厅的门旁。要到达那儿，你还得亲自走走，甚至需要打的。与此类似，用户经常需要在搜索“着陆地”附近可浏览其他相关性内容（阿石注：类似于百度的相关搜索和淘宝站内搜索的智能推荐）。

当然，局部导航只有在一个网站拥有一个良好的框架结构去定义相关性内容的前提下才能起到作用（看看误区1就知道）。但是产品设计师必须向用户展示局部可选项，如果针对用户的查询的关键词显示其他相关的词语的话效果更好。

在每次搜索触发展示了它的结果页和网站结构，SERP(搜索引擎结果页）的可用性则得到提高。象Google那样的外部通用搜索引擎则做不到上述效果，因为其并不了解网站内部的框架结构以及其自身的导航维度展示效果和一般通用网站别无二致。尽管如此，你还是应了解你的网站的框架结构，然后将这些信息集成到你的SERP上去（这一点很像站内搜索与通用搜索的区别，详情请见阿石的日志《谈谈站内搜索》）。

然而非常不幸的是，大多数网站并没有将站内搜索与网站的框架结构紧密结合起来，这一点被另外一个通病放大：导航设计中并没有显示出用户的当前位置。也就是说，当用户点击一个搜索结果之后，她们并不能决定她们在网站哪个位置——比如当你搜索到裤子，却点击了一个鞋子，但这时没有其他方法告诉用户查看更多裤子。

3、登陆页消失掉的分类目录


我们强烈建议网站需要建立一系列的分类目录，这样每个分类类目都链接到她们各自的登陆页（阿石注：langding page，对应于网络推广或营销的概念的某个页面，详情请看)，使得用户可以预览每个分类的视图。有的网站放弃了这个预览页面，只是简单的提供链接直接链到详情页。这不仅会减少网站的页面数，而且当如果没有二级次要页面被显著标明，用户会完全不理解网站的范围，错过重要的细节、产品和服务信息。

分类目录页还可以对SEO有帮助，因为它们是用户搜索一个特定产品、服务或信息后最有可能“着陆”的地方（阿石注：一般类似二级页面的分类目录页关键词丰富且密集，更容易被搜索引擎抓取靠前）。分类目录页也还是解决误区2中的问题，因为她们可以在搜索将用户带到一个完全讲究细节的详情页时帮助用户在网站的一级或二级结果跳跃浏览（面包屑导航就是拥有这样的功能方便用户很容易向上一级结构返回）

4、过多的层次结构


 与现实世界相比，在线虚拟世界最大的好处是个体类目可以存在于多个地方。因为网站按照多个维度层次对产品信息和其他内容信息进行区分，他们可以帮助用户浏览其他相关类目、提供多方面的产品信息空间且可管理配置的列表，以满足用户在这方面的主要需求。

这样的处理方法大多是好的，但过多的层次结构往往变成为依赖性很强的“拐杖”。相比花很多时间建立几个直觉性良好且逻辑严密的高级分类类目而言，团队往往会匆忙完成这个进程，随之会建立数以倍计的的弱分类和产品列表。那么可用性的影响？用户花了大把时间挣扎在高级分类类目上，当他们在多个维度层次上发现次级类目时会被搞得晕头转向。

伴随着太多的分类选项和太多的层次结构，用户被迫艰难思考下一步该怎么走，并导致用户质疑网站提供的信息线索。这些产生在早期网站体验过程中的不自信，会衍生到用户往下的浏览体验过程，并对最终结果带来消极影响（如放弃购物车）

5、次级域名站点与微型站点和主打站点融合度差


 由于老套的市场营销策略，被遗弃的微型站点（阿石注:在大型集团中由于产品丰富、营销策略多样性，而针对某个产品或营销而推出独立域名的网站站点）大量充斥在互联网各领域中。在你发布一个新产品时，一个专用的微型站点会起到良好作用，但到了下一个年度，他将会削弱你的在线市场营销策略和你的在线形象。

网站设计是为了时代潮流而设计，考虑一下你的设计在5年以后看是如何表现的。

放弃建立独立站点，在主打站点的次级域名下放置新的信息的做法明显是最好的，但也要注意的是你依然需要在网站的整个架构中集成这些二级域名站点（阿石注:其实也未必，象中国移动集团和各省市网站主要定位于咨询和业务办理，而他其他众多子网站更倾向于搞独立域名、独立运作）。例如，在微型站点和二级域名站点中，我们常常发现产品详情页下面忘记了放置公司和组织相关信息，再比如很多站点在主站点的站内搜索很糟糕的对他们的次级域名站点和微型站点的搜索结果予以展示。

二、导航设计的错误


6、不可见的导航选项


 网站信息架构最糟糕的错误当然是没有导航，但这种情况现在已经很少见了以至我没有必要讨论它。然而，用户不能看到的有可能也是不存在的；不可见的导航几乎和没有导航一样糟糕。


 发觉识别导航不应该成为用户一项主要任务：一定要在页面上让导航永远可见。小孩子很喜欢对网站导航玩“扫雷”（在屏幕上发滚动鼠标，以发现暗藏的东东），然而青少年不会喜欢这样做，成年人则更是厌恶。


 类似的，无论是导航本身看上去很像横幅广告，还是你将他放到其他如看上去像广告以至用户会视而不见的组件旁边，你都应该抵制导航不可见。即使导航在电脑显示屏幕上，如果用户不看它，导航依然不可谓不可见。


7、不可控制的导航组件


一般来说，任何移动和跳动的组件会降低网站的可用性，尤其是当用户正尝试可寻时导航会发生移动。用户会把注意力集中到更高级的去哪儿的问题层面上，而不是去那些更低级的怎样操作图形用户界面GUI上来。

在这里两大常见阻碍是展开和隐藏内容的rollover（阿石注：一般是指导航菜单的展开和鼠标移上去的链接状态），以及那些移动、旋转或循环的组件。用户一般来说对这些组件并不感冒，而在这里将这些组件囊括到网站上的产品设计师和程序员们严重低估了用户沮丧感而带来的商业影响。

8、不一致导航


 导航存在的目的是为了帮助用户，而不是为了困惑她们。导航的设计应该是让用户立马可以了解到，并将这种理解贯穿到他浏览整个网站过程中。然而糟糕的是，很多网站在用户浏览进程中呈现出不同的导航特征，不同的导航来来去去，使得用户感到无法自我掌控，如她们会问“我怎样才能将那个菜单栏选项搞回来呢？我之前页面中可是看到过的啊”(阿石注：其实在现行电子商务网站如淘宝、拍拍都没有一个完全不变的全局导航，或受制于市场策略、二级页面定位、设计安排而出现两个以上的全局导航）
尽管全局导航并不是一个网站最受欢迎的组件，而它的一致性特征表达了其重要内涵：全局导航是帮助用户了解她们在哪儿以及在迷路时她们怎样可以轻松掌控回到网站的顶级结构上去的一座灯塔。

9、太多的导航技术



 在&#60;&#60;seminar on navigation design&#62;&#62;中有了解到竟然有25种不同的网站导航技术方法。每个技术方法都有其自身的可用性优势和潜在的缺点，而这些就会导致团队将精力集中在设计的权衡上来——也就说何时运用导航的何种形式（阿石注：导航会随着网站的发展、市场营销而变动导航形式，这个特点体现在电子商务网站如amazon、红孩子、深圳移动网上商城等）

有一点是肯定的：每个导航技术都有在特定网站和企业网中有其一席之地。但是，如果你将上面提到的25种技术全部派上用场的话，你会发现你得到的不是每个技术优势之和，甚至更少。（阿石注：朴素的哲学思想：局部之和小于全部）

为了吸引用户的眼球而竞赛吧！太多的地方需要了解，切忌哗众取宠！

10、伪装的菜单选项


 
 在过去，伪装的菜单选项这种误区高高在上，但幸运的是现在好多了，没有过去普遍。然而，依然有很多网站继续将她们的标签和其他的导航选项伪装成她们自己的专用组件。

除了继续困惑用户外，伪装的导航也会妨害站内搜索：用户不能找到她们叫不上号的东东，即使你提供了同义词，主导航带来了额外的SEO权重，对那些优化没有用户关注的查询来说无疑是种浪费。

老词就是好。当用户了解了她们自己的选择，她们更愿意选择其中合适的一个。将文案说的清楚明白、简洁简约些。如果用户不能理解某个菜单选项，她们就一般不大可能点击它。而搞笑的是，一些公司为最新和   最重要的产品冠以很炫目的名称而累此不疲，这样就被双管来福枪将自己给毙了。
这篇文章直接翻译的成分较多，比较生硬，可看看荣荣的成果：http://hi.baidu.com/xiaoxingrong13/blog/item/9846f802dafbb1064afb5170.html
相关阅读：《简化信息架构 》



]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft" title="信息架构" src="http://t.douban.com/lpic/s3431996.jpg" alt="" width="200" height="264" /><br />
Jakob Nielsen是可用性工程方面的大师，在其<a id="xbrk" style="color: #551a8b;" title="可用性信息技术网站" href="http://www.useit.com/" target="_blank">可用性信息技术网站</a>上有一篇关于信息架构方面的<a id="g2.j" style="color: #551a8b;" title="文章" href="http://www.useit.com/alertbox/ia-mistakes.html" target="_blank">文章</a>，觉得不错，翻译如下：</p>
<div style="margin-top: 0px; margin-bottom: 0px;"><span style="background-color: #ffffff;"><strong><span style="font-size: medium;"><br />
</span></strong></span></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><span style="background-color: #ffffff;"><strong><span style="font-size: medium;">信息架构的十大误区</span></strong></span></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><span style="background-color: #ffffff;"><strong><span style="font-size: medium;"><br />
</span></strong></span></div>
<div style="margin-top: 0px; margin-bottom: 0px;">
<div style="margin-top: 0px; margin-bottom: 0px;"><span style="background-color: #ffffff;"> 内容大概：框架结构和导航设计要紧密联系，且要和站内搜索、整个子网站相辅相成。要知道信息架构的复杂度、不一致性、隐藏的选项以及臃肿的用户界面设计等因素妨碍了用户寻找她们想要的信息,Jakob Nielsen从两个方面来阐述信息架构的十大误区：一是框架结构误区、二是导航设计误区。</span></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><span style="background-color: #ffffff;"><span style="background-color: #ffffff;"><br />
</span></span></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><span style="background-color: #ffffff;"><span style="background-color: #ffffff;"><span style="background-color: #ffffff;"><strong><span style="font-size: small;"><span style="color: #ff0000;">一、框架结构误区</span></span></strong></span></span></span></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><span style="background-color: #ffffff;"><span style="background-color: #ffffff;"><span style="background-color: #ffffff;"><strong><span style="font-size: small;"><br />
</span></strong></span></span></span></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong>1、没有框架结构</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><br />
</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;">最显著的框架结构问题是当产品设计师将网站视为一个混乱的大沼泽地，对个性化类目忽视一般组织结构原理。是的，用户可能通过使用站内搜索、当下促销的链接、外部网站来到这个大沼泽地并有可能找到“大鱼”。但无论用户怎么挖掘也仅此而已，因为她们没有机会了解网站的其他产品信息和当下相关的类目。<span style="background-color: #ffffff;">而这个问题普遍存在于那些将文章资讯页、产品详情页视为独立单元而不牵涉其他相关信息的新网站和以分类为基础的电子商务网站当中。毫无疑问，用户会立即离开这样的网站。</span></div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong>2、没有整合过的站内搜索与框架结构</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><br />
</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;">我们老早就知道用户表现出的由搜索主导上网行为的偏好(<em>阿石注：例如传统购物习惯AIDMA到现在AISAS的转变</em>）。但这并不意味着搜索就是她们所需要的全部。通过搜索来到某个页面的概率好比一个伞兵空降到一个指定城市，就像你要去巴黎，你期望在那里着陆而不是在阿姆斯特丹（荷兰的首都）那样，因此在任何情况下，你都不太可能精确到达你最喜欢餐厅的门旁。要到达那儿，你还得亲自走走，甚至需要打的。与此类似，用户经常需要在搜索“着陆地”附近可浏览其他相关性内容（<em>阿石注：类似于百度的相关搜索和淘宝站内搜索的智能推荐</em>）。</div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;">当然，局部导航只有在一个网站拥有一个良好的框架结构去定义相关性内容的前提下才能起到作用（看看误区1就知道）。但是产品设计师必须向用户展示局部可选项，如果针对用户的查询的关键词显示其他相关的词语的话效果更好。</div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;">在每次搜索触发展示了它的结果页和网站结构，SERP(搜索引擎结果页）的可用性则得到提高。象Google那样的外部通用搜索引擎则做不到上述效果，因为其并不了解网站内部的框架结构以及其自身的导航维度展示效果和一般通用网站别无二致。尽管如此，你还是应了解你的网站的框架结构，然后将这些信息集成到你的SERP上去（<em>这一点很像站内搜索与通用搜索的区别，详情请见阿石的日志</em><a id="eqr7" style="color: #551a8b;" title="《谈谈站内搜索》" href="http://www.ashnotes.com/talk-about-internal-site-search/" target="_blank"><em>《谈谈站内搜索》</em></a>）。</div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;">然而非常不幸的是，大多数网站并没有将站内搜索与网站的框架结构紧密结合起来，这一点被另外一个通病放大：导航设计中并没有显示出用户的当前位置。也就是说，当用户点击一个搜索结果之后，她们并不能决定她们在网站哪个位置——比如当你搜索到裤子，却点击了一个鞋子，但这时没有其他方法告诉用户查看更多裤子。</div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong>3、登陆页消失掉的分类目录</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><br />
</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;">我们强烈建议网站需要建立一系列的分类目录，这样每个分类类目都链接到她们各自的登陆页（<em>阿石注：langding page，对应于网络推广或营销的概念的某个页面，</em><a id="uxly" style="color: #551a8b;" title="详情请看" href="http://www.chinawebanalytics.cn/?p=54"><em>详情请看</em></a>)，使得用户可以预览每个分类的视图。有的网站放弃了这个预览页面，只是简单的提供链接直接链到详情页。这不仅会减少网站的页面数，而且当如果没有二级次要页面被显著标明，用户会完全不理解网站的范围，错过重要的细节、产品和服务信息。</div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;">分类目录页还可以对SEO有帮助，因为它们是用户搜索一个特定产品、服务或信息后最有可能“着陆”的地方（<em>阿石注：一般类似二级页面的分类目录页关键词丰富且密集，更容易被搜索引擎抓取靠前</em>）。分类目录页也还是解决误区2中的问题，因为她们可以在搜索将用户带到一个完全讲究细节的详情页时帮助用户在网站的一级或二级结果跳跃浏览（面包屑导航就是拥有这样的功能方便用户很容易向上一级结构返回）</div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong>4、过多的层次结构</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><br />
</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong> </strong>与现实世界相比，在线虚拟世界最大的好处是个体类目可以存在于多个地方。因为网站按照多个维度层次对产品信息和其他内容信息进行区分，他们可以帮助用户浏览其他相关类目、提供多方面的产品信息空间且可管理配置的列表，以满足用户在这方面的主要需求。</div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;">这样的处理方法大多是好的，但过多的层次结构往往变成为依赖性很强的“拐杖”。相比花很多时间建立几个直觉性良好且逻辑严密的高级分类类目而言，团队往往会匆忙完成这个进程，随之会建立数以倍计的的弱分类和产品列表。那么可用性的影响？用户花了大把时间挣扎在高级分类类目上，当他们在多个维度层次上发现次级类目时会被搞得晕头转向。</div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;">伴随着太多的分类选项和太多的层次结构，用户被迫艰难思考下一步该怎么走，并导致用户质疑网站提供的信息线索。这些产生在早期网站体验过程中的不自信，会衍生到用户往下的浏览体验过程，并对最终结果带来消极影响（如放弃购物车）</div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong>5、次级域名站点与微型站点和主打站点融合度差</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><br />
</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong> </strong>由于老套的市场营销策略，被遗弃的微型站点（<em>阿石注:在大型集团中由于产品丰富、营销策略多样性，而针对某个产品或营销而推出独立域名的网站站点</em>）大量充斥在互联网各领域中。在你发布一个新产品时，一个专用的微型站点会起到良好作用，但到了下一个年度，他将会削弱你的在线市场营销策略和你的在线形象。</div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;">网站设计是为了时代潮流而设计，考虑一下你的设计在5年以后看是如何表现的。</div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;">放弃建立独立站点，在主打站点的次级域名下放置新的信息的做法明显是最好的，但也要注意的是你依然需要在网站的整个架构中集成这些二级域名站点（<em>阿石注:其实也未必，象中国移动集团和各省市网站主要定位于咨询和业务办理，而他其他众多子网站更倾向于搞独立域名、独立运作</em>）。例如，在微型站点和二级域名站点中，我们常常发现产品详情页下面忘记了放置公司和组织相关信息，再比如很多站点在主站点的站内搜索很糟糕的对他们的次级域名站点和微型站点的搜索结果予以展示。</div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><span style="font-size: small;"><span style="color: #ff0000;">二、导航设计的错误</span></span></strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><span style="font-size: small;"><br />
</span></strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><span style="font-size: x-small;">6、不可见的导航选项</span></strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><span style="font-size: x-small;"><br />
</span></strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><span style="font-size: x-small;"> <span style="font-weight: normal;"><strong><span style="font-size: x-small;"><span style="font-weight: normal;"><span style="font-size: x-small;">网站信息架构</span><strong><span style="font-size: x-small;"><span style="font-weight: normal;"><span style="font-size: x-small;">最糟糕的错误当然是没有导航，但这种情况现在已经很少见了以至我没有必要讨论它。然而，用户不能看到的有可能也是不存在的；不可见的导航几乎和没有导航一样糟糕。</span></span></span></strong></span></span></strong></span></span></strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><span style="font-size: x-small;"><span style="font-weight: normal;"><strong><span style="font-size: x-small;"><span style="font-weight: normal;"><strong><span style="font-size: x-small;"><span style="font-weight: normal;"><span style="font-size: x-small;"><br />
</span></span></span></strong></span></span></strong></span></span></strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><span style="font-size: x-small;"><span style="font-weight: normal;"> 发觉识别导航不应该成为用户一项主要任务：一定要在页面上让导航永远可见。小孩子很喜欢对网站导航玩“扫雷”（在屏幕上发滚动鼠标，以发现暗藏的东东），然而青少年不会喜欢这样做，成年人则更是厌恶。</span></span></strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><span style="font-size: x-small;"><span style="font-weight: normal;"><br />
</span></span></strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><span style="font-size: x-small;"><span style="font-weight: normal;"> 类似的，<strong><span style="font-size: x-small;"><span style="font-weight: normal;"><span style="font-size: x-small;">无论是导航本身看上去很像横幅广告，还是你将他放到其他如看上去像广告以至用户会视而不见的组件旁边，</span><strong><span style="font-size: x-small;"><span style="font-weight: normal;"><span style="font-size: x-small;">你都应该抵制导航不可见。即使导航在电脑显示屏幕上，如果用户不看它，导航依然不可谓不可见。</span></span></span></strong></span></span></strong></span></span></strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><span style="font-size: x-small;"><span style="font-weight: normal;"><br />
</span></span></strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><span style="font-size: x-small;"><strong>7、不可控制的导航组件</strong></span></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><span style="font-size: x-small;"><strong><br />
</strong></span></div>
<div style="margin-top: 0px; margin-bottom: 0px;">一般来说，任何移动和跳动的组件会降低网站的可用性，尤其是当用户正尝试可寻时导航会发生移动。用户会把注意力集中到更高级的去哪儿的问题层面上，而不是去那些更低级的怎样操作图形用户界面GUI上来。</div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;">在这里两大常见阻碍是展开和隐藏内容的rollover（<em>阿石注：一般是指导航菜单的展开和鼠标移上去的链接状态</em>），以及那些移动、旋转或循环的组件。用户一般来说对这些组件并不感冒，而在这里将这些组件囊括到网站上的产品设计师和程序员们严重低估了用户沮丧感而带来的商业影响。</div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong>8、不一致导航</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><br />
</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong> </strong>导航存在的目的是为了帮助用户，而不是为了困惑她们。导航的设计应该是让用户立马可以了解到，并将这种理解贯穿到他浏览整个网站过程中。然而糟糕的是，很多网站在用户浏览进程中呈现出不同的导航特征，不同的导航来来去去，使得用户感到无法自我掌控，如她们会问“我怎样才能将那个菜单栏选项搞回来呢？我之前页面中可是看到过的啊”<em>(阿石注：其实在现行电子商务网站如淘宝、拍拍都没有一个完全不变的全局导航，或受制于市场策略、二级页面定位、设计安排而出现两个以上的全局导航）</em></div>
<div style="margin-top: 0px; margin-bottom: 0px;">尽管全局导航并不是一个网站最受欢迎的组件，而它的一致性特征表达了其重要内涵：全局导航是帮助用户了解她们在哪儿以及在迷路时她们怎样可以轻松掌控回到网站的顶级结构上去的一座灯塔。</div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong>9、太多的导航技术</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><br />
</strong></div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong> </strong>在&lt;&lt;<a id="lq3r" style="color: #551a8b;" title="seminar on navigation design" href="http://www.nngroup.com/events/tutorials/info_arch_2.html" target="_blank">seminar on navigation design</a>&gt;&gt;中有了解到竟然有25种不同的网站导航技术方法。每个技术方法都有其自身的可用性优势和潜在的缺点，而这些就会导致团队将精力集中在设计的权衡上来——也就说何时运用导航的何种形式（<em>阿石注：导航会随着网站的发展、市场营销而变动导航形式，这个特点体现在电子商务网站如amazon、<a id="hfgu" style="color: #551a8b;" title="红孩子" href="http://www.redbaby.com.cn/">红孩子</a>、<a id="h4bv" style="color: #551a8b;" title="深圳移动网上商城" href="http://sz.e100.cn/">深圳移动网上商城</a>等</em>）</div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;">有一点是肯定的：每个导航技术都有在特定网站和企业网中有其一席之地。但是，如果你将上面提到的25种技术全部派上用场的话，你会发现你得到的不是每个技术优势之和，甚至更少。（<em>阿石注：朴素的哲学思想：局部之和小于全部</em>）</div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;">为了吸引用户的眼球而竞赛吧！太多的地方需要了解，切忌哗众取宠！</div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong>10、伪装的菜单选项</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong><br />
</strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong> </strong></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><strong> </strong>在过去，伪装的菜单选项这种误区高高在上，但幸运的是现在好多了，没有过去普遍。然而，依然有很多网站继续将她们的标签和其他的导航选项伪装成她们自己的专用组件。</div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;">除了继续困惑用户外，伪装的导航也会妨害站内搜索：用户不能找到她们叫不上号的东东，即使你提供了同义词，主导航带来了额外的SEO权重，对那些优化没有用户关注的查询来说无疑是种浪费。</div>
<p></p>
<div style="margin-top: 0px; margin-bottom: 0px;">老词就是好。当用户了解了她们自己的选择，她们更愿意选择其中合适的一个。将文案说的清楚明白、简洁简约些。如果用户不能理解某个菜单选项，她们就一般不大可能点击它。而搞笑的是，一些公司为最新和   最重要的产品冠以很炫目的名称而累此不疲，这样就被双管来福枪将自己给毙了。</div>
<div style="margin-top: 0px; margin-bottom: 0px;"><em>这篇文章直接翻译的成分较多，比较生硬，可看看荣荣的成果：</em><a style="color: #551a8b;" href="http://hi.baidu.com/xiaoxingrong13/blog/item/9846f802dafbb1064afb5170.html"><em>http://hi.baidu.com/xiaoxingrong13/blog/item/9846f802dafbb1064afb5170.html</em></a></div>
<div style="margin-top: 0px; margin-bottom: 0px;">相关阅读：<a href="http://www.ashnotes.com/simplify-information-architecture/" target="_self">《简化信息架构 》</a></div>
<div style="margin-top: 0px; margin-bottom: 0px;"><em><br />
</em></div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/top10-mistakes-of-information-architecture/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>谈谈站内搜索</title>
		<link>http://www.ashnotes.com/talk-about-internal-site-search/</link>
		<comments>http://www.ashnotes.com/talk-about-internal-site-search/#comments</comments>
		<pubDate>Mon, 21 Sep 2009 11:00:48 +0000</pubDate>
		<dc:creator>ashnotes</dc:creator>
				<category><![CDATA[电子商务]]></category>
		<category><![CDATA[站内搜索]]></category>
		<category><![CDATA[网站优化]]></category>

		<guid isPermaLink="false">http://www.ashnotes.com/?p=173</guid>
		<description><![CDATA[
 前言
  最近在实施网站优化过程中碰到了站内搜索，本以为是个很简单的事情，可一试才发现水很深，下面是学习心得报告（有删减），欢迎指正.
什么是站内搜索
在以往网站建设、企业信息系统搭建过程中，由于信息结构简单、内容稀缺，站内搜索乃至搜索都不是网站系统的必要装备。但随着Web2.0带来的海量信息井喷式涌现，企业自身对信息架构、管理、发布的需求，以及用户对信息的组织、查询、可寻性的要求越来越高，于是站内搜索出现了。
 站内搜索通俗来讲是一个网站或商城的“大门口”，一般在形式上包括两个要件：搜索入口和搜索结果页面，但在其后台架构上是比较复杂的，其核心要件包括：中文分词技术、页面抓取技术、建立索引、对搜索结果排序以及对搜索关键词的统计、分析、关联、推荐等
与其他通用搜索的区别
像谷歌、百度、搜搜等通用搜索引擎都会免费开放站内搜索功能，以嵌入网页代码的形式保持与搜索引擎机器人的沟通、爬取，其弊病有二：
1.这些通用搜索引擎不能及时、全部抓取网站最新页面内容。这对电子商务网站信息（如价格、活动有效时间等）经常更新的特点来说是致命的，用户查到的可能是过时信息.
2.既然是所谓通用引擎，其对搜索结果的展示也是通用的，没有差异性的。其不能按照商城自身业务逻辑去做排序、过滤、展示是其最大的弱项
因此，站内搜索的出现也是有其具体原因和需求的，在搜索的精确度和效果上击败了通用搜索引擎。
站内搜索的价值
站内搜索价值体现在如下：

用户很“懒”，节约用户查找商品时间，提高购买转化率
站内搜索已经成为电子商务网站主导航的标配
对后续用户输入的关键词进行分析、提取、排名等对商城运营者来说是了解用户上网行为的最佳途径

行内几家搜索结果页的特点
 挑选几家电子商务里面站内搜索具有代表性的网站及其站内搜索结果页，如下：
1.淘宝站内搜索：
淘宝站内搜索最大的特点是过滤功能强大、其对应的商品信息字段也是最多，在搜索技术上根据用户输入的关键词做精确猜测是比较强大，这一点必须基于以往用户搜索记录，加以分析、统计而得出的。另外淘宝屏蔽百度这一点也说明淘宝人对自身站内搜索的自信。

2.京东站内搜索：
京东站内搜索最大优势是搜索结果信息设计饱满均衡，这一点表现在商品描述信息上，如每个商品名称比包含其对应的英文名称，如“诺基亚（Nokia）5030 GSM手机 红色送迪士尼正版手机袋！轻巧耐用，实惠超值之选”这一点就解决了上面我们商城站内搜索出现中文搜索得到而英文搜索不到的弊病，而要做到这一点是需要对商品特点了解很清楚的专业客服人员，属于“人海战术”（后面有说明）

3.走秀和番茄树站内搜索：
走秀站内搜索比较好用的是搜索信息呈现足够大方、商品图大，另外其根据热门关键词搜索量以标签云的形式展示也是一个创新。另外番茄树在商品详情页放置用户对商品打标签的做法也很2.0，既个性而且满足站内搜索需求。


优化措施与途径
根据项目目前实际与潜在需求，按规划周期长短、资源成本消耗等综合因素从小到大，有以下三个优化途径可供参考、比较。
 1、人海战术
所谓人海战术是应用一般SQL查询技术，提供一个后台专门修改商城所有商品、活动、业务名称，当然按照一定规则填写商品名称，丰富商品信息。优点是技术门槛低、上线快，缺点是不能根本解决搜索速度慢的问题，而且由于信息量多，很可能会重新设计二级页面，且人为修改容易出错。这只能是短期打算，不能解决站内搜索的根本问题。
 2、采用第三方站内搜索技术
站内搜索由于是中大型资讯类、社交类以及电子商务类网站必要组件，其开发难度大、耗工长，已有专门公司搞这个，较出色的有银杏泰克、autonomy，其特点是：上线速度快、但由于其是按照搜索量计费，后期成本控制有些难以估算。
 3、 自主开发
自主开发一个站内搜索引擎，按“架构+编程+前端”3人组合据行内人士估算需要3人*100日=300个人日开发资源,若按人日200元计,成本大约在60,000RMB左右，这还不算上策划和设计资源，自主开发最大的好处是可控制、可定制。
行内几家搜索结果页的特点
1.淘宝站内搜索：
淘宝站内搜索最大的特点是过滤功能强大、其对应的商品信息字段也是最多，在搜索技术上根据用户输入的关键词做精确猜测是比较强大，这一点必须基于以往用户搜索记录，加以分析、统计而得出的。另外淘宝屏蔽百度这一点也说明淘宝人对自身站内搜索的自信。
2.京东站内搜索：
京东站内搜索最大优势是搜索结果信息设计饱满均衡，这一点表现在商品描述信息上，如每个商品名称比包含其对应的英文名称，如“诺基亚（Nokia）5030 GSM手机 红色送迪士尼正版手机袋！轻巧耐用，实惠超值之选”这一点就解决了上面我们商城站内搜索出现中文搜索得到而英文搜索不到的弊病，而要做到这一点是需要对商品特点了解很清楚的专业客服人员，属于“人海战术”
3.走秀站内搜索：
走秀站内搜索比较好用的是搜索信息呈现足够大方、商品图大，另外其根据热门关键词搜索量以标签云的形式展示也是一个创新。
]]></description>
			<content:encoded><![CDATA[<p><img class="size-full wp-image-174 alignleft" title="internal-site-search" src="http://www.ashnotes.com/wp-content/uploads/2009/09/internal-site-search.jpg" alt="站内搜索" width="367" height="206" /></p>
<p><strong> 前言</strong></p>
<p><strong> </strong> 最近在实施网站优化过程中碰到了站内搜索，本以为是个很简单的事情，可一试才发现水很深，下面是学习心得报告（有删减），欢迎指正.</p>
<p><span style="background-color: #ffffff; "><strong>什么是站内搜索</strong></span></p>
<p>在以往网站建设、企业信息系统搭建过程中，由于信息结构简单、内容稀缺，站内搜索乃至搜索都不是网站系统的必要装备。但随着Web2.0带来的海量信息井喷式涌现，企业自身对信息架构、管理、发布的需求，以及用户对信息的组织、查询、可寻性的要求越来越高，于是站内搜索出现了。</p>
<p><span style="background-color: #ffffff; "> 站内搜索通俗来讲是一个网站或商城的“大门口”，<a title="西乔MM关于站内搜索值得一读" href="http://blog.xiqiao.info/2009/06/02/343">一般在形式上包括两个要件</a>：搜索入口和搜索结果页面，但在其后台架构上是比较复杂的，其核心要件包括：中文分词技术、页面抓取技术、建立索引、对搜索结果排序以及对搜索关键词的统计、分析、关联、推荐等</span></p>
<p><strong>与其他通用搜索的区别</strong></p>
<p>像谷歌、百度、搜搜等通用搜索引擎都会免费开放站内搜索功能，以嵌入网页代码的形式保持与搜索引擎机器人的沟通、爬取，其弊病有二：<br />
1.这些通用搜索引擎不能及时、全部抓取网站最新页面内容。这对电子商务网站信息（如价格、活动有效时间等）经常更新的特点来说是致命的，用户查到的可能是过时信息.<br />
2.既然是所谓通用引擎，其对搜索结果的展示也是通用的，没有差异性的。其不能按照商城自身业务逻辑去做排序、过滤、展示是其最大的弱项</p>
<p>因此，站内搜索的出现也是有其具体原因和需求的，在搜索的精确度和效果上击败了通用搜索引擎。</p>
<p><strong>站内搜索的价值</strong></p>
<p>站内搜索价值体现在如下：</p>
<ul>
<li><span style="background-color: #ffffff; ">用户很“懒”，节约用户查找商品时间，提高购买转化率</span></li>
<li><span style="background-color: #ffffff; ">站内搜索已经成为电子商务网站主导航的标配</span></li>
<li><span style="background-color: #ffffff; ">对后续用户输入的关键词进行分析、提取、排名等对商城运营者来说是了解用户上网行为的最佳途径</span></li>
</ul>
<p><strong>行内几家搜索结果页的特点</strong></p>
<p><strong> </strong>挑选几家电子商务里面站内搜索具有代表性的网站及其站内搜索结果页，如下：</p>
<p><strong>1.淘宝站内搜索</strong>：</p>
<p>淘宝站内搜索最大的特点是过滤功能强大、其对应的商品信息字段也是最多，在搜索技术上根据用户输入的关键词做精确猜测是比较强大，这一点必须基于以往用户搜索记录，加以分析、统计而得出的。另外淘宝屏蔽百度这一点也说明淘宝人对自身站内搜索的自信。</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-176" title="淘宝_搜索结果页" src="http://www.ashnotes.com/wp-content/uploads/2009/09/淘宝_搜索结果页.png" alt="淘宝_搜索结果页" width="461" height="389" /></p>
<p><strong>2.京东站内搜索</strong>：</p>
<p>京东站内搜索最大优势是搜索结果信息设计饱满均衡，这一点表现在商品描述信息上，如每个商品名称比包含其对应的英文名称，如“诺基亚（Nokia）5030 GSM手机 红色送迪士尼正版手机袋！轻巧耐用，实惠超值之选”这一点就解决了上面我们商城站内搜索出现中文搜索得到而英文搜索不到的弊病，而要做到这一点是需要对商品特点了解很清楚的专业客服人员，属于“人海战术”（<em>后面有说明）</em></p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-184" title="京东_搜索结果页" src="http://www.ashnotes.com/wp-content/uploads/2009/09/京东_搜索结果页.png" alt="京东_搜索结果页" width="461" height="389" /></p>
<p><strong>3.走秀和番茄树站内搜索：</strong></p>
<p>走秀站内搜索比较好用的是搜索信息呈现足够大方、商品图大，另外其根据热门关键词搜索量以标签云的形式展示也是一个创新。另外番茄树在商品详情页放置用户对商品打标签的做法也很2.0，既个性而且满足站内搜索需求。</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-191" title="走秀_搜索结果页" src="http://www.ashnotes.com/wp-content/uploads/2009/09/走秀_搜索结果页1.png" alt="走秀_搜索结果页" width="454" height="389" /></p>
<p style="text-align: center;">
<p><strong>优化措施与途径</strong></p>
<p>根据项目目前实际与潜在需求，按规划周期长短、资源成本消耗等综合因素从小到大，有以下三个优化途径可供参考、比较。</p>
<p><span style="background-color: #ffffff;"><strong> 1、人海战术</strong></span></p>
<p>所谓人海战术是应用一般SQL查询技术，提供一个后台专门修改商城所有商品、活动、业务名称，当然按照一定规则填写商品名称，丰富商品信息。优点是技术门槛低、上线快，缺点是不能根本解决搜索速度慢的问题，而且由于信息量多，很可能会重新设计二级页面，且人为修改容易出错。这只能是短期打算，不能解决站内搜索的根本问题。</p>
<p><span style="background-color: #ffffff;"><strong> 2、采用第三方站内搜索技术</strong></span></p>
<p>站内搜索由于是中大型资讯类、社交类以及电子商务类网站必要组件，其开发难度大、耗工长，已有专门公司搞这个，较出色的有<a href="http://www.ginkgotek.com/" target="_self">银杏泰克</a>、<a href="http://www.autonomy.com.cn/content/Verticals/ecommerce.zh.html" target="_self">autonomy</a>，其特点是：上线速度快、但由于其是按照搜索量计费，后期成本控制有些难以估算。</p>
<p><span style="background-color: #ffffff;"><strong> 3、 自主开发</strong></span></p>
<p>自主开发一个站内搜索引擎，按“架构+编程+前端”3人组合据行内人士估算需要3人*100日=300个人日开发资源,若按人日200元计,成本大约在60,000RMB左右，这还不算上策划和设计资源，自主开发最大的好处是可控制、可定制。</p>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 589px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">行内几家搜索结果页的特点</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 589px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">1.淘宝站内搜索：</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 589px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">淘宝站内搜索最大的特点是过滤功能强大、其对应的商品信息字段也是最多，在搜索技术上根据用户输入的关键词做精确猜测是比较强大，这一点必须基于以往用户搜索记录，加以分析、统计而得出的。另外淘宝屏蔽百度这一点也说明淘宝人对自身站内搜索的自信。</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 589px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">2.京东站内搜索：</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 589px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">京东站内搜索最大优势是搜索结果信息设计饱满均衡，这一点表现在商品描述信息上，如每个商品名称比包含其对应的英文名称，如“诺基亚（Nokia）5030 GSM手机 红色送迪士尼正版手机袋！轻巧耐用，实惠超值之选”这一点就解决了上面我们商城站内搜索出现中文搜索得到而英文搜索不到的弊病，而要做到这一点是需要对商品特点了解很清楚的专业客服人员，属于“人海战术”</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 589px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">3.走秀站内搜索：</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 589px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">走秀站内搜索比较好用的是搜索信息呈现足够大方、商品图大，另外其根据热门关键词搜索量以标签云的形式展示也是一个创新。</div>
]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/talk-about-internal-site-search/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>
