XD-响应式按钮交互设计

1、本课主要是讲如何使用XD软件设计手机网页界面，【打开】Adobe XD软件，【新建】网页界面，具体尺寸如图示，【重命名】Home。具体显示如图示。

2、【打开】布局网格参考线，使用【矩形工具】在最左侧边缘绘制矩形，【锁定】比例调整，W160，【填充】黑色，单击【锁定】图层。具体显示如图示。

3、使用【矩形工具】绘制剩余宽度矩形，根据版面布局思路，单击尺寸，在W总宽度/3，得出具体的矩形大小。具体效果如图示。

4、按Ctrl【拖动复制】2个矩形，根据布局思路排列至合适的位置。【选择】第一个矩形框，添加【渐变颜色】，单击【属性面板】拖动渐变滚动条，调整渐变颜色。具体操作如图示。

5、【删除】多余的矩形框，【选择】渐变矩形对象，单击【重复网格工具】，拖动边框条至画布两端，调整复制间距细节，单击【取消使用网格工具】。。具体效果如图示。

6、【拖入】手机素材，使用【矩形工具】绘制单个矩形框大小矩形，【选择】手机和顶层矩形对象，按【Ctrl+Shift+M】建立蒙版。具体效果如图示。