阿石的日志 » axure

Axure 组件变量值传递妙用

ashnotes — Sat, 23 Jan 2010 01:57:29 +0000

Axure 是产品原型设计的一大利器，其所作出每一个原型都有以下组件（ widget ）构成，如文本块（ Text Panel ）、矩形框（ Rectangle )、按钮（ button ）、文本输入框( Text Field )、以及让众多 Axurers 喜爱的动态层面板（ Dynamic Panel ）等。正是因为这些功能形态各异的组件组成了一个产品的基本框架、原始形态，而每个组件都可以拥有一个名号–标签（ 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 条件对输入框赋值并进行判断：点击登录按钮, Axure 右上侧会出现”注释&交互”栏，建立两个 case 条件：一是当帐户名输入框 user 不等于 ashnotes.com 时，在 error 动态层面板触发显示 user_error 动态层；二是当密码输入框 password 不等于123456时，在 error 动态层面板触发显示 password_error 动态层，具体步骤如下图所示。

3 由于有帐户名和密码两个输入框需要鉴权判断,因此需要至少建立两个动态层显示判断异常错误.

右键error动态层面板，新建两个动态层,分别命名为user_error和password_error

6 最后是 case 条件的处理来控制 error 动态层面板，及其他出错提示。在实际运用过程中由于 case 判断过多的情况下，可以在需求书上加以详细描述，便于后台开发人员了解判断逻辑及编码。

二、利用标签命名值传递

京东的订单核对页在处理新老收货人信息,点击修改者切换到输入新地址状态，保存则回到填写好的地址状态，只有切花，交互清晰明了，值得模仿、推荐。

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

1 新建 modify 和 address 两个动态层面板，每个面板新建两个层，各自对应命名为1、2号层

2 具体原理是对动态层面板各组件命名，交叉触发显示，即利用 modify 的1号动态层同时触发显示其本身的2号层及 address 的2号动态层；modify 的2号动态层触发显示其本身的1号层及address的1号动态层。呵呵，说起来拗口，点击“修改”和“关闭”后看看效果就知道了

——————————————————-阿石的日志分割线————————————————–

备注：丁宇同学曾在《从“产品需求文档”（PRD）到“产品设计文档”（PDD）》提出将产品原型与PRD融在一个文档中。这是一个很好的倡议，但得基于产品与开发两方的深度认可。毕竟axure的独门利器集中于快速交付html交互产出物 ，在产品设计沟通、体验模拟、展示演说方面才是他的初衷，而PRD更多的是产品研发过程中所需要的详细雕琢的文档。

Axure RP及广磊兄

ashnotes — Fri, 18 Dec 2009 06:08:02 +0000

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 在中国的布道者，有什么问题和想法可以去看看，看看总有收获。

Protonotes:在线原型注释工具

ashnotes — Thu, 26 Nov 2009 08:54:40 +0000

Protonotes，顾名思义，是由prototype和notes和两个单词组成的合成词，翻译为“原型注释”，之所以加上在线二字，是因为产品团队制作原型时可通过Protonotes官方提供的数据库和自己设定的数据库，把相关的注释文字写进数据库、团队协作查看，让文本注释在线随时随地查看，方便沟通需求的好工具。

使用Protonotes也超级简单，不须下载任何工具，通过网上注册，填写邮箱地址申请团队协作码（groupnumber）。注意查收来自info@protonotes.com的电子邮件，内容一般如下：

Welcome to Protonotes!

Using Protonotes is easy. Your Protonotes group number is EkfN4pUZF8BG. All you need to do is copy and paste the code below into the of any page of your prototype:

……….

这个回复邮件目地是告诉申请人两件事情：
一是团队协作码EkfN4pUZF8BG，这应该是随机并唯一的。任何团队成员共享一个团队协作码，便于统一使用查看；
二是在原型（如axure生成的index.html)插入 JS代码段，便于加载Protonotes；

这里要说明的是JS代码段必须插在原型html页面的和之间，并随时保证网络链接通畅。
下面是官方的测试页面和截图 http://www.protonotes.com/test-protonotes-out.html

团队任何成员通过嵌入的Protonotes导航，可以在原型页面任何位置新建、拖曳、查看备份注释标签，并传到Protonotes给用户设定官方数据库，为数据安全隐私起见用户自己也可以设定数据库来同步注释文本。无论如何，团队成员只要通过以下链接都可以查看注释文本（备注：其中groupnumber是都各自不同的，这里是阿石自己申请的）

http://www.protonotes.com/get-all-group-notes.html?groupnumber=EkfN4pUZF8BG

如果是自己设定的数据库，Protonotes会在设定数据库完成后分配一个privetedb码，具体查看

http://www.protonotes.com/get-all-group-notes.html?groupnumber=EkfN4pUZF8BG&privatedb=SdT68P9ab0yp

AxureRP本身是带有注释功能，但在展示透明效果略差以及缺少注释同步备份功能上，虽然有团队share功能，但在给领导演示、产品展示方面Protonotes有可乘之机～稍微不足的是Protonote不支持中文，中文打注释时会出现乱码。另外我自己利用Protonotes的注释效果，也欢迎各位有兴趣的同学在上面打注释，：）http://www.ashnotes.com/experience/i-dong-game-center/