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

<channel>
	<title>阿石的日志 &#187; 动态层面板</title>
	<atom:link href="http://www.ashnotes.com/tag/%e5%8a%a8%e6%80%81%e5%b1%82%e9%9d%a2%e6%9d%bf/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ashnotes.com</link>
	<description>关注产品（网站）策划、信息架构、网站分析、网站优化</description>
	<lastBuildDate>Thu, 22 Jul 2010 06:22:23 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Axure 组件变量值传递妙用</title>
		<link>http://www.ashnotes.com/axure-label-and-value-app/</link>
		<comments>http://www.ashnotes.com/axure-label-and-value-app/#comments</comments>
		<pubDate>Sat, 23 Jan 2010 01:57:29 +0000</pubDate>
		<dc:creator>ashnotes</dc:creator>
				<category><![CDATA[互联网]]></category>
		<category><![CDATA[信息架构]]></category>
		<category><![CDATA[axure]]></category>
		<category><![CDATA[交互设计]]></category>
		<category><![CDATA[动态层面板]]></category>
		<category><![CDATA[组件]]></category>

		<guid isPermaLink="false">http://www.ashnotes.com/?p=310</guid>
		<description><![CDATA[
Axure 是产品原型设计的一大利器，其所作出每一个原型都有以下组件（ widget ）构成，如文本块（ Text Panel ）、矩形框（ Rectangle )、按钮（ button ）、文本输入框( Text Field )、以及让众多 Axurers 喜爱的动态层面板（ Dynamic Panel ）等。正是因为这些功能形态各异的组件组成了一个产品的基本框架、原始形态，而每个组件都可以拥有一个名号&#8211;标签（ label ）,通过对标签命名、组件变量赋值就可以作出一些令人惊喜的交互效果。
一、利用组件变量赋值值传递
淘宝改版了，但淘宝的登录入口还是没变，可见阿里人对淘宝登录入口的自信。

利用  AxureRP 5.6 做的原型(下载RP文件请点击 taobao-login-axure ，查看效果请点击这里)，如下图

步骤分解如下：
1 如上图,建立帐户名和密码两个输入框,分别打上  user  和  password 标签(  label  )，便于登录按钮识别判断
2 新建立动态层面板（ dynamic panel )，将面板命名为  error  ，右键将其隐藏
3 由于有帐户名和密码两个输入框需要鉴权判断,因此需要至少建立两个动态层显示判断异常错误.右键 error 动态层面板，新建两 个动态层,分别命名为   user_error  和  password_error
4 编辑两个动态层，如将  user_error  编辑为“用户不存在”、将  password_error  编辑为“密码不匹配”，这里只考虑简单的两个判断，登录前端后端鉴权多达几十种判断都可以在  error  动态层里面显示
5 关键一步，编辑 case [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone" title="Axure" src="http://www.ashnotes.com/wp-content/uploads/2009/12/axure.png" alt="" width="613" height="122" /></p>
<p><strong>Axure </strong>是产品原型设计的一大利器，其所作出每一个原型都有以下组件（ widget ）构成，如文本块（ Text Panel ）、矩形框（ Rectangle )、按钮（ button ）、文本输入框( Text Field )、以及让众多 Axurers 喜爱的动态层面板（ Dynamic Panel ）等。正是因为这些功能形态各异的组件组成了一个产品的基本框架、原始形态，而每个组件都可以拥有一个名号&#8211;标签（ label ）,通过对标签命名、组件变量赋值就可以作出一些令人惊喜的交互效果。</p>
<p><strong>一、利用组件变量赋值值传递</strong></p>
<p>淘宝改版了，但淘宝的登录入口还是没变，可见阿里人对淘宝登录入口的自信。</p>
<p><img class="alignnone size-full wp-image-313" title="taobao_login" src="http://www.ashnotes.com/wp-content/uploads/2010/01/taobao_login1.jpg" alt="taobao_login" width="671" height="267" /></p>
<p>利用  AxureRP 5.6 做的原型<span style="font-family: 'Lucida Grande', 'Helvetica Neue', Arial, 'Lucida Sans Unicode', sans-serif; line-height: 20px; color: #4d4d4d;">(下载RP文件请点击<strong> </strong><a title="下载自阿石的日志www.ashnotes.com" href="http://www.box.net/shared/iepozjdpyu" target="_blank"><strong><span style="color: #0000ff;">taobao-login-axure</span></strong></a> ，查看效果请点击<a href="http://www.ashnotes.com/experience/taobao_login_axure/" target="_self"><strong><span style="color: #0000ff;">这里</span></strong></a>)<span style="color: #000000; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px;">，如下图</span></span></p>
<p><img class="alignnone size-full wp-image-315" title="taobao_login_axure" src="http://www.ashnotes.com/wp-content/uploads/2010/01/taobao_login_axure.jpg" alt="taobao_login_axure" width="620" height="267" /></p>
<p>步骤分解如下：</p>
<p>1 如上图,建立帐户名和密码两个输入框,分别打上  user  和  password 标签(  label  )，便于登录按钮识别判断</p>
<p>2 新建立动态层面板（ dynamic panel )，将面板命名为  error  ，右键将其隐藏</p>
<p>3 由于有帐户名和密码两个输入框需要鉴权判断,因此需要至少建立两个动态层显示判断异常错误.右键 error 动态层面板，新建两 个动态层,分别命名为   user_error  和  password_error</p>
<p>4 编辑两个动态层，如将  user_error  编辑为“用户不存在”、将  password_error  编辑为“密码不匹配”，这里只考虑简单的两个判断，登录前端后端鉴权多达几十种判断都可以在  error  动态层里面显示</p>
<p>5 <strong>关键一步</strong>，编辑 case 条件对输入框赋值并进行判断：点击登录按钮,  Axure  右上侧会出现&#8221;注释&amp;交互&#8221;栏，建立两个  case  条件：一是当帐户名输入框   user  不等于   ashnotes.com  时，在 error 动态层面板触发显示  user_error  动态层；二是当密码输入框   password  不等于123456时，在 error 动态层面板触发显示  password_error  动态层，具体步骤如下图所示。</p>
<p><img class="alignnone size-full wp-image-319" title="taobao_login_axure2" src="http://www.ashnotes.com/wp-content/uploads/2010/01/taobao_login_axure2.jpg" alt="taobao_login_axure2" width="880" height="546" /></p>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 865px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">3 由于有帐户名和密码两个输入框需要鉴权判断,因此需要至少建立两个动态层显示判断异常错误.</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 865px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">右键error动态层面板，新建两个动态层,分别命名为user_error和password_error</div>
<p>6 最后是 case 条件的处理来控制 error 动态层面板，及其他出错提示。在实际运用过程中由于 case 判断过多的情 况下，可以在需求书上加以详细描述，便于后台开发人员了解判断逻辑及编码。</p>
<p><strong>二、利用标签命名值传递</strong></p>
<p><strong> </strong></p>
<p><span style="font-weight: normal;">京东的订单核对页在处理新老收货人信息,点击修改者切换到输入新地址状态，保存则回到填写好的地址状态，只有切花，交互清晰明了，值得模仿、推荐。</span></p>
<p><span style="font-weight: normal;"><img class="alignnone size-full wp-image-322" title="360buy_confirm" src="http://www.ashnotes.com/wp-content/uploads/2010/01/360buy_confirm.jpg" alt="360buy_confirm" width="642" height="318" /></span></p>
<div><span style="color: #4d4d4d; font-family: 'Lucida Grande', 'Helvetica Neue', Arial, 'Lucida Sans Unicode', sans-serif; line-height: 20px;">利用 AxureRP 5.6做的原型(下载RP文件请点击 <a title="下载自阿石的日志 www.ashnotes.com" href="http://www.box.net/shared/kitedib9gk" target="_blank"><strong>360buy-confirm-axure</strong></a> ,查看效果请点击<a href="http://www.ashnotes.com/experience/360buy_confirm_axure/" target="_self"><strong>这里</strong></a>)，如下图</span></div>
<div><span style="color: #4d4d4d; font-family: 'Lucida Grande', 'Helvetica Neue', Arial, 'Lucida Sans Unicode', sans-serif; line-height: 20px;"><img class="alignnone size-full wp-image-323" title="360buy_confirm_axure" src="http://www.ashnotes.com/wp-content/uploads/2010/01/360buy_confirm_axure.jpg" alt="360buy_confirm_axure" width="625" height="272" /></span></div>
<div><span style="color: #4d4d4d; font-family: 'Lucida Grande', 'Helvetica Neue', Arial, 'Lucida Sans Unicode', sans-serif; line-height: 20px;"></p>
<div>1 新建 modify 和 address 两个动态层面板，每个面板新建两个层，各自对应命名为1、2号层</div>
<div>2 具体原理是对动态层面板各组件命名，交叉触发显示，即利用 modify 的1号动态层同时触发显示其本身的2号层及 address 的2号动态层；modify 的2号动态层触发显示其本身的1号层及address的1号动态层。呵呵，说起来拗口，点击<a href="http://www.ashnotes.com/experience/360buy_confirm_axure/" target="_self">“修改”和“关闭”</a>后看看效果就知道了</div>
<div>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-阿石的日志分割线&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;</div>
<div>备注：丁宇同学曾在<a href="http://dingyu.me/blog/posts/view/product-design-document" target="_blank">《从“产品需求文档”（PRD）到“产品设计文档”（PDD）》</a> 提出将产品原型与PRD融在一个文档中。这是一个很好的倡议，但得基于产品与开发两方的深度认可。毕竟axure的独门利器集中于<a href="http://www.ashnotes.com/axure-and-guanglei/" target="_blank"><strong>快速交付html交互产出物</strong></a> ，在产品设计沟通、体验模拟、展示演说方面才是他的初衷，而PRD更多的是产品研发过程中所需要的详细雕琢的文档。</div>
<p></span></div>
]]></content:encoded>
			<wfw:commentRss>http://www.ashnotes.com/axure-label-and-value-app/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
