孔凤春网站Web端网页设计

湖南商务职业技术学院毕业设计

目录

1网站设计需求分析.......................................................................................................1

1.1网站建设背景....................................................................................................1

1.1.1客户需求设计.........................................................................................1

1.1.2目标群体分析.........................................................................................2

1.1.3网站功能设计.........................................................................................2

1.2网站结构设计.....................................................................................................3

1.2.1网页层次设计.........................................................................................3

1.2.2交互逻辑设计.........................................................................................3

2网站视觉设计...............................................................................................................4

2.1页面版式设计....................................................................................................4

2.1.1网站首页版式.........................................................................................4

2.1.2明星产品页版式.....................................................................................6

2.1.3品牌故事页版式.....................................................................................7

2.1.4团队介绍页版式.....................................................................................9

2.1.5公司新闻页版式...................................................................................10

2.1.6联系我们页版式...................................................................................11

2.1.7产品详情页版式...................................................................................12

2.1.8新闻内容页版式...................................................................................13

2.2页面视觉元素设计..........................................................................................14

2.2.1网站配色设计.......................................................................................14

3网站前端设计.............................................................................................................15

3.1网页高保真原型设计......................................................................................15

3.1.1网站首页原型.......................................................................................15

3.1.2明星产品页原型...................................................................................16

I

湖南商务职业技术学院毕业设计

3.1.3品牌故事页原型...................................................................................17

3.1.4团队介绍页原型...................................................................................19

3.1.5公司新闻页原型...................................................................................20

3.1.6联系我们页原型...................................................................................21

3.1.7产品详情页原型...................................................................................22

3.1.8新闻内容页原型...................................................................................23

3.2网页动态特效设计...........................................................................................24

3.2.1网页动态特效原型.................................................................................24

3.2.2网页动态特效实现.................................................................................25

4设计总结.....................................................................................................................26

参考资料.........................................................................................................................28

II

湖南商务职业技术学院毕业设计

孔凤春网站Web端网页设计

1网站设计需求分析

1.1网站建设背景

孔凤春（KOPHENIX）创立于清同治元年（公元1862年），孔凤春前身“孔

记香粉号”在清河坊开张。后掌柜孔传鸿得“凤雀托梦”将店名改为“孔凤春”

并沿用至今。上世纪二、三十年代，孔凤春进入鼎盛期，营业额占化妆品行业

50%。经过三个世纪，孔凤春得到“非物质文化遗产”称号认可。2011年，孔凤

春荣获商务部颁发的“中华老字号”称号并接受授牌，成为中国国妆行业内为

数不多的老字号硕果之一。2015年，由中华全国工商联合会美容化妆品业商会

认定孔凤春品牌为“中华美业百年传承品牌”。

选择孔凤春这个网站是因为它是百年国货化妆品品牌和其植物护肤的观念。

孔凤春主打的产品是植物精粹成分系列护肤品，还有百年产品鹅蛋粉之类的韩

粉系列。植物精粹系列所有有效成分都来至于天然植物，不添加酒精、激素、

治痘成分、红标防腐剂等伤害客户肌肤的成分，所有产品都有经过相关检测和

适用才能投入市场，为使每一位客户都能放心使用。

基于对孔凤春这一品牌的了解，以及对国货化妆品的喜爱而关注这个品牌

网站，并且发现网站的问题，为了将孔凤春这个官方网站以更完美的形象展示

出给大家，树立企业口碑，提高品牌的知名度。通过查询孔凤春的官方网站以

及旗舰店信息了解到孔凤春背景资料，相关产品，视觉风格，人群定位，对客

户需求进行分析调研，通过对大部分网站的功能设计和网页结构设计，我将网

页风格定位自然简约。

1.1.1客户需求设计

目前国内消费者对国货的需求增加，“国潮”一词频频上热搜。年轻一代

消费者已经从心底树立起民族身份认同和文化自觉，开始对中国品牌和中国产

