原创视频⼿把⼿教你⽤Axure做⼀个⾼保真原型(⼀)
1、背景
其实模仿做⾼保真原型本意是⽤其⾯试。之前没有PM经验,也需⼀些可⼊眼的作品,⽅才做了这样⼀个原型设计。蒙PMCAFF论坛不弃邀我解析该原型,受宠若惊之余便即答应下来,毕竟拜读⾼段位PM作品也已多时,不愿⽢做伸⼿党的我也该为社区做点共享了。我将会按屏幕,⼀屏⼀屏的解析我的思路和实现⽅法,当抛砖引⽟,倘有精彩处还请⼤家多多点赞,若太过平淡⽆奇亦欢迎各路侠客拍砖;先⾏谢过了!废话不多说,看招。
2、思路
如何取个好名字
这个⾼保真原型,初衷是尽⼰所能最⼤限度的模仿真实的iPhone端功能,主要从以下⼏点着⼿:
将所有的⼦页⾯全都堆放在axure的⼀个页⾯中(如下图),再在iPhone事先放置的框架中打开这个页⾯,通过相关的动态⾯板移动或隐藏等功能使各⼦页⾯在框架中组织有序。如:点按“返回”,当前页⾯向右推出,⽬标页⾯从左边进⼊。
界⾯中⼏乎所有的icon都与iPhone端⼀致。
采⽤iPhone5c外壳感官体验更柔和⼀些,iPhone内框架长宽⽐例为320px*568px,所有的页⾯也是基于这个⽐例设置。
图1、外层框架
图2、所有页⾯李艾身高
图3、框架及最终页⾯效果图
3、界⾯解析
本次解析的主要是针对聊天页⾯,主要功能包括:聊天列表上下拖动
删除聊天列表,消息标记为未读、已读
徐筠图片
聊天信息回复
涉及到得axure主要知识点:
动态⾯板瞬时拖动、移动、隐藏及显⽰(动态⾯板展开)中继器
字符截取
是谁家的姑娘是什么歌>江南style女主角金泫雅
扫黑风暴人物关系键盘输⼊
界⾯效果如下图
3.1、界⾯动态⾯板结构