微信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,这样学更高效,还能提升产品交互,更容易拿高薪

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别让Axure阻碍你的高薪产品路!别等面试时,才发现自己掌握不够。“起点学院&腾讯课堂”联合打造6周Axure实战班,第6期开启报名!从第1期到现在,1400多位同学学习成长,好评如潮。花3-5分钟了解,很快Axure对于你,就不再是问题。(真诚地说)先来看看学习效果全程实操,学完高效制作原型,做出高保真认真学完,原型效率提升,更...

    2018-03-04
  • 陌陌:不全面商业化 不伤害用户体验

    关注订阅号“电商大世界”,海量电商资讯文章打包阅读以下文章数据,由电商大世界 "AI-贝贝",采集、分拣,由编辑 北风整理发布。电商本周要闻:阿里慧聪两大人事变动阿里巴巴B2B事业群总裁戴珊接任速卖通阿里巴巴集团合伙人、B2B事业群总裁戴珊将直接负责全球速卖通业务,而原阿里巴巴全球速卖通总经理沈涤凡,将出任阿里健康CEO。据了解,全球化战略是阿里未来20年的三大核心战略之一。业内人士认为,戴珊此次接任速卖通业务,不仅说明以速卖通为代表的...

    2018-04-01
  • D4-交互设计工作困惑答疑

    作者:飞阿婷(公众号:飞阿婷的交互设计生活)自我成长1.面试攻略为什么强调说,不能把自己的不足归咎于之前公司没给自己带来很大成长?抛开你有推卸责任的人品问题来说,其实还有科学依据证明很多事情都是可以事在人为的。费斯汀格法则:“生活中的10%是由发生在你身上的事情组成,而另外的90%则是由你对所发生的事情如何反应所决定。”我的理解是那10%就是不受我们控制的自然发生的事情,而90%就是我们面对这10%的事情选择接下来要做的事情,而这个选择...

    微信热点 2018-04-12
  • 什么是交互设计?

    这是我在知乎上的「什么是交互设计?」的一篇回答,重新梳理了一下逻辑,分享给大家。(长文预警 : 阅读时间 15 分钟)如果我们问,交互设计是什么?从网上各种定义中似乎能很快就能知道答案。交互设计,又称互动设计(Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。在于定义人造物的行为方式(the “interaction”,即人工制品在特定场景下的反应方式)相关的界面。—— 来自 I...

    2018-02-03
  • 气定神闲的珍珠

    快快点击关注人言风华绝代太难得,然而,一个人终日沉浸在王者农药里碌碌无为,几时能被时光打磨成气定神闲的珍珠?但,珍珠是天然的馈赠,美,则是一种修炼。这世界上的一切精致动人,都是狠狠的被修理出来的。软了不行,硬了也不行,得软硬兼施。就像选专业一样。就像选择计算机软件技术专业一样。你想让自己活得精致,过得洒脱,不对自己狠一点,社会对你狠一点。自己的狠,是由内而外的质变。社会的狠,是苟且偷生。自己的狠,是内软外硬,由环境的硬塑造内心你的软,打...

    2018-03-15
  • 2018年交互设计和用户体验设计趋势合集

    来源:沪江用户体验中心&Nick Babich,翻译丨优设陈子木设计和体验从未像现在这么重要。在过去的10年当中,设计不断适应着用户的新需求,发生了翻天覆地的变化。虽然我们不大可能预测太远的未来,但是我们仍然可以对明年的设计趋势有一个基本的猜测。今天的文章,我们将会探讨2018年影响用户体验设计领域走向的10个关键性的设计趋势,这些趋势甚至可能会持续几年。1、专注内容的体验设计近年来,设计师越来越倾向于采用极简和扁平化的设计,这种设计策...

    2018-02-06
  • 百度UED:运营设计那些事儿

    数十万互联网从业者的共同关注!作者:百度搜索用户体验中心 授权早读课发表,转载请注明出处。在现如今的社会中,每天都在进行着一场场没有硝烟的商战。运营设计则是至关重要的一部分。那么怎么才能做出一个好的运营设计或者一个相对比较成功的运营设计呢?我们要知道设计的目的。设计的目的是什么?设计核心在于能够让用户在有限的时间内Get最有价值的信息,找到所得,从而实现转化。知道设计的目的了,在项目中自然形成了一些思路流程。1、需求分析需求分析分为:产...

    2018-01-31
  • 什么是交互设计?这篇文让你彻底弄清!

    达内UI设计,中国UID课程标准制定者通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了解,所以采用了尽...

    2018-04-08
  • 02案例:用户体验和结婚教练

    用产品经理的视角来看人今天我想讲一个结婚教练的故事。她是我的一个朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。这个结婚教练以前是干什么的呢?她以前是一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何观察和判断一个人。因为结婚也好,创业找合伙人也罢,都是非常重要的长期关系。改变一个人...

    2018-04-04
  • 杜蕾斯158张经典海报设计,你眼中的污都是它的精华液!

    90集PS视频教程,点击下面二维码获取:来源:  LOGO大师(ID:logods)引言:转眼间2017年已经走过了一半,今天大大君扒一下老司机杜蕾斯经过半年“辛苦耕耘”究竟污了多少次。废话不多说,快坐稳,要发车了!杜蕾斯的官博一直以来的形象都是“有点坏、有点情趣,有点流氓”的性情中人。他用轻松诙谐的手法传播普及性知识,特别是每次结合热点的海报作品,都能引发大家无尽的遐想。- 国际特别“日”篇 -#全球OK日# 无论大小,都OK!#世界...

    2018-03-07