品产生浓厚兴趣，这无疑给了国货品牌更多的市场机遇。孔凤春抓住这个机遇，

产品包装全面升级更符合现代消费者审美。而如今，草本、花本以及中草药成

分已经成为了护肤品中的热门成分。天然的自然植物萃取成分以及可食用的植

物原料提炼的成分能够为护肤或者美容不当导致的肌肤受损等问题提供有效的

解决方案。所以我的网站设计里植物精纯系列产品较多，方便客户的需求。网

站的风格设计为一个简洁大方、自然舒心的风格设计，采用的色调是冷色调。

1

湖南商务职业技术学院毕业设计

（1）优质的体验感：为了让客户有更好的体验感，因该网页在不呆板的前

提下尽量简洁化，让客户能一目了然就能看到品牌热销和推荐产品。

（2）优质的网站形象：可以让客户能够对我们的品牌网站有更深刻的了解，

成为我们的回头客，美观的产品图必不可少，并且在适当位置上添加修饰元素，

加强视觉冲击。

（3）优质的产品和服务：绿色安全健康的产品以及适合各种人群的产品正

是大家所需求的东西，能让客户更加相信企业，增强对企业的信赖度。

1.1.2目标群体分析

《腾讯国货美妆报告》数据显示，目前国货美妆消费群遍布70后至00后，

根据其特点及消费习惯可划分为尝新党、生活家、潮流家、真爱粉、品质控及

跟随者六大客群。以15岁-25岁为首的尝新党在选择美妆产品时更注重消费体

验及口碑推荐。对于她们来说，专业口碑种草及IP联名爆款等创新营销，能快

速捕捉其注意力、满足其猎奇心。以轻熟龄女性为主的生活家则是国货美妆的

中坚力量，她们追随潮流的同时，对于美妆的成分、设计包装和性价比也同样

严苛，对于她们来说，性价比及购买体验是选择产品时的决定因素。

所以孔凤春面向的消费群体是15-30岁的年轻女性群体。品牌主张为“百

年传承专注敏感肌肤”，产品卖点为以秉承百年古妆理念萃取自然植物原始特

性将植沁之精华结合现代工艺技术以传统文化和现代技艺为产品载体诠释养肤

与美妆新概念

1.1.3网站功能设计

孔凤春网站主要实现的功能模块有：

首页：主要由导航栏、banner、春夏好物推荐、Pick超值心选套装组成；

明星产品：展示品牌热卖爆款；

品牌故事：由banner、传承、匠心、品牌、发展五个模块构成；

团队介绍：展示团队核心人员；

公司新闻：展示公司新闻；

联系我们：由公众号、淘宝旗舰店、京东旗舰店、公司地址、邮编、咨询

电话、新浪微博组成；

产品详情页：是产品的详情页，主要内容是产品信息图、产品名称、产品

规格、产品功效、产品详情，客户可以点击链接立即购买；

新闻内容夜：是公司新闻的详细内容，主要由页头、面包屑导航、文章标

题和正文内容构成。

2

湖南商务职业技术学院毕业设计

1.2网站结构设计

1.2.1网页层次设计

图1网站层次设计

1.2.2交互逻辑设计

本网站最主要的人机交互方式是鼠标点击操作。客户在浏览器中点击网站

各页面的文字链接或图片按钮，实现页面间的跳转。

本网站的每一个网页，都有一个导航栏。导航栏上设有网站首页、明星产

品、品牌故事、团队介绍、公司新闻、联系我们等功按钮，客户点击每个功能

可以前往网站的相应模块。

1)在网站首页，有banner、春夏好物推荐、Pick超值心选套装，客户可

以了解到我们当季首推产品，可以点击产品图片进入详情页进行购买。

2)在明星产品页面里，客户可以看见品牌热销产品，可以点击产品图片进

入详情页进行购买。

