《“木槿衣舍”网店美工设计与实现毕业设计论文》由会员分享，可在线阅读，更多相关《“木槿衣舍”网店美工设计与实现毕业设计论文（36页珍藏版）》请在金锄头文库上搜索。
1、摘要电子商务的快速发展，不仅改变了人们的学习、工作、生活方式 和思维方式，对整个社会都产生了巨大的影响。电子商务打破了传统 商务模式下的时间和空间界限，改变原有的企业格局，原有的经营模 式，原有的价值体系，甚至改变企业的发展形式。关键词：木槿衣舍；网店装修；淘宝网店This document is produced by trial version of Print2Flash. Visit for more information目录引言.1第1章概述.21.1电子商务发展现状.21.2网店装修概述.21.3网店简介.3第2章 网店视觉元素设计.42.1 LOGO 设计.42.2店招设计.
2、62.3导航条设计.92.4宝贝分类栏设计.11第3章 首页视觉效果实现.133.1首页布局.133.2商品陈列效果实现.15第4章 详情页视觉效果实现.194 .1详情页布局.194 .2宝贝图片处理.204 .2宝贝细节图.224 .3宝贝描述模板与实现.23第5章“双十一 ”海报设计.275.1 “双-一海报设计.275.2 “双-一”海报实现.29总结.32致谢.33参考文献.34This document is produced by trial version of Print2Flash. Visit for more information引言电子商务在信息和经济快速发展的当
3、今时代，与互联网相结合让 个各行业得到了快速的发展。电子商务的发展使企业直接贴近市场和 各大用户，减少了中间环节，降低了成本，提高了市场发展的速度， 实现了低成本的运营，受到很了多客户和企业的欢迎，也使得网购 发展快速进入到人们生活中的方方面面，从而改变了人们的一些购物 方式。淘宝商城是一个综合性的网站，全球最受欢迎的在线零售业务， 淘宝商城利用互联网可以通过调整网络营销策略，掌握最新的市场信 息，提高店铺的竞争力。淘宝宝贝价格的高低是影响顾客购买宝贝的 重要原因，所以在网店装修中最为重要的是首页视觉效果要吸引人， 商品整体排版布局要一目了然，定位合理。才能抓住消费者的眼球。This docu
4、ment is produced by trial version of Print2Flash. Visit for more information第一章概述1.1电子商务发展现状电子商务发展现状随着互联网不断的快速发展，网络销售市场也随着电子商务的发 展在慢慢的增长，对于本人国的经济发展贡献也比较大。电子商务在 发展中不断的推动本人国产品的差异化，为消费者带来便利的购物方 式和更高的需求，拉动了传统工业的发展，是现代社会发展引领力量。纵观本人国电子商务近年交易的情况，发展情况出现了新的趋 势。一是本人国B2B电子商务发展快速，进入到传统工业领域。二 是传统中小企业正在向行业垂直纵深和专
5、业化发展电子商务。四是传 统工业快速进入B2C电子商务。四是电子商务涉及本人国社会经济 领域如医药，汽车，物流，房地产，生活服务消费方面等等。从以上几个方 面来看电子商务在各个方面影响着社会的发展。1.2网店装修概述网店装修概述网店装修，从字面上的意思来理解就是对淘宝店铺进行美化。尽 量通过图片，商品摆放布局等装饰让店铺更加丰富美观。对于网店来讲一个好的店铺设计至关重要，因为顾客只能通过网 上文字和图片来了解店家，了解商品，所以好的网店装修能增加用户 的信任感，还能对自己店铺品牌树立起关键作用。进而吸引消费者的This document is produced by trial version
6、 of Print2Flash. Visit for more information 眼球，提高店铺的销售量1.3网店简介网店简介店铺名称：木槿花舍店铺地址：h t t ps :/sh opl5594 5579. t aobao. com店铺主营商品：各类女装、以呢子大衣、连衣裙等为主要代表。纵观近几年来的调查显示，电商市场的迅猛发展大势汹涌，所以 一定要让自己的店铺装修的独特，这样才能在众多的淘宝店铺中夺人 眼球并得到大部分顾客的认可。本网店服装风格偏向于甜美风，适合 十八岁到二十五岁的年轻女性。本网店的店名为“木槿衣舍”。将本网店的店名取名为木槿衣舍 是因为木槿花的花语是“温柔的坚持”
7、。其含义代表着坚持自己的选 择，追逐自己的梦想世界终会以温柔待你。其次，就是木槿衣舍这个 店铺名称好记，买家通过关键词容易搜索到本网店。本店铺的宗旨是 服务至上、顾客是上帝。本网店首页以粉色为主调，粉色代表的是温 柔和纯真，粉色也是浪漫的代表词，这种色彩多用在女性的身上，给 店铺营造出满满的浪漫气息和少女情怀。店铺页面采用的颜色是浅绿 色。给顾客一种小清新的感觉，从而使顾客的购买欲望增强。This document is produced by trial version of Print2Flash. Visit for more information第二章网店视觉元素设计2. 1 LO
8、GO 2. 1 LOGO 设计设计Logo是视觉形象的核心，它是构成店铺形象的基本特征，体现 店铺的内在素质，是现代经济的产物，logo的设计理念主要是形体 简洁、表达准确、易于识别，独特和让人印象深刻。本网店的Logo的设计是根据木槿衣舍中的木槿两个字的拼音首 字母来设计。因为用店名的首字母设计logo,可以更加加深顾客对本 店的印象。Logo的整个设计使用的是以字母的形式来展现的，这样 子看起来更有立体感和给人一种舒适感简洁大方，来吸引顾客的眼 球。图2-1标志店铺的log。是在PS中完成的，其操作：(1) 点击进入ph ot osh op软件里，新建文档。(2) 如图：4This doc
9、ument is produced by trial version of Print2Flash. Visit for more informationMI廊:；:挨受牛 A S虫|且昌目 丢昌古 N时K nr a粉；-:熊。* t lons.-MuuWiSiir. * cn/np *职n：文手 v) id!dB(s： S5!Ri Wfra国神rsreaweK卡堀胃IF2店蛆酬牛颈:L砂*4RFF tf-rix5 WgB矽.橱如图2-13(2)对宝贝进行分类管理后，增加连衣裙、牛仔裤、呢子大衣、风衣等然后存档，如图:11This document is produced by trial
10、version of Print2Flash. Visit for more information出濒w 田检MWJ: 国圈岫t 田渤I低片图2-14对宝贝进行分类(3)制作后，如下图所示:如图2-1512This document is produced by trial version of Print2Flash. Visit for more information第三章首页视觉效果实现3. 1首页布局首页布局淘宝店铺的首页布局是很重要的.以首页布局设计定要清晰,简洁大方。首页布局如下:图3-1店铺首页效果图13This document is produced by trial
11、 version of Print2Flash. Visit for more information店招+导舟几条1920全屏海报收藏店铺单品推荐950轮播图片精品推荐宝贝推荐尾页图3-2首页布局图(1) 店招，是店铺页面的头部，它可以展示出店铺名称、宣传标 语和logOo(2) 导航条，在页面中它的作用就在于给购买者一个指标。(3) 1920全屏海报轮播，海报是宣传工具。(4) 收藏店铺，可以让顾客对本店加深印象，成为店铺的老顾客。(5) 单品推荐，让顾客一看便发现亮点，从而提高本店铺的销售This document is produced by trial version of Pri
12、nt2Flash. Visit for more information量。(6) 950轮播图片，将本店最受欢迎的服装展现出来，提高销量。(7) 精品推荐，推荐本店最新更新的宝贝。(8) 宝贝推荐，展示了本店的全部商品。3. 23. 2商品陈列效果实现商品陈列效果实现淘宝店铺的商品摆放目的是为了获得顾客的注意，宝贝卖出好价 钱也是商家为了促销产品，把商品精美的一面一一的呈现出来本人们 称为陈列。陈列是商品卖相呈现一种的表达方式，是为了吸引消费者 的注意，消费者的利益，一种刺激购买欲望的手段，它可以为顾客提 供最好的效果。时尚亮松灯走刺吹油立籁靖花衬衫垂型中长韩坂字生格子呢子太戒翻籁集松荷叶
13、边中长款衬衫忖底祀弦版宜荷益松振洞牛仔剖度九分藩伴版中长款针织打底番丝连我裙商图3-315This document is produced by trial version of Print2Flash. Visit for more information商品操作过程，如图:(1)通过PS做图片，将图抠出来，并新建图层，然后存档。图3-4(2)创建新图层，将选出的图片拖进新建的310*31。图层里放在合适的位置，点保存jpg各式，上传到淘宝店铺图片空间，如下图所示：PS H判 F) g 旧匡瞬 D |EE(- RiV) ；择通海瞰n 3D：D：视到叫 SUW Sft )(H )X-曰命疏
14、琴 酬 禽 -H展将泊甘 1 -0- ra =,串 月 W M 吉 * U* L* *| | W德3 : 苗冷:* H I 5T3i-i ID334 . F 1SCS2 RCD/O.I - n x -卜买 O=Q.MA说t-a/i3/268 h t t ps:y7it eni.t eTi. it苗版中任款针瑚,髓60h t t ps/ifng.alicdn.：0Tniircext-a/ 2/26fi h t ipsy/it em.t aobaacom/it eni. it灯骨堇暗至ISRIVIE50h t t ps:/iin(i.alicdn.:oii/iirpe5t-a/i2/26E h
15、t t ps：y/it em.t aobaacom/it eTi. it爵版并篱嚏被牛仔百搭61h t t ps/img.alicdn.:oii/iirgext -a/2j26 h t t ps:/it enLt aobao_EWit mF.it案甑直管室垫破洞牛仔60h t t ps/imq.alicdn.roiiyirrciext-a/2j26 h t t ps:/it em.t am. it160|h t t ps;/img.alicdn.rom/irrc)e5aacom/it an. nti +添!bQ-人i i 删踪一八 i.球代勇图3-6精品推荐图片制作过程(4)进入店铺代码，如
16、图:图3-7复制代码(5)进入店铺，找到相应的模块，对其进行操作，将代码复制进 去点击确定按钮。17This document is produced by trial version of Print2Flash. Visit for more information图3-8精品推荐码复制18This document is produced by trial version of Print2Flash. Visit for more information第四章详情页视觉效果实现4.14.1详情页布局详情页布局商品详情页也称之为描述页，一个好的宝贝详情页，自然会吸引 可吸引消费者的眼
17、球，让消费者产生一定的关注。宝贝详情一定要策 划的好，这样不仅能够让消费者在店内停留的时间长，还可以提高店 铺的转化率和提高店铺的人气，这样就增加了消费者购买宝贝的机 会。所以本店的详情页面设计包含了产品主图，卖点展示，产品的信 息说明，模特展示，产品细节图。详情页面的布局设置，一定要简洁和美观大方。所以详情页设计 都应该从商品正、反、侧面等角度的实物图，所以宝贝详情页的设计 对许多卖家来说都是十分重要的。如图：This document is produced by trial version of Print2Flash. Visit for more information布局图为：(
18、1) 引导图：是勾起消费者购买商品的关键。(2) 卖点展示：一个宝贝最少要有两个卖点出来。(3) 面料说明：产品的舒适度和面料成分。(4) 产品信息：说明产品的规格尺码，突出产品材质，适中度来 描写。(5) 模特展示：展示衣服的正、反面。(6) 细节展示：突出产品特点，裤脚来描写。(7) 购物须知：洗涤条件，退换货说明，售后说明问题等。4 . 2宝贝图片处理宝贝图片处理为了让更多的购物者来看店内宝贝，本人们就必须设计出好看而 精美的宝贝图片，这样才能够吸引顾客的眼球，让顾客在店内停留更 长久的时间。(1)主图主图是宝贝的第一张图片，它能够在展示宝贝的同时，让顾客了 解产品。本网店的图片用了软件
19、Ph ot osh op,主要用了魔棒工具，矩形。 以下是实现的过程：(2)进入PS将准备好的图片，拖入ph ot osh op中用套索工具把 图片选择出来。20This document is produced by trial version of Print2Flash. Visit for more information如图4 -2宝贝图片在把图片羽化羽化颜色为灰色#9f9ea6像素为10,做出阴影效果如下图:IPSIPS.I,. I,.M M 口d dlzlz% %IAIA lzlzlyly/-m/-m匚 MH MH 7;7;四地如图4 -3使用羽化效果做出阴影（4）新建一个图层
20、，添加文字和使用椭圆选择工具并制作出下图：21This document is produced by trial version of Print2Flash. Visit for more information目职纹,5M三I邸消忍拦如图4 -4宝贝图片文字以及椭圆添加(5)注意图片的大小不 能超过500KB。如图4 -5保存图片4 . 3宝贝细节图宝贝细节图细节图是展示商品与众不同的关键因素，当顾客在购买宝贝的时 候，宝贝细节图有很关键的作用。商品细节图要结合商品本身来设计 不能偏离主图，所以商品细节图也是十分重要的。宝贝细节图制作过22This document is produc
21、ed by trial version of Print2Flash. Visit for more information程如下：(1)先进入ph ot osh op软件，新建图层，如下图所示:如图4 -6宝贝细节图4. 44. 4宝贝描述模板与实现宝贝描述模板与实现宝贝描述是否具有吸引力是本店铺能否获得顾客青睐的关键。(1)利用PS,创建新的750*21728图层，并使用工具将其的大致 轮廓画出来。23This document is produced by trial version of Print2Flash. Visit for more information图4 -7模板效
22、果(2)将处理好的图片放入到详情页中。4_8(3)处理完成后、将图片上传。24This document is produced by trial version of Print2Flash. Visit for more information圄rr空间白宝K-哀等匚el.屯乃，.subwuk；夕.毛虹二月6/3。加 乏乂11图4 -9宝贝图上传(4)完成上述操作之后，对商品进行编辑处理。图 4 -10(5)对商品进行相关描述。成分含重：71%(含)-80%(含)燕式:铅笔裤面料分类:加厚牛仔布颜色：舞邑厚薄：加厚货号：3280-1裤长长裤适用年龄：18-24周岁颜色分类:灰色黑色工艺:
23、拉键腰型：高腰腰型：高腰年份季节：2017年冬季尺寸:31 26 27 28 29 30图 4 -11(6)操作完成后，对详情宝贝页进行处理。25This document is produced by trial version of Print2Flash. Visit www. print2flash. com for more information图4-12将图片插入详情页中(7)所有图片编辑完成后，然后点击确定保存。如下图所示:图4 -13上传淘宝详情页完整图片26This document is produced by trial version of Print2Flash.
24、Visit for more information第五章“双十一”海报设计5. 1 “双十一”海报设计“双十一”海报设计淘宝网店海报的宣传是必要的。所以本人们做海报设计要将商品 以最简洁的形象展示给买家，可以引导买家有目标地浏览店铺，传达 给买家一个清晰的购物信息。双一海报的制作要有创新和震撼力，出彩的淘宝店铺海报才能 吸引受众。使淘宝店铺的海报具有强烈的视觉冲击力。双十一的海报设计如下：本网店“双十一”海报是由PS完成，操作过程如：(1) 利用PS,创建新图层。(2) 首先给背景色填充为粉色#ffe6ea,然后再填充两个三角形 的颜色，颜色分为#f28ea8和#07d7d。在编辑框里面选
25、择矩形工具， 海报背景里面添加一个矩形，然后使用多边形套索工具将矩形另一边 删掉通过自由变换变成为三角形。如下图所示：27This document is produced by trial version of Print2Flash. Visit for more information如图5-1海报基本绘制图(3)新建图层，使用快速选择工具，并调整好位置。双十一海报,psd 9 504 (图房1, RGB阳广*rT全蛙必t5iT 11t学场无折j&PMI!u刃1职5n EE ioni bed* _d魄循棒ri国层2副末21 2 E如图5-2海报模特的添加(4) 使用横排文字工具，然后再
26、加上”全场五折起包邮“的优 惠话(5) 语吸引顾客的眼球，最后写上店铺名称加深顾客对店铺的28This document is produced by trial version of Print2Flash. Visit for more information印象。y -白*域岬：w砂点?沪 西Li匡 苗吕 吝W兰炒北 f 3-.! . - H UiW Sft t H i-hyr.rx. QLJ D.D.如图5-3(6)图片存档并保存:十一全球狂欢节 木槿衣舍等你来全场五折起包邮图5-4海报效果图5. 2 5. 2 “双十一”海报实现“双十一”海报实现全屏海报操作如下：(1)将做好的92
27、0X600海报，上传图片。29This document is produced by trial version of Print2Flash. Visit for more information如图5-5(2)将海报复制产品链接地址。(3)设置播放效果配置，点击预览然后复制代码。更多淘宝全麟播代码； 通用简约淘宝全屏轮掺代码I百叶窗特效淘宝全屏轮指代码I带缩略图攻I能淘宝全屏抡代石数据设置播放效果配置沦幡高度 600设置您的轮播囹高度数值轮播囹组 囹片地址 赛1920高600椎接地址寸https:/img. al icd extrahttps:/item.tdobao.c(预览这里制
28、作海报囹片https:/ s:/item.tdob ao .c(这里制作海报图片+继续添加预览预览复制查看教程(圆玄)如图5-6海报实现过程(4)点击进入淘宝店铺装修，点击“确定即可。30This document is produced by trial version of Print2Flash. Visit for more informationO C t ? 0 洵宝网 h T!PS：/sit sadnin.TObaD, zoivdesign.h t ni?SDn=al210. l-=. 0. 0.2eE4 6e22DMF72D4 si(3754 5L98 话O 7 ws官志下载
29、S Q 7 ； 二囹D JvdN ale- beigh t :600px;crt -vzeign:rar mal; t ont -size :12k, iliJ i ； r t h id L i; 192Cpw; h e iyl 11; 500p.;=t i* ;-ass-Icot Br-rrore-t rigger mcst -fbot er sn-simple-logo h -idlh:aut o;padding:C; ine-,曰ig LiiiliH ril;lJLip:3|ji;lH n. cLlu;LuiJnr ;bdLkj* uurid: ui it :.LcdJiriu:D;bu
30、rd:C；iiJli：duLj;h H iulil：dulL； iriu-iul L iiih urilj ricr urIriCk8l|jJ:&-juuI;pi h*；71503360004 &quuUAlluL.r t xlBUiusElluL, :Sqjjljrt in_7eOB350004 8iquuI;sly t = wiulri: 1920p;I ihy il;600jk. a vdiv clast=t riggcr753806000/ st /b=widt i: 102CFM；h oigh :500px;ODrflov:l-iddcn;S _ li n+-.ln=l,.A.irl
31、t t r 1 nrimfh rH n-ATIn-r1 内密正文苦5济帖敢保存-*；.知 自如嗥有手:2017-11-1 10 ZC:52如图5-7全屏海报代码(5)全屏海报的呈现效果图片，如下图所示。如图5-8全屏海报31This document is produced by trial version of Print2Flash. Visit for more information总结时光匆匆，光阴似箭，一转眼大学三年就要过去了就要面临毕业了， 开始接触毕业设计时，没有丝毫灵感。设计题目为于“木槿衣舍”淘 宝网店来进行网店美工设计。在这一次中，本人对淘宝店铺的认识更 加的全面，对专
32、业上的知识也更加的了解，本人的学习之路才开始， 在今后的日子要更加的认真努力。所以本人们在日常生活中要不断的学习，来丰富自己的知识。感 谢黄子宸老师给予本人毕业设计制作的灵感，帮本人理清了头绪，还 教自己怎么在网上找有用的素材，帮自己节省了很多时间和少走了很 多弯路，十分谢谢黄子宸老师对自己的帮助。毕业设计是自己从学生走向实习岗位的必经之路，也是一个过渡 时期，让自己在毕业设计中学到了很多东西，学到的这些东西不仅能 够提高自己分析问题的能力还提高了自己解决问题的能力。本人会一 直记住毕业设计这几个月来带给自己的一些感想，认真对待每一件事 情，让自己在学习的到道路上不断向前进。32This do
33、cument is produced by trial version of Print2Flash. Visit for more information致谢转眼间，大学生活就这样过去了，有相聚也会有分离，能够相聚 在一起是一件不容易的事。在这三年中，感谢自己老师，父母，朋友 以及同学们对自己鼓励和帮助。在此感谢本人的指导老师黄子宸老师，是老师抽出自己宝贵的休 息时间为讲解详细的专业知识，指出的错误，帮助修改。果没有你的 辛苦和细心指点不知道要多久才能完成这次设计与实现。最后本人要感谢本人的室友们，在本人不开心的时候陪伴本人， 在本人失落的时候鼓励本人，也是因为有了她们的陪伴，本人的生活
34、过的很充实。虽然本人现在毕业了，但是老师传授给本人的知识和同学对本人 的帮助本人都将谨记于心。33This document is produced by trial version of Print2Flash. Visit for more information参考文献 1 淘宝天猫网店美工一本通Ph ot osh op图像处+Dreamweaver 店铺排版.电子工业出版社.2016年7月1日 2 ph ot osh opCS6技术精湛从应用入门到案例进阶/王红卫等 编著/北京：机械工业出版社.2013月10日 3 Ph ot osh op电商视觉营销-网店美工-广告设计完全学习教 程机械工业出版设.2016年9月1日 4 秋山孝吴艺华译，秋山孝海海报作品集上海人民美术学 院出版社.2007年 5 淘宝网店美工新手一本通机械工业出版社.2015年91日 6 网店设计与制作教程河北教育出版社.2007年2月1日 7 淘宝美工从入门到精通人民邮电出版社.2016年8月 8 鱼摆摆网店装修，网址：h t t p:/ 9 1688啊里巴巴批发网，网址：h t t p:/ 10 百度，网址：h t t ps:/ document is produced by trial version of Print2Flash. Visit for more information
