【完整案例,新手必看】通过仿制拼多多学会Axure常见及酷炫操作!

Axure是产品经理最常用的工具软件之一,熟练掌握这一工具对产品经理至关重要。在学习的时候,我一直推崇“练中学、学中练”的学习方法,相较于单纯的原理学习或者一个控件、一个原理的实现,一个完整的项目会激发你所有可用的知识,并要求你去不断学习新的知识点,同时高强度的重复操作也会加深对Axure基本操作的认知。 [原文来自:www.666j.com]


[原创文章:www.666j.com]

同时,我也更为推崇文章类型的教程,因为可以反复查看、反复对照,比音频更直观、比视频更省时间。


可惜的是,在我学习的时候并没有找到这种符合要求的教程。所以在时间和精力允许的情况下,我写了这样一篇文章,希望能对同好有所帮助。


因为这是一篇实战性的文章,所以对原理部分介绍的比较少。如果大家需要,可以根据自己的需要学习研究。


多多原型项目的难点


在制作拼多多原型的过程中,除了动态面板、中继器等对新手来说比较难的常规操作之外,还有三个地方给我留下了深刻的印象:


【完整案例,新手必看】通过仿制拼多多学会Axure常见及酷炫操作!

【完整案例,新手必看】通过仿制拼多多学会Axure常见及酷炫操作!

【完整案例,新手必看】通过仿制拼多多学会Axure常见及酷炫操作!

第一个,很多页面都会出现在顶部的浮动信息栏,时隐时现,并交替出现不同的内容,同时在页面滑动时始终保持固定的位置;

第二个,商品详情页中的参与..倒计时,会显示不同用户的信息,同时剩余时间还会以秒为单位减少。这个效果相当酷炫,当然实现它也耗费了我大量的精力;

第三个,搜索界面中,菜单和页面内容呈左右排列,两边均可自由拖动,内容拖动带动菜单改变;菜单拖动,页面内容不变;点击菜单,页面内容滚动到相应位置。为了实现这一效果,我先后使用了三种方法,最终才找到现在的解决之道。


当然,以上三点是我个人感觉在制作拼多多Axure原型中比较困难的地方,其他Banner切换、菜单切换、商品列表、弹窗等常规操作没有一一列出,在后续的内容中都会一一描述,为Axure新手提供相应的参考。


拼多多Axure原型制作的前期准备


对初学者来说,必须首先熟悉Axure的各项基本操作。在掌握基础操作之后,就需要制作一张拼多多功能列表的思维导图,如下所示:


【完整案例,新手必看】通过仿制拼多多学会Axure常见及酷炫操作!


通过思维导图分析,我们可以看到拼多多原型主要会有5个页面:首页、推荐、搜索、聊天、个人中心。


在这里,我详细列出了主要的页面和页面内各模块的相关信息,并提前预演了不同模块的实现方式。通过提前制作思维导图,可以理清思路,同时也方便在原型制作过程中一一对照,防止遗漏。顺便一提,我所使用的思维导图工具是XMind,基础功能已经足够使用,不用破解。


拼多多首页


【完整案例,新手必看】通过仿制拼多多学会Axure常见及酷炫操作!


对于仿制工作来说,最大的好处就是不用思考布局问题。在Axure中插入图片控件——拖入拼多多首页截图——固定长宽比例——设置宽度为375——画出各模块参考线。


【完整案例,新手必看】通过仿制拼多多学会Axure常见及酷炫操作!


这里,我又偷了一个懒,直接右键选择“分割图片”,把页面顶部保留下来作为原型的一个模块,然后添加两个热区分别实现“退出”和“打开底部菜单”的交互。


退出按钮的功能实现


【完整案例,新手必看】通过仿制拼多多学会Axure常见及酷炫操作!


退出按钮的功能实现非常简单,直接点击相应热区,在右侧选择用例编辑“鼠标点击时”。用例设置为“打开链接”——“链接到当前项目的某个页面”,我选择的是“说明”这个页面。在部分原型中没有“说明”页面,也可以链接到“首页”。


“打开底部菜单”功能较为复杂,且显示层级高于其它模块,所以放在后面实现。


顶部分类导航的Axure原型


在完成顶部状态栏之后,接下来就是一个横条的分类导航页面,其效果如下图所示:


