交互学堂
专注分享专业知识

微信Axure原型练习和资源分享

“我根本没把你放在眼里。”

“因为你一直在我心里。”

这是咸冬日的第篇文章

微信Axure原型练习和资源分享

这两天业余时间学习了axure的基本功能,做了一个简单的微信原型练练手,教程分享给大家。

首先需要准备基本素材,可以从我的源文件中获取


1.设置手机主页和home热键用例。

2.拖入内联框架(w273*h482),设置从不显示和隐藏边框,并链接到主页。

微信Axure原型练习和资源分享


3.设置主页交互:

1)主页内拖入动态面板“内容区”(273X396),并增加4个menu状态(微信、通讯录、发现、我;保持动态面板和menu名称相同),暂时用4张图片代替切换)

注:如果要设置移动切换可以在一个动态面板(273*4X396)里平铺4个内联框架,交互时移动“内容区”到绝对坐标。

2)设置底部4个menu图标(微信、通讯录、发现、我),图片和矩形“组合”,在属性中设置选中图片时导入绿色图标,选中矩形字体变为绿色,将“微信”默认选中

微信Axure原型练习和资源分享


3)设置动态面板和底部menu的交互,内容如下

微信Axure原型练习和资源分享


4)在动态面板“内容区”的四个状态里,删除图片,分别拖入内联框架,分别指向相应页面(微信、通讯录、发现、我)

微信Axure原型练习和资源分享

4.微信页面:主页微信内联框架微信页面中继器

1)输入微信界面中继器数据集,包括头像img、时间time、聊天talk、名称name;

2)中继器项目交互:判断 talk 文字长度大于 18 时,截取第 0-18 位字符显示并在后面加上”…”,如果小于 20 就直接全部显示,“加载时”用例如下:

微信Axure原型练习和资源分享

3)case1:将中继器转为动态面板,设置拖动时可垂直拖动

4)case2:当界面下拉时超过100mm,不能继续下拉

5)case3:模拟拖动过程中的“不跟手”效果,根据当前 y 轴坐标,每次移动的瞬间,向反方向移动回 2/3 的距离

6)向下拖动时显示小程序界面,此处暂时用HOLD矩形代替,设置隐藏,拖动时显示,结束拖动时隐藏

7)case4:结束拖动时回到原位置

8)同理设置上拉边界

微信Axure原型练习和资源分享

9)设置横向快速拖动和慢速拖动效果以及相应四个面板左右切换(这个是通过平铺动态面板实现,并且需要在主页动态面板加矩形实现,内容比较多,在这里不做了,感兴趣的伙伴可以交流哦)。


5.通讯录功能实现

1)通讯录沿y轴拖动

通过矩形、图片、标签等设置通讯录界面,转为动态面板“通讯录”,将字母索引(自己用矩形制作)转为动态面板“状态条”。

微信Axure原型练习和资源分享


2)通讯录右侧字母锚点效果

中间显示的大字母:设置圆角矩形(80X80),将位置调到主页居中(x96X y162),去边框,填充灰色,输入字母A白色,转为动态面板“字母”,对“状态条”设置鼠标移入“字母”显示,移出隐藏,将“字母”和“状态条”右键固定到浏览器。如下为字母索引用例,依次设置即可。

微信Axure原型练习和资源分享


3)通讯录详细资料界面

利用中继器即可实现,如下为部分用例,其余用例操作相同

微信Axure原型练习和资源分享


4)详细资料和通讯录界面的交互

设置全局变量“clickname”,在通讯录界面鼠标单击时设置变量值为相应人名的矩形的姓名,在“父框架”中打开“详细资料”(中继器)

微信Axure原型练习和资源分享

在“详细资料”页面载入时新增过滤“xx”,设置过滤规则,实现点击哪个联系人显示相应详细资料

微信Axure原型练习和资源分享



本次分享的源文件百度云分享链接:

https://pan.baidu.com/s/1kzF9RduvTuRvvkC7aOqTYg

密码:wtul


后记:嗨呀,微信简单的功能到这里基本实现,希望对大家有所帮助。后续界面切换和漂流瓶等功能可以看教程学习下哦,由于资源版权问题,这里不公开分享,需要的小伙伴关注公众号“咸冬日”,回复axure,私聊获取Axure 8的安装资源和《axure从入门到精通》视频教程哦!

微信Axure原型练习和资源分享

下期预告:我们总是在不断追寻自己的意义,于是焦虑和迷茫,花费大量的时间在权衡、取舍的选择上,选择很重要,但千万不能因为耗费太多时间而错失良机。硕博连读的通知已经出来,纠结了一年多,选择千千万,要“从心”,就是要“怂”,对不对呀?

 • end • 


咸冬日

世间一束有咸味的光

微信Axure原型练习和资源分享
赞(1) 打赏
未经允许不得转载:IAMUE » 微信Axure原型练习和资源分享

交互学院

在线学习交互设计课程1元秒杀Sketch入门课程

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