原创视频|手把手教你用Axure做一个微信高保真原型(一)

1、背景

       其实模仿微信做高保真原型本意是用其面试。之前没有PM经验，也需一些可入眼的作品，方才做了这样一个原型设计。蒙PMCAFF论坛不弃邀我解析该原型，受宠若惊之余便即答应下来，毕竟拜读高段位PM作品也已多时，不愿甘做伸手党的我也该为社区做点共享了。我将会按屏幕，一屏一屏的解析我的思路和实现方法，当抛砖引玉，倘有精彩处还请大家多多点赞，若太过平淡无奇亦欢迎各路侠客拍砖；先行谢过了！废话不多说，看招。

2、思路

       这个微信高保真原型，初衷是尽己所能最大限度的模仿真实的iPhone端微信功能，主要从以下几点着手：
将所有的子页面全都堆放在axure的一个页面中(如下图)，再在iPhone事先放置的框架中打开这个页面，通过相关的动态面板移动或隐藏等功能使各子页面在框架中组织有序。如：点按“返回”，当前页面向右推出，目标页面从左边进入。
界面中几乎所有的icon都与iPhone端微信一致。
采用iPhone5c外壳感官体验更柔和一些，iPhone内框架长宽比例为320px*568px，所有的页面也是基于这个比例设置。
                                                         图1、外层框架



                                                         
                                                         图2、所有页面


        

                                                         图3、框架及最终页面效果图



                                           

3、界面解析

       本次解析的主要是针对微信聊天页面，主要功能包括：
聊天列表上下拖动
删除聊天列表，消息标记为未读、已读
聊天信息回复
       涉及到得axure主要知识点：
动态面板瞬时拖动、移动、隐藏及显示（动态面板展开）
中继器
字符截取
键盘输入
       界面效果如下图

3.1、界面动态面板结构

3.2、聊天列表上下拖动功能解析

聊天列表点按后可上下拖动，主要用到的是axure瞬时拖动距离，具体实现如下：



聊天列表的动态面板移动需考虑拖动时和拖动释放后分别的效果：
拖动时：
聊天列表可以纵向上下移动；
移动时动态面板回拉效果(也就是说越往下拖动越费劲儿)
在“拖动动态面板”时设置沿Y轴移动“聊天列表”。
聊天列表AB两个点的坐标分别是（0，78）、（0，516），动态面板只能沿Y轴移动，所以当动态面板Y坐标（A点）值大于78时则是向下拖动，需要设置一个回拉的效果，即设置条件判断当Y大于78时，动态面板往反方向移动2/3的相对距离，也就是设置回拉的Y坐标值为[[-dragy/3*2]]（其中dragy为瞬时拖动的Y坐标值，负号代表向反方向移动）；反之向上移动时，当动态面板Y坐标（B点）值小于516时回拉[[-dragy/3*2]]。
     2.拖动释放后：
向下拖动释放后需要让面板回到拖动前的位置；向上拖动时如果聊天列表底部边界小于导航栏顶部边界的则将聊天列表移动到底边界与导航菜单定边界对齐的位置。
向下拖动释放后设置“移动动态面板结束后”将动态面板移动到绝对位置，也就是回到A点处（0，78）。
向上拖动释放后设置“移动动态面板结束后”，如果动态面板底边界小于导航栏的顶边界，那么将动态面板移动到和导航栏顶边界相同的位置，也就是说移动到绝对位置[[516-chatList.height]]。
拖动结束后动态面板回到之前的位置是有一个延迟的效果，所以需添加一个线性移动动画耗时250ms即可。

写在后面，各位看官实在抱歉，最近刚入职，两个礼拜要出低保真和高保真原型，还要写PRD小弟目前实在太忙，用我的性取向发誓：这个文章我会一直发下去的，这个请大家放心。
ps：这个视频转码有点模糊，回头我再上传一个转一个高清上传。