知乎知物网站Web端网页设计

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

目录

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

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

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

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

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

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

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

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

3.2网页动态效果设计...........................................................................................27

4设计总结.....................................................................................................................29

参考资料.........................................................................................................................31

I

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

知乎知物网站Web端网页设计

1网站设计需求分析

1.1网站建设背景

知乎•知物咖啡成立于2021年7月31日，是中国最大的问答社区知乎旗下

的原创咖啡品牌。专注为用户研发生活好物，好用的，好吃的，好玩的！有颜

值，有创意，有品质！启发你的生活灵感，缔造更加舒适美好的生活方式。

知乎•知物咖啡用专业、严谨的工艺认真打磨咖啡产品，致力于让好咖啡融

入人们的生活中，随手可得，让更多人更轻松地喝到一杯好喝的精品咖啡。产

品包括多种口味的挂耳咖啡、冷萃咖啡液等。可以奶香四溢，也可以醇厚绵长。

满足不同的人的口味需求。不会过于甜腻，也不会过于苦涩，香醇丝滑的口感，

味道刚刚好。挂耳咖啡有美式，意式，埃塞俄比亚，苏门答腊，云南，危地马

拉等地方的咖啡系列。精品冷萃咖啡有特调花咖系列和精选产品系列。可以品

尝国内外不同地方的咖啡风情。

加班、熬夜、打游戏、追剧等等，一不小心就通宵了，第二天睁不开眼，

这时候就需要一杯咖啡来提提神。基于市场对咖啡的需求以及对咖啡的喜欢从

而注意到这个品牌，所以将知乎•知物这个网站展示给大家，让大家对这个品牌

更加熟悉，增强品牌的信念和提高品牌的知名度。通过互联网查询知乎•知物的

官网以及在旗舰店了解到知乎•知物的背景资料、相关产品、视觉风格、客户群

体定位、对用户需求进行分析进行调研。通过对大部分网站的功能设计和网页

结构设计，我将网页的风格定位为简朴、庄重。

1.1.1用户需求分析

知乎知物是知乎旗下的品牌，知乎作为中文互联网高质量问答社区和创作

者聚集的原创内容平台，已成为综合性、全品类、在诸多领域具有关键影响力

的知识分享社区和创作者聚集的原创内容平台。

知乎用户在地域上主要分布在沿海发达地区，大多居住在北上广深一线城

市，年龄在20-29岁间的用户占据将近70%，整体偏年轻化，职业以职场白领和

大学生为主，已有工作者收入较高，在校学生收入较少但消费欲高。

随着人们生活节奏的加快，市场对于咖啡的需求量越来越大，消费者也对

咖啡口味追求越来越多。让消费者可以方便快捷、安全健康的快速喝到一杯咖

啡，是知乎知物品牌理念，一个好的网站对于消费者来说，可以直观的在心里

1

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

留下深刻印象。除了产品质量高低以外，品牌价值更能在消费者心里留下潜移

默化，它决定了消费者需不需要继续对该品牌进一步加深了解。市场上的咖啡

品牌有许多历史悠久的，也有雨后春笋的新品牌，一个好的品牌不仅仅在自己

的官网上下功夫，还要在官网上留下自己独有的特点，并且还要留下让人能够

快速记忆的点。知乎知物的定位是认真的态度、专业的工艺、友善的价格，在

页面设计这方面可以遵循这点。

1.1.2竞争对手分析

表1竞品分析表

品牌产品定位目标消费群体品牌主张产品卖点

营养、健康、18岁至35岁追求高效快捷更纯净的咖啡

幸福生活年轻、时尚的的原味速溶咖体验

学生和白领啡；中高端速

雀巢咖啡

溶咖啡；暂时

减少对其他口

味咖啡的宣传

品牌IP联动、主打平价,面始终坚持“产让每个中国人

深耕锁鲜产品、向的消费群体品为王”,以都喝到健康平

整合全球优质主要为年轻人“做中国人的价的好咖啡

隅田川咖啡

供应链、深化口粮咖啡”

渠道布局打开

市场

内袋氮气保鲜柯林咖啡的主打造中高端定传递给消费者

更专业更安全，要销消费群体位的咖啡饮品一种浪漫的情

为消费者打造是年轻人怀、优雅的格

柯林咖啡

低价位高品质调和静享生活

的产品之美的心灵体

验

1.1.3网站功能设计

知乎知物的网站功能主要有：

首页：主要由产品专区、新品鉴赏、镇店之宝、关于我们、联系我们、个

人中心、购物车可跳转到相应页面。

2

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

产品专区：展示部分产品信息，方便消费者简单了解，从而进一步吸引消

费者进入旗舰店。

新品鉴赏：展示最新产品信息，同时可以点击进入产品详情页。

