Axure创作问题小复盘

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

工具 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.创建完成后，点击预览查看效果
（下载图标时，代表“点赞后”的图标不要选黑色，记得换个合适的颜色）