Axure如何快速完成九宫格的制作

 时间:2026-02-15 20:04:43

Axure是产品经理进行快速原型设计的工具,通过Axure可以实现强大的软件交互动作功能。那么,如何通过Axure来快速完成九宫格的制作呢?本文就由小编带大家了解一下,一起来看看吧~

Axure如何快速完成九宫格的制作

工具/原料

Axure版本:企业版8.0.0.3338

PC电脑:Windows 7

方法/步骤

1.打开Axure,进入Index页面,从左侧元件库拖取一个【矩形】元件到页面,设置大小为【40*40】。如图

Axure如何快速完成九宫格的制作

2.拖动这个【矩形】元件,复制为9份,如图

Axure如何快速完成九宫格的制作

3.选择【顶上行】三个矩形元件进行【水平分布】通过快捷工具栏【分布】>>【水平分布】处理。如图

Axure如何快速完成九宫格的制作

4.选择【左侧面】三个矩形元件进行【左对齐】,然后【垂直分布】通过快捷工具栏【对齐】>>【左对齐】进行对齐处理,通过【分布】>>【垂直分布】,进行分布处理。如图

Axure如何快速完成九宫格的制作

5.分别选择【中间列】三个矩形元件和【右侧面】三个矩形元件进行【左对齐】。如图

Axure如何快速完成九宫格的制作

6.分别选择【中间行】三个矩形元件和【底部行】三个矩形元件进行【顶端对齐】。如图

Axure如何快速完成九宫格的制作

7.最后,九宫格制作完成。如图

Axure如何快速完成九宫格的制作

总结:

1.打开Axure,进入Index页面,从左侧元件库拖取一个【矩形】元件到页面,设置大小为【40*40】;

2.拖动这个【矩形】元件,复制为9份;

3.选择【顶上行】三个矩形元件进行【水平分布】;

4.选择【左侧面】三个矩形元件进行【左对齐】,然后【垂直分布】;

5.分别选择【中间列】三个矩形元件和【右侧面】三个矩形元件进行【左对齐】;

6.分别选择【中间行】三个矩形元件和【底部行】三个矩形元件进行【顶端对齐】;

7.最后,九宫格制作完成。

注意事项

Tips:九宫格的制作可以训练对齐与分布排列,通过列对齐与分布可减少人工操作的错误。

  • html页面侧边栏制作
  • 鼠标放在div上延迟改变宽度效果
  • html 的音乐播放如何ui做的好看点
  • Visual Studio Code怎么设置任务错误显示错误
  • HTML5的网页制作基础
  • 热门搜索
    春节旅游最佳去处 关于旅游的ppt 春节旅游去哪里 旅游卫视主持人 深圳大梅沙旅游攻略 广安旅游景点大全 斐济旅游攻略 千岛湖旅游路线 湖北旅游政务网 南京有哪些旅游景点