网站网店装修论文.docx

网站网店装修论文.docx

《网站网店装修论文.docx》由会员分享，可在线阅读，更多相关《网站网店装修论文.docx（16页珍藏版）》请在冰点文库上搜索。

网站网店装修论文

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

作者姓名:

王旭涛

（黄河水利职业技术学院,河南开封4７50０3）

摘要:

正所谓三分长相七分打扮,网店的页面就像是附着了店主灵魂的销售员,网店的美化如同实体店的装修一样,让买家从视觉上和心理上感受到店主对店铺的用心,同时能够最大限度的提升店铺的形象,有利于网店品牌的形成,提高游览量。

增加顾客在您的网店停留时间,美丽恰当的网店装修,给顾客带来美感,顾客浏览网页时不易疲劳,自然顾客会细心察看您的网页。

好的商品在诱人的装饰品的衬托下,会使人更加不情愿拒绝,有利于促进成交、

关键词:

网店装饰,茶叶商城,店铺美化。

一课题分析以及准备工作

（一）本课题设计分析

“和茶网"电子商务交易平台是由福建和茶网络科技有限公司搭建的各类优质茶产品专业交易平台。

整合全国各个名优茶产地的优质茶产品,面向全球客户进行销售。

该平台现已成为全球用户购买茶叶、茶具等茶产品的首选平台。

随着网络市场的细化,出现了越来越多的非综合类商城,如“京东商城”,“梦芭莎服装",“凡客商城”等,和茶网拥有自己独特的电子商城,然而作为“茶叶”的销售者,商城没有应有的独特性,这在竞争激烈的电子商务时代是特别不利的,因此需要自己独特的风格。

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

（二）使用软件

Ｐhｏｔｏｓｈop主要处理以像素所构成的数字图像、使用其众多的编修与绘图工具,能够更有效的进行图片编辑工作。

ＥＰSnaｐ是一个完全免费同时功能强大的绿色屏幕抓图工具,使用简单方便、提供全屏捕捉、窗口或控件捕捉、扩展窗口捕捉、区域捕捉、滚动窗口捕捉、细小元素捕捉、超长网页捕捉、特别捕捉（视频或游戏）等强大功能,支持使用鼠标手势或快捷键启动捕捉,支持自动保存,可选择多种保存格式、

二对原网页的分析

不管装饰、美化什么样网页,都必须要深刻分析了解原来网页的优缺点,只有如此才能保证不偏离主题、（附原网页,图1）

（原网页全图图１）

（一）原网页不足之处

1、导航

（原网页导航图２）

首先“和茶网"是中国最大的出售茶叶的网站之一,本应品牌齐全,内容丰富。

而本网站只将中国出名的茶叶放到导航栏上面,没有做到分类齐全,让顾客浏览困难,不能有效的节约时间。

同时茶小类与大类放置一块,因此本模块必须改正,本人查阅资料,该区域能够依照茶叶颜色的分类填写,如“绿茶”“红茶”等（附图２）

2、热门分类

　　　　　　　　　（原网页提示图3）

在原网页中,该模块的功能不亚于导航栏,个人认为如此摆放不仅浪费了宝贵的首页上部空间,而且还没有起到应有的作用、因为导航栏上面展示了中国几大品牌的茶叶,而这个热门分类里面尽管对茶有了一个分类,然而没有和导航栏的内容起到一个特别好的反应,反而倒是盖过了导航栏的某些功能。

因此本区域也必须改正,只是本模块的解释作用依然特别好的一部分,有助于导购,能够留下来。

个人建议:

改而不去、（附图3）

３。

banｎer细节处理不当

　　　　　　　　　（原网页baｎneｒ图4）

能够看出,在不同分辨率的电脑上面显示的效果是不一样的,因此在制作的时候必须注意细节,幸免造成访问者不便。

（附图4）

４、首页篇幅太长。

