Axure组件值传递妙用-交互设计-以用户为中心的设计

作者:阿石 来源:阿石的日志   收集 2010-02-18

width=613

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

一、利用组件赋值值传递

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

taobao_login

利用AxureRP5.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动态层,具体步骤如下图所示。

taobao_login_axure2

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

二、利用标签命名值传递

 

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

360buy_confirm

 

——————————————————-可爱的分割线————————————————–
郑重声明:资讯 【Axure组件值传递妙用-交互设计-以用户为中心的设计】由 发布,版权归原作者及其所在单位,其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实,请读者仅作参考,并请自行核实相关内容。若本文有侵犯到您的版权, 请你提供相关证明及申请并与我们联系(qiyeku # qq.com)或【在线投诉】,我们审核后将会尽快处理。
—— 相关资讯 ——