怡力网站Web端网页设计.pdfVIP

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

目录

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网站结构设计