如何利用Axure中继器实现微信九宫格设计交互？一起看文章吧~

下图是熟悉的、不太好用的、特别值钱的微信支付九宫格截图(特别记得入驻京东的故事):

田学生说：“这个原型效果还不简单。矩形照片，添加链接，以及ctrl c/v * 9，over。”

这个方法确实能实现这个风格。没问题，是大家采用最多的最原始的方式。使用中继器控制可以更快、更顺利地完成，加强对中继器的使用和中继器的了解。

他来了，他来了，他一步一步来了~ ~ ~

步骤1

拖动大小为375*667-20 (iPhone逻辑分辨率的长宽值，减去20px是因为iPhone状态栏高度为20)的矩形控件，然后拖到中继器上。

第阶段2

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

将矩形大小设置为125*125，矩形文字位置为底部，内部底边边距为15px。

Step 3

设置中继器样式，点击编辑中继器页面的空白处。

进入样式设置，设置布局属性，并从垂直-水平更改为水平。选择网格布局，并将每行的项目数设置为3(此处可以模拟3行3列九宫格，并根据需要进行设置)。

步骤4

单击“属性”，在第一列中添加一行，然后输入九宫格各栏的标题(默认情况下按从上到下、从左到右的顺序排列)。

退出编辑页面，即可查看制作的九宫格。

步骤 5

转到“编辑中继器”页面，连接每个单元格。

选取矩形和图形，然后按一下右键以执行组合作业(便利的连结)。

新造了相当于新九宫格的字页，这里新造了前三个备件。在中继器属性中找到“添加中继器”列，然后右键单击第一列后面的相应位置，选择参考页并逐个映射。

设置完成后，“链接”列将显示引用的页面名称和类型。

这是实际设置链接。单击“组合”，如图所示进行设置，完成后退出编辑页面，预览原型即可。

预览图如下：

- END -

这篇文章由@sadgas电饭锅发行，所有人都是产品经理。未经许可禁止转载

主题图基于Unsplash、CC0协议