网站网店装修论文

黄河水利职业技术学院毕业设计（论文）

“和茶网”装修、美化设计

作者姓名：王旭涛

（黄河水利职业技术学院，河南 开封 475003）

摘要：正所谓三分长相七分打扮，网店的页面就像是附着了店主灵魂的销售员，网

店的美化如同实体店的装修一样，让买家从视觉上和心理上感觉到店主对店铺的用心，

并且能够最大限度的提升店铺的形象，有利于网店品牌的形成，提高游览量。增加顾客

在你的网店停留时间，漂亮恰当的网店装修，给顾客带来美感，顾客浏览网页时不易疲

劳，自然顾客会细心察看你的网页。好的商品在诱人的装饰品的衬托下，会使人更加不

愿意拒绝,有利于促进成交。

关键词：网店装饰，茶叶商城，店铺美化。

一 课题分析以及准备工作

（一） 本课题设计分析

“和茶网”电子商务交易平台是由福建和茶网络科技有限公司搭建

的各类优质茶产品专业交易平台。整合全国各个名优茶产地的优质茶产

品，面向全球客户进行销售。该平台现已成为全球用户购买茶叶、茶具

等茶产品的首选平台。随着网络市场的细化，出现了越来越多的非综合

类商城，如“京东商城”，“梦芭莎服装”，“凡客商城”等，和茶网拥有

自己独特的电子商城，但是作为“茶叶”的销售者，商城没有应有的独

特性，这在竞争激烈的电子商务时代是很不利的，所以需要自己独特的

风格。在这个背景下，我决定在现有的“和茶网”基础上对其装饰、美

化。

（二） 使用软件

Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图

工具，可以更有效的进行图片编辑工作。

EPSnap是一个完全免费并且功能强大的绿色屏幕抓图工具，使用简

单方便。提供全屏捕捉、窗口或控件捕捉、扩展窗口捕捉、区域捕捉、

滚动窗口捕捉、细小元素捕捉、超长网页捕捉、特殊捕捉（视频或游戏）

等强大功能，支持使用鼠标手势或快捷键启动捕捉，支持自动保存，可

共14页 第1页

黄河水利职业技术学院毕业设计（论文）

选择多种保存格式。

二 对原网页的分析

无论装饰、美化什么样网页，都必须要深刻分析了解原来网页的优缺点，

只有这样才能保证不偏离主题。（附原网页，图1）

（原网页全图 图1）

（一）原网页不足之处

1.导航

共14页 第2页

黄河水利职业技术学院毕业设计（论文）

（原网页导航图2）

首先“和茶网”是中国最大的出售茶叶的网站之一，本应品牌齐全，内

容丰富。而本网站只将中国出名的茶叶放到导航栏上面，没有做到分类齐全，

让顾客浏览困难，不能有效的节省时间。并且茶小类与大类放置一块，所以

本模块必须改正，本人查阅资料，该区域可以按照茶叶颜色的分类填写，如

“绿茶”“红茶”等（附图2）

2.热门分类

（原网页提示图3）

在原网页中，该模块的功能不亚于导航栏，个人认为这样摆放不仅浪费

了宝贵的首页上部空间，而且还没有起到应有的作用。因为导航栏上面展示

了中国几大品牌的茶叶，而这个热门分类里面虽然对茶有了一个分类，但是

没有和导航栏的内容起到一个很好的反应，反而倒是盖过了导航栏的某些功

能。所以本区域也必须改正，不过本模块的解释作用还是很好的一部分，有

助于导购，可以留下来。个人建议：改而不去。（附图3）

细节处理不当

共14页 第3页

黄河水利职业技术学院毕业设计（论文）

（原网页banner图4）

可以看出，在不同分辨率的电脑上面显示的效果是不一样的，所以在制

作的时候必须注意细节，避免造成访问者不便。（附图4）

4.首页篇幅太长。

可以看出基本所有信息都可以在首页上面得到，每个区域的销售信息都

展示在了首页，访问者一般就不会再去浏览其他页面，并且过长的页面还都

是用图片填充着，这样会严重影响网页打开速度，建议简短首页面。（附图1）

5.和茶相关信息

（原网页信息图5）

这类信息出现在网上商城里面是十分不应该的，并且还占据在首页位置，

所以直接去掉即可（附图5）