3)在品牌故事里有banner、传承、匠心、品牌、发展五个模块，目的就是

为了让客户更加的了解我们的品牌的历程，让客户对我们的产品加以的信赖，

相信我们的产品是安全可靠有效的，是有品质保障的。

3

湖南商务职业技术学院毕业设计

4)在公司新闻页面里，客户可以看到公司历年来的新闻、决策和大事，更

加深入的了解品牌。

5)在网站的联系我们页面中，客户可以看到我们的淘宝、京东官方旗舰店，

让客户放心的进入官方旗舰店购买我们的产品，也可以直接找到企业的联系方

式，有公众号、地址、电话，邮箱等方便客户联系我们。

2网站视觉设计

2.1页面版式设计

2.1.1网站首页版式

此页为首页线稿图，主要部分为顶部导航和内容部分。顶部最左侧是logo，

右侧是导航。第一部分为导航栏：导航栏里一共有六个模块，客户可以点击不

同的分类导航，进入不同的页面。第二个板块是banner：banner里放置了一些

产品展示图和活动宣传图，以便于吸引客户的眼球，第三板块展示的是主推产

品，每个模块分别采用了不同的排版，都使用了一些装饰元素，这样让我们的

标题更醒目，产品也更突出，更贴合我们网站的主题。第四板块是页尾部分展

示了品牌的悠久历史和返回顶部的按钮。

孔凤春网站首页的线框图采用RP软件制作而成，可分为四步走，第一步把

头部导航栏用矩形工具绘制在logo区，绘制了一个占位符导航区的文字，采用

文本标签实现；第二步，把banner区域用占位符绘出，用文本标签实现；第三

步，用矩形工具和文本标签规划出不同的区域，再加图片加入到对应的模块；

第四步是用文本标签和矩形工具来实现页尾部分。

首页代表的是品牌的门面，是至关重要的，客户一进去看到的就是首页，

所以我在设计首页的时候是希望客户一进来是能一眼知道我们品牌的理念和历

史的，要给客户带来舒适美观的浏览体验，能让客户一进去就知道自己想要了

解的东西在哪里，让客户还有看下去的欲望，提高品牌的转化率。banner部分

主要就是以产品图和活动图进行展示，是企业的招牌。我将品牌应季主推的产

品陈列于首页，既能提高产品的推广效果，又能让客户选择到更适合自己的产

品。

4

湖南商务职业技术学院毕业设计

图2首页线框图

5

湖南商务职业技术学院毕业设计

2.1.2明星产品页版式

此页为明星产品页的线框图。主要分为三个小块。第一个是顶部的导航栏，左侧是网

站logologo展示的，是企业的文化与理念，logo位于顶端的左侧，是最为醒目的，导航

栏能让客户快速切换到自己想要的页面，便于客户的浏览体验。第二个是导航栏下面的产

品图，这些都是选取品牌旗舰店最畅销的六个产品进行排列，便于客户知道我们品牌最热

销的产品，客户点击图片进去，就会跳转出产品的详情页，方便客户更加了解这个产品，

客户可以通过点击立即购买跳转到旗舰店对应的产品页进行购买，更方便客户的购买体验。

第三部分是页尾部分，展示的是企业的历史故事和返回顶部按钮。

明星产品页的线框图采用RP软件制作而成，可分为三步，第一步用矩形画

出导航栏，在导航栏左侧用一个logo的占位符，右侧使用文本标签。第二步，

把每个产品展示图用图片绘制。第三步是页尾部分，用矩形工具和文本标签绘

制。

6

湖南商务职业技术学院毕业设计

图3明星产品页线框图

2.1.3品牌故事页版式

此页为品牌故事页的线框图。主要分为四个小块。第一是导航区，方便客

户切换页面；第二是banner；第三是内容区，主要是品牌传承、匠心、发展的

故事；第四是页尾区，有品牌故事和返回顶部按钮。

7

湖南商务职业技术学院毕业设计

