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

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

3.1 产品特点分析

完美日记的眼影还是挺好的。颜色比较全，而且动物眼影盘的话价钱也挺合适的，能涂出很多种效果。完美日记眼影和其他的眼影相比较而言，说区别还是有一些的。完美日记的款式会多一些，可供选择就会多一点，比如少女的，复古的，冷艳的，成熟的都有。其他的眼影比如：玛丽黛佳的就两个选择，色系也不是特别多，适合初学的少女。主要特点就是价格平民化，款式多样化，少女系列主打，以消费者为主。

经过前期沟通，合作方的具体页面需求如下：

1.体现青春与活力，因为“完美日记”眼影产品展示页的消费对象主要为年轻女性，所以青春与活力的主题更适合作为该项目主题；

2.介绍公司概况情况，给消费对象一个良好的第一印象；

3.链上“完美日记”官网和“完美日记”其他产品的链接；

4.各种品牌展示，包括展示其价格与评论；

5.在校招网页上链上各个参与招聘企业的官网链接；

6.自适应手机端；

7.展示页页面需要轮播图。

合作方给出的素材资源，其中文字资源共计2586个字包括8个公司简介，图片资源共计23张图片，链接68个包括1个公司官网链接、60个商品官网链接、7个“完美日记”其他产品链接，详情如表3.1所示。

表3.1素材资源

3.2 展示页框架

本文具体对于“完美日记”眼影产品展示页的框架具体的构成如下图框架如图所示：

图3.1 “完美日记”眼影产品展示页的框架

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

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

图3.2展示页结构

1.区情概况

（1）在功能上，该页面介绍“完美日记”的基本情况、公司简介、新闻中心、产品中心、联系我们等信息；

（2）在结构上，content部分采用上下框架的结构、图文结合的方式来进行设计；

（3）在功能上导航栏添加伪类特效，banner图轮播，添加各个功能链接，链接评论、买家晒图等功能。

2.商品种类特点、公司介绍、友情链接

（1）在功能上，该页面介绍商品种类特点、公司介绍、友情链接；

（2）在结构上，content部分采用图表结合的表达方式来进行设计；

（3）在功能上导航栏添加伪类特效，banner图轮播。

3.商品购买与评论

（1）在功能上，每一个商品都附带购买的链接以及图片展示，并且可以常看相应的评论，以及自己发表评论；

（2）在结构上，content部分采用图片展示的表达方式来进行设计；

（3）在功能上，导航栏添加伪类特效，banner图轮播，添加参加招聘企业的官网链接。

4.新闻时事

（1）在功能上，用来介绍最近公司的一些新闻实事，以及新品发布的消息；

（2）在结构上，content部分采用左右框架的结构，图文结合的方式来进行设计；

（3）在功能上，导航栏添加伪类特效，banner图轮播，加json+ccc+div 进行格式布局与排版。

3.3展示页模块

在“完美日记”眼影产品整体版面布局里面，为了使得排版更加合理需要更多运用其他或者更多主流页面展示技术，比如CSS样式和html代码等，这样就可以使完美日记”眼影产品整体网站无论在色彩搭配上还是版面布局之上，甚至是与用户交互上，都能更加好的体现出产品的特色和优势。

对于“完美日记”眼影产品整体版面布局来说，需要完成“完美日记”眼影产品展示页的各类预期效果：“完美日记”眼影产品展示页图片色彩温馨，“完美日记”眼影产品展示页整体版面清爽，文字、图片、链接等搭配合理，使得受众方便阅读原则,“完美日记”眼影产品展示页版式设计的首要目的是让消费者以最好的方式找到消费者所需要的各种消费相关的信息。

内容上采用图文结合的方式来进行布局，分为三大板块，banner页、content 页、footer页。

在本项目设计中，所有网页的banner部分和footer部分采用一样的效果。

3.3.1 banner部分设计

根据合作方要求，采取图片加文字展现，这一部分包括合作方logo和图片，具体形式为图片加文字展现，具体效果将在下文实现部分展现。其次是导航栏部分，导航栏分为四个按钮，由于每个分页面较为简单，就不采用下拉菜单制作。导航栏的颜色主要使用蓝、白色，契合该项目主题，凸显青春与活力，预设效果当鼠标悬浮在按钮上，按钮的背景、边框变为蓝色，字体下方标记蓝色，没有触发事件的效果，字体下方没有标记蓝色，如图3.3所示，并且在最右侧设置了注册，登录，搜索等超链接的效果，点击可以跳转到相应的页面进行相应的操作。

