<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>耿人杰的网络日志 &#187; 交互设计</title>
	<atom:link href="http://gengrenjie.com/tag/%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1/feed/" rel="self" type="application/rss+xml" />
	<link>http://gengrenjie.com</link>
	<description></description>
	<lastBuildDate>Sat, 14 Jan 2012 12:48:07 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>交互设计师能力素质模型</title>
		<link>http://gengrenjie.com/2010/04/26/%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e5%b8%88%e8%83%bd%e5%8a%9b%e7%b4%a0%e8%b4%a8%e6%a8%a1%e5%9e%8b/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=%25e4%25ba%25a4%25e4%25ba%2592%25e8%25ae%25be%25e8%25ae%25a1%25e5%25b8%2588%25e8%2583%25bd%25e5%258a%259b%25e7%25b4%25a0%25e8%25b4%25a8%25e6%25a8%25a1%25e5%259e%258b</link>
		<comments>http://gengrenjie.com/2010/04/26/%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e5%b8%88%e8%83%bd%e5%8a%9b%e7%b4%a0%e8%b4%a8%e6%a8%a1%e5%9e%8b/#comments</comments>
		<pubDate>Mon, 26 Apr 2010 05:26:26 +0000</pubDate>
		<dc:creator>耿 人杰</dc:creator>
				<category><![CDATA[用户体验设计]]></category>
		<category><![CDATA[交互设计]]></category>
		<category><![CDATA[交互设计师能力素质模型]]></category>

		<guid isPermaLink="false">http://gengrenjie.com/?p=2039</guid>
		<description><![CDATA[在团队内部讨论区看到下面这张图，在网上一查，应该是出自腾讯的刘云天。 虽然这张图可能制作与08年，但基本上也覆盖了现阶段交互设计师的能力素质范围。唯一觉得需要修改的地方可能是将“关注用户”改成“研究用户”，并把“收集能力”和“职业技能”里与用户有关的部分整合其中。定义用户模型可以细化成：观察用户行为、分析用户行为背后隐藏的需求等等。 其他你可能感兴趣的: 可重用性设计准则 107个顶级在线零售网站的“加入购物车”按钮 简单的秘密 移动网络设计的5个误区 Web表单设计指南：眼动跟踪研究 &#169;2012 耿人杰的网络日志. 知识共享署名-非商业性使用-禁止演绎..]]></description>
			<content:encoded><![CDATA[<p>在团队内部讨论区看到下面这张图，在网上一查，应该是出自腾讯的<a href="http://www.liuyuntian.com" target="_blank">刘云天</a>。</p>
<p>虽然这张图可能制作与08年，但基本上也覆盖了现阶段交互设计师的能力素质范围。唯一觉得需要修改的地方可能是将“<strong>关注用户</strong>”改成“<strong>研究用户</strong>”，并把“<strong>收集能力</strong>”和“<strong>职业技能</strong>”里与用户有关的部分整合其中。定义用户模型可以细化成：<strong>观察用户行为</strong>、<strong>分析用户行为背后隐藏的需求</strong>等等。</p>
<p><a href="http://gengrenjie.com/wp-content/uploads/2010/04/交互设计师能力素质模型.jpeg"><img class="alignleft size-full wp-image-2040" title="交互设计师能力素质模型" src="http://gengrenjie.com/wp-content/uploads/2010/04/交互设计师能力素质模型.jpeg" alt="" width="490" height="541" /></a><br />
<h3 class='related_post_title'>其他你可能感兴趣的:</h3>
<ul class='related_post'>
<li><a href='http://gengrenjie.com/2009/10/19/%e5%8f%af%e9%87%8d%e7%94%a8%e6%80%a7%e8%ae%be%e8%ae%a1%e5%87%86%e5%88%99/' title='可重用性设计准则'>可重用性设计准则</a></li>
<li><a href='http://gengrenjie.com/2009/07/15/107%e4%b8%aa%e9%a1%b6%e7%ba%a7%e5%9c%a8%e7%ba%bf%e9%9b%b6%e5%94%ae%e7%bd%91%e7%ab%99%e7%9a%84%e2%80%9c%e5%8a%a0%e5%85%a5%e8%b4%ad%e7%89%a9%e8%bd%a6%e2%80%9d%e6%8c%89%e9%92%ae/' title='107个顶级在线零售网站的“加入购物车”按钮'>107个顶级在线零售网站的“加入购物车”按钮</a></li>
<li><a href='http://gengrenjie.com/2009/07/06/%e7%ae%80%e5%8d%95%e7%9a%84%e7%a7%98%e5%af%86/' title='简单的秘密'>简单的秘密</a></li>
<li><a href='http://gengrenjie.com/2009/06/22/%e7%a7%bb%e5%8a%a8%e7%bd%91%e7%bb%9c%e8%ae%be%e8%ae%a1%e7%9a%845%e4%b8%aa%e8%af%af%e5%8c%ba/' title='移动网络设计的5个误区'>移动网络设计的5个误区</a></li>
<li><a href='http://gengrenjie.com/2009/06/21/web%e8%a1%a8%e5%8d%95%e8%ae%be%e8%ae%a1%e6%8c%87%e5%8d%97%ef%bc%9a%e7%9c%bc%e5%8a%a8%e8%b7%9f%e8%b8%aa%e7%a0%94%e7%a9%b6/' title='Web表单设计指南：眼动跟踪研究'>Web表单设计指南：眼动跟踪研究</a></li>
</ul>
<p>&copy;2012 <a href="http://gengrenjie.com">耿人杰的网络日志</a>. 知识共享署名-非商业性使用-禁止演绎.</p>. <img src="http://gengrenjie.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=2039" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://gengrenjie.com/2010/04/26/%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e5%b8%88%e8%83%bd%e5%8a%9b%e7%b4%a0%e8%b4%a8%e6%a8%a1%e5%9e%8b/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>可重用性设计准则</title>
		<link>http://gengrenjie.com/2009/10/19/%e5%8f%af%e9%87%8d%e7%94%a8%e6%80%a7%e8%ae%be%e8%ae%a1%e5%87%86%e5%88%99/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=%25e5%258f%25af%25e9%2587%258d%25e7%2594%25a8%25e6%2580%25a7%25e8%25ae%25be%25e8%25ae%25a1%25e5%2587%2586%25e5%2588%2599</link>
		<comments>http://gengrenjie.com/2009/10/19/%e5%8f%af%e9%87%8d%e7%94%a8%e6%80%a7%e8%ae%be%e8%ae%a1%e5%87%86%e5%88%99/#comments</comments>
		<pubDate>Mon, 19 Oct 2009 10:49:29 +0000</pubDate>
		<dc:creator>耿 人杰</dc:creator>
				<category><![CDATA[用户体验设计]]></category>
		<category><![CDATA[Reusability And Reusable Design]]></category>
		<category><![CDATA[reusable design]]></category>
		<category><![CDATA[交互设计]]></category>
		<category><![CDATA[可重用性设计准则]]></category>

		<guid isPermaLink="false">http://gengrenjie.com/?p=1265</guid>
		<description><![CDATA[这位叫Ben Clark的老兄很全面的总结了可重用的设计所包含的元素。其实在交互设计中，不少内容其实都是可重用的元素或模块。因此，一个懂得高效设计那些可重用内容的设计师才是真正优秀的设计师。 Reusability And Reusable Design View more presentations from Ben Clark. 其他你可能感兴趣的: 交互设计师能力素质模型 107个顶级在线零售网站的“加入购物车”按钮 简单的秘密 移动网络设计的5个误区 Web表单设计指南：眼动跟踪研究 &#169;2012 耿人杰的网络日志. 知识共享署名-非商业性使用-禁止演绎..]]></description>
			<content:encoded><![CDATA[<p>这位叫Ben Clark的老兄很全面的总结了可重用的设计所包含的元素。其实在交互设计中，不少内容其实都是可重用的元素或模块。因此，一个懂得高效设计那些可重用内容的设计师才是真正优秀的设计师。</p>
<div id="__ss_2267238" style="width: 425px; text-align: left;"><a style="font:14px Helvetica,Arial,Sans-serif;display:block;margin:12px 0 3px 0;text-decoration:underline;" title="Reusability And Reusable Design" href="http://www.slideshare.net/benton44/reusability-and-reusable-design" class="broken_link">Reusability And Reusable Design</a><object style="margin:0px" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="355" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="src" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=timelineofidtwilliamclark-091018151212-phpapp01&amp;rel=0&amp;stripped_title=reusability-and-reusable-design" /><param name="allowfullscreen" value="true" /><embed style="margin:0px" type="application/x-shockwave-flash" width="425" height="355" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=timelineofidtwilliamclark-091018151212-phpapp01&amp;rel=0&amp;stripped_title=reusability-and-reusable-design" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<div style="font-size: 11px; font-family: tahoma,arial; height: 26px; padding-top: 2px;">View more <a style="text-decoration:underline;" href="http://www.slideshare.net/">presentations</a> from <a style="text-decoration:underline;" href="http://www.slideshare.net/benton44">Ben Clark</a>.</div>
</div>
<h3 class='related_post_title'>其他你可能感兴趣的:</h3>
<ul class='related_post'>
<li><a href='http://gengrenjie.com/2010/04/26/%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e5%b8%88%e8%83%bd%e5%8a%9b%e7%b4%a0%e8%b4%a8%e6%a8%a1%e5%9e%8b/' title='交互设计师能力素质模型'>交互设计师能力素质模型</a></li>
<li><a href='http://gengrenjie.com/2009/07/15/107%e4%b8%aa%e9%a1%b6%e7%ba%a7%e5%9c%a8%e7%ba%bf%e9%9b%b6%e5%94%ae%e7%bd%91%e7%ab%99%e7%9a%84%e2%80%9c%e5%8a%a0%e5%85%a5%e8%b4%ad%e7%89%a9%e8%bd%a6%e2%80%9d%e6%8c%89%e9%92%ae/' title='107个顶级在线零售网站的“加入购物车”按钮'>107个顶级在线零售网站的“加入购物车”按钮</a></li>
<li><a href='http://gengrenjie.com/2009/07/06/%e7%ae%80%e5%8d%95%e7%9a%84%e7%a7%98%e5%af%86/' title='简单的秘密'>简单的秘密</a></li>
<li><a href='http://gengrenjie.com/2009/06/22/%e7%a7%bb%e5%8a%a8%e7%bd%91%e7%bb%9c%e8%ae%be%e8%ae%a1%e7%9a%845%e4%b8%aa%e8%af%af%e5%8c%ba/' title='移动网络设计的5个误区'>移动网络设计的5个误区</a></li>
<li><a href='http://gengrenjie.com/2009/06/21/web%e8%a1%a8%e5%8d%95%e8%ae%be%e8%ae%a1%e6%8c%87%e5%8d%97%ef%bc%9a%e7%9c%bc%e5%8a%a8%e8%b7%9f%e8%b8%aa%e7%a0%94%e7%a9%b6/' title='Web表单设计指南：眼动跟踪研究'>Web表单设计指南：眼动跟踪研究</a></li>
</ul>
<p>&copy;2012 <a href="http://gengrenjie.com">耿人杰的网络日志</a>. 知识共享署名-非商业性使用-禁止演绎.</p>. <img src="http://gengrenjie.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=1265" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://gengrenjie.com/2009/10/19/%e5%8f%af%e9%87%8d%e7%94%a8%e6%80%a7%e8%ae%be%e8%ae%a1%e5%87%86%e5%88%99/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>107个顶级在线零售网站的“加入购物车”按钮</title>
		<link>http://gengrenjie.com/2009/07/15/107%e4%b8%aa%e9%a1%b6%e7%ba%a7%e5%9c%a8%e7%ba%bf%e9%9b%b6%e5%94%ae%e7%bd%91%e7%ab%99%e7%9a%84%e2%80%9c%e5%8a%a0%e5%85%a5%e8%b4%ad%e7%89%a9%e8%bd%a6%e2%80%9d%e6%8c%89%e9%92%ae/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=107%25e4%25b8%25aa%25e9%25a1%25b6%25e7%25ba%25a7%25e5%259c%25a8%25e7%25ba%25bf%25e9%259b%25b6%25e5%2594%25ae%25e7%25bd%2591%25e7%25ab%2599%25e7%259a%2584%25e2%2580%259c%25e5%258a%25a0%25e5%2585%25a5%25e8%25b4%25ad%25e7%2589%25a9%25e8%25bd%25a6%25e2%2580%259d%25e6%258c%2589%25e9%2592%25ae</link>
		<comments>http://gengrenjie.com/2009/07/15/107%e4%b8%aa%e9%a1%b6%e7%ba%a7%e5%9c%a8%e7%ba%bf%e9%9b%b6%e5%94%ae%e7%bd%91%e7%ab%99%e7%9a%84%e2%80%9c%e5%8a%a0%e5%85%a5%e8%b4%ad%e7%89%a9%e8%bd%a6%e2%80%9d%e6%8c%89%e9%92%ae/#comments</comments>
		<pubDate>Wed, 15 Jul 2009 07:38:39 +0000</pubDate>
		<dc:creator>耿 人杰</dc:creator>
				<category><![CDATA[用户体验设计]]></category>
		<category><![CDATA[电子商务产品设计]]></category>
		<category><![CDATA[E-Commerce product design]]></category>
		<category><![CDATA[交互设计]]></category>
		<category><![CDATA[加入购物车按钮设计]]></category>
		<category><![CDATA[按钮设计]]></category>
		<category><![CDATA[电子商务]]></category>

		<guid isPermaLink="false">http://gengrenjie.com/?p=645</guid>
		<description><![CDATA[【译者：耿人杰 原文：107 Add to Cart Buttons of the Top Online Retailers 作者：Jason Billingsley】 引文：曾经有文提到google的一个按钮值3亿美金。同样，对于电子商务网站来说，“加入购物车”按钮也同样至关重要。说它关乎电子商务网站的生死也不为过。 ———————————— 全文的分割线 ————————————— “加入购物车”按钮非常小，但每个在线购物网站都离不开它。按钮上的文字通常直接呈现在长方形的按钮控件上，有时五彩缤纷的可点击元素会将产品和购物车相联系起来，并有延伸品牌的功效。因此在购物车按钮的设计中，很重要的一点就是将你的一些想法代入到你所设计的产品中。 我们自2006起，从各个顶级在线零售网站已经收集了超过100个“加入购物车”按钮，这些按钮会带给你一些设计的灵感。此外，我们也总结了一些针对“加入购物车”设计的可用性指南共设计者参考。好吧，实际上是111个按钮，其中的107的看上去更酷。 （译者注：这里省略了这些按钮的图片，原文是里并不是一张整图，帖过来工作量太大，不帖也不影响对文章含义的理解，有兴趣的读者可去原文查看。） 以下是一些统计，百分比看上去更直观 按钮文字： 加入购物车                          58.0% 加入背包                              9.8% 加入到购物袋     [...]]]></description>
			<content:encoded><![CDATA[<p>【译者：<a href="http://gengrenjie.com/" target="_blank">耿人杰</a> 原文：<a title="add-to-cart-buttons" href="http://www.getelastic.com/add-to-cart-buttons/" target="_blank">107 Add to Cart Buttons of the Top Online Retailers</a></p>
<h1 id="post-292" style="font-size: 2em;"><span style="font-weight: normal; font-size: 13px;">作者：<a title="jason-billingsley" href="http://www.getelastic.com/author/jason-billingsley/" target="_blank">Jason Billingsley</a>】</span></h1>
<p>引文：曾经有文提到google的一个按钮值3亿美金。同样，对于电子商务网站来说，“加入购物车”按钮也同样至关重要。说它关乎电子商务网站的生死也不为过。</p>
<p>———————————— 全文的分割线 —————————————</p>
<p>“加入购物车”按钮非常小，但每个在线购物网站都离不开它。按钮上的文字通常直接呈现在长方形的按钮控件上，有时五彩缤纷的可点击元素会将产品和购物车相联系起来，并有延伸品牌的功效。因此在<a href="http://www.elasticpath.com/" target="_blank">购物车</a>按钮的设计中，很重要的一点就是将你的一些想法代入到你所设计的产品中。</p>
<p>我们自2006起，从各个顶级在线零售网站已经收集了超过100个“加入购物车”按钮，这些按钮会带给你一些设计的灵感。此外，我们也总结了一些针对“加入购物车”设计的可用性指南共设计者参考。好吧，实际上是111个按钮，其中的107的看上去更酷。</p>
<p>（译者注：这里省略了这些按钮的图片，原文是里并不是一张整图，帖过来工作量太大，不帖也不影响对文章含义的理解，有兴趣的读者可去原文查看。）</p>
<p><a href="http://www.petsmart.com/"><img style="border: 0px initial initial;" src="http://www.getelastic.com/wp-content/uploads/add-to-cart/petsmart-add.gif" border="0" alt="PetSmart" width="104" height="20" /></a><a href="http://www.urbanoutfitters.com/" class="broken_link"><img style="border: 0px initial initial;" src="http://www.getelastic.com/wp-content/uploads/add-to-cart/urban-outfitters-add.gif" border="0" alt="Urban Outfitters" width="205" height="62" /></a></p>
<p><a href="http://www.polo.com/"><img style="border: 0px initial initial;" src="http://www.getelastic.com/wp-content/uploads/add-to-cart/ralph-lauren-add.gif" border="0" alt="Ralph Lauren" width="134" height="19" /></a><a href="http://www.walgreens.com/"><img style="border: 0px initial initial;" src="http://www.getelastic.com/wp-content/uploads/add-to-cart/walgreens-add.gif" border="0" alt="Walgreens" width="100" height="19" /></a></p>
<h2>以下是一些统计，百分比看上去更直观</h2>
<p><strong>按钮文字：</strong></p>
<p>加入购物车                          58.0%</p>
<p>加入背包                              9.8%</p>
<p>加入到购物袋                           9.8%</p>
<p>加入到购物篮                           6.3%</p>
<p>加入到消费购物车                      4.5%</p>
<p>购买                                   2.7%</p>
<p>现在购买                              1.8%</p>
<p>将商品加入到购物车                 1.8%</p>
<p>将商品加入到背包                    0.9%</p>
<p>加入我的背包                         0.9%</p>
<p>加入我的便当                         0.9%</p>
<p>加入我的消费购物车                 0.9%</p>
<p>现在预订                              0.9%</p>
<p><strong>按钮图片</strong></p>
<p>没有                                  48.2%</p>
<p>箭头                                  17.9%</p>
<p>购物车                               14.3%</p>
<p>消费背包                              7.1%</p>
<p>加入符号                              5.4%</p>
<p>组合                                   4.5%</p>
<p>独特的设计                           1.8%</p>
<h2>“加入购物车”按钮如何增强你的品牌</h2>
<p>首先，“加入购物车”按钮看似是一个小细节，但它包含用户和品牌之间潜在的情感联系。你所选择的按钮样式、色彩和按钮文字都会影响这一情感联系的结果。</p>
<p>Urban Outfitters的手写字体按钮与其前卫和街头的风格相匹配（这有可能有损于按钮的可寻性，因为这无助于使按钮在屏幕上脱颖而出）。Northerntool的加入符号（plus sign）型图标酷似螺丝刀头。Petsmart的红色小圆球有趣且活泼，能即刻被认出。Bloomingdale的“big brown bag”图标阐述了它品牌的威望。而Polo永恒的深色海军蓝色按钮给线上和线下的品牌标识都带来了和谐的一致。</p>
<p>按钮文字也非常重要。“加入到购物袋”相对“加入购物车”听上去似乎更适合高端百货店，而后者可能更适合WalMart或Target。“现在预订”一致很适合目录推广品牌，但现在也适合用于在线订购。在英国，“加入购物篮”是更为普遍的术语。</p>
<h2>按钮设计与可用性</h2>
<p><strong>按钮文字</strong></p>
<p>网站文案强调高可看性（scannabliity），网站文案的黄金准则是：用尽量少的文字（don’t use 5 words when three will do）。这条准则如何应用到这样一个小按钮中呢？尽管如此，我们发现15%的按钮文字比较长。Harry and David的“加入我的消费购物车”，更个人化和口语化。</p>
<p>“现在购买”相比“加入购物车”表达方式更有力，但可能更多的是建议用户完成购物或作出一个购买的承诺，而不是再去检查一下订单。“加入购物车”的美感在于没有强制并假设用户还要继续随便看看。如果你是一个很好的电子商务销售人员，那么你正在展示推荐购买的商品和一个“欢迎继续购物”的链接（或者你正在使用一个以Ajax实现的内嵌购物车）。</p>
<p><strong>文字样式</strong></p>
<p>一般的网页可用性设计指南推荐使用有高色彩对比度的sans-serif字体（高对比度的白字黑底或白字暗蓝底，而不是像Chadwick低对比度的蓝字蓝底）。</p>
<p>全大写字体在网站文案中基本不被推荐。大小写混合更有利于阅读，全小写也具有同样的可读性。我们发现45%的“加入购物车”按钮使用全大写。Walgreen的白色全大写文字，包含在含有一个带有小图标的弧度按钮上，这种设计可以吸引部分用户的视线。</p>
<p><strong>按钮的放置布局</strong></p>
<p>如果在你的产品页面提供一些有用的功能，如：收藏夹（wishlists）、放大图片、色彩转换、其他可选产品预览、发送给好友、查看购物车或结帐按钮等等，请确认“加入购物车”按钮保持醒目、明亮和对比显著。次要功能按钮在色彩上需弱化或文字上简化。</p>
<p><strong>文字叠加（译者注：文字分两行显示）</strong></p>
<p>文字叠加对链接和导航按钮设计来说并不是一个好主意。同样，也不适合“加入购物车”按钮。用户期望看到某种形式的矩形按钮，这样可以快速扫视文字页面。文字叠加需要花费用户更多的时间来辨认按钮，甚至可能造成用户的困惑。我们没有必要去重新发明轮子，坚持简单便捷的方式就好。</p>
<p><strong>如何使用按钮模板？</strong></p>
<p>即使不为购物车功能设计定制一个“加入购物车”按钮，你也需要选择一个符合网站主题的按钮（并不意味着必须是完全相同的颜色）。请确认选择一个设计后持续使用它。电子商务的蓬勃发展由信用驱动的，不停的变化按钮会损害用户对你的信任。<br />
<h3 class='related_post_title'>其他你可能感兴趣的:</h3>
<ul class='related_post'>
<li><a href='http://gengrenjie.com/2009/08/03/%e5%ae%9a%e5%90%91%e9%94%80%e5%94%ae%e6%a6%82%e8%bf%b0/' title='定向销售概述'>定向销售概述</a></li>
<li><a href='http://gengrenjie.com/2009/08/14/%e7%a7%bb%e5%8a%a8%e7%94%b5%e5%ad%90%e5%95%86%e5%8a%a1%e5%8f%af%e7%94%a8%e6%80%a74%ef%bc%9a%e8%a1%a8%e5%8d%95%e5%92%8c%e7%bb%93%e5%b8%90/' title='移动电子商务可用性4：表单和结帐'>移动电子商务可用性4：表单和结帐</a></li>
<li><a href='http://gengrenjie.com/2009/08/12/%e7%a7%bb%e5%8a%a8%e7%94%b5%e5%ad%90%e5%95%86%e5%8a%a1%e5%8f%af%e7%94%a8%e6%80%a7%ef%bc%9a%e4%ba%a7%e5%93%81%e5%b1%95%e7%a4%ba%e9%a1%b5%e9%9d%a2%e5%92%8c%e8%b4%ad%e7%89%a9%e8%bd%a6/' title='移动电子商务可用性3：产品展示页面和购物车'>移动电子商务可用性3：产品展示页面和购物车</a></li>
<li><a href='http://gengrenjie.com/2009/08/09/%e7%a7%bb%e5%8a%a8%e7%94%b5%e5%ad%90%e5%95%86%e5%8a%a1%e5%8f%af%e7%94%a8%e6%80%a7%ef%bc%9a%e6%90%9c%e7%b4%a2%e5%92%8c%e7%9b%ae%e5%bd%95%e9%a1%b5/' title='移动电子商务可用性2：搜索和目录页'>移动电子商务可用性2：搜索和目录页</a></li>
<li><a href='http://gengrenjie.com/2009/08/09/%e7%a7%bb%e5%8a%a8%e7%94%b5%e5%ad%90%e5%95%86%e5%8a%a1%e5%8f%af%e7%94%a8%e6%80%a7%ef%bc%9a%e4%b8%bb%e9%a1%b5%e5%92%8c%e5%af%bc%e8%88%aa/' title='移动电子商务可用性1：主页和导航'>移动电子商务可用性1：主页和导航</a></li>
</ul>
<p>&copy;2012 <a href="http://gengrenjie.com">耿人杰的网络日志</a>. 知识共享署名-非商业性使用-禁止演绎.</p>. <img src="http://gengrenjie.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=645" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://gengrenjie.com/2009/07/15/107%e4%b8%aa%e9%a1%b6%e7%ba%a7%e5%9c%a8%e7%ba%bf%e9%9b%b6%e5%94%ae%e7%bd%91%e7%ab%99%e7%9a%84%e2%80%9c%e5%8a%a0%e5%85%a5%e8%b4%ad%e7%89%a9%e8%bd%a6%e2%80%9d%e6%8c%89%e9%92%ae/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>简单的秘密</title>
		<link>http://gengrenjie.com/2009/07/06/%e7%ae%80%e5%8d%95%e7%9a%84%e7%a7%98%e5%af%86/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=%25e7%25ae%2580%25e5%258d%2595%25e7%259a%2584%25e7%25a7%2598%25e5%25af%2586</link>
		<comments>http://gengrenjie.com/2009/07/06/%e7%ae%80%e5%8d%95%e7%9a%84%e7%a7%98%e5%af%86/#comments</comments>
		<pubDate>Mon, 06 Jul 2009 07:01:05 +0000</pubDate>
		<dc:creator>耿 人杰</dc:creator>
				<category><![CDATA[用户体验设计]]></category>
		<category><![CDATA[Giles Colborne]]></category>
		<category><![CDATA[The secrets of simplicity]]></category>
		<category><![CDATA[交互设计]]></category>

		<guid isPermaLink="false">http://gengrenjie.com/?p=618</guid>
		<description><![CDATA[Giles Colborne在Usability Professionals’ Association Conference 2009上关于“The secrets of simplicity”的slide。举的例子：遥控器的精简设计，写的非常好。 Secrets of Simplicity: rules for being simple and usable (Giles Colborne) View more presentations from cxpartners. 其他你可能感兴趣的: Designing for delight 交互设计师能力素质模型 可重用性设计准则 107个顶级在线零售网站的“加入购物车”按钮 Lastminute.com的Leah Russell访谈 &#169;2012 耿人杰的网络日志. 知识共享署名-非商业性使用-禁止演绎..]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.cxpartners.co.uk/aboutus/profiles/giles-colborne" target="_blank">Giles Colborne</a>在Usability Professionals’ Association Conference 2009上关于“<a href="http://www.cxpartners.co.uk/thoughts/the_secrets_of_simplicity.htm" target="_blank" class="broken_link">The secrets of simplicity</a>”的slide。举的例子：遥控器的精简设计，写的非常好。<br />
<img style="visibility: hidden; width: 0px; height: 0px;" src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNDY4NjMyOTc4NDMmcHQ9MTI*Njg2MzM2MDkzNyZwPTEwMTkxJmQ9c3NfZW1iZWQmZz*yJnQ9Jm89NGNjMDgwNzY*OTAxNGFlODliMGI3NmY4ZmIwMDI*ZWYmb2Y9MA==.gif" border="0" alt="" width="0" height="0" /></p>
<div id="__ss_1582397" style="width: 425px; text-align: left;"><a style="font:14px Helvetica,Arial,Sans-serif;display:block;margin:12px 0 3px 0;text-decoration:underline;" title="Secrets of Simplicity: rules for being simple and usable (Giles Colborne)" href="http://www.slideshare.net/cxpartners/secrets-of-simplicity">Secrets of Simplicity: rules for being simple and usable (Giles Colborne)</a><object width="425" height="355" data="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=simplicityslideshare-090614161240-phpapp02&amp;stripped_title=secrets-of-simplicity" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="src" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=simplicityslideshare-090614161240-phpapp02&amp;stripped_title=secrets-of-simplicity" /><param name="allowfullscreen" value="true" /></object></p>
<div style="font-size: 11px; font-family: tahoma,arial; height: 26px; padding-top: 2px;">View more <a style="text-decoration:underline;" href="http://www.slideshare.net/">presentations</a> from <a style="text-decoration:underline;" href="http://www.slideshare.net/cxpartners">cxpartners</a>.</div>
</div>
<h3 class='related_post_title'>其他你可能感兴趣的:</h3>
<ul class='related_post'>
<li><a href='http://gengrenjie.com/2010/06/13/designing-for-delight/' title='Designing for delight'>Designing for delight</a></li>
<li><a href='http://gengrenjie.com/2010/04/26/%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e5%b8%88%e8%83%bd%e5%8a%9b%e7%b4%a0%e8%b4%a8%e6%a8%a1%e5%9e%8b/' title='交互设计师能力素质模型'>交互设计师能力素质模型</a></li>
<li><a href='http://gengrenjie.com/2009/10/19/%e5%8f%af%e9%87%8d%e7%94%a8%e6%80%a7%e8%ae%be%e8%ae%a1%e5%87%86%e5%88%99/' title='可重用性设计准则'>可重用性设计准则</a></li>
<li><a href='http://gengrenjie.com/2009/07/15/107%e4%b8%aa%e9%a1%b6%e7%ba%a7%e5%9c%a8%e7%ba%bf%e9%9b%b6%e5%94%ae%e7%bd%91%e7%ab%99%e7%9a%84%e2%80%9c%e5%8a%a0%e5%85%a5%e8%b4%ad%e7%89%a9%e8%bd%a6%e2%80%9d%e6%8c%89%e9%92%ae/' title='107个顶级在线零售网站的“加入购物车”按钮'>107个顶级在线零售网站的“加入购物车”按钮</a></li>
<li><a href='http://gengrenjie.com/2009/07/06/lastminutecom%e7%9a%84leah-russell%e8%ae%bf%e8%b0%88/' title='Lastminute.com的Leah Russell访谈'>Lastminute.com的Leah Russell访谈</a></li>
</ul>
<p>&copy;2012 <a href="http://gengrenjie.com">耿人杰的网络日志</a>. 知识共享署名-非商业性使用-禁止演绎.</p>. <img src="http://gengrenjie.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=618" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://gengrenjie.com/2009/07/06/%e7%ae%80%e5%8d%95%e7%9a%84%e7%a7%98%e5%af%86/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>移动网络设计的5个误区</title>
		<link>http://gengrenjie.com/2009/06/22/%e7%a7%bb%e5%8a%a8%e7%bd%91%e7%bb%9c%e8%ae%be%e8%ae%a1%e7%9a%845%e4%b8%aa%e8%af%af%e5%8c%ba/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=%25e7%25a7%25bb%25e5%258a%25a8%25e7%25bd%2591%25e7%25bb%259c%25e8%25ae%25be%25e8%25ae%25a1%25e7%259a%25845%25e4%25b8%25aa%25e8%25af%25af%25e5%258c%25ba</link>
		<comments>http://gengrenjie.com/2009/06/22/%e7%a7%bb%e5%8a%a8%e7%bd%91%e7%bb%9c%e8%ae%be%e8%ae%a1%e7%9a%845%e4%b8%aa%e8%af%af%e5%8c%ba/#comments</comments>
		<pubDate>Mon, 22 Jun 2009 09:19:46 +0000</pubDate>
		<dc:creator>耿 人杰</dc:creator>
				<category><![CDATA[用户体验设计]]></category>
		<category><![CDATA[The myths of mobile web design]]></category>
		<category><![CDATA[交互设计]]></category>
		<category><![CDATA[移动网络设计误区]]></category>
		<category><![CDATA[移动设备交互设计]]></category>

		<guid isPermaLink="false">http://gengrenjie.com/?p=567</guid>
		<description><![CDATA[移动设备越来越普遍，但对于如何设计优质的移动设备内容并没有太多实际的指南可以参考，但至少对于什么错误是不应该犯的我们应该有所了解。下面的slide是个不错的学习机会，英文不难，需要的朋友完全可以看懂。 简单翻译下几个5个误区的标题 ： 误区1：你无法对移动内容收费 误区2：移动Web就是Web的缩小版 误区3：仅有一个网站就足够了 误区4：用户不愿意注册 误区5：多就是好 The Myths of Mobile Web Design View more Microsoft Word documents from cxpartners. 其他你可能感兴趣的: 感知设计时代的来临 交互设计师能力素质模型 可重用性设计准则 iPhone也可以有滚动条吗 TED视频：Pattie Maes at TED:第六感装置演示 &#169;2012 耿人杰的网络日志. 知识共享署名-非商业性使用-禁止演绎..]]></description>
			<content:encoded><![CDATA[<p>移动设备越来越普遍，但对于如何设计优质的移动设备内容并没有太多实际的指南可以参考，但至少对于什么错误是不应该犯的我们应该有所了解。下面的slide是个不错的学习机会，英文不难，需要的朋友完全可以看懂。</p>
<p>简单翻译下几个5个误区的标题 ：</p>
<ul>
<li>误区1：你无法对移动内容收费</li>
<li>误区2：移动Web就是Web的缩小版</li>
<li>误区3：仅有一个网站就足够了</li>
<li>误区4：用户不愿意注册</li>
<li>误区5：多就是好</li>
</ul>
<p><img style="visibility: hidden; width: 0px; height: 0px;" src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNDU2NjE2NjE2NTYmcHQ9MTI*NTY2MTY4MTUxNSZwPTEwMTkxJmQ9c3NfZW1iZWQmZz*yJnQ9Jm89NGNjMDgwNzY*OTAxNGFlODliMGI3NmY4ZmIwMDI*ZWYmb2Y9MA==.gif" border="0" alt="" width="0" height="0" /></p>
<div id="__ss_1440699" style="width: 425px; text-align: left;"><a style="font:14px Helvetica,Arial,Sans-serif;display:block;margin:12px 0 3px 0;text-decoration:underline;" title="The Myths of Mobile Web Design" href="http://www.slideshare.net/cxpartners/the-myths-of-mobile-web-design?type=presentation">The Myths of Mobile Web Design</a><object width="425" height="355" data="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=slidesharemobile-090515104207-phpapp02&amp;stripped_title=the-myths-of-mobile-web-design" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="src" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=slidesharemobile-090515104207-phpapp02&amp;stripped_title=the-myths-of-mobile-web-design" /><param name="allowfullscreen" value="true" /></object></p>
<div style="font-size: 11px; font-family: tahoma,arial; height: 26px; padding-top: 2px;">View more <a style="text-decoration:underline;" href="http://www.slideshare.net/">Microsoft Word documents</a> from <a style="text-decoration:underline;" href="http://www.slideshare.net/cxpartners">cxpartners</a>.</div>
</div>
<h3 class='related_post_title'>其他你可能感兴趣的:</h3>
<ul class='related_post'>
<li><a href='http://gengrenjie.com/2009/06/05/%e6%84%9f%e7%9f%a5%e8%ae%be%e8%ae%a1%e6%97%b6%e4%bb%a3%e7%9a%84%e6%9d%a5%e4%b8%b4/' title='感知设计时代的来临'>感知设计时代的来临</a></li>
<li><a href='http://gengrenjie.com/2010/04/26/%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e5%b8%88%e8%83%bd%e5%8a%9b%e7%b4%a0%e8%b4%a8%e6%a8%a1%e5%9e%8b/' title='交互设计师能力素质模型'>交互设计师能力素质模型</a></li>
<li><a href='http://gengrenjie.com/2009/10/19/%e5%8f%af%e9%87%8d%e7%94%a8%e6%80%a7%e8%ae%be%e8%ae%a1%e5%87%86%e5%88%99/' title='可重用性设计准则'>可重用性设计准则</a></li>
<li><a href='http://gengrenjie.com/2009/08/25/iphone%e4%b9%9f%e5%8f%af%e4%bb%a5%e6%9c%89%e6%bb%9a%e5%8a%a8%e6%9d%a1%e5%90%97/' title='iPhone也可以有滚动条吗'>iPhone也可以有滚动条吗</a></li>
<li><a href='http://gengrenjie.com/2009/08/16/%e8%a7%86%e9%a2%91-pattie-maes-at-ted%ef%bc%9a%e7%ac%ac%e5%85%ad%e6%84%9f%e8%a3%85%e7%bd%ae%e6%bc%94%e7%a4%ba/' title='TED视频：Pattie Maes at TED:第六感装置演示'>TED视频：Pattie Maes at TED:第六感装置演示</a></li>
</ul>
<p>&copy;2012 <a href="http://gengrenjie.com">耿人杰的网络日志</a>. 知识共享署名-非商业性使用-禁止演绎.</p>. <img src="http://gengrenjie.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=567" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://gengrenjie.com/2009/06/22/%e7%a7%bb%e5%8a%a8%e7%bd%91%e7%bb%9c%e8%ae%be%e8%ae%a1%e7%9a%845%e4%b8%aa%e8%af%af%e5%8c%ba/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Web表单设计指南：眼动跟踪研究</title>
		<link>http://gengrenjie.com/2009/06/21/web%e8%a1%a8%e5%8d%95%e8%ae%be%e8%ae%a1%e6%8c%87%e5%8d%97%ef%bc%9a%e7%9c%bc%e5%8a%a8%e8%b7%9f%e8%b8%aa%e7%a0%94%e7%a9%b6/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=web%25e8%25a1%25a8%25e5%258d%2595%25e8%25ae%25be%25e8%25ae%25a1%25e6%258c%2587%25e5%258d%2597%25ef%25bc%259a%25e7%259c%25bc%25e5%258a%25a8%25e8%25b7%259f%25e8%25b8%25aa%25e7%25a0%2594%25e7%25a9%25b6</link>
		<comments>http://gengrenjie.com/2009/06/21/web%e8%a1%a8%e5%8d%95%e8%ae%be%e8%ae%a1%e6%8c%87%e5%8d%97%ef%bc%9a%e7%9c%bc%e5%8a%a8%e8%b7%9f%e8%b8%aa%e7%a0%94%e7%a9%b6/#comments</comments>
		<pubDate>Sun, 21 Jun 2009 01:51:38 +0000</pubDate>
		<dc:creator>耿 人杰</dc:creator>
				<category><![CDATA[用户研究]]></category>
		<category><![CDATA[Chui Chui Tan]]></category>
		<category><![CDATA[Web form design guidelines: an eyetracking study]]></category>
		<category><![CDATA[web表单设计]]></category>
		<category><![CDATA[交互设计]]></category>
		<category><![CDATA[眼动跟踪]]></category>
		<category><![CDATA[网站可用性]]></category>
		<category><![CDATA[译言]]></category>

		<guid isPermaLink="false">http://gengrenjie.com/?p=551</guid>
		<description><![CDATA[【译者：耿人杰 原文：Web form design guidelines: an eyetracking study 作者：Chui Chui Tan】 同步发于译言：http://article.yeeyan.org/view/gengrenjie/46650 ———————————— 全文的分割线 ————————————— 表单是网站的重要组成部分。从商业网站的联系到反馈、从注册到交流、从在线银行到搜索都能见到表单在发挥巨大的作用。 什么是我们想要的，我们为什么想要这样 在 cxpartners，我们已经为很多不同的公司设计、测试了很多新的或已有的表单。在用了6年时间完成这些表单设计任务后，我们总结了一组黄金准则。 我们想验证这些准则，并寻求进一步深入了解表单设计各个方面。这促使我们进行一个眼动跟踪研究（eye-tracking study）来了解人们在不同的表单设计面前是如何反应的，诸如：当人们面对一个长长的文本输入框列表时，他们的眼睛究竟在看哪里。 我们也想找到一些优化表单设计布局的方法，来确保用户理解哪些表单是他们真正需要填写的，同时也希望他们在填写时能够专注于表单。 最后，我们想要提供一个配有数据支持的设计指南列表。通过它，我们和其他设计师能够设计出更好的表单。 相关研究 在Luke Wroblewski的“Web Form Design”，他提到了一些非常有用的表单设计原则。基于他的推荐，Matteo Penzo和他的同事已经进行了一次特定的眼动跟踪测试来测量针对不同label布局的眼部扫视活动(saccadic activity)和扫视次数(saccades times)。他们为这个测试特别设计并创建了4种类型的表单，每个表单有4个输入框（input fields）组成。 我们的研究与众不同之处 不像Penzo的研究专注于效率（眼睛在不同注视点的移动距离和在不同的点间移动花费的时间），我们对如何更容易的完成表单和提高用户满意度更感兴趣。事实上，我们想找到一种用户填写起来毫不费力的表单设计形式。 不同于为了研究设计新的表单，我们使用了4种已有和熟悉的注册表单：Yahoo! Mail, Googlemail, Hotmail and eBay。我们选择这些是因为我们想尽可能的反应实际的情况和覆盖更广的设计范围。 我们选的4个注册表单都有很好的组合设计(a good combination of designs)。举例来说，每一种都代表了不同的布局风格、不同的控件分组和不同的表达必填和选填的方式（如表1所示的）。 表1：研究所选的4个表单 Google Mail注册表单 标签垂直左对齐 控件间没有分组 没有选填提示（全部都是必填） Hotmail 注册表单 标签垂直右对齐 有分组，以分隔线和粗体字标题为区分 在标签前有*表示必填 Yahoo! Mail注册表单 标签垂直右对齐 [...]]]></description>
			<content:encoded><![CDATA[<p>【译者：<a href="http://gengrenjie.com">耿人杰</a> 原文：<a href="http://www.cxpartners.co.uk/thoughts/web_forms_design_guidelines_an_eyetracking_study.htm" target="_blank" class="broken_link">Web form design guidelines: an eyetracking study</a> 作者：<a href="http://www.cxpartners.co.uk/aboutus/profiles/chui-chui-tan">Chui Chui Tan</a>】</p>
<p>同步发于译言：<a href="http://article.yeeyan.org/view/gengrenjie/46650">http://article.yeeyan.org/view/gengrenjie/46650</a></p>
<p>———————————— 全文的分割线 —————————————</p>
<p>表单是网站的重要组成部分。从商业网站的联系到反馈、从注册到交流、从在线银行到搜索都能见到表单在发挥巨大的作用。</p>
<h2><span style="font-size: x-large;"><span style="font-size: large;">什么是我们想要的，我们为什么想要这样</span></span></h2>
<p>在 cxpartners，我们已经为很多不同的公司设计、测试了很多新的或已有的表单。在用了6年时间完成这些表单设计任务后，我们总结了一组黄金准则。</p>
<p>我们想验证这些准则，并寻求进一步深入了解表单设计各个方面。这促使我们进行一个眼动跟踪研究（eye-tracking study）来了解人们在不同的表单设计面前是如何反应的，诸如：当人们面对一个长长的文本输入框列表时，他们的眼睛究竟在看哪里。</p>
<p>我们也想找到一些优化表单设计布局的方法，来确保用户理解哪些表单是他们真正需要填写的，同时也希望他们在填写时能够专注于表单。</p>
<p>最后，我们想要提供一个配有数据支持的设计指南列表。通过它，我们和其他设计师能够设计出更好的表单。</p>
<p><strong><span style="font-size: x-large;"><span style="font-size: large;">相关研究</span></span></strong></p>
<p>在Luke Wroblewski的“<a href="http://www.lukew.com/resources/articles/web_forms.html">Web Form Design</a>”，他提到了一些非常有用的表单设计原则。基于他的推荐，<a href="http://uxmatters.com/MT/archives/000107.php">Matteo Penzo</a>和他的同事已经进行了一次特定的眼动跟踪测试来测量针对不同label布局的眼部扫视活动(saccadic activity)和扫视次数(saccades times)。他们为这个测试特别设计并创建了4种类型的表单，每个表单有4个输入框（input fields）组成。</p>
<p><strong><span style="font-size: x-large;"><span style="font-size: large;">我们的研究与众不同之处</span></span></strong></p>
<ol>
<li>不像Penzo的研究专注于效率（眼睛在不同注视点的移动距离和在不同的点间移动花费的时间），我们对如何更容易的完成表单和提高用户满意度更感兴趣。事实上，我们想找到一种用户填写起来毫不费力的表单设计形式。</li>
<li>不同于为了研究设计新的表单，我们使用了4种已有和熟悉的注册表单：<em>Yahoo! Mail, Googlemail, Hotmail</em> and <em>eBay</em>。我们选择这些是因为我们想尽可能的反应实际的情况和覆盖更广的设计范围。</li>
<li>我们选的4个注册表单都有很好的组合设计(a good combination of designs)。举例来说，每一种都代表了不同的布局风格、不同的控件分组和不同的表达必填和选填的方式（如表1所示的）。</li>
</ol>
<p><strong><span style="font-size: x-large;"><span style="font-size: large;">表1：研究所选的4个表单</span></span></strong></p>
<p><img src="http://www.cxpartners.co.uk/wp-content/uploads/google-mail-form.png" alt="google-mail-form" width="207" height="355" /></p>
<p><strong>Google Mail注册表单</strong></p>
<ul>
<li>标签垂直左对齐</li>
<li>控件间没有分组</li>
<li>没有选填提示（全部都是必填）</li>
</ul>
<p><img src="http://www.cxpartners.co.uk/wp-content/uploads/hotmail-sign-up-form.png" alt="hotmail-sign-up-form" width="207" height="267" /></p>
<p><strong>Hotmail 注册表单</strong></p>
<ul>
<li>标签垂直右对齐</li>
<li>有分组，以分隔线和粗体字标题为区分</li>
<li>在标签前有*表示必填</li>
</ul>
<p><img src="http://www.cxpartners.co.uk/wp-content/uploads/yahoo-mail.png" alt="yahoo-mail" width="207" height="254" /></p>
<p><strong>Yahoo! Mail注册表单</strong></p>
<ul>
<li>标签垂直右对齐</li>
<li>有分组，以分隔线、数字和有颜色的标题为区分</li>
<li>没有*，用斜体字表示选填</li>
</ul>
<p><img src="http://www.cxpartners.co.uk/wp-content/uploads/ebay-sign-up.png" alt="ebay-sign-up" width="208" height="353" /></p>
<p><strong>eBay 注册表单</strong></p>
<ul>
<li>标签垂直顶部对齐</li>
<li>有分组，以阴影标题为区分</li>
<li>在标签后有*表示必填</li>
</ul>
<p><strong><span style="font-size: x-large;"><span style="font-size: large;">统计关联</span></span></strong></p>
<p>值得一提的是，此研究的主要目地是寻找设计表单实践中的最佳流行趋势。在统计上这可能并不一定有充分的根据。然而，我们已经测试了那些熟悉这些在线表单的目标用户，已经在测试中使用那些在实际正被使用的表单形式，已经提供给用户一个良好的测试环境并鼓励他们像在家中一样操作这些表单。这些研究发现将是进一步研究的基础。</p>
<p><strong><span style="font-size: x-large;"><span style="font-size: large;">我们是怎么做的</span></span></strong></p>
<p>我们在位于布里斯托尔的办公室测试了8个参与者（6女2男）。这些参与者平均年龄27岁，年龄范围在22至33岁之间。所有的参与者有在日常生活中使用在线购物或Web邮件的经历，所以他们很熟悉Web表单。</p>
<p>每个参与者随机的选中2个表单，表单的出现顺序在所有的参与者间进行了平衡。参与者被要求填写这些表单，假设他们正在家中注册使用这些Web邮件服务。</p>
<p>在这个研究中，我们不仅参与者对于填写表单的评论，而且观察他们的动作和分析他们的眼部活动。通过汇总所有的数据，我们能够洞察用户在填写表单时的一些行为，并优化表单的设计和提出创建表单时应注意的事项。</p>
<p><span style="font-size: x-large;"><strong><span style="font-size: large;">我们发现了什么</span></strong><strong><span style="font-size: large;">：</span></strong></span></p>
<h3><strong>原则1：要垂直而不是水平</strong></h3>
<p>用户从上往下的填写表单。因此简单的垂直布局的表单通效果常好于多栏的布局。</p>
<p>所有的被测表单虽然标签的对齐方式不同，但都是垂直的布局。在和左右标签对齐对比后，我们发现垂直顶部对齐效果更好（ eBay的那个）。参与者发现相对于左右扫视，这种形式更容易在一列中向下进行扫视。</p>
<p>“随着我的眼睛向下扫视发现下一个输入框，这很容易”</p>
<p><strong>小贴士：在所有的地方都使用简单的垂直布局和顶部标签对齐.</strong></p>
<h3><strong>原则2：标签左对齐更清晰</strong></h3>
<p>有时候由于一些限制（如能垂直的使用空间有限），不可能使用垂直布局的标签，水平对齐布局也是可选的方案之一。</p>
<p>Yahoo和Hotmail都采用标签右对齐的方式，而Google Mail采用左对齐的方式。参与者的眼动跟踪测试表明，并没有明显的结论能证明标签左对齐和右对齐哪个更好。然而，标签左对齐通常被认为传达信息更清晰。</p>
<p>虽然标签左对齐被认为将使造成表单填写最慢，那是因为需要更多的眼部注视和更长距离的视线移动。但这对于表单设计的目的而言并不总是一件坏事。标签左对齐的表单通常有更整齐、更清晰的布局，它们能使用户快速的扫视每个标签，这增加了标签的可读性。</p>
<p>在他们的测试中，Penzo总结说：“粗体标签应该被尽可能的禁止，因为他们更不易阅读。”然而，这个结论与我们看到的事实相矛盾。我们的发现这也符合Luke所赞同的，即“粗体更能让标签在前景中突显出来”。我们的参与者也觉得使用粗体标签将使填写变得更容易。</p>
<p>“Google mail更容易阅读，因为它是粗体的”</p>
<p><strong>小贴士：如果垂直对齐标签不可行,那么使用粗体标签并左对齐.</strong></p>
<h3><strong>原则3：什么时候打破“只用一栏”的定律</strong></h3>
<p>有一些可以预期案例表明，有些情况下“只用一栏”的定律是可以打破的。用户期望看到姓名（姓/名）、日期（年/月/日）和时间（小时/分钟）被写在一行里。虽然如此，但如果要将多过一个的控件放在一行内的话，需要设计师非常小心。</p>
<p>Yahoo和eBay的表单都有姓和名在同一行。许多参与者认为这样很笨拙，需要从左到右的填写两个部分，然后继续在垂直方向上继续填写。</p>
<p>然而，参与者并没有对Yahoo发表同样的评论。正如在图1所示，eBay的表单在“姓”的部分相比Yahoo的有更多的注视点和更长的注视时间。我们猜测可能有以下两个原因：</p>
<ol>
<li>Yahoo的页面在“名”和“姓”间的距离相比eBay的更短；</li>
<li>更重要的一点，两个输入框共享一个标签（Yahoo的生日输入：日/月/年是同样的道理）。从心理学角度而言，参与者相信这两个输入框属于是单一问题的一部分，这让他们并没有感觉到这是两部分信息。</li>
</ol>
<p><img src="http://www.cxpartners.co.uk/wp-content/uploads/ebay-and-yahoo-sign-up-form-gaze-plot.png" alt="ebay-and-yahoo-sign-up-form-gaze-plot" width="433" height="445" /></p>
<p><em>图1：注视点图（30-40秒）表明eBay表单的“姓”部分相对Yahoo有更长的注视持续时间</em></p>
<p>另外有趣的一点是，Yahoo非常明智的将次要的标签文字直接包含在文本框中：First Name和Surname，这里使用淡灰色的字体，一旦用户开始输入这些字体将自动消失（图2）.我们喜欢这个方法，它没有额外的视线移动，用户也不可能错过阅读标签。一个需要谨记在心的问题是确保你的实现代码能支持这样的效果。</p>
<p><strong>小贴士：</strong><strong>当超过一个输入框在一行时，确保他们被设计成像一个完整的整体（如：共享同一个标签或把它们放的近一点）。</strong></p>
<p><img src="http://www.cxpartners.co.uk/wp-content/uploads/yahoo-name-form.png" alt="yahoo-name-form" width="433" height="221" /></p>
<p><em>图2：Yahoo将次要的标签内置于输入框中，当开始输入时就消失</em></p>
<h3><strong>原则4：当标题分组很重要时，将其设计成有颜色或有阴影的</strong></h3>
<p>我们设计表单时可将它分割成可管理的几个部分，并将相关的控件放在一起，这样当在填写表单时就会感觉表单更短。</p>
<p>在测试中，Google mail是唯一一个没有将表单内容进行逻辑分组的，而其他三个都将相关的控件进行了分组，并给每个分组一个标题。</p>
<p>从眼动跟踪的结果来看，参与者并没有对分组的标题产生额外的注意力消耗（请看图3的Hotmail注意力热图，它展示了参与者在页面上看或没看过什么）。有颜色或带阴影字体（请看图4 eBay的注意力热图）的标题可能更能吸引用户的注意力。</p>
<p>“阴影字体的标题清晰很多”，“[Yahoo] 的输入框分组很好，紫色的分组标题很好用，输入框被很清楚的划分，一眼就能理解”</p>
<p><img src="http://www.cxpartners.co.uk/wp-content/uploads/hotmail-heat-map-opacity.png" alt="hotmail-heat-map-opacity" width="433" height="233" /></p>
<p><em>图3：Hotmail的注意力热图表明参与者并没有将注意力集中在分组的标题上。</em></p>
<p><img src="http://www.cxpartners.co.uk/wp-content/uploads/ebay-gaze-plot-opacity.png" alt="ebay-gaze-plot-opacity" width="433" height="253" /></p>
<p><em>图4：eBay的注意力热图表明参与者并没有将注意力集中在分组的标题上。</em></p>
<p>将相关的输入框进行合适的分组时相当有效的。问题就是：是否用户总是不得不去看分组的标题？这可能取决于标题的目的和它们在表单中的重要程度。我们的建议是如果你想让用户去看标题，那就使用带阴影或有颜色字体的标题。如果标题不重要，那就不用刻意去那么做。我们需要避免用户在填写时迷惑到他们。</p>
<p><strong>小贴士：</strong><strong>如果想让用户看标题，那么就使用带颜色或阴影的字体强调它们。</strong></p>
<h3><strong>原则5：不要使用*，尽量用清晰的方式表示可选</strong></h3>
<p>对于是否要用“*”来表示必填项或使用文字“选填”表示选填项，一直存在着争论。eBay 和 Hotmail都使用*号来表示必填，而Google mail没有任何提示，这可能被认为所有的项都是必填的。Yahoo是唯一一个使用斜体字表示选填的，如“可选e-mail”。</p>
<p>没有用户认识到Yahoo的可选项说明，因为他们不认为斜体字代表了可选的含义。数据也同样表明，没有参与者注意到*号和在页面顶部关于*号的说明（见图5，显示了那里没有注意力涉及到）。参与者想要完成表单，他们中的一些提到：当他们不想提供特殊信息或他们认为这个问题没必要时才会注意到*号或其他表示选填的标志。</p>
<p>“我不会考虑它们（*号好选填标识），除非我认为这个问题完全没有必要”</p>
<p><img src="http://www.cxpartners.co.uk/wp-content/uploads/mandatory-formm-fields-heatmap.png" alt="mandatory-formm-fields-heatmap" width="433" height="179" /></p>
<p><em>图5：Hotmail的注意力热图表示参与者没有注意到*号（表示必填）</em></p>
<p>当人们看到一张表单时，他们总有填满他们的欲望。如果有可能，只问用户那些最重要的信息。如果出于市场调查或其他一些理由需要放一些选填内容，我们建议清晰地标注这些问题，而不是把必填内容标注出来。</p>
<p>从我们之前一个针对数百用户的观察测试中，我们发现不是所有的用户知道“*”的作用。因此，我们建议将文字“选填”以淡灰色的格式显示在输入框的内部，就像图6所示的那样。在这个例子中，这样用户就不可能错过它，且没有额外的眼部移动来发现它。我已经用此设计对用户进行了测试。</p>
<p><strong>小贴士：</strong><strong>只给出必须要的信息。如果可选项必须有，使他们更易于辨识而不要用*号来强调必填。</strong></p>
<p><img src="http://www.cxpartners.co.uk/wp-content/uploads/example-form-fields.png" alt="example-form-fields" width="350" height="177" /></p>
<p><em>图6：将术语“选填”内置在输入框内，表示这是选填项</em></p>
<h3><strong>原则6：对数字和邮编使用单一输入框</strong></h3>
<p>我们已经进行了多年的用户体验测试。在此期间，我们经常可以看到用户对于如何填写数字（邮编和电话号码）很迷惑。</p>
<p>eBay对于电话号码的输入用了两个输入框，包括一个电话的国际代号输入框。虽然有一个在输入框的下方有一个输入的示例，但对于需要如何输入一个移动电话号码仍不是很清晰。就像图7所示的eBay注意力热图所示，红色的点（热点）表示用户在电话号码输入框上耗费了最多的注意力。</p>
<p>“你是怎么输入一个手机号码的？”“体验不是相当友好”</p>
<p><img src="http://www.cxpartners.co.uk/wp-content/uploads/telephone-number-heatmap.png" alt="telephone-number-heatmap" width="433" height="219" /></p>
<p><em>图7：eBay的注意力热点图表示用户在电话号码输入框上耗费了最多的注意力</em></p>
<p>有一些方式可以避免这个问题。其中之一就是将问题简单话。单个输入框通常相比两个或多个输入框更有效率。同样重要的一点是需要有一个良好的校验系统，它能判断是否用户的输入是有效的。用户经常不确定是否应该在邮编中包含一个空格。一个好的设计应该能有一定的容错性（有没有空格都可以接受）。如果不是这样，一个简单、清晰的错误提示是必须显示的。</p>
<p>电话号码是一个有技巧的设计。国际代号可以以“00”或“+”开头。什么样的格式能被系统接受应该被清楚的表明。此外，个人可能会以不同的方式记忆他们的电话号码。如，一个英国的手机号码是，07812345678，某人可能以3-4-4的格式记忆（078 1234 5678）或5-3-3的格式记忆（07812 345 678）。如果能接受所有类型的输入，那将是最完美的。</p>
<p><strong>小贴士：</strong><strong>对数字和邮编使用单一输入框，允许多种格式的输入。如果不行，使用一个良好的校验系统并提供清晰的错误提示。</strong></p>
<h3><strong>原则7：避免多任务。如果必须有，确保最重要的消息突出</strong></h3>
<p>当用户正在填写一个表单时，他们总是像完成任务，期望能快速结束并转移到主要的任务上，诸如购买或注册一个服务。如果添加任何非重要的信息需要他们来阅读，就会使注册过程变长。这是需要被避免的。</p>
<p>然后，如果有一条重要的消息需要用户了解，它应该被高亮显示并出现，确保用户不会忽略它。</p>
<p>如图8a所示的，参与者计划没有看到Hotmail页面顶部的信息提示。他们完全忽略了此部分，直接进入了表单的下一部分。相反，在eBay 的页面上，参与者不仅阅读了在表单上部的提示信息，而且也阅读了右栏的提示信息（见图8b）。这些信息都做了高亮处理并被内置或平行于表单，因此都获得了用户的关注。</p>
<p><strong>小贴士：</strong><strong>让用户专注于他们的任务，避免对他们的干扰。如果一个提示很重要并且需要用户关注，确保他们足够突出到能吸引用户的注意力。</strong></p>
<p><img src="http://www.cxpartners.co.uk/wp-content/uploads/ebay-and-hotmail-heatmaps-with-messages.png" alt="ebay-and-hotmail-heatmaps-with-messages" width="433" height="456" /></p>
<p><em>图8：（a）Hotmail的注意力热图（b）eBay的热图展示了高亮和内置（平行）于表单的提示有可能被用户阅读</em></p>
<h3><strong>原则8：请注意引入实时反馈</strong></h3>
<p>每当用户完成表单输入的某一项后，Yahoo通过在输入框后显示一个小标记提供了即时反馈。几秒后，标记会消失（图9所示）。大多数参与者任务他们注意到了它们。然而，并有些人觉得动态提示会让他们混淆一些东西。因此，一些人给出了正面的评价，另一些则认为他们是干扰。</p>
<p>“提示小图标很有用，它能有效帮助我确认输入的内容”</p>
<p>即时反馈对于那些需要即时呈现和立即注意的信息很有用。</p>
<p><strong>小贴士：用合适的方式小心地使用即时反馈.</strong></p>
<p><img src="http://www.cxpartners.co.uk/wp-content/uploads/form-field-error-messages.png" alt="form-field-error-messages" width="433" height="179" /></p>
<p><em>图9：Yahoo的截图，在输入框的尾部提供即时反馈（正确或错误提示）</em></p>
<h3><strong>原则9：将备注放在相关的输入框旁</strong></h3>
<p>eBay 和 Googlemail在每个输入框旁都有备注，Yahoo则在输入框尾部有即时动态提示。Hotmail，从另一个角度来讲，在每个输入框下方有（动态）的描述。</p>
<p>总体来说，相对在输入框下方参与者更喜欢在输入框尾部看到描述信息。</p>
<p>“我更愿意它们在尾部，这能让我看到它们”</p>
<p>如果在输入框底部都使用黑色字体的描述，将容易使页面变得杂乱，就像Googlemail的页面那样。</p>
<p>“那看上去像一大堆的文字，非常凌乱”</p>
<p>Yahoo和Hotmail都将描述放在输入框尾部。但有趣的是参与者更多的阅读了Hotmail的描述而不是Yahoo的（如图10中两者的对比）。Hotmail有一个整齐的布局，所有的输入框都保持相同的尺寸和相同的水平和垂直对齐方式。相反的是，Yahoo将不同尺寸的文字输入框和下拉列表框混合排列，并且没有对齐。因此当描述出现在尾部时，用户容易忽略和错过它们。</p>
<p><img src="http://www.cxpartners.co.uk/wp-content/uploads/form-tips-heatmap.png" alt="form-tips-heatmap" width="433" height="346" /></p>
<p><em>图10：表明Hotmail用户相比Yahoo用户更多地关注了控件尾部的即时说明</em></p>
<p>此外，当给每个控件都提供描述时，非常有必要确保它们被放置在正确的位置。如，eBay提供如何选择一个密码的描述（要求至少6位数字或字母）。然而，它们被放置在“重新输入密码”框的下方。正确的方式应该是在第一次输入密码前提示，在“创建密码”输入框附近（见图11）。</p>
<p><strong>小贴士：</strong><strong>如果可能，将相关的描述放在每个控件后，并确保正确的对齐方式.</strong></p>
<p><img src="http://www.cxpartners.co.uk/wp-content/uploads/password-form-diagram.png" alt="password-form-diagram" width="433" height="164" /></p>
<p>图11：eBay的如何选择一个密码的描述应该是在第一次输入密码前提示，在“创建密码”输入框附近</p>
<h3><strong><span style="font-size: medium;">原则10：如果表单有多页，告诉用户进行到哪步了</span></strong></h3>
<p>我们建议使用滚屏的方式显示表单，而不是创建很多很短的表单页。虽然所有我们进行眼动跟踪测试的表单都在一页之内，但参与者仍然希望能知道还剩下几步，之后会有些什么内容。</p>
<p><strong>小贴士：提供给用户一个进度显示器来展示完成一个注册或支付需要完成哪些步骤.</strong></p>
<p><strong><span style="font-size: x-large;"><span style="font-size: large;">其他原则</span></span></strong></p>
<p>在以上内容外我们还有其他一些原则：</p>
<ul>
<li>经常提醒用户他们想要什么，然后问他们是谁，以便建立信任（例如&#8217;索取资料（请填写以下部分）</li>
<li>使用cookie来记录用户的信息（不是密码），来帮助他们完成一些重复性的工作</li>
<li>永不使用复杂和严格的条款来迷惑用户，如强制要求用户同意订阅每月简报时。用户不喜欢对他们耍计谋和用一些细节迷惑他们的公司。</li>
</ul>
<p><strong><span style="font-size: x-large;"><span style="font-size: large;">总结</span></span></strong></p>
<p>当用户在填写表单时，他们不喜欢被显著地干扰。他们希望尽可能快的完成任务。因此十分有必要将表单设计得清晰和整齐。用户乐意完成一个容易理解、简洁利索，但有一点长的表单。相反，他们不欢迎被视觉分割且复杂的表单。<br />
<h3 class='related_post_title'>其他你可能感兴趣的:</h3>
<ul class='related_post'>
<li><a href='http://gengrenjie.com/2009/06/24/%e7%94%a8%e6%88%b7%e6%b5%8b%e8%af%95%ef%bc%9a%e7%9c%bc%e5%8a%a8%e8%b7%9f%e8%b8%aa%e5%92%8c%e5%87%ba%e5%a3%b0%e6%80%9d%e8%80%83/' title='用户测试：眼动跟踪和出声思考'>用户测试：眼动跟踪和出声思考</a></li>
<li><a href='http://gengrenjie.com/2009/06/23/%e5%a6%82%e4%bd%95%e8%af%b4%e6%9c%8d%e7%ae%a1%e7%90%86%e5%b1%82%e8%bf%9b%e8%a1%8c%e5%8f%af%e7%94%a8%e6%80%a7%e7%a0%94%e7%a9%b6/' title='如何说服管理层进行可用性研究'>如何说服管理层进行可用性研究</a></li>
<li><a href='http://gengrenjie.com/2009/06/22/%e5%8f%af%e7%94%a8%e6%80%a7%e5%92%8c%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c%e7%9a%84%e5%85%b3%e7%b3%bb/' title='可用性和用户体验的关系'>可用性和用户体验的关系</a></li>
<li><a href='http://gengrenjie.com/2009/06/21/%e5%9b%bd%e9%99%85%e6%80%a7%e5%b7%ae%e5%bc%82%ef%bc%9a%e4%b8%9c%e8%a5%bf%e6%96%b9%e6%96%87%e5%8c%96%e5%af%b9%e7%bd%91%e7%ab%99%e8%ae%be%e8%ae%a1%e7%9a%84%e5%bd%b1%e5%93%8d/' title='国际性差异：东西方文化对网站设计的影响'>国际性差异：东西方文化对网站设计的影响</a></li>
<li><a href='http://gengrenjie.com/2009/06/05/%e6%84%9f%e7%9f%a5%e8%ae%be%e8%ae%a1%e6%97%b6%e4%bb%a3%e7%9a%84%e6%9d%a5%e4%b8%b4/' title='感知设计时代的来临'>感知设计时代的来临</a></li>
</ul>
<p>&copy;2012 <a href="http://gengrenjie.com">耿人杰的网络日志</a>. 知识共享署名-非商业性使用-禁止演绎.</p>. <img src="http://gengrenjie.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=551" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://gengrenjie.com/2009/06/21/web%e8%a1%a8%e5%8d%95%e8%ae%be%e8%ae%a1%e6%8c%87%e5%8d%97%ef%bc%9a%e7%9c%bc%e5%8a%a8%e8%b7%9f%e8%b8%aa%e7%a0%94%e7%a9%b6/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>感知设计时代的来临</title>
		<link>http://gengrenjie.com/2009/06/05/%e6%84%9f%e7%9f%a5%e8%ae%be%e8%ae%a1%e6%97%b6%e4%bb%a3%e7%9a%84%e6%9d%a5%e4%b8%b4/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=%25e6%2584%259f%25e7%259f%25a5%25e8%25ae%25be%25e8%25ae%25a1%25e6%2597%25b6%25e4%25bb%25a3%25e7%259a%2584%25e6%259d%25a5%25e4%25b8%25b4</link>
		<comments>http://gengrenjie.com/2009/06/05/%e6%84%9f%e7%9f%a5%e8%ae%be%e8%ae%a1%e6%97%b6%e4%bb%a3%e7%9a%84%e6%9d%a5%e4%b8%b4/#comments</comments>
		<pubDate>Fri, 05 Jun 2009 11:06:56 +0000</pubDate>
		<dc:creator>耿 人杰</dc:creator>
				<category><![CDATA[用户体验设计]]></category>
		<category><![CDATA[Technology.sensors]]></category>
		<category><![CDATA[交互设计]]></category>
		<category><![CDATA[感知设计]]></category>
		<category><![CDATA[移动设备交互设计]]></category>
		<category><![CDATA[译言]]></category>

		<guid isPermaLink="false">http://gengrenjie.com/?p=505</guid>
		<description><![CDATA[【译者：耿人杰 原文：http://www.lukew.com/ff/entry.asp?828 作者：Luke Wroblewski】 同步发于译言：http://article.yeeyan.org/view/gengrenjie/44697 前言：这是一篇Lukew发布于自己blog的关于感知设计的文章，这是一个相对较新的领域，无论对于移动设备交互设计还是传统的人机交互都有很好的参考价值。 ———————————— 全文的分割线 ————————————— 感知设计时代的来临 我本该在很久之前就写这篇文章。但当我在《Digital Product Platforms》一文中列出iPhone所用的所有传感器类型时，我才觉得现在是时候来写写感知设计了。 在David Pescovitz的《WebVisions 2007 Keynote》中，他提到无处不在的感知应用将促使以下事情的发生： 三股技术风潮：计算（提高生产力、数据处理）；通信（电子邮件、即时聊天等）；感知（无处不在的感知）。 在下一个十年，这三股趋势将趋于融合。大多数设备都将同时具备计算、通信和感知处理能力。 感知网络将能服务于现实中的视觉和听觉，并提供和地理相关的信息。这意味着虚拟和现实将渐渐模糊，虚拟空间将成为真实世界的映射。 不计其数的感知数据将持续不断地发送给用户。 感知过滤处理（sense-making）将成为技术风潮的第四股力量，它将帮助我们处理信息过载。 毋庸置疑，我们正在逐渐进入感知时代，iPhone所内置的数量众多的各种感知探测器也正验证了这一趋势： 位置感知：通过GPS获得的准确地理信息 方向感知：基于数码罗盘的方向指南 触摸感知：多点触摸和基于手势的感知 光感感知：周围的光感侦测 设备方向及运动感知：依靠内部的重力加速器侦测 短距离感知：设备相对物体与人的距离侦测 音频感知：利用内置麦克风 图像和视频感知：依靠内置数码摄像机捕捉的实时视频信息 传输感知：利用蓝牙 音频广播感知：利用FM调频广告（未定） 所以，相对之前的设计（计算、通信），我们在不久的将来将迎来感知设计时代。 其他你可能感兴趣的: 触摸游戏进行时 移动网络设计的5个误区 Web表单设计指南：眼动跟踪研究 Kindle的内容设计 移动设备交互设计&#8211;从“基于任务”到“揭示可能” &#169;2012 耿人杰的网络日志. 知识共享署名-非商业性使用-禁止演绎..]]></description>
			<content:encoded><![CDATA[<p>【译者：<a href="http://gengrenjie.com" target="_blank">耿人杰</a> 原文：<a href="http://www.lukew.com/ff/entry.asp?828">http://www.lukew.com/ff/entry.asp?828</a> 作者：<a href="http://www.lukew.com" target="_blank">Luke Wroblewski</a>】</p>
<p>同步发于译言：<a href="http://article.yeeyan.org/view/gengrenjie/44697">http://article.yeeyan.org/view/gengrenjie/44697</a></p>
<p>前言：这是一篇Lukew发布于自己blog的关于感知设计的文章，这是一个相对较新的领域，无论对于移动设备交互设计还是传统的人机交互都有很好的参考价值。</p>
<p>———————————— 全文的分割线 —————————————</p>
<h3><span><span>感知设计时代的来临</span></span></h3>
<p class="MsoNormal"><span><span>我本该在很久之前就写这篇文章。但当我在《</span><span lang="EN-US">Digital Product Platforms</span></span><span><span>》一文中列出</span><span lang="EN-US">iPhone</span></span><span><span>所用的所有传感器类型时，我才觉得现在是时候来写写感知设计了。</span></span></p>
<p class="MsoNormal"><span><span>在</span><span lang="EN-US">David Pescovitz</span></span><span><span>的《</span><span lang="EN-US">WebVisions 2007 Keynote</span></span><span><span>》中，他提到无处不在的感知应用将促使以下事情的发生：</span></span></p>
<ul>
<li>三股技术风潮：计算（提高生产力、数据处理）；通信（电子邮件、即时聊天等）；感知（无处不在的感知）。</li>
<li><span><span>在下一个十年，这三股趋势将趋于融合。大多数设备都将同时具备计算、通信和感知处理能力。</span></span></li>
<li><span><span>感知网络将能服务于现实中的视觉和听觉，并提供和地理相关的信息。这意味着虚拟和现实将渐渐模糊，虚拟空间将成为真实世界的映射。</span></span></li>
<li><span><span>不计其数的感知数据将持续不断地发送给用户。</span></span></li>
<li><span><span>感知过滤处理（</span><span lang="EN-US">sense-making</span></span><span><span>）将成为技术风潮的第四股力量，它将帮助我们处理信息过载。</span></span></li>
</ul>
<p class="MsoNormal"><span><span>毋庸置疑，我们正在逐渐进入感知时代，</span><span lang="EN-US">iPhone</span></span><span><span>所内置的数量众多的各种感知探测器也正验证了这一趋势：</span></span></p>
<ul>
<li><span><span>位置感知：通过</span><span lang="EN-US">GPS</span></span><span><span>获得的准确地理信息</span></span></li>
<li>方向感知：基于数码罗盘的方向指南</li>
<li>触摸感知：多点触摸和基于手势的感知</li>
<li>光感感知：周围的光感侦测</li>
<li>设备方向及运动感知：依靠内部的重力加速器侦测</li>
<li>短距离感知：设备相对物体与人的距离侦测</li>
<li>音频感知：利用内置麦克风</li>
<li>图像和视频感知：依靠内置数码摄像机捕捉的实时视频信息</li>
<li>传输感知：利用蓝牙</li>
<li><span><span>音频广播感知：利用</span><span lang="EN-US">FM</span></span><span><span>调频广告（未定）</span></span></li>
</ul>
<p><span><span>所以，相对之前的设计（计算、通信），我们在不久的将来将迎来</span><strong>感知设计</strong><span>时代。</span></span><br />
<h3 class='related_post_title'>其他你可能感兴趣的:</h3>
<ul class='related_post'>
<li><a href='http://gengrenjie.com/2009/06/23/%e8%a7%a6%e6%91%b8%e6%b8%b8%e6%88%8f%e8%bf%9b%e8%a1%8c%e6%97%b6/' title='触摸游戏进行时'>触摸游戏进行时</a></li>
<li><a href='http://gengrenjie.com/2009/06/22/%e7%a7%bb%e5%8a%a8%e7%bd%91%e7%bb%9c%e8%ae%be%e8%ae%a1%e7%9a%845%e4%b8%aa%e8%af%af%e5%8c%ba/' title='移动网络设计的5个误区'>移动网络设计的5个误区</a></li>
<li><a href='http://gengrenjie.com/2009/06/21/web%e8%a1%a8%e5%8d%95%e8%ae%be%e8%ae%a1%e6%8c%87%e5%8d%97%ef%bc%9a%e7%9c%bc%e5%8a%a8%e8%b7%9f%e8%b8%aa%e7%a0%94%e7%a9%b6/' title='Web表单设计指南：眼动跟踪研究'>Web表单设计指南：眼动跟踪研究</a></li>
<li><a href='http://gengrenjie.com/2009/06/18/kindle%e7%9a%84%e5%86%85%e5%ae%b9%e8%ae%be%e8%ae%a1/' title='Kindle的内容设计'>Kindle的内容设计</a></li>
<li><a href='http://gengrenjie.com/2009/06/03/%e7%a7%bb%e5%8a%a8%e8%ae%be%e5%a4%87%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1-%e4%bb%8e%e2%80%9c%e5%9f%ba%e4%ba%8e%e4%bb%bb%e5%8a%a1%e2%80%9d%e5%88%b0%e2%80%9c%e6%8f%ad%e7%a4%ba%e5%8f%af%e8%83%bd%e2%80%9d/' title='移动设备交互设计&#8211;从“基于任务”到“揭示可能”'>移动设备交互设计&#8211;从“基于任务”到“揭示可能”</a></li>
</ul>
<p>&copy;2012 <a href="http://gengrenjie.com">耿人杰的网络日志</a>. 知识共享署名-非商业性使用-禁止演绎.</p>. <img src="http://gengrenjie.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=505" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://gengrenjie.com/2009/06/05/%e6%84%9f%e7%9f%a5%e8%ae%be%e8%ae%a1%e6%97%b6%e4%bb%a3%e7%9a%84%e6%9d%a5%e4%b8%b4/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>移动设备交互设计&#8211;从“基于任务”到“揭示可能”</title>
		<link>http://gengrenjie.com/2009/06/03/%e7%a7%bb%e5%8a%a8%e8%ae%be%e5%a4%87%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1-%e4%bb%8e%e2%80%9c%e5%9f%ba%e4%ba%8e%e4%bb%bb%e5%8a%a1%e2%80%9d%e5%88%b0%e2%80%9c%e6%8f%ad%e7%a4%ba%e5%8f%af%e8%83%bd%e2%80%9d/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=%25e7%25a7%25bb%25e5%258a%25a8%25e8%25ae%25be%25e5%25a4%2587%25e4%25ba%25a4%25e4%25ba%2592%25e8%25ae%25be%25e8%25ae%25a1-%25e4%25bb%258e%25e2%2580%259c%25e5%259f%25ba%25e4%25ba%258e%25e4%25bb%25bb%25e5%258a%25a1%25e2%2580%259d%25e5%2588%25b0%25e2%2580%259c%25e6%258f%25ad%25e7%25a4%25ba%25e5%258f%25af%25e8%2583%25bd%25e2%2580%259d</link>
		<comments>http://gengrenjie.com/2009/06/03/%e7%a7%bb%e5%8a%a8%e8%ae%be%e5%a4%87%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1-%e4%bb%8e%e2%80%9c%e5%9f%ba%e4%ba%8e%e4%bb%bb%e5%8a%a1%e2%80%9d%e5%88%b0%e2%80%9c%e6%8f%ad%e7%a4%ba%e5%8f%af%e8%83%bd%e2%80%9d/#comments</comments>
		<pubDate>Wed, 03 Jun 2009 14:59:42 +0000</pubDate>
		<dc:creator>耿 人杰</dc:creator>
				<category><![CDATA[用户体验设计]]></category>
		<category><![CDATA[交互设计]]></category>
		<category><![CDATA[基于任务的交互]]></category>
		<category><![CDATA[移动设备交互设计]]></category>

		<guid isPermaLink="false">http://gengrenjie.com/?p=503</guid>
		<description><![CDATA[Rachel Hinman最近在adaptivepath上发表了一篇文章（原文），介绍了她对移动设备交互设计发展趋势的一些看法。UCD翻译小组已经进行了翻译，我在这里简述并阐述一下个人看法。 Rachel Hinman提到：移动设备的用户体验趋势之一，是将不再使用基于任务的交互模式。理由是：电脑是效率非凡的工具，并能确实将事情做好，但移动设备并不是一个可以很好的完成很多任务的平台。屏幕小小，种类多多，迷宫般的菜单都会阻碍任务的完成。因此，她提出了新的适合在移动设备上进行的交互模式，即“揭示可能（Exposing possibilities）”。其次，她将揭示可能的交互设计模式分成了3类： 价值渐增（Accrue value over time）：完成任务转变为持续获得信息，人们也更容易参与。twitter就是最好的例子，我们使用twitter回复“你在干啥？”不是为了完成任务，更有价值的是交流本身。 促进探索（Facilitate exploration）：相比在PC上，人们总是更热衷于在移动设备上体验新的应用，今天装个游戏，明天下个MP3，时不时的上开心网看看好友的情况等等。移动设备展现的场景和功能似乎都很能激发人们的好奇心，让人们产生想要玩的念头。 感知意图（Sense intent）：利用来自感应器、使用习惯、 GPS等信息，用算法来预测用户需求，并根据当前情景提供可用的选择。就像我在以前的一篇关于移动设备姿态交互的文章提到的，iPhone能感知当前的通话状态并给予回应，也能随着手机的方向调整屏幕和界面的显示方式。而带有GPS的手机能告诉你在哪里、附近有什么好玩的、朋友在哪里等等。 最后作者提到：基于任务的交互模式一直以来都很好的为我们服务。但唯一能让我们认识到移动设备交互设计的机遇的方法，就是暂时和我们的老朋友——“任务”告别，然后集中心神结交一些新朋友。 回到当前国内移动设备交互设计，我们周围充斥着太多“完成任务”很困难的产品： 要按不下10次键才能搜索到手机通讯录中某人。 在手机上发个邮件需要太多的设置。 无法在3次按键内列出mp3里所有张靓颖的歌曲。 以上的种种，都源于我们缺少以用户为中心的设计理念，缺少用户研究的经验和能力，缺少设计出顶尖产品的决心和野心。不过我们也不必过于妄自菲薄，通过不断的学习和积累，不断的了解用户，时刻保持stay foolish stay hungry的精神。有一天我们也可以说：“嘿，瞧瞧我们的设计！” 其他你可能感兴趣的: 感知设计时代的来临 交互设计师能力素质模型 可重用性设计准则 iPhone也可以有滚动条吗 TED视频：Pattie Maes at TED:第六感装置演示 &#169;2012 耿人杰的网络日志. 知识共享署名-非商业性使用-禁止演绎..]]></description>
			<content:encoded><![CDATA[<p><small><span style="font-size: 13px;">Rachel Hinman最近在<a href="http://www.adaptivepath.com" target="_blank">adaptivepath</a>上发表了一篇文章（<a href="http://www.adaptivepath.com/blog/2009/01/18/say-goodbye-to-done/" target="_blank">原文</a>），介绍了她对移动设备交互设计发展趋势的一些看法。<a href="http://ucdchina.com/topic/59" target="_blank">UCD翻译小组</a>已经进行了<a href="http://www.mrsunliang.com/?p=71" target="_blank">翻译</a>，我在这里简述并阐述一下个人看法。</span></small></p>
<p><span style="font-size: 13px;">Rachel Hinman提到：移动设备的用户体验趋势之一，是将不再使用<strong>基于任务</strong>的交互模式。理由是：电脑是效率非凡的工具，并能确实将事情做好，但移动设备并不是一个可以很好的完成很多任务的平台。屏幕小小，种类多多，迷宫般的菜单都会阻碍任务的完成。因此，她提出了新的适合在移动设备上进行的交互模式，即“<strong>揭示可能</strong>（Exposing possibilities）”。其次，她将揭示可能的交互设计模式分成了3类：</span></p>
<p><span style="font-size: 13px;"><img class="alignnone" title="accrue_3" src="http://www.adaptivepath.com/blog/wp-content/uploads/2009/01/accrue_3.jpg" alt="" width="228" height="109" /><img class="alignnone" title="explore" src="http://www.adaptivepath.com/blog/wp-content/uploads/2009/01/explore.jpg" alt="" width="228" height="195" /><img class="alignnone" title="possibilities" src="http://www.adaptivepath.com/blog/wp-content/uploads/2009/01/possibilities.jpg" alt="" width="228" height="211" /></span></p>
<ul>
<li><strong>价值渐增</strong>（Accrue value over time）：完成任务转变为持续获得信息，人们也更容易参与。twitter就是最好的例子，我们使用twitter回复“你在干啥？”不是为了完成任务，更有价值的是交流本身。</li>
<li><strong>促进探索</strong>（Facilitate exploration）：相比在PC上，人们总是更热衷于在移动设备上体验新的应用，今天装个游戏，明天下个MP3，时不时的上开心网看看好友的情况等等。移动设备展现的场景和功能似乎都很能激发人们的好奇心，让人们产生想要玩的念头。</li>
<li><strong>感知意图</strong>（Sense intent）：利用来自感应器、使用习惯、 GPS等信息，用算法来预测用户需求，并根据当前情景提供可用的选择。就像我在以前的一篇关于<a href="http://gengrenjie.com/archives/412" target="_blank" class="broken_link">移动设备姿态交互</a>的文章提到的，iPhone能感知当前的通话状态并给予回应，也能随着手机的方向调整屏幕和界面的显示方式。而带有GPS的手机能告诉你在哪里、附近有什么好玩的、朋友在哪里等等。</li>
</ul>
<p>最后作者提到：基于任务的交互模式一直以来都很好的为我们服务。但唯一能让我们认识到移动设备交互设计的机遇的方法，就是暂时和我们的老朋友——“任务”告别，然后集中心神结交一些新朋友。</p>
<p><strong><span style="font-weight: normal;">回到当前国内移动设备交互设计，我们周围充斥着太多“完成任务”很困难的产品：</span></strong></p>
<ul>
<li>要按不下10次键才能搜索到手机通讯录中某人。</li>
<li>在手机上发个邮件需要太多的设置。</li>
<li>无法在3次按键内列出mp3里所有张靓颖的歌曲。</li>
</ul>
<p>以上的种种，都源于我们缺少以用户为中心的设计理念，缺少用户研究的经验和能力，缺少设计出顶尖产品的决心和野心。不过我们也不必过于妄自菲薄，通过不断的学习和积累，不断的了解用户，时刻保持stay foolish stay hungry的精神。有一天我们也可以说：“嘿，瞧瞧我们的设计！”<br />
<h3 class='related_post_title'>其他你可能感兴趣的:</h3>
<ul class='related_post'>
<li><a href='http://gengrenjie.com/2009/06/05/%e6%84%9f%e7%9f%a5%e8%ae%be%e8%ae%a1%e6%97%b6%e4%bb%a3%e7%9a%84%e6%9d%a5%e4%b8%b4/' title='感知设计时代的来临'>感知设计时代的来临</a></li>
<li><a href='http://gengrenjie.com/2010/04/26/%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e5%b8%88%e8%83%bd%e5%8a%9b%e7%b4%a0%e8%b4%a8%e6%a8%a1%e5%9e%8b/' title='交互设计师能力素质模型'>交互设计师能力素质模型</a></li>
<li><a href='http://gengrenjie.com/2009/10/19/%e5%8f%af%e9%87%8d%e7%94%a8%e6%80%a7%e8%ae%be%e8%ae%a1%e5%87%86%e5%88%99/' title='可重用性设计准则'>可重用性设计准则</a></li>
<li><a href='http://gengrenjie.com/2009/08/25/iphone%e4%b9%9f%e5%8f%af%e4%bb%a5%e6%9c%89%e6%bb%9a%e5%8a%a8%e6%9d%a1%e5%90%97/' title='iPhone也可以有滚动条吗'>iPhone也可以有滚动条吗</a></li>
<li><a href='http://gengrenjie.com/2009/08/16/%e8%a7%86%e9%a2%91-pattie-maes-at-ted%ef%bc%9a%e7%ac%ac%e5%85%ad%e6%84%9f%e8%a3%85%e7%bd%ae%e6%bc%94%e7%a4%ba/' title='TED视频：Pattie Maes at TED:第六感装置演示'>TED视频：Pattie Maes at TED:第六感装置演示</a></li>
</ul>
<p>&copy;2012 <a href="http://gengrenjie.com">耿人杰的网络日志</a>. 知识共享署名-非商业性使用-禁止演绎.</p>. <img src="http://gengrenjie.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=503" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://gengrenjie.com/2009/06/03/%e7%a7%bb%e5%8a%a8%e8%ae%be%e5%a4%87%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1-%e4%bb%8e%e2%80%9c%e5%9f%ba%e4%ba%8e%e4%bb%bb%e5%8a%a1%e2%80%9d%e5%88%b0%e2%80%9c%e6%8f%ad%e7%a4%ba%e5%8f%af%e8%83%bd%e2%80%9d/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>移动设备交互设计—香味交互</title>
		<link>http://gengrenjie.com/2009/05/29/%e7%a7%bb%e5%8a%a8%e8%ae%be%e5%a4%87%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e2%80%94%e9%a6%99%e5%91%b3%e4%ba%a4%e4%ba%92/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=%25e7%25a7%25bb%25e5%258a%25a8%25e8%25ae%25be%25e5%25a4%2587%25e4%25ba%25a4%25e4%25ba%2592%25e8%25ae%25be%25e8%25ae%25a1%25e2%2580%2594%25e9%25a6%2599%25e5%2591%25b3%25e4%25ba%25a4%25e4%25ba%2592</link>
		<comments>http://gengrenjie.com/2009/05/29/%e7%a7%bb%e5%8a%a8%e8%ae%be%e5%a4%87%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e2%80%94%e9%a6%99%e5%91%b3%e4%ba%a4%e4%ba%92/#comments</comments>
		<pubDate>Fri, 29 May 2009 11:21:15 +0000</pubDate>
		<dc:creator>耿 人杰</dc:creator>
				<category><![CDATA[用户体验设计]]></category>
		<category><![CDATA[交互设计]]></category>
		<category><![CDATA[移动设备交互设计]]></category>
		<category><![CDATA[香味交互]]></category>

		<guid isPermaLink="false">http://gengrenjie.com/?p=419</guid>
		<description><![CDATA[有观点认为，香味能非常有效的唤起感知和反应能力，而同时它在产生这种效果时是以一种潜移默化的方式进行的。这种交互形式很适合于和某种特定的环境进行融合，它可以被添加到网站或游戏中以增强它们的性能，或可以添加到日历等普通的应用程序中。同样，它在移动设备交互中也能有所作为，例如： 三点半接孩子，下午三点你的手机就散发出婴儿粉的香味，它被当作一个温和的提示。 不同的人来电和不同目的的来电也将导致手机散发出不同的香味，增强了接触的亲密感。 其他你可能感兴趣的: 感知设计时代的来临 交互设计师能力素质模型 可重用性设计准则 iPhone也可以有滚动条吗 TED视频：Pattie Maes at TED:第六感装置演示 &#169;2012 耿人杰的网络日志. 知识共享署名-非商业性使用-禁止演绎..]]></description>
			<content:encoded><![CDATA[<p class="MsoNormal">
<p class="MsoNormal">有观点认为，香味能非常有效的唤起感知和反应能力，而同时它在产生这种效果时是以一种潜移默化的方式进行的。这种交互形式很适合于和某种特定的环境进行融合，它可以被添加到网站或游戏中以增强它们的性能，或可以添加到日历等普通的应用程序中。同样，它在移动设备交互中也能有所作为，例如：</p>
<ul>
<li>三点半接孩子，下午三点你的手机就散发出婴儿粉的香味，它被当作一个温和的提示。</li>
<li>不同的人来电和不同目的的来电也将导致手机散发出不同的香味，增强了接触的亲密感。</li>
</ul>
<h3 class='related_post_title'>其他你可能感兴趣的:</h3>
<ul class='related_post'>
<li><a href='http://gengrenjie.com/2009/06/05/%e6%84%9f%e7%9f%a5%e8%ae%be%e8%ae%a1%e6%97%b6%e4%bb%a3%e7%9a%84%e6%9d%a5%e4%b8%b4/' title='感知设计时代的来临'>感知设计时代的来临</a></li>
<li><a href='http://gengrenjie.com/2010/04/26/%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e5%b8%88%e8%83%bd%e5%8a%9b%e7%b4%a0%e8%b4%a8%e6%a8%a1%e5%9e%8b/' title='交互设计师能力素质模型'>交互设计师能力素质模型</a></li>
<li><a href='http://gengrenjie.com/2009/10/19/%e5%8f%af%e9%87%8d%e7%94%a8%e6%80%a7%e8%ae%be%e8%ae%a1%e5%87%86%e5%88%99/' title='可重用性设计准则'>可重用性设计准则</a></li>
<li><a href='http://gengrenjie.com/2009/08/25/iphone%e4%b9%9f%e5%8f%af%e4%bb%a5%e6%9c%89%e6%bb%9a%e5%8a%a8%e6%9d%a1%e5%90%97/' title='iPhone也可以有滚动条吗'>iPhone也可以有滚动条吗</a></li>
<li><a href='http://gengrenjie.com/2009/08/16/%e8%a7%86%e9%a2%91-pattie-maes-at-ted%ef%bc%9a%e7%ac%ac%e5%85%ad%e6%84%9f%e8%a3%85%e7%bd%ae%e6%bc%94%e7%a4%ba/' title='TED视频：Pattie Maes at TED:第六感装置演示'>TED视频：Pattie Maes at TED:第六感装置演示</a></li>
</ul>
<p>&copy;2012 <a href="http://gengrenjie.com">耿人杰的网络日志</a>. 知识共享署名-非商业性使用-禁止演绎.</p>. <img src="http://gengrenjie.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=419" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://gengrenjie.com/2009/05/29/%e7%a7%bb%e5%8a%a8%e8%ae%be%e5%a4%87%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e2%80%94%e9%a6%99%e5%91%b3%e4%ba%a4%e4%ba%92/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>移动设备交互设计—姿态交互</title>
		<link>http://gengrenjie.com/2009/05/28/%e7%a7%bb%e5%8a%a8%e8%ae%be%e5%a4%87%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e2%80%94%e5%a7%bf%e6%80%81%e4%ba%a4%e4%ba%92/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=%25e7%25a7%25bb%25e5%258a%25a8%25e8%25ae%25be%25e5%25a4%2587%25e4%25ba%25a4%25e4%25ba%2592%25e8%25ae%25be%25e8%25ae%25a1%25e2%2580%2594%25e5%25a7%25bf%25e6%2580%2581%25e4%25ba%25a4%25e4%25ba%2592</link>
		<comments>http://gengrenjie.com/2009/05/28/%e7%a7%bb%e5%8a%a8%e8%ae%be%e5%a4%87%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e2%80%94%e5%a7%bf%e6%80%81%e4%ba%a4%e4%ba%92/#comments</comments>
		<pubDate>Thu, 28 May 2009 13:37:17 +0000</pubDate>
		<dc:creator>耿 人杰</dc:creator>
				<category><![CDATA[用户体验设计]]></category>
		<category><![CDATA[交互设计]]></category>
		<category><![CDATA[姿态交互]]></category>
		<category><![CDATA[移动设备交互设计]]></category>

		<guid isPermaLink="false">http://gengrenjie.com/?p=412</guid>
		<description><![CDATA[你可以通过移动双手、点头或指点的方式来有效而快捷地与他人交流。从简单的挪动设备的动作到复杂的点头，对这些姿态的研究有希望用于提供更有效的方式来输入信息和交互。 姿态在交互设计中的运用主要解决了两个问题： 克服了物理空间的不足：姿态的交互使得设备避免增加额外的物理按钮或其他控制器，或避免在有限的屏幕空间里杂乱地布满按钮和其他小控件。 在某些使用条件下提高效率：移动设备用户不愿意或不能集中他们的所有精力去和设备交互。例如，许多音乐播放器是在人们在健身房运动的时候被使用的，当用户正全力以赴地踩着脚踏车时，若想操作播放器，他很难将精神集中于一个小屏幕或定位于一个小按钮或菜单来调节某一个功能。 在已有设备中，iPhone的姿态设计值得称道： 在通话时，当把电话从耳边拿开放到眼前时，屏幕自动点亮，并显示通话时间、免提、挂断和通讯录等按钮。移回耳边后，屏幕自动关闭，继续保持通话状态。 很多人对玩赛车游戏乐此不疲，用iPhone玩某些赛车游戏时，可以把屏幕横放，利用内置的重力感应器，左右晃动屏幕来操控赛车前行。这种通过姿态来控制应用跟实际操控方向盘驾驶有很大的相似之处。 其他你可能感兴趣的: 感知设计时代的来临 交互设计师能力素质模型 可重用性设计准则 iPhone也可以有滚动条吗 TED视频：Pattie Maes at TED:第六感装置演示 &#169;2012 耿人杰的网络日志. 知识共享署名-非商业性使用-禁止演绎..]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-413" title="姿态交互1" src="http://gengrenjie.com/wp-content/uploads/2009/05/sixthsense04.jpg" alt="姿态交互1" width="150" height="113" /><img class="alignnone size-full wp-image-414" title="姿态交互2" src="http://gengrenjie.com/wp-content/uploads/2009/05/sixthsense05.jpg" alt="姿态交互2" width="150" height="113" /><img class="alignnone size-full wp-image-416" title="姿态交互3" src="http://gengrenjie.com/wp-content/uploads/2009/05/sixthsense09.jpg" alt="姿态交互3" width="150" height="113" /></p>
<p>你可以通过移动双手、点头或指点的方式来有效而快捷地与他人交流。从简单的挪动设备的动作到复杂的点头，对这些姿态的研究有希望用于提供更有效的方式来输入信息和交互。</p>
<p class="MsoNormal"><span><span>姿态在交互设计中的运用主要解决了两个问题：</span></span></p>
<ul>
<li>克服了物理空间的不足：姿态的交互使得设备避免增加额外的物理按钮或其他控制器，或避免在有限的屏幕空间里杂乱地布满按钮和其他小控件。</li>
<li>在某些使用条件下提高效率：移动设备用户不愿意或不能集中他们的所有精力去和设备交互。例如，许多音乐播放器是在人们在健身房运动的时候被使用的，当用户正全力以赴地踩着脚踏车时，若想操作播放器，他很难将精神集中于一个小屏幕或定位于一个小按钮或菜单来调节某一个功能。</li>
</ul>
<p class="MsoNormal"><span><span>在已有设备中，</span><span lang="EN-US">iPhone</span></span><span><span>的姿态设计值得称道：</span></span></p>
<ul>
<li>在通话时，当把电话从耳边拿开放到眼前时，屏幕自动点亮，并显示通话时间、免提、挂断和通讯录等按钮。移回耳边后，屏幕自动关闭，继续保持通话状态。</li>
<li><span>很多人对玩赛车游戏乐此不疲，用</span><span lang="EN-US">iPhone</span><span>玩某些赛车游戏时，可以把屏幕横放，利用内置的重力感应器，左右晃动屏幕来操控赛车前行。这种通过姿态来控制应用跟实际操控方向盘驾驶有很大的相似之处。</span></li>
</ul>
<h3 class='related_post_title'>其他你可能感兴趣的:</h3>
<ul class='related_post'>
<li><a href='http://gengrenjie.com/2009/06/05/%e6%84%9f%e7%9f%a5%e8%ae%be%e8%ae%a1%e6%97%b6%e4%bb%a3%e7%9a%84%e6%9d%a5%e4%b8%b4/' title='感知设计时代的来临'>感知设计时代的来临</a></li>
<li><a href='http://gengrenjie.com/2010/04/26/%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e5%b8%88%e8%83%bd%e5%8a%9b%e7%b4%a0%e8%b4%a8%e6%a8%a1%e5%9e%8b/' title='交互设计师能力素质模型'>交互设计师能力素质模型</a></li>
<li><a href='http://gengrenjie.com/2009/10/19/%e5%8f%af%e9%87%8d%e7%94%a8%e6%80%a7%e8%ae%be%e8%ae%a1%e5%87%86%e5%88%99/' title='可重用性设计准则'>可重用性设计准则</a></li>
<li><a href='http://gengrenjie.com/2009/08/25/iphone%e4%b9%9f%e5%8f%af%e4%bb%a5%e6%9c%89%e6%bb%9a%e5%8a%a8%e6%9d%a1%e5%90%97/' title='iPhone也可以有滚动条吗'>iPhone也可以有滚动条吗</a></li>
<li><a href='http://gengrenjie.com/2009/08/16/%e8%a7%86%e9%a2%91-pattie-maes-at-ted%ef%bc%9a%e7%ac%ac%e5%85%ad%e6%84%9f%e8%a3%85%e7%bd%ae%e6%bc%94%e7%a4%ba/' title='TED视频：Pattie Maes at TED:第六感装置演示'>TED视频：Pattie Maes at TED:第六感装置演示</a></li>
</ul>
<p>&copy;2012 <a href="http://gengrenjie.com">耿人杰的网络日志</a>. 知识共享署名-非商业性使用-禁止演绎.</p>. <img src="http://gengrenjie.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=412" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://gengrenjie.com/2009/05/28/%e7%a7%bb%e5%8a%a8%e8%ae%be%e5%a4%87%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e2%80%94%e5%a7%bf%e6%80%81%e4%ba%a4%e4%ba%92/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

