铭宇小屋网站Web端网页设计

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

目录

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

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

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

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

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

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

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

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

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

4设计总结.........................................................27

参考资料............................................................29

I

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

铭宇小屋网站Web端网页设计

1网站设计需求分析

1.1网站建设背景

我选择这个选题，是因为与我现在从事的工作相关，毕业后我选择自主创

业，主要经营动漫周边产品的销售工作，“铭宇小屋”就是我个人工作室的名

字，为了能给更多地模玩爱好者提供一个最新的国漫资源平台，我便将我的毕

业设计选题定为“铭宇小屋网站Web端网页设计”。

1.1.1用户需求分析

针对国内动漫文化的痛点：咨询更新与渠道不稳定，周边产品信息第一时

间找不到渠道获得，没有一个良好的交流和选购平台；所以我针对这几点，建

设一个既能看到周边产品的信息又能第一时间了解动漫的最新咨询的网站。

1.1.2竞争分析

对于同类型网站，比如动漫信息咨询的网站，其版面古早，信息来源与咨

询更新很混杂，本网站提供国内最新最权威的咨询和周边产品购买渠道；其劣

势在与国内大部分咨询很大部分是根据社交媒体来获取的，可能会有核心人员

流失的可能性。

1.1.3网站功能设计

铭宇小屋Web端网页设计主要实现的是点击动漫周边产品图片实行跳转，

即可查看更多的详细信息；点击咨询文本实现跳转到最新的动漫咨询。

1.2网站结构设计

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

页面的图片按钮，即可实现页面之间的跳转。

本网站的每一个网页都有一个导航栏。导航栏上设有首页、商店、社区、

头条、周边、积分商城等按钮。用户点击导航栏上的按钮，即可前往网站的相

对应的模板，也可以在导航栏中点击登录前往登录页面。

1

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

在网站首页，用户点击登录或者注册即可登录享受网站的优秀内容。如果

账号或者是密码没有输入的话是会细心提醒用户没有输入账号或是密码，同时

在首页，有最新、内容丰富的精选和推荐，用户可以最直观的了解最新的周边

产品折扣与推荐。在社区活动一栏中还可以一览社区的最新活动，丰富周边产

品生活；在头条页面中还能发现最新的周边产品资讯，也可以在周边与积分商

城页面中找到自己心仪周边产品的周边哦。其网站的程序设计如下图1所示。

图1网站结构图

2网站视觉设计

2.1页面版式设计

网站的版式设计采用的方法是首先手绘草稿图，再使用软件axure进行网

页低保真线框图的制作。在设计线框图之前，我浏览了许多关于网页设计规范

的相关文件，以及相关周边产品销售品牌网站的设计，并且观察其特点来进行

2

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

一些网页的规划。

2.1.1网站首页

此首页为首页布局图，主要部分为顶部导航以及主要的版面推荐，导航栏

有：“首页”、“商店”、“社区”、“头条”、“周边”、“积分商城”六个模块内

容，右上角设有登录按钮。内容为主要推出的最新、最火爆的周边产品折扣，

便于消费者更加直观的了解最新情报，提高消费者的购买欲的同时也增加消费

者的好奇心，让整个页面更加的完整，给消费者更舒适的消费体验；主要是

“精选和推荐”和“特别优惠”的滚动广告栏。在这之下就是为吸引消费者设

置的登录按钮。首页层次结构图如图2所示。

图2首页层次结构图

网站首页的线框图采用axure进行制作，可以分为五步。第一步把头部导

航栏用占位符工具绘制出；第二步将banner图片、首推区域用占位符工具绘

制出；第三步用占位符工具将主体部分划分，进行细微的调整；第四步用占位

符将背景图绘制出来，并置于最底层；第五步用占位符工具绘制最底部的网站

详细资料。

网站首页是一个网站的门面的主要形象，也是网站的最重要的一个部分，

3

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

在首页这个版面的版式设计上，我想通过网站给用户最直观的周边产品折扣，

让用户在打开网站的瞬间就便能明白这个版式要传递的内容和信息。网站的首

页设计我的想法是干净舒适、版式明确，思路明确并且有辨识性，能让用户一

目了然的知道铭宇小屋的“为玩家着想”的思想。只有让用户了解了真心、真

诚的服务，才能让消费者群体信服，拥护。

首页的设计是先以banner大图进行视觉传达，分别是“【铭宇食堂】快

