完美日记眼影产品展示设计

1、完美日记眼影产品展示页设计3.1产品特点分析完美日记的眼影还是挺好的。颜色比较全，而且动物眼影盘的话价钱也挺合 适的， 能涂出很多种效果。完美日记眼影和其他的眼影相比较而言，说区别还是有一些的。完 美日记的款式会多一些，可供选择就会多一点，比如少女的，复古的，冷艳的，成熟的都 有。其他的眼影比如：玛丽黛佳的就两个选择，色系也不是特别多，适合初学的少女。主 要特点就是价格平民化，款式多样化，少女系列主打，以消费者为主。经过前期沟通，合作方的具体页面需求如下：1-体现青春与活力，因为“完美日记”眼影产品展示页的消费对象主要为年轻女 性，所以青春与活力的主题更适合作为该项目主题；2. 介绍公司概况情

2、况，给消费对象一个良好的第一印象；3. 链上“完美日记”官网和“完美日记”其他产品的链接；4. 各种品牌展示，包括展示其价格与评论；5. 在校招网页上链上各个参与招聘企业的官网链接；6. 自适应手机端；7. 展示页页面需要轮播图。合作方给出的素材资源，其中文字资源共计2586个字包括8个公司简介，图片资 源共计23张图片，链接68个包括1个公司官网链接、60个商品官网链接、7个“完 美日记”其他产品链接，详情如表3.1所示。表3.1素材资源资源种类企业资源文字资源2586 字图片资源23张链接资源68条3.2展示页框架本文具体对于“完美日记”眼影产品展示页的框架具体的构成如下图框架如图所示:图

3、3.1 “完美日记”眼影产品展示页的框架从图3.1 “完美日记”眼影产品展示页的框架可以看出来，整个“完美日记”眼影 产品展示页主要有四个模块，主要有对于完美日记公司的整体介绍，“完美日记”眼影 产品的特色以及具体种类的介绍，还有这些眼影产品的展示，还可以对于写产品的售 价，以及连接点入的直接购买，甚至是可以在购买相应的产品之后，可以进行评价的操 作，并且其他用户可以浏览这些评论，来引导自己的购买导向。甚至是“完美日记”眼 影产品展示页还设置了友情链接，来引导消费者来购买“完美日记”其他系列产品，比 如说：卸妆水，口红，等一些系列的产品，甚至是对于网站还设置了，收藏本文网址，加 入VIP，登陆

4、，注册，新闻中心，以及联系客服等一系列服务。对于“完美日记”眼影产品展示页在页面结构上分为三大部分，展示页的页面结构 如图3.2所示，将在外部结构上采用多页面上下框架型布局而内部content的结构视具体 页面而定，内容上采用图文结合的方式来进行布局，分为三大板块，banner页、content页、footer页，该页面结构在本次设计中用于除引导页以为的所有页面，即下 文中介绍的“完美日记”眼影产品展示页的首页导航功能实现、“完美日记”眼影产 品展示页的商品购买与评论功能实现、“完美日记”眼影产品展示页的商品种类特点、 公司介绍、友情链接功能实现、商品种类特点、公司介绍、友情链接功能实现、“完