（二）原网页可取之处

1.会员登录，购买物品信息栏。

（原网页会员信息图6）

共14页 第4页

黄河水利职业技术学院毕业设计（论文）

无论是哪一个B2C的网站，会员以及选中物品信息都不会占据太多的空

间，在这一点本网站做法很值得提倡，所以这一块不用较大改动。（附图6）

2.搜索模块以及热门商品

（原网页搜索图7）

这一模块有助于访问者快速找到自己需要的商品以及相关帮助，并且热

门提示环节更能吸引浏览者的眼光。本区域不用太大变更，如果整体需要的

话，把本模块更换位置即可，不能去掉。（附图7）

3.商品活动模块

（原网页商品图8）

这个地方时本网站亮点之一，这样做的好处就是大大节省了宝贵的首页

空间，不仅新商品罗列清楚，还将活动展示在访问者面前。本区域也不需要

更改，稍微修改一下UI即可。（附图8）

4.指引模块

（原网页指引图9）

在原网页中，此模块与上面重复出现，但是在装饰的时侯，这个小模块

可以起到很大的帮助，可以发挥很大的作用。（附图9）

共14页 第5页

黄河水利职业技术学院毕业设计（论文）

三 构思设计及制定装饰步骤

（一）设计的指导思想

1.取其精华，去其糟粕。

这是本次设计中最重要的一点思想，在这个思想的指导下我仔细研究了

原网站，将原网站的优缺点分析透彻，一一罗列出来进行改造与继承。

2.博览群网，择善采之。

浏览众多网站，将其他网站优点一一采纳，将这些优点合理运用在一块，

不能出现“买椟还珠”的情况，花哨的界面脱离本体。

3.贯穿主题，突出重点。

内容紧扣设计主题，茶知识、茶文化等全部围绕主题走；颜色紧扣设计

主题，合理运用色彩搭配，设计简约大气，突出品牌感。合理优化UI，使界

面美观。做好贯穿主题带来的结果就是突出重点，将与其他网购网站区别开

来。

4.妥当工具，按照计划。

预先善其事，必先利其器。依据开题报告的计划，有计划有顺序的进行

设计。

（二）美化网页的步骤

1.明确主题

紧扣所装饰网站的主题，否则一切都是白做。网站主题就是网站所包含

内容的一个客观体现。

2.搜集材料

明确了网站的主题以后，就要围绕主题搜集材料。当然了，搜集的范围

要广一点，不能太局限了。

3.规划网页

对一个已有网站的装饰，首先要了解原网站哪里不合理，哪里需要更改。

然后需要了解相关类型成功的网站，选择成功网站亮点，结合需要装饰网站

主题，统一规划。一个网站装饰设计得成功与否，很大程度上取决于上面三

者的合理搭配。网站规划包含的内容很多，如网站的结构、栏目的设置、网

黄河水利职业技术学院毕业设计（论文）

站的风格、颜色搭配、版面布局、文字图片的运用等，只有在制作网页之前

把这些方面都考虑到了，制作出来的网页才能有个性、有特色，具有吸引力。

4.制作网页

依据步骤对原来网站进行装饰，合理结合多个工具，结合开题报告分层

次合理的进行制作。

（三）装饰网页的要点

1.页面内容翔实

网络是虚拟的，而网站往往体现的是现实世界中的一个实体，如公司或

个人。如何把这些实体的元素通过虚拟的网络空间来展现出来，并且引起浏

览者的注意呢？只有那些极富特色、内容翔实、浏览顺畅、效果独特的网页

才能使人驻足观看，及使用、功能和服务容于网站之中，从而达到网站的特

定目的。

2.视觉效果新颖

网页形象要不落俗套，要重点突出一个“新”字，这个原则要求我们要

结合自身的实际情况创作出一个独特的网站。我们在设计网页时，要尽量做

到“少”而“精”,又必须突出“新”。把内容的独特的元素，如名称、标志、

标准字体、标准色等等。通过这些元素的合理应用，来实现网站形象与个性

的塑造提高视觉效果。

3.栏目布局明确

一个网站有很多的页面和主题、链接，这就需要注意其流畅的导向性。

要做到使页面合理流畅、环环相扣、可信安全，这几点是一个优秀网站的精

神所在，也是吸引力的来源。强调要注意把网站内容的层次性和空间性突出

