Posts Tagged ‘组件’

Axure 组件变量值传递妙用

一月 23rd, 2010

Axure 是产品原型设计的一大利器,其所作出每一个原型都有以下组件( widget )构成,如文本块( Text Panel )、矩形框( Rectangle )、按钮( button )、文本输入框( Text Field )、以及让众多 Axurers 喜爱的动态层面板( Dynamic Panel )等。正是因为这些功能形态各异的组件组成了一个产品的基本框架、原始形态,而每个组件都可以拥有一个名号–标签( label ),通过对标签命名、组件变量赋值就可以作出一些令人惊喜的交互效果。

一、利用组件变量赋值值传递

淘宝改版了,但淘宝的登录入口还是没变,可见阿里人对淘宝登录入口的自信。

taobao_login

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

taobao_login_axure

步骤分解如下:

1 如上图,建立帐户名和密码两个输入框,分别打上  user  和  password 标签(  label  ),便于登录按钮识别判断

2 新建立动态层面板( dynamic panel ),将面板命名为  error  ,右键将其隐藏

3 由于有帐户名和密码两个输入框需要鉴权判断,因此需要至少建立两个动态层显示判断异常错误.右键 error 动态层面板,新建两 个动态层,分别命名为   user_error  和  password_error

4 编辑两个动态层,如将  user_error  编辑为“用户不存在”、将  password_error  编辑为“密码不匹配”,这里只考虑简单的两个判断,登录前端后端鉴权多达几十种判断都可以在  error  动态层里面显示

关键一步,编辑 case 条件对输入框赋值并进行判断:点击登录按钮,  Axure  右上侧会出现”注释&交互”栏,建立两个  case  条件:一是当帐户名输入框   user  不等于   ashnotes.com  时,在 error 动态层面板触发显示  user_error  动态层;二是当密码输入框   password  不等于123456时,在 error 动态层面板触发显示  password_error  动态层,具体步骤如下图所示。

taobao_login_axure2

3 由于有帐户名和密码两个输入框需要鉴权判断,因此需要至少建立两个动态层显示判断异常错误.
右键error动态层面板,新建两个动态层,分别命名为user_error和password_error

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

二、利用标签命名值传递

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

360buy_confirm

利用 AxureRP 5.6做的原型(下载RP文件请点击 360buy-confirm-axure ,查看效果请点击这里),如下图
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更多的是产品研发过程中所需要的详细雕琢的文档。

Related Posts with Thumbnails