本文仔细介绍了中继器制作手机版内容分享原型的步骤与注意要点,希望对你有所启发。
![7ef9586f40ea245ab1bdabb7157f0269.png](https://i-blog.csdnimg.cn/blog_migrate/4de2d0ab5d4189f9c82676f97f4c131f.jpeg)
hello,今天教大家如何用中继器做一个类似微博的内容分享原型,里面的内容从0-9张图片的格式都设置好了,我们只需要填写中继器表格,就可以完成交互,方便以后使用,所以非常推荐给大家。
0-9图的样式大家可以在演示界面自己查看,你使用的时候不需要选择,系统会根据您在中继器表格内导入的图片自动生成,而且文字、图片、案例都会自动摆放好。
效果演示
演示地址:https://axhub.im/ax9/22141be7a9ad6545/#id=k1ssqt&p=index
1. 上下滑动查看(鼠标拖动)
鼠标上下拖动可以滑动查看内容
![a74c5567b933fca712d58e7f87a40947.gif](https://i-blog.csdnimg.cn/blog_migrate/60eb15dccf4ae949435b84e275f248d3.gif)
2. 分享
这里做了一个模拟分享的界面
![4abd827ccf7bc918087287137dc7f3b5.gif](https://i-blog.csdnimg.cn/blog_migrate/388787026c0c0e2d8eded7f202685925.gif)
3. 点赞
点击图标可以点击点赞或者取消点赞
![523718dca57302feb8c12dd6c8f86412.gif](https://i-blog.csdnimg.cn/blog_migrate/004835dbce76fb035d036a8ec1583bae.gif)
制作教程
1. 制作材料
如下图所示,需要一个图片作为头像,然后name文本框,时间来源文本框、正文内容文本框、转发数文本框、评论数文本框、和点赞数文本框。
除此之外还有黄色区域的图片组,1-9图图片组是隐藏的,下面会分别介绍样式。
![ba00e5725199f4828568668de6199967.png](https://i-blog.csdnimg.cn/blog_migrate/48ffd33119c6805f2f7b5c4ea070a160.jpeg)
1图样式:
![939216c2325c6ebf46efc3b0cb3f2cb7.png](https://i-blog.csdnimg.cn/blog_migrate/0b18d6baadc7d79bfb71131db3c270d5.jpeg)
2图样式:
![255abc6145fb4bec620e986512504be6.png](https://i-blog.csdnimg.cn/blog_migrate/4675aace2cb464ecceb4b5e458488980.jpeg)
3图样式:
![06311095af8e92e1e51fe25f6f4a8ee1.png](https://i-blog.csdnimg.cn/blog_migrate/29e03ff61dad475b9efd4f6c64856047.jpeg)
4图样式:
![386167fa7a64296278ace3f2922b5447.png](https://i-blog.csdnimg.cn/blog_migrate/197bb2168b59c2e31bacaa89ff036796.jpeg)
5图样式:
![1dd4b209088dce975c3f9e909849c6f9.png](https://i-blog.csdnimg.cn/blog_migrate/f0a30dd96801ccf6a19096e4b7ef0201.jpeg)
6图样式:
![03a61629d76bd878289e664af0cfe608.png](https://i-blog.csdnimg.cn/blog_migrate/a633163a83a9b78e14aa1ffc6aae29b1.jpeg)
7图样式:
![f6bc2f05154d904ce133a35546c373ae.png](https://i-blog.csdnimg.cn/blog_migrate/aa9ec94d01a52cf278d00882b0bf6d95.jpeg)
8图样式:
![ff8f997fbc658c501a93e6a4d379e854.png](https://i-blog.csdnimg.cn/blog_migrate/8898de41599cb0b14871647cc3e25ca5.jpeg)
9图样式:
![4a7619f0a8db485dc52fd70956500a0d.png](https://i-blog.csdnimg.cn/blog_migrate/0413be49ddeb7620652a88eb6695527e.jpeg)
2. 中继器表格制作
如下图所示,16列
name:中继器每项加载时,设置name文本框的值=item.name
photo:在中继器内右键导入头像图片即可。中继器每项加载时,设置头像照片的值=item.picture
come:中继器每项加载时,设置时间来源文本框的值=item.come
text:中继器每项加载时,设置正文内容文本框=item.text。
picture1-9:同样也是右键导入图片即可。然后这里要做判断,如果有9张图片就显示9图的组合,8张图就显示8图组合……1图就显示1图组合,没有图片就不显示图片组合。然后在设置对应的图片为item.1-9的值即可。
zhaunfa:设置转发数文本框=item.zhuanfa
pinglun:设置评论数文本框=item.pinglun
dianzan:设置点赞数文本框=item.点赞
3. 自动排版事件
这里我们要做自动排版,不然的话如果文字内容多了,就会被图片挡住了。我们要做一下几个事件交互。
(1)图片组移动
根据输入文字内容的长短,要做一个自适应,然后再移动下面红框的图片组合到对应的地方。
怎么做文本框的自适应呢?大家可以参考我之前的文章《Axure教程:用中继器做聊天对话界面》。
做完自适应之后,需要移动图片组合至文本下方的位置即可。
![89fd9ce7542cdc3d00322a3693f88c5f.png](https://i-blog.csdnimg.cn/blog_migrate/c3043461a598fd9faba2bfb26bae4d4a.jpeg)
(2)功能区自动移动
下图所示,红框的我们叫功能区,因为3图和9图的大小是不一样的,所以设置完图片之后,我们要移动功能区。这里要分两种情况,第一种是,如果一张图片都没有,那我们移动到正文文本下面即可;第二种情况是有图片,那我们事先吧9个图组组合成1个大图片组,然后移动到大图片组下面即可。
![7825ef24aca7edb090b32019e8da7750.png](https://i-blog.csdnimg.cn/blog_migrate/8c02d4bbc5d159223d3ed74adfea5d77.jpeg)
好了今天的这里就结束了,希望大家可以点点订阅,收藏一下文章,作者会定期分享一些原型的案例哈。88
本文由 @梓贤Vigo 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自 Unsplash,基于CC0协议