怡力网站Web端网页设计

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

目录

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

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

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

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

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

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

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

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

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

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

参考资料..........................................................30

I

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

怡力网站Web端网页设计

1网站设计需求分析

1.1网站建设背景

伴随着电子商务进入迅猛发展的阶段，各方面的竞争都愈发激烈，产品品

类越来越丰富，消费者的选择空间越来越大。

通过对怡力品牌各个方面的了解，也由于自己有减脂增肌这方面的兴趣，

怡力线上渠道已经开通了天猫、淘宝、京东、微店等多个知名电商平台的旗舰

店，却没有对应的官方网站。对怡力这一品牌的看好，我从而完成了对怡力这

一品牌的网站设计，设计风格参照了怡力各旗舰店的色彩风格。

1.1.1用户需求分析

随着我国经济的快速发展，人们的生活节奏逐渐加快，很多人由于缺乏运

动而容易导致身体肥胖，从而产生了比较大一部分的减脂增肌的人群，并且大

多数女性都习惯于保持身材，使得低GI、低热量、低脂肪的食品市场非常的大，

由于这类食品的市场绝大多数为减脂增肌年轻人，以及保持身材的女性，所以

我设计的网站色彩偏暖符合年轻人的美观设计，网站整体简单明了。

1.1.2竞争对手分析

表1-竞争对手分析表

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

欧贝拉多品种经营特色全体消费群体重信用，守合同产品价格便宜，

和薄利多销质量好

舌里污染种植、高标中端消费群体无污染、纯天然新鲜、美味无添

准、全天然加剂

健元堂最优质品质和完年轻消费群体引高素质人才，优质的服务

美的服务做最优质服务

通过对同类产品的分析，得出食品市场的竞争激烈，定位多为新鲜、纯天

然、薄利多销以及优质的服务，目标消费群体多为年轻群体。所以怡力的目标

消费群体为年轻群体和健身减脂的人群。“自然和悦、怡心怡力”为怡力的生

活理念。产品卖点为健康美味，服务质量保证。

1

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

1.1.3网站功能设计

怡力的网站功能主要有：

登录注册页，用户在注册页填入用户名和密码之后输入手机号就能注册成

功然后去往登录页面，登录之后就能够加入购物车或者立即购买。

产品展示页，主要展示了两款店铺热销以及两款主食粮面，以橱框的形式。

然后用户可以点击进入其相应的商品详情页，到了详情页可以选择配送地址和

商品数量加入购物车或者立即购买。

新闻中心页，左图右文的版式为用户提供了四个关于新闻，同时点击图片

或者阅读全文就能跳转的其中的新闻详情页，新闻详情页最下方也有个返回列

表页的按钮，可以返回到新闻中心页。

1.2网站结构设计

1.2.1网页层次设计

网站结构设计是一项重要的网站设计工作。直接影响到网站的用户体验，

用户打开官网后，如果我们的官网做的简单明了大方就会给用户一种好的体验。

我们的页面设计需要考虑到一般人的阅读习惯。所以，网站的页面结构布局一

定要合理，导航内容要看得清楚，找得容易，要合理分配网页使用的要素和能

够突出主次的展示内容，如图1所示，这样用户体验才能得到提升。

图1网页层次设计

1.2.2交互逻辑设计

一个好的交互逻辑设计可以为网站带来许多好处，

2

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

1.提高用户的体验以及参与度：交互式内容能使用户更加投入，这种交互

式的设计会让用户感觉网站是“活”的，是认真做了的，而不是静态的。同时

交互式内容能吸引用户，让他们参与到这种互动的过程。

2.增强网站的功能性：交互式内容设计能让各个网站之间链接起来，更方

便用户完成各种任务，帮助用户快速找到他们所需要的信息，从而提高网站的

实用性。

本网站主要的每个页面都存在一个导航栏，该导航栏上面有首页、品牌形

象、产品展示、新闻中心、联系我们等功能按钮。方便用户进行跳转到相应的

页面。

首先首页有个小栏目新闻中心，鼠标移动到“阅读全文”上面，字体颜色

就会发生改变，这就提示用户可以跳转到其中的一个新闻中心详情页面去。