能够看出基本所有信息都能够在首页上面得到,每个区域的销售信息都展示在了首页,访问者一般就可不能再去浏览其他页面,同时过长的页面还都是用图片填充着,如此会严重影响网页打开速度,建议简短首页面。

（附图1）

５。

和茶相关信息

（原网页信息图5）

这类信息出现在网上商城里面是十分不应该的,同时还占据在首页位置,因此直截了当去掉即可（附图５）

（二）原网页可取之处

1、会员登录,购买物品信息栏、

（原网页会员信息图6）

不管是哪一个B2C的网站,会员以及选中物品信息都可不能占据太多的空间,在这一点本网站做法特别值得提倡,因此这一块不用较大改动。

（附图6）

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

（原网页搜索图７）

这一模块有助于访问者快速找到自己需要的商品以及相关帮助,同时热门提示环节更能吸引浏览者的眼光。

本区域不用太大变更,假如整体需要的话,把本模块更换位置即可,不能去掉。

（附图7）

3、商品活动模块

（原网页商品图8）

这个地方时本网站亮点之一,如此做的好处就是大大节约了宝贵的首页空间,不仅新商品罗列清楚,还将活动展示在访问者面前、本区域也不需要更改,略微修改一下UI即可。

（附图8）

4、指引模块

（原网页指引图９）

在原网页中,此模块与上面重复出现,然而在装饰的时侯,这个小模块能够起到特别大的帮助,能够发挥特别大的作用、（附图9）

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

（一）设计的指导思想

１、取其精华,去其糟粕。

这是本次设计中最重要的一点思想,在这个思想的指导下我认真研究了原网站,将原网站的优缺点分析透彻,一一罗列出来进行改造与继承。

2、博览群网,择善采之、

浏览众多网站,将其他网站优点一一采纳,将这些优点合理运用在一块,不能出现“买椟还珠”的情况,花哨的界面脱离本体、

3、贯穿主题,突出重点。

内容紧扣设计主题,茶知识、茶文化等全部围绕主题走;颜色紧扣设计主题,合理运用色彩搭配,设计简约大气,突出品牌感。

合理优化ＵＩ,使界面美观、做好贯穿主题带来的结果就是突出重点,将与其他网购网站区别开来。

４。

妥当工具,依照计划。

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

（二）美化网页的步骤

１、明确主题

紧扣所装饰网站的主题,否则一切都是白做。

网站主题就是网站所包含内容的一个客观体现。

２。

搜集材料　

明确了网站的主题以后,就要围绕主题搜集材料、当然了,搜集的范围要广一点,不能太局限了、

3。

规划网页

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

然后需要了解相关类型成功的网站,选择成功网站亮点,结合需要装饰网站主题,统一规划、一个网站装饰设计得成功与否,特别大程度上取决于上面三者的合理搭配、网站规划包含的内容特别多,如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等,只有在制作网页之前把这些方面都考虑到了,制作出来的网页才能有个性、有特色,具有吸引力。

4、制作网页

依据步骤对原来网站进行装饰,合理结合多个工具,结合开题报告分层次合理的进行制作。

（三）装饰网页的要点

１。

页面内容翔实

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

如何把这些实体的元素通过虚拟的网络空间来展现出来,同时引起浏览者的注意呢？

只有那些极富特色、内容翔实、浏览顺畅、效果独特的网页才能使人驻足观看,及使用、功能和服务容于网站之中,从而达到网站的特定目的、

2。

视觉效果新颖　

网页形象要不落俗套,要重点突出一个“新"字,这个原则要求我们要结合自身的实际情况创作出一个独特的网站、我们在设计网页时,要尽量做到“少”而“精”,又必须突出“新”。

把内容的独特的元素,如名称、标志、标准字体、标准色等等。

通过这些元素的合理应用,来实现网站形象与个性的塑造提高视觉效果。

3、栏目布局明确　

一个网站有特别多的页面和主题、链接,这就需要注意其流畅的导向性、要做到使页面合理流畅、环环相扣、可信安全,这几点是一个优秀网站的精神所在,也是吸引力的来源。

