<?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>TT.WAN &#124; 无线 应用 网络 &#124; 趋势 创业 生活 &#187; 协作</title>
	<atom:link href="http://ttwan.com/tag/%e5%8d%8f%e4%bd%9c/feed/" rel="self" type="application/rss+xml" />
	<link>http://ttwan.com</link>
	<description>Talk，Think：Wireless、Application、Network</description>
	<lastBuildDate>Mon, 16 Apr 2012 05:30:28 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1</generator>
		<item>
		<title>交互设计表格</title>
		<link>http://ttwan.com/2009/11/%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e8%a1%a8%e6%a0%bc/</link>
		<comments>http://ttwan.com/2009/11/%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e8%a1%a8%e6%a0%bc/#comments</comments>
		<pubDate>Wed, 04 Nov 2009 16:07:56 +0000</pubDate>
		<dc:creator>TT.Wan</dc:creator>
				<category><![CDATA[胡思|乱想]]></category>
		<category><![CDATA[观点|言论]]></category>
		<category><![CDATA[UI设计]]></category>
		<category><![CDATA[协作]]></category>
		<category><![CDATA[沟通]]></category>
		<category><![CDATA[表格]]></category>

		<guid isPermaLink="false">http://ttwan.com/?p=517</guid>
		<description><![CDATA[不管是公司内部沟通，还是项目与客户沟通，常常由于理解的偏差、遗漏带来很多工作细节上的错误，又常常由于这些小错误，恶化相互之间的关系。其实所有的问题，源头都在于沟通上出了问题，所以沟通，尤其是针对具体的事例，案子，设计上，沟通尤其需要讲究方法，这篇“交互设计表格”的文章，讲的是一个很常见的WEB登录界面的效果要求案例，用了一种有效的方法，可以避免相互沟通出现问题，并且大大提高工作效率，值得学习。

并且个人认为这个方法，其实可以延展开到很多的工作方法当中，尤其是涉及到团队协作的工作场景里。]]></description>
			<content:encoded><![CDATA[<p><span style="font-family: Arial;"><span style="font-size: 10.5pt;">说：在一个房间里丢了一根针，你需要找到它，你会用什么办法？<br />
答：扫把；吸铁；放大镜。。。粉笔。。。<br />
Ok，使用粉笔？请看下图↓</span></span></p>
<p><img title="fangjianbiaoge" src="http://ttwan.com/wp-content/uploads/2009/11/6797_fangjianbiaoge.gif" alt="fangjianbiaoge" width="500" height="182" /></p>
<p>划分区块，每个找过的地方做个标志。可能不是很快找到，但绝对有效。表格能确保我们不遗漏。</p>
<p><span style="color: #c0c0c0;">———————————————————————</span></p>
<p><span style="color: #c0c0c0;"> </span></p>
<p>说：2个山，能组成几个字 ？<br />
答：出，屾，王。。。（我继续想想）<br />
Ok，我们使用表格。</p>
<p><img title="2geshan" src="http://ttwan.com/wp-content/uploads/2009/11/bf13_2geshan.gif" alt="2geshan" width="328" height="115" /></p>
<p>正常的应该都出来了吧。不是每个人都才思敏捷，但表格能帮我们穷举，得出正确结果。</p>
<p><span style="color: #c0c0c0;">———————————————————————-</span></p>
<p><span style="color: #c0c0c0;"> </span></p>
<p>回到主题，我们说说<span style="color: #ff0000;">交互设计表格</span>。<br />
先说交互设计师的烦恼：<br />
你是不是常常觉的状态没有考虑全，一遍一遍的琢磨？<br />
你是不是常常觉的跟需求方交流费尽口舌，对方还糊涂？<br />
你是否常常一个接一个的场景描述，且大部分都是重复的文字？<br />
Ok，我们来看下交互设计表格能否解决我们的大部分烦恼。</p>
<p><span style="color: #ff0000;">表格说明：划分2个纬度——页面元素和用户行为。最左边一列是页面可见元素（包括光标）；最上面一行，是用户的行为（尽量按操作流程）。中间交叉的为场景描述。</span></p>
<p><span style="color: #ff0000;"> </span></p>
<p>举例分析：客户端的二级登录</p>
<p><img title="mouren" src="http://ttwan.com/wp-content/uploads/2009/11/07c1_mouren.gif" alt="mouren" width="337" height="236" /></p>
<p>针对以上内容，<span style="color: #ff0000;">交互设计表格</span>（只针对交互内容）如下↓：</p>
<p><img title="jiaohubiaogetu" src="http://ttwan.com/wp-content/uploads/2009/11/bd42_jiaohubiaogetu.gif" alt="jiaohubiaogetu" width="796" height="605" /></p>
<p>表格中提到的状态图如下：</p>
<p>↓图例1：未行动</p>
<p><img title="mouren" src="http://ttwan.com/wp-content/uploads/2009/11/3102_mouren1.gif" alt="mouren" width="337" height="236" /></p>
<p>↓图例2：请您输入用户名</p>
<p><img title="shuruyonghuming" src="http://ttwan.com/wp-content/uploads/2009/11/60cd_shuruyonghuming.gif" alt="shuruyonghuming" width="337" height="236" /></p>
<p>↓图例3：X密码有误，请重新输入</p>
<p><img title="mimacuowu" src="http://ttwan.com/wp-content/uploads/2009/11/48e5_mimacuowu.gif" alt="mimacuowu" width="337" height="236" /></p>
<p>↓图例4：正在登录</p>
<p><img title="zhengzaidenglu" src="http://ttwan.com/wp-content/uploads/2009/11/8222_zhengzaidenglu.gif" alt="zhengzaidenglu" width="337" height="236" /></p>
<p>↓图例5：！超时，请重新登录!</p>
<p><img title="chaoshi" src="http://ttwan.com/wp-content/uploads/2009/11/f294_chaoshi.gif" alt="chaoshi" width="337" height="236" /></p>
<p>———————————————————————–</p>
<p>此方式，在工作中，运行良好。利于检测和交流。</p>
<p>ok，希望<span style="color: #ff0000;">交互设计表格</span>能对你也有帮助。</p>
<div  class="related_post_title">随机日志</div><ul class="related_post"><li><a href="http://ttwan.com/2010/05/hdtmedia-%e5%af%8c%e5%aa%92%e4%bd%93%e5%b9%bf%e5%91%8a%e7%8e%87%e5%85%88%e7%99%bb%e9%99%86ipad/" title="HDTMEDIA: 富媒体广告率先登陆IPAD">HDTMEDIA: 富媒体广告率先登陆IPAD</a></li><li><a href="http://ttwan.com/2009/10/qq%e5%86%9c%e5%9c%ba%e7%9a%84%e8%90%a5%e9%94%80%e6%80%9d%e8%80%83/" title="何胜中：QQ农场的营销思考">何胜中：QQ农场的营销思考</a></li><li><a href="http://ttwan.com/2010/01/%e8%bd%ac%ef%bc%9a%e8%bf%91%e6%9c%9f%e4%b8%ad%e7%be%8e%e5%9b%bd%e9%99%85%e8%82%89%e6%90%8f%e8%b7%af%e7%ba%bf%e5%9b%be%ef%bc%88%e4%ba%8c%ef%bc%89/" title="转：近期中美国际肉搏路线图（二）">转：近期中美国际肉搏路线图（二）</a></li><li><a href="http://ttwan.com/2010/01/%e6%89%8b%e6%9c%ba%e4%b8%8a%e7%9a%84-near-me-now-%e5%8a%9f%e8%83%bd%e7%bb%88%e4%ba%8e%e5%88%b0%e6%9d%a5%ef%bc%8cgoogle-%e5%91%8a%e8%af%89%e4%bd%a0%e5%91%a8%e8%be%b9%e6%9c%89%e5%93%aa%e4%ba%9b%e5%95%86/" title="手机上的 Near Me Now 功能终于到来，Google 告诉你周边有哪些商户">手机上的 Near Me Now 功能终于到来，Google 告诉你周边有哪些商户</a></li><li><a href="http://ttwan.com/2010/05/what-makes-mobile-positioning-ads-put-on-hold/" title="是什么让移动定位广告停滞不前？">是什么让移动定位广告停滞不前？</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://ttwan.com/2009/11/%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e8%a1%a8%e6%a0%bc/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

