美妆类产品展示分析

美妆类产品展示分析

2.1 美妆类产品展示特点

对于产品展示页而言，一般是具有六大页面元素，分别是展示页的配色、展示页的一些字体、展示页所选择的文案、展示页选取的构图、展示页不同的排版和展示页整体的氛围，对于常见的产品展示页而言，其具有的构成框架主要可以用下面的公示表示：

产品价值+消费信任=下单，（2-1）从营销类学来说，营销中导流货就是你用来做引流产品的，把消费者拉进店的产品，如下图中的完美日记眼影，以及导流页面。

图2.1 营销中导流页面

产品展示的根本立着点就是使得专业乃至是非专业人士角度去具体分析产品价值所在，进而使得消费者有进店消费的欲望。图2.1 营销中导流货简单明了的展示出了“完美日记”眼影最近新品。营销中导流页面首先用吸引人眼球

的各类型的美女使得购买者眼球一亮，整体白色服装和黑色“完美日记”logo

相搭配有着引导消费者继续消费的欲望，进而起到导流的作用。

2.2 主流页面展示技术

2.2.1基于html语言和css语言的选项卡设置

HTML中文全名叫做是超文本标记语言英文名称的全称是Hyper Text Markup Language，是一种国际上标准通用的标记语言所使用的一个应用。HTML 究其本质上说来不是一种编程的语言，而是一种对于网页标记语言，是现代网页制作不可或缺的技术。

对于本文而言，具体的“超文本”指的是页面之内可以包含除了文字之外的信息，比如图片、各种网站链接，甚至包括各种格式音乐、以及各种形式的程序等非文字元素。

CSS中文全称叫做是层叠样式表，也叫做Cascading Style Sheets，CSS是一种语言，是用来表现HTML或XML等文件样式的标准化的计算机语言。CSS可

以很好的静态修饰各种网页，CSS更是可以配合各种脚本语言比如json等动态

地的对于网页里面存在的各元素进行格式化。

WEB设计标准一般来说，指的就是div+css布局，div+css布局是一种比较合理的网页的布局方法。和表格（table）布局定位这种普通的布局方法不同，div+css布局可以顺利的达到网页页面内容与网页页面表现相进行分离的目的。

这个技术在实际操作中经常用到，主要原理是：第一步是获取元素，利用

for循环历遍给按钮添加点击事件或鼠标悬浮事件，第二步通过CSS把所有的按钮样式设置伪类，也可以用for循环历遍把所有的按钮样式的显示属性设置的空，然后添加按钮响应样式，第三步利用CSS或者JS把当展示部分显示出来，显示属性设置为block。具体效果如图2.2所示。

图2.2选项卡切换

2.2.2动态语言与轮播图

动态语言，是指程序在运行时可以改变其结构：新的函数可以被引进，已有的函数可以被删除等在结构上的变化，类型的检查是在运行时做的，优点为方便阅读，清晰明了，缺点为不方便调试。

轮播图这项技术主要用在页面展示中，例如banner图的轮播切换和页面中其他地方的图片切换等。轮播图的主要原理如下：将所有图片添加浮动依次排列，并给其添加一个父级元素，留一个部分显示图片，并将其他图片隐藏。将图片设置成对定位，利用JS控制图片CSS的属性，从起始位置到结束位置，需要先算出这两者间的像素距离，添加定时器，通过距离差值和移动的时间间隔，计算出每次需要移动的像素大小，利用定时器控制，实现图片的移动，然后开始切换。

图2.3轮播图效果

由于轮播图在实际工作中的需求不统一，手动写占用大量时间，不利于提升效率，所以在工作中网页设计师们经常用到插件来进行轮播图的处理，如图2.3所示。

2.2.3 JSON数据处理

JSON是一种易于消费者阅读和编写的数据交换格式。同时也易于机器解析和生成。本文“完美日记”眼影产品展示页大部分项目需要网页设计师自行处理数据，这些数据包括商品名称、商品链接、商品详情等等，通常结构比较简单，数据总量较少的情况下，及其容易处理，但在数据总量较多、数据结构相对复杂的时候，就需要用JSON来帮忙提高效率了，如图2.4所示。

图2.4JSON应用场景

2.2.4导航栏特效

导航栏对于一个网站的用户体验来说是至关重要的，因为根据用户的浏览习惯、从左到右，从上到下，当他们进入一个新的页面，导航栏通常是他们最先看到的地方。用户对于产品的第一印象是很重要的，因为它会一直伴随接下来的使用过程，而且第一印象无法更改。在网站中起到的作用如名称所示——导航作用，便于用户了解网站中包含的具体页面，并指引用户浏览网站。导航栏一般情况下具有按钮、浮动、伸展等效果，具体效果以滑动、反转、渐变等特效相结合而形成，最常见的就是下拉菜单特效了。虽然导航栏特效相对来说简单一些，但这是网页中必不可少的元素，称得上是一项关键技术，如图2.5所示。

图2.5导航栏效果

2.2.5数据库

数据库本质上也是一个存储数据的库，数据库可以对数据保存和管理，数据库的开发到现在已经有了50年左右的历史了，数据库的应用可以说是已经渗入

到我们生活的方方面面了，不管是出行的12306还是日用的淘宝，还有更经济相关的银行都是用到了数据库技术，可以说现在运用到的所有系统里面，都多多少少的运用到了数据库技术，数据库拥有效率高、安全性高等一些非常好的功能。MySQL数据库本质上是数据库的一种，具体的源代码是对外开放的，MySQL 数据库是瑞典公司发布的，具体的MySQL数据库使用的是结构化的一种语言来进行操作的，进行查询进行管理，并且由于MySQL数据库所使用的源代码的复杂度较低，因此代码跑起来的速度非常快，并且由于其开源，所以MySQL数据库开发的成本也是非常低的，可以说MySQL数据库，不管是企业还是各种国家机构都非常喜欢的软件系统。

2.3 典型展示页案例

2.3.1百度页面案例

本文首先进行分析的一个案例就是21实际以来互联网行业的领头网站的展示页来进行分析的，也就是百度主页的展示页进行分析的，具体百度主页的的页面如下：

图2.6百度主页的展示页

本文从图2.6 百度主页的展示页可以看出来，首先图片的分布字体的处理，连接更是加上了时事新闻，肺炎相关的工作，等方面的html语言的处理很好，

div+css布局布局更是从直观面上看起来很仔细。并且导航栏一般情况下具有按钮、浮动、伸展等效果，具体效果以滑动、反转、渐变等特效相结合而形成。JSON 应用场景搜索分布十分齐整，并且具有登陆设置，数据库设置数据记录完整。

2.3.1淘宝页面案例

本文接着进行分析的一个案例同样也是21实际以来互联网行业的领头网站的展示页来进行分析的，也就是淘宝主页的展示页进行分析的，具体百度主页的的页面如下：

图2.7 淘宝主页的展示页

根据图2.7 淘宝主页的展示页可以看出来，与百度主页的展示页的简约直白不同的是，淘宝主页的展示页多而复杂，展示了不同的商品而且对于热卖商品而言还有着动态语言的变化，而且div+css布局布局更是从直观面上看起来很仔细排版的很好，并且导航栏，动态布局，都十分清楚，商业价值十分清楚。JSON 应用场景搜索分布，各个商品布局十分齐整，并且具有登陆设置，数据库设置数据记录完整，并且具有热评热销推荐等引人瞩目的东西。