关于我们：品牌介绍以及品牌日常构成，方便消费者快速了解该品牌。

联系我们：是消费者的一个保障，由服务热线、地址、公众号所构成。

个人中心：由账户信息、我的支付宝、购物车、收货地址、积分组成。

登录和注册：方便用户快速进入网站，有账号可以直接登录，没有的话点

击注册。

1.2网站结构设计

1.2.1网页层次设计

一个好的网站非常重要，直接影响到用户的体验感，一个逻辑清晰的网站

结构更能够让客户了解明白我们的产品，在遵循用户一般阅读的习惯下，网站

网页页面结构布局合理，导航清晰，网页设计内容突出主次，打动用户心灵，

提高用户的体验感。

图1网页层次设计

1.2.2交互式内容设计

一个好的交互内容设计可以给网站带来更多的用户点击，提高用户参与度

和体验感，增加网站功能，用户在浏览器中点击网站各个页面的文字或图片实

行页面间的跳转。

网站中每一个页面都有导航栏，导航栏上面设有网站首页、产品专区、新

品鉴赏、关于我们、联系我们、个人中心实行页面间的相互跳转。

3

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

（1）网站首页用户可以点击导航栏右侧头像进入登录页面，登录页面输入

用户名和密码进行登录跳转首页，如果用户还没有账号的话还可以点击登录页

面的右下角进行注册跳转注册页面，账号注册好了之后直接跳转进入首页。

（2）在产品专区页面，用户可以详细了解到产品信息，再点击可以跳转到

产品详情页里面进行购买，右下方有旗舰店信息可以了解全部商品信息。

（3）在新品鉴赏页面，用户可以了解该品牌最新产品消息以及产品折扣立

减、优惠券等。

（4）在关于我们页面，用户可以了解到品牌的介绍以及品牌日常的相关信

息，如果有什么问题可以在下方的问题反馈中反馈给我们。

（5）在联系我们页面，用户可以看到我们的一个联系方式和地址以及微信

公众号，让消费者放心的购买我们的产品，如果出现任何的产品质量问题或者

其他问题反馈，可以第一时间联系我们。

（6）在个人中心页面，用户可以直接看到自己的账户信息、购物车详情、

收货地址的更改、积分情况，如要优惠券、积分等使用情况，可以点击会员卡

右下方的查看跳转到我的积分页面中查看详情。

2网站视觉设计

2.1页面版式设计

一个好的交互内容设计可以给网站带来更多的用户点击，提高用户参与度

和体验感，增加网站功能，让用户更加愿意点击下一项，给用户留下一个好的

视觉印象，这些都是需要对网站的形象有着严格的要求。

2.1.1首页

图2首页层次结构图

4

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

图3网站首页线框图

如图2、图3所示分别为首页整体结构图和首页版式布局图。主要分为五个

板块，第一个板块导航栏：它的最左侧是该品牌的Logo，居中部分依次是产品

专区、新品鉴赏、联系我们、个人中心，它的最右侧是用户登录和用户购物车；

第二个板块是banner轮播：这个板块是三张图片进行依次自动循环，banner的

主要内容是品牌的部分产品以及宣传广告语和Logo；第三个板块是内容跳转到

各个页面的详情内容；第四个板块是用户登录注册和用户购物车的习惯，方便

用户快捷进入网站和购买该产品；第五个板块是结尾信息:产品质量的保障、在

5

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

线客服的联系、快递问题以及微信公众号，方便用户第一时间了解最新咨询。

首页是用户进入网站的第一个页面，它最直接影响到用户的第一体验感、

是否还会继续浏览下去的关键，所以我在首页的整体结构上面保持简单明了，

方便用户快速的进入下一个页面，使用户能够清晰的找到自己所要的信息。

2.1.2产品专区

图4产品专区结构图

6

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

图5产品专区线框图

7

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

如图4和图5所示分别为产品专区整体结构图和产品专区版式布局图。主

要分为五个板块，第一个板块导航栏：它的最左侧是该品牌的Logo，居中部分

依次是产品专区、新品鉴赏、联系我们、个人中心，它的最右侧是用户登录和

用户购物车；第二个板块banner：主要是品牌广告语的宣传以及产品展示；第

三个板块产品分类：详细介绍了产品信息，可以跳转到产品信息页面；第四个

板块是用户登录注册和用户购物车的习惯，方便用户快捷进入网站和购买该产

品；第五个板块是结尾信息:产品质量的保障、在线客服的联系、快递问题以及

微信公众号，方便用户第一时间了解最新咨询。

2.1.3新品鉴赏

图6新品鉴赏结构图

8

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

图7新品鉴赏线框图

9

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

如上图6和图7所示分别为新品鉴赏整体结构图和新品鉴赏版式布局图。

