Axure创作问题小复盘

导读:本篇文章讲解 Axure创作问题小复盘,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

用户界面设计——天气通讯台

工具 Axure9

Axure内部只有简单组件标识 这里强推阿里图标库→iconfont

遇到的问题以及较好的解决办法

  • 跳转页面,手机原型、图片、文字等错位
    solution:使用动态面板
    由于课程作业要求是将网站界面改进为手机移动端界面,因此整个过程必须以手机原型为底

1.在网上搜索合适的手机原型图
在这里插入图片描述2.在页面中插入找到的手机边框,为解决错位问题,我们可以将手机边框置于底部,其上插入动态面板,面板大小为整个手机屏幕大小

3.在动态面板中修改状态、添加状态

4.新建交互实现不同状态之间的跳转
(注意:每个状态下都要新建其余所有需要跳转状态的交互;可以使用热区同时框住图像和文字)
在这里插入图片描述在这里插入图片描述

(创建不同子页面进行跳转看起来更有条理,但是很容易发生错位问题,调整也很麻烦)

  • 无法精准对齐
    solution:按住ctrl键并拖动横竖坐标线到需要对齐的地方
    效果如下
    在这里插入图片描述
  • 实现长界面上下滑动
    solution:参考博客 使用Axure实现左右、上下滑动
    1.拖入第一个动态面板first,大小为理想展示的尺寸
    在这里插入图片描述2.双击该动态面板进入state1

3.拖入第二个动态面板second,大小为所有需要展示的内容的尺寸,宽和first一样,但是高度会大于first
在这里插入图片描述4.双击second,进入state1,添加所有需要展示的图片、文字、按钮等等

5.返回动态面板first,新建交互
在这里插入图片描述
设置参数、添加边界

在这里插入图片描述
点击预览,发现可以成功实现上下滑动(^-^)V

([○・`Д´・ ○] 实现上下滑动踩过的坑:
1.高度写错了,符号写错了或者多写了,数字写错了;
2.不同页面的first和second命名尽量区别开,避免重名现象)

  • 重复内容展示
    solution:中继器
    1.拖入中继器组件到原型中,单击中继器查看其样式
    在这里插入图片描述2.更改字段名,方便后续调用值

3.根据实际需要在表中插入图片或需要显示的文字
在这里插入图片描述
4.新建交互,为每栏中每个组件绑定对应值或图片
在这里插入图片描述5.噔噔~ 成功显示
在这里插入图片描述

  • 实现点赞、评论功能

1.先在图标库中找到点赞前后两种状态
在这里插入图片描述

2.分别新建交互,设置单击时两个图标切换显示/隐藏状态
在这里插入图片描述

3.在中继器样式中设置当前点赞数、评论数
在这里插入图片描述

4.要实现点赞数、评论数增加/减少,需要新建交互—设置文字—点击编辑函数
在这里插入图片描述5.创建完成后,点击预览查看效果
在这里插入图片描述在这里插入图片描述(下载图标时,代表“点赞后”的图标不要选黑色,记得换个合适的颜色)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/75104.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!