XD-餐饮app原型设计与代码导出

 1、本课主要是讲餐饮APP原型版面设计，【打开】Adobe XD软件，【打开】案例所需要的素材文档。具体显示如图示。

2、【新建】画板，【重命名】画板。单击【外观属性面板】，单击【填充】-【渐变填充】，根据设计思路选择定义的渐变颜色。具体显示如图示。

3、【拖入】箭头元素，排列至左侧距离顶部40PX，左侧20PX距离的位置。【拖入】图标素材，调整宽度大小为20PX，使用【文字工具】，输入店铺名称，调整大小和颜色，选择合适的字体，排列至图标右侧合适的位置。具体效果如图示。

4、调整文字大小和位置细节，按Alt键【拖动复制】文字至合适的位置，使用【文字工具】输入地址文字信息，调整大小和位置细节。【选择】文字关联元素，按【Ctrl+G】编组，移动至顶层中间位置。具体效果如图示。

5、使用【矩形工具】绘制合适大小的矩形，【水平居中】，单击【圆角半径】12PX，【填充】红色，【不透明度】50%。具体效果如图示。

6、【拖入】圆圈符号，【不透明】50%，右击【取消编组】，椭圆【半径】60PX，移动至圆角矩形上方顶部和左侧各20PX距离。具体效果如图示。