主要分为五个板块，第一个板块导航栏：它的最左侧是该品牌的Logo，居中部

分依次是产品专区、新品鉴赏、联系我们、个人中心，它的最右侧是用户登录

和用户购物车；第二个板块banner：主要是品牌广告语的宣传以及产品展示和

优惠信息等；第三个板块产品信息：详细介绍了产品信息，可以跳转到产品信

息页面；第四个板块是用户登录注册和用户购物车的习惯，方便用户快捷进入

网站和购买该产品；第五个板块是结尾信息:产品质量的保障、在线客服的联系、

快递问题以及微信公众号，方便用户第一时间了解最新咨询。

2.1.4关于我们

图8关于我们结构图

10

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

图9关于我们线框图

11

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

如上图8和图9所示分别为关于我们整体结构图和关于我们版式布局图。

主要分为五个板块，第一个板块导航栏：它的最左侧是该品牌的Logo，居中部

分依次是产品专区、新品鉴赏、联系我们、个人中心，它的最右侧是用户登录

和用户购物车；第二个板块banner：主要是品牌广告语的宣传以及产品展示和

优惠信息等；第三个板块品牌介绍和品牌日常：介绍品牌的来源以及创造初心

和产品日常工作，如果遇见关于咖啡的问题可以点击下方反馈交给品牌方；第

四个板块是用户登录注册和用户购物车的习惯，方便用户快捷进入网站和购买

该产品；第五个板块是结尾信息:产品质量的保障、在线客服的联系、快递问题

以及微信公众号，方便用户第一时间了解最新咨询。

2.1.5联系我们

图10联系我们结构图

12

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

图11联系我们线框图

如上图10和图11所示分别为联系我们整体结构图和联系我们版式布局图。

主要分为五个板块，第一个板块导航栏：它的最左侧是该品牌的Logo，居中部

分依次是产品专区、新品鉴赏、联系我们、个人中心，它的最右侧是用户登录

和用户购物车；第二个板块是用户登录注册和用户购物车的习惯，方便用户快

捷进入网站和购买该产品；第三个板块是联系方式：客服的联系方式、公司地

址、官网地址，公司详细的地图；第四个板块是二维码：微信公众号可以帮助

用户第一时间了解到产品信息咨询；第五个板块是结尾信息:产品质量的保障、

在线客服的联系、快递问题以及微信公众号，方便用户第一时间了解最新咨询。

13

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

2.1.6个人中心

图12个人中心结构图

图13个人中心线框图

如上图12和图13所示分别为个人中心整体结构图和个人中心版式布局图。

主要分为五个板块，第一个板块导航栏：它的最左侧是该品牌的Logo，居中部

分依次是产品专区、新品鉴赏、联系我们、个人中心，它的最右侧是用户登录

和用户购物车；第二个板块是用户登录注册和用户购物车的习惯，方便用户快

14

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

捷进入网站和购买该产品；第三个板块是我的账户：左侧包含账户信息、我的

支付宝、我的购物车、收货地址、积分，右侧有详细的账户信息登录，点击保

存会弹出提示保存成功，下方有会员卡介绍，详细信息可以点击右下角的查看

跳转到我的积分页面查看；第四个板块是退出登录：点击之后可以切换账号信

息，会给一个信息弹出框提示；第五个板块是结尾信息:产品质量的保障、在线

客服的联系、快递问题以及微信公众号，方便用户第一时间了解最新咨询。

2.1.7登录注册

图14登录注册结构图

15

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

图15登录注册线框图

如上图14和图15所示分别为登录注册整体结构图和登录注册版式布局图。

这两个页面进行简单排版设计就好了，其目的主要是让用户实现登录注册。将

导航栏和品牌Logo设置于正上方，文字排版美观简单，尾页主要是客服服务热

线、产品质量保障、快递运输、微信二维码，方便解决售后问题和了解最新信

息咨询。

2.2页面视觉元素设计

2.2.1网站配色设计

知乎知物网站的配色我结合了品牌诞生的目标和咖啡原色，选出了以浅棕

色为主调，点缀色白色和棕色为辅助。

浅棕色是中国传统色彩的一个名词,浅棕色经常被人联想到自然和简朴等

事物和情境,给人一种非常可靠和有益健康的感觉。棕色广泛存在自然界的真实

与和谐，棕色有很多渐变与色调，当颜色由浅棕色逐渐加深时，一种真实的感

觉也逐渐演变成了让人信赖。页面视觉元素是网站设计的重要组成部分，它可

以直接影响到用户进入网站的第一个印象，用户打开官网第一视线传达良好，

16

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

会给用户留下一种好体验，同时网站设计整体色彩清晰明了，网页页面布局合