显示出来，使人一眼就能看出你的网站重点突出，结构分明。

4.特殊字体慎用

在photoshop中虽然可以使用任意字体，但是当页面上传至网络空间中，

文字是非图片形式可编辑的时候，你不能预测你的访问者在他们的计算机上

将看到什么。也许在你的计算机里看起来相当好的网页，在另一个不同的平

台上看起来可能就会变形走样。所以要避免你所选择的字体在访问者的计算

机上不能显示，特殊字体要慎用。

四 美化效果及构思实现

（一）最终效果

共14页 第7页

黄河水利职业技术学院毕业设计（论文）

最终效果图基调紧扣原网站“茶”的主题，将主色调设计成“绿、淡绿”

色，部分区域会是叶黄色，一些促销区域使用醒目的红色。为了使浏览者看

着舒服，商品部分保持了白色，米黄色。

功能模块部分按照计划都摆放到了指定位置，并在制作的过程中增添了

许多新奇小饰品。

最终效果图如下。

（最终效果图10）

共14页 第8页

黄河水利职业技术学院毕业设计（论文）

（二）各功能模块实现

1.会员模块

（效果图会员11）

本网站是购物类型的网站，会员功能没有必要占据较大的篇幅，只需要

简单但是功能必须要强大。我将会员板块放到了网页最顶端，这样既节省空

间，又能起到一目了然的作用。新网叶主题是绿色，为了起到醒目的作用，

我将字体设为黑色。文中彩色CD是网站中自动播放音乐的，模块中购物车是

下载，其余部分均由个人完成，其中竖线“丨”是搜狗打字法输入。

2.导航模块

（效果图导航图12）

（1）导航栏分为10个子栏目，分别是首页、绿茶、红茶、白茶、黑茶、

花茶、乌龙茶、特色茶、精品茶具、进口红酒。

（2）世界茶种主要分为这几大类，之所以改变了原网站将中国知名茶品

放到了这个地方，是因为这样做的好处就是层次明了，结构清晰。避免了给

人重复雷同的感觉

（3）版模块特效使鼠标放在上面会稍微改变形状，做法是：建立新图层

a，使其颜色与导航栏下部一样。其他鼠标没有触及的到地方均是图层b。两

种图层都经过蒙版化处理，然后再建立新图层输入导航标题c，就完成了导

航上面的部分。下面几点就是利用“层”比较简单就不一一叙述。

共14页 第9页

黄河水利职业技术学院毕业设计（论文）

3.滚动图片模块

（1）展示部分

本模块主要使用与各大品牌的商品促销及重大活动，共5张滚动图片。

这个模块有效地起到提示作用，能让访问者率先点击该图片进入相关活动专

区，另外在一些重大活动的时候还可以更换成活动的内容（限于篇幅仅举例

一张图片），本图片从原网站截图获得。

（效果商品图13）

（2）提示部分

除此之外本模块还有一个小提示板块，该模块主要功能是对访问者进行

详解，解释“导航”模块里面出现的几种茶叶，能够让顾客能准确的找到商

品，节省顾客时间。

（效果导购图14）

做法如下：首先建立图层a，选取颜色(R241,G241，B241)，小三角部分

共14页 第10页

黄河水利职业技术学院毕业设计（论文）

为网上素材，右上角红色区域利用b多次处理可得到。汉字均为输入c，右

边“更多”字样系原网页所截取。

4.商品销售模块

去除了原网站将商品集中摆放在首页的缺点，并结合了原网站在商品区

域的可取之处。本模块改动成分页式，只将新产品，热销产品，特价产品，

清仓产品放到醒目位置，这些商品附带链接，顾客点击之后会自动进入到相

关区域。这样不仅可以节省访问速度，还可以优化网站，以避免出现人多时

打不开页面的情况。

（效果商品图15）

共14页 第11页

黄河水利职业技术学院毕业设计（论文）

（效果商品图16）

本模块中用图均由原网页截取获得，其中鼠标特效部分与上面一样，首先建

立层a，中间用到b、c、d等知识。

5.帮助模块

（效果帮助图17）

作为网上商城，除了商品不能使顾客满意而导致销量不高的重要原因外，

顾客不知道怎么操作是销量不高的首要原因。所以本模块对网购新手有很大