其次登录页面里面存在“立即注册”和“忘记密码”两个交互按钮，可以

跳转的这两个页面中，完成注册用户账号或者找回密码的操作，接着，进入登

录页面进行登录，用户可在登录页面输入账号信息进行登录，成功后即可跳转

至首页。

然后产品展示页面有着两款店铺热销以及两款主食粮面产品，点击任意一

款产品都会跳转到其相应的产品详情页，每个产品详情页面都提供“立即购买”

和“加入购物车”两个按钮作为选择。移入按钮里面的字体颜色会发生改变，

点击按钮就会跳转到相应的网页去进行操作，同时每个详情页都有着一个“返

回”按钮，点击可以直接返回到产品展示页面。还有“评价”也可以进入相关

的页面去查看评价。

再然后新闻中心页面，有着四条新闻每个后面都有个“阅读全文”，同样的

移入文字上面颜色会发生改变，都是在提醒用户可以点击，然后就都能跳转的

相应的新闻详情页面去啦，当然所在的页面也会有个“返回列表页”，点击也会

跳转回到新闻中心。

2网站视觉设计

2.1页面版式设计

一个好的页面版式能让我们的网页设计变得更加清晰有条理。使得用户看

的舒服更加愿意继续浏览下去。所以一个页面版式就显得尤为重要，因此我在

页面版式这方面下了花费了较多的时间，我用AxAxureRP8来制作，同时还使

用ps对于各种图形进行处理，对于网站的内容大小。美观等都进行了合理的操

3

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

图4首页层次结构图

图2首页层次结构图

作。

2.1.1首页

4

图3网站首页线框图

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

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

个板块，第一个板块导航栏：顶部有个品牌的logo、登录以及招商热线并且存

在五个可以跳转到其他页面的导航；第二个板块banner轮播:这个板块是两个

banner图轮播，banner内容主要是怡力品牌的一些产品以及logo；第三个板块

品牌介绍：

主要先给最先进来的用户介绍一下品牌；第四个板块新闻中心：一个关于品牌

的小新闻，有助于用户快速了解一下品牌的产品；第五个板块结尾：主要是公

司的地址、品牌的公众号以及招商热线，用户可以通过添加微信公众号了解询

问品牌的各种资料，以及处理售后的问题等等，招商热线则是给那些想加盟的

用户，有这方面想法的用户了解本品牌用的。

网站首页是用户访问时首先展示的页面，直接影响用户的体验。它在很大

程度上决定了用户是否会继续浏览网站。因此，首页的设计和呈现对于网站运

营至关重要。所以我在首页整体结构和首页的版式布局方面花了较多的时间，

用户一点开官方网站首先看见的就是整体的版式排版，首页的版式排版偏简单

大方，使得用户能清晰明了的找到自己需要的东西。

2.1.2品牌形象

图4品牌形象结构图

5

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

图5品牌形象线框图

如图4和图5分别为品牌形象的整体结构图和品牌形象的版式布局图。这

段文字主要分为四个部分，第一部分是导航栏：主要是品牌的logo、登录、招

商热线以及五个导航，其中logo代表着品牌的形象，登录、五个导航都能帮助

6

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

用户跳转到相应的页面。第二个部分banner：主要是一些品牌热卖；第三个部

分品牌简介和品牌故事：主要介绍了品牌的历史由来品牌的目标；第四个部分

页尾：主要有公司的地址，加入微信公众号的二维码以及招商热线等，方便用

户更加了解怡力品牌以及解决售后问题等。

品牌页看这名字就知道这一页面应该体现品牌的特点，通过了解各个平台

的旗舰店，所以我的设置的是简单清晰、一目了然。最后还加上了品牌的“因

新而怡，健康美丽”，并且配上了怡力品牌的清新宣传图。

2.1.3产品展示

图6产品展示结构图

7

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

图7产品展示线框图

如图6和图7分别为产品展示的整体结构图和产品展示的版式布局图。这

段文字主要分为四个部分，第一部分是导航栏：主要为体现品牌的logo、登录

以及五个导航帮助用户进入各自相应的页面；第二个部分店铺热销：两个品牌

