初识Axure

印象

记录

使用Axure的第一天。

过程

第一次使用axure,因为有码代码的经验,“陌生操作”试着鼓捣了个Demo01,之后网上找了个拖动验证的demo(作者:人人都是产品经理@Axure原型设计工场 ),以及一个中继器实现灯箱效果和中继器小效果体验的视频(作者:51CTO学院@马建伟),感觉axure主要注重的是逻辑思路和对交互的思考,而码代码需要注意更多的是,细节、逻辑的具体实现,程序的优化。

理解

Axure搭建原型时快捷和方便这一点,对将“想法变现”,实现效果展示有着重大作用。对开发的阶段目标的规划,对团队中设计人员和开发人员的理解执行提供了具体参考、初步描述。

练习

德莫

德莫01

实现效果图

这里写图片描述

这里写图片描述

具体描述
返回箭头,无逻辑操作
账号,密码两个矩形框,与之对应有两个文本输入入框。
阴影部分为验证区域,为占位区,并无具体展示。
提示:“账号与密码为空”,是通过实现矩形框的显示隐藏,实现类似Android中的Toast效果。
提交,会判断账号密码的输入框是否为空,为空弹出提示,不为空跳转New Page 1 页面。

New Page 1 页面为 一个矩形框,文本设置为“登录成功”。

Use
使用元件:矩形1/矩形2/文本框/提交按钮
事件:
- 提交按钮——点击,判断条件,进行跳转或提示。

德莫02

实现效果图

这里写图片描述

这里写图片描述

这里写图片描述

具体描述

将鼠标放上圆形按钮会出现拼图。(拖动时也出现)

圆角矩形框中有两个拼图模块,拖动圆形按钮,一个拼图模块同步移动,将两个模块重叠,完成验证。显示矩形框(无边)并设置文本“登录成功!用时1.57秒,击败了98%的人!”,未重叠,则显示“验证失败 > . < 请重新验证~”

Use MTL(more than last)

这里写图片描述
使用的元件:设置无边的矩形/椭圆形/动态面板/合并的拼图块

事件:

  • 鼠标移入时/鼠标移出时——显示/隐藏拼图动态面板
  • 拖动时——拼图块src跟随移动
  • 拖动后——判断src位置是否与位于拼图嵌入区域,弹出提示文字,失败拖动按钮和拼图块回到起始位置,成功则使拼图块与嵌入区重合,拖动按钮与拼图块位置相对位置保持不变。

德莫03

实现效果图

这里写图片描述

这里写图片描述
这里写图片描述

具体描述

点击图片或者播放键,弹出带灯箱效果(即背景为一指定色,突出显示内容)的视频,视频为内联框架通过指定的url地址访问。点击背景,退出视频播放,返回首页。

Use MTL

这里写图片描述

使用的元件:内联框架

事件:

  • 图片和播放按钮的鼠标单击,显示内联框架,设置显示效果为灯箱效果,通过内联框架访问设置的框架目标——指定的URL地址,播放视频。

德莫04

实现效果图

这里写图片描述

这里写图片描述

具体描述

主要使用了中继器,双击进入中继器的Item,在里面设置Item显示。当点开视频播放时,会将视频以下的内容往下顶,关闭视频播放,又会对视频以下的内容有拉动效果。
这里写图片描述

Use MTL

使用的元件:中继器,双击中继器,设置Item显示效果。

事件:

  • 点击图片或播放按钮事件。

相关链接

51CTO学院 马建伟/灯箱效果+中继器

人人都是产品经理@Axure原型设计工场+类似极验验证的拖动拼图效果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值