品牌故事页线框图使用RP软件制作而成，可分为四步，第一步用矩形画出

导航栏，在导航栏左侧用一个logo的占位符，右侧使用文本标签。第二步banner

8

湖南商务职业技术学院毕业设计

区域用占位符绘制。第三步内容部分，用矩形工具和文本标签分别排列出来；

第四步是页尾部分，用矩形工具和文本标签绘制。

图4品牌故事页线框图

2.1.4团队介绍页版式

此页为团队介绍页的线框图。主要分为三个小块。第一个是顶部导航栏，

能让客户快速切换到自己想要的页面。第二个是团队人员介绍区，都是品牌团

队的核心人员。第三部分是页尾部分，展示的是企业的历史故事和返回顶部按

钮。

团队介绍页的线框图采用RP软件制作而成，可分为三步，第一步用矩形画

出导航栏，在导航栏左侧用一个logo的占位符，右侧使用文本标签。第二步，

把每个成员的信息用图片工具和矩形工具绘制排版。第三部分是页尾部分，用

矩形工具和文本标签绘制。

9

湖南商务职业技术学院毕业设计

图5团队介绍页线框图

2.1.5公司新闻页版式

此页为公司新闻页的线框图。主要分为三个小块。第一个是导航栏能让客

户快速切换到自己想要的页面。第二个是新闻区，客户点击图片进去，就会跳

转出新闻的具体内容，使客户更加了解品牌。第三部分是页尾部分，展示的是

企业的历史故事和返回顶部按钮。

公司新闻页的线框图采用RP软件制作而成，可分为三步，第一步用矩形画

出导航栏，在导航栏左侧用一个logo的占位符，右侧使用文本标签。第二步，

把每个新闻用图片和文本标签绘制。第三部分是页尾部分，用矩形工具和文本

标签绘制。

图6公司新闻页线框图

10

湖南商务职业技术学院毕业设计

2.1.6联系我们页版式

此页为联系我们页的线框图。主要分为五个小块。第一个是顶部的导航栏。

第二个是官方旗舰店，客户可以通过点击图片跳转到旗舰店，更方便客户的购

买。第三个是公众号，客户可以扫描二维码添加官方公众号。第四个是联系方

式，客户可以通过相关的联系方式从而联系到我们。第五步是页尾部分，展示

的是企业的历史故事和返回顶部按钮。

联系我们页的线框图采用RP软件制作而成，可分为五步，第一步用矩形画

出导航栏，在导航栏左侧用一个logo的占位符，右侧使用文本标签。第二步，

将两个官方旗舰店用图片绘制。第三步公众号部分，矩形工具图片和文本标签

绘制。第四部分联系方式是用图片和文本标签绘制。第五步是页尾部分，用矩

形工具和文本标签绘制。

11

湖南商务职业技术学院毕业设计

图7联系我们页线框图

2.1.7产品详情页版式

此页为产品详情页的线框图。主要分为三个小块。第一个是顶部的导航栏，

导航栏能让客户快速切换到自己想要的页面，便于客户的浏览体验。第二个是

产品的详细信息，有产品图和产品信息可以让客户更加了解这个产品，客户可

以通过点击立即购买跳转到旗舰店对应的产品页进行购买，更方便客户的购买

体验。第三部分是产品详情图，展示的是产品的一些具体信息和产品的卖点。

明星产品页的线框图采用RP软件制作而成，可分为三步，第一步用矩形画

出导航栏，在导航栏左侧用一个logo的占位符，右侧使用文本标签。第二步把

每个产品信息用图片和文本标签绘制。第三个产品详情图部分，用图片工具绘

制。

图8产品详情页线框图

12

湖南商务职业技术学院毕业设计

2.1.8新闻内容页版式

此页为新闻内容页的线框图。主要分为三个小块。第一个是顶部的导航栏，

导航栏能让客户快速切换到自己想要的页面，便于客户的浏览体验。第二个是

