《非凡男装网店美工设计毕业设计论文.pdf》由会员分享，可在线阅读，更多相关《非凡男装网店美工设计毕业设计论文.pdf（27页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、摘要本毕业设计主要内容是“非凡男装”网店美工设计与实现。毕业 设计首先进行市场调研分析，确定网店目标客户群，并针对目标客户 群进行了分析；接着根据店铺产品结构和目标客户群确定了店铺设计 风格；然后设计店铺LOGO、店招、导航条、海报等，并在此基础上 设计了店铺首页和详情页。关键词：网店美工；详情页设计；网店装修This document is produced by free version of Print2Flash.Visit for more information目录引言.21市场调研分析.31.1店铺简介.31.2市场调研分析.32网店设计分析.52.1同类网店设计分析.52.2网
2、店风格定位分析.63网店美工设计工具介绍.74网店设计实现.84.1网店首页设计.84.2网店详情页设计.114.3主图设计.204.4其他页面设计.20总结.23致谢.24参考文献.25This document is produced by free version of Print2Flash.Visit for more information引言随着近年来电子商务的快速稳健发展；电子商务经济以其开放 性、全球化、低成本、高效率的优势，广泛渗透到生产、流通、消费 及民生等领域，在培育新业态、创造新需求、拓展新市场、促进传统 产业转型升级、推动公共服务创新等方面的作用日渐凸显，成为国民
3、经济和社会发展新动力，是新经济的主要组成部分。2This document is produced by free version of Print2Flash.Visit for more information1市场调研分析1.1店铺简介店铺简介“非凡男装”网店定位个性化的潮流男装风格，追求时尚、自我 原创服饰的宗旨与目标。本店铺积极营造流行的男士服饰品牌，经营 的服装是当下青年都比较偏爱的一种休闲潮流服饰，深受青年人群的 喜爱。1.2市场调研分析市场调研分析1.2.1网店客户群分析网店运营中开展目标客户群分析是非常重要的，目标客户群分析 可以帮助网店有针对性地进行网店美工设计，从而精准定
4、位客户群。本店铺目标客户群主要定位在25岁以下的男性。而且都是现阶段的 大学生以及刚步入社会的上班族，这类客户群追求时尚前卫，注重个 性化，对穿着具有风格多样，高品质、款式新等消费观念。由于店铺 的定位的人群正是追求时尚潮流的年轻男性，所以店铺风格定位为时 尚潮流风格。1.2.2客户消费习惯分析掌握好客户的消费习惯对店铺的经营是很重要的一点，从近年的 客户消费习惯来看，人们对于服装转向时尚、文化、品牌、形象的消 费需求。随着80后、90后消费者成为男装消费主体，消费群体越来 越追求独立的思想和独特的品位，未来服饰的个性化消费迎来新的发 3This document is produced by
5、 free version of Print2Flash.Visit for more information 展契机，个性化和定制化将成为服装消费新趋势。根据数据显示：25 岁前后的品类品牌选择差异大。其中，就整体的男装而言，18岁以 下占比12%,35岁以下则占了 91%；衬衫的用户群最年轻，18岁以下图1-1不同年龄段服装品类选择占比走势图4This document is produced by free version ofPrmt2Flash.Visit for more infbnnation2网店设计分析2.1同类网店设计分析同类网店设计分析店铺的设计与店铺的经营有着很大的联系
6、。从店铺的设计上，就 能够看出店主的经营决策。店铺设计不仅影响到店铺的现实利益，而 且也关系到店铺的发展和延伸。以下以同类店铺“BJHG”店铺和“古 由卡”网店为例，分析其网店美工设计，为本网店的美工设计提供参 考借鉴。1、BJHG”店铺（网址：https:/ 页设计所采用的色彩搭配主要是黑白灰三种色调，不仅体现出了服装 店经营的特色，还不同程度上表达了店铺的风格和理念。店铺都围绕 商品的风格和特点等设计，所展示内容与网页设计风格相一致。如下 图2-1所示：2、古由卡”店铺（网址：https:/ 牌；店铺的整体色彩搭配主要为黑白灰三种以及，店铺的服装注入了 韩国不同风格的时尚元素，以最具性价比
7、的时尚服饰打造属于新生代 的着装风格。5This document is produced by free version of Print2Flash.Visit for more information图2-1“BJHG”店铺首页效果图 图2-2“古由卡”店铺首页效果图6This document is produced by free version of Print2Flash.Visit for more information2.2网店风格定位分析网店风格定位分析店铺的风格定位必须精准明确，这样才能更好的吸引目标人群，留住忠实客户。“非凡男装”店铺的整体风格根据店铺的产品以及装 修
8、设计定位为韩版简约风。店铺服装都为单品，可以搭配各类衣服，很实用的单件服饰，与其他款式、颜色的服饰均能产生一定的效果.都是比较基本的、经典的样式或颜色。韩版服装舍弃了简单的色调堆 砌，而是通过特别的明暗对比来彰显品位。简约风格的服装几乎不要 任何装饰，把一切多余的东西从服装上拿走。7This document is produced by free version of Print2Flash.Visit for more information3网店美工设计工具介绍Adobe Photoshop的简称是“PS”,这款软件是由 Adobe Systems开发和发行的一款图像处理软件。Photo
9、shop主要处 理一些以像素所构成的数字图像。使用其中众多自带的编修与绘图工 具，可以非常有效的进行图片编辑处理工作。Photoshop软件有非常 多的功能，在处理图像、图形、文字等各方面都非常的实用。但 Photoshop主要是用于图像处理，而不是图形创作。图像处理是对已 有的图像进行编辑加工处理以及运用其中的一些特殊效果从而使自 己的图片更美观，其中的重点是在于对图像的处理和加工；图形创作 软件是按照自己的构思创意。本毕业设计中所有图片都运用Photoshop X具设计实现，其中使 用钢笔工具和魔棒工具进行抠图；利用文字输入工具添加文字；利用 选框工具、画笔工具、油漆桶工具等进行排版设计；
10、利用菜单栏和工 具栏中的一些相关的工具设计店铺首页和详情页等。8This document is produced by free version of Print2Flash.Visit for more information4网店设计实现4.1网店首页设计网店首页设计4.1.1首页布局首页就是店铺的门面，所以店铺的首页设计至关重要。本网店首 页有以下几个部分：店招、导航栏、海报、推荐、优惠券等内容。店 铺品首页布局如图4-1所示：设计店招是为了能向客户传递明确的信息。导航栏列出店铺产品 的分类，主要是方便消费者搜索商品；海报用于向消费者展示店内活 动，同时激发消费者购买；优惠券的设计是当
11、消费者在店铺购物时能 获得一些优惠；掌柜推荐部分是向消费者推荐本店铺的爆款产品；产9This document is produced by free version of Print2Flash.Visit for more information品展示部分是店铺首页不可缺少的一部分，用于将店铺的产品展示给消费者。首页效果如图4-2所示：图4 2首页效果图4.1.2 LOGO 设计Logo在店铺装修中是非常重要的部分，对店铺的识别和推广能 起到一定的作用。制作一个有创意且符合店铺的Logo往往会更加吸 引人的眼球，更容易让人记住、识别。本店铺的Log。采用纯文字和 字母结合的形式，字母用的是
12、非凡两个字的拼音大写，文字用的就是 非凡男装的店铺名字，整体简洁明了。配色方面主要是采用白色和黑 色。黑白是不变的经典搭配，黑色显得简单大气，有一种神秘感；白10This document is produced by free version of Print2Flash.Visit for more information色则显纯洁。两者相结合更能彰显店铺的时尚风格。Log。效果图如图4-3所示：非凡男装图4-3logo效果图4.1.3导航栏设计导航栏内的内容是将店铺经营的几种产品类型展现给消费者，方 便消费者浏览并查找自己想要的产品。本网店导航栏使用黑白两种颜 色搭配；背景使用黑色，字体
13、使用白色让消费者能一目了然。导航栏 效果图如图4-4所示：首页 I 所有分类I新品I卫衣I榷装I村杉I棉服图4-4导航栏效果图4.L 4店招设计本网店店招采用左右排版，左边放置店铺的logo,右边是“收 藏本店”四个字配以黑色的背景。在设计店招时需要与首页的设计风 格保持一致，这样才能使的视觉效果比较好。因此店招的背景颜色使用的是白色，配上店铺logo,既简单大方又有视觉冲击感。店招效果图如图4 5所示:非凡男装收藏本店图4-5店招效果图11This document is produced by free version of Print2Flash.Visit for more infor
14、mation4.1.5海报设计店铺海报是网店装修不可缺少的一部分，一张好的海报能对店铺 的浏览量有很大的提升。以下店铺海报的主题是双十二活动促销海 报。海报效果如图4-6所示：点击详情 图4-6海报效果图此海报的排版格式为左右排版，主要文字排放在海报的中间，字 体为黑体，字体颜色为白色，文字以竖排的形式展现；海报中的图片 经过抠图并加以美化，大图摆放在整张海报的右侧，小图摆放在左侧 相互呼应；最后在海报的合适位置制作了一个导购按钮。4.2网店详情页设计网店详情页设计店铺的产品若是没有一个好的详情页来支撑，那么它的转化率就 会非常的低；当一款产品需要一个详情页的时候，首先要分析好详情 页的逻辑框
15、架，前期需要花时间去调查和构思，做好产品的卖点和定 位分析。以下以店铺“韩版修身运动休闲裤”产品为例，阐述本店铺 详情页的设计实现过程。12This document is produced by free version of Print2Flash.Visit for more information4.2.1详情页版式设计详情页所制作的每一个板块都要排版合理，简洁美观。这样当客 户在浏览的时候能清楚的知道看到所想要了解的部分。详情页布局图 如图4-7所示：主三辅产品信息产品卖点模特展示细节展小适应人群购物须知图4-7详情页布局图一主三辅放在详情页的开始，可以主要展示本产品整体风格，让客户
16、对产品有初步整体的了解。一主三辅效果如图4 8所示：13This document is produced by free version of Print2Flash.Visit for more information图4-8 一主三辅效果图产品信息是将产品的面料、材质、颜色和自身适合的尺码等信息 展现出来，让客户了解并选择。产品信息效果图如图4-9所示:14This document is produced by free version ofPrmt2Flash.Visit for more infbnnation产品信息4_FA君称：溷流愫闲胃*蹴色：虹色/日色19：K103lffl
17、*4：95%M 蚪推5%H雄I 尺码：M/L/XL/：L/3Xiy4XU5XL鼻力指at：无弹（W）外力滴弹柔救指狱：Hitt）8中）偏建 H 版叟指戳：恒）话中 直松 薄厚指威：俯薄 每至）nn mv尺码信息 wt nwgsgM314528371093L32.54729381095XL3449303911972X135551314011993XL37533241121014XL38.5553342121035XL4057344313105图4-9产品信息效果图产品卖点部分是将产品的在一主三辅板块中未能展现出来的突出点一一罗列出来，使其更加全面。产品卖点效果如图4-10所示：产品卖点图4-10
18、产品卖点效果图模特展示主要将这款产品在各种场合穿出来的整体效果展示出来让客户欣赏。模特展示效果图如图4-11所示：15This document is produced by free version of Print2Flash.Visit for more information图4-11模特展示效果图细节展示将此产品的人性化设计以及特有的一些小细节展示出来。细节展示效果图如图4-12所示:16This document is produced by free version ofPrmt2Flash.Visit for more infbnnation细节展示图4-12细节展示效果图适应
19、人群能根据本产品的定位，从而确定此款产品适合哪一类目标人群购买。适应人群效果图如图4 13所示：适应人群图4-13适应人群效果图17This document is produced by free version of Print2Flash.Visit for more information 购物须知包括宝贝的累计评价和物流服务等信息，在详情页的最 后面；当客户浏览完详情页在纠结是否购买时，能起到一锤定音的效果，让客户下定决心下单。购物须知效果图如图4-14所示:购物须知V 关于色差：所有商品均为实物拍摄，由于拍摄灯光、场地.电脑显示器色彩偏差，个人对麒色的理解，实物 有可能存在色差，一
20、实物为准.&美于尺寸，所有商品均为人工测由于测量工具存在小范围 的误差，精工产考./关于成量：产品出厂经过一系列的质量检测，仓库人员发货前 会对产品进行品质检查，确保产品使用无碍，再进 行打包发贷以避免出现质量问题.品厩爆牌七天无理由图4-14购物须知效果图4.2.2详情页文案详情页的文案要构思明确，分清主次关系；先给产品进行定位，了解产品在市场上的价格，锁定合适的目标客户，紧贴店铺的风格。一主三辅板块使用“时尚大方裤型设计，更显潮流气质”、“撞 色拼接，时尚大气彰显帅气活力”等文案，宣传了产品的风格和设计 特点。产品信息板块把产品的弹力指数、柔软指数、薄厚指数以及不同 身材所适合的尺码加以排
21、版后，详细展示出来，让客户根据自己的需 18This document is produced by free version of Print2Flash.Visit for more information求挑选适合的产品。产品卖点板块文案“裤脚设计，穿着更有型”，“弹力面料，穿 着更舒服”，配以相应的产品图片，全面的展示产品的多个卖点。细节展示板块的文案“潮裤两侧大口袋置物方便任意造型”、“腰 部抽绳设计穿着舒适无束缚”、“松紧束脚设计张弛有度，拒绝紧绷”、“两侧印花设计增添裤子时尚感”。将产品的设计细节清晰明了的展 现给客户。购物须知板块对产品色差、尺寸和质量方面做一讲解，配上店铺 的
22、累积评价截图，从侧面向客户展示出此款宝贝的销量，让客户能放 心购买。4.2.3详情页图片设计制作详情页的过程中，选择的每一张图片都很重要，所选的图片 都要经过细致的处理;美化产品本身，其余不必要的背景做虚化处理,才能使产品的图片有突出点，体现页面的层次感。详情页一主三辅的第一张主图首先将图片的背景虚化，使其产品 更加突显；然后在左下方加以文字修饰，文字颜色选择图片内自带的 橙色，相互呼应，增加整体美观度。如图4-15所示：19This document is produced by free version of Print2Flash.Visit for more information图4
23、-15一主三辅主图产品细节展示的图片设计排版方式为左右交替排版，图片截取了 产品的设计亮点之处，配合文案将其突显出来，便于客户更进一步的 了解。如图4-16所示：细节展示图4-16产品细节图20This document is produced by free version of Print2Flash.Visit for more information4.3主图设计主图设计在做产品推广的时候主要是提升宝贝的曝光量，曝光量越高点击 量也会越高，主图的设计就尤为重要；宝贝主图的设计关系到品牌的 形象，主图的文案要精简，卖点要突出；这样能吸引消费者的注意力,从而提升店铺的点击率和流量。在主图的
24、设计过程中可以添加店铺的 logo或者产品本身的卖点来吸引客户点击。主图效果图如图4-17所 示：舒适、透气、有型 CLOTHCLOTH-ZG -ZG VERS 一 ON 修身版型图4-17主图效果图4.4其他页面设计其他页面设计4.4.1所有分类页面设计This document is produced by free version of Print2Flash.Visit for more information所有分类页面能将店铺的所有宝贝展现给客户，在客户进入店铺 以后可以更好的寻找自己想要的宝贝。店铺内所有的产品一一排列出 来，每款宝贝下方都有产品名称、价格、销售量以及评论，使顾客
25、能 够很清楚的知道每一款宝贝的销售情况。所有分类页面效果图如图4-18所示:特隹38务体粉图4-18所有分类页面效果图4.4.2卫衣页面设计卫衣页面的设计是根据所有分类页面来更改的，部分客户在进入到店铺首页的时候，会根据自己的需求寻找所需产品，当客户就在首22This document is produced by free version of Print2Flash.Visit for more information 页导航栏中点击所需要的产品页面时，展现出来的将全部是这一品类的产品。卫衣页面效果图如图4-19所示:收藏本店非凡男装首页 I 所有分类I新品I卫衣I裤装I衬衫I棉服纯色卫衣
26、男连帽2018新款秋季韩版 休闲长袖上衣百搭宽松潮108.00 已th 88件秋季套头印花卫衣男连帽宽松假两 件长袖韩版潮流怵闲外套 95.00 135.0G 已售：105件冬季加绒卫衣男潮连帽宽松套头印 花外套学生算版休闲上衣128.00 46-00-已售：233件评论(74)评论(113)卫衣男2018秋季新款套头宽松潮牌 bf风连帽嘻哈情侣装卫衣外套潮牌加绒卫衣男连帽青少年拼接情 侣嘻哈加厚运动卫衣男宽松189,00 龄将 已售：516#308.00 460.00 已售；127件旋律风车男生卫衣连帽秋季2018新 款运动宽松外套韩版印花套头衫潮95.00 135.g 己售；233件评论(
27、497)评论(100)评论(120)品质保障 七天无理由退换货品质护航购物无忧仕少为您提供售后无忧保障特色服务体验 LJ/为您呈现不一样的服务图4-19卫衣页面效果图23This document is produced by free version of Print2Flash.Visit for more information总结在指导老师欧阳老师的指导、鼓励和帮助下本人完成了“非凡男 装”网店美工设计与实现，在做毕业设计的这段期间里我感受到装修 设计一个店铺并不是一件容易的事情，首先要确定店铺的风格，对店 铺进行一个精准的定位。其次，就需要自己确定货源，并用Photoshop 软件对
28、已准备好的素材进行处理。再查看其他店铺的装修排版理解运 用来设计自己店铺的排版风格，运用Photoshop来完成各页面和图片 的制作和美化。通过这次毕业设计的制作，让我巩固以前学过的知识,也让我学到了更多相关的新知识点,Photoshop的运用也更加的熟练。并且也让自己意识到对所学知识的掌握程度不够牢固，创新意识也比 较薄弱，这些都是自己应该需要提高的地方。也让本人知道需要学习 的地方还有很多，需要耐心并坚持不断地去学习，综合运用多种知识，才能使店铺装修的更好。24This document is produced by free version of Print2Flash.Visit fo
29、r more information致谢时光飞逝，转眼间三年紧张而又充实的大学生生活即将画上句 号。在这三年的学习期间，我得到了很多老师、同学和朋友的关怀和 帮忙。在毕业设计即将完成之际，我要向所有期间给予我支持、帮忙 和鼓励的人表示我最诚挚的谢意。首先，我要感谢我的指导老师欧阳红巍老师对我的教导。从毕业 设计的选题、构思、撰写到最终的定稿，欧阳红巍老师都给了我悉心 的指导和热情的帮忙，使我的毕业设计能够顺利的完成。欧阳红巍老 师对工作的认真负责、对学术的钻研精神和严谨的学风，都是值得我 终生学习的。其次感谢我的家人在此期间给予我的包容、关爱和鼓励,以及所有陪我一路走来的同学和朋友，正是由于他
30、们的支持和照顾，我才能安心学习，并顺利完成我的学业。毕业在即，在今后的工作和生活中，我会铭记师长们的教诲，继 续不懈努力和追求，来回报所有支持和帮忙过我的人！25This document is produced by free version of Print2Flash.Visit for more information参考文献1 夏春.基于网店美工岗位的Photoshop课程体系设计J.课程 教育研究，2017(7).2 张超.基于能力本位的高职网店美工课程改革探索J.湖北工 业职业技术学院学报，2016,29(5):106-108.3 司家斌，冯绍娜.高职电子商务网店美工课程教学思考
31、J.电子商务，2017(1):74-74.4 张静，王苏苏.基于淘宝网店的图形图像处理课程教学改革J.无线互联科技，2017(12):71-72.5 杨亚萍.高职院校“网店美工”教学实践研究J.无线互联科技,2016(20):94-95.6 陈则芝，章炳林.淘宝店铺装修方法与技巧J.电子商务，2018(3).7 陈启强.移动互联网营销之店铺装修策略J.山西青年，2017(13).8 韩晓倩.网店装修的方法与技巧J.产业与科技论坛，2017,16(13):56-57.26This document is produced by free version of Print2Flash.Visit for more information