<?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>第8音 Design Evering &#187; 淘宝</title>
	<atom:link href="http://blog.d8in.com/posts/tag/%e6%b7%98%e5%ae%9d/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.d8in.com</link>
	<description>成功的产品=故事化设计+逻辑化思维+高效地执行</description>
	<lastBuildDate>Sat, 18 Jun 2011 08:46:07 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>tab切换是click还是over？</title>
		<link>http://blog.d8in.com/posts/455.html</link>
		<comments>http://blog.d8in.com/posts/455.html#comments</comments>
		<pubDate>Fri, 10 Jul 2009 02:00:32 +0000</pubDate>
		<dc:creator>xw</dc:creator>
				<category><![CDATA[产品设计]]></category>
		<category><![CDATA[tab]]></category>
		<category><![CDATA[淘宝]]></category>
		<category><![CDATA[网易]]></category>
		<category><![CDATA[雅虎]]></category>

		<guid isPermaLink="false">http://blog.d8in.com/?p=455</guid>
		<description><![CDATA[应该是两年前，网易首页全新的改版。内容区块大量采用了tab切换的方式，当我鼠标放上一个tab竟然立即切换到标签内容，当点击tab的时候竟然弹出了一个新的网页。我一直在想网易怎么犯这么低级的错呢？tab应该是单击以后在再切换的呀，这个是基本的交互原则。 然而从这个时候开始，发现在国内越来越多国内门户网站的小区块tab设计，采用了这种悬浮切换，点击弹出新页面频道的方式。而当我渐渐的开始习惯这种方式的时候，再打开美国yahoo首页，突然发现用点击切换小内容块反而还不适应了。这不禁让我开始反思。 其实不仅在国内，在国外的某些网站也开始采用这种悬浮切换的方式。我们来分析一这种方式优劣势： 优势：用户不用点击，直接用鼠标滑过tab就可以迅速切换区域内容，这对于快速浏览内容的用户，操作起来十分爽，对于浏览区块内容效率极高。 劣势：用户对于tab切换一般的习惯是点击切换，这有悖于用户的习惯，如果用户第一次接触这种切换方式的话肯定会产生错误（和我一样），很有挫败感。 所以如果要采用这种方式的话最关键的一点就是，用户要学习这种新的切换方式，是否容易学习？是否会和传统的点击切换发生混淆？ 我无法做用户调查，但是从我使用的角度来说，首先很容易学习。当我点击发现是悬浮才能切换以后，我第二次访问就会采用这种新的方式了。其次还是容易区别的，因为悬浮切换有一个很大的特点就是这种方式全部应用在小内容块上，而且基本应用在内容展现上。 另外对于小内容区块展现，还有一种折中的设计方式，就是悬浮也切换，点击也切换。淘宝的首页里面的充值区块就采用了中设计。也非常不错。 最后不过无论采用哪种方式，切记一定要保持统一性，千万不要在一个页面中混合使用。]]></description>
			<content:encoded><![CDATA[<p>应该是两年前，网易首页全新的改版。内容区块大量采用了tab切换的方式，当我鼠标放上一个tab竟然立即切换到标签内容，当点击tab的时候竟然弹出了一个新的网页。我一直在想网易怎么犯这么低级的错呢？tab应该是单击以后在再切换的呀，这个是基本的交互原则。</p>
<p><img class="alignnone size-full wp-image-484" title="2009-07-10_095456" src="http://blog.d8in.com/wp-content/uploads/2009/07/2009-07-10_095456.jpg" alt="2009-07-10_095456" width="462" height="340" /></p>
<p>然而从这个时候开始，发现在国内越来越多国内门户网站的小区块tab设计，采用了这种悬浮切换，点击弹出新页面频道的方式。而当我渐渐的开始习惯这种方式的时候，再打开美国yahoo首页，突然发现用点击切换小内容块反而还不适应了。这不禁让我开始反思。</p>
<p><img class="alignnone size-full wp-image-485" title="2009-07-10_095526" src="http://blog.d8in.com/wp-content/uploads/2009/07/2009-07-10_095526.jpg" alt="2009-07-10_095526" width="432" height="247" /></p>
<p>其实不仅在国内，在国外的某些网站也开始采用这种悬浮切换的方式。我们来分析一这种方式优劣势：<br />
<span id="more-455"></span></p>
<p><strong>优势：</strong>用户不用点击，直接用鼠标滑过tab就可以迅速切换区域内容，这对于快速浏览内容的用户，操作起来十分爽，对于浏览区块内容效率极高。</p>
<p><strong>劣势：</strong>用户对于tab切换一般的习惯是点击切换，这有悖于用户的习惯，如果用户第一次接触这种切换方式的话肯定会产生错误（和我一样），很有挫败感。</p>
<p>所以如果要采用这种方式的话最关键的一点就是，用户要学习这种新的切换方式，是否容易学习？是否会和传统的点击切换发生混淆？</p>
<p>我无法做用户调查，但是从我使用的角度来说，首先很容易学习。当我点击发现是悬浮才能切换以后，我第二次访问就会采用这种新的方式了。其次还是容易区别的，因为悬浮切换有一个很大的特点就是这种方式全部应用在小内容块上，而且基本应用在内容展现上。</p>
<p>另外对于小内容区块展现，还有一种折中的设计方式，就是悬浮也切换，点击也切换。淘宝的首页里面的充值区块就采用了中设计。也非常不错。</p>
<p><img class="alignnone size-full wp-image-486" title="2009-07-10_095631" src="http://blog.d8in.com/wp-content/uploads/2009/07/2009-07-10_095631.jpg" alt="2009-07-10_095631" width="272" height="141" /></p>
<p>最后不过无论采用哪种方式，切记一定要保持统一性，千万不要在一个页面中混合使用。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.d8in.com/posts/455.html/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>左侧导航还是右侧导航？</title>
		<link>http://blog.d8in.com/posts/314.html</link>
		<comments>http://blog.d8in.com/posts/314.html#comments</comments>
		<pubDate>Thu, 30 Apr 2009 02:03:16 +0000</pubDate>
		<dc:creator>xw</dc:creator>
				<category><![CDATA[产品设计]]></category>
		<category><![CDATA[aol]]></category>
		<category><![CDATA[yahoo]]></category>
		<category><![CDATA[搜狐]]></category>
		<category><![CDATA[新浪]]></category>
		<category><![CDATA[淘宝]]></category>

		<guid isPermaLink="false">http://blog.d8in.com/posts/314.html</guid>
		<description><![CDATA[记得很久以前在上一家公司有一次会议上讨论博客的导航问题，大概就是&#8221;导航是放在左侧还是放在右侧？&#8221;基本上大家在会议上都达成了共识就是博客的导航应该是放在右侧，因为内容比较重要，放在左侧可以让用户可以更加注意内容。 最近在看《Web的导航设计》，其中有一部分也提到了关于导航的位置的问题. 在2002年对奥迪网站（www.audi.com和www.audi.de）的改版中，Razorfish Germany挑战了左侧导航的主导地位，把主导航放到了右侧。主要是把奥迪的网站和竞争对手区分开来。他们也想在网站中处处实践奥迪品牌的核心价值&#8221;创新&#8221;，包括导航。 在这种非标准布局发布之前，我们对64个用户进行了广泛的测试。测试中把一个导航在左侧的版本与右侧版本相比较。每个测试都有三部分组成。 第一部分中，用秒表记下完成五个任务所需的导航时间。结果令人吃惊：对于任何一个任务，两种导航的完成时间都没有显著的差异，包括第一个任务。在后续的任务中，右侧导航实际上要比左侧导航表现更好。 第二部分中，我们研究了参与者在屏幕上的注意力的焦点。我们发现，比起左侧导航系统，人们用右侧导航时往往会多看有内容的一侧。 第三部分中，我们对每名参与者展示两种版本，并直接问他们对右侧导航的看法。64个人中有7个偏爱右侧导航，只有两个明确表示不喜欢。但大多数的参与者表示无所谓。 我最近看了一下博客的统计，让我十分惊讶的是放在我右侧的导航几乎没有点击，那你可能说了放在右可能容易忽略掉，但是我下面的友情链接竟然会有好多点击，也就是说放在右侧的友情链接竟然比右侧放在上面的导航更加吸引点击。 由此可见导航放在左侧还是右侧，通常的常理是习惯问题。而这里还要考虑的问题就是：1、用户到想要什么？2、我们到底要给用户提供什么？ 先来看看博客，为什么大多数博客的分类导航都是放在右侧？1、用户来到网站就是想阅读最近的文章。2、我们就是给用户提供文章内容。其实这里根本没有右侧分类导航什么事情，也就是说我们甚至可以把分类导航移走不显示也不会有什么大事情。而且有好多博客的模板就是把导航放在最下面，最上面完全空出来给博客文章。那为什么分类导航在博客上不重要呢？我觉得这是博客的特性所决定的，通常来说，一个博客本身就是一个分类，一个人写的博客文章一般的内容和性质都是差不多的。第二就是博客文章的实效性很强，而且博客文章本身也是按照发表顺序排序的，用户通常就是看第一页面就差不多了，如果想看更多直接单击下面的分页即可。如果想查找某一片特定的文章，直接搜索关键字即可，可见大多数情下根本用不到文章分类。就算要用到分类，博客文章内容中有包含分类的信息，用户如果觉得某一篇文章很吸引人，很自然就是单击文章中的分类进入分类文章页面。另外博客上的Tag云图貌似比文章分类更加能以引人的注意。 我们再来看看门户网站的首页，中国的门户网站喜欢把到访在在顶部譬如sohu和sina，而美国则喜欢放在左侧，譬如yahoo和aol。无论是放在顶部也好，放在做侧也要，他们都是最重要的位置，或者说是用户第一眼能看到的位置。貌似没有一个放在右侧的吧？还是先回答上面那两个问题1、来到门户的首页就是为了找到频道的链接这样可以快速的进入我想要看的频道。2、提供整个门户站点的综合索引。但是我们这里要区别，我们可以看到aol和yahoo的首页内容都不是很多。而sohu和sina的就不一样会更多的提供更多的频道内容在里面。这点可以看出中国人和美国的习惯有所不同。 我们再来看看电子商务网站，分别在ebay.com和taobao.com输入一个关键字搜索，然后出现一个搜索列表，ebay是把结果显示在右侧左侧显示细节分类导航和相关推荐，而淘宝是在上面显示分类，把相关的其他东西放在右侧，而把搜索结果显示在左侧。到底哪个更好呢大家可以想一下。 导航放在左侧还是放在右侧确实不是一个死规定，就像当初通常都认为导航应该放在左侧时候，博客的出现就打破了这个常规，把导航放在了右侧，而事实证明放在右侧有些时候会效果更好。所以有些时候不要被所谓的经验所蒙蔽，仔细分析，打破常规，也许会得到意想不到的惊喜。]]></description>
			<content:encoded><![CDATA[<p>记得很久以前在上一家公司有一次会议上讨论博客的导航问题，大概就是&#8221;导航是放在左侧还是放在右侧？&#8221;基本上大家在会议上都达成了共识就是博客的导航应该是放在右侧，因为内容比较重要，放在左侧可以让用户可以更加注意内容。</p>
<p>最近在看《Web的导航设计》，其中有一部分也提到了关于导航的位置的问题.</p>
<blockquote><p>在2002年对奥迪网站（<a href="http://www.audi.com/">www.audi.com</a>和<a href="http://www.audi.de/">www.audi.de</a>）的改版中，Razorfish Germany挑战了左侧导航的主导地位，把主导航放到了右侧。主要是把奥迪的网站和竞争对手区分开来。他们也想在网站中处处实践奥迪品牌的核心价值&#8221;创新&#8221;，包括导航。 <br/><br/>在这种非标准布局发布之前，我们对64个用户进行了广泛的测试。测试中把一个导航在左侧的版本与右侧版本相比较。每个测试都有三部分组成。 <br/><br/>第一部分中，用秒表记下完成五个任务所需的导航时间。结果令人吃惊：对于任何一个任务，两种导航的完成时间都没有显著的差异，包括第一个任务。在后续的任务中，右侧导航实际上要比左侧导航表现更好。 <br/><br/>第二部分中，我们研究了参与者在屏幕上的注意力的焦点。我们发现，比起左侧导航系统，人们用右侧导航时往往会多看有内容的一侧。 <br/><br/>第三部分中，我们对每名参与者展示两种版本，并直接问他们对右侧导航的看法。64个人中有7个偏爱右侧导航，只有两个明确表示不喜欢。但大多数的参与者表示无所谓。</p>
</blockquote>
<p>我最近看了一下博客的统计，让我十分惊讶的是放在我右侧的导航几乎没有点击，那你可能说了放在右可能容易忽略掉，但是我下面的友情链接竟然会有好多点击，也就是说放在右侧的友情链接竟然比右侧放在上面的导航更加吸引点击。</p>
<p>由此可见导航放在左侧还是右侧，通常的常理是习惯问题。而这里还要考虑的问题就是：1、用户到想要什么？2、我们到底要给用户提供什么？</p>
<p> <span id="more-314"></span>
<p>先来看看博客，为什么大多数博客的分类导航都是放在右侧？1、用户来到网站就是想阅读最近的文章。2、我们就是给用户提供文章内容。其实这里根本没有右侧分类导航什么事情，也就是说我们甚至可以把分类导航移走不显示也不会有什么大事情。而且有好多博客的模板就是把导航放在最下面，最上面完全空出来给博客文章。那为什么分类导航在博客上不重要呢？我觉得这是博客的特性所决定的，通常来说，一个博客本身就是一个分类，一个人写的博客文章一般的内容和性质都是差不多的。第二就是博客文章的实效性很强，而且博客文章本身也是按照发表顺序排序的，用户通常就是看第一页面就差不多了，如果想看更多直接单击下面的分页即可。如果想查找某一片特定的文章，直接搜索关键字即可，可见大多数情下根本用不到文章分类。就算要用到分类，博客文章内容中有包含分类的信息，用户如果觉得某一篇文章很吸引人，很自然就是单击文章中的分类进入分类文章页面。另外博客上的Tag云图貌似比文章分类更加能以引人的注意。</p>
<p>我们再来看看门户网站的首页，中国的门户网站喜欢把到访在在顶部譬如sohu和sina，而美国则喜欢放在左侧，譬如yahoo和aol。无论是放在顶部也好，放在做侧也要，他们都是最重要的位置，或者说是用户第一眼能看到的位置。貌似没有一个放在右侧的吧？还是先回答上面那两个问题1、来到门户的首页就是为了找到频道的链接这样可以快速的进入我想要看的频道。2、提供整个门户站点的综合索引。但是我们这里要区别，我们可以看到aol和yahoo的首页内容都不是很多。而sohu和sina的就不一样会更多的提供更多的频道内容在里面。这点可以看出中国人和美国的习惯有所不同。</p>
<p><img src="http://farm4.static.flickr.com/3543/3485339199_d5312f614a.jpg" style="DISPLAY: inline" height="50" width="500"/></p>
<p><img src="http://farm4.static.flickr.com/3345/3486153516_84ba5bbfc4.jpg" style="DISPLAY: inline" height="64" width="500"/></p>
<p><img src="http://farm4.static.flickr.com/3660/3486153232_45ddb4aa18_o.png" style="DISPLAY: inline" height="483" width="156"/></p>
<p><img src="http://farm4.static.flickr.com/3616/3485338511_d0bbb577d9_o.png" style="DISPLAY: inline" height="483" width="154"/></p>
<p>我们再来看看电子商务网站，分别在ebay.com和taobao.com输入一个关键字搜索，然后出现一个搜索列表，ebay是把结果显示在右侧左侧显示细节分类导航和相关推荐，而淘宝是在上面显示分类，把相关的其他东西放在右侧，而把搜索结果显示在左侧。到底哪个更好呢大家可以想一下。</p>
<p><img src="http://farm4.static.flickr.com/3541/3485336453_cd02fd0077.jpg" style="DISPLAY: inline" height="448" width="500"/></p>
<p><img src="http://farm4.static.flickr.com/3310/3486150840_f2945d1d6b.jpg" style="DISPLAY: inline" height="500" width="457"/></p>
<p>导航放在左侧还是放在右侧确实不是一个死规定，就像当初通常都认为导航应该放在左侧时候，博客的出现就打破了这个常规，把导航放在了右侧，而事实证明放在右侧有些时候会效果更好。所以有些时候不要被所谓的经验所蒙蔽，仔细分析，打破常规，也许会得到意想不到的惊喜。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.d8in.com/posts/314.html/feed</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
	</channel>
</rss>