来寻找时代的美味吧”、“【铭宇玩伴】快来寻找你的伙伴吧”、“【铭宇漫展】

快来寻找你的世界吧”、“【铭宇衣柜】快来寻找你的衣世界吧”、“【铭宇小

屋】快来创造自己的世界吧”，然后便是周边产品精选推荐和零食产品特别优

惠。首先是对用户的冲击让用户有归属感，直观也很细心的两者贴合在一个版

面，最后在整个最后设置登录提示，让用户更加直观的体验服务，并使整个首

页的版面更加完整。首页线框图如图3所示。

图3铭宇小屋首页线框图

4

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

2.1.2网站商品页

此页面为网站的核心商品页布局，主要部分分为两大板块，其一是以导航

栏为主特惠为辅的开头版面，画面简洁且不失风采，能直观的浏览到有效信息；

承接开头版面的就是另一个以“零食、玩具、漫画、衣服、装饰小物品”的导

航的商品页面，多种分类可以使得面对复杂人群时，每个用户都能有效的获取

到自己想要的信息，更人性化，能够简单直观的吸引到消费者，并能让消费者

在消费的同时感受到真诚的服务态度。网站商品页层次结构图如图4所示。

图4网站商品页层次结构图

5

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

图5网站商品页线稿图

商品页的设计需要展示出来的是周边产品的多元化和社区文化，分为的“零

食、玩具、漫画、衣服、装饰小物品”都是经过精心挑选出来的标签，其次在

诸多的消费中让消费者不会眼花缭乱，让消费者能精准的找到自己所需要的信

息；在排版方面使用的是单竖排列，再加上五个标签，不会让这个版面显得很

拥挤，给人感觉体验良好。网站商品页线框图如图5所示。

商品页的线框图采用axure进行制作，第一步把头部导航栏用占位符工具

绘制出来；第二步对五个标签的位置进行绘制；第三步用占位符工具对各个商

品进行绘制；第四步将底部的网站详细信息用占位符工具绘制出来。

6

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

2.1.3网站社区页

此页面为网站的核心社区页布局，是以导航栏为主特惠为辅的开头版面，

画面简洁且不失风采，能直观的浏览到有效信息；承接的是以“社区要闻”的

核心快捷板块；在后面就是社区的最新头条咨询，简单明了，加深社区的互动

性，让人能确切的感到周边产品文化所带来的多样性，和社区文化的魅力。其

中社区的要闻和头条是以图文或是视频结合，符合现在主流的信息获取方式。

网站社区页层次结构图如图6所示。

图6网站社区页层次结构图

社区页的线框图采用axure进行制作，第一步把头部导航栏用占位符工具绘

制出来；第二步用占位符工具对最新社区活动进行分化；第三步将热门小组分

四大块进行分化；最后对最底部的网站详细信息进行绘制，使得整个网页版面

更加完整。网站社区线框图如图7所示。

图7铭宇小屋社区线稿图

7

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

2.1.4网站头条页

此页面为网站的核心头条页布局，主要部分分为四大板块，其一是以导航

栏为主特惠为辅的开头版面，画面简洁且不失风采，能直观的浏览到有效信息；

承接的是以“最专业的次元咨询中心”的头条标签，简洁明了；第三大板块就

是以“推荐、视频、电台”的头条咨询，采用的是图文结合和视频加文字的方

式，现在在短视频时代的潮流下，图文结合的方式是最能稳定传达方式，不拖

沓并且能精准的了解想要了解的周边产品内容和动态咨询，接着就是最底部的

有关网站的详细信息。网站头条页层次结构图如图8所示。网站头条线框图如

图9所示。

图8网站头条页层次结构图

8

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

图9铭宇小屋头条图线稿图

头条页的线框图采用axure进行制作，第一步把头部导航栏用占位符工具

绘制出来；第二步将头条大标签的模块进行绘制；第三步用占位符工具对“推

荐、视频、电台”的头条咨询进行绘制；最后对最底部的网站详细信息进行绘

制，使得整个网页版面更加完整。

2.1.5网站周边页

此页面为网站的核心周边页布局，主要部分分为三大板块，其一是以导航

栏为主特惠为辅的开头版面，画面简洁且不失风采，能直观的浏览到有效信息；

承接的是以“周边首页”的周边标签，简洁明了；第三大板块就是以“卡普空、

北通、盖世小鸡”的周边，采用的是图文结合的方式，直观的了解商品的价格

