宠物类APP交互动效设计
作者:暂无发布时间:2019年11月07日 10:22

1. 【打开】Axure软件,【新建】画布。具体效果如图示。

2. 【拖入】矩形元件,调整至IPhone6尺寸大小。具体效果如图示。

3. 【拖入】矩形元件,根据Iphone6的状态栏和导航栏尺寸,调整合适的大小,【填充】深色。【拖入】状态栏元件,放置合适的位置。具体效果如图示。

4. Ctrl键【拖动复制】导航栏至底部,根据尺寸标准,修改尺寸高度,排列至底部合适的位置。具体效果如图示。

5. 【拖入】一级标题元件,输入标题文字,【字体】默认,字号36PX,【颜色】白色。放置合适的位置。按Ctrl键【拖动复制】标题至导航栏其他的位置,【修改】文字内容,调整字号大小。具体效果如图示。

6. 【拖入】占位符元件,大小40PX,排列至导航栏右侧合适的位置。具体效果如图示。

7. 【选择】关联的元件图层,按【Ctrl+G】编组,【重命名】图组。【拖入】占位符元件,大小50PX,排列至底部标签栏上方合适的位置。具体效果如图示。

8. 【拖入】矩形元件,调整圆角,【填充】合适的颜色,调整大小,排列至标签栏正中间位置。根据设计思路,【拖入】矩形元件,调整圆角和大小,【填充】深色,绘制十字图标。【选择】关联矩形元件,按【Ctrl+G】编组,【重命名】。具体效果如图示。

9. 【拖入】文字标签,字号20PX,【颜色】白色,输入文字,【选择】关联元件,按【Ctrl+G】编组,按Ctrl键【拖动复制】至合适的位置,【修改】文字内容。【选择】标签关联图层,按【Ctrl+G】编组,【重命名】标签栏。具体效果如图示。

10. 根据整体的设计思路,【拖入】动态面板元件,调整大小,排列至版面合适的位置。按【Ctrl+G】编组,【重命名】Banner。具体效果如图示。

11. 双击【动态面板】,进入【编辑栏】,【拖入】图片元件,调整大小,放置动态框中合适的位置。【选择】图片元件,右击【转换为动态面板】。具体效果如图示。

12. 【选择】图片动态面板组,【重命名】图片1,右击图组【复制动态面板】。具体效果如图示。

13. 【拖入】椭圆元件,调整大小和颜色,排列至图片元件上方合适的位置。按Ctrl键【拖动复制】至合适的位置,【修改】颜色。【选择】两个椭圆元件,右击【转换为动态面板】。具体效果如图示。

14. 【重命名】椭圆组件,【双击】指针2组件,【修改】椭圆颜色。具体效果如图示。

15. 【返回】文档,【重命名】子集动态组。【选择】动态面板组,单击【属性面板】-【向左滑动时】,【勾选】指针动态组,具体参数如图示。

16. 【选择】Banner图组,具体参数如图示。

17. 【拖入】矩形元件,高290PX,放置Banner图组下方。【拖入】文字元件,字号30PX,输入文字信息,排列至边距各30PX间距,【拖入】图片元件,大小190PX,按Alt键【拖动复制】图片元件,排列间距30PX,排列至合适的位置。【复制】文字元件至合适的位置,【修改】文字内容,调整大小 。【选择】所有的关联元件图层,按【Ctrl+G】编组,【重命名】新萌报道。具体效果如图示。

18. 【拖入】矩形元件,高度440PX,【填充】白色,距离上一个区域间距20PX。【拖入】图片元件,大小70PX,【拖动】锚点至椭圆形状,排列至边角间距各30PX。根据设计思路,依次【拖入】其他的元件,绘制用户辅助信息元件。【选择】所有关联的元件图层,按【Ctrl+G】编组,【重命名】用户动态。具体效果如图示。

19. 【拖入】动态面板,调整至屏幕大小,放置顶部合适的位置。双击面板【进入编辑组】,【拖入】矩形元件,调整至屏幕大小,【填充】白色,放置屏幕上方合适的位置。具体效果如图示。

20. 单击【样式】,【透明度】90%,【拖入】矩形元件,调整大小和位置,绘制动态按钮组件,排列至发布按钮的位置。具体效果如图示。

21. 【选择】关联矩形元件,按【Ctrl+G】编组,【重命名】关闭。【拖入】占位符,右击【椭圆】,【拖入】文字元件,修改内容,排列至合适的位置。【选择】关联元件,按【Ctrl+G】编组,按Ctrl键【拖动复制】,排列至合适的位置。具体效果如图示。

22. 【选择】动态面板组,右击【隐藏】,【重命名】图组。具体效果如图示。

23. 【选择】按钮组件,单击【属性】-【鼠标单击时】,具体参数如图示。

24. 单击【等待元件】,具体参数如图示。

25. 单击【显示元件】,具体参数如图示。

26. 调整组件图层顺序,【选择】发动态组件,单击【属性】-【鼠标单击时】,单击【隐藏元件】,具体参数如图示。

27. 学习重点的内容如图示。

28. 最终效果如图示。


点击观看视频教程
UI-宠物类APP交互动效设计
初级练习24780人已学视频时长:27:31
立即学习
特别声明:以上文章内容仅代表作者本人观点,不代表虎课网观点或立场。如有关于作品内容、版权或其它问题请与虎课网联系。
500+精品图书
20G学习素材
10000+实用笔刷
持续更新设计模板
立即领取

下载虎课APP

随时随地学技能
APP更方便
每天免费学课程
下载虎课网APP
随时随地学海量会员教程
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了27,078
并提交了210份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证