5、美 日记”眼影产品展示页的新闻时事功能实现。图3.2展示页结构1. 区情概况(D在功能上，该页面介绍“完美日记”的基本情况、公司简介、新闻中心、产品 中心、联系我们等信息；(2) 在结构上，content部分采用上下框架的结构、图文结合的方式来进行设计；(3) 在功能上导航栏添加伪类特效，banner图轮播，添加各个功能链接，链接评 论、买家晒图等功能。2. 商品种类特点、公司介绍、友情链接(1 )在功能上，该页面介绍商品种类特点、公司介绍、友情链接；(2) 在结构上，content部分采用图表结合的表达方式来进行设计；(3) 在功能上导航栏添加伪类特效，banner图轮播。3. 商品购买与评

6、论(1)在功能上，每一个商品都附带购买的链接以及图片展示，并且可以常看相应的评论，以及自己发表评论；(2) 在结构上，content部分采用图片展示的表达方式来进行设计；(3) 在功能上，导航栏添加伪类特效，banner图轮播，添加参加招聘企业的官网 链接。4. 新闻时事(1) 在功能上，用来介绍最近公司的一些新闻实事，以及新品发布的消息；(2) 在结构上，content部分采用左右框架的结构，图文结合的方式来进行设计；(3) 在功能上，导航栏添加伪类特效，banner图轮播，加json+ccc+div进行格 式布局与排版。3.3展示页模块在“完美日记”眼影产品整体版面布局里面，为了使得排版更

7、加合理需要更多运用 其他或者更多主流页面展示技术，比如CSS样式和html代码等，这样就可以使完美日 记”眼影产品整体网站无论在色彩搭配上还是版面布局之上，甚至是与用户交互上，都 能更加好的体现出产品的特色和优势。对于“完美日记”眼影产品整体版面布局来说，需要完成“完美日记”眼影产品展 示页的各类预期效果：“完美日记”眼影产品展示页图片色彩温馨，“完美日记”眼影 产品展示页整体版面清爽，文字、图片、链接等搭配合理，使得受众方便阅读原则，“完 美日记”眼影产品展示页版式设计的首要目的是让消费者以最好的方式找到消费者所需要 的各种消费相尖的信息。内容上采用图文结合的方式来进行布局，分为三大板块，b

8、anner页、content页、 footer 页。在本项目设计中，所有网页的banner部分和footer部分采用一样的效果3.3.1 banner部分设计根据合作方要求，采取图片加文字展现，这一部分包括合作方logo和图片，具体 形式为图片加文字展现，具体效果将在下文实现部分展现o其次是导航栏部 分，导航栏 分为四个按钮，由于每个分页面较为简单，就不采用下拉菜单制作。导航栏的颜色主要使 用蓝、白色，契合该项目主题，凸显青春与活力，预设效果当鼠标悬浮在按钮上，按钮的 背景、边框变为蓝色，字体下方标记蓝色，没有触发事件的效果，字体下方没有标记蓝 色，如图3.3所示，并且在最右侧设置了注册，登录

9、，搜索等超链接的效果，点击可以 跳转到相应的页面进行相应的操作。图3.3分区情概况banner部分3.3.2 footer部分设计footer这一部分背景颜色采用蓝色与主题对应，文字部分是应完美日记公 司版权声 明，包含的信息包括：版权信息，网站信息，以及具体的联系我们的链接，如图3.4所 示图3.4分区情概况footer部分3.3.3 content部分设计本文具体按照“完美日记”眼影产品展示页的框架进行HTML+CS等S代码构成， 这一部分采用图文结合的表达方式，背景颜色按内容分为白色+蓝色+黑色，使内容之间 加以区别，但又不显得突兀。第一部分区情概况，图片导航设置，文字部分介绍导航的基

10、本情况；第二部分官方指定图片展示，图片部分采用的是合作方给出的图片资源，文 字部分介绍基本经济情况；第三部分产品中心与友情链接部分，图片部分采用的是合作 方给出的图片资源，文字部分是产品中心与友情链接部分对应的文字；第四部分商品售卖与评论，图片部分采用的是合作方给出的图片 资源，文字部分介商品详情，以吸引消费者注意；得到的“完美日记”眼 影产品展示页如 图所不：7 JUMO图3.5 “完美日记”眼影产品展示页从图3.5 “完美日记”眼影产品展示页可以看出来，“完美日记”眼影产品展示页包含了多个功能模块的信息，有友情链接模块，商品售卖信息模块，评论查看模块，产品种类模块，“完美日记”的公司简介、

11、“完美日记”眼影产品的特色，收藏本文网址，加入VIP，登陆，注册，新闻中心，以及联系客服等的 链接。对于“完美日记”眼影产品展示页的各类预期效果：“完美日记”眼影产品展示 页图片色彩温馨，“完美日记”眼影产品展示页整体版面清爽，文字、图片、链接等搭 配合理，等要求完美的满足了消费者。1. 购买与评论功能实现具体的“完美日记”眼影产品展示页的商品购买与评论功能 实现截面图如下图4-3、4-4所示：图3.6 “完美日记”眼影商品购买功能实现界面图3.7 “完美日记”眼影商品评论功能实现界面从图3.6 “完美日记”眼影商品购买功能实现界面以及图3.7 “完美日记”眼影商 品评论功能实现界面可以看出来

12、，“完美日记”眼影商品购买功能齐全，图片整齐有代表 性，并且商品总数繁多，总共有数页码的眼影，每一个商品下方有该商品总共的点评数 目，双击打开评论，可以看到消费者对于改商品的评价，并且对于这些评价做了统计；图 4-4 “完美日记”眼影商品评论功能实现界面可以看出来统计如下：极其好用(390)用着 舒服(174)颜色漂亮(14)不会掉渣没有失望 柔润顺滑优质好用(2)清洁干净 (1)毛毛细软(1)安全可靠(1)材质优良(1)不占空间(1)，并且做了统计汇总，如果需要 对数据进行统计汇总，对于数据库的利用是不可或缺的，本文使用到的数据库系统就是 MySQL数据库，本质上是数据库的一种，具体的源代码

13、是对外开放的，MySQL数据库是 瑞典公司发布的，具体的MySQL数据库使用的是结构化的一种语言来进行操作的，进行 查询进行管理。本文具体用到的数据库如下所示:表3.1管理员表字段名类型宽度是否为空说明adminUserNam evarchar20Not null登录名admi nPasswordvarchar32Not null登录密码roleldIntNot null验证码JobNumbervarchar50null工作编号表3.2用户权限的表格字段名数据类型权限ID主键/外键是否为空P_idInt ( 10)权限IDPNot nullP_typeP_remarkVarchar (20)V

14、archar(100)权限类型备注XXNot nullNullgmt_createDateTime创建时间XNot nullgmt_modifyDateTime修改时间XNot nullIs deleteChar ( 1)是否删除XNot null表3.3信息类型表字段名数据类型权限ID主键/外键是否为空i_t_idInt ( 10)信息分类IDPNot nullLtJypeVarchar (20)一级分类XNot nulli_t_2rd_typeVarchar (20)二级分类XNulli_t_remarkVarchar(100)备注XNullgmt_createDateTime创建时间XN

15、ot nullgmt_modifyDateTime修改时间XNot nullls_deleteChar ( 1)时候删除XNot null表3.4用户信息表字段名称字段类型长度是否为空默认值备注主键，有索引idintNOusernamevarchar20NONULL用户名passwordvarchar20NONULL密码uidvarchar255YESNULLn amevarchar255YESNULL名字sexintYESNULL性别addressvarchar255YESNULL地址hometow nvarchar255YESNULL家庭住址accessvarchar255NO1身份从上面

16、表3.1管理员表，表3.2用户权限的表格，表3.3信息类型表，表3.4用户信 息表所示，可以读出一些“完美日记”眼影产品展示页实现的基本信息，比如表，3.2用户 权限的表格就具体的阐述了权限ID、权限类型、备注、创建时间、修改时间、是否删除等 基本的权限以及信息，表3.3信息类型表就具体的阐述了信息分类ID、一级分类、二级 分类、备注、创建时间、修改时间、时候删除等信息，表3.4用户信息表就具体的阐述了 主键，有索引、用户名、密码、姓、名字、性别、地址、家庭住址、身份等一些用户的基 本信息。2. 商品种类特点、公司介绍、友情链接功能实现具体的“完美日记”眼影产品展示页的商品种类特点、公司介绍、

17、友情链接功能实现截面图如下图3.8、3.9、3.10、3.11所示：图3.8 “完美日记”眼影产品展示页的产品中心与友情链接图3.9 “完美日记”眼影产品展示页的产品特点介绍图3.10 “完美日记”眼影产品展示页的一些详细信息图3.11 “完美日记”眼影产品展示页的公司信息从图3.8、3.9、3.10、3.11商品种类特点、公司介绍、友情链接功能实现可以看 出来，以图片和文字进行结合方式呈现出来的，使用文字，图片线条的有机的进行结 合，增加整体“完美日记”眼影产品展示页的网站舒适度。整体对于“完美日记”公 司的整体情况进行了介绍，产品种类主要介绍了几种，粉状眼影，膏状眼影，霜状眼 影，并且对于其特色产品探险家十二色动物眼影，有冰狼，斑虎，小猪，鳄鱼的详细信 息进行了介绍，并且对于“完美日记”公司其他产品，给出了相应的链接。3. 新闻中心本文在新闻中心文字量比加大，消费者阅读和编写的数据交换格式。体的“完美日记”眼影产品展示页的新闻中心功能实现截面图如下图3.12