1、网页美工课程设计报告网页美工课程设计报告学 院： 商学院 专 业： 电子商务 学生姓名：杨凤君 学 号：1200530215 指导教师：2015年月日一、设计内容及制作步骤1.1网店页面展示1.1.1成品展示1.2制作构思1.2.1参考方向参考大量用类网站，商业化的购物型型网站，都是采用中规中矩的结构，通过大小不一的方框分解整个页面。1.3.2颜色为了提高浏览的舒适度，颜色应以柔和淡雅的色调为主，在作导航条等反差颜色采用也应以采用柔和淡雅的色调。1.3制作流程1.3.1背景全局才用了作为风格主色，与风格搭配的副色采用了比风格更深一点的系列色，整个色调体现的是素雅的感觉。背景图片采用与全局色相呼
2、应的纯色背景1.3.2店招LOGO基础设计如上图，中规中矩的模仿了一般淘宝店铺的设置，“美美包屋”字体颜色用的是全局风格副色，因为全局基调淡雅为主，型号是方正喵呜体因为全局基调比较素雅，选用比较活泼生动的字体添加一点俏皮的感觉，主打小清新风。1.3.3无缝全屏海报在店招下面设置了无缝的全屏海报自动播放，每4s“淡入淡出”的轮播效果添加了灵动的效果。1.3.4宝贝介绍主页的宝贝以店主推荐栏目为主。鼠标滑过商品时，宝贝以“蝴蝶飞舞”效果划过展示。宝贝实拍详情页面：采用了淘宝模板，但是更注重产品实拍展示2.1移动页面展示2.1.1成品展示使用网上在线制作工具应用公园制作，设计完成一键生成相应的Android与IOS APP。2.2制作流程启动页使用浅色与网店风格呼应。首页设计简洁，底部两个按钮设置有相应链接，如点击品牌故事会跳转到相应的故事页面。按钮选择条形的透明体，文字则是应用白色与风格保持一致。品牌故事页面采用墨绿色的背景，标题文字部分选取红色形成撞色效果，突出要点。美美包屋页面做的较为详细，中间一栏设有四个功能按钮，分别是“分享”、“电话”浏览“记录”、“收藏”夹等便利快捷键。整个做好的商品页面如下：底部有导航栏可以快速返回首页
