中职高教版高二《网页设计与制作》任务8.1 移动端电商网站首页设计与制作课件

项目8 制作移动端页面 ——任务8.1 移动端电商网站首页设计与制作 任务8.1 移动端电商网站首页设计与制作 目录 01 活动1 设计移动端电商网站首页 02 活动2 制作移动端电商网站首页 任务8.1 移动端电商网站首页设计与制作 01 活动1 设计移动端电商网站首页 活动1 设计移动端电商网站首页 （1）尺寸不同。 （2）布局不同。 （3）分类不同。 （4）颜色不同。 项目8 制作移动端页面/任务8.1 移动端电商网站首页设计与制作/活动1 设计移动端电商网站首页 【移动端的电商网站设计与电脑端有着很大的区别】 （1）分析PC端首页。 （2）对比PC端和移动端首页的布局。 （3）确定移动端首页布局。 【作业步骤】 项目8 制作移动端页面/任务8.1 移动端电商网站首页设计与制作/活动1 设计移动端电商网站首页 活动1 设计移动端电商网站首页 【电脑端首页效果（部分）】 项目8 制作移动端页面/任务8.1 移动端电商网站首页设计与制作/活动1 设计移动端电商网站首页 活动1 设计移动端电商网站首页 【PC端店铺首页结构和作用】 项目8 制作移动端页面/任务8.1 移动端电商网站首页设计与制作/活动1 设计移动端电商网站首页 活动1 设计移动端电商网站首页 PC端店铺首页结构 作用 【小助手1】PC端店铺首页结构和各部分的作用 项目8 制作移动端页面/任务8.1 移动端电商网站首页设计与制作/活动1 设计移动端电商网站首页 活动1 设计移动端电商网站首页 1.店招。店招是店铺的招牌,一般展示店铺特色、营销活动等信息。 2.导航条。导航条可分为淘宝系统自带和自定义导航条设计两种，主要作用是可以快速链接到相应的指定页面。 3.全屏海报。全屏海报主要用于店铺重大公告、折扣优惠、主打产品推荐。 4.产品促销轮播海报。轮播海报主要用于推广产品的促销内容。 5.产品分类或优惠券。产品分类方便买家根据自己的需求在店铺快速找到想要的产品。优惠券设计，是指淘宝店铺优惠券的一个营销服务，起到主动营销买家，提升回头客的效果。 6.客服旺旺。用于买家跟店家沟通的软件，设计在首页上可方便买家联系卖家。 7.产品自定义主图展示。产品自定义主图展示是指产品通过平面图片展示设计，更能突出产品的性价比，更能融化到店铺的风格里，极大提生产品的视觉展示效果。 8.店铺页尾。主要展示的内容如关于快递包装物流，关于售后等。 9.店铺背景。一个店铺的风格确立，店铺的背景占据了大部分，背景主要设计的内容为店铺的背景图片，店铺手机二维码或店铺一些重要的折扣信息等。 【手机端店铺首页结构、内容和淘宝模块】 项目8 制作移动端页面/任务8.1 移动端电商网站首页设计与制作/活动1 设计移动端电商网站首页 活动1 设计移动端电商网站首页 手机端店铺首页结构 内容 淘宝手机端首页模块 【小助手2】电脑端和移动端首页布局的对比 项目8 制作移动端页面/任务8.1 移动端电商网站首页设计与制作/活动1 设计移动端电商网站首页 活动1 设计移动端电商网站首页 【小助手3】合理布局 项目8 制作移动端页面/任务8.1 移动端电商网站首页设计与制作/活动1 设计移动端电商网站首页 活动1 设计移动端电商网站首页 移动端店铺首页常用结构 内容 店招 店铺LOGO、主题氛围、店铺定位 海报 轮播海报展现 优惠券 优惠信息 品类导航 1.品类维度区分 2.活动维度区分 活动专区 1.店内专题活动 2.平台促销活动 3.会员定向活动 手机店铺首页结构 所需的制作模块 店招 店招模块 海报 轮播图模块 优惠券 多图模块 品类导航 双列图片模块 热销商品 单列+双列 新品上市 单列+双列 移动端店铺首页常用结构和内容 淘宝手机端店铺首页结构和模块 移动端的设计尺寸（单位：像素） 移动端设计，尺寸是一个很大的问题。移动端现在有两种主要的系统，IOS系统和Android系统。IOS系统，iPhone 界面尺寸一般有320×480、640×960、640×1136；iPad 界面尺寸一般有1024×768、2048×1536。在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机尺寸来设计，比较方便预览效果，一般用 640×960 或者 640×1136 的尺寸设计。 作图的时候确保都是用形状工具，这样更方便后期的切图或尺寸变更。 Android 界面尺寸一般有480×800、720×1280、1080×1920；Android 比 i