<?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>随网之舞ux</title>
	<atom:link href="http://dancewithnet.com/tag/ux/feed/" rel="self" type="application/rss+xml" />
	<link>http://dancewithnet.com</link>
	<description>WEB Design{HTML:CSS:Javascript:DOM:AJAX:PHP:Usability}/Viewpoint/Photo/Food/Mood</description>
	<lastBuildDate>Mon, 18 Jul 2011 02:45:29 +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://dancewithnet.com/2007/11/19/pagination-gallery-examples-and-good-practices/</link>
		<comments>http://dancewithnet.com/2007/11/19/pagination-gallery-examples-and-good-practices/#comments</comments>
		<pubDate>Sun, 18 Nov 2007 16:09:20 +0000</pubDate>
		<dc:creator>秦歌</dc:creator>
				<category><![CDATA[UX & Usability]]></category>
		<category><![CDATA[ux]]></category>
		<category><![CDATA[分页]]></category>

		<guid isPermaLink="false">http://dancewithnet.com/2007/11/19/pagination-gallery-examples-and-good-practices/</guid>
		<description><![CDATA[结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入，用户就越容易理解你观点和得到你想传达的信息。在网页上，这点被通过多个方式做到。
在正文头条和列举被用做逻... ]]></description>
			<content:encoded><![CDATA[<p>结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入，用户就越容易理解你观点和得到你想传达的信息。在网页上，这点被通过多个方式做到。</p>
<p>在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫<strong>分页</strong>的机制，它在给定文章的单一部分为用户提供用于浏览的额外的导航选项。文章的这些地方除了“上一页（previous）”和“下一页（next）”按钮外，还涉及到数字、提示和箭头。</p>
<p>搜索引擎几乎总是使用分页，报纸往往利用它来导航有几部分的大文章。还有一些情形，分页也是博客（weblog）所需的。额外的导航能简化一些站点页面的访问，例如让用户容易的通过站点的存档进行浏览。</p>
<p>在大多数情况下，<strong>分页优于传统的“上一页、下一页”导航方式</strong>，它通过站点给访问者提供更快更方便的导航。它不是必须的，但是一个有用的好特性。</p>
<p>让我们来看一些好的分页实践，何时和如何执行分页的一些例子。<span id="more-1159"></span></p>
<h3>分页设计的好实践（来自Faruk Ates的7个方面）</h3>
<ol>
<li>提供大面积的可点击区域</li>
<li>别使用下划线</li>
<li>标明当前页面</li>
<li>隔开网页链接</li>
<li>提供上一页和下一页链接</li>
<li>使用首页和末页链接（在能适用的地方）</li>
<li>把首页和末页放在外面</li>
</ol>
<h3>相关参考资料</h3>
<ol>
<li><a href="http://kurafire.net/log/archive/2007/06/22/pagination-101">Pagination 101</a>，Faruk Ates已经完成关于分页的终稿。</li>
<li><a href="http://www.mis-algoritmos.com/2007/03/16/some-styles-for-your-pagination/">Some Styles For Your Pagination</a>，可以随意下载随意适用的分页样式。</li>
<li>如果你的博客是基于wordpress的，你可以安装插件<a href="http://lesterchan.net/wordpress/readme/wp-pagenavi.html">WP-PageNavi</a>来产生分页。它非常容易安装，但需要你修改一些你用主题的源码。</li>
</ol>
<h3>错误#1：分页选项不可见</h3>
<p>因为分页的是主要目的是充当一个改进后的导航，它必需让访问者清楚他们在哪儿、他们已经去了哪儿和他们下一步能去哪儿。这个三个事实让用户完整的理解这个系统如何的工作和这个导航应该如何被使用。</p>
<p>但最重要的是，导航选项应该是可见的。<a href="http://www.hugg.com/">hugg.com</a>不遵循这个方针。链接颜色和白色背景对比度非常低。没有提供鼠标悬停效果。<br /><a href="http://hugg.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/hugg.gif' alt='hugg.com的分页' width="284" height="47" /></a></p>
<h3>错误#2：分页不直观</h3>
<p>如果你不得不在一个相当复杂（但漂亮）的导航和一个简单但包含必要功能的导航间选择，一直倾向简单的方法。如果用户不理解分页背后的机制，他们将不能使用它，因此他们也不会使用你的网站。</p>
<p><a href="http://www.helium.com/">Helium.com</a>是这个错误的很好例子。看一下下面截图：这些箭头代表什么？代表你访问过的那页或代表你正在访问的那页？为什么这个链接到第二页有一个白色背景？为什么箭头有不同的颜色？这是不直观的。<br /><a href="http://www.helium.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/helium.gif' alt='Helium.com不直观的分页'  width="454" height="33" /></a></p>
<p>不直观的设计源于结构、层次和深思熟虑后的设计决定的缺乏。空白导航像过度拥挤方案一样不直观。<br /><a href="http://www.helium.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/helium2.png' alt='Helium.com拥挤的不直观的分页' width="223" height="33" /></a></p>
<p>没有间隔的网页链接难以扫描和浏览。Make-Believe.org是个这样的例子，其设计是不直观的。<br /><a href="http://www.make-believe.org/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/makeblieve.gif' alt='Make-Believe.org拥挤的不直观的分页' width="107" height="44" /></a></p>
<h3>创造性的方案可能是用户友好的</h3>
<p>对于设计者来说，一个元素被使用的越频繁，想在没有使设计不直观的冒险下去介绍一些创新方法越难。因此，分页设计有各种不同的模式，但使用革命性的方法很少见。</p>
<p>然后，创造性的方法可以是用户有好的。例如：<a href="http://www.dirty.ru/">Dirty.ru</a>使用了一个<strong>滑块分页菜单</strong>，用户能拖动滑块去获得更多的可利用的选项，那意思是链接到这个站点的的更旧页面。<br /><a href="http://www.dirty.ru/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/dirtyru.gif' alt='Dirty.ru滑块分页' width="240" height="71" /></a></p>
<p><a href="http://www.erweiterungen.de/">Erweiterungen.de</a>，德文版的官方火狐扩展网站，一旦用户点击“&#8230;”按钮就提供更多的导航选项。<br /><a href="http://www.erweiterungen.de/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/erweiterungen.gif' alt='Erweiterungen.de通过用户点击“…”按钮就提供更多的导航选项' width="412" height="149" /></a></p>
<h3>图库</h3>
<p>虽然“标准”分页——彼此相连被链接的蓝色数字——对于大部分的网页界面是非常普通的，设计往往通过色彩、形式、背景和形状进行实验。</p>
<p>分页看起来很好不需要以迷惑用户注意为目标，作为站点导航的一部分，它提供给用户一个重要的功能，因而需要有效的使用。尽管如此，视觉线索是有帮助的。在大多数设计中，传统使用的颜色被蓝色和灰色主宰。</p>
<h3>简单列举</h3>
<p class="noIndent"><a href="http://www.facebook.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/facebook.gif' alt='facebook.com分页' width="93" height="43" /></a><br /><a href="http://www.iht.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/iht.png' alt='iht.com的分页' width="109" height="41" /></a><br /><a href="http://www.businessweek.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/bw.gif' alt='businessweek.com的分页' width="168" height="50" /></a><br /><a href="http://www.slanted.de/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/slanted.gif' alt='slanted.de的分页' width="342" height="41" /></a><br /><a href="http://www.cpluv.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/cpluv.png' alt='cpluv.com的分页' width="394" height="49" /></a><br /><a href="http://www.stylegala.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/stylegala.gif' alt='stylegala.com的分页' width="223" height="50" /></a><br /><a href="http://www.everyzing.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/everyzing.gif' alt='everyzing.com的分页' width="212" height="47" /></a><br /><a href="http://www.overture21.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/overture21.gif' alt='overture21.com的分页' width="284" height="43" /></a><br /><a href="http://www.mis-algoritmos.com/2007/03/16/some-styles-for-your-pagination/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/misal.gif' alt='mis-algoritmos.com的分页' width="275" height="62" /></a></p>
<h3>使用色彩和形状</h3>
<p>设计者通常用颜色高亮去显示当前页，以区分它和其它页。页码也被给于形状：长方形、圆形或者按钮。当前页通常是不被链接的。<br /><a href="http://stylishlabs.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/stylishlabs.png' alt='stylishlabs.com的分页' width="228" height="44" /></a><br /><a href="http://store.apple.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/apple.gif' alt='store.apple.com的分页'  width="229" height="60" /></a><br /><a href="http://www.bildblog.de/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/bildblog.gif' alt='bildblog.de的分页' width="233" height="45" /></a><br /><a href="http://www.nnm.ru/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/nnmru.gif' alt='nnm.ru的分页 'width="241" height="48" /></a><br /><a href="http://www.sitepoint.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/sitepoint.png' alt='sitepoint.com的分页' width="228" height="44" /></a><br /><a href="http://www.amazon.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/amazon.gif' alt='amazon.com的分页' width="270" height="43" /></a><br /><a href="http://www.maple.nu/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/maple.png' alt='maple.nu的分页' width="278" height="46" /></a><br /><a href="http://www.chow.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/chow-pagination.gif' alt='chow.com的分页' width="204" height="51" /></a><br /><a href="http://www.italknews.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/italknews.gif' alt='italknews.com的分页' width="303" height="42" /></a><br /><a href="http://www.empressr.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/empressr.png' alt='empressr.com的分页' width="316" height="53" /></a><br /><a href="http://www.flickr.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/flickr.gif' alt='http://www.flickr.com/' width="335" height="54" /></a><br /><a href="http://www.ttiqq.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/ttiqq.gif' alt='ttiqq.com的分页' width="395" height="72" /></a><br /><a href="http://www.crankk.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/crankk.gif' alt='crankk.com的分页' width="293" height="45" /></a><br /><a href="http://www.ebizmba.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/ebizma.gif' alt='ebizmba.com的分页' width="386" height="49" /></a><br /><a href="http://www.uxmag.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/uxmag.gif' alt='uxmag.com的分页' width="289" height="87" /></a><br /><a href="http://www.digg.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/digg.gif' alt='digg.com的分页' width="472" height="62" /></a><br /><a href="http://www.wykop.pl/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/wykop.gif' alt='wykop.pl的分页' width="459" height="49" /></a><br /><a href="http://www.wikio.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/wikio.gif' alt='wikio.com的分页' width="361" height="50" /></a><br /><a href="http://www.become.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/become.gif' alt='become.com的分页' width="257" height="52" /></a><br /><a href="http://www.meneame.net/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/meneame.gif' alt='meneame.net的分页' width="496" height="53" /></a><br /><a href="http://msdn2.microsoft.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/msdn.gif' alt='msdn2.microsoft.com的分页' width="240" height="58" /></a><br /><a href="http://www.tutorialsgarden.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/tutorialsgarden.gif' alt='tutorialsgarden.com的分页' width="286" height="56" /></a><br /><a href="http://www.pixsy.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/pixsy.gif' alt='pixsy.com的分页' width="325" height="66" /></a><br /><a href="http://drupal.org/forum/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/drupal.gif' alt='drupal.org/forum/的分页' width="469" height="55" /></a><br /><a href="http://www.ulf-theis.de/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/technorati.gif' alt='ulf-theis.de的分页' width="270" height="58" /></a><br /><a href="http://www.quintura.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/quintura.gif' alt='quintura.com的分页' width="243" height="61" /></a><br /><a href="http://www.programmableweb.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/programmableweb.gif' alt='programmableweb.com的分页' width="239" height="51" /></a><br /><a href="http://www.newsgarbage.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/newsgarbage.gif' alt='newsgarbage.com的分页' width="326" height="47" /></a><br /><a href="http://www.drweb.de/weblog/weblog/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/drweb.gif' alt='drweb.de/weblog/weblog/的分页' width="479" height="67" /></a><br /><a href="http://www.toplinks.gr/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/toplinks.gif' alt='toplinks.gr的分页' width="410" height="59" /></a><br /><a href="http://www.blogmarks.net/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/blogmarks.gif' alt='blogmarks.net的分页' width="376" height="44" /></a><br /><a href="http://www.ulf-theis.de/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/ulf.gif' alt='ulf-theis.de分页' width="326" height="50" /></a><br /><a href="http://www.designsnack.com/?page=browse&#038;asc_desc=desc&#038;site_level=approved&#038;order_by=approved_id&#038;category=all&#038;rows=40"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/designshack.gif' alt='designsnack.com的分页' width="443" height="44" /></a><br /><a href="http://www.listible.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/litible.gif' alt='listible.com的分页' width="188" height="56" /></a><br /><a href="http://www.sproose.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/sproose.gif' alt='sproose.com的分页' width="489" height="62" /></a><br /><a href="http://www.mister-wong.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/mister-wong.gif' alt='mister-wong.com的分页' width="166" height="55" /></a><br /><a href="http://www.gnoos.com.au/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/gnoos.gif' alt='gnoos.com.au的分页' width="271" height="44" /></a><br /><a href="http://www.gizmodo.de/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/gizmodo.gif' alt='gizmodo.de的分页' width="290" height="58" /></a><br /><a href="http://justice.anglican.org.nz/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/social.gif' alt='justice.anglican.org.nz的分页' width="304" height="55" /></a><br /><a href="http://codesnipers.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/codesnipers.gif' alt='codesnipers.com的分页' width="413" height="53" /></a></p>
<h3>带手工页码输入框的分页</h3>
<p>在一些情况下，用户可以通过输入框手工提供想浏览的页码。这对选项数目有限的分页来说是很常见的，例如在这些设计里你不能跳到你想去的上一页。<br /><a href="http://www.newyorker.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/newyorker.gif' alt='newyorker.com的分页' width="226" height="42" /></a><br /><a href="http://www.veer.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/veer.gif' alt='veer.com的分页' width="292" height="89" /></a><br /><a href="http://www.talkdigger.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/talkdigger.gif' alt='talkdigger.com的分页' width="459" height="57" /></a></p>
<h3>与众不同的方案</h3>
<p class="noIndent"><a href="http://www.metacafe.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/metacafe.gif' alt='metacafe.com的分页' width="501" height="80" /></a><br /><a href="http://blogs.icerocket.com/"><img src='http://dancewithnet.com/wp-content/uploads/2007/11/icerocket.jpg' alt='blogs.icerocket.com的分页' width="276" height="72" /></a></p>
<h3>原文</h3>
<p><a href="http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/">Pagination Gallery: Examples And Good Practices</a></p>
]]></content:encoded>
			<wfw:commentRss>http://dancewithnet.com/2007/11/19/pagination-gallery-examples-and-good-practices/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>谈用户体验，别落下商业利益</title>
		<link>http://dancewithnet.com/2007/06/29/do-not-forget-commercially-viable-about-talking-ux/</link>
		<comments>http://dancewithnet.com/2007/06/29/do-not-forget-commercially-viable-about-talking-ux/#comments</comments>
		<pubDate>Fri, 29 Jun 2007 00:31:23 +0000</pubDate>
		<dc:creator>秦歌</dc:creator>
				<category><![CDATA[UX & Usability]]></category>
		<category><![CDATA[PV]]></category>
		<category><![CDATA[ux]]></category>
		<category><![CDATA[商业利益]]></category>

		<guid isPermaLink="false">http://dancewithnet.com/2007/06/29/do-not-forget-commercially-viable-about-talking-ux/</guid>
		<description><![CDATA[前天看到《他想要什么？》中提到这样一个现象：用户点击标题链接，跳转到的页面是该标题的栏目页，并且在首屏看不到该标题的内容。并以此分析出：
……设计者的理由是：不仅给用户当... ]]></description>
			<content:encoded><![CDATA[<p>前天看到<a href="http://www.chouyu.com.cn/article.asp?id=43">《他想要什么？》</a>中提到这样一个现象：用户点击标题链接，跳转到的页面是该标题的栏目页，并且在首屏看不到该标题的内容。并以此分析出：</p>
<blockquote><p>……设计者的理由是：不仅给用户当前文章，还给他（她）们更多的文章，岂不更好？也许这是真实的想法（当然，也许只是借口）。如果按照这个理由来理解，我个人认为，设计者过分主观的判断了用户需求。设计者认为他们这是在为用户好，用户会需要更多的新闻。需要给用户做这个主吗？……</p>
</blockquote>
<p>得出的结论和建议是：</p>
<blockquote><p>……想要说的原则已经很清楚了&#8212;尊重用户的要求。</p>
<p>什么才是用户想要的？怎么才算是好的用户体验？（啊！用户体验，我烦这个词了，到处都是这个词，任何讨论中，要说服对方，发言者都会用上这个词儿。）尊重用户的要求是一个基本的准则。人家说要看那条新闻了，就先给人家看，用页面中最大的篇幅，写成大字，好好展示给人家。……</p>
</blockquote>
<p>分析的很对，结论和建议也很好，可是拿着这个分析、结论和建议给各个大小门户的主编游说一遍后回来，依旧发现，随处都是点击标题链接跳转到栏目/专题页，标题对应的内容却不见踪影。这是为什么？<span id="more-1070"></span></p>
<p>先介绍一下PV。Page View，即页面浏览量，或点击量；通常是衡量一个网络新闻频道或网站甚至一条网络新闻的主要指标。计算方式是，一个访问者在24小时(0点到24点)内到底看了你网站几个页面。这里需要强调：同一个人浏览你网站同一个页面，不重复计算pv量，点100次也算1次。说白了，pv就是一个访问者打开了你的几个页面。PV之于网站，就像收视率之于电视，从某种程度上已成为投资者衡量商业网站表现的最重要尺度。</p>
<p>接着简单分拆一下访问者浏览一个标题链接可能发生的情况和对PV的影响：</p>
<ol>
<li>跳转到标题内容，看完后关闭页面，给站点增加了1个PV，用户得到想要的，对站点感觉不错，以后可能会经常来看。</li>
<li>跳转到专题/栏目页面
<ol>
<li>一部分用户，没有得到想要的，有被欺骗的感觉，直接关闭页面，增加了1个PV。
<ol>
<li>用户感觉不好，以后可能不会来这个站点</li>
<li>虽然感觉不爽，但是能够看到类似信息的地方有限，忍耐一下，还是会来这个站点</li>
</ol>
</li>
<li>一部分用户，没有找到想要的，但是随即发现页面上其他的几个感兴趣的内容，狂点之，给站点增加N个PV值。</li>
</ol>
</li>
</ol>
<p>由上面可以看出，点击标题链接跳转到一个专题/栏目页，很可能给整个站点带来更高的PV值。实际上，网站编辑们正是基于这个目的操作的，他们很清楚的知道，这种方式用户感觉不好，是在挑战用户的忍耐度，会导致用户流失，所以绝大部分标题链接直接跳转到文章页，少部分跳转到专题/栏目页，以寻找增加PV值和提高用户满意度间的平衡。</p>
<p>编辑们在内容编排上是很了解用户的。“图:女生被脱光在楼梯遭暴打”，“女生被脱光在楼梯遭暴打”，“专题/栏目:女生被脱光在楼梯遭暴打”，这是很常见的三种标题形式，图未必是我们期望看到的图，跳转的页面未必是我们期望想看到内容页，但用诱惑的语言和加上“图”的这种方式，很容易勾引大量的用户点击，从而提升PV值。欺骗和诱导用户，是现在互联网资讯的一大特色。这些问题和设计师一点关系都没有。</p>
<p>点击一个标题链接，跳转到一个专题/栏目页面不是用户用户期望的，而用户在浏览过程中产生的PV过少，不是网站所期望的，那么能否考虑在文章页增加引导用户浏览的设计。其实引导式设计现在最常见的做法是相关链接，这个是通过关键词匹配产生的，但是这个和站内搜索引擎得出的结果没有什么两样，并且很多时候和文字广告夹杂在一起，很容易引起混淆，虽然可以带来更多的PV，但是这是远远不够的。当用户在浏览一篇内容时，他还会对哪些关键点有兴趣，对哪些内容有进一步了解的欲望，还有哪些用户在关注这个内容等等，如果能把这些内容本身的元素挖掘好，形成一个符合用户习惯和期望的内容深度关联，那么就会得到用户体验和商业利益的双丰收，当然形成内容间的深度关联和引导比简单的勾引和欺骗用户要难的多了。</p>
<p>商业站点注重用户体验的最终目的是获取更好的商业利益，如果谈用户体验和如何改进以提升用户体验，只从用户角度着想，丝毫不考虑站点的商业利益，那么站点也会丝毫不考虑这样的建议和改进，某种设计给用户的感觉好不好，应该尊重用户的需求，这些道理他们其实很清楚的，事实上只要随便调查几个用户就会知道答案了。他们需要的是如何通过尊重用户需求带来更好的商业利益，而且这些利益是可以快速看到，且可以量化的，这样某些能提升用户体验的设计才会真正得以实现。所以，就如题了。</p>
]]></content:encoded>
			<wfw:commentRss>http://dancewithnet.com/2007/06/29/do-not-forget-commercially-viable-about-talking-ux/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>向Yahoo Mail的主页学习</title>
		<link>http://dancewithnet.com/2007/05/23/learn-from-yahoo-mail-homepage/</link>
		<comments>http://dancewithnet.com/2007/05/23/learn-from-yahoo-mail-homepage/#comments</comments>
		<pubDate>Tue, 22 May 2007 16:31:03 +0000</pubDate>
		<dc:creator>秦歌</dc:creator>
				<category><![CDATA[UX & Usability]]></category>
		<category><![CDATA[Mail]]></category>
		<category><![CDATA[ux]]></category>
		<category><![CDATA[yahoo]]></category>

		<guid isPermaLink="false">http://dancewithnet.com/2007/05/23/learn-from-yahoo-mail-homepage/</guid>
		<description><![CDATA[向Yahoo Mail的主页学习什么?

视觉重点(Logo、宣传图片、说明文字)在左边，鼠标的操作重点（登录框、注册链接等）在右边，这是基于人从左到右阅读习惯，用右手翻书右手使用鼠标（绝大部分... ]]></description>
			<content:encoded><![CDATA[<h3>向<a href="http://mail.yahoo.com">Yahoo Mail的主页</a>学习什么?</h3>
<ol>
<li>视觉重点(Logo、宣传图片、说明文字)在左边，鼠标的操作重点（登录框、注册链接等）在右边，这是基于人从左到右阅读习惯，用右手翻书右手使用鼠标（绝大部分人）的使用习惯</li>
<li>登录框和注册谁重要？一次注册，多次登录，毫无疑问登录应该更重要一些，这就决定了登录框的设计应该处于最易用的位置</li>
<li>如何处理登录的流程？ID-&gt;密码-&gt;记住登录-&gt;登录按钮-&gt;忘记ID或密码-&gt;登录帮助</li>
<li>按钮是按钮，链接是链接？登录(sign in)是一个按钮，注册(sign up)是一个链接</li>
<li>视觉设计，简洁而不简单</li>
<li>登录表单的设计，比如fieldset和label的应用</li>
<li>……</li>
</ol>
<p><span id="more-1015"></span></p>
<h3>看Yahoo Mail的主页的变迁</h3>
<ol>
<li>Yahoo Mail 2000-2001年首页，这是一个很熟悉的页面了，因为人们的阅读习惯，所以重要的注册和登录放在左边<br /><img src='http://dancewithnet.com/wp-content/uploads/2007/05/yahoo-mail-1.png' alt='Yahoo Mail 2000-2001年首页' width="640" height="477" /></li>
<li>Yahoo Mail 2001-2002年首页，视觉重点虽然在左边，对于大多数人来讲，鼠标的操作重点在右边，于是登录框在右边区别显示，Yahoo Mail首页的整体结构基本形成，这个时候说明文字不管好不好辨认能够围绕圆球排列或许是一种技术表现<br /><img src='http://dancewithnet.com/wp-content/uploads/2007/05/yahoo-mail-2.png' alt='Yahoo Mail 2001-2002年首页' width="640" height="563" /></li>
<li>Yahoo Mail 2002-2003年首页，对齐说明文字，突出关键词<br /><img src='http://dancewithnet.com/wp-content/uploads/2007/05/yahoo-mail-3.png' alt='Yahoo Mail 2002-2003年首页' width="640" height="532" /></li>
<li>Yahoo Mail 2004-2005年首页，美女在这个时候是眼球经济，在此带动下把链接伪装成按钮也成为一种流行，这种恶劣的流行一直还影响着今天的我们<br /><img src='http://dancewithnet.com/wp-content/uploads/2007/05/yahoo-mail-4.png' alt='Yahoo Mail 2004-2005年首页' width="640" height="526" /></li>
<li>Yahoo Mail 2006-2007年首页，圆角和色块配合，简洁而不简单的设计，这个四个页面是按照出现时间顺序排列的，明显的反应出对链接和按钮的考虑，注册和登录位置考虑（突出注册或为登录框更易于登录的好位置）等等<br /><img src='http://dancewithnet.com/wp-content/uploads/2007/05/yahoo-mail-5.png' alt='Yahoo Mail 2006-2007年首页3' width="640" height="517" /><img src='http://dancewithnet.com/wp-content/uploads/2007/05/yahoo-mail-6.png' alt='Yahoo Mail 2006-2007年首页2' width="640" height="591" /><br />
<img src='http://dancewithnet.com/wp-content/uploads/2007/05/yahoo-mail-7.png' alt='Yahoo Mail 2006-2007年首页1' width="640" height="502" /><img src='http://dancewithnet.com/wp-content/uploads/2007/05/yahoo-mail-8.png' alt='Yahoo Mail 2006-2007年最新首页' width="640" height="516" /></li>
</ol>
<h3>谁在向Yahoo Mail的主页学习？</h3>
<ol>
<li><a href="http://mail.163.com">163邮箱</a>2007年首页<br /><img src='http://dancewithnet.com/wp-content/uploads/2007/05/163-mail.png' alt='163邮箱2007年首页' width="640" height="500" /></li>
<li><a href="http://passport.baidu.com/?login">百度登录</a>2007年首页<br /><img src='http://dancewithnet.com/wp-content/uploads/2007/05/baidu-reg.png' alt='百度登录2007年首页' width="640" height="365" /></li>
<li><a href="http://www.alipay.com">支付宝</a>2006年首页<br /><img src='http://dancewithnet.com/wp-content/uploads/2007/05/alipay.png' alt='支付宝2006年首页' width="464" height="307" /></li>
</ol>
<p>不仅学习其形式，更重要的是其神是什么？这是所有人都应该努力的。</p>
]]></content:encoded>
			<wfw:commentRss>http://dancewithnet.com/2007/05/23/learn-from-yahoo-mail-homepage/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>淘宝首页变胖了？</title>
		<link>http://dancewithnet.com/2007/04/24/taobao-grow-fat/</link>
		<comments>http://dancewithnet.com/2007/04/24/taobao-grow-fat/#comments</comments>
		<pubDate>Mon, 23 Apr 2007 17:49:42 +0000</pubDate>
		<dc:creator>秦歌</dc:creator>
				<category><![CDATA[UX & Usability]]></category>
		<category><![CDATA[ux]]></category>
		<category><![CDATA[淘宝]]></category>

		<guid isPermaLink="false">http://dancewithnet.com/2007/04/24/taobao-grow-fat/</guid>
		<description><![CDATA[今天在Taobao.com UED Team的blog上看到《我变胖了…》，才知道淘宝首页改版了。于是就去瞅瞅了，本来想找个改版前的首页做对比，看看变化，可惜只找到比较早的一个，所以索性就改版后的首页... ]]></description>
			<content:encoded><![CDATA[<p>今天在Taobao.com UED Team的blog上看到<a href="http://www.uiplanet.com/taobao/2007/04/23/grow_fat/">《我变胖了…》</a>，才知道淘宝首页改版了。于是就去瞅瞅了，本来想找个改版前的首页做对比，看看变化，可惜只找到<a href="http://blog.donews.com/kenoah/archive/2006/03/30/803108.aspx">比较早的一个</a>，所以索性就改版后的首页来侃几句。</p>
<p>对于一个内容极其丰富的站点首页，其设计难点并不是外观设计上，而是如何通过首页既满足用户的所需，又要体现公司的策略、迎合商务需求，这个平衡实现的基石是信息构架，而信息构架往往建立在站点的服务、用户的需求、公司的商务、用户的历史数据以及调查等等基础上，并且还牵涉到领导者的意愿，所以一个改版往往在学习中反复中争吵中妥协中完成，所以每一个勇于创新的改版都值得支持和赞扬。<span id="more-994"></span></p>
<p>赞扬的话就不多说，现在列列个人感觉：</p>
<h3>首屏</h3>
<p>外型上最大的改变就是页面宽度变成了950px，这个改变应该是可以反应出访问淘宝的用户屏幕分辨率绝大部分在1024*768以上，这种变化无疑让一屏之内内容的容量大了起来，让人的视野更开阔。就淘宝的情况，一屏的大小应该为1005*600(<a href="/2007/03/30/how-much-is-one-screen-of-web/">《网页一屏有多大？》</a>)，所以其首屏是：<br /><img src='http://dancewithnet.com/wp-content/uploads/2007/04/taobao-first-screen.png' alt='淘宝的首屏' width="640" height="403" /></p>
<p>这是一个如此饱满的首屏，似乎颜色和图形抢走了文字所体现内容的光芒，特别是有些刺眼的蓝，还有“品牌商城”右侧的那个黄色的斜线，或者文字和图片拥挤在一起，莫非这就是一个拥挤热闹的集市感觉？</p>
<h3>搜索</h3>
<ol>
<li>上图页面首屏中，有两个搜索框，有两个“高级搜索”链接，似乎不一样，但是我看不出两者区别，尝试性搜索一下，发现在默认情况下搜索结果页面完全一样。</li>
<li>当我输入“笔记本 dell”后，去选择搜索分类的时候发现：<img src='http://dancewithnet.com/wp-content/uploads/2007/04/taobao-search.png' alt='淘宝搜索' width="636" height="289" />
<ol>
<li>搜索分类中已经有&#8221;笔记本电脑&#8221;，为啥不学习一下<a href="http://amazon.com/">amazon.com</a>,把分类放在前面呢？好看和好用哪个重要呢?</li>
<li>如果我采用默认的“所有分类”，那我输入完关键字，到点击搜索按钮是否鼠标运动的距离远点呢？当然如果知道直接用Enter或许方便点，但是那个分类的下拉列表怎么看都像一个干扰。</li>
<li>如果“搜索宝贝”那个下拉列表很重要，是否可以考虑用单选按钮或者tab页的形式来方便快速直接选择呢？</li>
<li>“所有分类”那个下拉列表有&#8221;&#8212;&#8212;&#8212;-&#8221;项和空白项，这是为了区分吗？为啥不考虑optgroup</li>
</ol>
</li>
<li>高级搜索的拥挤，和预留下太多的空白下拉列表，这个应该修改成按需显示吧？<img src='http://dancewithnet.com/wp-content/uploads/2007/04/taobao-advanced-search.png' alt='淘宝高级搜索' width="564" height="257" /></li>
</ol>
<h3>类Tab页设计</h3>
<p>现在似乎对页面内容的这种Tab页形成一种定势了，当点击到集市调转到一个变化很大的页面时，感觉很不适应。<br /><img src='http://dancewithnet.com/wp-content/uploads/2007/04/taobao-tab.png' alt='淘宝的首页之商品类目' width="519" height="238"  /><br />通过背景对相同形式的大片内容的区分，这点挺好的，但是似乎在Firefox下还有一些小问题。</p>
]]></content:encoded>
			<wfw:commentRss>http://dancewithnet.com/2007/04/24/taobao-grow-fat/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>评论当然是顺序好！</title>
		<link>http://dancewithnet.com/2007/04/13/comments-should-be-in-order/</link>
		<comments>http://dancewithnet.com/2007/04/13/comments-should-be-in-order/#comments</comments>
		<pubDate>Thu, 12 Apr 2007 19:12:03 +0000</pubDate>
		<dc:creator>秦歌</dc:creator>
				<category><![CDATA[UX & Usability]]></category>
		<category><![CDATA[blog]]></category>
		<category><![CDATA[ux]]></category>
		<category><![CDATA[评论]]></category>

		<guid isPermaLink="false">http://dancewithnet.com/2007/04/13/comments-should-be-in-order/</guid>
		<description><![CDATA[昨天在毅博客上看到《评论是倒序好还是顺序好？》，仔细看完这篇文章加上后面十几条留言，我清晰的得出我的结论如题：评论当然是顺序好！
一个典型评论倒序博客spaces.live.com
首先看一下... ]]></description>
			<content:encoded><![CDATA[<p>昨天在<a href="http://andymao.com/andy/">毅博客</a>上看到<a href="http://andymao.com/andy/post/73.html">《评论是倒序好还是顺序好？》</a>，仔细看完这篇文章加上后面十几条留言，我清晰的得出我的结论如题：评论当然是顺序好！<span id="more-985"></span></p>
<h3>一个典型评论倒序博客<a href="http://spaces.live.com">spaces.live.com</a></h3>
<p>首先看一下一个典型的博客：<a href="http://msnspacesuser.spaces.live.com/">http://msnspacesuser.spaces.live.com/</a>和其中一篇文章：<a href="http://msnspacesuser.spaces.live.com/blog/cns!2E222D68DD1165E9!166.entry">http://msnspacesuser.spaces.live.com/blog/cns!2E222D68DD1165E9!166.entry</a></p>
<ol>
<li>主页的列表是文章完全显示，文章的结尾有“添加评论”，“阅读评论（条数）”链接</li>
<li>评论有分页，按照倒序排列</li>
<li>发表评论后，页面跳转到最新发表的评论上</li>
</ol>
<p>但是我使用的过程中会发生如下问题：</p>
<ol>
<li>我最评论也感兴趣，但是谁能告诉我，可以按照时间/逻辑顺序把这个文章上的评论看一遍，不说几百条，就是十几条就已经很不爽了吧。</li>
<li>我发表了一个新评论，但发现我意犹未尽，或者是看到别人的评论，我还想继续发表，我怎么办？点一下“添加评论”、用鼠标滚到发表评论处、或者是按Home键?</li>
<li>我发表的这个主题是讨论性质的，针对留言的相互交流很重要，我就是希望大家针对主题和留言一起讨论，怎么办?</li>
<li>似乎不能再用楼上，楼下这个词了，很容易糊涂</li>
</ol>
<h3>博客的评论设置</h3>
<ol>
<li><strong>评论是按照时间顺序的</strong>
<ol>
<li>一篇好的博文，不仅是本身质量好，同时它的评论也要精彩，针对评论的评论也精彩，这才是博的意思(就像网易的网友往往就是为了看新闻评论才去看新闻)。所以需要看留言，需要按照大家评论的逻辑关系看留言，需要按顺序看留言，这是我们阅读的习惯。</li>
<li>评论出现跑题，这正说明大家喜欢看评论，这不应该是评论顺序的错，难道和博文的质量没有关系？因为害怕评论跑题就想通过倒序来干扰用户看评论，那不如所有的评论都不可显示，或者把发表评论的输入框放在评论上面。</li>
</ol>
</li>
<li><strong>博文结尾应该有“添加评论”</strong><br />如果看完文章，就像直接评论，不想看其他评论，就可以跳到添加评论的地方发表评论，同时也减少了通过鼠标滚动页面过程中评论过长的干扰，同时这也一定程度上保证了评论和博文内容的关联性吧。虽然Home键也能办到，但是…… </li>
<li><strong>博文标题列表处应该有“评论（条数）”和“最新评论”，博文结尾处应该有“最新评论”</strong><br /> 想看从头看评论的看评论，想看最新评论的看最新评论，大家都方便。</li>
<li><strong>发表评论后应该继续停留在发表评论处</strong>
<ol>
<li>意犹未尽时可以继续发表评论</li>
<li>发表评论的的输入框一般高度不大，这就意味着只要自己回复的内容不是特别多，可以回味自己的评论同时，不用查询就可以看到其他人的评论</li>
</ol>
<li><strong>如果评论过长，需要分页，可以考虑把最新的一页放在文章的下面，这样最新的可以最先看到。</strong><br />这样在也一定程度上解决了论坛上靠后的帖子关注度低的问题。</li>
<li><strong>好好利用评论的RSS</strong><br />你非常关注的新的评论，你可以通过浏览器或者Google Reader之类的订阅，并且很多RSS阅读器本身就支持按照时间顺序或者倒序进行排序，比如你在IE7下浏览<a href="http://dancewithnet.com/2007/04/13/comments-should-be-in-order/feed/">本文的RSS</a>。</li>
</ol>
<h3>欢迎大家继续讨论</h3>
<p>纵观一下目前比较牛的几个BSP的博客评论：</p>
<ol>
<li><a href="http://blog.sina.com.cn">新浪</a>：按照时间顺序，有分页，但是每次评论都必须经过长长的评论才到添加评论的地方，添加评论后评论分页停留在最后一页，但是页面跳转到文章头部，且Firefox下似乎有些问题。</li>
<li><a href="http://blog.163.com">网易</a>：按照时间倒序，有分页，和Spaces蛮像，就是也需要每次评论都必须经过长长的添加评论才到评论的地方，添加评论后停留在添加评论的地方</li>
<li><a href="http://hi.baidu.com/">百度</a>：按照时间顺序，无分页，但是每次评论都必须经过所有的评论才到添加评论的地方,添加评论后停留在添加评论的地方</li>
</ol>
<p>这是我走马观花看的几个，感觉就是有的花哨功能蛮多，但是在用户可用性方面下的功夫就少了。</p>
]]></content:encoded>
			<wfw:commentRss>http://dancewithnet.com/2007/04/13/comments-should-be-in-order/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>重装Yisou,体验易搜</title>
		<link>http://dancewithnet.com/2007/04/05/reborn-yisou/</link>
		<comments>http://dancewithnet.com/2007/04/05/reborn-yisou/#comments</comments>
		<pubDate>Wed, 04 Apr 2007 19:11:40 +0000</pubDate>
		<dc:creator>秦歌</dc:creator>
				<category><![CDATA[UX & Usability]]></category>
		<category><![CDATA[互联网 & IT]]></category>
		<category><![CDATA[ux]]></category>
		<category><![CDATA[搜索]]></category>
		<category><![CDATA[易搜]]></category>
		<category><![CDATA[雅虎]]></category>

		<guid isPermaLink="false">http://dancewithnet.com/2007/04/05/reborn-yisou/</guid>
		<description><![CDATA[3月31日，雅虎易搜beta版背着“搜索更容易，生活更丰富”重装上阵，主页元素的手绘风格使我很容易想到最近在地铁站和电视上随处可见的阿迪达斯那组《My Story》广告，一种清新生动亲切的... ]]></description>
			<content:encoded><![CDATA[<p>3月31日，<a href="http://yisou.com/">雅虎易搜beta版</a>背着“搜索更容易，生活更丰富”重装上阵，主页元素的手绘风格使我很容易想到最近在地铁站和电视上随处可见的阿迪达斯那组<a href="http://www.adidas.com/campaigns/iin/content/brand.asp?adidas_cc=cn">《My Story》广告</a>，一种清新生动亲切的生活气息，感觉非常喜欢，今天我又好好的用了一把，谈谈我的体验和感受。<span id="more-960"></span></p>
<p>Yisou原来是一搜，雅巴合并后被雪藏了，这次重出江湖名为易搜，虽从名字上感觉易搜不如一搜，因为平时说搜索引擎比较简单有用的常用话是“一搜就搜出来了”，但是易搜也直白的表达了“搜索更容易”这句话，更重要的这种生动生活化的设计风格和有别于Google，baidu，yahoo等常见搜索但是更加符合大部分人使用习惯的页面布局，让我感受到有了易搜“生活更丰富”。</p>
<h3>主页</h3>
<p class="noIndent"><a href="http://yisou.com"><img src='http://dancewithnet.com/wp-content/uploads/2007/04/yisou-1.png' alt='易搜2007.4.5主页' width="640" height="222" /></a></p>
<h4>表扬</h4>
<ol>
<li>只有一个输入框，没有搜索分类，让人不用为搜索分类而思考，简单方便。仅通过一个简单的输入框，就能快速获取我想要的搜索结果，这不正式我想要吗？</li>
<li>输入框面积大，输入字体大且加粗，醒目方便，特别对残障人士很有益处。</li>
<li>手绘风格的网页元素，让整个页面简洁而生动起来。</li>
</ol>
<h4>批评</h4>
<ol>
<li>搜索按钮，鼠标放上去依旧是普通的箭头而不变成小手，且面积过小（即上图箭头的虚线框大小），不易用，我想使用易搜的人未必都喜欢或者知道直接使用Enter键的。</li>
<li>右侧的“更多方便”下的“全网搜索”，依据我的理解应该是指主页的搜索吧，但是点击丝毫没有反应，让人感觉莫名，没有准备好的东西先别放上来吧，让人浪费感情啊。</li>
</ol>
<h3>搜索结果页面</h3>
<p><a href="http://www.yisou.com/search:%E9%9A%8F%E7%BD%91%E4%B9%8B%E8%88%9E">1024*768下易搜搜索“随网之舞”结果页</a><br /><img src='http://dancewithnet.com/wp-content/uploads/2007/04/yisou-7.png' alt='1027*768下易搜搜索“随网之舞”结果页' width="640" height="396" /></p>
<p><a href="http://www.yisou.com/search:%E9%9A%8F%E7%BD%91%E4%B9%8B%E8%88%9E">1280*1024下易搜搜索“随网之舞”结果页</a><br /><img src='http://dancewithnet.com/wp-content/uploads/2007/04/yisou-6.png' alt='1280*1024下易搜搜索“随网之舞”结果页' width="640" height="616" /></p>
<h4>表扬</h4>
<ol>
<li>搜索输入框在页面第一行，且一直可见，非常方便再次输入关键词搜索。</li>
<li>翻页由常见的页脚横向翻页改为右侧竖向标签翻页，页码和内容关联更加清晰，这是符合绝大部分人的使用习惯，绝大部分人的视觉重点在左边，操作重点在右边，在这<a href="http://yahoo.com">Yahoo首页</a>，<a href="http://msn.com">MSN首页</a>，<a href="http://mail.yahoo.com">Yahoo Mail</a>等网页的设计上明显的表现出来。</li>
<li>在分辨率1280*1024以下，每页显示5条信息和10个页码（包括上一页和下一页两个箭头），在1280*1024以上每页显示9条信息和14个页码（包括上一页和下一页两个箭头），具体可以见上图。这样既充分利用屏幕空间，又几乎没有滚动条，配合AJAX，通过上一页和下一页两个按钮不需要来回移动鼠标就可以非常方便的查看每页内容，而且效率高。</li>
<li>每条信息都有序号，这个对用户有潜在提示作用，当浏览大量的页面时，不至于迷失方向，同时也有利于无意识的记住某些有用信息。</li>
<li>相关搜索，推荐关键词，图片搜索等在页码右边，既有用，又方便，还符合大部分人的使用习惯。相关搜索可以看着是搜索引擎智能化的一个象征，因为并不是每个人都能很容易的确定搜索的关键词的。</li>
<li>站内、收藏、缓存，这些关联小选项，很有意思，也很有用很贴心。</li>
</ol>
<h4>批评</h4>
<ol>
<li>程序上还有一些问题，比如<a href="http://www.yisou.com/search:%E9%9A%8F%E7%BD%91%E4%B9%8B%E8%88%9E">搜索“随网之舞”得到信息90条</a>，在1024*768下应该是18页，但是结果出现19页，在1280*1024下应该是10页，结果显示是12页，并且提示信息“全网搜索 &#8211; 约一百多条结果, 用时0.00489秒”这个也存在问题，翻页时提示，一会是一百多条，一会是九十条，一会是十条，这个差别也太大了。</li>
<li>Opera下，图片搜索等等都存在布局上的问题，应该是css定位造成的。</li>
<li>鼠标触发链接(hover)效果不是很好，特别是很多时候透明的gif图片背景也变色，很难看。</li>
</ol>
<h3>希望和建议</h3>
<ol>
<li>每页页码长度应该固定，倒数第一、第二、第三等页码和上一页箭头不应该出现跳跃，固定的位置更方便也更符合用户的习惯。<br />当前yisou采用的翻页模型<br /><img src='http://dancewithnet.com/wp-content/uploads/2007/04/yisou-4.png' alt='当前yisou采用的翻页模型' /><br />期望的翻页模型<br /><img src='http://dancewithnet.com/wp-content/uploads/2007/04/yisou-5.png' alt='期望的翻页模型' /></li>
<li>尽量不出现滚动条，整个网站一屏之内的感觉很好，可能有两个解决办法：
<ol>
<li>实现在大多数分辨率、操作系统和浏览器默认情况下不出现滚动条，这个是挑战设计师的多浏览器多分辨率下的设计能力</li>
<li>允许用户定制每页显示的条数和页码的个数</li>
</ol>
</li>
<li>可以得到搜索结果的某一页的链接，也可以利用浏览器的前进和后退，呵呵，这是因为引入AJAX引起的，同样需要解决。</li>
</ol>
<p>俗话说，艺术来源于生活，高于生活，还原于生活。同样，这句话也适合在搜索引擎上，易搜的出现给了我不少惊喜，期望在设计上创新和增加月来越多功能的的同时，能够继续保持页面的简洁和易用，能够继续让我们生活更生动，更能够让很容易的得到我们想要的结果，14天后会有什么呢？</p>
]]></content:encoded>
			<wfw:commentRss>http://dancewithnet.com/2007/04/05/reborn-yisou/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>UX、UI、UCD、Usability、IA等设计中的常见名词</title>
		<link>http://dancewithnet.com/2007/03/21/ux-ui-ucd-usability-and-so-on/</link>
		<comments>http://dancewithnet.com/2007/03/21/ux-ui-ucd-usability-and-so-on/#comments</comments>
		<pubDate>Wed, 21 Mar 2007 10:59:38 +0000</pubDate>
		<dc:creator>秦歌</dc:creator>
				<category><![CDATA[UX & Usability]]></category>
		<category><![CDATA[IA]]></category>
		<category><![CDATA[UCD]]></category>
		<category><![CDATA[UED]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[ux]]></category>
		<category><![CDATA[交互设计]]></category>
		<category><![CDATA[可访问性]]></category>

		<guid isPermaLink="false">http://dancewithnet.com/?p=858</guid>
		<description><![CDATA[最近，总是缠绵在UE、UI、UCD、Interaction Design、UED、UX、HCI、Usability,IA等等名词间，我一边搜集，一边整理，现在放在一次统一解释，以便比较，以正视听。很多地方未必准确，欢迎提出修改意... ]]></description>
			<content:encoded><![CDATA[<p>最近，总是缠绵在UE、UI、UCD、Interaction Design、UED、UX、HCI、Usability,IA等等名词间，我一边搜集，一边整理，现在放在一次统一解释，以便比较，以正视听。很多地方未必准确，欢迎提出修改意见。<span id="more-858"></span></p>
<dl>
<dt>Accessibility&#8212;-可访问性/无障碍访问</dt>
<dd>Accessibility在此处指网页的可访问性。<a href="http://w3.org">W3C</a>的<a href="http://www.w3.org/WAI/intro/accessibility.php">网页可访问性定义</a>如下：</p>
<p>“网页可访问性是残障人士可以无障碍的使用该网页。更具体的说，网页可用性是残障人士可以感知、理解、操纵网页，并与之互动，还能对网页做贡献。网页可访问性也惠及非残障人士，包括由于老化而能力变弱的老人。网页可用性包括所有影响。”</p>
<p>网页可用性概括了所有影响接近或使用网页的残障因素，包括视觉、听觉、身体、语言、感知和神经的残障。</p>
<p><a href="http://www.w3.org/WAI/about-links.html">WAI(Web Accessibility Initiative)</a>即网页可用性倡议通过其全球的组织开发战略、指南和资源以帮残障人士制定网页可用性。</p>
</dd>
<dd>延伸阅读：</p>
<ul class="refer">
<li>[1]<a href="http://www.junchenwu.com/WAI/wai-pageauth.html">Web内容可访问性指南 1.0</a></li>
<li>[2]<a href="http://www.soulogic.com/doc/dia/">《在 30 天内打造更具亲和力的网站》</a></li>
</ul>
</dd>
<dd>
<dt>HCI/CHI(Human-Computer Interaction)&#8212;-人机交互</dt>
</dd>
<dd>
<p>人机交互 CHI(Computer Human Interaction)，国际上也称(HCI，Human Computer Interaction)是一门跨学科的研究，它的研究内容很广，包括心理学领域的认知科学，心理学；软件工程领域的系统构架技术；信息处理领域的语音处理技术和图像处理技术；人工智能领域的智能控制技术等。</p>
<p>总的来说，人机交互本质上是认知过程，人机交互理论是以认知科学为理论基础；人机交互系统是一个闭环系统，人机交互研究是以系统科学作为人机交互研究的框架的方法学；同时，人机交互是以信息技术作为用户界面的技术基础，通过信息系统的建模、形式化描述、整合算法、评估方法以及软件框架等信息技术最终实现和应用人机交互理论。</p>
</dd>
<dd>延伸阅读：
<ul class="refer">
<li>[1]<a href="http://bicespring.blogbus.com/logs/2340357.html">人机交互历史</a></li>
</ul>
</dd>
<dt>IA(Information Architecture)&#8212;-信息体系架构</dt>
<dd>
<p>《Information Architecture for the World Wide Web》作者Louis Rosenfeld的观点，信息体系结构包括“对系统的组织、标注、导航以及搜索所进行的设计工作，这些功能能够帮助人们更加成功地找到和管理信息”（2000）。</p>
<p>信息体系结构，或简称为IA，是高层的信息结构设计，它规划出了用户最终将如何从系统获取信息和知识。信息体系架构师可以被认为是用户体验团队的“系统工程师”，这意味着他（或她）将对内容是如何被组织的、在任何给定时刻哪些页面元素需要可见或可用以及其它的较高层次的决定负责。信息体系架构师直接和用户体验团队的主任一起工作，以便将商业需求和用户需求转换为系统原型。这些原型通常是以一个对系统或过程的描述图表的形式交付的。一个优秀的信息体系架构师的知识背景通常会略微侧重于工程而非设计，同时他们在进行信息结构设计时更倾向于采取以一种较为务实的观点，而非追求创新。
</p>
</dd>
<dt>Interaction Design&#8212;-交互设计</dt>
<dd>
<dl>
<dt>Alan Cooper的定义</dt>
<dd>简单地说，交互设计是人工制品、环境和系统的行为，以及传达这种行为的外观元素的设计和定义。交互设计首先规划和描述事物的行为的方式，然后描述传达这种行为的最有效形式。交互设计是一门特别关注以下内容的学科： </p>
<ul>
<li>定义与产品的行为和使用密切相关的产品形式</li>
<li>预测产品的使用如何影响产品与用户的关系，以及用户对产品的理解</li>
<li>探索产品、人和上下文（物质、文化和历史）之间的对话（Riemann和Forlizzi）</li>
</ul>
</dd>
<dt>《Interaction Design——Beyond Human-Computer Interaction》作者的定义：
</dt>
<dd>交互设计指的是：设计支持人们日常工作与生活的交互式产品。具体地说，交互设计就是关于创建新的用户体验的问题，其目的是增强和扩充人们工作、通信及交互的方式。Winnogard（1997）把交互设计描述为“人类交流和交互空间的设计”</dd>
</dl>
</dd>
<dd>延伸阅读：
<ul class="refer">
<li>[1]<a href="http://www.dedream.com/research/archives/2004/09/aeaeeeaec.html">什么是交互设计(Interaction Design)？</a></li>
<li>[2]<a href="http://bicespring.blogbus.com/logs/3560156.html">交互设计：不是什么和是什么</a></li>
<li>[3]<a href="http://home.rexsong.com/?p=215">Alan Cooper 畅谈交互设计</a></li>
</ul>
</dd>
<dt>UCD(User-Centered Design)&#8212;-以用户为中心设计</dt>
<dd>
<p>一个成功的交互系统必须能够满足用户的需要。这意味着不仅要能够识别各种用户群，而且还可辨别各个用户所掌握的技能、经验以及他们的偏好，但是设计人员并不是想象中的那样了解目标用户。</p>
<p>关于以用户为中心的设计的构成内容尚未达成明确的共识。但是 John Gould 和他在 IBM 的同事于 20 世纪 80 年代开发了一种称为 Design for Usability (GOU88) 的方法，它包括了最为普遍接受的定义。它从若干交互系统的实践中发展而来，其中最著名的系统是 IBM 公司的 1984 Olympic Messaging System (GOU87)。  该方法由四个主要部分组成，如下所述：关注用户、集成化设计、初期用户测试、迭代式设计。</p>
</dd>
<dd>延伸阅读：
<ul class="refer">
<li>[1]<a href="http://uicom.net/blog/attachments/200603/ucd90879645/ucd.htm">以用户为中心的设计</a></li>
</ul>
</dd>
<dt>UI(User Interface)&#8212;-用户界面</dt>
<dd>在人和机器的互动过程（Human Machine Interaction）中，有一个层面，即我们所说的界面（interface）。从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性。</dd>
<dd>GUI（Graphical User Interface）图形用户界面是UI一个部分</dd>
<dt>Usability&#8212;-可用性</dt>
<dd>
<p>可用性（Usability）是交互式IT产品/系统的重要质量指标，指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度，即用户能否用产品完成他的任务，效率如何，主观感受怎样，实际上是从用户角度所看到的产品质量，是产品竞争力的核心。</p>
<p>ISO 9241-11国际标准对可用性作了如下定义：产品在特定使用环境下为特定用户用于特定用途时所具有的有效性（effectiveness）、效率（efficiency）和用户主观满意度（satisfaction）。其中：</p>
<ul>
<li>有效性 -用户完成特定任务和达到特定目标时所具有的正确和完整程度；</li>
<li>效率 -用户完成任务的正确和完整程度与所使用资源（如时间）之间的比率；</li>
<li>满意度 -用户在使用产品过程中所感受到的主观满意和接受程度。</li>
</ul>
<p>可用性工程（Usability Engineering）是交互式IT产品/系统的一种先进开发方法，包括一整套工程过程、方法、工具和国际标准，它应用于产品生命周期的各个阶段，核心是以用户为中心的设计方法论（user-centered design &#8211; UCD），强调以用户为中心来进行开发，能有效评估和提高产品可用性质量，弥补了常规开发方法无法保证可用性质量的不足，九十年代以来开始在美、欧、日、印等国IT工业界普遍应用。</p>
</dd>
<dd>延伸阅读：
<ul class="refer">
<li>[1]<a href="http://usability.dlmu.edu.cn/chinese/kyxrd.htm">可用性ABC</a></li>
<li>[2]<a href="http://www.uigarden.net/chinese/ding-yi-hui-hua">编织可用性与文化: 可用性的维度：定义会话，推动进程</a></li>
</ul>
</dd>
<dt>UXD/UED(User Experience Design)&#8212;-用户体验设计</dt>
<dd>
<p>“用户体验”，UX（User Experience）指的是软件应用和审美价值，是以用户至上的观点作为基石的。主要由以下四种因素构成：</p>
<ol>
<li>印象（感官冲击）</li>
<li>功能性</li>
<li>使用性</li>
<li>内容</li>
</ol>
<p>这些因素相互关联，不可分割，共同形成正确的用户体验。这些因素也是一个软件成功，所必不可少的主要因素。其中“印象”也可以归结成这个软件塑造的一个“品牌”效应。UXD就是指围绕UX而进行的一些列设计。</p>
</dd>
<dd>延伸阅读：
<ul class="refer">
<li>[1]<a href="http://blog.d8in.com/posts/77.html">用户体验设计师的职责</a></li>
<li>[2]<a href="http://www.fullsearcher.com/n2005815135618735.asp">如何量化用户体验UE(How To Quantify The User Experience)</a></li>
</ul>
</dd>
</dl>
]]></content:encoded>
			<wfw:commentRss>http://dancewithnet.com/2007/03/21/ux-ui-ucd-usability-and-so-on/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