热销产品；第三个部分主食粮面：两款比较有代表性的品牌的主食；第四个部

8

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

分页尾:主要是公司的地址以及微信公众号、招商热线，方便用户解决售后以及

加盟品牌等。

该页面主要给店铺热销、主食粮面以及各自的产品，运用x轴y轴进行合

适的排列以符合整体页面的大小以及绝大多数用户的审美。

2.1.4新闻中心

图8新闻中心结构图

9

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

图9新闻中心线框图

如图8和图9分别为新闻中心的整体结构图和新闻中心的版式布局图。这段

文字主要分为四个部分，第一部分是导航栏：主要为体现品牌的logo、登录以

及五个导航帮助用户进入各自相应的页面；第二个部分大小内容合适的新闻中

10

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

心banner图；第三个部分新闻：简要的说了四条新闻的大概内容，其中可以点

击阅读全文跳转的相应的新闻详情页面去；第四个部分页尾:主要是公司的地址

以及微信公众号、招商热线，方便用户解决售后以及加盟品牌等。

新闻中心页面先使用AxAxureRP8把新闻中心banner大小位置用占位符调

好大小，然后使用ps调色彩，做到合适的大小放入，简要的新闻位置以及图片

要放在合适的位置。

2.1.5联系我们

图10联系我们结构图

11

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

图11联系我们线框图

12

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

如图10和图11分别为联系我们的整体结构图以及联系我们的版式布局图。

这段文字主要分为五个部分，第一部分是导航栏：主要为体现品牌的logo、登

录以及五个导航帮助用户进入各自相应的页面；第二个部分banner：联系我们

banner；第三个部分联系方式：有加入我们的微信公众号、邮政编号以及招商

热线；第四个部分公司地址：主要为公司品牌的详细地址以及地图；第五个部

分页尾:主要是公司的地址以及微信公众号、招商热线，方便用户解决售后以及

加盟品牌等。

该页面主要banner大小和新闻中心banner大小一致，只需要去ps里面调

好色彩以及大小放入AxAxureRP8就好，“联系方式”“公司地址”给它们调好

大小以及排好版式，使得整体页面简洁明了。

2.1.6登录注册

图12登录注册结构图

13

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

图13登录注册线框图

如图12和图13分别为登录的整体结构图和登录注册的版式布局图。这两

14

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

个页面的功能就是实现用户账号的注册登录，所以这两个页面简单明了就好。、

该页面品牌logo放在左上方，其余字体整体美观排版就好。页尾主要是公

司的地址以及微信公众号、招商热线，方便用户解决售后以及加盟品牌等。

2.2页面视觉元素设计

2.2.1网站配色设计

怡力网站的配色我结合了各个平台怡力的旗舰店的色彩，结合了产品的色

彩。选出了绿色作为网站的主色，白色为辅助色。

绿色象征着生机勃勃、充满活力、平和安逸、清新舒爽、纯净自然、最初

纯粹等意义。这种颜色是由黄色和蓝色混合而成，因其比例和混合其他颜色的

程度不同，形成了各种不同的表现形式。绿色也具有环保和健康方面的意义。

在网站设计中，页面视觉元素是不可或缺的重要组成部分。直接影响到进入网

站的用户体验，用户打开官网后，如果我们的官网做的视觉设计可以给用户眼

前一亮的感觉到话，就会给用户留下一种好的体验。同时我们的网站页面整体

色彩简单清新，网页页面结构布局合理,并且导航内容清晰可见且易于查找,这

些都能更好的留下用户。如下图（14）。

图14网页配色图

2.2.2标准字

网页的主体字是华文楷体，导航栏字体为Arial，标题为黑体。如下图

（15）所示。

图15标准字体

15

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

2.2.3图标

网页的主体字是华文楷体，导航栏字体为Arial，标题为黑体。如下图

（16）所示。

图16网页图标规范图

2.2.4弹窗

网页的主体字是华文楷体，导航栏字体为Arial，标题为黑体。如下图

（17）所示。

图17网页弹窗大小图

3网站前端设计

3.1网页高保真原型设计

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

素和素材，使用ps和AxureRP8完成了网页高保真原型设计。

