“我根本没把你放在眼里。”
“因为你一直在我心里。”
▼
这是咸冬日的第叁篇文章
这两天业余时间学习了axure的基本功能,做了一个简单的微信原型练练手,教程分享给大家。
首先需要准备基本素材,可以从我的源文件中获取。
1.设置手机主页和home热键用例。
2.拖入内联框架(w273*h482),设置从不显示和隐藏边框,并链接到主页。
3.设置主页交互:
1)主页内拖入动态面板“内容区”(273X396),并增加4个menu状态(微信、通讯录、发现、我;保持动态面板和menu名称相同),暂时用4张图片代替切换)
注:如果要设置移动切换可以在一个动态面板(273*4X396)里平铺4个内联框架,交互时移动“内容区”到绝对坐标。
2)设置底部4个menu图标(微信、通讯录、发现、我),图片和矩形“组合”,在属性中设置选中图片时导入绿色图标,选中矩形字体变为绿色,将“微信”默认选中
3)设置动态面板和底部menu的交互,内容如下
4)在动态面板“内容区”的四个状态里,删除图片,分别拖入内联框架,分别指向相应页面(微信、通讯录、发现、我)
4.微信页面:主页—微信内联框架—微信页面—中继器
1)输入微信界面中继器数据集,包括头像img、时间time、聊天talk、名称name;
2)中继器项目交互:判断 talk 文字长度大于 18 时,截取第 0-18 位字符显示并在后面加上"...",如果小于 20 就直接全部显示,“加载时”用例如下:
3)case1:将中继器转为动态面板,设置拖动时可垂直拖动
4)case2:当界面下拉时超过100mm,不能继续下拉
5)case3:模拟拖动过程中的“不跟手”效果,根据当前 y 轴坐标,每次移动的瞬间,向反方向移动回 2/3 的距离
6)向下拖动时显示小程序界面,此处暂时用HOLD矩形代替,设置隐藏,拖动时显示,结束拖动时隐藏
7)case4:结束拖动时回到原位置
8)同理设置上拉边界
9)设置横向快速拖动和慢速拖动效果以及相应四个面板左右切换(这个是通过平铺动态面板实现,并且需要在主页动态面板加矩形实现,内容比较多,在这里不做了,感兴趣的伙伴可以交流哦)。
5.通讯录功能实现
1)通讯录沿y轴拖动
通过矩形、图片、标签等设置通讯录界面,转为动态面板“通讯录”,将字母索引(自己用矩形制作)转为动态面板“状态条”。
2)通讯录右侧字母锚点效果
中间显示的大字母:设置圆角矩形(80X80),将位置调到主页居中(x96X y162),去边框,填充灰色,输入字母A白色,转为动态面板“字母”,对“状态条”设置鼠标移入“字母”显示,移出隐藏,将“字母”和“状态条”右键固定到浏览器。如下为字母索引用例,依次设置即可。
3)通讯录详细资料界面
利用中继器即可实现,如下为部分用例,其余用例操作相同
4)详细资料和通讯录界面的交互
设置全局变量“clickname”,在通讯录界面鼠标单击时设置变量值为相应人名的矩形的姓名,在“父框架”中打开“详细资料”(中继器)
在“详细资料”页面载入时新增过滤“xx”,设置过滤规则,实现点击哪个联系人显示相应详细资料
本次分享的源文件百度云分享链接:
https://pan.baidu.com/s/1kzF9RduvTuRvvkC7aOqTYg
密码:wtul
后记:嗨呀,微信简单的功能到这里基本实现,希望对大家有所帮助。后续界面切换和漂流瓶等功能可以看教程学习下哦,由于资源版权问题,这里不公开分享,需要的小伙伴关注公众号“咸冬日”,回复axure,私聊获取Axure 8的安装资源和《axure从入门到精通》视频教程哦!
下期预告:我们总是在不断追寻自己的意义,于是焦虑和迷茫,花费大量的时间在权衡、取舍的选择上,选择很重要,但千万不能因为耗费太多时间而错失良机。硕博连读的通知已经出来,纠结了一年多,选择千千万,要“从心”,就是要“怂”,对不对呀?
• end •
咸冬日
世间一束有咸味的光