【完整案例,新手必看】通过仿制拼多多学会Axure常见及酷炫操作!


分析可知,这个模块要实现的功能包括:


左右滑动,可以切换不同的导航项目;

点击不同的项目可以打开相应的页面;

打开页面时,导航项目处于选中状态(文字变红,且下方有红线);

我是通过动态面板实现这一功能的,具体操作如下:


1.在页面放置1个矩形,宽度w 48,高度h 35;


2.在矩形上右键单击,选择“交互样式”——“选中”,设置字体颜色为红色;


【完整案例,新手必看】通过仿制拼多多学会Axure常见及酷炫操作!


3.复制第一个矩形到8个,并调整矩形文字和排列;


4.全选8个矩形,将其转换为动态面板;


5.双击动态面板,命名为顶部分类导航;


6.双击State1,打开页面;


7.为每个菜单编辑“鼠标单击时”事件,打开相应的链接;


8.全选8个矩形,右键单击后选择设置选项组(确保选择的唯一性);


【完整案例,新手必看】通过仿制拼多多学会Axure常见及酷炫操作!

9.在“热门”菜单下画一条线,设置选中状态为红色,复制到各个菜单;


10.为红线命名后,全选所有红线,设置为选项组;


11.将所有红线都改为透明/无色状态;


12.关闭State1后,双击动态面板,复制State1到State5;


【完整案例,新手必看】通过仿制拼多多学会Axure常见及酷炫操作!


13.编辑后续的State,每个State调整一个菜单,简单举例,State1为:甲乙丙丁,State2为:乙丙丁戊,每次删除第一个,在后面添加一个,以此类推;


14.关闭各个State后,设置顶部导航动态面板的用例,主要是三个:向左拖动结束时、向右拖动结束时、以及载入时


向左拖动结束时:设置条件为:面板状态不是State5;动作为:向后循环,并设置动画


【完整案例,新手必看】通过仿制拼多多学会Axure常见及酷炫操作!

自媒体微信号:666j扫描二维码关注公众号
爱八卦,爱爆料。

小编推荐

  1. 1 “因为看不懂CavEmpt的图案设计,所以我坚决不入手它的单品!”

    “因为看不懂CavEmpt的图案设计,所以我坚决不入手它的单品!”,Steppy潮流周志,想了解更多请关注Steppy潮流周志微信号

  2. 2 快手1元1000粉丝网站,千万别贪小便宜!不看后悔!

    这里推荐一个安全又靠谱的代刷网平台 现在点击进去,即可免费领取快手点赞 100 次,每天都可以领取一次哦。 骗子的平台到底假到哪里呢? 第一能

  3. 3 10代cpu什么时候上市(十代酷睿最新消息发布)

    全部简化显示,以方便手机用户查阅。 酷睿10代桌面版参数 核心代号:Comet Lake 工艺:14 nm+++ 接口:Socket 1159 核显:UHD730,带F的没有核显。 型号 核

  4. 4 这5款双打经典羽毛球拍,久经市场考验仍屹立不倒

    这5款双打经典羽毛球拍,久经市场考验仍屹立不倒,想了解更多请关注类爱羽客羽毛球网微信公众号文章

  5. 5 美逛是什么平台,美逛佣金怎么分配

    在这个前提下提一个问题,大家知不知道天猫淘宝其实有很多隐藏的优惠券,这些是大家在购物的时候看不到的,而这些优惠券的额度大到,有时候

  6. 6 智慧城市60家企业名单(中国新型智慧城市企业百强榜单)

    不管是互联网企业,还是传统的IT厂商 在技术、市场、政策等多重因素推动下,我国智慧城市的发展已经形成产业,成为各大企业的竞技场,不管是

  7. 7 中国首次发现非洲猪瘟:回顾其肆虐史,真的非常可怕|短史记

    中国首次发现非洲猪瘟:回顾其肆虐史,真的非常可怕|短史记,短史记,想了解更多请关注短史记微信号

  8. 8 2019微信一天能加多少好友(微信最多能加多少人)

    首先我们来谈谈每天能加多少好友: 1.通过正常的搜索微信号添加好友每天最多只能添加20个左右。添加过多会显示查找失败。 2.由于QQ每天只能接受

Copyright2018.大树网资讯站,让大家及时掌握各行各业第一手资讯新闻!