16

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

3.1.1首页

图18网站首页

怡力网站首页首先是品牌logo在左上方，导航运用最常见的版式绿色的底、

白色的字，简单明了使得用户能很快的找到其需要跳转到的页面；其次是banner，

banner用ps把一些爆款产品组合在一起让用户一眼就能看见品牌的一些优质

产品；然后下面的品牌介绍内容我采用的是左文右图的版式；再然后新闻中心

采用的是左图右文的版式；最后结尾公司的地址、招商热线以及加入微信公众

号采取了普通的对齐。

由于这类食品的市场绝大多数为减脂增肌年轻人，以及保持身材的女性，

17

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

所以我设计的网站首页符合年轻人的美观设计，网站整体简单明了。

3.1.2品牌形象页面

图19品牌形象页

品牌形象页就比较简单，直接一个单纯的banner，然后后面就是品牌介绍

和品牌故事了，结尾加上了品牌的“因新而怡，健康美丽”以及一个品牌的宣

传图，让用户直接能清晰的看见怡力这个品牌的历史由来和品牌理念。

18

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

3.1.3产品展示页面

图20产品展示页

产品展示页有店铺热销和主食粮面两个内容，这两个内容我各选取了两款

产品图，其中店铺热销的两款产品用了两中色彩，形成一点反差，吸引用户的

眼球，使得用户仔细的观看我们的产品，同时我们这四款产品都可以点击跳转

到相应的详情页面。

19

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

3.1.4产品详情页面

图21产品详情页

产品详情页参考京东购买页面左图右文，点击立即购买和加入购物车都会

跳转到相应的页面去购买，返回键则可以返回到产品展示页面。商品详情则展

示了这款产品的卖点等，评价也会跳转到其相关的页面去。

20

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

3.1.5新闻中心页面

图22新闻中心页

新闻中心页首先映入眼睛的是这个新闻中的banner，这个图是首先去网站

找到合适图运用ps调色彩添加文字做成合适的大小，最后导入AxAxureRP8，

下面的小新闻全部都采取的是左图右文的形式，其中图以及阅读全文点击也会

跳转到相应的新闻详情页中去。

21

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

3.1.6新闻详情页面

图23新闻详情页

新闻详情页采取的是图文穿插的版式，标题、作者、时间以及内容，简单

的图文穿插却简单清晰明了，使得用户能够简单快速的了解这一小段新闻内容。

同时右下角还有个“返回列表页”，点击同样可以跳转回新闻中心页面。

22

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

3.1.7联系我们页面

图24联系我们页

联系我们页面同新闻中心页面一样首先是关于联系我们的banner，然后就

是该品牌的联系方式有加入我们微信公众号、电话等；其次就是公司的地址，

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

23

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

3.1.8登录注册页面

图25登录页

24

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

图26注册页

登录注册页面采用的是最普通的平台登录注册模式，有账号的登录之后就

会直接跳转到首页，注册账号之后可以去到登录页面或者回到注册页面，这些

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

能轻松注册一个，主打的就是一个简单快捷。

25

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

3.2网页动态特效设计

3.2.1网页动态特效

动态特效1：banner轮播特效

图27banner效果图

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

果。如上图（27）所示。

动态特效2：弹窗动效

在注册页、登录页和详情页点击相关按钮，弹出弹窗的效果，提示用户。

如下图（28）所示。

26

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

图28弹窗效果图

3.2.2网页动态特效实现

Banner轮播特效实现步骤：

首先找素材去ps制作两张大小符合banner要求的。

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

由于我们有两张banner，所以分别设置面板1和面板2，并把banner放入其中。

同时设置两个按钮面板x1和x2。

在banner动态面板中的设置中，第二步为设置载入时状态。选择状态为

Next向后循环，并设置间隔循环时间为2000毫秒。进入和退出的动画应设置为

逐渐，并应设定时间为500毫秒。鼠标移入时：按钮动态面板和banner面板都

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

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

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

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

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

画逐渐500毫秒。

总结：给banner设置了自动播放，用户移入时会停止播放，移出会恢复播

放，按钮使得用户移入点击时可以自己选择跳转的自己想看的