手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

XD布局网格,加速你的界面设计教程

时间:2024-10-16 00:40:48

XD布局网格加速你的界面设计教程。

工具/原料

XD软件

XD布局网格,加速你的界面设计教程

1、第一步选择这些画板,选中最左边一排的“小箭头形状”的选择工具后,单击这个画板将其选中。(如果您的画板中已经有内容,可以单击画板名称来选择画板)。在右侧的属性查看器网格部分将“版面”前打钩。

XD布局网格,加速你的界面设计教程

2、第二步我们看到,XD已经根据画板的大小帮助我们创建了一定数量的列,我们可以在右侧的属性检查器中更改网格数据,我们可以根据自己的设计需求任意改变数字,例如把列后面的数字增加到16后,就可以看到网格的变化。

XD布局网格,加速你的界面设计教程

3、同时,由于网格会一定程度的覆盖我们的设计内容,所以我们可以改变布局网格中的颜色。单击,列前面的方块,来调整颜色,饱和度,不透明度等,我们也可以自己填写颜色代码。

XD布局网格,加速你的界面设计教程

4、第三步我们可以在右侧面板中继续修改,间隔宽度,上下左右边距等,这是帮助我们在设计时在左右上下留好空隙,以便美观。

XD布局网格,加速你的界面设计教程

5、第四步如果我们有多个面板都想应用这个网格,可以点击右侧调整边距下方的设为默认值,然后单击下一个面板,直接点击使用默认值就好啦。

XD布局网格,加速你的界面设计教程

6、最后,我们就可以利用网格随心所欲的设计啦!妈妈再也不用担心我的设计歪歪扭扭,不很雅观啦!

XD布局网格,加速你的界面设计教程
© 手抄报圈