初识Axure

1 印象

1.1 记录

使用Axure的第一天。

1.2 过程

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

1.3 理解

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

2 练习

2.1 德莫

2.1.1 德莫01

实现效果图

登录失败“吐丝”提示
登录成功-跳转

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

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

Use
使用元件:矩形1/矩形2/文本框/提交按钮
事件:

  • 提交按钮——点击,判断条件,进行跳转或提示。

2.1.2 德莫02

实现效果图

axure中展示效果
登录失败之后的第二次验证
登录成功效果

具体描述

Demo结构

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

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

Use MTL(more than last)
使用的元件:设置无边的矩形/椭圆形/动态面板/合并的拼图块

事件:

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

2.1.3 德莫03

实现效果图

axure中展示效果/最外层隐藏的为内联框架
播放前
点击播放的灯箱效果

具体描述

Demo结构

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

Use MTL

使用的元件:内联框架

事件:

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

2.1.4 德莫04

实现效果图

axure中展示效果
点击播放前
点击播放后

具体描述

Demo结构

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

Use MTL

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

事件:

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

3 相关链接:

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.认识Axure界面 工作区:创建线框图的主要区域(也称为画布) 站点地图:用于创建和管理页面。 组件:它是组件...
    binarystar阅读 1,452评论 1 26
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,873评论 25 709
  • 今天早晨听到孩子对我说 “妈妈,你知道吗?前几天在学校里,老师让我们做的那个自由发挥的帽子,我非常喜欢,但是奶奶却...
    慧子永远没有太晚的开始阅读 122评论 7 8
  • 晓花姐是我大姑的女儿,我不太清楚她具体是哪一年出生的,只知道我自己的哥哥是87年的孩子,而她要大一两岁。 她生的挺...
    闲酒肆阅读 516评论 0 1