图3.3 分区情概况banner部分

3.3.2 footer部分设计

footer这一部分背景颜色采用蓝色与主题对应，文字部分是应完美日记公司版权声明，包含的信息包括：版权信息，网站信息，以及具体的联系我们的链接，如图3.4所示。

图3.4 分区情概况footer部分

3.3.3 content部分设计

本文具体按照“完美日记”眼影产品展示页的框架进行HTML+CSS等代码构成，这一部分采用图文结合的表达方式，背景颜色按内容分为白色+蓝色+黑色，使内容之间加以区别，但又不显得突兀。第一部分区情概况，图片导航设置，文字部分介绍导航的基本情况；第二部分官方指定图片展示，图片部分采用的是合作方给出的图片资源，文字部分介绍基本经济情况；第三部分产品中心与友情链接部分，图片部分采用的是合作方给出的图片资源，文字部分是产品中心与友情

链接部分对应的文字；第四部分商品售卖与评论，图片部分采用的是合作方给出的图片资源，文字部分介商品详情，以吸引消费者注意；得到的“完美日记”眼影产品展示页如图所示：

图3.5 “完美日记”眼影产品展示页

从图3.5 “完美日记”眼影产品展示页可以看出来，“完美日记”眼影产品展示页包含了多个功能模块的信息，有友情链接模块，商品售卖信息模块，评论查看模块，产品种类模块，“完美日记”的公司简介、“完美日记”眼影产品

的特色，收藏本文网址，加入VIP，登陆，注册，新闻中心，以及联系客服等的链接。对于“完美日记”眼影产品展示页的各类预期效果：“完美日记”眼影产品展示页图片色彩温馨，“完美日记”眼影产品展示页整体版面清爽，文字、图片、链接等搭配合理，等要求完美的满足了消费者。

1.购买与评论功能实现

具体的“完美日记”眼影产品展示页的商品购买与评论功能实现截面图如下图4-3、4-4所示：

图3.6 “完美日记”眼影商品购买功能实现界面

图3.7 “完美日记”眼影商品评论功能实现界面

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

本文具体用到的数据库如下所示：

表3.1管理员表

字段名类型宽度是否为空说明varchar20Not null登录名adminUserNam

e

adminPassword varchar32Not null登录密码roleId Int Not null验证码JobNumber varchar50null工作编号

表3.2用户权限的表格

字段名数据类型权限ID主键/外键是否为空P_id Int（10）权限ID P Not null P_type Varchar（20）权限类型x Not null P_remark Varchar（100）备注x Null gmt_create DateTime创建时间x Not null gmt_modify DateTime修改时间x Not null Is_delete Char（1）是否删除x Not null

表3.3 信息类型表

字段名数据类型权限ID主键/外键是否为空i_t_id Int（10）信息分类ID P Not null i_t_type Varchar（20）一级分类x Not null i_t_2rd_type Varchar（20）二级分类x Null i_t_remark Varchar(100)备注x Null gmt_create DateTime创建时间x Not null gmt_modify DateTime修改时间x Not null Is_delete Char（1）时候删除x Not null

表3.4 用户信息表

字段名称字段类型长度是否为空默认值备注id int NO主键，有索引username varchar20NO NULL用户名password varchar20NO NULL密码

uid varchar255YES NULL姓

name varchar255YES NULL名字

sex int YES NULL性别

address varchar255YES NULL地址

hometown varchar255YES NULL家庭住址

access varchar255NO1身份

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

2.商品种类特点、公司介绍、友情链接功能实现

具体的“完美日记”眼影产品展示页的商品种类特点、公司介绍、友情链接功能实现截面图如下图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.新闻中心

本文在新闻中心文字量比加大，并且每个新闻链接都附带超链接，json易于消费者阅读和编写的数据交换格式。同时也易于机器解析和生成。本文“完美日记”眼影产品展示页大部分项目需要json处理这些页面文字与图片与链接，具体的“完美日记”眼影产品展示页的新闻中心功能实现截面图如下图3.12所示：

图3.12 “完美日记”眼影产品展示页的新闻中心

4.联系我们

这一部分采用大部分是td形式的空格表达方式，背景颜色按内容分为白色，四周留白，既有层次感又不显得突兀。设计了专门的意见填写栏目，达到点击跳转的作用，并且在下面还专门提供了qq在线咨询，点击即可实现跳转功能，租后给出了客户服务热线以及相应的邮箱；如图3.13所示

图3.13 “完美日记”眼影产品展示页的联系我们