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

“我根本没把你放在眼里。”“因为你一直在我心里。”▼这是咸冬日的第叁篇文章这两天业余时间学习了axure的基本功能,做了一个简单的微信原型练练手,教程分享给大家。首先需要准备基本素材,可以从我的源文件中获取。1.设置手机主页和home热键用例。2.拖入内联框架(w273*h482),设置从不显示和隐藏边框,并链接到主页。3.设置主页交互:1)主页内拖入动态面板“内容区”(273X396),并增加4个menu状态(微信、通讯录、发现、我;...

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

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

这是咸冬日的第篇文章

微信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原型练习和资源分享

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35792/

(0)
交互精选交互精选
上一篇 2018-03-10
下一篇 2018-03-10

相关推荐

  • 只会简单的Axure操作?6周5次实战,让你做出能拿去面试的原型

    昨天跟一位自学Axure、产品工作半年的朋友聊天,蛮感慨的。她遇到的问题,也是蛮多自学Axure的朋友遇到的问题。你是否也有同样的问题?除了原型图不标准不美观,还深受效率低、交互弱的困扰你也有这位同学的困扰,想快速提升axure能力,做出标准原型、高保真原型?推荐起点学院&腾讯课堂联合打造给产品经理的Axure课程已有2000多位同学学习,学习效果显著Axure零基础也能学,学完画出规范原型产品思维和交互贯穿全程,学完告别画图经理如果你...

    2018-05-07
  • 骁龙835助力VR交互新体验,自由就要6DOF!

    今天,Pico 在北京举办新品发布会上,发布了旗下全球首款同时实现头部和手部 6DOF 追踪及交互的量产 VR 一体机 Pico Neo——搭载Qualcomm® 骁龙™835 移动 VR 平台,带来更加自由、沉浸的 VR 交互体验。Pico Neo 是 Pico 旗下最新一代 VR 一体机产品,搭载了Qualcomm骁龙835移动VR平台,采用一体式 ID 设计,更轻更透气的全包布材料,配备 3K 高清显示屏,4GB 高速 RAM,6...

    2018-01-30
  • 艺术留学 | 交互设计在未来会多火?

    交互设计是什么?对你而言,它可能还是未知数。这是康石石撰写本文的首要初衷,我们先看看大多数人如何看待交互设计这一专业:1.交互设计师是做APP的2.交互设计师是给APP动效的3.交互设计师都月薪上万,且薪资上涨空间高,酬劳丰厚。其它就不清楚了。。。以下康石石引用《女神进化论》创始人--寺主人在知乎关于交互设计师目前生存现状的一段描述,供大家了解行业目前基本情况:月薪<10k俗称“线框仔”,出没于小公司和外包公司,没有设计决策权,专门配给...

    2018-04-01
  • 瑞昌2018年3.31-4.6一周企业招聘信息及待遇......

    【招聘信息】客服招聘企业:精彩网络科技详细地址:江西省瑞昌市摩恩大厦8楼801岗位要求:女性/中专/技校/1-3年工作经验 /30岁以下职位要求:会办公软件,联系人:范联系电话:18079284619【招聘信息】美容师,学徒招聘企业:汉娜尚妃美容中心详细地址:阳光国际,大唐岗位要求:女性/学历不限/经验不限 /35岁以下职位要求:汉娜尚妃美容中心高薪招聘一、店长2名,底薪2000+提成+业绩+奖金,总工资5000一7000左右二、美容师...

    2018-04-08
  • 你真的了解交互设计吗?

    回顾2017年,我们发现交互设计受到越来越多学生的青睐,这个新型专业在国内的认知度与外国并不完全同步。为了给更多学生带来交互信息的普及,设想决定带大家预测一下在2018年,信息体验设计会如何发展、还有哪些值得我们关注的趋势。更简单的导航方式导航体验是2017年的热点话题之一。为了设计出顺畅的用户体验,导航扮演的角色至关重要。线性导航Linear Navigation为了简化导航体验,很多app和网站致力于创造线性的导航体验(即分布式),...

    2018-03-19
  • 两会唤醒全民关注用户体验

    聚焦2018年全国两会,共有13位人大代表和政协委员提倡在相关领域内发展与提升用户体验,范围遍布于新能源汽车、互联网、通信、教育科研、传媒、版权保护、交通运输与医药等数十个行业,引起了社会各界的广泛关注。两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。叶友达建议,从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。同时要加大对基于用户体验的设计创新的宣传力...

    2018-03-28
  • 交互设计攻略之“竞品分析”上

    前言:无论一个产品是从0到1,还是从1到2,我们需要对自身产品有一个清晰的认知与定位,最快的方式就是竞品调研。知己知彼,取长补短。(这里针对自家产品做的一个竞品调研分享,请勿商用。)首先,我们要确定竞品调研的目的是什么?很简单:为了选取同类型产品功能,可供学习与借鉴的地方,从而对本产品平台进行迭代优化。运用金字塔原理自上而下的方法解决“竞品分析的目的”是找出【同类竞品学习与借鉴】,那么引申的问题如下:一、同类型产品有哪些?想知道同类型产...

    2018-03-16
  • 手机系统苹果、安卓交互设计的通用原则总结!

    :请点上面免费订阅系统的设计从用户角度来说,交互设计是一种如何让产品更容易用,让用户更愉悦地使用产品。它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解用户心理和行为特点,并用通用的交互能满足用户操作的预期。下面介绍一下在交互设计中一些比较通用的设计原则,大家可以参考一下。交互1、就近原则:将同一类的功能都组织放在页面相同模块中。2、容错原则:必须允许用户有犯错的操作,给予用户后悔的操作机会。3、帮助原则:为用户提...

    2018-02-16
  • 美国交互设计“综合类amp;艺术类”院校申请差异对比?

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-05-04
  • 五个提升用户体验的分析要素

    原文链接:https://uxdesign.cc/analytics-for-better-ux-c0128c0da55e用户体验是区分产品优劣的核心元素。为了提高转化率,你会试着仔细的检查产品的用户体验,但是应该如何着手呢?你要如何找到痛点并弄清用户的真正需求呢?不去研究调查就编造借口,觉得你知道确切问题所在当然是很轻松的。但是你必须保持谦卑,机敏,通过客观的分析来得出结论。流行的分析软件挺多的,列举一些:Google Analyti...

    2018-03-02