理，并且导航内容清晰易于查找，都可以加深用户对该品牌的印象。

图16网页配色图

2.2.2标准字

网页的主体字是宋体，标题内容是Arial，详细内容是楷体。如下图（17）

所示。

图17标准字体

17

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

2.2.3图标

网页的主体字是宋体，标题内容是Arial，详细内容是楷体。如下图（18）

所示。

图18网页图标规范图

2.2.4弹窗

网页的主体字是宋体，标题内容是Arial，详细内容是楷体。如下图（19）

所示。

图19网页弹窗大小图

3网站前端设计

3.1网页高保真原型设计

知乎知物官网页面的设置，我结合了平台官方旗舰店的元素以及网上找的

元素和素材，使用PS和AxureRP9完成了网页高保真原型设计。

18

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

3.1.1首页页面

图20网站首页

如图20所示，知乎知物网站首页首先是品牌Logo在最左侧，导航运用最

常见的版式浅棕色的底、白色的字，简单明了使得用户能很快的找到其需要跳

转到的页面；其次是banner，banner用ps将品牌的Logo和文字以及宣传语相

组合，下方采用图片翻转式结构，将内容简单明了的呈现出来，最后结尾打上

品牌标志，客服热线，产品保障，快递运输以及二维码，将他们采取了普通的

对齐方式。

19

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

3.1.2产品专区页面

图21产品专区页

20

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

如图21所示，产品展示页面有咖啡液和挂耳咖啡两个内容，这两个内容我

选取了部分产品信息进行设计，不同方式的展现信息，吸引用户兴趣，使得用

户可以更加仔细阅读产品资料，同时这几款产品都可以跳到对应的详情页面。

3.1.3新品鉴赏页面

图22新品鉴赏页

21

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

如图22所示，新品鉴赏页面，banner告诉用户产品促销活动和优惠券领取，

吸引用户向下点击兴趣，勾起用户购买欲望，新品信息阐述，让用户更加明了

直白知道有哪些产品是新品和促销。

3.1.4关于我们页面

图23关于我们页

22

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

如图23所示，关于我们页面首先第一眼看见的是一杯咖啡的banner，往下

滑动接着介绍的是品牌的成立的时间和目标，在下面是品牌日常做的工作，最

后如果有什么疑问可以提交给我们。

3.1.5联系我们页面

图24联系我们页

如图24所示，联系我们页面是该品牌的联系方式，有的客服热线、官网地

址、联系地址、加入我们微信公众号；其次就是公司的地址和详细的地图，这

些都能方便的解决用户的售后以及加盟品牌的想法和途径。

23

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

3.1.6个人中心页面

图25个人中心页

如图25所示，个人中心页面是用户自己详细信息展示，他不仅包含了用户

最基础的信息资料还有用户在该品牌网站的会员信息，如果要了解品牌会员的

信息，可以点击会员卡的右下角进入积分详情页查看。

24

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

3.1.7登录注册页面

图26登录页

图27注册页

25

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

如图26和图27所示，登录注册页面采用的是简单模式，有账号的登录之

后就会直接跳转到首页，注册账号之后也直接跳转到首页，登录页面和注册页

面是可以相互跳转的，让用户有账号的可以直接登录，没有账号的有手机号就

能轻松注册一个。

3.2网页动态效果设计

3.2.1网页动态特效

动态特效1：banner轮播特效

实现首页Banner图片的的轮播效果，既有自动轮动又有轮播点点击轮播效

果。如下图（28）所示。

26

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

图28Banner效果图

动态特效2：图片切换动态效果

实现图片和文字的切换效果，鼠标悬停在不同的图片上时会出现图片切换

和变大效果。如下图（29）所示。

图29网页切换效果图

27

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

3.2.2网页动态特效实现

Banner轮播特效实现步骤：

先找素材去ps制作三张大小符合banner要求的。然后

第一步在AxureRP9里面设置一个动态面板，大小按照banner的设置，由

于我们有三张banner，所以分别设置面板1、面板2、面板3，并把banner放

入其中。同时设置两个按钮面板x1、x2、x3。

第二步在banner动态面板设置载入时：选择状态Next向后循环，间隔循

环2000毫秒，进入、退出动画设置为逐渐500毫秒。鼠标移入时：按钮动态面

板和banner面板都设置为停止循环。鼠标移出时：设置与载入时一样。按钮动

态面板的设置与banner动态面板的载入时、鼠标移入时、鼠标移出时操作一致。

第三步给按钮x1设置热区鼠标单击时：动态面板逐渐进入动画500毫秒为

面板1和x1，鼠标移入时：操作与单击时一致。鼠标移出时：设置banner动态

面板以及按钮动态面板状态Next、向后循环、循环间隔2000毫秒、进入退出动

画逐渐500毫秒。