面包屑导航，面包屑导航方便客户返回上一个页面，更加方便客户浏览下一个

新闻页面。第三个是新闻内容页，通过对标题和正文内容的排版，正文内容中

加入了图片能使客户更有趣的浏览。

新闻内容页的线框图采用RP软件制作而成，可分为三步，第一步用矩形画

出导航栏，在导航栏左侧用一个logo的占位符，右侧使用文本标签。第二步面

包屑导航区，用文本标签绘制。第三步是新闻内容区，用文本标签和图片绘制。

13

湖南商务职业技术学院毕业设计

图9新闻内容页线框图

2.2页面视觉元素设计

2.2.1网站配色设计

关于孔凤春网站色彩设计与搭配主要是从网页主色系里面选择，主要从产

品包装里面提取颜色，以及对产品的卖点，尤其是植物精粹这一部分，以及根

据它的性质特点，然后进行一定的定位，之后来进行的色彩搭配，产品的特性

以及公司的理念都包含在色彩里面，选择了合适的配色。提高网页设计感。

图10网站配色设计

主色使用白色，打造简约的风格，辅助色：浅蓝色象征天真、纯洁、安定和

和平，而绿色象征清新、安全、舒适、生命、和平、宁静、自然、生机，刚好

和孔凤春的产品相吻合，三个颜色的交替，用来区分层次感，使客户不会感觉

枯燥无味，提升浏览体验感。

14

湖南商务职业技术学院毕业设计

3网站前端设计

3.1网页高保真原型设计

3.1.1网站首页原型

孔凤春网页首页设计的时候运用了rp8来制作网页的制作和美化，网站首页

的功能主要是让客户在最短的时间内了解网站的基本功能，所以在网站首页时，

将网站首页的内容化繁为简，将导航栏和底部设计简化到极致，能让客户一目

了然，更加了解品牌。首页中放置了产品推荐，是随着季节放置我们的产品的，

能让客户对我们主推的产品有一个大致的了解，客户也可以通过这里看见自己

的想要购买的产品，给客户带来便利性，增加客户对品牌的好感度。

15

湖南商务职业技术学院毕业设计

图11网站首页原型

3.1.2明星产品页原型

对于明星产品页，是依据网店销售量进行选取的，选取了天猫店热销的六

位产品作为明星产品进行展示。作为老牌国货的孔凤春，同其他很多国货美妆

品牌一样不同，没有走中国风设计，反而是极简设计，这和孔凤春的品牌理念"

极简护肤"相吻合。明星产品页在于在保证了客户了解了热销产品之后，在一定

程度对网页美化与设计。热销产品能让客户快速方便快捷的了解到品牌的热销

产品以及是否是自己需要的。通过这样的方式大大节省了客户的时间，同时也

提升了客户对店铺的依赖，容易形成客户对品牌的忠实度。并且通过网站的产

品和网店相互搭配，利用客户对产品的亲近感和依赖感，使得客户点击进入我

们的网店，从而使客户方便购买和对品牌了解更加深入，从而突出我们网站的

个性化特点，吸引客户点击进入我们的网站，达到引流的目的，提高客户的体

验质量。通过这种简单的设计能最高效率让客户了解到我们的品牌。

16

湖南商务职业技术学院毕业设计

图12明星产品页原型

3.1.3品牌故事页原型

对于品牌故事页，他的风格与其他页面有些不一样，主要想用中国风的元

素和背景突出孔凤春“百年国货”的特点，同时图片和文字的排版是s型的，

象征着孔凤春在历史的长河中，即使经过百年岁月的洗礼，依旧存在于大众的

视野中，并且有了新的理念和适合现代人的产品。着重强调了孔凤春历史悠久

和其在新的机遇与挑战下改革换新的精神。

17

湖南商务职业技术学院毕业设计

18

湖南商务职业技术学院毕业设计

