返回上一页按钮_产品经理实战案例,简历上再添一项实用面试技能

落日映苍穹つ 2023-01-06 01:37 10阅读 0赞

f36b990b868593c1afcedfc2e2fcd123.png

通过前两篇文章的学习,目前我们已经掌握了做一个简单交互设计的能力

比如今天我们来给微信加一个音乐的小程序

那先来简单的看一下效果,就像这样把你的想法设计出来拿给研发看:

知乎视频​www.zhihu.com

![Image 1][]

这个效果看起来是不是比你做PPT更加的直接明了,或者说比你热血沸腾地和研发侃个天花乱坠,被研发大哥掐着你的脖子骂你异想天开来的更安全一些?

那在实现这个案例之前,先把之前的两个基础操作简单的回顾一下——

痞小仙儿:产品经理Axure速成,纯干货超细节-1​zhuanlan.zhihu.com

7d40261a224a6ec94b3fa82540600d37.png

痞小仙儿:无理论,纯实操,Axure产品经理面试技能-2​zhuanlan.zhihu.com

a9804294e6f012bb4c8d8736ccd1881a.png

  1. 现在开始今天的内容,首先截取一些素材,比如你的微信功能界面、你喜欢的音乐软件你想要的功能页面,都先把他截好了传到电脑上(一定要发送原图哟)

e8cbfce6d108a395484e0c0f43fc607c.png

  1. 那首先在微信功能页面上添加一个‘音乐’的功能:

图片怎么添加音乐一行大家看完前两篇应该非常的清楚,无非就是分割图片,拉模块,吸颜色,拉标题,去阿里的矢量图网站里拉个箭头小图标,最后调整调整位置大小就好啦

123b81cd7e739fee165861a4cfcc05aa.png

  1. 第二步就是做一个点击‘音乐’按钮进入后看到的页面,可以截图也可以自己模仿一个自己喜欢的页面:

比如我非常喜欢网易云音乐的上半部分,又特别喜欢华为音乐的下半部分,鱼和熊掌都想兼得,那就得做一个小裁缝啦
把他们两张图片通过‘鼠标右击’选择‘分割图片’,然后拼凑在一起最后调整一下大小就完成了一份看起来毫无违和感让你满意的界面。

db411d534c1100014dc11b1ce5ffe1b6.png

当然,美好的背后总有支离破碎的一面:

d876e5a38d7d8bb78eeefd9fee62a7ca.png

  1. 之后将你认为要点击的显示页面从你喜欢的音乐软件上截取下来,当然以后工作可能会是自己设计哒,但也难免少不了借鉴嘛,每张图片新建一个’Page’放进去

caf2cfd46314a73f76999233fab60d61.png

3f01535914cab9b2bb923ae165d24736.png

7a8e8595a589228c78d4bf1dbb6b1bfb.png

  1. 最后就是一个‘热区’,通过点击‘热区’设置的效果来达到真实使用场景的功能

f27875b5f47ee7f8d5f39ad9b4953e31.png

咱们将点击音乐要跳转的页面放到了Page2,那么这里就要设置单击图像热区后跳转到Page2这一效果

be430e532fca87960b76e091e7ea53a5.png

  1. 之后的功能也是同理,单击拖动图像热区到你需要的功能位置调整大小,设置其单击跳转下一页面

6c5584e9f954f36e83ec1ccae39678f7.png

8bf1bfb85a6cbaa9e4ee40d66c909a6a.png

0a905ab35ff912792342b0d5026b0c2c.png

那么细心的小伙伴一定发现了,我在左上角的‘返回’位置也放了一个热区
实现的功能就是设置单击时跳转到上一页面,这样在演示时更加到真实

656aebf7b397d71cfbe15535e2864aaf.png

  1. 最后一步就是播放页面,点击中间的播放小按钮实现中间的唱片旋转的效果

首先准备两张一模一样的图片

1498689e732beecb6c9f8b36b3da5f4d.png

我们需要将右边图片中间的唱片截取出来,‘右键’选择’剪裁图像‘,框住小唱片就好了

5029a4fc6866a7c708086d8117ed1da2.png

向右拖动拖动右边小唱片左上角的小黄三角,就能实现截取掉没有用的地方

9261722918e171eacb08d77b51ed7d52.png

将剪裁出来的小唱片覆盖到左边图片的唱片上,然后拖动一个’图像热区‘到中间的播放按钮上设置其动作为旋转

ad3e6a56543754a95d4743b11eff7056.png

c6de3858c2bd9f4128821fe304f9d1ad.png

最后设置一下用多长的时间旋转多少圈,比如我设置的用10000毫秒,线性旋转三圈

f55db292116908428a7680654a1846e0.png

好了之后就可以点击Axure右上角的预览功能操作一下,看一下咱们设计的效果

19bc83beeb711d810acb569b7fb41808.png

知乎视频​www.zhihu.com

![Image 1][]

那Axure的实战演示就到这里啦,产品经理的相关术语及软技能在这里哟

痞小仙儿:10天速成产品经理是真的吗?​zhuanlan.zhihu.com

9d2633ae0c7b8c8724b302b3fc172810.png

不要关注我或者点赞文章,不然过些日子就要成为月入几十W的产品经理了!

不要关注我或者点赞文章,不然过些日子就要成为月入几十W的产品经理了!

不要关注我或者点赞文章,不然过些日子就要成为月入几十W的产品经理了!

定一个小目标(730/10000)

cc23c63d45354cee891e9b7c0a5782a9.png

[Image 1]:

发表评论

表情:
评论列表 (有 0 条评论,10人围观)

还没有评论,来说两句吧...

相关阅读

    相关 返回并刷新

    客户需求:在做注入修改之类的操作时,保存成功后,会到列表页时,会直接跳转到默认查询页面,而无法保留上一次的查询条件。洗完修改保存后,能够直接会到上次的查询页。 解决方案:

    相关 mui返回刷新

    mui中返回上一页并刷新,我只知道 2中方法,一种就是 mui.fire  至于用法在我其他文章里面有就不说了, 说一个比较简单的。 因为是返回上一页,所以只需要调用父类