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

<channel>
	<title>阿石的日志 &#187; UE</title>
	<atom:link href="http://www.ashnotes.com/tag/ue/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ashnotes.com</link>
	<description>关注 iPhone App、产品策划、信息架构、网站分析、网站优化</description>
	<lastBuildDate>Wed, 14 Dec 2011 12:21:30 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>读《设计中的设计》——信息传达</title>
		<link>http://www.ashnotes.com/design-in-design-information-show/</link>
		<comments>http://www.ashnotes.com/design-in-design-information-show/#comments</comments>
		<pubDate>Mon, 16 Aug 2010 13:40:25 +0000</pubDate>
		<dc:creator>ashnotes</dc:creator>
				<category><![CDATA[读书笔记]]></category>
		<category><![CDATA[UE]]></category>
		<category><![CDATA[产品设计]]></category>
		<category><![CDATA[信息传达]]></category>
		<category><![CDATA[原研哉]]></category>
		<category><![CDATA[设计]]></category>
		<category><![CDATA[设计中的设计]]></category>

		<guid isPermaLink="false">http://www.ashnotes.com/?p=559</guid>
		<description><![CDATA[最近在读原研哉的《设计中的设计》，下面会陆续将此书心得记录在此。 在第一章结尾处，原研哉提到：“信息传达的目的不是通过视觉冲击力来吸引人们的注意，而是慢慢渗透到五官当中去。在人们还没有注意到他的存在时成熟、隐秘、精密、有力的信息传达已经完成。” 读到这时，我联想到的关键词是 web 中的  UI、UE、和迭代优化。 UI 设计，无论如何是重要的，对老板来说，这一块是保持话语权的领地；对用户来说，UI即产品。设计师在做 UI ，夹杂或权衡了太多的因素，而容易忘记设计的本意是什么，设计出来的信息是要表达什么。而往往中，大部分的设计作品突出了视觉冲击力，而弱化了设计的感染力。这一点在 Web 首页、电子营销邮件中非常常见。视觉冲击力无疑是令人震撼的，但 Web 再震憾也赶超不过电视，Web 中的 UI 设计应到有自己的内涵，而且这种内涵是有共通性的。 这种共通性就是设计的感染力。用户在产品体验过程中，会对产品作出反应：打开继续、关闭走人、心情 愉悦、困惑不爽等等。这种体验会感染到用户，这种感染力会润物细无声般渗入用户的五脏六腑。其中，UE 就是设计感染力的催化剂，信息架构、文案、交互等都是 UE 的组成部分。相对于视觉而言，这些都是较为精密细致的、很给力的（尤其是在 iPhone 那样的触觉领域）。 那如何保证设计的感染力呢？设计师首先是需要基于现有设计的产品不满意，细分出设计的差异性，对过去和现成的设计有审慎的批判性。其次要将这种批判性转化为对产品的精雕细琢般的迭代优化。是迭代优化而为什么不革命？革命的成本太高、性价比低，若非 Jobs 这等人妄谈革命。迭代优化或许是笨办法，但能让用户不知不觉中感受产品的成长、成熟。<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">无觅猜您也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="读《设计中的设计》——这样就好" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-of-design-this-is-enough%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-in-design-information-show%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/08/02/20502205.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">读《设计中的设计》——这样就好</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="2010年用户体验挂历" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2F2010-ue-calender%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-in-design-information-show%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027566.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">2010年用户体验挂历</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="向温总理学习产品设计" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fproduct-design-like-premier-wen%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-in-design-information-show%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027564.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">向温总理学习产品设计</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="i-dong游戏中心原型优化" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fi-dong-game-center-prototype-optimize%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-in-design-information-show%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027623.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">i-dong游戏中心原型优化</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="读《配色设计原理》" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fread-colormatched-design%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-in-design-information-show%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">读《配色设计原理》</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft" title="设计中的设计@douban" src="http://img2.douban.com/lpic/s2165932.jpg" alt="" width="200" height="299" /></p>
<p>最近在读原研哉的《<a href="http://book.douban.com/subject/1941558/" target="_blank">设计中的设计</a>》，下面会陆续将此书心得记录在此。</p>
<p>在第一章结尾处，原研哉提到：“信息传达的目的不是通过视觉冲击力来吸引人们的注意，而是慢慢渗透到五官当中去。在人们还没有注意到他的存在时成熟、隐秘、精密、有力的信息传达已经完成。” 读到这时，我联想到的关键词是 web 中的  UI、UE、和迭代优化。</p>
<p><strong>UI 设计</strong>，无论如何是重要的，对老板来说，这一块是保持话语权的领地；对用户来说，UI即产品。设计师在做 UI ，夹杂或权衡了太多的因素，而容易忘记设计的本意是什么，设计出来的信息是要表达什么。而往往中，大部分的设计作品突出了视觉冲击力，而弱化了设计的感染力。这一点在 Web 首页、电子营销邮件中非常常见。视觉冲击力无疑是令人震撼的，但 Web 再震憾也赶超不过电视，Web 中的 UI 设计应到有自己的内涵，而且这种内涵是有共通性的。</p>
<p>这种共通性就是<strong>设计的感染力。</strong>用户在产品体验过程中，会对产品作出反应：打开继续、关闭走人、心情 愉悦、困惑不爽等等。这种体验会感染到用户，这种感染力会润物细无声般渗入用户的五脏六腑。其中，<strong>UE </strong> 就是设计感染力的催化剂，信息架构、文案、交互等都是 UE 的组成部分。相对于视觉而言，这些都是较为精密细致的、很给力的（尤其是在 iPhone 那样的触觉领域）。</p>
<p>那如何保证设计的感染力呢？设计师首先是需要基于现有设计的产品不满意，细分出<strong>设计的差异性</strong>，对过去和现成的设计有审慎的批判性。其次要将这种批判性转化为对产品的精雕细琢般的迭代优化。是迭代优化而为什么不革命？革命的成本太高、性价比低，若非 Jobs 这等人妄谈革命。迭代优化或许是笨办法，但能让用户不知不觉中感受产品的成长、成熟。</p>
<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">无觅猜您也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="读《设计中的设计》——这样就好" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-of-design-this-is-enough%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-in-design-information-show%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/08/02/20502205.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">读《设计中的设计》——这样就好</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="2010年用户体验挂历" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2F2010-ue-calender%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-in-design-information-show%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027566.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">2010年用户体验挂历</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="向温总理学习产品设计" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fproduct-design-like-premier-wen%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-in-design-information-show%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027564.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">向温总理学习产品设计</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="i-dong游戏中心原型优化" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fi-dong-game-center-prototype-optimize%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-in-design-information-show%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027623.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">i-dong游戏中心原型优化</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="读《配色设计原理》" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fread-colormatched-design%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-in-design-information-show%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">读《配色设计原理》</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/design-in-design-information-show/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>2010年用户体验挂历</title>
		<link>http://www.ashnotes.com/2010-ue-calender/</link>
		<comments>http://www.ashnotes.com/2010-ue-calender/#comments</comments>
		<pubDate>Wed, 23 Dec 2009 06:29:32 +0000</pubDate>
		<dc:creator>ashnotes</dc:creator>
				<category><![CDATA[互联网]]></category>
		<category><![CDATA[2010]]></category>
		<category><![CDATA[UE]]></category>
		<category><![CDATA[信息设计]]></category>
		<category><![CDATA[用户体验]]></category>

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

		<guid isPermaLink="false">http://www.ashnotes.com/?p=262</guid>
		<description><![CDATA[Axure RP 作为一款“快速实现、准确表达、带有交互效果且易于上手”的原型设计工具，在 UE ( user experience ,用户体验）越来越受到互联网行业产品经理、策划、和公司领导重视的今天，Axure 已经可以和office类软件、脑图软件在产品设计过程中 产品设计人员 UED 实践过程的必用善软，可以称谓为“三大产品设计利器”。但是在这款工具在实际运用过程中却有一些争议。 “做出来的效果怎么这么山寨啊，一点都不好看”，有的市场负责人、公司领导如是说 “把原型直接做成 DIV+CSS 不是更好吗?直接给程序套不是又快又省事嘛”，有负责前端的同学就是这样干的 “操作难度大，学习成本高，还是洋文的！”，新人还未上手埋怨道 之所以出现以上争议现象，是因为在现今互联网行业精细化运作与领导拍脑袋加拍板、传统个人站长“一人可以搞定一切”相互碰撞的结果，而这种结果就误解了  Axure 这款工具需求的初衷。 在 Axure官网 下面有用三个单词组成的原型设计流程图“设计、体验、展示”，这也道出了无论是个人打法还是团队协作，都需要先做好信息设计、 搞定流程交互，然后在正式上马之前还要给个人大脑呈现或大家面前 demo 展示一下这样的工作进程。 但是问题出来了，信息设计 word 可以做，流程 visio、excel 也可以搞，演示用 ppt 也能代替为何非要用另外一套 Axure 呢？这其实是个好问题，很多人用Axure的人避而不答，一味的追新立意。Axure作为一款快速原型设计工具，其核心特点是快速产出html交互产出物，在领导拍脑袋之前也有时间让他看看跳跃于众人脑袋中的需求模型呈现效果如何；也可以让市场、开发人员一起 过来碰碰，碰一下市场策略在页面如何展示、开发实施可行性等，一旦遇到修改意见Axure可快速迭代保存并发布给各团队角色进行二次PK， Axure 在团队之间沟通高效率在这里就体现出来了。 论及个人，word、excel等善软能够vba高级编程、 div+css 实现也未尝有何不好，所谓“草木竹石，皆可为剑”，如何使用工具表达信息架构，让用户用较少的时间和思考完成信息找寻及将一款工具用到极致人机合一才是王道。但交互演示、团队沟通这两方面功效目前还没有工具和Axure媲美的。 关于 Axure 操作难度，阿石认为较难的无非是  dynamic panel （动态面板，Axure 的层，可以制作弹出框、Tab等 ）和一些传值调用（可以赋予逻辑条件相关值，可以一次控制N个层），看看官方视频、 切合自己实际摸索基本也都会了，在这里推一下尹广磊兄，我与广磊兄07年在网上相识，当时都在搞育儿项目。他的webppd网站产品原型设计论坛集中了国内原型设计的实战高手和各种axure实践经验分享，而他本身就是Axure大拿，为人热肠有求必应，且是axure.org域名的持有者，为Axure在中国产品人员的普及做了很大的贡献，可谓 Axure 在中国的布道者，有什么问题和想法可以去看看，看看总有收获。<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">无觅猜您也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="Axure 组件变量值传递妙用" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Faxure-label-and-value-app%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Faxure-and-guanglei%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027611.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Axure 组件变量值传递妙用</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="Protonotes:在线原型注释工具" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fprotonotes%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Faxure-and-guanglei%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027613.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Protonotes:在线原型注释工具</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="2010年用户体验挂历" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2F2010-ue-calender%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Faxure-and-guanglei%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027566.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">2010年用户体验挂历</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="读《设计中的设计》——信息传达" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-in-design-information-show%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Faxure-and-guanglei%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/08/02/20502205.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">读《设计中的设计》——信息传达</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="社会化媒体营销" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fsocial-media-marketing%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Faxure-and-guanglei%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/02/27/2985354.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">社会化媒体营销</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-268" title="axure" src="http://www.ashnotes.com/wp-content/uploads/2009/12/axure.png" alt="axure" width="613" height="122" /></p>
<p>Axure RP 作为一款“<a href="http://www.axure.org/" target="_blank">快速实现、准确表达、带有交互效果且易于上手</a>”的原型设计工具，在 UE ( user experience ,用户体验）越来越受到互联网行业产品经理、策划、和公司领导重视的今天，Axure 已经可以和office类软件、脑图软件在产品设计过程中 产品设计人员 UED 实践过程的必用善软，可以称谓为“三大产品设计利器”。但是在这款工具在实际运用过程中却有一些争议。</p>
<ul>
<li>“做出来的效果怎么这么山寨啊，一点都不好看”，有的市场负责人、公司领导如是说</li>
<li>“把原型直接做成 DIV+CSS 不是更好吗?直接给程序套不是又快又省事嘛”，有负责前端的同学就是这样干的</li>
<li>“操作难度大，学习成本高，还是洋文的！”，新人还未上手埋怨道</li>
</ul>
<p>之所以出现以上争议现象，是因为在现今互联网行业精细化运作与领导拍脑袋加拍板、传统个人站长“一人可以搞定一切”相互碰撞的结果，而这种结果就误解了  Axure 这款工具需求的初衷。</p>
<p>在 <a href="http://www.axure.com" target="_blank">Axure官网</a> 下面有用三个单词组成的原型设计流程图“<span style="color: #ff0000;">设计、体验、展示</span>”，这也道出了无论是个人打法还是团队协作，都需要先做好信息设计、 搞定流程交互，然后在正式上马之前还要给个人大脑呈现或大家面前 demo 展示一下这样的工作进程。   但是问题出来了，信息设计 word 可以做，流程 visio、excel 也可以搞，演示用 ppt 也能代替为何非要用另外一套 Axure 呢？这其实是个好问题，很多人用Axure的人避而不答，一味的追新立意。Axure作为一款快速原型设计工具，其核心特点是<span style="color: #ff0000;">快速产出html交互产出物</span>，在领导拍脑袋之前也有时间让他看看跳跃于众人脑袋中的需求模型呈现效果如何；也可以让市场、开发人员一起 过来碰碰，碰一下市场策略在页面如何展示、开发实施可行性等，一旦遇到修改意见Axure可快速迭代保存并发布给各团队角色进行二次PK， Axure 在团队之间<span style="color: #ff0000;">沟通高效率</span>在这里就体现出来了。 论及个人，word、excel等善软能够vba高级编程、 div+css 实现也未尝有何不好，所谓“草木竹石，皆可为剑”，<span style="color: #ff0000;">如何使用工具表达信息架构，让用户用较少的时间和思考完成信息找寻及将一款工具用到极致人机合一才是王道</span>。但交互演示、团队沟通这两方面功效目前还没有工具和Axure媲美的。</p>
<p>关于 Axure 操作难度，阿石认为较难的无非是  dynamic panel （动态面板，Axure 的层，可以制作弹出框、Tab等 ）和一些传值调用（可以赋予逻辑条件相关值，可以一次控制N个层），看看官方视频、 切合自己实际摸索基本也都会了，在这里推一下<a href="http://www.yintop.com/yintop/" target="_self">尹广磊兄</a>，我与广磊兄07年在网上相识，当时都在搞育儿项目。他的<a href="http://www.webppd.com/" target="_blank">webppd网站产品原型设计论坛</a>集中了国内原型设计的实战高手和各种axure实践经验分享，而他本身就是Axure大拿，为人热肠有求必应，且是axure.org域名的持有者，为Axure在中国产品人员的普及做了很大的贡献，可谓 Axure 在中国的布道者，有什么问题和想法可以去看看，看看总有收获。</p>
<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">无觅猜您也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="Axure 组件变量值传递妙用" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Faxure-label-and-value-app%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Faxure-and-guanglei%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027611.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Axure 组件变量值传递妙用</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="Protonotes:在线原型注释工具" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fprotonotes%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Faxure-and-guanglei%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027613.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Protonotes:在线原型注释工具</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="2010年用户体验挂历" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2F2010-ue-calender%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Faxure-and-guanglei%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027566.png" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">2010年用户体验挂历</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="读《设计中的设计》——信息传达" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fdesign-in-design-information-show%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Faxure-and-guanglei%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/08/02/20502205.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">读《设计中的设计》——信息传达</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="再见Google Wave" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fgoogle-wave%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Faxure-and-guanglei%2F">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/01/11/2027565.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">再见Google Wave</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/axure-and-guanglei/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>

