﻿<?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>关注 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>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 <a href="http://www.ashnotes.com/axure-label-and-value-app/"> 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="Axure RP及广磊兄" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Faxure-and-guanglei%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Faxure-label-and-value-app%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 RP及广磊兄</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-label-and-value-app%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="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%2Faxure-label-and-value-app%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="读《Web 表单设计》" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fread-web-form-design%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Faxure-label-and-value-app%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/2970320.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;">读《Web 表单设计》</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%2Faxure-label-and-value-app%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>
        </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" 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="size-full wp-image-313 aligncenter" title="taobao_login" src="http://www.ashnotes.com/wp-content/uploads/2010/01/taobao_login1.jpg" alt="taobao_login" width="470" height="187" /></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="size-full wp-image-315 aligncenter" title="taobao_login_axure" src="http://www.ashnotes.com/wp-content/uploads/2010/01/taobao_login_axure.jpg" alt="taobao_login_axure" width="434" height="187" /></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  右上侧会出现”注释&amp;交互”栏，建立两个  case  条件：一是当帐户名输入框   user  不等于   ashnotes.com  时，在 error 动态层面板触发显示  user_error  动态层；二是当密码输入框   password  不等于123456时，在 error 动态层面板触发显示  password_error  动态层，具体步骤如下图所示。</p>
<p><img class="size-full wp-image-319 aligncenter" title="taobao_login_axure2" src="http://www.ashnotes.com/wp-content/uploads/2010/01/taobao_login_axure2.jpg" alt="taobao_login_axure2" width="616" height="382" /></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="size-full wp-image-322 aligncenter" title="360buy_confirm" src="http://www.ashnotes.com/wp-content/uploads/2010/01/360buy_confirm.jpg" alt="360buy_confirm" width="449" height="223" /></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="size-full wp-image-323 aligncenter" title="360buy_confirm_axure" src="http://www.ashnotes.com/wp-content/uploads/2010/01/360buy_confirm_axure.jpg" alt="360buy_confirm_axure" width="438" height="190" /></span></div>
<div><span style="color: #4d4d4d; font-family: 'Lucida Grande', 'Helvetica Neue', Arial, 'Lucida Sans Unicode', sans-serif; line-height: 20px;">&nbsp;</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>&nbsp;</p>
<p></span></div>
<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 RP及广磊兄" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Faxure-and-guanglei%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Faxure-label-and-value-app%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 RP及广磊兄</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-label-and-value-app%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="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%2Faxure-label-and-value-app%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="读《Web 表单设计》" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.ashnotes.com%2Fread-web-form-design%2F&from=http%3A%2F%2Fwww.ashnotes.com%2Faxure-label-and-value-app%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/2970320.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;">读《Web 表单设计》</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%2Faxure-label-and-value-app%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>
        </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-label-and-value-app/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

