微信飞艇群
当前位置 :  首页  >  微信赛车群

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

发布时间:20-03-26

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

下面这张图就⊥是大家熟悉的、不怎么用的、特值钱的微信支付九宫格截图(尤记得⊿京东入住的▼故事):

田同学说:“这原型效果还不简≌单,矩形+图片,添加链$接,然后ctrl+c/+v * 9,over”。

这方法确实能实现这个样式,没问题,也是大家采用最多的、最原始的方式。这里采用中继器控件可以更加快速的‰、顺滑的完成,也可以锻炼你对中继器的使用和加深对中继器的理解。

他来了、他来了、他一步一步Ⅷ走来了~~~

Step 1

拖拽设置尺寸为 375*667-20 (这里ⓞ以iPhone 逻辑分辨率╨进行长宽值,减20px是因为iphone 状态栏高度为20)的矩形控件,然后拖⿵拽进中继器。

Step 2

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

设置矩形≮尺寸为 125*125⿸(自己喜欢就好,12∽☼5px更好看些);☆矩形文字位置为底端,内底边距为15px。

Ste∨云豹系统 p 3

设置中继器样式,点击中继器编‖|◎辑页空白处。

进入样式๑设置,设置布局属性,由垂直-> 改为水平;勾选网格排布,每排项目数设置为3(这里模拟3行3列九宫格,可根据自己需要设置)。

Step 4

点击属性,在第一列添加行,并输入九宫格每₪큐一格的标题(默认按从上到下、从左到右排列)。

退出编○辑页,可以看到已制作的″九宫▂▃▅▆█格。

Step 5ⓛ

再进入中继器编辑页,为每一格加链接。

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

新建九宫格对应的幸运飞艇7码稳定计划 字页面,这里新建了|前三个备用;在中继器属性中找到中继器添加列▷,在第一列后对应处右击选择引用页面,依次将其一一对应。★

设置完后会看到链接列显∩示引用的页面名和类型。

这∝是真正设置链接,点击组∶合,按图进行设置,完成后退出♧编辑页预览原型就可以◙了。

预览╟图如下:

– – -END – 々211; 〡211;

&n∞bsp;

本文⿰pc蛋蛋微信群 由 @sadgas电饭锅 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于๑CC0协议

{{wanzhanqun_analysis}} {{website_analysis}} {{website_copyright }}