图13品牌故事页原型

3.1.4团队介绍页原型

对于团队介绍页，我选取了团队核心人员来介绍，核心团队在企业的发展

过程中发挥着不可替代的重要作用，他们就像是一个企业的大脑，是整个企业

运行的指挥者。他们能够带领企业走向正确的发展道路，他们优秀的经历和丰

富的经验可以让客户更加信赖我们，相信品牌具有无限的发展力，对品牌未来

的发展有期望，同时背景使用了植物来点缀，能让客户对我们的植物精粹概念

更加深刻。

19

湖南商务职业技术学院毕业设计

图14团队介绍页原型

3.1.5公司新闻页原型

对于公司新闻页面，简洁明了的设计风格，将公司的新闻整齐的排列出来，

井然有序，可以让客户感受体会到孔凤春的定位与产品理念，页面简介明了更

方便客户浏览。

图15公司新闻页原型

20

湖南商务职业技术学院毕业设计

3.1.6联系我们页原型

对于联系我们页面，简单自然的设计风格，将孔凤春的植物护肤理念展现

的淋漓尽致，同时也对图片加入了植物边框进行装饰，可以让客户马上感受到

孔凤春的定位与特色，从而更好的宣传与推广。

21

湖南商务职业技术学院毕业设计

图16联系我们页原型

3.1.7产品详情页原型

对于产品详情页面，清新淡雅的设计风格让人赏心悦目，将产品的重要的

信息提炼出来排列到产品图片旁边，更加方便顾客了解该产品，提升客户使用

体验，从而更好的宣传与推广。在商品信息的下方有产品详情图，加深客户对

该产品的了解度，提高产品的购买率，同时客户可以通过点击立即购买按钮，

直接跳转至淘宝旗舰店该产品的链接内进行购买，更加方便客户，同时也达到

了对网店的引流效果。

图17产品详情页原型

22

湖南商务职业技术学院毕业设计

3.1.8新闻内容页原型

对于新闻内容页面，简单精致的设计风格，体现了孔凤春的极简护肤理念。

加入了面包屑导航方便用户返回至企业新闻页面，优化了客户的阅读体验。对

文字区域进行了精心的排版，并且插入了相关的图片，使客户浏览新闻时更加

有趣，不枯燥。

图18新闻内容页原型

23

湖南商务职业技术学院毕业设计

3.2网页动态特效设计

3.2.1网页动态特效原型

网页动态特效使用RP软件实现。

动态特效1：banner自动轮播特效

图20banner效果图1

图21banner效果图2

24

湖南商务职业技术学院毕业设计

图22banner效果图3

图23banner效果图4

图24banner效果图5

在首页的banner里放置了五张图，利用RP工具实现banner轮播效果。

先在RP软件中建立建立动态面板，把图片导入进动态面板中，在属性中选定

页面载入时，再将数据填入，最终实现图片轮播效果

3.2.2网页动态特效实现

Banner轮播特效制作步骤：

第一建立一个动态面板并且为动态面板命名为banner，在动态面板中添加

五个不同的面板状态。

第二画五个椭圆按钮，全选将其设为动态面板，命名为跳转。在动态面板

中添加五个不同的面板状态，分别为其命名为1、2、3、4、5。在五个页面中分

别将对应的椭圆换成空心的。

第二选中属性栏里页面载入时，选择设置面板状态，勾选banner和跳转，

25

湖南商务职业技术学院毕业设计

选择状态为Next，依次勾选向后循环，循环间隔为3000毫秒，首个状态延时3000

毫秒后向后切换。设置进入动画和退出动画为逐渐效果。

第四将五个热区变为椭圆按钮大小，并覆盖上去，点击热区，在属性栏选

择鼠标移入时，勾选banner动态面板页面为Stater1和跳转动态面板页面为1；

在鼠标移除时，勾选banner和跳转，选择状态为Next，依次勾选向后循环，循

环间隔为