如何利用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协议