“我根本没把你放在眼里。”
“因为你一直在我心里。”
▼
这是咸冬日的第叁篇文章
这两天业余时间学习了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 •
咸冬日
世间一束有咸味的光
原创文章，作者：交互精选，如若转载，请注明出处：https://www.iamue.com/35792/