与详情；接着就是最底部的有关网站的详细信息。网站周边页层次结构图如图1

0所示。

9

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

图6网站周边页层次结构图

10

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

周边页的线框图采用axure进行制作，第一步把头部导航栏用占位符工具

绘制出来；第二步将“周边首页、人们推荐、促销折扣、限量周边”的周边标

签绘制出来；第三步将“卡普空、北通、盖世小鸡”的周边绘制出来，采用的

是一排五个的图文结合形式；最后对最底部的网站详细信息进行绘制，使得整

个网页版面更加完整。网站周边页线稿图如图11所示。

图7铭宇小屋周边图线稿图

2.1.6网站积分商城页

11

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

图9网站积分商城页层次结构图

图8铭宇小屋积分商城图线稿图

12

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

此页面为网站的核心积分商城页布局，主要部分分为四大板块，其一是以导

航栏为主特惠为辅的开头版面，画面简洁且不失风采，能直观的浏览到有效信

息；整个积分商城的商品采用的是图文并茂的格式，让用户能够准确的获得到

自己所需要的信息；接着就是最底部的有关网站的详细信息。网站积分商城页

层次结构图如图12所示。

积分商城页的线框图采用axure进行制作，第一步把头部导航栏用占位符

工具绘制出来；再是使用占位符工具将商品内容绘制出来，采用的是一行4个

的方式，整个版面简洁清爽；最后对最底部的网站详细信息进行绘制，使得整

个网页版面更加完整。网站积分商城图线框图如图13所示。

2.1.7网站登录页

图10网站登录页层次结构图

此页面为网站的核心登录页布局，主要部分分为四大板块，其一是以导航栏

为主特惠为辅的开头版面，画面简洁且不失风采，能直观的浏览到有效信息；

承接的是巨大背景的banner；页面中心就是登录的板块，如果用户没有输入用

户名或者密码时，下方会弹出“请输入用户名或者是密码”的提示语，并会在

输入后消失，输入完毕后将跳转到首页；所有商品的购买都需要用户先登录之

后才可以操作。网站登录页层次结构图如图14所示。

登录页的线框图采用axure进行制作，第一步把头部导航栏用占位符工具

绘制出来；第二步将巨大背景的banner绘制出来；再是使用占位符工具将用户

名密码栏绘制出来，整个版面简洁清爽；最后对最底部的网站详细信息进行绘

制，使得整个网页版面更加完整。网站登录页线框图如图15所示。

13

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

图11登录页线稿图

2.1.8网站个人主页

图126网站个人主页页层次结构图

此页面为网站的核心个人主页布局，主要部分分为四大板块，其一是以导

航栏为主特惠为辅的开头版面，画面简洁且不失风采，能直观的浏览到有效信

息；承接的是用户背景图和用户名以及用户头像；接着右边是用户的个性化而

有的：商店、社区、头条、周边、积分。网站个人主页页层次结构图如图16所

示。

14

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

个人主页页的线框图采用axure进行制作，第一步把头部导航栏用占位符

工具绘制出来；第二步将用户背景绘制出来；再是使用占位符工具将用户名用

户头像绘制出来，整个版面简洁清爽；第三步将以“我的主页”为主题的五大

版面绘制出来；最后对最底部的网站详细信息进行绘制，使得整个网页版面更

加完整。网站个人主页页线框图如图17所示。

图13网站个人主页页线稿图

2.2网页视觉元素设计

2.2.1网站logo

网站logo取自铭宇的首字母MY，正好对应网站所希望的成为用户的“我

的”小屋。Logo图如图18所示。

图14铭宇小屋logo图

2.2.2颜色

网页的整体配色设计根据原有品牌的LOGO进行设计，选取的主色调是灰色。

灰色可以联想到“沉稳”给人一种踏实的感觉，将导航栏和底部网站详细信息

给与灰色让整个不会太活跃也不会太阴沉。辅助色用靛青色、白色设置按钮色。

15

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

如图19所示。

图15铭宇小屋主辅颜色搭配图

2.2.3标准字

网站的主体内容都采用的是Arial。网站正文文字大小32pt，二级标题

24pt，文本使用18。在导航栏文字字体大小设置为20pt，以突出标题，标准字

如图20所示。

图16标准字图

16

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

2.2.4导航

导航的设置采用的是最常用的顶部导航栏，顶部导航栏可以使用网页的一