的帮助作用，本模块还有客服，可以更好的提供帮助。本模块除了色调不同

之外，其他的基本与原网站相同。图中汉字经过处理，过程如下：建立文字

图层a，对文字使用“投影”先关知识，具体数据b，既可以得到图中效果。

四 美化效果评述

看到最终效果图的那一刻，自己还是挺自豪的。辛苦了那么多天，经过

多次与老师、同学的交流，删改多次最终有了现在的成果，期间犯了很多错

误当然同样有很多收获，下面是我设计期间所犯错误的总结与收获。

（一）总结

1.了解原网站

共14页 第12页

黄河水利职业技术学院毕业设计（论文）

不管去改变什么事情，都需要对原来的事物了解的非常清楚，否则盲目

开展活动，只会南辕北辙。对于本次课题刚开始我就犯了这样的错误，后来

通过与指导老师的交流，我改正了这个错误。在深刻了解原网站的基础上我

得知我需要一个什么样的效果，以及在这个目标下我寻找类似网站的优点，

以及所需要的素材。

2.寻找材料

寻找材料的时候不能把眼光放得太窄，刚开始我只把眼光放到“茶叶”

这个行业的网站中，但是几天我发现根本就没有找到用处很大的信息，后来

我研究了“梦芭莎”“凡客”等的网站，并从中得到启发。

3.合理排版

首页上面需要什么样的信息，什么信息不能出现在首页上面。这个问题

原来没有考虑过，到着手做效果图的时候才发现这是个大问题。合理的排版

会让人产生清爽的感觉，可以达到快速浏览的效果。但缺乏合理结构的首页

会使浏览非常困难，会导致流量的下降。这个过程中我访问了大量的B2C网

站，力求做到最大优化。

4.重点突出

在数以千计万计的网站中怎样才能让访问者记住你的网站？网站的个性

是必不可缺少的元素。真正的个性是网站主题的突出，本网站是“茶叶”，必

须依据这个特点将主题发挥的淋漓尽致，切记出现服装、电器、综合一个基

调。

5.注重细节

在用PS设计的过程中，不可避免出现某些小瑕疵，但是如果不注意的

话，会让访问者对网站产生非常不好的印象，所以必须仔细观察，做到完美。

6.换位思考

在制作的过程中，我经常会让身边的同学观察效果图，力求做到从同

访问者的眼中观察网站。自己作为设计者，我自己也经常站在旁观者的角度

出发，揣摩该网站。从浏览者的角度思考网页的所有元素，力求最大限度的

改良网页元素以适合浏览。

（二）收获

1.在整个过程中缺乏与老师、同学的交流，造成否写环节脱轨

2.上课的时候学的知识把握不牢，运用的时候效率不高。

共14页 第13页

黄河水利职业技术学院毕业设计（论文）

3.相关知识掌握不够，在入手的时候很吃力。秉着用以致学的态度，自

己查阅资料然后解决所遇到的问题。

4.缺乏独特的思维，很难设计出出众的作品，只有“博览群书，阅网无

数”才能有灵感。一直做到电脑前面是行不通的。在过程中不断浏览网页，

不断借鉴模板才能集众人之长。

5.在设计过程中需要用到很多老师没有教过的东西，自己只能百度查询，

或看教程。在过程中不知不觉感觉技术与操作熟练度慢慢提高。

五 结束语

在结束的这一刻首先要感谢我们的指导者—田丰老师。

在整个创作构思、设计、实施的过程中，由于种种的不熟悉，初期产生

了很大的困难，不仅没有做好开头，而且还跑题了。后来通过与指导老师以

及与本组成员的探讨与沟通，我渐渐地对整个设计有了一个大体的认识。在

这个认知的指导下我渐渐追赶论文进度，虽然浪费了很多时间，但同样我也

学到了很多知识。之余还要感谢本组成员李英良，他对我的帮助也非常大。

参考文献：

[1] 《电子商务服务》清华大学出版社

[2] 《网页制作》人民邮电出版社

[3]《Photoshop参考手册》2008年版。

[4] 范文东/编著 《色彩搭配原理与技巧》 人民美术出版社

[5]Patrick Mcneil/编著 《网页设计创意书》 人民邮电出版社

[6] 素材中国16素材网/

[7] jscode网页特效 /

共14页 第14页