<?xml version="1.0" encoding="gb2312"?>
<rss version="2.0">
<channel>
<title><![CDATA[莲   子]]></title>
        <image>
        <title>http://hi.baidu.com</title>
        <link>http://hi.baidu.com</link>
        <url>http://img.baidu.com/img/logo-hi.gif</url>
        </image>
<description><![CDATA[]]></description>
<link>http://hi.baidu.com/lanx1983</link>
<language>zh-cn</language>
<generator>www.baidu.com</generator>
<ttl>5</ttl>


<item>
        <title><![CDATA[（翻译）创造价值不等于简化流程：由外而内设计]]></title>
        <link><![CDATA[http://hi.baidu.com/lanx1983/blog/item/e6a76ff430619edef3d3850c.html]]></link>
        <description><![CDATA[
		
		<font face="Arial" size="2" color="#808080">作者：</font><font color="#0000ff"><a target="_blank" href="http://www.adaptivepath.com/aboutus/brandon.php"><font face="Arial" size="2">Brandon Schauer</font></a></font><br>
<font face="Arial" size="2" color="#808080">原文链接：<a target="_blank" href="http://www.adaptivepath.com/blog/2009/02/19/value-isnt-a-subtractive-process-designing-from-the-outside-in/">Value isn't a subtractive process:designing from the outside in</a></font><br>
<font face="Arial" size="2" color="#808080">译者：</font><font face="Arial" size="2" color="#808080"><a target="_blank" href="http://ucdchina.com/topic/59">UCD翻译小组</a>, <a href="../../lanx1983" target="_blank">Lanx</a></font><font face="Arial" size="2"><strong><br>
</strong></font><font face="Arial" size="2"><font color="#808080"><font color="#808080">Brandon Schauer </font></font></font><font face="Arial" size="2"><font color="#808080">版权所有(Arti<font color="#808080">cle copyright by Brandon Schauer</font></font></font><font face="Arial" size="2" color="#808080">)</font><br>
<font size="2"><br>
<span style="background-color: rgb(255, 255, 255);">在当今巨大的经济压力下，很多企业都在寻找高效率和最优化的方法来简化流程从而创造价值。可你猜怎么着：</span><strong style="background-color: rgb(255, 255, 255);">创造价值不等于简化流程</strong><span style="background-color: rgb(255, 255, 255);">。</span><br style="background-color: rgb(255, 255, 255);">
</font><br>
<div class="wp-caption alignnone" style="width: 310px;"><font size="2"><a href="http://www.flickr.com/photos/29335908@N00/2244004806/"><img height="300" width="300" class="size-medium wp-image-2373" title="subtractive_keyboard_blyzz" src="http://www.adaptivepath.com/blog/wp-content/uploads/2009/02/subtractive_keyboard_blyzz1-300x300.jpg" alt="photo by blyzz"></a></font>
<p class="wp-caption-text"><font size="2">照片由 blyzz 提供<br>
</font></p>
</div>
<p><font size="2"><span style="background-color: rgb(255, 255, 255);">比如</span><a style="background-color: rgb(255, 255, 255);" title="商业流程改革" href="http://en.wikipedia.org/wiki/Business_process_reengineering">业务流程重组</a><span style="background-color: rgb(255, 255, 255);">就是一个做过头的例子，在过去的日子里它因为过分关注于削减（流程）从而导致其被过分夸大和误用，</span><a style="background-color: rgb(255, 255, 255);" title="它并没有在" href="http://www.rotman.utoronto.ca/%7Eevans/teach363/fastco/reengin.htm">它并没有关注流程中的人</a><span style="background-color: rgb(255, 255, 255);">。他们只问：&ldquo;通过技术进步或流程改造能去掉哪些环节？</span><gdoc:callout style="background-color: rgb(255, 255, 255);" calloutshowfull="false" calloutclosed="false" calloutmarkerid="t6fj" callouttype="footnote" class="writely-callout writely-callout-data google_footnote" name="gdoccallout">&ldquo;</gdoc:callout><span style="background-color: rgb(255, 255, 255);">但是对于用户来说，我们并不认为将浪费消除就是价值所在。我们认为的价值是让我们以最小的代价获得我们真正需要的交付物。对于用户来说，真正的价值不是那些你回收、缩减了的东西，而是你发现、关注以及最终交付的东西。</span><br style="background-color: rgb(255, 255, 0);">
</font></p>
<p style="background-color: rgb(255, 255, 255);"><font size="2">不久前， <a href="http://adaptivepath.com/aboutus/peterme.php">Peter</a> 和 <a href="http://adaptivepath.com/aboutus/jjg.php">Jesse</a> 分享了这个简单的图表，向我们展示了许多企业为他们用户创造价值的方式。<gdoc:callout calloutshowfull="true" calloutclosed="false" calloutmarkerid="hh70" callouttype="footnote" class="writely-callout writely-callout-data google_footnote" name="gdoccallout"></gdoc:callout><marker style="display: inline-block;" class="writely-footnote-marker"></marker>他们从内部开始发展，最终向外扩展到用户体验层面。但这并不是用户所经历的途径。</font></p>
<p><font size="2"><a href="http://www.adaptivepath.com/blog/wp-content/uploads/2009/02/oi_model_outward.jpg"><img height="300" width="300" class="alignnone size-medium wp-image-2358" title="oi_model_outward" src="http://www.adaptivepath.com/blog/wp-content/uploads/2009/02/oi_model_outward-300x300.jpg" alt="oi_model_outward"></a></font></p>
<p><font size="2">实际上，用户只看到这个：用户界面。<br>
</font></p>
<p><font size="2"><a href="http://www.adaptivepath.com/blog/wp-content/uploads/2009/02/oi_model_just_ui.jpg"><img height="300" width="300" class="alignnone size-medium wp-image-2355" title="oi_model_just_ui" src="http://www.adaptivepath.com/blog/wp-content/uploads/2009/02/oi_model_just_ui-300x300.jpg" alt="oi_model_just_ui"></a></font></p>
<p><font size="2">从用户的视角来看，<span style="background-color: rgb(255, 255, 255);">价值就在于他们在产品或服务中的体验。其他一切，实际上对用户来说都是个不可知的。</span><br>
</font></p>
<p><font size="2"><a href="http://www.adaptivepath.com/blog/wp-content/uploads/2009/02/oi_model_magic.jpg"><img height="300" width="300" class="alignnone size-medium wp-image-2356" title="oi_model_magic" src="http://www.adaptivepath.com/blog/wp-content/uploads/2009/02/oi_model_magic-300x300.jpg" alt="oi_model_magic"></a></font></p>
<p><font size="2"><span style="background-color: rgb(255, 255, 255);">要想创造能与用户产生共鸣的价值，企业需要由外而内的开展工作。</span><br>
</font></p>
<p><font size="2"><a href="http://www.adaptivepath.com/blog/wp-content/uploads/2009/02/oi_model_inward.jpg"><img height="300" width="300" class="alignnone size-medium wp-image-2357" title="oi_model_inward" src="http://www.adaptivepath.com/blog/wp-content/uploads/2009/02/oi_model_inward-300x300.jpg" alt="oi_model_inward"></a></font></p>
<p><font size="2"><span style="background-color: rgb(255, 255, 255);">我们需要站在用户的视角来设计和传递价值；而不应该是从成本控制的角度。<gdoc:callout calloutshowfull="true" calloutclosed="false" calloutmarkerid="z.oi" callouttype="footnote" class="writely-callout writely-callout-data google_footnote" name="gdoccallout"></gdoc:callout><marker style="display: inline-block;" class="writely-footnote-marker"> </marker>削减流程只会导致平庸。 站在用户的视角去规划，这样才能创造出独一无二的</span><a style="background-color: rgb(255, 255, 255);" title="系统的" href="http://www.adaptivepath.com/blog/2007/01/26/the-target-pill-bottle-isnt-a-bottle-its-a-system/">系统</a><a style="background-color: rgb(255, 255, 255);" title="解决系统" href="http://www.adaptivepath.com/blog/2007/01/26/the-target-pill-bottle-isnt-a-bottle-its-a-system/">化解决方案</a><span style="background-color: rgb(255, 255, 255);"> 。</span><br>
</font></p>
<p><font size="2"><span style="background-color: rgb(255, 255, 255);">站在用户视角进行设计的一种简单方法</span><strike style="background-color: rgb(255, 255, 255);"></strike><span style="background-color: rgb(255, 255, 255);">就是花时间进入他们的世界，以他们可能会体验到的方式去设计解决方案。然后，转而关注团队自身的力量能如何去支持这些体验。</span><br>
</font></p>
<p><font size="2"><span style="background-color: rgb(255, 255, 255);">nForm的Yvonne Shek发明了一个用于由外而内进行思考的好工具</span><a style="background-color: rgb(255, 255, 255);" href="http://nform.ca/blog/2008/04/swimlanes-more-information-and-1">swimlanes tool.</a><span style="background-color: rgb(255, 255, 255);">大体想法是，为解决方案创建一个新的使用场景，然后将该场景的任务流映射回相关的用户界面、技术以及企业上。</span><br>
</font></p>
<p><font size="2"><a href="http://nform.ca/blog/images/Swimlane_example2.gif"><img height="200" width="500" class="alignnone size-full wp-image-2359" title="swimlanes" src="http://www.adaptivepath.com/blog/wp-content/uploads/2009/02/swimlanes.jpg" alt="swimlanes"></a></font></p>
<p><font size="2"><span style="background-color: rgb(255, 255, 255);">另一种方法我会在我们四月举办的</span><a style="background-color: rgb(255, 255, 255);" href="http://www.adaptivepath.com/events/2009/apr/">Good Design Faster</a><span style="background-color: rgb(255, 255, 255);"> 工作坊里分享给大家：快速创造大量新的用户价值，拥有各种学科背景成员在一起团队协作寻找出综合全面的解决方案，然后迅速将这些方案付诸原型从而能即时进行用户评估。</span><gdoc:callout calloutshowfull="true" calloutclosed="false" calloutmarkerid="zq.l" callouttype="footnote" class="writely-callout writely-callout-data google_footnote" name="gdoccallout"><span style="background-color: rgb(255, 255, 255);">并非快速创造价值，而是为了价值而思考，提出多种想法，然后通过团队协作提出可尝试的解决方案，最后变为原型，即时通过用户进行原型的评估。</span></gdoc:callout><br>
</font></p>
<p><font size="2"><a href="http://www.adaptivepath.com/events/2009/apr/"><img height="242" width="500" class="alignnone" title="interactive prototype" src="http://www.adaptivepath.com/events/2009/apr/images/gdf_interactive_prototype.jpg"></a></font></p>
<p style="background-color: rgb(255, 255, 255);"><font size="2">由外自内的设计使得组织中的每个人都能关注在那个最终唯一影响用户的事情上-----你的最终交付物所带来的体验。在这种最终视角上，团队成员就能够做出明智的决定来极大的影响最终的产品和服务。</font></p>
<p><font size="2"><br>
</font></p> 
		
		<br/><b>类别：</b><a href="http://hi.baidu.com/lanx1983/blog/category/%D3%C3%BB%A7%CC%E5%D1%E9">用户体验</a>&nbsp;<a href="http://hi.baidu.com/lanx1983/blog/item/e6a76ff430619edef3d3850c.html#comment">查看评论</a>]]></description>
        <pubDate>2009-02-26  10:24</pubDate>
        <category><![CDATA[用户体验]]></category>
        <author><![CDATA[lanx1983]]></author>
		<guid>http://hi.baidu.com/lanx1983/blog/item/e6a76ff430619edef3d3850c.html</guid>
</item>

<item>
        <title><![CDATA[（翻译）发布网站改版时的3要3不要]]></title>
        <link><![CDATA[http://hi.baidu.com/lanx1983/blog/item/ed8cc95468cfe55fd009065c.html]]></link>
        <description><![CDATA[
		
		<br>
<div style="margin-left: 16px;">
<p><font size="2" color="#808080">作者:</font><font size="2"><a href="http://www.adaptivepath.com/aboutus/roland.php" style="color: rgb(72, 96, 172);">Roland Smart</a></font><br>
<font size="2" color="#808080"> 原文链接:<a target="_blank" rel="bookmark" href="http://www.adaptivepath.com/ideas/newsletter/archives/121708/index.php" title="Pricing Tables: Examples And Best Practices">http://www.adaptivepath.com/ideas/newsletter/archives/121708/index.php</a><br>
译者:</font><font size="2" color="#808080"><a target="_blank" href="http://ucdchina.com/topic/59">UCD翻译小组</a>, <a href="../../lanx1983" target="_blank">Lanx</a></font><font size="2"><strong><font color="#808080"><br>
</font></strong><font color="#808080">Roland Smart</font></font><font size="2"><font color="#808080"> 版权所有(Arti<font color="#808080">cle copyright by </font></font><font color="#808080">Roland Smart</font></font><font size="2" color="#808080">)</font></p>
<p>在过去的几个月里，总是接二连三的有文章针对网站改版发表评论，诸如说：&ldquo;<a title="好" href="http://www.signonsandiego.com/uniontrib/20081019/news_1b19yahoo.html">好</a> &rdquo;，&ldquo;<a title="差" href="http://online.wsj.com/public/article/SB115759058710755893-ywLLcQH69tcpMJEph_K5usdRZfU_20070906.html">差</a> &rdquo;，&ldquo;<a title="丑陋" href="http://www.huffingtonpost.com/2008/06/17/firefox-3-launch-crashes_n_107662.html">丑陋</a> &rdquo;之类的。因为我们在Adaptive Path参与了好几<span style="background-color: rgb(255, 255, 255);">个</span>网站的改版，所以我格外关注这些文章。作为市场工作人员，我有时会和客户一起来对一个网站进行改版，因此，我特别关注那些指导改版的通告，准备及跟进的方 法。提前将信息发给那些可能受影响的用户，同时开通接收反馈信息的通道，被认为是改版发布之前很重要的工作，但事实上经常收效甚微。因为发布改版要处理各 种各样的事情，压力巨大，以致用户测试和发布计划总是会有疏漏。在项目规划初期，发布的计划和策略常常被忽视或小看。我想通过对发布策略深入分析来提醒大 家认识到计划的重要性。在此，我列出3个方法来帮助你计划你的下一次发布。</p>
<p><font size="3"><strong>合理改版的价值所在</strong></font></p>
<p><font size="4"><font size="2">很多人并不喜欢改变，因此，改版必定是件冒点风险的事情。</font></font><span style="background-color: rgb(255, 255, 255);">只知一味的出钱，出时间，你将会看到钱和时间都被浪费在执行改版的过程中但却收效很差（更不用提期间遇到的麻烦事），你会发现，执行之前在计划上做点投资是很有意义的。俗话说，<span style="background-color: rgb(255, 255, 255);"> &ldquo;磨刀不误砍柴工&rdquo; 。换言之，在事前计划上下工夫比在事后改进上下工夫更重要。</span></span></p>
<p>制定一个合理的计划并贯彻到底，这一小铺垫能让整个结果全然不同。你努力尝试创造最出色的改版方案，并希望它在发布时能毫不走样。<span style="background-color: rgb(255, 255, 255);">(如果结果不像预期的那样)你整个团队的成就感也就会受到影响，因为他们的成果将被那些无法预见的批评洪潮所冲毁。</span> 批评声是在意料之中的，<span style="background-color: rgb(255, 255, 255);">你如何去应对它们就决定了你的团队最终是否被认可。</span>很重要的一点是：你必须从长远的角度去考虑改版，你需要去计划如何应对可能发生的情况，并投入额外的精力以应对用户的第一反应所掀<span style="background-color: rgb(255, 255, 255);">起的浪潮。如果一切进行的顺利，那你就能开香槟庆祝了！</span></p>
<p style="background-color: rgb(255, 255, 255);">最终，改版的成效会在商业绩效中体现出来。许多公司对比改版前后的用户流失/转换率来跟踪随着改版所产生的用户流失和转换情况。</p>
<font size="4"><strong>3要(达到目标的方法）</strong></font>
<p style="background-color: rgb(255, 255, 255);"> </p>
<p style="background-color: rgb(255, 255, 255);">准备的充分程度取决于改版的重要程度。大规模的改版经常会<span style="background-color: rgb(255, 255, 255);">向网站社区传递错误的信息，</span>因为它们很难随时获取用户的反馈。它们很少在网站原有的交互设计基础上进行改版，可能导致现有的结构崩溃，还往往会引发更大的问题。换句话说，我希望在可能的前提下采取轻量级的措施，因为这使你能够让改版循序渐进，以保持你们和网站社区的紧密联系。</p>
<p style="background-color: rgb(255, 255, 255);">这里有3种典型的方式供你在进行改版时参考：</p>
<ul>
    <li style="margin: 0pt 0pt 0pt 2px; padding: 0pt 0pt 0pt 12px; list-style-position: outside; list-style-type: none;"><font size="3"><strong>慢热法：</strong></font> 这很类似于&ldquo;早发现，勤改进&rdquo;的方法，包括从各种迹象中发现线索，这样你就可以顺藤摸瓜找出关键问题。</li>
    <li style="margin: 0pt 0pt 0pt 2px; padding: 0pt 0pt 0pt 12px; list-style-position: outside; list-style-type: none;">舆论效果：<span style="background-color: rgb(255, 255, 255);">由于你可以与用户在一系列交流的基础上形成对话</span><span style="background-color: rgb(255, 255, 255);">，因此有助于与用户建立沟通关系。</span>这种方法在传统媒体形式上最为奏效<span style="background-color: rgb(255, 255, 255);">，</span><span style="background-color: rgb(204, 204, 204);"><span style="background-color: rgb(255, 255, 255);">撰稿人为了写一个长篇故事往往需要长期访谈以收集资料。如果你有一个</span></span>很好的理由，你还可以用这种方法来获取独家信息。显然，可以通过很多你自己的渠道来获取独家消息，只要遵守你与用户之间的承诺。<br>
    实施：改版可以按照时间倒计的方式一点点发布，在此之前明确预告你的网站用户。<span style="background-color: rgb(255, 255, 255);">即便改版的力度很小，你也要提前通告以防他们反应过激。</span>宣扬改版中的成功，粉饰不出彩的部分。</li>
    <li style="margin: 0pt 0pt 0pt 2px; padding: 0pt 0pt 0pt 12px; list-style-position: outside; list-style-type: none;"> </li>
    <li style="margin: 0pt 0pt 0pt 2px; padding: 0pt 0pt 0pt 12px; list-style-position: outside; list-style-type: none;"> </li>
    <li style="margin: 0pt 0pt 0pt 2px; padding: 0pt 0pt 0pt 12px; list-style-position: outside; list-style-type: none;"><font size="3"><strong>测试法：</strong></font>这一方法能和&ldquo;慢热法&rdquo;相结合，抑或先行实施，而且往往要让现有的用户参与进来。<br>
    舆论效果：这种方法的好处是及时让你网站的志愿用户参与进来，以便在这一环节就能产生反馈。好消息是，志愿用户往往会比较乐于接受网站的改版，也就是说这 会得到比较多正面的反馈。同时，因为是测试版，即使有不足人们也不太会觉得是个什么大不了的问题（但也有例外，因为不同的网站，对于什么是测试版解释也不 同）。如果他们对测试版没有什么过激的反应，那你们就可以大规模的将用户迁移到改版后的网站上了。这样，就不太容易捅出什么大篓子。<br>
    实施：当让你网站的志愿用户试用测试版的同时，就应该考虑从中获得一些有用的反馈。它可以帮助你收集最有用的反馈，包括对策和/或说明。当你做一个网站时，有这样一个忠实的智囊团是很重要的。</li>
    <li style="margin: 0pt 0pt 0pt 2px; padding: 0pt 0pt 0pt 12px; list-style-position: outside; list-style-type: none;"><br>
    <font size="3"><strong>上线：</strong></font>很多人将它看作为发布，可我认为它只是发布的一种戏剧性的表示方式。虽然这并不是什么秘诀，<span style="background-color: rgb(255, 255, 255);">但这种做法要求你在改版时不透露消息以积攒爆发力。以致在上线后</span>能非常有效的引发评论，加速哗变。这种方式特别适用于提供各个独立的服务或内容的网站，你的用户群体可以接受这种改变。尽管这种方法我们还没有用在改版发布或新网站发布上，而只用在了 <a target="_blank" href="http://www.adaptivepath.com/aurora">Aurora Concept Video</a> 的发布上。<br>
    舆论效果：在这种情况下更容易爆出独家新闻，特别是在你和媒体已经有一个良好合作关系的情况下有的放矢。<span style="background-color: rgb(255, 255, 255);">封锁消息可能</span>是必需的，但小心一旦&ldquo;泄露&rdquo; ，可能损害你与媒体之间的关系。显然，服务的知名度越大，这种方法的效果就越好。</li>
    <li style="margin: 0pt 0pt 0pt 2px; padding: 0pt 0pt 0pt 12px; list-style-position: outside; list-style-type: none;">实施：倒计时的办法在这种情况下行之有效，但在你还没有做任何市场调研或产品测试的前提下务必做好面对糟糕的结局心理准备。这个方法有一定风险，但如果你计划周详，他的确能摆脱一些障碍。回想一下<a target="_blank" style="color: rgb(72, 96, 172);" href="http://news.cnet.com/8301-10784_3-9970628-7.html">Firefox 3</a>的发布导致了他们的服务瘫痪，但仍然创造了一项世界纪录，迎来了胜利的曙光。</li>
</ul>
<p><font size="4"><strong>3不要（以及一些注意事项）</strong></font></p>
<p>我引用了一些例子介绍拥有活跃社区的公司由于改版页面或网站总会受到影响。今年的早些时候，Adaptive Path参与改版的就是这样一个拥有活跃社区的网站───Myspace。当一个网站拥有社区，你总能发现在改版之际网站会提供社区用户一些试用的机会。 在听取这些用户意见的同时有一些事项是必须要注意的：</p>
<ul>
    <li style="margin: 0pt 0pt 0pt 2px; padding: 0pt 0pt 0pt 12px; list-style-position: outside; list-style-type: none;">记住，这些用户是自愿参与的用户，他们并不能代表网站的所有用户。</li>
    <li style="margin: 0pt 0pt 0pt 2px; padding: 0pt 0pt 0pt 12px; list-style-position: outside; list-style-type: none;">事实上，因为这些用户总是十分热心地参与，所以他们往往会提供比较正面的反馈。</li>
    <li style="margin: 0pt 0pt 0pt 2px; padding: 0pt 0pt 0pt 12px; list-style-position: outside; list-style-type: none;">将这些反馈信息公布出来，以便所有参与或未参与试用的用户都能看到。</li>
    <li style="margin: 0pt 0pt 0pt 2px; padding: 0pt 0pt 0pt 12px; list-style-position: outside; list-style-type: none;">采取某种方式确保所有反馈都能被确认并给与合理的答复。</li>
    <li style="margin: 0pt 0pt 0pt 2px; padding: 0pt 0pt 0pt 12px; list-style-position: outside; list-style-type: none;">收集常见问题并通过简洁明了的方式给以答复，以体现你网站的品牌形象的一致性。</li>
    <li style="margin: 0pt 0pt 0pt 2px; padding: 0pt 0pt 0pt 12px; list-style-position: outside; list-style-type: none;">要有耐心，直到新出现的问题越来越少。</li>
</ul>
<p>但要注意！你很可能在听取了所有反馈之后，发现无法在它们中间找平衡，在改版的过程中一再纠结。或许Facebook将以上这些问题都解决的很好，甚至还 进行了大规模的测试以确保改版的结果是切实可行的。让我们假设改版对所有社区用户来说都是有利的。但是仍然很难避免这样的问题，当用户有一天登录 Facebook页面时，发现所有东西都变了。</p>
<p>有时候，改版本身对此无能为力。那我们该如何应对？</p>
<ul>
    <li style="margin: 0pt 0pt 0pt 2px; padding: 0pt 0pt 0pt 12px; list-style-position: outside; list-style-type: none;"><font size="3"><strong>不要变的太快：</strong></font>避免突然性地从小规模改版测试转变到大规模的全站改版。光是在页面顶端有一个<span style="background-color: rgb(255, 255, 255);">提示栏招募用户参与测试版是</span>不够的。给用户充足的时间让他们意识到改版的进程。有些人每天都登录网站，而有些人则只是一个月登录一次甚至更少。这意味着可能需要一段时间的让他们获知这些信息。</li>
    <li style="margin: 0pt 0pt 0pt 2px; padding: 0pt 0pt 0pt 12px; list-style-position: outside; list-style-type: none;"><strong><br>
    </strong></li>
    <li style="margin: 0pt 0pt 0pt 2px; padding: 0pt 0pt 0pt 12px; list-style-position: outside; list-style-type: none;"><font size="3"><strong>不要等到出现质疑声才出来解释你们在做什么：</strong></font>切记在第一时间让你的用户知道你们这样做的目的。我建议将这些信<span style="background-color: rgb(255, 255, 255);">息以倒计时的方式发布出</span>来。不见得是字面意义上上的倒计时，尽管那样也行。我指的是对信息有一个计划，以保证通过网站本身的发布渠道或其他媒体让这些信息深入人心。</li>
    <li style="margin: 0pt 0pt 0pt 2px; padding: 0pt 0pt 0pt 12px; list-style-position: outside; list-style-type: none;"><strong><br>
    </strong></li>
    <li style="margin: 0pt 0pt 0pt 2px; padding: 0pt 0pt 0pt 12px; list-style-position: outside; list-style-type: none;"><font size="3"><strong>不要面面俱到：</strong></font>调配好你手头的资源，确保将它们用在最有可能出彩的地方，而且一旦决定就要坚决执行。较小的改动是不太可能引起轰动的，所以不要总在那些小地方着力。</li>
</ul>
<p>在改版的过程中存在很多的方法和误区，但愿这些你都已经想到。通常情况下，一个最需要考虑的因素是最终用户────他们的体验如何，以及你如何能使他们获得最佳体验？</p>
</div> 
		
		<br/><b>类别：</b><a href="http://hi.baidu.com/lanx1983/blog/category/%D3%C3%BB%A7%CC%E5%D1%E9">用户体验</a>&nbsp;<a href="http://hi.baidu.com/lanx1983/blog/item/ed8cc95468cfe55fd009065c.html#comment">查看评论</a>]]></description>
        <pubDate>2008-12-24  15:12</pubDate>
        <category><![CDATA[用户体验]]></category>
        <author><![CDATA[lanx1983]]></author>
		<guid>http://hi.baidu.com/lanx1983/blog/item/ed8cc95468cfe55fd009065c.html</guid>
</item>

<item>
        <title><![CDATA[(翻译) 价目表:实例和最佳策略]]></title>
        <link><![CDATA[http://hi.baidu.com/lanx1983/blog/item/502098542b7d17193b29352e.html]]></link>
        <description><![CDATA[
		
		<font size="2" color="#808080">作者:Gy&#246;rgy Fekete <br>
原文链接:<a rel="bookmark" href="http://www.smashingmagazine.com/2008/10/13/pricing-tables-showcase-examples-and-best-practices/" title="Pricing Tables: Examples And Best Practices"> Pricing Tables: Examples And Best Practices</a><br>
译者:</font><font size="2" color="#808080"><a target="_blank" href="http://ucdchina.com/topic/59">UCD翻译小组</a>, <a href="http://hi.baidu.com/lanx1983" target="_blank">Lanx</a></font><font size="2"><strong><font color="#808080"><br>
</font></strong><font color="#808080">Gy&#246;rgy Fekete 版权所有(Article copyright by </font><font color="#808080">Gy&#246;rgy Fekete)</font></font>
<h1 class="title"> </h1>
<font size="2">对于任何提供产品或者服务的公司来说<strong>价目表</strong>都扮演着重要的角色。不论从它的设计还是可用性角度来讲，实现起来都是个挑战。价目表必须在力求简明的同时体现出不同产品或服务间特性的差异。</font>
<div class="topic">
<p><font size="2">价目表<strong>必须有助于用户做出自己的最佳选择</strong>。公司应该精心考量他们的系列商品，挑选商品中最具竞争力的特性展现在价目表上。我们应该只 给用户呈现他们会感兴趣的东西：可选的特性、项目和价格。展示的原则就是:为了避免用户在比对商品和从中选出最优方案的过程中遇到困难，务必去掉价目表上 任何的非必要元素，从而减少流失潜在顾客的机率。</font></p>
<p><font size="2">一旦你确定了商品的最主要特点,继续深入为那些关注某项特定指标的用户创建一个更为详细的功能列表。用户需要知道自己把钱花在什么样的商品上，而这个商品到底包含哪些重要的标准。</font></p>
<p><font size="2">为了给如何设计和展现价目表打下一个良好的基础，让我们一起来看看别的设计师的一些作品，然后按照下列标准来分析它们：</font></p>
<ul>
    <li><font size="2"><strong>设计:</strong>色彩、风格、字体、图标。 </font></li>
    <li><font size="2"><strong>可用性:</strong>在CSS和JavaScript无法成功加载的情况下它是否还可用? </font></li>
</ul>
<p><font size="2"><strong>最佳策略和方针</strong></font></p>
<p><font size="2">设计价目表是个讲究技巧的工作。它要求设计师将信息清晰准确地传达出来。尽可能地将产品的特性直观地展现给用户以使他作出最满意的选择。<br>
</font></p>
<p><font size="2"><strong>1.传达的恰到好处</strong></font></p>
<p><font size="2">我们想当然的会以为特性描述面面俱到的列表能够为潜在用户构建起良好的商品印象。而实际上，你给出的信息越多，要求用户消化吸收的也就越多。</font></p>
<p><font size="2"><a href="http://www.typepad.com/pricing/">TypePad</a> (如下截屏)为用户提供了冗长的价目表。尽管它提供了详尽的信息使得用户能够对比出商品之间的差异，但是用户根本无法一目了然，他们不得不记住哪一列对应 到哪一个商品。此外，尽管商品名称在列表底部尚有显示，但价格却只在列表开头出现。因此用户在浏览到表格下方的时候不得已还得重新滚动到列表开头查看商品 价格。</font></p>
<p class="showcase"><font size="2">
<div forimg="1">
<div align="left" forimg="1"><a target="_blank" href="http://www.typepad.com/pricing/"><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/eee9e61f99c75b78f724e4fd.jpg"></a></div>
</div>
</font></p>
<p> </p>
<p><font size="2">相比之下<a href="http://www.conceptshare.com/signup">ConceptShare</a>就是个简明易用的典型。注意：列表第四行合并了两项(用户和评审者)，从而避免不必要的第五行出现。这是个美观且信息充足的价目表。</font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/77bca47e834f55230dd7dafe.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2">重复一遍,关键在于你的用户能清楚的知道各个商品之间的差异。传达的信息不多不少，恰到好处。 假设一个潜在用户来到你的商店并希望知道两个商品间的差异，你肯定不会首先向他介绍它们彼此类似的特性，不是吗？告诉用户他们想知道的，他们会感谢你的。 同时也引出了我想说的第二点。<br>
</font></p>
<p><font size="2"><strong>2.传递不同点,而不是相似点</strong></font></p>
<p><font size="2">不要关注于展现备选商品的相似点,而要<strong>传达出它们之间的不用</strong>。在视觉效果上区分出备选商品的相同特性和不同特性是个好办法。为了做到这点，你可以将区别较大的特性放在列表的顶部而相同特性放在底部。 </font></p>
<p><font size="2">看看<a href="http://www.etribes.com/pricing.html">eTribes.com</a> 的价目表(以下截屏)。这样的设计有效地传达了商品的不同点及共同点。所选的图标也在符合整体设计风格的同时有助于用户理解商品的各项特性，有效且友好。</font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/1f5da611d4c38065cb80c4ff.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><strong>3.突出商品价格</strong></font></p>
<p><font size="2">当用户访问产品或服务网站时，他们最先想了解的就是价格问题。而忽视对价格信息的设计是B2B和B2C网站存在的首要通病。要尽量确保你们所显示的商品价格能迅速和清晰地被用户看到。</font></p>
<p><font size="2">字体的选择往往取决于所提供的产品或服务的类型，同时还要遵循整个设计的风格一致性。在很多价目表中商品的价格，名称，特点会被设计的更大<strong>以使其突出</strong>。作为设计师，你要确保价格在视觉上和逻辑上都有适当的重要性。<br>
</font></p>
<p> </p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/33656fcb2f97c204bf09e6f8.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/13ac858fb13e38e1503d92f9.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2">以价格对商品进行排序也是个好办法，从高到低或从低到高。因为用户会以<strong>&quot;F&quot;形视线</strong>浏览网站，一些设计者将最廉价的商品放在列表左侧，以使用户第一眼就能看到。设计者最关注的应该就是确保用户看到最吸引人的信息。<br>
</font></p>
<p><font size="2"><strong>4.精简视觉元素</strong></font></p>
<p><font size="2">很遗憾，在我们展示的大多数案例中都存在一个同样的<strong>缺点</strong>：他们过于频繁和不恰当的使用<strong>过分鲜艳的视觉元素</strong>。设计师希望价目表尽可能的吸引人一些，看起来，大量绿勾勾和红叉叉似乎有一些帮助。</font></p>
<p><font size="2">可一旦这些图标布满整个列表，就很容易将用户的目光吸引到图标上来，从而阻碍用户阅读商品之间的具体差异。<a href="http://beanstalkapp.com/pricing">Beanstalk</a> 在避开视觉元素干扰的情况下有效地传达了他们的信息。用浅色的圆点表示这一产品支持某项特性，不过分抢眼又能传达好信息。<br>
</font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/e85b25ad9e3c46124a36d6fa.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://www.planhq.com/signup">Planhq.com</a>只用了绿色的勾选框而没用红叉号。实际上，红叉号的确不是必须的，既然如此，就该果断的将它排除在外。<br>
</font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/4dd82d1258ce804af919b8c5.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://goodbarry.com/free-trial">Goodbarry.com</a> 用颜色来强调列表中的关键细节。同时，请注意他们是如何运用字号大小来凸显推荐商品的。此外他们还很好的应用了绿色按钮来吸引用户体验他们的产品。<br>
</font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/525246666fc0393faa184cc5.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2">精简视觉元素，<strong>避免视觉噪音</strong>。如果你确信那些图标不至于太过花哨，而且的确能给用户传达出有用的信息，那么就尽管使用它们。如果它只是个摆设那你还是不用为妙。<br>
</font></p>
<p><font size="2">每一个图标或缩略图的存在都必须有其明确的理由。例如，价目表比对的是一些实物产品，那么就有理由将它们的缩略图展示出来。<br>
</font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/525246666fc1393faa184cc6.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2">Almost all of the pricing tables we&rsquo;ve examined use different background colors to differentiate pricing plans. <strong>Designers use color theory and vivid colors</strong> to keep the visitor&rsquo;s focus on the specific plan that the company wants the most sales on. </font></p>
<p><font size="2">我们列举的所有价目表几乎都利用了不用的背景色来区分各个商品。<strong>设计者遵循色彩理论借助鲜亮的色彩</strong>将用户视线吸引到商家期望其热销的商品上。<br>
</font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/ab6dc162ecedd5c6e6113ac7.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><strong>5.生动地图解差异</strong></font></p>
<p><font size="2">一些设计师利用插画和生动的图像来<strong>清晰地展现商品的差异</strong>，诸如卡通形象之类的比拟手段经常被应用。例如，一个公司提供不同档次的问卷调查服务，你就可以用一个&ldquo;轻薄的&rdquo;工具箱代表精简版，用更大、更厚实的工具箱代表企业版。事实上，这是设计师的常用手法。<br>
</font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/abe534a45bfa39ec9152eec0.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/2e2f7138470da13896ddd8c1.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p class="showcase"><font size="2"><a target="_blank" href="http://litmusapp.com/pricing"><br>
</a>
<div align="left" forimg="1"><a target="_blank" href="http://litmusapp.com/pricing"><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/13ac858fb13738e1503d92c2.jpg"></a></div>
<br>
</font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/e7944fb5f03625d537d3cac3.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><strong>6.保持设计的一致性</strong></font></p>
<p><font size="2">网站上包括价目表在内的所有元素，都要保持统一的风格。<a href="http://www.bigfilebox.com/order">BigFilebox.com</a> 就在这点上犯了个错误。<br>
</font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/1cb69218d9a6eaaf4bedbccc.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2">第二个价目表的设计并没有遵循网站整体的设计风格。<br>
</font></p>
<font size="2"><strong>7.谨防你的用户流失</strong></font>
<p> </p>
<p><font size="2">对于任何提供产品或者服务的公司来说价目表都是影响销售业绩的关键。价目表就是展示商品的窗口，因此，要确保对于每个人来说它都是<strong>可使用，可访问的</strong>。</font></p>
<p><font size="2">价目表不应该只支持新版的浏览器,而是所有版本的浏览器和显示屏。公司可以创建包含各种特效的价目表，但是他们要确保在CSS和JavaScript无法被加载的情况下用户仍能够看明白价目表。以下是个符合上述情况的例子: </font></p>
<p> </p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/29be668beecd8909c9fc7acc.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2">以下是个过度应用JavaScript的案例，<a href="http://www.mailchimp.com/pricing.phtml">mailchimp.com</a>: </font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/9269b3efa1c5ad0dfcfa3ccd.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2">看到这个价目表时你要再点击一个&ldquo;查看详细信息...&rdquo;的链接才能用JavaScript展开那些隐藏在下面的信息。如果我们禁用浏览器上的 JavaScript，那这个链接就无法打开了。解决的办法之一就是在JavaScript被禁用的时候让这些信息显示出来。（译注：我倒是觉得会禁用 JS的人自然知道如何打开，难道他们不用任何的动态页面吗？GMail？Facebook？恐龙自己喜欢灭绝就不要阻止他们吧。）</font></p>
<p><font size="2"><strong>价目表案例库</strong></font></p>
<p><font size="2">横向排列还是纵向布局？作为设计师到底应该怎么选择？尽管当前主流的设计还是纵向分栏布局。但其实不管怎么显示，其目的都是为了清楚地传达出商品特色。<br>
</font></p>
<p><font size="2"><a href="http://www.actionthis.com/HowToBuy">ActionThis</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/7afe1bb3c6fb72bcd8335ace.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://www.squarespace.com/pricing/">Squarespace</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/5891a535a21ab290a71e12cf.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://tickspot.com/pricing/">Tickspot</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/73a5244ebcfea5d1d0c86ac8.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://litmusapp.com/pricing">Litmusapp.com</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/64a50dd833dc812e32fa1cc9.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://goodbarry.com/free-trial">Goodbarry.com</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/c590ac0e1a0864fc37d122cb.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://bigcartel.com/prices">Bigcartel.com</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/3385745916cbe4312934f0d5.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="https://www.blinksale.com/firms/new">Blinksale.com</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/abe534a45bc439ec9152eed6.jpg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://www.polldaddy.com/signup/">Polldaddy.com</a></font></p>
<p class="showcase"><font size="2">
<div forimg="1">
<div align="left" forimg="1"><font><a><img border="0" class="blogimg" small="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/878876d0f8e9a194a1ec9cd1.jpg"></a></font></div>
<font><a><br>
</a></font></div>
<a href="http://www.polldaddy.com/signup/"><br>
</a></font></p>
<p><font size="2"><a href="http://www.t-mobile.de/iphone/tarife/0,17181,21410-_,00.html">iPhone T-Mobile</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="http://www.t-mobile.de/iphone/tarife/0,17181,21410-_,00.html" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/64a50dd833d0812e32fa1cdd.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://www.fluxiom.com/pricing/">Fluxiom.com</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="http://www.fluxiom.com/pricing/" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/19b0553400e50055241f14de.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://www.dropsend.com/pricingsignup.php">Dropsend.com</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="http://www.dropsend.com/pricingsignup.php" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/9c5fe3367533492a0b55a9d8.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://www.brightbox.co.uk/">Brightbox.com</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="http://www.brightbox.co.uk/" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/2d9264cf9936af26f9dc61d8.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://www.spokeo.com/hr">Spokeo.com/hr</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="http://www.spokeo.com/hr" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/74fd8c2253fc3ce8d6cae2d9.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://movabletype.com/">Movabletype</a> (the pricing table is no longer available) </font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="http://movabletype.com/" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/cc970b3014d68882a8018eda.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://www.zendesk.com/signup">Zendesk</a> (the pricing table is no longer available) </font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="http://www.zendesk.com/signup" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/35bc67f053f16ab4a50f52da.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="https://buyiphone.apple.com/">iPhone</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="https://buyiphone.apple.com/" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/0d8bac9956f57c136f068ca4.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://www.getharvest.com/pricing">Harvest</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="http://www.getharvest.com/pricing" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/3090939417374d05d31b70a4.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://github.com/plans">Github.com</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="http://github.com/plans" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/35afaea16ae74290461064a5.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://www.fetchapp.com/">FetchApp.com</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="http://www.fetchapp.com/" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/a3bfad12630bf3d5c2fd78a6.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://www.rescuetime.com/upgrade">RescueTime</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="http://www.rescuetime.com/upgrade" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/35bc67f053fa6ab4a50f52a7.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://www.shutterstock.com/subscribe.mhtml">Shutterstock</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="http://www.shutterstock.com/subscribe.mhtml" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/452493d6df86ae3406088ba1.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://www.myintervals.com/pricing.php">Intervals</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="http://www.myintervals.com/pricing.php" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/f4974743be09820a9213c6a2.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="https://www.jigsaw.com/Register.xhtml?landingPage=index_jsp.10&amp;opCode=premium">Jigsaw</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="https://www.jigsaw.com/Register.xhtml?landingPage=index_jsp.10&amp;opCode=premium" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/68fb80ee87e30a322cf534a3.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="http://www.cozimo.com/pricing" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/2d4501ce0d2de522b700c8ad.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://dabbledb.com/pricing/">DabbleDB</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="http://dabbledb.com/pricing/" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/b5a0cdf9e6d55042242df2ae.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://www.activecollab.com/pricing/">activeCollab</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="http://www.activecollab.com/pricing/" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/ae423a73782b83078601b0af.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="https://projects.zoho.com/signupplan.na">Zoho Projects</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="https://projects.zoho.com/signupplan.na" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/ae3fe203948d986c3912bba8.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="https://www3.tivo.com/store/plans.do">TiVo</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="https://www3.tivo.com/store/plans.do" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/691edf13c8553838dd5401a8.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://www.apple.com/mobileme/pricing/">Apple MobileMe</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="http://www.apple.com/mobileme/pricing/" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/744062c6caedff009d163da9.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://www.analysis-one.com/pricing-plans.aspx">Analysis-one</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="http://www.analysis-one.com/pricing-plans.aspx" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/819718d7da20a6c6a144dfaa.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://www.proofhq.com/dashboard.php/signup/step1">ProofHQ</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="http://www.proofhq.com/dashboard.php/signup/step1" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/fb9ffd24459a981a4c088dab.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="https://www.getbackboard.com/users/pricing">Backboard</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="https://www.getbackboard.com/users/pricing" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/bf1addea2ccb07c8d539c9b4.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2"><a href="http://www.expressionengine.com/">ExpressionEngine</a></font></p>
<p class="showcase"><font size="2">
<div align="left" forimg="1"><a href="http://www.expressionengine.com/" target="_blank"></a><font><a><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/48003addfaca4dc28d1029b5.jpg" small="0" class="blogimg"></a></font></div>
<font><a><br>
</a></font></font></p>
<p><font size="2">你还可以从Christian Watson&rsquo;s 的案例库里找到更多的<a href="http://www.smileycat.com/design_elements/pricing_tables/" title="价目表">价目表</a>。<br>
</font></p>
<h3><font size="2">最佳策略:总结 </font></h3>
<ul>
    <li><font size="2">包括价目表在内的所有元素,都要与网站的整体设计风格保持统一。 </font></li>
    <li><font size="2">有节制地应用不同的背景颜色来区分不同的商品。</font></li>
    <li><font size="2">就像摄影师会将焦点聚集在他想表达的对象上,在价目表中也要尽可能地突出你想让别人关注的部分。</font></li>
    <li><font size="2">用不同的色彩和字号来区分主次商品。</font></li>
    <li><font size="2">遵循用户浏览网页的&quot;F&quot;形视线模式,将主要特性置于列表左上方。 </font></li>
    <li><font size="2">在设计价目表时有节制地使用CSS和JavaScript。</font></li>
    <li><font size="2">商品的价格要始终可见。  </font></li>
    <li><font size="2">假使你的产品特性太多以至于无法在一屏显示完,最好将商品的名称,价格和主要特点分别在列表的顶部和底部都显示出来。</font></li>
    <li><font size="2">必须明确表述商品价格所属的币种,因为像&quot;$&quot;这样的标志既可以代表美元,也可以代表加币和澳元。 </font></li>
</ul>
<p><font size="2"><em><br>
<strong>关于作者</strong></em></font></p>
<p><font size="2"><em>Gy&#246;rgy Fekete 是一位有五年web设计和开发经验的web开发人员。是罗马尼亚一家名为</em><em><a href="http://www.primalskill.com/" title="Primal Skill Ltd.">Primal Skill Ltd.</a> 的</em><em>Web设计开发工作室的创办人。他还会在博客上发表一些关于创业，商业，设计和开发等方面的文章：</em><em> <a href="http://blog.primalskill.com/">blog.primalskill.com</a>.</em><em>.<br>
</em></font></p>
</div> 
		
		<br/><b>类别：</b><a href="http://hi.baidu.com/lanx1983/blog/category/%D3%C3%BB%A7%CC%E5%D1%E9">用户体验</a>&nbsp;<a href="http://hi.baidu.com/lanx1983/blog/item/502098542b7d17193b29352e.html#comment">查看评论</a>]]></description>
        <pubDate>2008-10-18  17:02</pubDate>
        <category><![CDATA[用户体验]]></category>
        <author><![CDATA[lanx1983]]></author>
		<guid>http://hi.baidu.com/lanx1983/blog/item/502098542b7d17193b29352e.html</guid>
</item>

<item>
        <title><![CDATA[最好的奉献爱心的方式是捐款和献血]]></title>
        <link><![CDATA[http://hi.baidu.com/lanx1983/blog/item/c95af4fec8b8e6345d600836.html]]></link>
        <description><![CDATA[
		
		<font size="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   前天下午李大大打电话我说北京地震，反应迟钝的我说：米感觉啊。当天晚上才得知四川地区的震灾如此严重，心理难受，一直关注着，特别是看到那几个出事的学校，家长绝望地在操场上苦等孩子的消息。<br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    灾区急需血浆供应，尤其是<strong>AB型血很缺</strong>，当然A，B，O型人家也不嫌弃。</font><font size="2">昨天开始清华C楼就排满鲜血的长队，很多学生等了好几个小时都没能献上血，大家都太希望为灾区做点事情了。</font><br>
<p><font size="2">&nbsp;&nbsp;&nbsp;&nbsp;  <strong>捐款比捐物更解燃眉之急</strong>，因为，交通不畅通，捐赠品难以迅速到达；因为，捐赠品需要消毒、整理后才能运送，但是灾区的需要是迫在眉睫。所以，现金的力量更大！</font></p>
<font size="2">  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   李大大打算以我俩的名义向红十字捐款，不过中国红十字协会的网站已经瘫痪了，可见全国亿万民众都我们有着同样的想法。好在还有很多线下的方式可以捐款：<br>
<br>
中国红十字会总会救灾专用账号和热线：<br>
<br>
1、通过银行捐款<br>
<br>
开户单位：中国红十字会总会<br>
<br>
人民币开户行：中国工商银行北京分行东四南支行<br>
<br>
人民币账号：0200001009014413252<br>
<br>
外币开户行：中信银行酒仙桥支行<br>
<br>
外币账号：7112111482600000209<br>
<br>
2、通过邮局捐款<br>
<br>
收款人：中国红十字会总会<br>
<br>
地址：北京市东城区北新桥三条8号<br>
<br>
邮政编码：100007<br>
<br>
3、通过网上捐款<br>
<br>
登陆中国红十字会总会网站：redcross.org.cn点击进入&ldquo;网上捐赠&rdquo;栏目，按照提示操作即可。<br>
<br>
4、通过短信捐款<br>
<br>
中国移动、中国联通手机用户以及中国电信、中国网通小灵通用户均可编辑短信1或2，发送至1069999301，即向&ldquo;红十字救援行动&rdquo;捐款1元钱或2元钱。<br>
<br>
(通过银行、邮局和网上捐款在捐款时请注明捐款人姓名、通信地址、捐款意向如：四川地震捐款等信息，以便邮寄捐赠收据和感谢信)<br>
<br>
</font> 
		
		<br/><b>类别：</b><a href="http://hi.baidu.com/lanx1983/blog/category/%C4%AC%C8%CF%B7%D6%C0%E0">默认分类</a>&nbsp;<a href="http://hi.baidu.com/lanx1983/blog/item/c95af4fec8b8e6345d600836.html#comment">查看评论</a>]]></description>
        <pubDate>2008-05-14  12:25</pubDate>
        <category><![CDATA[默认分类]]></category>
        <author><![CDATA[lanx1983]]></author>
		<guid>http://hi.baidu.com/lanx1983/blog/item/c95af4fec8b8e6345d600836.html</guid>
</item>

<item>
        <title><![CDATA[转贴：西方国家这次为什么会如此团结？]]></title>
        <link><![CDATA[http://hi.baidu.com/lanx1983/blog/item/54d1de803c822dd29023d90b.html]]></link>
        <description><![CDATA[
		
		<div><font style="font-size: 16px;"><font size="2">=_=! 汗！我又热血了一把。<br>
<br>
<font size="2">原文：</font><br>
<font size="2"><br>
&nbsp;&nbsp;&nbsp;  西方国家这次为什么会如次的团结？欧洲的德国、法国，一般是不会冒着这样的风险得罪中国这个经济大国的。伊拉克战争时德国和法国都和中国站在一边，不支持美国对伊动武。为伊拉克而得罪美国，不符合他们的国家利益啊。法国10年前为了不得罪中国，终止了对台军售，损失了几十亿的收入。而为什么今天会冒着这么大的风险公然与中国为敌？难到就是为了和自己根本不相干的西藏和奥运？<br>
<br>
&nbsp;&nbsp;&nbsp;  而另一个值得让人思考的问题是，一向是西方老大的美国，为什么这一次这么低调？让英、法、德在前台唱主角？对于西藏，西方国家很清楚，再怎么闹，中国也不可能做出让步。对于奥运，他们也很清楚，就算西方国家没有一个领导人出席北京奥运会，中国也就是面子上过不去罢了，对中国有实质影响吗？没有。<br>
&nbsp;&nbsp;&nbsp;  所以，西藏只是一个幌子，奥运也只是一个幌子。那么他们到底想从中国得到什么？<br>
<br>
&nbsp;&nbsp;&nbsp;  西方国家正面临着10年来经济陷入衰退的危险，他们需要有一个有实力的国家为这次西方经济的衰退买单。不言而喻，他们不约而同的想到了中国。做为一个普通老百姓，我对国际经济没有什么研究，但2008年一开始我还是隐约到中国经济面临的危险，现在也就想起了温总理说过的一句话：2008年也许是中国经济最困难的一年。现在想起正在进行的这场闹剧，真的有点让人毛骨耸然了。美国不是低调，是很冷静，他们早已经不露声色的出招了：<br>
1、美元贬值。因为美元贬值，人民币升值，中国16000亿美元的外汇储备已经人间蒸发了3000亿美元，而且还在继续蒸发中。更要命的是，由于人民币升值，中国出口产品成本增加，沉重的打击中国的出口，许多企业面临倒闭的危险。因为中国企业的倒闭，西方国家生产企业就可以开始生产复苏。<br>
<br>
2、通过高油价以拖跨中国经济。中国经济的高速发展需要大量的进品原油，而西方国家则不断的提高石油储备，造成高油价一直持续，以增加中国经济建设的成本。这就是美国为什么要打伊拉克、打伊朗的原因：控制石油就是控制了经济命脉。<br>
<br>
3、足涨中国金融泡沫。人民币升值，大量热钱自然要涌入中国，造成中国高成本、高币值的经济泡沫。或许这就是为什么政府就算是背着千夫所指都绝不救市的原因，就是为了打击国际投机资本在中国的恶意圈钱行为，而另一方面却不得不面对成千上万痛不欲生的股民的唾骂而有可能造成  谏缁岫 吹奈Ｏ铡Ｏ衷诳戳耍 裁次鞑厥录&#8482;、抵制奥运都是不足为道的事。<br>
<br>
&nbsp;&nbsp;&nbsp;  所以，&ldquo;西藏&rdquo;和&ldquo;奥运&rdquo;只是西方国家绑架的两个&ldquo;人质&rdquo;，他们真正的目的不是西藏，也不是奥运，而是以此为要挟，要中国为他们的经济衰退买单。不买单：搞乱你，要死大家一起死。买单：坐下来谈，你答应我我就息事宁人！<br>
&nbsp;&nbsp;&nbsp;  中国政府的冷静是对的，死死抓住经济建设这个中心不动摇才是关键。经济如果一垮，那就什么都垮了。国民要冷静，要相互理解，不要给政府出难题。还是那句话：发展才是硬道理，压倒一切的是稳定。一个普通的中国人都能预料到，我相信政府能从容应对。我们要支持政府打赢这场表面上看起来是舆论战，而事实上是经济的战争。<br>
<br>
&nbsp;&nbsp;  我们需要更团结 希望大家奔走相告：<br>
1、多省油！多乘坐公共交通出行能坐车就不要开车，能开窗户就不要开空调。<br>
2、多省电！路灯不用就关掉，能用耳机就不要开音箱，家电不用就要把整个开关拔下来。又省电又安全希望政府把夜景工程的灯光就关掉。<br>
3、支持国货！能买到国货就不要买外国货，促进内需钱要给自己人赚。<br>
4、努力工作！多开发和制造更好的产品实业才是救国之本！<br>
5、尊重自己！尊重国人不要崇洋媚外！<br>
6、告诉台湾、西藏包括其他民族的青年为什么我们现在还这么痛苦&mdash;&mdash;别的国家看不起，因为我们的祖辈太喜欢窝里斗。<br>
7、告诉身边的每一个人，中国只有强大才会有更好的家，落后就要挨打挨骂！<br>
8、政府在进步，督促政府更快的进步，而不是推倒他，那样高兴的是美日，痛苦的是自己！<br>
<br>
</font></font></font></div> 
		
		<br/><b>类别：</b><a href="http://hi.baidu.com/lanx1983/blog/category/%D7%AA%D4%D8%CC%FB%D7%D3">转载帖子</a>&nbsp;<a href="http://hi.baidu.com/lanx1983/blog/item/54d1de803c822dd29023d90b.html#comment">查看评论</a>]]></description>
        <pubDate>2008-04-21  17:03</pubDate>
        <category><![CDATA[转载帖子]]></category>
        <author><![CDATA[lanx1983]]></author>
		<guid>http://hi.baidu.com/lanx1983/blog/item/54d1de803c822dd29023d90b.html</guid>
</item>

<item>
        <title><![CDATA[（翻译）魔术墨水——信息化软件和图形界面 part5]]></title>
        <link><![CDATA[http://hi.baidu.com/lanx1983/blog/item/eb8b56a795686791d043586b.html]]></link>
        <description><![CDATA[
		
		<p align="left" class="MsoNormal" style="text-align: left;">原文：<a href="http://worrydream.com/MagicInk/" target="_blank">Magic Ink - Information Software and the Graphical Interface</a> <br>
作者：<span style="font-size: 9pt; color: black;"><span> Bret Victor</span></span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;"><span><br>
</span></span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><strong><span style="font-size: 9pt; color: black;">策划信息化软件革命</span></strong></p>
<p align="left" class="MsoNormal" style="text-align: left; text-indent: 21pt;"><span style="font-size: 9pt; color: black;"><span> </span>机器的大规模生产始于在20世纪初期。 Henry Ford的装配流水线方式推广到了整个制造业，大幅降低生产成本，使一般人也买得起各种机器。但是许多产品并不容易操作。商人给出要求，工程师加以实施，设计环节是不存在的。几十年后，一个新的行业出现并填补了空白──工业设计。</span></p>
<p align="left" class="MsoNormal" style="text-align: left; text-indent: 21pt;"><span style="font-size: 9pt; color: black;"><span> </span>继机器化大生产后的下一个革命便是软件。20世纪70年代末，个人电脑开始崛起，像操作其他机器一样──打字机，计算器，归档器，游戏机──当它获得正确的指示，便开始运行。如今，制造一台&ldquo;机器&rdquo;变成了将指令刻录进一张光盘，生产成本大幅度下降。但大量这样的软件都不容易操作。</span><span style="font-size: 9pt; color: black;">开发商给出要求，工程师加以实施，设计环节还是不存在的。几十年后，一个新的行业出现并填补了空白──交互设计。</span></p>
<p align="left" class="MsoNormal" style="text-align: left; text-indent: 21pt;"><span style="font-size: 9pt; color: black;"><span> </span>15 世纪前，书籍是弥足珍贵，极其难得的，每本都需要手抄复制。一本书的成本可能能买下一个农场。书籍也是精美的艺术作品，字体形态优美，具有极高的装饰韵味。15世纪40年代，约翰古登堡的活字印刷技术将书籍生产量提高了1000倍，使书籍首次成为一般人负担得起的东西</span><span style="font-size: 9pt; color: black;">。幸运的是，</span><span style="font-size: 9pt; color: black;">古登堡的活字印刷术</span><span style="font-size: 9pt; color: black;">和当代打印机都很专注艺术形式，并一直地保留高质量的手写体。由于各种</span><span style="font-size: 9pt; color: black;">书籍的爆炸性增长，以及书本的比例增大（海报和报纸的前身），创造了该媒介对艺术家的巨大的需求，其中许多人从旧的媒介中过渡过来。艺术史上翻开了崭新的一页──图形设计。<span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;     </span></span></span></p>
<p align="left" class="MsoNormal" style="text-align: left; text-indent: 21pt;"><span style="font-size: 9pt; color: black;"><span> </span>大规模生产的下一个革命是Web。不幸的是，不同于早期的打印机，早期的Web技术人员并不关心他们前辈在艺术上得造诣，但他们所从事的研究最终演变得近似于印刷页在计算机屏幕上呈现的效果。现在，发行变成了通过网线传输比特。爆炸性增长的网站</span><span style="font-size: 9pt; color: black;">创造了该媒介对艺术家的巨大的需求，其中许多人从旧的媒介中过渡过来。艺术史上翻开了崭新的一页──网页设计。</span></p>
<p align="left" class="MsoNormal" style="text-align: left; text-indent: 21pt;"><span style="font-size: 9pt; color: black;"><span> </span>从这些并行的演化中产生了从事机械交互（传统软件）的设计师及从事静态页面布局（常规网站）的设计师。从这个角度讲，两者的交融并进是可以预料的。新兴的&ldquo;交互式Web&rdquo;使页面上包含了一个可笑的混合型机械隐喻──通过虚拟机器生成虚拟纸面上的印刷品。信息被困在了交互机制的后面，并以静态页面的形式展现出来──这真是最差劲的混合体了。</span></p>
<p align="left" class="MsoNormal" style="text-align: left; text-indent: 21pt;"><span style="font-size: 9pt; color: black;"><span> </span>好的情境关联信息图形既不是交互的也不是静态的，既不是机械性质的，也不是印刷物性质的。好的情境关联信息图形还没被设计出来。固有的观念否定了它存在的可能性。</span></p>
<p align="left" class="MsoNormal" style="text-align: left; text-indent: 21pt;"><span style="font-size: 9pt; color: rgb(153, 51, 0);"> </span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><strong><span style="font-size: 9pt;">谁能创造出信息化软件？怎么创造？</span></strong></p>
<p align="left" class="MsoNormal" style="text-align: left;"><strong><span style="font-size: 9pt;">第一步</span></strong><span style="font-size: 9pt;">，是对设计的需求达成广泛<span style="color: red;">共识</span>。信息化软件不是一台机器，而是一个视觉交流的媒介──在这一点上我们应该对所有发行者及发行部门制定统一的标准。人们不断的为丑陋而笨重的软件买单，但却要求书籍，报纸，杂志的内容翔实，设计专业化。更具有讽刺意味的是──所有软件的小册子，平面广告，手册等也都设计得很精美。虽然技术上的限制曾经作为软件设计粗劣的借口，但这种对于媒介的双重化标准是有害的，</span><span style="font-size: 9pt;">应该被淘汰。它是阻碍改革的第一大障碍。如果没有消费需求，设计似乎总像是个只有投入没有回报的环节。</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><strong><span style="font-size: 9pt; color: black;">第二步</span></strong><span style="font-size: 9pt; color: black;">，寻找有视觉化沟通</span><span style="font-size: 9pt; color: red;">才华</span><span style="font-size: 9pt; color: black;">的人。目前，几乎所有从事软件设计的都是计算机学科的专家，由于他们从事技术工作使他们能够进入这个领域。这暗示了对潜在人才的巨大排斥──这样看来，图形设计师就只能开打印店了！我相信，软件设计理想的候选人是那些有其他媒介的信息图形设计经验的人。相信有众多的致力于商业图形，地图或连环画设计的艺术家，只要他们愿意，同样能在信息化软件的设计领域有所作为。近年来，出现了大量极富艺术价值的网站，它们大多出自具有视觉创造力的人之手，他们利用简单的图形软件来辅助设计。但由于成熟的软件被总是被看作是一个的拥有神秘技术的&ldquo;程序员&rdquo;的产物，令其他人才缺乏涉足这个行业的信心。</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><strong><span style="font-size: 9pt; color: black;">第三步</span></strong><span style="font-size: 9pt; color: black;">，将设计师的才华与</span><span style="font-size: 9pt; color: red;">技能</span><span style="font-size: 9pt; color: black;">相结合。后者可以通过教育和实践来获得，但若缺乏前者，即便设计师本人胸怀大志也很难入门──他们只能通过不断熏陶来积累一点艺术感知力。通过有效的教育能得到一些弥补：课堂，书籍和案例。</span><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;     </span></span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><strong><span style="font-size: 9pt; color: black;">第四步</span></strong><span style="font-size: 9pt; color: black;">，利用</span><span style="font-size: 9pt; color: red;">工具和平台</span><span style="font-size: 9pt; color: black;">作为设计师的才华和技能的补充。这两者在用法上有模糊的共性。我将工具定义为设计师已经能够掌握的交流工具，将平台定义为将会被应用的交流工具。这是对<span>Claude Shannon的通信模式的最好证明：</span></span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: rgb(153, 51, 0);">
<div align="left" forimg="1"><img border="0" class="blogimg" small="0" src="http://worrydream.com/MagicInk/p/platform_model.png"></div>
<br>
</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;"><br>
</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><strong><span style="font-size: 9pt; color: black;">第五步，</span></strong><span style="font-size: 9pt; color: black;">是创造一个</span><span style="font-size: 9pt; color: red;">环境</span><span style="font-size: 9pt; color: black;">──能让各种实验、改良、创想蓬勃发展。如同我们的地理环境，一个用于创新的环境很可能被短视的商业利益所污染。</span></p>
<p align="left" class="MsoNormal" style="text-align: left;">(未完待续）</p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: rgb(153, 51, 0);"> </span></p> 
		
		<br/><b>类别：</b><a href="http://hi.baidu.com/lanx1983/blog/category/%D3%C3%BB%A7%CC%E5%D1%E9">用户体验</a>&nbsp;<a href="http://hi.baidu.com/lanx1983/blog/item/eb8b56a795686791d043586b.html#comment">查看评论</a>]]></description>
        <pubDate>2008-03-04  12:14</pubDate>
        <category><![CDATA[用户体验]]></category>
        <author><![CDATA[lanx1983]]></author>
		<guid>http://hi.baidu.com/lanx1983/blog/item/eb8b56a795686791d043586b.html</guid>
</item>

<item>
        <title><![CDATA[（翻译）魔术墨水——信息化软件和图形界面 part4]]></title>
        <link><![CDATA[http://hi.baidu.com/lanx1983/blog/item/2e2f7138c08d3e2796ddd86b.html]]></link>
        <description><![CDATA[
		
		<p class="MsoNormal">原文：<a href="http://worrydream.com/MagicInk/" target="_blank">Magic Ink - Information Software and the Graphical Interface</a> <br>
作者：<span style="font-size: 9pt; color: black;"><span> Bret Victor</span></span></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;"><span><br>
</span></span></p>
<p class="MsoNormal"><strong><span style="font-size: 9pt; color: black;">交互性被认为是不利的</span></strong></p>
<p style="text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>Chris Crawford为交互定义了一个三个阶段的进程：</span><span style="font-size: 9pt; color: red;">获悉指令，判断含义，作出回应。</span><span style="font-size: 9pt; color: black;">对于操作型软件来说，交互是十分有必要的：用户通过查看所呈现的内容，判断并执行下一步的操作。软件进而执行用户的操作要求，显示更新的内容。能循环反馈并有效执行的交互就像是在同软件<span>&quot;说话&quot;，过程顺畅且迅速。它的操作体验无异于使用通常的物理工具。</span></span></p>
<p style="text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>而信息化软件则恰恰相反，它类似于我们平常生活中的&ldquo;阅读&rdquo;，而不是操作。它的目标是&ldquo;认知&rdquo;──构建一个意识上的模型。因此，用户需要聆听软件，思考它说了些什么…而手动操作则很少出现。手动操作存在的唯一理由就是它能够明确提供一些情境，使得软件能够在缺乏关联数据的初期积累更多信息。</span><span style="font-size: 9pt; color: red;">对信息化软件而言，所有的交互基本上都是围绕数据空间进行的。</span></p>
<p style="text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>例如，Amazon的数据空间是由其分类目录组成的。黄页中包含了所有企业名单;电影指南中包含所有上映时间和电影资料;机票预订中包含了所有机场的行线信息。在所有这些情境中，每一次的交互，包括点击鼠标，敲击键盘，搜索关键词和选择菜单，都是为了将用户的视线吸引到数据空间。简单来说，这就是导航。</span></p>
<p style="text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>Alan Cooper把在认知过程中的附加工作比作是使用工具时的额外负担──它无法直接到达目标。举例来说，给机车加油只是让它作为了汽车运行的动力，而并没有让车到达目的地──这才是最终目标。Coopper断言，软件导航只是个完成目标的中介。</span></p>
<p style="text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt;"><span> </span>关于导航，最重要的是要知道，几乎在所有情况下，他代表着纯粹地附加工作。或者至少很接近附加工作。除了在游戏里，用户目标就是成功的穿越障碍或迷宫来成功导航之外，在软件里，导航不能满足用户的目标&lsquo;需要或者期望，不必要的或困难的导航会成为用户沮丧的主要原因，实际上，在作者看来，糟糕的导航是任何应用软件或者系统──桌面的，基于Web的或者其他系统设计中的头号问题。 </span></p>
<p style="text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>如果所有的交互都只是导航，那导航就应该算做是头号软件问题，它另交互看起来糟透了。不过，与其他两种情境关联的来源相比，互动性还存在更为严重的问题，而不仅仅只是令人沮丧地浪费时间：<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;      </span></span></p>
<p style="margin-left: 57pt; text-indent: -18pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>·<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;      </span></span></span><span style="font-size: 9pt; color: black;">用户必须明确知道她想要什么才能要求获得什么。而那些提供历史数据和环境关联的软件可以主动为用户推导出潜在的相关信息，否则，用户自己不会有明确的概念去要求获得这些信息。纯粹的交互软件迫使用户提出明确需求。</span></p>
<p style="margin-left: 57pt; text-indent: -18pt;" class="MsoNormal"><span style="font-size: 9pt; color: black; text-transform: uppercase;"><span>·<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;      </span></span></span><span style="font-size: 9pt; color: black; text-transform: uppercase;">用户不得不清楚如何发问。也就是说，她必须学会操作一台机器。</span><span style="font-size: 9pt; color: black; text-transform: uppercase;"> Donald Norman提出</span><span style="font-size: 9pt; color: black; text-transform: uppercase;">的关于确定用户&ldquo;心理模型&rdquo;的观点在软件可用性领域已经得到普遍认可，而且被认为是一个核心的设计挑战。但是，</span><span style="font-size: 9pt; color: black; text-transform: uppercase;">Norman在当初提出这个概念主要针对的是</span><span style="font-size: 9pt; color: black; text-transform: uppercase;">机械设备领域。因此，它只适用于那些包含机械隐喻的软件，它们才需要确定用户的&ldquo;心理模型&rdquo;。而一个低交互性，非机械隐喻模式的信息图形能让用户和设计师从&ldquo;心理模型&rdquo;的束缚中解脱出来。</span></p>
<p style="margin-left: 57pt; text-indent: -18pt;" class="MsoNormal"><span style="font-size: 9pt; text-transform: uppercase;"><span>·<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;      </span></span></span><span style="font-size: 9pt; text-transform: uppercase;">导航意味着规则。导航只所以在软件中存在，是因为用户很容易迷失方向。导航越多，说明迷失的可能性越大。操作的规则越多，说明人们越容易操作出错。操作规则是人们害怕使用电脑的主要原因──条条框框越多的东西越容易出错。</span></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;      </span>此外，互动暴露了身体的劣势。手动比眼动要慢得多。 Licklider这个词形容花费数小时绘制图形而只需花几秒就能看完它们。这同样可以用来形容用户必须手动索取资料的状态──不能合理分配鼠标点击和眼睛查看的时间，她大部分时间都被用于操作航行而不是获取信息。此外，用户可能更愿意在用眼睛获取信息的同时用手干点别的，例如写字，吃东西或抚摸猫咪。每当软件占用用户的双手，都意味着其他本可以并行的事被打断。</span><span style="font-size: 9pt;">最后，越来越多的与电脑有关的由于重复性操作导致受伤的案例表明，不加选择的互动行为对身心都会产生伤害。</span></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;      </span>不幸的是，那些致力于电子产品人因工程的团体都将术语锁定为&ldquo;交互&rdquo;。对于信息化软件来说，真正的重点是情境关联，交互只不过是实现它的一个手段。</span><span style="font-size: 9pt;">特别是在只能通过鼠标笨拙地点击进行 &ldquo;输入&rdquo;时，交互应该只能被当作是最不得已才使用的手段。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;">可能会有设计者提出抗议，认为交互在实践中是不可避免的，甚至认为我的理想──无交互软件，只是无稽之谈。这只是因为该想法一直未得到重视和发展。我相信，随着发现更新的情境关联图表模式，探索更好的获取和利用信息环境及历史数据的手段，&ldquo;点击&rdquo;和&ldquo;拖拽&rdquo;这两个当前用于信息检索的典型手段将被认为是可笑的老一套。但是，由于学术界的倡导和商业公司的附和，&ldquo;交互&rdquo;仍会在未来持续存在一点时间。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"> </span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><strong><span style="font-size: 9pt; color: black;">减少交互</span></strong></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>当某个软件迫使用户进行交互，它就把自己判定为操作型软件。</span><span style="font-size: 9pt;">软件的外部模型通过对导航进行操作形成情境模型。但是，不同于真正的操作型软件，用户不关心这个外部模型──它只是为了最终看到相关信息的一种手段。</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>设计者的目标是让用户以尽可能少的操作塑造出情境模型。假设将图形设计，历史数据和环境关联等手段被抛在一边，他们就没有什么技术手段可以减少交互带来的负面影响了：</span></p>
<p align="left" style="margin-left: 21pt; text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;">*</span><span style="font-size: 9pt; color: red;">形象化操作</span><span style="font-size: 9pt; color: black;">能将情境模型应用于适当的信息集合中。</span></p>
<p align="left" style="margin-left: 21pt; text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;">*</span><span style="font-size: 9pt; color: red;">相关性引导</span><span style="font-size: 9pt; color: black;">能让用户确认模型，而无需建构模型。</span></p>
<p align="left" style="margin-left: 21pt; text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;">*</span><span style="font-size: 9pt; color: red;">紧凑的反馈循环</span><span style="font-size: 9pt; color: black;">能让用户无需太多操作便能接近结果。</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>形象化操作。命令行系统被批评为强迫用户来学习电脑的语言。现代</span><span style="font-size: 9pt; color: black;">的图形界面</span><span style="font-size: 9pt; color: black;">可能会更容易使用，但它相对前者在这方面没有太大的改进。</span><span style="font-size: 9pt; color: black;">图形界面</span><span style="font-size: 9pt; color: black;">语言是由菜单，按钮，以及确认框组成的，每一个控制元素都是非情境化的。用户要通过一个特定的的指令输入需求──它完全不同于任何人类语言，缺乏形象化的含义且很不自然。<span> </span></span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>打个比方，看这个男孩如何向别人&ldquo;演示和描述&rdquo;他的玩具：</span></p>
<div align="left" forimg="1"><img border="0" src="http://worrydream.com/MagicInk/p/mccloud.png" small="0" class="blogimg"></div>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;">话由于这个孩子的描述能力不强，他只能通过演示来传达复杂的概念。同样地，图形界面的发展并不完善，使得文字提示繁琐且晦涩，但软件的动态传递是理想的演示方式。用户可以点击某处的信息图形，说：&ldquo;就是这儿！&rdquo;，来获取该处的关联情境。 </span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>两个最根本的描述情境的条件便是&ldquo;时间&rdquo;与&ldquo;地点&rdquo;。几千年来，人们都以这两个条件为基础来绘制专门的信息图表。但仍有许多现代软件放弃了这一传统做法，看这家网上热门的搬家公司： </span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;">
<div align="left" forimg="1"><img border="0" src="http://worrydream.com/MagicInk/p/uhaul_original.png" small="0" class="blogimg"></div>
</span></p>
<p style="text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>这些下拉菜单既突兀又没能显示充足的信息。地理位置应该从地图上找，而日期应该从日历上选。这是重新设计后的效果：</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;">
<div align="left" forimg="1"><img border="0" src="http://worrydream.com/MagicInk/p/uhaul_redesign.png" small="0" class="blogimg"></div>
<br>
</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>这个设计也并非最理想。地点和日期信息应该能从用户既有的地图和日历上提供。但在满足这样需求的平台普及之前，软件至少应该提供类似的临时服务。</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>作为进一步应用特定情境的一个例子，看一个主流的网上花店设计是如何让用户局限在下拉菜单里的： 对比另一个简单的可视化导向设计：</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><br>
</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><strong><span style="font-size: 9pt; color: black;">
<div align="left" forimg="1"><img border="0" src="http://worrydream.com/MagicInk/p/flowers.png" small="0" class="blogimg"></div>
</span></strong></p>
<p align="left" style="text-align: left;" class="MsoNormal"><strong><span style="font-size: 9pt; color: black;">我们是怎么发展到今天的？</span></strong></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>当前的很多软件都存在交互多，信息少的问题。我能想到的几个原因是。</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>首先，我们目前的用户界面范式，是在另一个技术时代发明的。举例来说，最初的Macintosh时代，没有网络，没有大规模的存储，而且很少有跨程序的沟通。因此，它无从获取它自身环境之外的数据，记忆空间太少以致于无法保留重大历史记录。</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>交互是设计者可利用的唯一手段。因为在当时，计算机无需提供太多的信息，所以，大部分软件还都是操作型软件──打字机，绘图板，分类账簿。经过二十年的发展以及互联网爆炸时代的到来，软件可以提供更多的服务。</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>现代软件模拟机械运行机制的第二个原因是，对于那些创建软件的人来说，计算机就是一台机器。程序员生活在操作模式中，她操作一台计算机就如同驾驶一辆车。因此，她下意识的认为软件也必须像一台机器那样被操作，即使它的功能只类似于报纸或书籍。更糟的是，那些设计平台和图形界面工具箱的人更容易从这个角度看问题，因为他们工作于更低的层面。然后，应用软件设计师在设计大环境的影响下，几乎被迫投入到对机械模型的研究中去了。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;">即便有些软件认识到了应该&ldquo;丰富信息，简化交互&rdquo;，却还是依旧把时间浪费在改良操作方式上，一次又一次的更新版本。对于设计师和程序员来说增加菜单项目和对话框都比重新设计一个动态图形更容易，有时，他们的理由是应该尽可能少改变用户的使用习惯。经过十次改版后，这个软件很可能改得像个怪物，用户花费在向下拉动菜单的时间比了解和获取信息的时间还要长。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;      </span><span> </span>软件不应该这样发展，但解决这个问题需要对设计流程和技术平台作大量地重新思考。经过最近设计的一个案例进行详细研究，我将谈谈面对信息软件革命我们需要做些什么。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"> </span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><strong><span style="font-size: 9pt; color: black;">演示：行程规划</span></strong></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>BART是</span><span style="font-size: 9pt; color: black;">美国海湾地区快速运输系统</span><span style="font-size: 9pt; color: black;">，的官方网站就像是个稻草人那样有名无实，因为<span>BART几乎已经不存在竞争压力了，因此也没什么动力去提供一个高质量的网站。但另一方面，航空业则抓住每一个机会向客户提供优质的服务。不过，规划一次航空旅行和一次地下运输其实是差不多的。但我查了其他10个航空公司网站，发现他们十分（几乎完全）相似。</span></span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>首先，机械化的，毫无信息的配置屏幕：</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;">
<div align="left" forimg="1"><img border="0" src="http://worrydream.com/MagicInk/p/flight_original_1.png" small="0" class="blogimg"></div>
<br>
</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>然后是文本化的结果列表：</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;">
<div align="left" forimg="1"><img border="0" src="http://worrydream.com/MagicInk/p/flight_original_2.png" small="0" class="blogimg"></div>
<br>
</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;">有实质意义的信息被压缩成几栏，排列在左侧，而屏幕右侧的大部份空间被分层定价列表占用。（截图中只显示了右侧列表的一部分）。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;">用户有可能提出哪些问题？</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;      </span>*这条航线会在哪些城市中转？他们位于何处？</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;      </span>*航班白天会停经哪些地方，我想顺道逛一逛？</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;      </span>*他们起飞和抵达的时间分别是何时？</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;      </span>*要飞多久？（跨时区有可能造成这种迷惑）。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;      </span>*中间停靠几次？要转签几次？<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;      </span></span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>看看这个设计：</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;">
<div align="left" forimg="1"><img border="0" src="http://worrydream.com/MagicInk/p/flight_redesign.png" small="0" class="blogimg"></div>
<br>
</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;">航班的飞行时间和飞行距离，以及到达中转站的时间和距离及中转停留的时间，这些都能通过视觉呈现直观的进行对比。那些无需中转的航线格外突出，因为他们完全是蓝色的，而中转航线则是双色的。<span>6：50从</span></span><span style="font-size: 9pt; color: black;">Hartford起飞的航班与</span><span style="font-size: 9pt; color: black;">7：20起飞的航班在排列的位置上有明显不同。通过查看顶端的灰条可以方便的将时间转换成任何时区。</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>交互尽可能被简化了，每个点击都会有明确的语句提示。充其量就是双击地图，拖动日历，双击票价，可能还需要一些网页滚动。根据既有数据进行的预测（自动选择最近的购买路线，并展示最近的旅程名列表）可以为许多旅行者消除或减少对地图的浏览时间。一个不断更新的预测机制，还能发现用户总是每月第一周的周一到周五呆在</span><span style="font-size: 9pt; color: black;">Baltimore这一规律，然后</span><span style="font-size: 9pt; color: black;">自动将这一规律记录到日历，这样就可以免去相关的交互。当然，因为所有信息都是在同一页上展示，并且反馈非常及时，用户也可以考虑其他出发日期和中转城市，并且可以即时查看航班是否有空位。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;">航空业近几年一直处于低迷状态，航空公司一直拼命争取乘客。其中，不成功的甚至面临破产。面对这么大的赌注，为什么没有任何航空公司试图通过更好的软件设计改善购票者的购物体验？</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>问题主要还是在于观念。试问：&ldquo;为什么西南航空不设计个更好的软件？&rdquo;，这个问题只看到了表象，没有抓住本质。本质上的问题是，&ldquo;</span><span style="font-size: 9pt; color: red;">真正意义上的软件设计诞生了吗？</span><span style="font-size: 9pt; color: black;">&rdquo;，在我们期待获得更好的航空网站之前，我们可能需要改变一下观念。</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal">(未完待续）</p> 
		
		<br/><b>类别：</b><a href="http://hi.baidu.com/lanx1983/blog/category/%D3%C3%BB%A7%CC%E5%D1%E9">用户体验</a>&nbsp;<a href="http://hi.baidu.com/lanx1983/blog/item/2e2f7138c08d3e2796ddd86b.html#comment">查看评论</a>]]></description>
        <pubDate>2008-03-04  12:12</pubDate>
        <category><![CDATA[用户体验]]></category>
        <author><![CDATA[lanx1983]]></author>
		<guid>http://hi.baidu.com/lanx1983/blog/item/2e2f7138c08d3e2796ddd86b.html</guid>
</item>

<item>
        <title><![CDATA[（翻译）魔术墨水——信息化软件和图形界面 part3]]></title>
        <link><![CDATA[http://hi.baidu.com/lanx1983/blog/item/4329dd176066c80dc83d6d68.html]]></link>
        <description><![CDATA[
		
		<p align="left" style="text-align: left;" class="MsoNormal">原文：<a href="http://worrydream.com/MagicInk/" target="_blank">Magic Ink - Information Software and the Graphical Interface</a> <br>
作者：<span style="font-size: 9pt; color: black;"><span> Bret Victor</span></span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span><br>
</span></span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><strong><span style="font-size: 9pt; color: black;">情境关联信息图形</span></strong></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>印刷品的最大缺陷是：油墨附着在纸面后是不可更改的。墨水加纸张的设计成果是静态的──它不得不同时展示所有的数据。不过，好在用户在某一时刻通常只关心某一个环节的信息。设计师面临的挑战是组织数据，使某一类关联信息能聚合在一起，而读者面临的挑战是必须手眼齐动才能在整个数据空间中找到对她有用的一组信息。</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>举例来说，候车的人在查看巴士时刻表时，不得不在复杂的矩阵图中找出某路巴士在某站的停靠时间，以获悉下一辆巴士什么时候到达。当驾驶者在一个陌生的城市迷路时就得翻遍行车地图，对照邻近的标志性建筑来确定当前位置。这就好像要你从一大堆书中查找出某一条信息，肯定不会出现那么走运的事──书架上刚好有这么一本书，而这本书里刚好有这么一页，这页里又刚好有你想要的条目！因为这些结果都是以静态图像呈现的，读者不得不大费周折才能找到答案。</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>现代计算机系统克服了这一限制。软件能做到：</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;      </span>*通过情境找出有用数据。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;      </span>*过滤数据并将无关数据排除。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;      </span>*生成图表来展示当前所需的信息。</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>计算机的动态显示屏将我们从原先的静态出版物中解放出来。像素点就像是神奇的墨水──能够根据不同情况为每个用户展示出不同的信息。CPU，存储介质，网络，输入设备──都是它用作推断情境的辅助工具。</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>信息化软件的设计实际上就是将情境关联信息图形化。与传统的图形设计不同，我们无需在一张纸上展示出所有信息以供任何用户在任何情况下查找，而只需在图形上展示当前这位用户最需要的信息。软件能够让数据以各种方式拆分组合，每次只提供给用户他关注的部分。</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;">不管设计师是否意识到这一点──其实</span><span style="font-size: 9pt; color: black;">所有的信息化软件都是由情境关联图形构成的。例如，搜索引擎的结果列表就是一个情境关联图表。该软件的数据空间是由世界上的所有网站构成的。用户只要使用相应的关键词，就能把搜索结果缩小到十几个。</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>事实上，软件可以通过三个线索来推断情境：</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;      </span>*</span><span style="font-size: 9pt; color: red;">环境</span><span style="font-size: 9pt; color: black;">──感知周围动态。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;      </span><span>&nbsp;&nbsp;</span>*</span><span style="font-size: 9pt; color: red;">历史</span><span style="font-size: 9pt; color: black;">──存储以往的数据。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;      </span>*</span><span style="font-size: 9pt; color: red;">交互</span><span style="font-size: 9pt; color: black;">──收集用户输入的信息。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"> </span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><strong><span style="font-size: 9pt;">从环境中推断情境</span></strong></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>一个人通过她身体的五大感官了解周围。用样，软件不存在于真空，它可以通过连接硬件和其它软件来获悉用户的很多情况。那些存在于软件周边环境中的情境线索有：</span></p>
<p align="left" style="margin-left: 21pt; text-align: left;" class="MsoNormal"><strong><span style="font-size: 9pt; color: black;">日期和时间。</span></strong><span style="font-size: 9pt; color: black;"> 时间是我们规划生活的一个基本尺度。 无论是在数据空间和现实环境中，&ldquo;当前&rdquo;总是很重要的。因为用户在寻找信息时，那些&ldquo;当前&rdquo;或&ldquo;最近&rdquo;的信息往往是最有用得。幸运的是，再普通的计算机也都有时间概念。比如：一个人使用巴士时刻表软件就可以不必为寻找下一趟巴士的到站时间而煞费功夫了。</span></p>
<p align="left" style="margin-left: 42pt; text-align: left;" class="MsoNormal"><strong><span style="font-size: 9pt; color: black;">地理位置。</span></strong><span style="font-size: 9pt; color: black;">同样，在地理位置上最常出现的词是<span>&quot;这里&quot;。不幸的是，这个概念目前很难界定，但发展潜力巨大。显然，一个地图软件有必要知道用户的当前位置，巴士时刻表软件，商业订购软件，运输规划软件，旅游指南软件，以及大量其它信息软件也一样。</span></span></p>
<p align="left" style="margin-left: 42pt; text-align: left;" class="MsoNormal"><strong><span style="font-size: 9pt; color: black;">物理环境。</span></strong><span style="font-size: 9pt; color: black;">通过提供时间和地点，就能轻易通过网络的到有关物理环境的信息，如天气。例如，旅游指南软件可以建议用户晴天去公园，雨天去博物馆。</span><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;      </span></span></p>
<p align="left" style="margin-left: 42pt; text-align: left;" class="MsoNormal"><strong><span style="font-size: 9pt; color: black;">其他信息化软件</span></strong><span style="font-size: 9pt; color: black;">，如开放式的网站。通过读取一些信息，就能发现用户的关注点。所有其它信息软件也应加以留意。假设一个人正在网站上寻找即将推出的舞台剧信息。那么，当她打开她日历软件，上面就应该自动显示哪些演出可以列入她的日程表。当她打开地图软件，她就应该能看到去往剧场的路线图。当她打开餐馆指南软件，她就应该能看到剧院附近的餐馆列表，此外，除非剧院有日场演出，否则这些信息就不应该在午餐前显示出来。</span></p>
<p align="left" style="margin-left: 42pt; text-align: left;" class="MsoNormal"><strong><span style="font-size: 9pt; color: black;">通过操作型软件创建的文档。</span></strong><span style="font-size: 9pt; color: black;">通过产生信息来强化关注点。假设，某人在撰写论文时需要关于&ldquo;<span>cats&rdquo;的资料，而该论文的的标题是&ldquo;动物癌症的种类和治疗方法&rdquo;，那她所需要的信息显然更侧重于医学。如果题目是&ldquo;埃及历史&rdquo;，那应该是侧重于古埃及对猫的崇拜。如果该论文是与建筑结构有关的，那&ldquo;cats&rdquo;则一定指的是</span></span><span style="font-size: 9pt; color: black;"> </span><span style="font-size: 9pt; color: black;">CATERPILLAR公司</span><span style="font-size: 9pt; color: black;">生产的重型机械</span><span style="font-size: 9pt; color: black;">而不是什么猫咪。</span></p>
<p align="left" style="margin-left: 42pt; text-align: left;" class="MsoNormal"><strong><span style="font-size: 9pt; color: black;">电子邮件。</span></strong><span style="font-size: 9pt; color: black;">在最近的电子邮件中出现的姓名，地址和电话号码显然能构成十分宝贵的线索。收件人打开日历软件时应该能同时看到自己和发件人的时间表。当她打开地图，邮件中出现的地址应该自动被标注出来。此外，最近的邮件应该能显示当前状态，某个发件人的所有存档邮件应该作为一个整体用来描述用户的特点和兴趣。假设某人想找与&ldquo;</span><span style="font-size: 9pt; color: black;">racing</span><span style="font-size: 9pt; color: black;">&rdquo;的有关信息。这个词可以解释为赛跑，赛自行车，赛跑车等多种竞赛项目的术语，如何确定他想找得到底是什么，查找他与别人的通信中最常出现的项目，这将是个不错的参考。</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>所有软件都应该联系周围环境，从中获取信息。使用那些从不考虑环境因素的软件就像是同一个盲人说话一样──你需要不断向他描述信息。</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>另一方面，当信息环境与历史数据相联系将产生十分巨大的资源──我们应该让历史为软件所用。</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"> </span></p>
<p class="MsoNormal"><strong><span style="font-size: 9pt; color: black;">从历史数据中推断情境</span></strong></p>
<p style="text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>一个人并不只是运用自己的感官来认知事物，她还会参考过去的经验。同样，软件也可以利用它的记忆体来判断当前的情况。我们往往可以从历史数据中找到与当前事物有关联的信息。</span></p>
<p style="text-indent: 21pt;" class="MsoNormal"><strong><span style="font-size: 9pt; color: black;"><span> </span>利用既有数据推测</span></strong><span style="font-size: 9pt; color: black;">解决当前问题的方式，这是最简单的手段。它将当前问题简单地等同于之前出现过的问题。这是相对合理的，因为在许多情况下，用户的操作前提是相对固定的，不太会在短期内发生变化。举例来说，假设用户昨天想在<span> North Berkeley找间一居室的公寓，她今天很可能仍关心这方面的信息。因此，软件应该自动提供相关信息。</span></span></p>
<p style="text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>既有数据经常被作为参考并直接影响操作结果。也就是说，关联是持续性的，除非用户对此做出修改。因此，这类软件总是越用越符合用户的个人习惯。 如果用户真的很在意软件要与自己的使用意图保持同步，那这种设计将是十分受欢迎的。然而，很多信息软件并没有做到这一点。（如果你放下报纸，几个小时后回来时，你会不会在意这不是你刚才在看的那个版面，我想，你压根都记不得你刚才看的是哪个版面。另一方面，如果当你回来时，我把报纸翻到你最喜欢读的那个版面，你也许会因此感到高兴）由此看出，我们应该利用既有数据推测用户需求而不只是简单地提供操作结果。</span></p>
<p style="text-indent: 21pt;" class="MsoNormal"><strong><span style="font-size: 9pt; color: black;"><span> </span>智能预测用户需求</span></strong><span style="font-size: 9pt; color: black;">必须更深入的了解用户。建造一个模型来解释过去的情境，并以此通过关联来推测当前情境。</span></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;">一个简单的解决办法是发现两个情境中的共同的属性，由此缩小预测当前情境的依据范围。例如，在一个音乐库，当用户选中列表中的几个蓝调歌曲，软件应该自动显示更多该流派的歌曲。随着对用户这一结果的进一步肯定，软件可以考虑进一步删减其他流派的歌曲。另一个例子，假设一个用户需要有关<span> &quot; Lightwave &quot;，&quot; Bryce &quot;和&quot; Blender&quot;的资料，这些三个词都有很多解释，但把它们作为整体联系起来看，他显然是在描述一个三维渲染软件包。以后，当他搜查&quot;Maya&quot;这个词时，显然不应该理解为他想查找有关古代文明的资料，而是一个名为&ldquo;Maya&rdquo;的三维渲染软件，应该自动将关于该软件的信息提供给他。</span></span></p>
<p style="text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>另一种简单的解决办法是，通过既有数据加速用户做出决策。如果一个人查找一个旅游指南：第一天前往大峡谷，第二天去拉斯维加斯，软件应该自动建议第三天去洛杉矶周围游玩。</span></p>
<p style="text-indent: 21pt;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span> </span>Amazon, iTunes ，以及越来越多的其它在线零售商正在实施类似计划。不过，除了微不足道的的垃圾邮件过滤器，非零售的信息软件中，利用既有数据提供关联信息的例子仍然少之又少。它们中的大多数在新一天的开始又会将用户前一天留下的信息忘得一干二净。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;">不幸的是，面对用户一次又一次的重申其需求，反反复复的点击鼠标，没完没了的敲击键盘，浪费一个又一个小时，有些软件却把这称为&ldquo;交互性&rdquo;。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal">(未完待续）</p> 
		
		<br/><b>类别：</b><a href="http://hi.baidu.com/lanx1983/blog/category/%D3%C3%BB%A7%CC%E5%D1%E9">用户体验</a>&nbsp;<a href="http://hi.baidu.com/lanx1983/blog/item/4329dd176066c80dc83d6d68.html#comment">查看评论</a>]]></description>
        <pubDate>2008-03-04  12:05</pubDate>
        <category><![CDATA[用户体验]]></category>
        <author><![CDATA[lanx1983]]></author>
		<guid>http://hi.baidu.com/lanx1983/blog/item/4329dd176066c80dc83d6d68.html</guid>
</item>

<item>
        <title><![CDATA[（翻译）魔术墨水——信息化软件和图形界面 part2]]></title>
        <link><![CDATA[http://hi.baidu.com/lanx1983/blog/item/975f960209fa0b0b4afb516d.html]]></link>
        <description><![CDATA[
		
		<p align="left" class="MsoNormal" style="text-align: left;">原文：<a href="http://worrydream.com/MagicInk/" target="_blank">Magic Ink - Information Software and the Graphical Interface</a> <br>
作者：<span style="font-size: 9pt; color: black;"><span> Bret Victor</span></span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;"><span><br>
</span></span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><strong><span style="font-size: 9pt; color: black;">信息化软件设计就是图形设计</span></strong></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: rgb(153, 51, 0);"><span>&nbsp;&nbsp;&nbsp;       </span></span><span style="font-size: 9pt; color: black;">这就像我要求软件做很多事情。但它没有什么高深的奥妙──没有对复杂现象的模拟，没有对外部世界的映射，当然也不会具备注入&ldquo;生命火花&rdquo;的超能力。我要求软件提供一套良好的方式展示复杂的数据，使我能理解并思考。这是一个很好的既定目标；</span><span style="font-size: 9pt; color: black;">它是信息图形化设计存在的理由。我的挑战是──做完美的图形设计案例。</span><span style="font-size: 9pt; color: black;"> </span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt;"><span>&nbsp;&nbsp;&nbsp;       </span>一个优秀的信息图形能够激励人们提出或回答问题，比较结果并得出结论。<span style="color: black;">它通过激发人眼的各种潜能──瞬时不费力的运动，高速、高频的并行处理，对内在模式认知与关联，通览全页或聚焦细节的微观/宏观二元性──来做到这些。</span>与此同时，图形能规避人的弱点：单一维度且不可控的听觉系统，相对迟缓的运动系统，有限的理解隐性机制的能力。一个图形在呈现时无需任何用于理解或操作的机制──它能直接进入到心理空间的推理中心。</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;">例如这个列车时刻表：</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"> </p>
<div align="left" forimg="1"><img border="0" class="blogimg" small="0" src="http://worrydream.com/MagicInk/p/train_table.png"></div>
<br>
<p> </p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;       </span>这样的设计可能对乘客十分有用，他们关心的问题大多是列车何时到达车站。但铁路系统的运营商关心的则是：在某时列车正开至何处？列车的时速是多少？两列车的轨道交叉点在何处？（因为他们必须在此处错开列车经过的时间！ ），列车当日的始发点和终点在何处？如果火车晚点，如何告知乘客？上述问题都很难通过该软件得到解答。如果将设计作如下修改结果可能就很不一样了：</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;">
<div align="left" forimg="1"><img border="0" class="blogimg" small="0" src="http://worrydream.com/MagicInk/p/train_graph.png"></div>
<br>
</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;       </span>每辆列车都用一条明显的色线代表，纵轴代表轨道线路，横轴代表时间。坡度线代表着火车的方向和速度;线段平行于横轴时代表在某一站点停留。这个图表相比上一个没有包含更多数据只是将信息重新整合了，但所有经营商关注的问题，此时一目了然。而且，诸如两列车的轨道交叉点这些信息看上去十分明了，无需任何注解。如果一辆列车延误，它的所有数据会被重新计算，绘制出一条新路线。</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;       </span>与大量现有的以纸张为载体的设计相比，大多数的软件设计都很欠佳。这只是表相的问题，深究其原因，我相信最主要的问题在于，很多软件设计师认为他们正在设计的是一台机器。他们关注的是──软件如何被操作。他们首先会问：哪些功能是软件必须具备的？软件必须接收哪些指令？哪些参数可以进行调整？（换言之网站：哪些页面必须存在？他们之间如何链接？哪些是动态功能？）设计师一开始就指定<em>功能</em>，但却忽略了信息化软件的本质是<em>展示信息</em>。</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;       </span>我认为信息化软件设计应该以图形设计为出发点。首要关注的应该是信息如何&ldquo;呈现&rdquo;的问题。设计师要自问：哪些是相关信息？用户想知道些什么？哪些情况下她需要对结果进行对比？她可能会做出怎样的决定？怎样才能让数据有效呈现？怎样才能将视觉语汇和图形设计技巧用于指导用户做出决策？设计者首先要考虑的就是软件的视觉呈现，因为用户使用软件是为了认知──而认知的主要手段就是&ldquo;看&rdquo;。</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;       </span>我们不应将以纸为介质的设计作为上世纪的遗留下的老古董而舍弃在一边，我们要意识到它是软件设计的基础。如果在信息化软件中呈现数据无法做到像在纸面上呈现的那么好，那我们的进步何在？</span></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;"> </span></p>
<p class="MsoNormal"><strong><span style="font-size: 9pt; color: black;">演示：展示数据</span></strong></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;       </span>Edward Tufte关于设计统计图表的第一条原则便是：&quot;展示数据&quot;。所有的信息图形都应该让用户在查看数据时一目了然。然而很多的软件设计者在设计时一味的关注于软件的功能设计却很少花时间考虑如何展示数据。</span></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;       </span>看看在线书籍的搜索结果：</span></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;">
<div align="left" forimg="1"><img border="0" class="blogimg" small="0" src="http://worrydream.com/MagicInk/p/books_original.png"></div>
<br>
</span></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;       </span>针对以上的图形设计能够提出大量批评──字号不一，粗细各异的文字拥挤地排列在一起，各种色彩交织，简直像个嘉年华盛会。文字充斥整个页面，让人眼花缭乱。最糟糕的是，<em>没有足够的信息让人作任何决定。</em></span></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;       </span>用户的目标是从某些特定话题中找到最中意的书。因此，书籍的展示应该与这个问题相关──用户可能会存在什么样的疑问？</span></p>
<p align="left" class="MsoNormal" style="margin-left: 21pt; text-align: left;"><span style="font-size: 9pt; color: black;">*这本书怎么样？是关于什么的？我会喜欢么？</span></p>
<p class="MsoNormal" style="margin-left: 21pt;"><span style="font-size: 9pt; color: black;">*这本书好吗？别人对它的评价如何，这些评论可信么？</span></p>
<p class="MsoNormal" style="text-indent: 21pt;"><span style="font-size: 9pt; color: black;">这些问题的答案可以作为选择相关书籍时的参考。帮助用户做出决定，引导他们购买。</span></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;">不幸的是，这些问题根本无法在所提供的信息中找到答案。用户必须逐个点击商品才能看到相关信息。也就是说她不得不通过手的操作而不能光靠眼睛浏览找到答案，还得运用自己的记忆对各个跨页面的信息进行比较。</span></p>
<p class="MsoNormal" style="text-indent: 21pt;"><span style="font-size: 9pt; color: black;">问题在于，</span><span style="font-size: 9pt; color: black;">这个图表只罗列出了一系列书籍作为它们之间进行比较的索引页面。但</span><span style="font-size: 9pt; color: black;">它的用途不应该只</span><span style="font-size: 9pt; color: black;">是</span><span style="font-size: 9pt;">作为一<span style="color: black;">个可供查询和比较的清单，而应该是帮助用户获得她感兴趣的图书的信息。</span></span></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;">这是重新设计后的效果：</span></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;">
<div align="left" forimg="1"><img border="0" src="http://worrydream.com/MagicInk/p/books_redesign.png" small="0" class="blogimg"></div>
<br>
</span></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;       </span>这本书怎么样？表格中提供了概述的简介。它是本好书么？评级和评论显示了读者对它的看法。所有信息在同一页呈现，用户只需用眼睛比较，无需费神记住它们。</span></p>
<p class="MsoNormal" style="text-indent: 21pt;"><span style="font-size: 9pt; color: black;"><span> </span>1─5星的评级体系，提供的信息并不充足，因为它取的是众人评价的平均值。用户还可以根据星级下的小红点获悉不同人对书的评价差异。有些书众人对它的评价大致相同，比如
<div forimg="1"><img border="0" src="http://worrydream.com/MagicInk/p/books_stars_1.png" small="0" class="blogimg"></div>
──大家都觉得它是本还不错的书（小红点都集中在中间三颗星上）。而有些书，有人爱它至极有人恨它入骨，比如
<div forimg="1"><img border="0" src="http://worrydream.com/MagicInk/p/books_stars_2.png" small="0" class="blogimg"></div>
──人们对它的评价差异很大。虽然它俩的评级都是三星，但显然意义不同。观众还可以看到那些评价很高的书有什么负面评论，相比大量的赞美之词，批评往往更有启发性。从整体上来看，小红点并没有喧宾夺主，过分吸引人的视线，反映平均值的星级还是更为显眼的，不关心评价差异的用户完全可以忽略它。</span></p>
<p class="MsoNormal" style="text-indent: 21pt;"><span style="font-size: 9pt; color: black;"><span> </span>文字加粗和颜色改变只用在个别需要强调的信息上。那些次要的信息设成灰色文字，与背景色相近，暗示用户只需浏览。所有重要的信息和图片都一律限制宽度，靠左侧对齐──处在最佳可视范围内，而右侧栏只用来显示补充信息。观众只需垂直查看左侧栏就可获取所有重要信息，如果她发现其中有感兴趣的内容还可以花点时间看看右侧栏中的相关信息。</span></p>
<p class="MsoNormal" style="text-indent: 21pt;"><span style="font-size: 9pt; color: black;"><span> </span>用户有时候会有个模糊的概念──想看某一类的书籍，可他又无法将它具体到某个关键词进行搜索。基于这个原因，可以给每本书提供一个迷你的相关书籍列表──以供用户找到与此书类似的书籍，或者并不相似但十分有意思的书籍。</span></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;">通常，软件设计人员总是会操心功能问题，以及用户如何进行交互？显然，上一个例子中，除了<span>&quot;相关书籍&quot;列表，点击有关这本书的任何一个链接，都只能看到关于该书的某个细节或购买选项。点击它们对用户来说有什么意义？这就像把一本书撕的支离破碎。</span></span></p>
<p align="left" class="MsoNormal" style="text-align: left; text-indent: 21pt;"><span style="font-size: 9pt; color: black;"><span> </span>与原来的设计相比，这个设计有很大的改观。不过，我认为这仍只是个保守的设计。应该会有更好的设计──能显示更多的数据，让用户浏览更多内容，有更充分的空间与相关书籍进行比较。改变一下观念就能创造极大的可能性。它不是搜索结果的列表──它是信息的图形化呈现。它用于认知。</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;">演示：组织数据</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;"><span> </span><span>&nbsp;&nbsp;&nbsp;       </span><span> </span>展示哪些数据，这一点十分重要，同样重要的是，如何展示它们。图形中的元素应该以引导用户获取信息为目的进行组织。然而，大多数软件的中图形只求最大化的满足审美需求，而不考虑挖掘数据中的关联信息。 </span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;"> </span></p>
<p align="left" class="MsoNormal" style="text-align: left; text-indent: 21pt;"><span style="font-size: 9pt; color: black;"><span> </span>看看这个关于近期上映影片的图形案例：</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;">
<div align="left" forimg="1"><img border="0" src="http://worrydream.com/MagicInk/p/movies_original.png" small="0" class="blogimg"></div>
<br>
</span></p>
<p align="left" class="MsoNormal" style="text-align: left; text-indent: 21pt;"><span style="font-size: 9pt; color: black;"><span> </span>如果一个人想看电影，她会问些什么问题？</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;       </span>*今天上映什么电影，分别在什么时间？</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;       </span>*在某一时间段上映的电影是哪些？</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;       </span>*它们在哪里上映？</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;       </span>*它们是什么主题的？</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;       </span>*它们是否好看？</span></p>
<p align="left" class="MsoNormal" style="text-align: left; text-indent: 21pt;"><span style="font-size: 9pt; color: black;"><span> </span>用户会通过比较这些问题的答案找到自己最值得一看的电影。</span></p>
<p align="left" class="MsoNormal" style="text-align: left; text-indent: 21pt;"><span style="font-size: 9pt; color: black;"><span> </span>很显然，上面的图表没有这些问题的答案（这些电影是什么主题的？它们是否好看？），但最糟糕的一点是，这些数据根本没有被组织成任何有价值的信息。想了解哪些电影在哪个时间播放，需要浏览满屏的影院上映信息，从中找出几部感兴趣的电影然后再比较它们的上映时间。观众的眼睛必须在屏幕上来回扫视，以找出某部电影在六个影院中分别上映的时间，试图寻找一个最适合在晚饭后观看的。</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;">首要的问题是，&ldquo;今天上映什么电影，分别在什么时间？&rdquo;</span><span style="font-size: 9pt; color: black;"> 鉴于此问题涉及的两大重点，我们可以将图表设计成这样──电影名称和上映时间分别作为纵轴和横轴。</span></p>
<p align="left" class="MsoNormal" style="text-align: left; text-indent: 21pt;"><span style="font-size: 9pt; color: black;"><span> </span>重新设计的效果：</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;">
<div align="left" forimg="1"><img border="0" src="http://worrydream.com/MagicInk/p/movies_redesign.png" small="0" class="blogimg"></div>
<br>
</span></p>
<p align="left" class="MsoNormal" style="text-align: left; text-indent: 21pt;"><span style="font-size: 9pt; color: black;"><span>  </span>就像对售书网站进行重新设计一样，这个设计展示了充分的信息以确定每部电影的内容和品质，但电影相比图书有更多的外部营销方式，所以，这个设计的更多意图在于提示观影时间而非介绍影片内容。同样的，只在关键信息处将文字加粗，弱化补充信息的视觉冲击效果。</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;">最大的亮点是右侧栏的图表，列出了所有电影的放映时间。用户可以很轻松的垂直查看某一特定时间段，找到该时间段内放映的所有影片。如果她只关注某一部电影，那她只要沿着该电影所在的横轴查看，阴影遮盖的部分是已经过去的时间，用户可以直接跳过，只考虑后面的有效时间。如当前这个例子，<span>4:45以后的才是有效时间。</span></span></p>
<p align="left" class="MsoNormal" style="text-align: left; text-indent: 21pt;"><span style="font-size: 9pt; color: black;"><span> </span>原先的设计是以影院为单位来组织影片的，而重新设计之后则是直接以电影为单位进行显示。原因是，观众更关心在某个特定的时间看某部电影，而并不介意它在哪个影院上映。不过，免不了还是有观众会执著于某家固定的影院，因此，我给每个影院设定了一个彩色背景条。如果某位观众只喜欢在Gulliver影院看电影，那位于黄色背景条中的内容就是他想找的信息。</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;">设计中没有出现影院的详细地址。我认为观众很可能熟悉她附近的剧院，如果不是，那一个简单的地址其实也用处不大，除非提供一张线路地图，通过鼠标点击或悬停在某个剧院的名称上出现一个新页面向用户展示这些信息。</span><span style="font-size: 9pt; color: black;"> </span></p>
<p align="left" class="MsoNormal" style="text-align: left; text-indent: 21pt;"><span style="font-size: 9pt; color: black;"><span> </span>以上两个重新设计的案例是为了</span><span style="font-size: 9pt; color: black;">说明图形设计对于信息化软件的重要性，它绝对不只是对数据列表做一下美化。设计卓越的软件，这种观念是必须的，但光有它还不够。别忘了最重要的问题。</span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;       </span><span> </span>上述设计中很少元素是软件设计所特有的。大部分是和在纸面上进行设计相同的。但现代的设计方法不应该只是承袭原有的──而是应该超越它们。我们已经看到了图形设计如何推进软件设计，但反过来，我们如何利用软件提高图形设计水平呢？</span></p>
<p align="left" class="MsoNormal" style="text-align: left; text-indent: 21pt;"><span style="font-size: 9pt; color: black;"><span> </span>答案在于情境。</span></p>
<p align="left" class="MsoNormal" style="text-align: left; text-indent: 21pt;"><span style="font-size: 9pt; color: black;"> </span></p>
<p align="left" class="MsoNormal" style="text-align: left;"><span style="font-size: 9pt; color: black;"> </span></p> 
		
		<br/><b>类别：</b><a href="http://hi.baidu.com/lanx1983/blog/category/%D3%C3%BB%A7%CC%E5%D1%E9">用户体验</a>&nbsp;<a href="http://hi.baidu.com/lanx1983/blog/item/975f960209fa0b0b4afb516d.html#comment">查看评论</a>]]></description>
        <pubDate>2008-03-04  11:58</pubDate>
        <category><![CDATA[用户体验]]></category>
        <author><![CDATA[lanx1983]]></author>
		<guid>http://hi.baidu.com/lanx1983/blog/item/975f960209fa0b0b4afb516d.html</guid>
</item>

<item>
        <title><![CDATA[（翻译）魔术墨水——信息化软件和图形界面 part1]]></title>
        <link><![CDATA[http://hi.baidu.com/lanx1983/blog/item/ec55453db3c6f6ea3c6d9762.html]]></link>
        <description><![CDATA[
		
		<div align="left">暴长的文章，一根筋的就给翻译了，还是没翻完，有人看得话就找时间翻完，翻译水平很业余，见谅。<br>
原文：<a href="http://worrydream.com/MagicInk/" target="_blank">Magic Ink - Information Software and the Graphical Interface</a> <br>
作者：<span style="font-size: 9pt; color: black;"><span> Bret Victor<br>
<br>
</span></span></div>
<p><strong>摘要：</strong></p>
<p style="text-indent: 21pt;"><span style="font-size: 9pt;">糟糕的用户体验和缺乏帮助信息的软件界面，激励着我们数十年来致力于研究&ldquo;人机交互&rdquo;。本文，我的观点是：长期以来我们过于注重&ldquo;交互&rdquo;，这可能是一种误导。我认为，对于大多数软件&mdash;&mdash;也就是我们所说的&ldquo;信息化软件&rdquo;来说，交互无论对于用户还是设计师实际上都是一种负担，用户的目标可以通过其他手段更好地被满足。</span></p>
<p style="text-indent: 21pt;"><span style="font-size: 9pt;">所谓&ldquo;信息化软件&rdquo;设计其实可以被看作是<em>情境关联信息图形设计</em>。我论证了信息图形化设计的住要任务和三种目前常用的<span style="color: black;">获悉</span>情境关联的途径，而交互是其中最次要的一种。<span style="color: black;">当论证完这些设计理念在文化上变迁的必然性之后，我会开始进行设计。我概述了这样一种工具</span>&mdash;&mdash;<span style="color: black;">它可以让设计师在没有技术支持的条件下根据数据生成图形，以及这样一个平台──它可以在独立程序之间进行空前级别的隐形情境共享。在结论中我断言</span>：随着技术水平的不断提高，信息化软件的设计原则将会变得越来越重要。</span></p>
<p style="text-indent: 21pt;"><span style="font-size: 9pt;"><span>  </span>尽管这篇论文提出了许多具体的设计和工程理念，但文章的最大意图是&mdash;&mdash;介绍信息化软件设计中的&ldquo;统一理论&rdquo;，向那些质疑软件世界是否如他们所知的那么&ldquo;平&rdquo;的设计师提供设计的灵感和方向。</span></p>
<p><span style="font-size: 9pt;">范围和术语<span><br>
<span>  </span>&quot;<span style="color: red;">软件</span>&quot; 在这里是指面向用户的本地或网络平台上的个人桌面软件。&quot;<span style="color: red;">软件设计</span>&quot;指的是软件呈现给用户的包括外观和操作行为的设计，是将软件定义为一种<em>产品</em>。<span style="color: maroon;"> </span>&quot;<span style="color: red;">软件工程</span>&quot; 是只在计算机中实现设计，是将软件定义为一种<em>技术</em>。这都是些有争议的定义，别指望文章的作者将摆平这些争议，实际上这篇论文本身将引来更多的争议。</span></span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><strong><span style="font-size: 12pt;">目录</span></strong></p>
<p align="left" style="text-align: left;" class="MsoNormal"><strong><span>什么是软件？</span></strong></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt;">&#8226;<strong>软件和巫术。</strong>是&quot;交互设计&quot;治愈了令用户沮丧的软件，还是用户最终自我疗伤了？ <br>
&#8226;<strong>什么是软件设计？</strong>软件不是一个新的神秘媒介，只是两个旧媒介融合的产物。 <br>
&#8226;<strong>软件为谁服务？</strong>人们利用软件进行学习、创造和沟通。 <br>
&#8226;<strong><span style="color: black;">设计操作型软件很难</span><span style="color: rgb(153, 51, 0);">。</span></strong>设计用于创造的软件是个狡猾的生意。 <br>
&#8226;<strong>最佳的软件是信息化软件。</strong>人们花更多的时间来学习，而不是创造。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><strong><span>图形设计</span></strong><span style="font-size: 9pt;"><br>
&#8226;<strong>信息化软件设计就是图形设计。</strong>人们通过看来<span style="color: black;">认知，&ldquo;</span>看&rdquo;是根本。 <br>
&#8226;<strong>演示：显示数据。</strong>将Amazon重新设计为一个信息图形化网站。 <br>
&#8226;<strong>演示：按期数据。</strong>重新设计Yahoo! Movies，将它变为一个信息图形化网站。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><strong><span>情境关联</span></strong></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt;">&#8226;<strong>情境关联信息图形。</strong>软件胜过印刷品是因为显示了相关性。 <br>
&#8226;<strong>从环境中推断情境。</strong>外界信息可提示相关性。 <br>
&#8226;<strong>从历史数据中推断情境。</strong>过去的记忆可提示相关性。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><strong><span>交互</span></strong><span style="font-size: 9pt;"><br>
&#8226;<strong>交互性被认为是有害的。</strong>用户可通过交互获取相关性，但只能作为不得已的手段。 <br>
&#8226;<strong>减少交互。</strong>以此减少痛苦。 <br>
&#8226;<strong>我们是怎么发展到今天的？</strong><span style="color: black;">对交互的普遍聚焦是另一个时代遗留下来的。</span></span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><strong><span>间歇</span></strong><span style="font-size: 9pt;"><br>
&#8226;<strong>案例分析：列车时刻表。</strong>将一个计划旅程的工具设计成信息图形化效果。 <br>
&#8226;<strong>演示：<span style="color: black;">行程规划</span>。</strong>将西南航线重新设计为信息图形化效果。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><strong><span>改变世界</span></strong><span style="font-size: 9pt;"><br>
&#8226;<strong>策划信息化软件革命。</strong>五个步骤，从技巧到艺术形式。 <br>
<strong>&#8226;设计一个&ldquo;设计工具&rdquo;。</strong>无需编程生成动态图形。 <br>
&#8226;<strong>通过历史推论工程学。</strong>软件如何从历史数据中获取信息。<br>
&#8226;<strong>通过环境推论工程学。</strong>软件之间的隐性沟通平台。 <br>
&#8226;<strong>信息和未来世界。</strong>为什么这一切很重要。</span></p>
<p><strong><span style="font-size: 9pt;">软件和巫术</span></strong></p>
<p style="margin: 5pt 19.2pt 5pt 27pt; text-indent: 20.25pt;"><span style="font-size: 9pt;">一台计算机的进程确实像一个魔法师的思想精神&mdash;&mdash;看不见，摸不着，根本不是由物质组成的。然而，他又是现实的存在&mdash;&mdash;它可以执行智力工作；它可以<strong>回答问题</strong>；它可以通过分配一家银行的货币或控制一间工厂的机器手臂来<strong>影响世界</strong>。我们使用的计算机程序就像魔法师的符咒。<span> <br>
&mdash;Abelson and Sussman, <a href="http://mitpress.mit.edu/sicp/">Structure and Interpretation of Computer Programs</a> （计算机程序的结构和解释）(1984)</span></span></p>
<p><span style="font-size: 9pt;"><span>&nbsp;&nbsp;&nbsp;      </span>Merlin（译者注：是欧洲家喻户晓的欧洲中古世纪之经典故事中的魔法师，传说他创造了巨石阵。）的任务其实很轻松──创造巨石阵只不过是个单纯的工程挑战，吊挂一些有份量的石头罢了，目的无非是慰藉地下的亡灵。</span></p>
<p class="MsoNormal"><span style="font-size: 9pt;"><span>&nbsp;&nbsp;&nbsp;      </span>而如今，软件魔术师的责任重大到如同背负着13英尺的巨石&mdash;&mdash;要让软件与人类沟通。他们总愿意接受挑战，</span><span style="font-size: 9pt;">希望自己像</span><span style="font-size: 9pt;">木偶奇遇记中的精灵一样，</span><span style="font-size: 9pt;">将生命的火种吹进小木偶体内，让它成为一个真正的男孩。可事实却不尽人意，他们总是制造出类似于科学怪人那样的家伙&mdash;&mdash;毫无用处、愚蠢至极，还容易产生意外破坏。</span></p>
<p><span style="font-size: 9pt;"><span>&nbsp;&nbsp;&nbsp;      </span>这是一个软件危机，而且已经不是什么新闻了。十几年来，可用性学者投入了大量精力，不断口诛笔伐各种糟糕的用户界面。按理说，这应该能使那些糟糕的界面变得友好一些，他们决心打着&ldquo;交互设计&rdquo;的旗号积极地向所有虔诚的信徒传播&ldquo;可用性交互&rdquo;的福音。</span></p>
<p><span style="font-size: 9pt;"><span>&nbsp;&nbsp;&nbsp;      </span>然而，软件的表现仍然令人沮丧，并随着软件越来越广泛的应用于社会而产生更多问题。讨伐的呼声高涨，而信徒们依然笃信神圣的教条&mdash;&mdash;软件必须将交互摆在首位。<span style="color: black;">软件是为了&quot;用&quot; 。</span></span></p>
<p><span style="font-size: 9pt;"><span>&nbsp;&nbsp;&nbsp;      </span>我认为根本的软件危机是一种认同危机&mdash;&mdash;人们不明确软件到底该定义成什么媒介，它到底该用来做什么。也许&ldquo;生命的火花&ldquo;是种不该存在的魔法。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><strong><span style="font-size: 9pt;">什么是软件设计？</span></strong><span style="font-size: 9pt;"> <br>
<span>&nbsp;&nbsp;      </span>一个人体验现代软件几乎只是通过两个渠道： <br>
<span>&nbsp;&nbsp;      </span>&#8226;她读取和解析屏幕上的画面。 <br>
<span>&nbsp;&nbsp;      </span>&#8226;聚焦屏幕上的事物，并用鼠标替代手指点击它们。 <br>
<span>&nbsp;&nbsp;      </span>因此，软件设计包括对以下两种事物的设计： <br>
<span>&nbsp;&nbsp;      </span>&#8226;图像<br>
<span>&nbsp;&nbsp;      </span>&#8226;可</span><span style="font-size: 9pt;">用于点击的对象</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt;"><span>&nbsp;&nbsp;&nbsp;      </span>这两项都不是什么新发明。我们的祖先──穴居人类利用长矛击中猛犸象，并在他们居住的洞穴将这些过程绘成图像。如今，这两项活动已演变成了两个成熟的设计学科：平面设计和工业设计。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt;"><span>&nbsp;&nbsp;&nbsp;      </span></span><span style="font-size: 9pt;">图形设计是一门通过二维平面传达信息的艺术学科。它拥有广阔的应用领域，因为人们有各种各样的信息想要传达&mdash;&mdash;身份，社会地位，情感，说服力等等。最为相关的一个子学科就是</span><span style="font-size: 9pt;">Edward Tufte提出的</span><span style="font-size: 9pt;">信息设计&mdash;&mdash;利用图像向读者传达信息。一些常见得产品中也包含不少信息图形设计，包括巴士时间表，电话黄页，报刊，地图，购物目录等。一个好的图形设计师懂得如何对页面进行排版，让读者可以提出或解答问题，进行比较，得出结论。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt;"><span>&nbsp;&nbsp;&nbsp;      </span>当软件设计师在确定程序中的视觉表达形式时，当她以用户可理解的方式绘制图像时，不管她是否意识了，她实际上正在进行图形设计。</span><u><span style="font-size: 9pt; color: white;"># </span></u></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;">工业设计同样是一门艺术，它塑造物理性的产品，因而它可以由人操纵。它也拥有一个广阔的应用领域，因为人们的生活种离不开它们──从餐具到椅子，从手机到汽车。一个好的工业设计师清楚人体在操纵物理对象时的能力和局限，了解人的思想和人预想的力学模型。例如要设计一部摄影机，设计师要使她产品的造型能够与人手相称。她要合理排列按钮，使食指在操控的同时大拇指能将相机固定，不至于意外滑落。同样重要的是，她需要根据人体特征设计一种可理解的功能映射──&ldquo;按&rdquo;一个按钮拍一张相片，&ldquo;拉动&rdquo;滑条快进电影，&ldquo;打开&rdquo;一扇门取出影片，&ldquo;打开&rdquo;另一扇门取出电池。<span> <span>&nbsp;&nbsp;      </span></span></span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;">虽然软件是典型的非物理产品，但现代软件界面中已然充斥着大量机械化隐喻──点击按钮，滑动滑块，拖动窗口，关闭图标，伸展或收缩面板。人们被怂恿将软件看作是机器──当按下一个按钮时，机器内部会有齿轮运作，导致内部或外部状态的改变。操纵机器，该属于工业设计范畴。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;">当软件设计师定义程序的交互形式， 当她开发这些伪机器并描述它们的功效，不管她是否意识到了，她实际上正在进行虚拟形式的工业设计。</span></p>
<p><span style="font-size: 9pt; color: black;"><span> </span><span>&nbsp;&nbsp;      </span>软件设计师何不就此将她的作品作为一个图形设计和工业设计的融合产物。现在，让我们思考用户是如何</span><span style="font-size: 9pt;">接近<span style="color: black;">软件的，更重要的是，为什么要这样。</span></span></p>
<p class="MsoNormal"><strong><span style="font-size: 9pt; color: black;">软件为谁服务？</span></strong></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;      </span>软件为人服务。 我们必须从人们在做什么出发推论软件应该做什么。看看以下对人类活动的分类：</span></p>
<p class="MsoNormal"> </p>
<div align="center" forimg="1"><img border="0" src="http://hiphotos.baidu.com/lanx1983/pic/item/4329dd175759c119c83d6d43.jpg" small="0" class="blogimg"></div>
<br>
<p> </p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;">目前，软件还未能替人们完成物理行为──比如它无法替您吃下三明治，让您觉得饱。但是，人们把越来越多的智力活动转移到了计算机的虚拟世界中。这说明了人们需要软件的三个普遍理由：</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;      </span>*用于认知。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;      </span>*用于创造。</span></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;&nbsp;      </span>*用于沟通。</span></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;">我提议将软件根据这些需求分类为：信息化软件，操作型软件和通信软件。</span></p>
<p class="MsoNormal"><strong><span style="font-size: 9pt; color: black;">信息化软件</span></strong><span style="font-size: 9pt; color: black;">用于推进人们认知。</span><span style="font-size: 9pt;">一个人使用信息化软件<span style="color: red;">构建并操控一个内部模型</span>──用于信息的心理呈现<span style="color: black;">。良好的信息化软件鼓励用户提出并解答问题，进行对比，得出结论。 例如，一个人在煮晚餐前可能需要利用烹调软件学习各种菜肴做法（这里的&ldquo;学习&rdquo;可以指快速而粗略的了解某些事物）</span><span style="color: maroon;">，</span><span style="color: black;">实际上，她已对烹调的可能性构建了一个心理模型，然后通过这个模型寻找最佳方案。实际上， 这和她查阅一本烹调书籍所得到的结果是相同的。</span></span></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;">
<div align="center" forimg="1">
<div align="left" forimg="1"><img border="0" src="http://worrydream.com/MagicInk/p/information_model.png" small="0" class="blogimg"></div>
</div>
<br>
</span></p>
<p class="MsoNormal"><strong><span style="font-size: 9pt; color: black;">操作型软件</span></strong><span style="font-size: 9pt; color: black;">是用于实现人类创造的。一个人使用操作型软件为自己在计算机或远程设备中</span><span style="font-size: 9pt; color: red;">构建并操控一个外部模型</span><span style="font-size: 9pt; color: black;">──用于表达虚拟对象。例如利用软件进行绘画，写作，作曲，建筑设计，工程设计以及机器人控制等。操作型软件可被视为一个类似于画笔或打字机性质的虚拟工具，它是创作者和作品之间的介面。</span></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;">
<div align="left" forimg="1"><img border="0" src="http://worrydream.com/MagicInk/p/manipulation_model.png" small="0" class="blogimg"></div>
<br>
</span></p>
<p><strong><span style="font-size: 9pt; color: black;">通讯软件</span></strong><span style="font-size: 9pt; color: black;">是用于实现人类沟通的。一个人使用通信软件可以</span><span style="font-size: 9pt; color: red;">构建并操纵与他人分享的内部模型</span><span style="font-size: 9pt; color: black;">──在多种思想之间的形成理解的同步化。例如用于电子邮件，小组讨论（无论是语音，视频或文字），以及协同工作的软件。沟通可以被看作是对于所获得的信息作出的一个反馈──也就是说，由发言者发出的外部模型正是被听众接收到的内部模型。因此，本文将通讯软件简单的看待为操作型软件和信息化软件的结合体，而不再单独进行阐述。</span></p>
<p> </p>
<div align="left" forimg="1"><img border="0" src="http://worrydream.com/MagicInk/p/communication_model.png" small="0" class="blogimg"></div>
<br>
<p> </p>
<p align="left" style="text-align: left;" class="MsoNormal"><strong><span style="font-size: 9pt;">设计操作型软件很难</span></strong></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: rgb(153, 51, 0);"><span>&nbsp;&nbsp;&nbsp;      </span></span><span style="font-size: 9pt; color: black;">操作型软件基本上呈现了一个对象的映射──用户直接操作虚拟机器的模型。因为，&ldquo;操作&rdquo;属于工业设计的范畴，所以，操作型软件偏重于工业设计方向。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;      </span>试想一个用来对小报纸进行排版的工具。用户会花很多时间在一个虚拟空间进行大量的拟物理操作──写作、绘画、删节、移动、旋转、拉伸、剪裁、层叠等等。和其他工业设计一样，设计中的最大挑战是使这些机器容易操作，容易理解且十分舒适。然而，在一个物理空间，每次操作都使用一个专门的工具。而如今，我们需要设计一个&quot;万能工具&quot; 让它完美的结合所有功能（并将这些功能通过两种手势实现，即&quot;点击&quot;和&quot;拖拽&quot; ） ，这是一个重大的挑战。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;      </span>虽然&ldquo;操作&rdquo;是个焦点，但良好的操作型软件必须同时提供优秀的可视化呈现。这才能确保对于一切创造性行为都至关重要的反馈循环保持顺畅──操作者需要及时获悉她的操作结果。因此，设计操作型软件在图形设计方面也存在巨大挑战。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;      </span>举例来说，报纸编辑要查看页面的呈现效果──近距离效果，远距离效果，以及与其他页面是否协调。她希望查找出错别字，不恰当的语句。她想知道那些过长或过短的专栏如何通过排版进行调整。她想知道哪些故事和广告仍未被排在版面上，它们的篇幅有多大，该如何安排它们。她想知道最近哪些连载话题已接近尾声，读者的反响如何。要注意的是，在呈现这一切信息的同时还决不能分散编辑注意力，导致她偏离&ldquo;调整页面布局&rdquo;这一核心任务。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;      </span>此外，工业设计和图形设计运用于操作型软件设计时必需紧密协同，因为需要通过图形设计展示对象如何被操作──机械化产物，图形化描述。更富有挑战性的是通过图形设计展示如何操纵抽象对象，如：音乐或财务数据，不仅要用图形告诉用户该怎么操作它们，更重要的是让用户理解哪个图形代表它们。</span></p>
<p class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;      </span>面对接连不断的设计挑战，想设计出一款优秀的操作型软件绝非易事。幸运的是，要设计一款功能强大的软件，&ldquo;操作&rdquo;非但不是必要的，而且完全是可以避开的。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><strong>最佳的软件是信息化软件</strong></span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: rgb(17, 17, 17);"><span>&nbsp;&nbsp;&nbsp;      </span>J.C.R. Licklider </span><span style="font-size: 9pt; color: black;">在一次回顾自己如何运用工作时间时提到：</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;      </span>在1957年的春夏之交&#8943;&#8943;我试图持续跟踪一名中级技术人员（我自己）在工作时间内到底做了些什么&#8943;</span><span style="font-size: 9pt; color: black;">我大约<span>85%的思维时间花在进入的某项思考，作出决定，并从中获取我须知的事物。</span></span><span style="font-size: 9pt; color: black;">更多的时间花在寻找或获取这些引发我思考的信息。一些时间用于绘制图形，另一些时间用于指导助理如何进行策划。当</span><span style="font-size: 9pt; color: black;">图像完成时</span><span style="font-size: 9pt; color: black;">，一切关系便清晰明了，但为得到这个结果，之前不得不花大量的时间进行信息搜集和策划<span>&#8943;我回顾整个过程，我的大部分&quot;思维&quot;时间都花费在事务性或机械化的行为上：搜索，计算，绘图，变换，以及确定对于逻辑或动态结果的假设，设置解决的路径。</span></span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;      </span>正如Licklider，Vanevar Bush和Doug Engelbart等早期的梦想家所假设的──个人计算机是大脑的补充，通过数据可视化和自动化分析能够增强人的记忆力和推理能力。他们最关注的是一台机器如何帮助一个人找到并了解相关知识。虽然，当时他们普遍在学术和专业制造层面展开讨论，但他们的预想仍十分适用于现代社会。</span><span style="font-size: 9pt; color: rgb(222, 0, 0);"> </span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;">大部分时候，一个人坐在自己的计算机前，不是进行创造，而是阅读，观察，研究，探索，使认知产生联系，并最终理解事物。她并不追求创新，而是梳理自己已获得的知识。计算机成为一个提出问题，进行比较，得出结论的媒介──对，就是</span><span style="font-size: 9pt; color: rgb(153, 51, 0);">认知</span><span style="font-size: 9pt; color: black;">的媒介。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: red;"><span>&nbsp;&nbsp;&nbsp;      </span>人们利用软件学习文字，了解今天哪些国家被轰炸，学习如何烹饪西班牙肉菜饭。他们选择播放哪些音乐，打印哪些照片，还要计划今晚、明天要做些什么，甚至把下周二2:00要做什么都计划好了。他们对众人在私下或公共场合的言论保持关注。他们为母亲搜索一本书，为父亲物色一件外套，为孩子选购一辆车。他们寻找合适的公寓居住，条件是只要包含一张双人床就行。他们询问某部电影何时上映，以及如何开车到剧院，看电影前上哪儿吃饭，饭前去哪里兑换现金。他们查找各种数字，从简单算术问题到财政计划。他们询问货币，从股市行情的历史记录到以银行账户差额。他们问，为什么他们的车无法启动，怎么修理；为什么他们的孩子生病，如何治疗。他们不再坐在阳台瞎猜明天是晴是雨──他们什么都要问软件。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;      </span>目前很多软件为了实现上述需求提供各种机械化隐喻和对象以供操作，但这都是自欺欺人。人们并不关心这些软件如何操作，他们关心的是查看信息并做出选择──在他们的心里操作模型。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;      </span>比如，日历或日程管理软件。目前许多设计是以操作&ldquo;日程安排&rdquo;的数据库为中心的，但这真的是日历存在主要目的吗？在我看来，日历的作用应该是将收集到的信息互相结合，找出关联并展示出来。我想知道：我今晚有什么计划；我的朋友们有什么计划；市中心有什么活动；电影院在上映什么片子；比萨店最晚营业到几点，哪天歇业;我希望看到我任务节点之前的工作模式，以及如何推断未来的任务节点。我想看看这所有的信息如何互相交织，形成关联，然后决定我何时做何事。和牙医确定就诊时间是件烦人的小事，如果软件可以自动标出牙医在邮件确认的日期，也许就能省去麻烦。我的目标是通过日历软件查询或记录何时做何事，比较各种方案，最终作出决定。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;      </span>看看个人财务软件。登录软件并对我的开支进行分类需要经过一堆繁琐和不必要的操作──我的信用卡已经记录了所有细节。我使用这个软件是为了了解我的财务状况和我的消费习惯。我的薪水中多少用于支付租金？多少用来下馆子？如果我放弃频繁光顾饭店，我是否能够用省出的钱购买一台新的笔记本呢？我的圣诞节消费清单里有些什么，哪些方面的消费有办法削减，如果我不上班我的存款是否够我花上一个月？如果我买混合动力车，我能够节省多少煤气？我提出或解答问题，比较我的方案，让它引导我的开销决策。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;&nbsp;      </span>看看线上零售商，如Amazon或Netflix。网站上显示照片，评级，评论，建议的唯一目的就是让我找到，了解，并比较它们的商品。这些都是为了让我在脑子里做出决定。最后，我操作购物车去购买商品，这仅仅只需把我通过心理流程作出的决定付诸实践。最好的零售商认为：操作要尽可能做得简单。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt;"><span>&nbsp;&nbsp;&nbsp;      </span>再看看阅读电子邮件的例子。目前大多数的设计关注于对单个邮件的操作──逐个阅读，检索，整理，归档，删除。但阅读电子邮件的目的已经完全与获取消息这个最初目的无关。我阅读电子邮件，是为了维护一套不断更新的心理认知系统──人际交往，工作项目进程，以及邀请函、任命信、商业交易单和邮寄包裹单等等，在邮件中反映出的状态。这些信息被打上大段文本时间戳并输出，这是沟通过程中的执行细节<span style="color: rgb(153, 51, 0);">。</span>但未必是一个向读者展示信息的好办法。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;"><span>&nbsp;&nbsp;      </span></span><span style="font-size: 9pt; color: black;">类似的例子可以举出很多。忽略当前的软件设计，单思考这个问题，&ldquo;为什么人们使用它？&rdquo;将答案抽象化后的结果几乎是一样的，&ldquo;为了认知&rdquo;。</span></p>
<p align="left" style="text-align: left;" class="MsoNormal"><span style="font-size: 9pt; color: black;">虽然这类问题目前只在哲学层面被讨论。但这一哲学暗示着软件设计中一个非常实用的方法。</span></p>
<p align="left" style="text-align: left; text-indent: 21pt;" class="MsoNormal"> </p>
<p align="left" style="text-align: left;" class="MsoNormal"> </p>
<p align="left" style="text-align: left;" class="MsoNormal"> </p>
<p align="left" style="text-align: left;" class="MsoNormal">(未完待续）</p>
<div>
<div>
<div class="msocomtxt">
<p class="MsoNormal"> </p>
</div>
</div>
</div> 
		
		<br/><b>类别：</b><a href="http://hi.baidu.com/lanx1983/blog/category/%D3%C3%BB%A7%CC%E5%D1%E9">用户体验</a>&nbsp;<a href="http://hi.baidu.com/lanx1983/blog/item/ec55453db3c6f6ea3c6d9762.html#comment">查看评论</a>]]></description>
        <pubDate>2008-03-04  11:50</pubDate>
        <category><![CDATA[用户体验]]></category>
        <author><![CDATA[lanx1983]]></author>
		<guid>http://hi.baidu.com/lanx1983/blog/item/ec55453db3c6f6ea3c6d9762.html</guid>
</item>


</channel>
</rss>