“Forever21-store”服饰网店美工设计与实现论文.pdf

摘要本文的设计主要介绍了电子商务中的网店美工设计。针对 Forever21store服饰进行网店美工设计与实现,本文的主要内容是从 Forever21store女装网店整体风格以及品牌视觉形象设计、网店首 页视觉效果的实现设计、详情页的视觉效果实现设计、轮播海报的视 觉效果实现、此外还包括LOGO设计、会员卡设计、礼品袋的设计、信封设计、店招设计、导航栏的设计等方面阐述了“Forever21store”服饰女装网店装修设计与实现过程，从而实现盈利的目的。设计过程 中主要用到了 Photoshop软件，下面就设计过程中所采用的技术、思 路等方面做详细介绍。关键字：Forever21store女装网店美工 PhotoshopThis docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information目录前言.1第一章概述.21.1电子商务发展现状.21.2网店装修概述.21.3网店简介.3第二章企业品牌视觉形象设计.42.1 LOGO 设计.42.2名片设计.132.3会员卡设计.142.4礼品袋的设计.162.5信封的设计.17第三章首页设计和实现.193.1首页布局设计.193.2首页模块分解设计.213.3动态效果实现.30第四章详情页设计与实现.404.1详情页的设计元素.404.2详情页的布局设计.404.3动态效果.41第五章活动海报设计.44This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information5.1活动海报设计.445.2活动海报实现.44总结.45致谢.46参考文献.47This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information刖舌Internet为我国的电子商务带来了无穷的信息，Internet可 以说是电子商务的催生剂，更是造成我们学习方式和交流变迁的重要 原因之一。在网络化的今天，因为有了互联网，淘宝购物显得更加的 便捷，网络淘宝的飞速发展，使得女装日新月异，即使多种让人挑选，女生们都说我的衣橱里永远缺着一件女神新装。“Forever21store”服饰网店美工的设计主要是通过对网店发展 现状分析后，对其进行准确的定位，从店铺的整体风格进行了改变,其次从一系列的vi产品设计，比如VIP卡、信封、包装袋方面进行 了精心设计，以求在实现口碑营销的同时还要促使利益最大化。1This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information第一章概述1.1电子商务发展现状电子商务发展现状1998年，阿里巴巴、中国制造网等B2B电子商务企业成立；2003年，淘宝网、京东商城等B2C电子商务平台崛起，中国电子商 务开启了快速发展的二十年。2016年，我国电子商务交易额已相当 于国民生产总值的35%,对推动供给侧结构性改革的作用日益突出。2017年双狂欢节，天猫、淘宝总成交额1682亿元，刷新纪录。由此可以看出电子商务行业虽是后起之秀但是前途不可限量。1.2网店装修概述网店装修概述网店的装修设计可以起到一个品牌识别的作用。对于实体店铺来 说，形象设计一方面能使外在形象能够长期保持发展，为商店塑造更 加完美的形象，加深消费者对企业的印象。同样，建立一个网店，我 们也需要自己的网店名称、独具特色的网店标识和区别于其他店铺的 色彩风格。在网络这个虚拟的环境中，更凸显了店铺设计的重要性。消费者第一次进入你的店面，很难一下子就让其对产品的优劣进行评 定，但却足以给消费者留下第一印象。若顾客一开始对界面产生了好 感，对界面的布局产生了共鸣，那么在其后的购买行为中，他的内心 就会趋向认同。因此，在基于展示店铺主题：“永远青春，永远21 岁”的前提上，店铺的整体装修风格以冷色调浅灰色为主，辅之以暖 色调蓝色、以及玫红色，向顾客展示青春、活力。2This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information1.3网店简介网店简介网店名称：“Forever21store”服饰网店网店地址：https:/shopl417 456 7 Forever21store成立之初是由于很喜欢曾轶可的那首歌，虽然 是柔柔的绵羊音，但是里面的歌词：我有很多事情要做，哭了又笑笑 了又哭，那是我，让我想以此命名店铺的名字。虽然开一家自己的店 铺不是什么很特别的事，但是看到店铺的所有都是自己花了心思去完 成，有顾客或者朋友夸奖，也就很满意了。因为网店定位于1625岁的青春美少女，本网店所有的产品 都是充满青春活力的女性服装。酷酷的阔腿裤、有爱的情侣装、温暖 的羽绒服、清新的小吊带，我喜欢的，市场上流行趋势的产品都会展 示在店铺。第二章企业品牌视觉形象设计2.1 LOGO 设计设计在页面展示中，一个制作原创，充满新意的LOGO不仅可以很好 树立品牌形象，传递丰富的产品信息，还可以在其他众多的店铺脱颖 而出，对于初次到访的顾客来说，LOGO往往是店铺的第一印象。logo强调的是辨识性和独特性，“Forever21store”服饰店铺 的整体风格是森系少女风，LOGO设计主要对外展示“永远青春，永 远21岁”的主题。LOGO设计的主打颜色为蓝色，加上两瓣花，寓意3This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information 为属于花季的少女，永不凋谢。本店铺的Logo是在Photoshop软件中制作完成，过程如下：打开photoshop,新建文档。使用自定义形状工具，选择钢笔工具变形制作花朵，填充颜色,最后复制图案副本，使用Ctrl+E合并图层。使用横排文字工具，书写店铺的英文。图1-1 logo的制作与实现2.1.1企业标识基本元素企业标识基本元素企业形象识别系统的基本设计要素，由公司标识、标准字，标准 色构成，基本元素由企业标志、中文标准字、英文标准字、标准色组 成。“Forever21store”服饰企业标识设计以整体明确、意义深刻为 标准，以建立完整统一的企业形象。企业标志图形（图2-1）,中文标准字（图2-2）,英文标准字（图2-3），标准色（图2-4）效果图展示如下：4This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information图2-1企业标志图形图2-2中文标准字CZ/orever21 storenvzhuang图2-3英文标准字图2-4标准色图2.1.2企业标识图解企业标识图解图2-5企业标志This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more informationreverZistore 女装图2-5企业标志图标图标注释：图标以店铺名字Forever21store中Forever的英文的首 字母为主体，F的字母形状，弧度明显，线条流畅，看起来美观大方，整个标志看起来温暖、青春，是对“Forever21store”服饰以“永远 青春，永远21岁”为主题的完美诠释，“Forever”中文意思“永远”，代表着创意者希望顾客永远青春，像花季的少女，永不凋谢，同时也 有对自我品牌的美好祝愿，以及她不断追求创新的心。色彩注释：品牌采用蓝色为标准色。蓝色有着勇气、冷静、理智、永不言弃的含义。并且在基督教中，蓝色是圣母玛利亚的象征。“Forever21store”服饰大胆采用蓝色为主色调就在于不断的激励自 己：追梦的道路上即使荆棘重重，但我有一颗永不言弃的心的啊。图2-7中文标准字4/orev er21 storen v zhu ang6This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information图2-8英文标准字字体注释：中文字体使用的是幼圆，字体给大众呈现出来的效果 是非常年轻的、稚嫩、青涩。符合店铺定位的人群，也符合店铺的主 题，英文字体使用的是ARBERKLEYo ARBERKLEY的字体看起来很有艺 术感，并且在幼圆的字体下衬托了它独特的美，一眼望去，她最扎眼。两者相结合，总体给人青春、活泼、热情的感觉。2.1.3标识网格规划图标识网格规划图标识网格规划能更好的规划标志，比如对空间与各种元素之间的间距，能够营造和谐轻松的视觉感受。如图2-9,图2-10：2.1.4标识预留空间、标识最小比例限定标识预留空间、标识最小比例限定标志预留空间就是一个标志放在一位置上，它的上下左右须预留出一 定的空间不能出现文字图案等内容，否则会影响标志的独立性，或是 说是破坏掉标志的美观和意义等等；最小比例限定就是标志最小能放 多小才不会影响它的识别性7This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information 为了在使用标志中不出现模糊不清楚的情况，本标志最小的比例限制在此处比例效果图2-1:1中，最少标识的宽度不可小于10mm。9标识最少不能小于10MM图2-11标识最小比例限定2.1.5标志黑稿与反白效果标志黑稿与反白效果标志的黑稿与反白效果图如2-12.2-13中，黑稿与反白效果适合在各种环境与各种场合中使用，但是要严格按照范本设计规范使用。97图2-12标志黑稿效果图图2-13标志反白效果图2.1.6标志去色和反相效果标志去色和反相效果标志的原色效果、去色效果、反相效果展示有着颜色的变化,适合在各种场合与特定的环境与中使用，要严格按照范本设计规范使 用。8This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information其标志去色和反相效果图展小如下:标志原色效果图（图2-14）,标志去色效果图（图2-15）,标志反相效果图（图2-16）9 9 9原色 去色 反相图2-14标志原色效果图 图2-15标志去色效果图 图2-16标志反相效果图2.1.7中英文标准字方格规范中英文标准字方格规范此标准字对于整个设计比例，宽度、空间、高度、线条都有详细 的规定，在各种环境与各种场合中使用时，要严格按照标准字方格规 范使用。orver21storfi 女 装图2-17中英文标准字图2-18中文标准字网格图9This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information图2-19英文标准字网格图2.1.8中英文标准字黑稿和反白效果中英文标准字黑稿和反白效果标准字实行黑稿和反白效果处理，在各种环境与各种场合中使用时，要严格按照标准字方格规范使用。如下图图2-21图2-22.图2-23.图 2-24、图 2-25、图 2-26：图2-21中文字黑稿图2-22中文字反白rever2lstorevzhang图2-23英文字黑稿rever2lstoreHvzhuaHg图2-24英文字反白图2-25字体组合黑稿10This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information2.1.9标识与标准字体组合范例标识与标准字体组合范例横排效果:图2-27标识与标准字横排组合效果图注：在任何时候使用各规范组合时，必须按照此比例实行缩放,决对不允许任何的变形和移动，还有增加任何元素。2.1.10字体组合禁用规范字体组合禁用规范中英文上下比例不协调，英文显示超出比例长度，上下比例不协 调。中文显示超出比例长度，上下比例不协调。中英文字体不符合规范，英文字体标示不规范，标准字体为 ARBERKLEYo中文字体标示不规范，标准字体为幼圆。其字体组合禁用规范效果图展示如下：中英文比例上下不协调图（图2-28）,中英文字体不符合规范图（图2-29）goiwrZmreNVZ HAU NC串顷斗伽女装图2-29中英文比例上下不协调图 图2-30中英文字体不符合规范图2.2.1标识禁用规范标识禁用规范店铺的标志是塑造店铺的独特形象、品牌理念、品牌文化、品牌 规范的基础特质，展现品牌的内涵。11This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information店铺的标志不光是能改变全部视觉因素的主导能量，也是组合全 部视觉因素的中心，更是让大众认识店铺品牌的象征代表。因此，店 铺标志设计在整个LOGO设计中拥有非常重要的意义，在使用标志中 一定要严格按照标准使用。如下图图2-31、图2-32、图2-33、图2-34：Logo不能随意变形 logo不能随意变颜色图2-31禁用标识I 图2-32禁用标识II佗ver2ktore 察图2-33禁用标识III（排列不规范）9佗豺2心0佗女图2-34禁用标识IV（LOGO没有整体协调性）2.2名片设计名片设计名片起源于交往，在我国封建社会便出现了最早期的名片形式，被称为“谒，由此可见，名片在我国已经有有非常悠久的历史，并且在人类交际中扮演着必不可少的角色。名片就相当于你个人的一张脸，整洁与否都与你平时的精心呵护 有关，它不光是你与结交时展现出来的诚意，同时也可以在你对外 宣传品牌，建立销售渠道起重要作用，名片也是向对方推销介绍自12This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information 己的一种方式，也可以说是现如今商务人士进行商务活动必不可少 的一款工具。“Forever21store”主打的是青春女孩，所以网店名片主要从优 雅、高调、少女心，这三个元素来设计。不可否认，你给人家递上 你的名片，一眼望去就是名片的正面，名片上面主要有持卡人详细 的信息，运用粉色作背景色，是想让顾客明白大家都有一颗少女心，在粉红色的背景上增加了浅紫色的条纹装饰，并在名片上下两个角 处增添了一朵粉色的花，起到点缀的作用，展现名片的设计感。正 面的左下角放置了两个卡通小女孩一起逛街的图片，使得名片显得 活泼生动，同时也有结伴购物的含义，运用粉色的长方形作为详细 信息的背景，紫色与粉色两者相得益彰，让整张名片呈现的效果具 有和谐性，同时让店铺的名字显得更加突出。品牌二维码放置在右 下角，能让别人通过淘宝界面的扫一扫更加快捷的进入店铺，了解 店铺商品信息，品牌宣传的同时也有引流的作用。名片的反面采用的是和名片正面的相同背景，统一整体风格，不 显得杂乱，名片反面模特图能让大家更为直观的了解店铺品牌的风格，用“Forever21你的青春我来给你添色！”用“我要我们永远年轻！大胆的喊出了品牌的设计理念，以及中间的一行小字写出了店铺最初 的创作灵感，引起共鸣。其效果图展示如下：正面图（图2-35）,反面图（图2-36）,名片正面制作图（2-37）名片反面制作图（2-38）13This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information图2-35名片正面图 尺寸（9 0X50）mm图2-36名片反面图尺寸（9 0X50）mm为展示更好的图片效果，名片设计过程如下:图2-37名片正面制作图尺寸（9 0X50）mm14This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information图2-38名片正面制作图尺寸（9 0X50）mm-A.n e i s-s-.2.3会员卡设计会员卡设计在我们的日常生活中，会员制可以说是无所不在，专卖店的贵宾 卡，饭店的VIP卡，旅游景点的年卡、网吧会员卡等等，这种又称为 会员制营销，主要目标就是留住客户，与客户建立长期稳定的关系,使他们转变成忠实客户，第二的话利用会员特权吸引新客户，会员卡 在一定程度上也展示了公司的价值走向。在会员卡设计中，采用了圆角矩形设计，让它看起来更平滑、圆 润。运用了暗墨色使其有高端大气的感觉，卡片左边是店铺LOGO,让大家知道这是本店铺的会员卡，中间部分是VIP定制，采用了亮金 色，让VIP服务显得亮眼，独特，右上角加上了引导按钮，让卡片别 致大方，英文部分是此卡只限个人使用，向大家说明了会员的独有权。卡片下方是一条暗金色的边框，为卡片增色不少。15This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information 卡面的背面采用的黑色图案，与卡片整体风格相搭，背面主要用白色部分书写了持有贵宾卡的一些注意事项。其效果图展示如下：正面图（图2-39）,反面图（图 2-40）VIP正面制作图（图2-41）,VIP反面制作图（图2-42）孩装vip暖宾卡This VIP card is ccly yourself再卷权晶球&11029783图 2-39 尺寸（9 0X50）贵宾签名VIP使用预知：1此卡是您尊表身份的象征，请妥善保存;2.持此卡可享受本店VIP会员价；3.此卡隗本人使用.追费时请出示此卡；4.本店保济本卡蚀用的暗丝篇程权。尊at特权*会员专享图2-41 VIP正面制作图图 2-40 尺寸（9 0X50）mm16This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information图2-42 VIP反面制作图2.4礼品袋的设计礼品袋的设计礼品袋外观精美，质量环保，无疑成为了一种方便，便宜的宣传 方式，礼品袋的视觉效果强，会增加消费者的欲望，不光是宣传品牌 形象，还是朋友之间相互赠礼都是很不错的选择。本店铺礼品袋的背景颜色设计和VIP卡的颜色相一致，采用的是 暗墨色，手提带的袋子采用的是白色，礼品袋中间放置品牌的LOGO,袋子的侧面是店铺冬季主打产品毛呢大衣的宣传语，是想向大众宣传 自己店铺的衣服，左侧还有店铺的二维码。其效果图展示如下：平铺效果图（图2-43）,立体效果图（图 2-44）平铺制作图（图2-45）立体效果制作图（图2-46）17This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information图2-43礼品袋平铺效果图图2-44礼品袋立体效果图*.*就，工乂*1 1 版*.X.=iii jiu K-arny择l u+ad*,*n，pid:xl,m.faik”Lrau rna.pu J还!寻匚？3 x IbjLjad够 1 旧名I乘医 I HjB/W *4 IL-_-.m.X 一 就/J J 一H w.H w.A A虬七图3-8 轮播海报制作图I(9 50pxX350px)图3-9轮播海报效果图II(9 50pxX350px).免;耳产就/xm#Axm#A30This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information图3-10轮播海报制作图II(9 50pxX350px)图3-11轮播海报效果图III(9 50pxX350px)图3-12轮播海报效果图III(9 50pxX350px)3.2.4左侧大分类条左侧大分类条左侧大分类悬浮导航条和首页的导航条的作用差不多，主要是为 了方便顾客快速找到想要的产品，减少顾客的烦躁感，减少流失量，左侧大分类条我主要根据是店铺的准确定位，面向的市场人群，以及 店铺的整体风格来进行设计。主要的背景颜色采用了少女喜欢的粉色,并且运用了模特的半张脸作为装饰，增加了页面的美感以及宝贝的神 秘感，主要的导航文字运用的是我姓名的第一个字，目的是为了贴近31This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information 顾客群体，其他的导航部分则是根据店铺的商品进行分类，加上了粉 色心形，增加设计感的同时也是为了迎合顾客。其左侧大分类条效果图展示如下:左侧大分类条效果图(图3-13)Q谭姑娘的分类义 羽绒服7 两件套B 卫衣上衣R 酷酷的阔腿脖义 情侣装凹邱衫/打哦图3-13左侧大分类条效果图(19 0pxX6 0px)3.2.5主图设计主图设计淘宝店铺可设置的主图页为五张，可以分别展示宝贝的正面、侧 面、背面和细节方面，通过主图页面，顾客可能会对我们店铺的宝贝 产生兴趣，从而进行购买，所以设计好的宝贝主图也是很重要的一部 分。宝贝主图3-14：将店铺LOGO放置在主图页的左上角，展示品牌 形象，主图的背景颜色采用的是浅灰色，主要的目的是为了突出本款32This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information 宝贝，店铺中下部分增加宣传标语，字体采用了浮雕、阴影效果，是 为了让宣传语部分显得更加有立体感。填加两个大小颜色不一的长方 形放置在产品下方，颜色分别为黑色、红色，在图形上方填加活动信 息与产品价格，能让顾客方便了解产品，也能让顾客瞬间明白这款宝 贝正在折扣活动中，想要的可以尽快抢购。宝贝主图3-15：将店铺LOGO放置在主图页的左上角，在主页的 右上角加入了这款宝贝的宣传语，字体颜色运用的是粉色和浅绿色,与log。颜色一样，不会显得太突兀，右下角是宝贝的型号和颜色。其主图效果图展示如下:主图效果图（图3-14、图3-15、图3-16、图 3-17、图 3-18）图 3-14 主图 I(8 00pxX8 00px)图 3T5 主图 II(8 00pxX8 00px)33This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information图 3-16 主图 III(8 00pxX8 00px)图 3-17 主图 IV(8 00pxX8 00px)图 3T8 主图 V(8 00pxX8 00px)3.2.6商品展商品展7F商品展示贵于在精，而不在多，在图片冗余的页面中，图片在陆 续显示时还会是页面产生顿挫从而跳出鼠标的控制，也会使顾客产生 厌烦情绪，因此商品展示的图片一般在10张左右为宜。其商品展示效果图展示如下：商品展示效果图（图3-19）34This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information图3-19商品展示效果图3.3动态效果实现动态效果实现3.3.1店铺店招店铺店招1.进入淘宝店铺的卖家中心，在店铺管理中找到“店铺装修”，点击“PC端”，出现如下页面，进行电脑端的装修。图3-20店铺首页装修页面图35This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information凝 贝 a：踏 aartH wasr S3I 2)17 35 39 22:41:23fi图3-21店铺PC端装修页面图2.编辑店招，选择自定义招牌，将之前已经在Photoshop制作好的图片上传于图片空间，在图片空间中复制粘贴链接地址，选择立即保 存，返回店铺首页便可以看到已经设置好的店招图3-22PC编辑店招图3.预览和发布（图3-23）36This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information第四：店招动态效果实现图（图3-24）淘宝网 T庄薄：Fbrev=r215torf图3-24店招动态效果实现图3.3.2导航导航1.选择编辑导航条（图3-25）所有分类 首页 女生穿搭 男士穿搭 情侣装图3-25编辑导航条图2.选择导航设置（图3-26）,导航条设置可以根据店铺的风格还有卖点自己进行设计。37This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information图3-26导航设置图第三：导航动态效果实现图（图2-27）店Forever21store整等 据述仙服务5.0物流5.0:收藏店铺 需用手机逛本店图3-27导航动态效果实现图首页搜索3.3.3全屏海报全屏海报第一：将页面编辑中的智能版页面，选择“模块”编辑全屏海报,将自定义模块拖放与该页面（图3-28）38This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information图3-28全屏海报图第二：在事先制作好的图片上传于图片空间，选择图片地址、链接地址（图3-29、图3-30）蛔犊宕称跑培索 Q IBk我的图片_I Slzwdj3it5J宝7!国片店浦装修IS浦莹俺2止将阂片目录 尊散的囹片空HI月户，自列:/年1U月lutd起免亶存储咨重鲨馄后需旷音或刑踪；才口止常二倍！点击购买图3-29图片地址图39This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information图3-30图片链接图第三：全屏海报动态效果实现图（图3-31）图3-31全屏海报动态效果实现图40This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information3.3.4图片轮播图片轮播第一：选择模块，基础模块中的图片轮播，将其模块拖入需要装修的地方（图3-32）图3-32编辑图片轮播图第二：将所需要的图片上传于图片空间（图3-33）图3-33上传图片空间备用图第三：选择图片地址、链接地址（图3-34）41This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information图3-34图片地址图第三：图片轮播动态效果实现图，特别注意在显示设置中，标题 显示为不显示，因为显示的标题展示在页面中不美观，轮播海报呈现 的效果有两种可以选择，一个是上下滚动、一个是渐变滚动，本店铺 选择的是渐变滚动，最终实现的效果图如下：（图3-35）（图3-36）42This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information图3-35图片轮播显示设置图3-36片轮播动态效果实现图3.3.5左侧大分类条左侧大分类条第一：选择编辑左侧大分类条（图3-37）43This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information三百页 7 页面编氟 布局图3-37编辑左侧大分类条图LW；子亏视恨次把至此处诳行编辑店襦每周四上新神：E买整丞一 客服2:的.班我联系 客职3:祖我联系.希望亲们多进庙浦讯迅第二：选择悬浮导航位置设置与图（图3-38）X位置设置屈设置谖置悬浮导航坐标说明：县淫导航区域不可履盖到店铺页头区域，可自定 义上下位置屐距内答区的距离果蔑虑铺页头的距离|4。距酹内容模块的距寤10请输入。-5。之内的数值。预览示意图图3-38位置设置图44This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information图3-39内容设置图第三：图片轮播动态效果实现图（图3-40）45This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information图3-40图片轮播动态效果实现图3.3.6宝贝主图宝贝主图第一：在卖家中心选择点击出售中的宝贝，选择编辑宝贝（图3-41）o 夏奈可可17秋导陲灯筮袖毛由:衣女收苫苫1:中长款?场启 325.00 15984 Q 0 切.板 贝商家编码:*Affi818-A_P-182_#图3-41编辑宝贝图46This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information第二：在图片空间中选择五张宝贝图片，其中一张作为宝贝主图（图 3-42）图3-42图片地址图第三：宝贝主图动态效果实现图（图3-43）wworflstw*一l orev er 2119双修狠欢价12月12目零点开抢广东广州-s湖南长俾城区一 快涕承诺 E3 7E3 7天无理由图3-43宝贝主图动态效果实现图3.3.7商品展示商品展示第一：选择编辑商品展示，自定义宝贝推荐一栏（图3-44）图3-44编辑商品展示图47This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information第二：我们可以在电脑端上设置商品为一行展示3个宝贝（图3-45)图3-45电脑端显示图第三：商品展示动态效果实现图（图3-46）48This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information实拍秋冬女装韩版可爱卡通宽松加绒加厚连,帽营头卫衣外套实拍甜美学院风气喷蝴蝶结绑带毛呢外套呢 大衣学生女2017冬日系优雅浅卡其长款风衣大翻领衣袖呢外套 162.00图3-46商品展示动态效果实现图49This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information第四章详情页设计与实现4.1详情页的设计元素详情页的设计元素一个好的详情页设计，不仅可以吸引更多买家的眼球，还可以大 大提高店铺的转化率。详情页的设计元素，我主要根据店铺的风格来 设计的。4.2详情页的布局设计详情页的布局设计个人认为做好宝贝详情页有以下几个原则：1.详情页要关联相关产品。比如店铺卖的是女装就要有搭配性的产品,例如裤子出现在产品页。2.详情页要有情景式营销。我们卖产品之前要明白目标人群是一个什 么样的状态，然后把自己想象成顾客这一类人，设计出图文结合的场 景效果。3.一定程度上可以带上用户打动人心的评价。4.企业公信力的证明，让顾客买的安心放心。5.在详情页中承诺对于售后服务的保障。6.促销信息出现在详情页，例如满减优惠。店铺产品详情页背景颜色选用为灰色，字体主要选用黑色，详情页每 块标题运用的是褐色加上粉色的小方框，突出每一部分所展示的宝贝50This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information 情况，产品详情页排版主要以图文排版、上下排版、左右排版为主,整体色调和页面布局都力求让顾客看了之后觉得宝贝就是她心中的所好。其详情页布局图展示如下：详情页布局图（图4-1）图4-1详情页布局图4.3实现效果实现效果第一：选择编辑宝贝（图4-2）口已推荐日亲+其长顾衣大福姗商家编码:女人街818-A_P-182_#325.00159842017-12-16 16:38编军贝51This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information图4-2编辑宝贝图第二：在图片空间中选择宝贝详情页图片，按照布详情页局图插入图片（图4-3）尊敢的囹片空间用户，目却1/年1U月W曰起免卖存楮苓里超眼后案扩咨【甄删IS 才B止常上辑！点壬遍买 墙囹片 卜信囹片 G?斩津女件实 m叵收站 拎郭口仝迭=替换 U移动 Z重命客 圜 编辑 通理于切 X m HT-硬iw除丰引ft图4-3图片地址图第三：宝贝详情页效果实现图（图4-4）宝贝详情页效果实现过程：1.建一个高7 50px高度不限的自定义背景图，选择主图里面的 原始图片，设为背景。2.使用矩形工具弄出导航条，填充褐色，为了突出文本，字体 颜色设置为白色。3.选择店铺上架好的商品高领毛衣，设置链接，成为推荐套餐 一栏，促销卖品。4.使用椭圆工具选中并虚化图片。5.产品细节图。6.售后服务。52This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl for more information耳，.x x rx rx，艺k3 k-章-T-T侣.段我以 5 5 n nFEFE53This docu ment is produ ced by free v ersion of Print2Fl ash.Visit www.print2fl f