水果论网店美工设计毕业设计论文.pdf

摘要随着互联网的普及以及技术的进步不断推进电商平台的发展，网 购以迅雷不及掩耳之势进入人们的生活，本毕业设计的主题是“水果 论”网店的美工设计与实现。“水果论”网店是将土特产水果与各个地区特色水果相结合为特 色的网店，本毕业设计阐述了网店美工素材收集整理以及网店首页、LOGO、banner、详情页、产品主图等内容的设计和实现，最后阐述了 对店铺进行美工设计与装修的过程。关键词：网店美工设计；电子商务；网店美工；图片处理This document is produced by free version of Print2Flash.Visit for more information目录引言.11.概述.21.1电商平台发展及现状.21.2网店装修概述.21.3网店简介.32.网店品牌视觉形象设计.42.1 LOGO 设计.42.2产品包装盒设计.73.首页设计.83.1首页布局设计.83.2店招设计.103.3导航条设计.113.4海报设计.123.5 产品展示设计.144.详情页设计.164.1详情页的布局设计.164.2详情页的设计元素.184.3产品主图设计.224.4分类页面设计.24总结.28致谢.29参考文献.30This document is produced by free version of Print2Flash.Visit for more information引言随着网络技术的发展，互联网的普及使得电子商务行业获得了迅 速的发展，更多的企业开始关注电商行业。店铺的装修可以影响店铺的销量，消费者被图片所吸引进入店铺 进行浏览，需要一个美观舒适、特色鲜明、风格独特的店铺装修来实 现，才能提高店铺的销量与转化，本毕业设计分为四章，详细的介绍 了本毕业设计关于网店的设计与装修，本毕业设计顺应了当前电商平 台发展现状和发展趋势，构思规划了“水果论”网店定位为土特产水 果与各个不同地区特色水果相结合销售的网店，旨在为人们提供特产 水果以及各个不同地区特色水果。4This document is produced by free version of Print2Flash.Visit for more information1.概述1.1电商平台发展及现状电商平台发展及现状统计数据显示，2012年到2016年，我国网络购物用户人数不断 增加，电子商务交易额也不断提高，年均增长34%。其中，网络零售 交易额年均增长40%,网络社会的进步，带动电商平台的发展与促进 各大电商行业的诞生。目前规模较大的电子商务平台企业纷纷开始构建生态系统，平台 为商家和消费者提供交易、支付、物流等各方面全周期支持与服务，各大平台与平台商家之间的关系越来越紧密，阿里系、腾讯系、百度 系、京东系等主体均取得了显著规模效益。L2网店装修概述网店装修概述在无数的店铺中，如何才能一枝独秀，吸引消费者的目光，除了 产品主图吸引消费者进入店铺，店铺装修也是非常重要的，优秀的店 铺装修可以吸引消费者继续浏览，并且促使消费者的消费欲望。以下是“水果论”店铺装修的基本思路：首先要通过对店铺中销 售的产品，确定店铺面向的主要消费人群以及店铺装修的整体布局和 基础功能，精准定位店铺整体风格为清新、简约的风格，体现出店铺 绿色、环保、健康的发展理念，使用Photoshop图片编辑工具制作 logo.店招、海报、首页、产品包装盒、产品的相关详情页和产品主 图的设计与制作。5This document is produced by free version of Print2Flash.Visit for more information1.3网店简介网店简介 网店名称：“水果论”：“水果论”是一家专注于以不同地区特色水果销售的网店，其主 要销售对象为爱好生活，注重养生的人群；秉持着“顾客至上”、绿 色、健康环保的理念，为顾客服务，通过对店铺装修的精心设计，更 好的提高店铺的转化以及流量，通过对店铺风格的精准定位以及装修 设计，不断的改善优化店铺，吸引消费者的目光以及刺激消费者的消 费欲望。2.网店品牌视觉形象设计2.1 LOGO 设计设计设计感独特、有鲜明风格的店铺logo是消费者对店铺最直观的 感受；是店铺整体风格、店主的品味、产品的独特性的体现；店铺 log。也可起到宣传店铺、提高店铺认知度的作用。“水果论”店铺Logo的设计灵感来源于新鲜橙子长在树上的画 面，因此店铺Logo选择了圆型，用鲜艳的橘色加上绿色的叶子，二者 相互衬托，体现出水果的新鲜活力，富有生机，与店铺整体风格相融。店铺Logo效果图如图2-1所示：6This document is produced by free version of Print2Flash.Visit for more information图2-1 Logo效果图“水果论”店铺logo制作过程如下：1.首先新建一张100*100像素，分辨率300的透明页，然后选 用华文行楷字体打出店铺名水果论，将文本字体颜色改为f8 5404,如图2-2所示：图2-2图形调整2.然后在“果字”上方，新建一个图层，使用椭圆工具画一个圆7This document is produced by free version ofPrint2Flash.Visit for more information形，填充颜色为f8 5404,如图2-3所示:图2-3图形选取8This document is produced by free version ofPrint2Flash.Visit for more information3.使用矩形选框工具把“果”字变换剪切到下一图层，并把颜色改成白色，放到圆形上方，如图2-4所示:水眼g时图信谒睡：TJW图2-4店铺logo的制作4.利用自定义形状工具，画出两片形状对称的绿叶，填充颜色为018804。将绿叶图层放置于椭圆后，调整好位置,如图2-5所示:图2-5店铺logo的制作9This document is produced by free version ofPrint2Flash.Visit for more information2.2产品包装盒设计产品包装盒设计在物流运输中，产品包装盒能有效的保护产品；在店铺产品销售 过程中，包装盒是产品品牌的广告载体，是企业文化与消费者面对面 交流的最好的方式；作为礼品包装盒，产品包装盒可以最大限度地美 化产品，具有美观的形状和装饰，增强产品的竞争力。产品包装盒的设计元素以橙子为主，正面由橙子、店铺Logo和 广告词组成，背景颜色使用与橙子相搭配的浅黄色和正红色，使产品 包装盒的整体显得柔和。如图2-6所示：图2-6产品包装盒结构展开图10This document is produced by free version ofPrint2Flash.Visit for more information3.首页设计首页设计31首页布局设计首页布局设计首页的布局是对店铺首页整体内容的规划，作为店铺的门面，代 表着整个店铺的风格与企业文化形象，合理而优秀的结构布局可以给 消费者留下深刻印象，提高店铺认知度。首页的布局包括：店招、导航条、海报、产品展示等内容，合理 的，功能齐全的首页布局，可以给消费者留下深刻的印象，最大可能 的为顾客提供方便。首页布局结构图如图3-1所示：LOGO店招导航条BANNER优惠券新品展示宝贝曜宝贝展示蚀分类图3-1首页布局结构图11This document is produced by free version of Print2Flash.Visit for more information首页布局效果如图3.2所示:598fr便用精芬红心火花果驻南硒花牛苹果红心 xx果新品.上.架自雄蛔采稳不跳 原产i倒睬现摘,姜昧不打护ts价粉膜 IMafF l-lCDx所有宝贝LljKttlM：W1W*W BJi 39 8 3!柄：5*3 土竺 W 599fc3tlIXlFSW W45全部宝贝浮回首页联系我们令。I图3-2首页效果图12This document is produced by free version of Print2Flash.Visit for more information3.2店招设计店招设计店招作为店铺的招牌，代表着店铺的整体风格，店主的品位，产品的特性，在店铺最显眼的地方，不仅可以吸引消费者的目光，使消费者产生继续浏览的兴趣，还可以起到宣传店铺的作用。“水果论”的店招以白色和浅橘色为主，利用水果底纹图片作为背景效果图，使店招的整体风格显得清新大方，符合店铺的整体定位,起到呼应店铺产品的效果，店招效果如图3-3所示:果实是大自然的礼物果实是大自然的礼物Fruit is the beginning of a treeC3O关注图3-3店招效果图店招制作过程如下:1.使用Photoshop新建一张950*120的空白页，然后新建图层，用一张水果底纹的图片素材作为背景图，将图片的透明度调低,如图3-4所示:图3-4制作背景2.再将之前的LOGO放在店招左侧，使用横排文字工具制作店铺13This document is produced by free version of Print2Flash.Visit for more information广告语，与店铺LOGO合理排版，如图3-5所示:图3-5广告语制作3.新建图层，在店招右侧，使用圆角矩形工具和自定义形状工具,制作出收藏、关注等按钮，店招完成，如图3-6所示:图3-6收藏、关注制作3.3导航条设计导航条设计店铺的导航条，让顾客可以清楚、快速的找到自己所要的产品的 类目、更加高效的浏览店铺产品，店家可以有效的管理好店铺的产品,导航条效果如图3-7所示：果实是大自然的礼物果实是大自然的礼物Fnjit is the beginning of a tree首页有惊喜|所有宝贝|火龙果|橙子|芒果|金桔图3-7导航条效果图14This document is produced by free version of Print2Flash.Visit for more information3.4海报设计海报设计店铺的海报为店铺的产品或者活动起到宣传的作用，海报的设计 需要考虑店铺的整体装修风格，与店铺整体的风格相呼应。“水果论”产品推荐海报大小为1920*540,海报使用了与水果相符合的自然风光的背景，将文字与背景和产品进行合理的排版，整体风格简约大气，与店铺整体风格相符，如图3-11所示:图3-11海报效果图产品海报制作过程如下：1.利用Photoshop新建一张1920 x540的空白图层，利用大自然 的风景素材图片制作出海报背景，更改图片的透明度，调整效果，如 图3-12所示：15This document is produced by free version ofPrint2Flash.Visit for more information图3-12制作背景2.新建图层，加上产品图片，调整位置，使用混合选项工具，做出相应的效果，如图3-13所示:图3-13背景制作3.新建图层，加上广告语，使用矩形选框工具和自定义形状工具,制作效果，如图3-14所示:赣南暗-来自大自然的味道/多汁美味/超am捕/品版保过绿色哄 口全部宝贝F全部宝贝图层止副本3图层芒副本2p L_l apple下面部分1!_|tuijian!_1 apple LJ mangguoA-J橙子下面部分A，1 chcngzi L_J shangjia L_J huolonaaLo!L3 hot2图3-14海报制作16This document is produced by free version of Print2Flash.Visit for more information3.5产品展示设计产品展示设计产品展木是产品的展小图片以及产品的相关信息的展示，增加产 品的点击率提高店铺的流量，同时展示店铺产品的相关信息，让消费 者更加了解产品。“水果论”产品展示的布局是上下排列的方式，使产品展示整体 看来简单易懂，体现了店铺清新简约绿色的风格，产品展示效果如图 3-15所示：图3-15产品展示17This document is produced by free version ofPrint2Flash.Visit for more information产品展示制作过程如下:利用Photoshop图片制作工具打开一张1920*765像素的空白 页面，从图片空间中选取需要用到的有关图片，充分的利用圆角矩形 工具、图形文字等工具，进行合理美观的排版，如图3-16所示：图3-16产品展示效果图18This document is produced by free version ofPrint2Flash.Visit for more information4.详情页设计4.1详情页的布局设计详情页的布局设计详情页的布局设计需要从消费者的角度出发，最大限度的为消费 者提供产品信息，可以将产品信息更加完善的提供给消费者，刺激消 费者的消费欲望，提高店铺的销量。布局结构如图4-1所示：小福艮产品产品信息产融点群累物充信息图4-1详情页布局结构图详情页效果如图4-2所示：19This document is produced by free version ofPrint2Flash.Visit for more informationmm点MIM IML*.图4-2详情页效果图20This document is produced by free version of Print2Flash.Visit for more information4.2详情页的设计元素详情页的设计元素一个美观、布局合理的详情页，能体现出产品的相关信息以及代 表着店铺整体风格，是推广店铺的一个重要方式；它可以有效地刺激 顾客的消费欲望，从而建立顾客对店铺的信任，提高顾客的意识。本 毕业设计在详情页的设计中使用了线条和色块设计元素，二者相互搭 配,使详情页看起来简约大气，详情页的主色调为比较柔和的橘黄色,与店铺整体风格相符合。详情页制作过程如下：1.首先使用Photoshop X具制作详情页中的产品主图顶部海报,新建一张950*10000像素的空白页，利用形状和横排文字工具对详 情页中的海报进行装饰，用横排文字工具输入广告语及相关信息，调 整位置。效果如图4-2所示：-;IF AITr-;IF AITr-./;rrf;rrf;i3e!lrJLtlrg.，i3e!lrJLtlrg.，.上.二图4-2产品主图海报制作2.产品卖点部分，使用矩形选框工具添加蒙版，将图片置于上方,21This document is produced by free version ofPrint2Flash.Visit for more information使用椭圆工具添加小图标放在产品卖点字下面，增加整个页面的设计活力，在产品卖点模块放置三个产品卖点，对产品卖点进行说明，如图4-3所小:图4-3产品卖点展示图3.产品细节部分，让消费者更加了解产品的特点和细节，首先使 用椭圆工具添加小图标放在产品细节字下面，在此模块放置产品细节图，使用横排文字工具进行说明，排版。如图4-4所示:I也图4-4细R展示22This document is produced by free version of Print2Flash.Visit for more information4.产品参数部分，让消费者更加了解产品，使用矩形选框工具和 横排文字工具详细的介绍产地、特点、食品等级以及储存方式和适应人群，如图4-5所示:图4-5产品信息以及适应人群5.产品特点部分，让消费者更加了解产品，有利于产品的销售,利用矩形选框工具和横排文字工具详细的介绍产品的三大特点、还可添加关于产品的小知识以及产品的累计评价，如图4-6所示:23This document is produced by free version ofPrint2Flash.Visit for more information脐点果大形正 果汁丰富果肉丰富大彩正,僧虹疝光i盲美观.KHM*.化Wr,DEL味;&布普 h图4-6产品特点以及累计评价5.产品物流信息部分，让消费者更加了解产品的物流信息，利用 自定义工形状具和横排文字工具的介绍产品的物流信息，如图4-7所图4-7产品物流信息图24This document is produced by free version of Print2Flash.Visit for more information4-3广品主图设计广品主图设计美观的、产品突出的主图设计，能有效体现出产品的特色，通过 产品主图的设计将产品的优点，转化成卖点，从而提高店铺销量以及 店铺认知度。使用圆角矩形工具以及横排文字工具，将色块和艺术字 二者进行合理的排版、设计，达到美观的效果，如图4-8至4-12所 示：图4-8产品主图图4-9产品主图25This document is produced by free version of Print2Flash.Visit for more information图4-10产品主图图4-11产品主图图4-12产品主图26This document is produced by free version of Print2Flash.Visit for more information4.4分类页面设计分类页面设计店铺产品分类能最大限度为顾客提供方便，方便顾客进入店铺搜 索产品，快速找到心仪产品，从而提高店铺购买率。使用圆角矩形工 具以及横排文字工具，将文字和产品图进行合理排版，如图4-13所 示：39.8【稣网稣目怖泪金播购安潘成金桔5亍中大4相438 马上肺9j%K)|抢地哄火确)1 心学5斤中果 59.9|制物tw|SB 剥圈a橙葩蹄汁5斤中理69.9 马上廊吹回 抢购皿物WETW5斤7斤图4-13所有产品分类效果图所有产品分类页面制作过程：1.新建950 x700的空白页，使用一张水果的素材图片作为分类页 面的背景图，调整图片的透明度，与店铺中产品形成呼应，如图4-14 所示：27This document is produced by free version of Print2Flash.Visit for more information图4-14背景制作2.使用圆角矩形工具画出一个矩形，将产品图片置于矩形上方添加蒙版形成遮罩，调整位置，如图4-15所示:图4-15页面制作3.使用横排文字工具，打出产品信息和标题，如图4-16所示:图4-16页面制作完成28This document is produced by free version of Print2Flash.Visit for more information橙子分类页面制作过程：产品分类能最大限度方便顾客进入店铺搜索产品，快速找到心仪 产品，提高店铺购买率，橙子专区分类页面，使用圆角矩形以及横排 文字工具，将文字和产品图进行合理排版，如图4-17所示：59.9 马上底1醐10|抢购【枷冰E】冰短秋袖嫩8度;起手唯制酬酒多汁5斤中里135 m 上椭19&减1。抢购(S脐0南跖520斤条擅子图4-17页面效果图1.新建950 x700的空白页，使用一张水果的素材图片作为分类页面的背景图，调整图片的透明度，与店铺中产品形成呼应，如图4-18所示:*图4-18背景制作29This document is produced by free version of Print2Flash.Visit for more information2.使用圆角矩形工具画出一个矩形，将产品图片置于矩形上方添加蒙版形成遮罩，调整位置，如图4-19所示:图4-19页面制作3.使用横排文字工具，打出产品信息和标题，如图4-20所示:球总E一 J中&境京;|w1-形状3副本19双mi曲犬3副木侣【赣腐脐橙】赣南脐橙20斤,马上怆购副本9惫图层M2副康18图层1副本。满198减10副本9 135副本-l EQ r,1-(图4-20页面制作完成30This document is produced by free version of Print2Flash.Visit for more information 总结随着时间的流逝，毕业的日子也悄悄的到来，在做毕业设计的这 段时间里，毕业设计是对之前所学知识的检验，更加是对本人动手、动脑能力的考验，通过这次毕业设计，本人才了解到对专业知识方面 还有所欠缺，在以后的生活和学习中，更加要不断的学习，提高专业 知识以及综合素质。设计并完成一个网店的美工设计，并没有想象中的简单，它包括 了对网店风格的精准定位、图片素材的采集以及主要市场的分析和消 费人群的精准定位、店铺装修整体内容的合理规划，需要运用到 Photoshop处理图片。本次毕业设计并不完美，创新意识不足，认识 到还有很多专业知识的欠缺，这是本人需要提高的地方。需要学的地 方还有很多，需要有耐心、坚持不断的学习。在指导老师刘翠莲老师的指导、鼓励和帮助下本人完成了设计毕 业设，在设计过程中本人受益匪浅，培养了本人独立创新的意识，也 充分的体会到探索的艰辛以及获得成功的喜悦在毕业设计过程中所 学习到的知识是本人最大的财富，相信以后也会令本人受益匪浅，终 身受益。31This document is produced by free version of Print2Flash.Visit for more information参考文献1.周帅.浅谈电子商务的现状与发展趋势J.电脑知识与技术，2017,13(20):243-2442.许波勇.主图在网店设计中的应用研究J.办公自动化，2016(17):30-323.佚名.淘宝美工店铺装修实战宝典:Photoshop+Dreamweaver M.20154.匡春香.基于淘宝店的Photoshop网页图形图像处理课程教 学改革探析J.科学中国人，2016.5.王曦，程川.Photoshop图形图像处理项目课程设计J.软件导刊，2012,11(11):146-1486.淘宝大学.网店美工电子工业出版社.2015.7.夏泰.基于网店美工岗位的Photoshop课程体系设计J.课程 教育研究，2017(7)8 .米青，杨延军.高职Photoshop图形图像处理课程教学改革 的思考与实践J.现代企业教育，2009(2):17-189.阿里巴巴商学院.电商运营电子工业出版社.2016.32This document is produced by free version of Print2Flash.Visit for more information致谢三年大学生活转瞬即逝，时光匆匆，在此本人要特别感谢身边的 老师，同学，以及朋友们在这几年给予本人的帮助。首先，真诚地感谢老师在繁忙的教学工作中花时间审查和 修改毕业设计；对本人的网店美工设计做出了很大帮忙与鼓励，在毕 业设计过程中及时对本人遇见的错误和难点，及时加以指导和修正，投入了很多心血和精力。然后，还要感谢这大学三年里所有老师们对本人的细心教导，在 此本人深表敬意和谢意，你们严谨细致、一丝不苟的作风一直是本人 工作、学习中的榜样,在工作中循循循善诱的教导和不拘一格的思路,给予本人无限的启迪。感谢本人周围的同学和朋友，在日常生活中遇 到的困难以及难题，都愿意伸出援手帮忙解决。毕业设计的完成，寓意着新的篇章也即将揭开，新的生活也将到 来，在此，对学校以及老师们做出真诚的祝愿，祝各位老师工作顺利,事事舒心，各位同学前程似锦，事事顺利。33This document is produced by free version of Print2Flash.Visit for more information