强调要注意把网站内容的层次性和空间性突出显示出来,使人一眼就能看出您的网站重点突出,结构分明、

4、特别字体慎用

在ｐhｏtosｈop中尽管能够使用任意字体,然而当页面上传至网络空间中,文字是非图片形式可编辑的时候,您不能预测您的访问者在他们的计算机上将看到什么。

也许在您的计算机里看起来相当好的网页,在另一个不同的平台上看起来估计就会变形走样。

因此要幸免您所选择的字体在访问者的计算机上不能显示,特别字体要慎用。

四　美化效果及构思实现

（一）最终效果

最终效果图基调紧扣原网站“茶”的主题,将主色调设计成“绿、淡绿”色,部分区域会是叶黄色,一些促销区域使用醒目的红色、为了使浏览者看着舒服,商品部分保持了白色,米黄色、

功能模块部分依照计划都摆放到了指定位置,并在制作的过程中增添了许多新奇小饰品。

最终效果图如下、

　　　　　　（最终效果图10）

（二）各功能模块实现

1、会员模块

（效果图会员11）

本网站是购物类型的网站,会员功能没有必要占据较大的篇幅,只需要简单然而功能必须要强大。

我将会员板块放到了网页最顶端,如此既节约空间,又能起到一目了然的作用。

新网叶主题是绿色,为了起到醒目的作用,我将字体设为黑色。

文中彩色CD是网站中自动播放音乐的,模块中购物车是下载,其余部分均由个人完成,其中竖线“丨”是搜狗打字法输入。

2。

导航模块

（效果图导航图1２）

（１）导航栏分为１０个子栏目,分别是首页、绿茶、红茶、白茶、黑茶、花茶、乌龙茶、特色茶、精品茶具、进口红酒。

（2）世界茶种主要分为这几大类,之因此改变了原网站将中国知名茶品放到了这个地方,是因为如此做的好处就是层次明了,结构清楚。

幸免了给人重复雷同的感受

（3）版模块特效使鼠标放在上面会略微改变形状,做法是:

建立新图层a,使其颜色与导航栏下部一样。

其他鼠标没有触及的到地方均是图层b、两种图层都经过蒙版化处理,然后再建立新图层输入导航标题ｃ,就完成了导航上面的部分。

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

3、滚动图片模块

（1）展示部分

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

这个模块有效地起到提示作用,能让访问者领先点击该图片进入相关活动专区,另外在一些重大活动的时候还能够更换成活动的内容（限于篇幅仅举例一张图片）,本图片从原网站截图获得。

　　　　　　　　　　　　（效果商品图１3）

（2）提示部分

除此之外本模块还有一个小提示板块,该模块主要功能是对访问者进行详解,解释“导航”模块里面出现的几种茶叶,能够让顾客能准确的找到商品,节约顾客时间。

（效果导购图14）

做法如下:

首先建立图层a,选取颜色（R２4１,Ｇ241,Ｂ241）,小三角部分为网上素材,右上角红色区域利用ｂ多次处理可得到。

汉字均为输入c,右边“更多”字样系原网页所截取。

4。

商品销售模块

去除了原网站将商品集中摆放在首页的缺点,并结合了原网站在商品区域的可取之处、本模块改动成分页式,只将新产品,热销产品,特价产品,清仓产品放到醒目位置,这些商品附带链接,顾客点击之后会自动进入到相关区域。

如此不仅能够节约访问速度,还能够优化网站,以幸免出现人多时打不开页面的情况。

　　　　　　（效果商品图1５）

（效果商品图16）

本模块中用图均由原网页截取获得,其中鼠标特效部分与上面一样,首先建立层ａ,中间用到ｂ、c、d等知识。

5、帮助模块

（效果帮助图１7）

作为网上商城,除了商品不能使顾客满意而导致销量不高的重要原因外,顾客不明白如何操作是销量不高的首要原因。

