本课教程的目的是首页风格设计实践，喜欢的一起来学习吧。
学完本课内容后，同学们可以根据下图作业布置，在视频下方提交作业图片，老师会一一进行解答。
那我们开始今天的教程吧。
1.打开【MOCKINGBOT】，主要分为五个模块【首页】【话题】【品牌】【我的】【购物车】；【首页】功能：城市定位、搜索框、运营BANNER、方案推荐、单品推荐；具体如图所示。
2.打开【Sketch】，新建【文档】，按【R】绘制矩形，取消【描边】，按【T】输入文本：上海，调整【字体大小】14；【设计规范】-【文字】样式、字号、字重、使用场景；【导入】“分组”下拉图标，调整【位置】；具体如图所示。
3.按【R】绘制矩形，调整【Radius】14，调整【填充颜色】#F9F9F9；【导入】“搜索框”，【居中对齐】；向右【复制】“上海”；具体如图所示。
4.输入【文本】“请输入单品名称/装修风格”，调整【文本颜色】#999 灰色；【导入】“首页banner”调整【位置】；按【R】绘制矩形，调整参数【H】170，【Radius】8；具体如图所示。
5.【选择】“矩形”层，点击【蒙版】，为“矩形”建立【蒙版】，调整“banner”【大小】【位置】，将“矩形”【描边】取消；具体如图所示。
6.将“上海”“下拉图标”与“banner”【对齐】；调整“搜索框”【大小】；按【O】绘制椭圆形，调整【W】【H】为4，取消【描边】，调整【填充颜色】#EEEEEE；具体如图所示。
7.【复制】两个“轮播点”；按【U】绘制圆角矩形，取消【描边】，调整【颜色】蓝色；进行【分组】点击【居中】；点击【预览】查看效果；具体如图所示。
8.【设计规范】-【颜色】：【样式】蓝色，【色值】#3D59E4；【辅色】-【色值】#F9F9F9
打开APP，离线免流量