![b320117d60987805290249acd0749499.png](https://i-blog.csdnimg.cn/blog_migrate/0fe953ec28f5f37d2aced3c93475a9ac.png)
移动端PM需要了解常见APP组件并学会画出,点击下方链接学习视频教程。浪子教你画移动端组件-培训视频教程-腾讯课堂ke.qq.com
![c8d784d27cd145373a720df758c9f1db.png](https://i-blog.csdnimg.cn/blog_migrate/018bd2753719cba5dbef21ede6a66858.jpeg)
咱们先看下Axure画出的原型效果,然后再对该组件进行详细讲解。
![e7e615707ba625908fdc856a79166db0.png](https://i-blog.csdnimg.cn/blog_migrate/283718e6af5f42ca475921553eaebddd.png)
一、组件介绍
二、实际案例
![11d0ee151747912bde551de14ae72eb4.png](https://i-blog.csdnimg.cn/blog_migrate/8d109ed9aa7d2f4c025343a158e986fa.jpeg)
三、画出无交互原型
1、先画Banner。从默认元件库拖动“图片”到工作区合适位置,尺寸修改为375*100。
![caf5fc5e51213f9fd2a0162670315ad5.png](https://i-blog.csdnimg.cn/blog_migrate/666f71f74744a7e35a6532ab33dfc30d.jpeg)
2、再画小圆点。从默认元件库拖动“圆形”到工作区合适位置,尺寸10*10。代表未选中状态的样式。
![f8fd3f61c7cd3f1063e0dca15bb68c39.png](https://i-blog.csdnimg.cn/blog_migrate/d604ebd58864caab4531a99324c2f983.jpeg)
3、右键点击“交互样式”,切换到“选中”,填充色修改为#797979,代表已选中状态的样式。
![b8fcdeff67394cbcb905ad020be86763.png](https://i-blog.csdnimg.cn/blog_migrate/06b485c8e33adcaf3b67e6478ffa2eea.jpeg)
4、点击第一个小圆点。右键点击“选中”。
![0ae52357739cad1bd75cf17eaa6bf874.png](https://i-blog.csdnimg.cn/blog_migrate/088875b9ce93096e770d8c5221a006bd.jpeg)
5、点击“预览”按钮,然后在浏览器中查看原型效果。
![a3285283110e1984eb1005a176f16b3e.png](https://i-blog.csdnimg.cn/blog_migrate/700b5e577214d96c6c025938eca19b10.png)
四、画出有交互原型
6、同时所有小圆点,右键点击“选项组”并命名成banner。
![228781e9b8b68830e37a3d83a884a2d1.png](https://i-blog.csdnimg.cn/blog_migrate/921d70af299f50e1a295e97a37890d30.jpeg)
7、点击banner,右键点击“转换成动态面板”,刚刚的内容自动成为State1。双击该动态面板默认进入第一个状态State1,点击顶部的State1展开下拉列表框,点击“复制状态”图标,生成State2。同理生成State3。
![7dd6102e44cb35ef7715383244f50faa.png](https://i-blog.csdnimg.cn/blog_migrate/3023e54430452ed11baa4a7088b189f8.jpeg)
8、点击右上角“关闭”按钮回到工作区,点击该动态面板,右侧边栏切换到“交互”,点击“新建交互”按钮,添加事件“载入时”。添加动作“设置面板状态”,目标选择“当前元件”,状态选择“下一项”,勾选“向后循环”,进入动画选择“向左滑动”“1000毫秒”,退出动画选择“向左滑动”“1000毫秒”,勾选“循环间隔2000毫秒”,勾选“首个状态延迟2000毫秒后切换”,最后点击“完成”按钮。
![5d50f635b95e8a68d5db4ed052f87cfe.png](https://i-blog.csdnimg.cn/blog_migrate/22ef2506bf09e5675c7bf7aa3f7a992a.jpeg)
9、继续点击该动态面板,右侧边栏切换到“交互”,点击“新建交互”按钮,添加事件“状态改变时”,添加动作“设置选中”,目标选择“第一个圆点”,点击“确定”按钮(需要提前命名)。鼠标移动到“状态改变时”然后点击右侧的“添加情形”,在弹窗“情形编辑”中点击“添加条件”,自动生成条件“面板状态-当前-=-状态-State1”,点击“确定”按钮。
![23d71f54bd7a0662a7e1dcaf2a15b50e.png](https://i-blog.csdnimg.cn/blog_migrate/edde2636cfc01ac49f73df08587e8fa1.jpeg)
10、同理设置当情形为state2时候选中第二个圆点,当情形为state3时候选中第三个圆点。
![af0d9ae3b213db264662eb21caeebbb3.png](https://i-blog.csdnimg.cn/blog_migrate/38cf18407b9d6c80d9bb4cf6f768929c.jpeg)
11、点击“预览”按钮,然后在浏览器中查看原型效果。
![ee915eddd1eded53eb9ad1ea6ad57bca.gif](https://i-blog.csdnimg.cn/blog_migrate/9ea56511face6345a2e45b296135a9f6.gif)
Tips:如果在每个动态面板状态放上圆点,这样的画法其实是错误的,因为圆点位置不固定。
五、课后作业
画出该组件的常见交互样式,添加到自己的Axure元件库,方便后续画移动端原型的时候使用。
![ba9a49a1cdb3c48bbc730b6b9446d651.png](https://i-blog.csdnimg.cn/blog_migrate/0b11365dfc29f84cb174730fc4cde8f4.jpeg)
关注公众号langzipm,系统化的学习常用移动端组件,从而掌握移动端原型的画法。
添加作者微信nuanai88获取RP源文件。