因此本模块对网购新手有特别大的帮助作用,本模块还有客服,能够更好的提供帮助。

本模块除了色调不同之外,其他的基本与原网站相同、图中汉字经过处理,过程如下:

建立文字图层a,对文字使用“投影"先关知识,具体数据b,既能够得到图中效果。

四　美化效果评述

看到最终效果图的那一刻,自己依然挺自豪的。

辛苦了那么多天,经过多次与老师、同学的交流,删改多次最终有了现在的成果,期间犯了特别多错误当然同样有特别多收获,下面是我设计期间所犯错误的总结与收获。

（一）总结

１。

了解原网站

不管去改变什么情况,都需要对原来的事物了解的特别清楚,否则盲目开展活动,只会南辕北辙。

关于本次课题刚开始我就犯了如此的错误,后来通过与指导老师的交流,我改正了这个错误。

在深刻了解原网站的基础上我得知我需要一个什么样的效果,以及在这个目标下我寻找类似网站的优点,以及所需要的素材。

2、寻找材料

寻找材料的时候不能把眼光放得太窄,刚开始我只把眼光放到“茶叶”这个行业的网站中,然而几天我发现根本就没有找到用处特别大的信息,后来我研究了“梦芭莎"“凡客”等的网站,并从中得到启发。

3、合理排版

首页上面需要什么样的信息,什么信息不能出现在首页上面。

这个问题原来没有考虑过,到着手做效果图的时候才发现这是个大问题、合理的排版会让人产生清爽的感受,能够达到快速浏览的效果。

但缺乏合理结构的首页会使浏览特别困难,会导致流量的下降。

这个过程中我访问了大量的Ｂ2C网站,力求做到最大优化。

4、重点突出

在数以千计万计的网站中如何才能让访问者记住您的网站？

网站的个性是必不可缺少的元素。

真正的个性是网站主题的突出,本网站是“茶叶”,必须依据这个特点将主题发挥的淋漓尽致,切记出现服装、电器、综合一个基调、

５。

注重细节

在用PS设计的过程中,不可幸免出现某些小瑕疵,然而假如不注意的话,会让访问者对网站产生特别不行的印象,因此必须认真观察,做到完美、

6、换位考虑

　在制作的过程中,我经常会让周围的同学观察效果图,力求做到从同访问者的眼中观察网站。

自己作为设计者,我自己也经常站在旁观者的角度出发,揣摩该网站。

从浏览者的角度考虑网页的所有元素,力求最大限度的改良网页元素以适合浏览。

（二）收获

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

２、上课的时候学的知识掌握不牢,运用的时候效率不高。

３、相关知识掌握不够,在入手的时候特别吃力。

秉着用以致学的态度,自己查阅资料然后解决所遇到的问题。

4、缺乏独特的思维,特别难设计出出众的作品,只有“博览群书,阅网无数”才能有灵感。

一直做到电脑前面是行不通的、在过程中不断浏览网页,不断借鉴模板才能集众人之长。

５。

在设计过程中需要用到特别多老师没有教过的东西,自己只能XX查询,或看教程、在过程中不知不觉感受技术与操作熟练度慢慢提高。

五结束语

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

在整个创作构思、设计、实施的过程中,由于种种的不熟悉,初期产生了特别大的困难,不仅没有做好开头,而且还跑题了、后来通过与指导老师以及与本组成员的探讨与沟通,我慢慢地对整个设计有了一个大体的认识。

在这个认知的指导下我慢慢追赶论文进度,尽管浪费了特别多时间,但同样我也学到了特别多知识。

之余还要感谢本组成员李英良,他对我的帮助也特别大。

参考文献:

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

[２］　《网页制作》人民邮电出版社

［3］《Pｈotｏshｏp参考手册》2008年版。

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

[5］PａtriｃkMcneil/编著　《网页设计创意书》人民邮电出版社

［6］　素材中国16素材网

［7］ｊｓｃode网页特效