辽西信息门户网 科技

Axure 中继器:如何实现微信九宫格设计交互?

作者:匿名 时间:2019-11-02 18:01:45

如何使用axure中继器实现微信九宫格设计互动?~让我们看看课文~

下图是非常有价值的微信支付九宫格截图,大家都很熟悉,但不是很有用(特别记得京东留下的故事):

田说:“原型效应还不简单。矩形+图片,添加链接,然后ctrl+c/+v * 9,结束”。

这种方法真的可以实现这种风格,没问题,也是每个人使用的最原始、最有创意的方法。这里采用的中继器控制可以更快更平稳地完成,它还可以训练你使用中继器,加深你对中继器的理解。

他来了,他来了,他一步一步来了~ ~ ~

拖放大小为375*667-20的矩形控件(此处,长度和宽度以iphone的逻辑分辨率测量,减去20px,因为iphone状态栏的高度是20),然后将其拖放到中继器中。

双击中继器进入编辑状态。

将矩形大小设置为125*125(如果您喜欢,125像素更好);矩形文本的位置是底部,内部底部边距是15px。

设置中继器样式,并单击中继器编辑页面中的空白处。

输入样式设置,设置布局属性,从垂直->变为水平;检查网格排列,并将每行中的项目数设置为3(此处模拟3行、3列和9个正方形,可根据您的需要进行设置)。

单击属性,在第一列中添加一行,并输入九单元格网格中每个单元格的标题(默认情况下从上到下、从左到右排列)。

退出编辑页面,您可以看到创建的九宫格。

然后进入中继器编辑页面,并为每个网格添加一个链接。

选择矩形和图片,右击可执行组合操作(方便链接)。

新九宫网格对应的字页,这里前三个备用;在中继器属性中找到中继器添加列,右键单击第一列后的相应位置选择参考页面,然后一一对应。

设置后,您将看到链接列显示引用的页面名称和类型。

这是真正的设置链接,点击组合,根据图设置,并退出编辑页面预览原型。

预览如下:

–––结束––––

这篇文章最初是由@sadgas电饭煲发表的,每个人都是产品经理。未经允许禁止复制。

主题地图来自unsplash,基于cc0协议。

责任编辑:admin   本站原创,未经授权不得转载
继续阅读
相关阅读
热新闻

APP下载

客户端下载
推荐
热门