目了然呈现在用户眼前，使其迅速寻找所需。顶部导航这样的设计形式为保守

但是使他的目的性强，可以确保网页组织结构的可靠性和降低用户寻找的时间

成本。导航图如图21所示。

图17导航图

2.2.5弹窗

在购买是需要先登录，将会弹出提示窗口。弹窗图如图22所示。

图18弹窗图

3网站前端设计

3.1网页高保真原型设计

网页的高保真设计采用的方法是先通过在页面版式设计的基础上，对版面

的元素进行素材替换，使用的软件是以axure为主Photoshop为辅。

3.1.1网站首页

网站首页是分为三个大的部分，分别是“精选和推荐”、“特别优惠”和“推

荐登录”；其中，在“精选和推荐”里，分别有“【铭宇食堂】”、“【铭宇玩

17

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

伴】”、“【铭宇衣柜】”和“【铭宇小屋】”五个类别；在“特别优惠”中，用户

可以浏览到最新的商品折扣；在“推荐登录”中用户可以点击登录按钮进行登

录，以便之后进行消费。

网站首页如图23所示。

图19网站首页高保真图

3.1.2网站商品页

网站商品页有五个大类，分别是“零食”、“玩具”、“漫画”、“衣服”和“装

饰品”；采用小图加折扣的形式，能让用户更加直观的了解折扣。

网站商品页如图24所示。

18

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

图20网站商品页高保真图

3.1.3网站社区页

图21网站社区页高保真图

19

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

网站社区页是图与文的“1+1”的形式呈现，其网页的主要内容是关于国内

动漫的最新相关资讯和杂谈。网站社区页如图25所示。

3.1.4网站头条页

网站头条页是以图文并茂的缩略图的形式呈现，其网页的主要内容和网站

社区页一样是关于国内动漫的最新相关资讯和杂谈。网站头条页如图26所示。

图22网站头条页高保真

3.1.5网站周边页

网站周边页是有三个大类别，分别是“喜羊羊系列”、“漫画系列”和“斗

龙战士玩具系列”。网站周边页如图27所示。

20

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

图23网站周边页高保真图

3.1.6网站积分商城页

网站积分商城页是即将上架的页面，里面是预设1：10的金额换取积分来

进行额外的物品交换，来提高用户的粘性。网站积分商城页如图28所示。

3.1.7网站登录页

网站登录页是用户在购买商品前必须接触的页面，登录后才可进行购买，

在登录过程中会提示用户是否输入用户名与密码。网站登录页如图29所示。

3.1.8网站个人主页页

网站个人主页页设置了注销按钮，同时可以通过点击跳转至其他网页。网

21

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

站个人主页页如图30所示。

图24网站积分商城页

图25网站登录页高保真图

22

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

图26网站个人主页页高保真图

3.2网页动态特效设计

3.2.1网页动态特效原型

动态特效1：鼠标悬停让类别大图变成商品图，将鼠标放置到四个商品小图

上将在类别图展现商品图，鼠标移出后类别图恢复原状。如图31、32所示。

图27网页动态特效1效果图1

23

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

图28网页动态特效1效果图2

动态特效2：在首页的banner做了一个轮播图特效。这个轮播特效一共设

计了5张banner图，每张主图附加4张小预览图，当鼠标移动到预览图时，原

本的大图将会替换为预览图的大图版本，目的是实现banner轮播滚动特效的同

时，也可以先用户展示出更多的咨询与讯息。Banner的轮播特效的制作使用的

是的Axure软件进行的都交互设计制作而成，先将做好的banner效果图放在绘

制好的区域中，然后将图片进行导入，调整好图片大小和尺寸，再调整整个的

banner的版面，放在合适的位置。Banner轮播滚动主要利用的是Axure中的动

态面板进行设置，banner图是整个首页图的核心部分，让浏览者能一眼看到，

所有在设计banner时，根据所放置的产品图会和区域进行文字元素位置的调整

与设置，让整个区域更契合。如图33、34所示。

图29网页动态特效2效果图1

24

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

图30网页动态特效2效果图2

3.2.2网页动态特效实现

鼠标悬停大图特效制作步骤：给各个商品图设置鼠标移入和移出效果并且

将移入移出时的商品小图的不透明度进行调换，具体设置如图35所示。

图31鼠标悬停大图特效设置图

Banner轮播特效制作步骤：首先建立一个动态面板，将效果图分别