网页美工课程设计报告_网页美工课程设计思路

网页美工课程设计报告由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“网页美工课程设计思路”。

网页美工课程设计报告

学 院： 商学院 专 业： 电子商务 学生姓名： 杨凤君 学 号： 1200530215 指导教师：

2015年

月

日

一、设计内容及制作步骤

1.1网店页面展示

1.1.1成品展示

1.2制作构思

1.2.1参考方向

参考大量用类网站，商业化的购物型型网站，都是采用中规中矩的结构，通过大小不一的方框分解整个页面。

1.3.2颜色

为了提高浏览的舒适度，颜色应以柔和淡雅的色调为主，在作导航条等反差颜色采用也应以采用柔和淡雅的色调。

1.3制作流程

1.3.1背景

全局才用了

作为风格主色，与风格搭配的副色采用了比风格更深一点的系列色，整个色调体现的是素雅的感觉。

背景图片采用与全局色相呼应的纯色背景

1.3.2店招LOGO

基础设计如上图，中规中矩的模仿了一般淘宝店铺的设置，“美美包屋”字体颜色用的是全局风格副色，因为全局基调淡雅为主，型号是方正喵呜体

因为全局基调比较素雅，选用比较活泼生动的字体添加一点俏皮的感觉，主打小清新风。

1.3.3无缝全屏海报

在店招下面设置了无缝的全屏海报自动播放，每4s“淡入淡出”的轮播效果添加了灵动的效果。

1.3.4宝贝介绍

主页的宝贝以店主推荐栏目为主。

鼠标滑过商品时，宝贝以“蝴蝶飞舞”效果划过展示。

宝贝实拍详情页面：采用了淘宝模板，但是更注重产品实拍展示

2.1移动页面展示

2.1.1成品展示

使用网上在线制作工具——应用公园制作，设计完成一键生成相应的Android与IOS APP。

2.2制作流程

启动页使用浅色与网店风格呼应。

首页设计简洁，底部两个按钮设置有相应链接，如点击品牌故事会跳转到相应的故事页面。按钮选择条形的透明体，文字则是应用白色与风格保持一致。

品牌故事页面采用墨绿色的背景，标题文字部分选取红色形成撞色效果，突出要点。

美美包屋页面做的较为详细，中间一栏设有四个功能按钮，分别是“分享”、“电话”浏览“记录”、“收藏”夹等便利快捷键。

整个做好的商品页面如下：底部有导航栏可以快速返回首页