《“青楚家纺”网店美工设计与实现.pdf》由会员分享，可在线阅读，更多相关《“青楚家纺”网店美工设计与实现.pdf（50页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、摘要当前电子商务在中国的发展速度是显而易见的，可以说是全球电 子商务的领先者，通过互联网和移动互联网不断渗透普及，也为电子 商务的快速发展打下了良好的基础。因此可见电子商务在我国是有着 很好的发展前景。青楚家纺设计的主要内容是通过网店整体风格以及品牌的视觉 形象设计，包括LO GO设计、店招、导航栏、轮播海报、优惠券、主 图、尾页、礼品袋、信封、首页视觉设计效果等方面来阐述“青楚 家纺”网店的美工设计与实现的全过程。关键字：青楚家纺；网店美工设计；店铺装修This document is produced by free version of Print2Flash.Visit for mor
2、e information目录引言.1第一章概述.21.1电子商务发展现状.21.2网店装修概述.21.3网店简介.2第二章企业品牌视觉形象设计.42.1 LO GO 设计.42.2名片设计.142.3会员卡设计.132.4礼品袋的设计.142.5信封的设计.15第三章首页设计和实现.173.1首页布局设计.173.2首页模块分解设计.193.3首页效果实现.28第四章详情页设计与实现.364.1详情页的布局设计.364.2详情页模块分解设计.374.3详情页效果实现.41第五章活动海报设计.435.1活动海报设计.435.2活动海报实现.45总 结.46致谢.47参考文献.48This do
3、cument is produced by free version of Print2Flash.Visit for more information引言电子商务的发展起源于20世纪90年代,经历了二十几年的发展。电子商务从稚嫩走向成熟逐渐变得强大，而电子商务也成为了这个时 代的关键词，电子商务也成为了多数年轻人选择的就业方向。“青楚家居纺”主要是通过对本网店的准定位以及发展现状分 析后，进行视觉形象设计，其中包括网店的店招、导航条、全屏海报、轮播海报、详情页等全方位的设计，以此高品牌的宣传，树立企业的 形象，吸引顾客的关注，提高流量，提高网店的转换率，从而在众多 的淘宝网中崭露头角。1Th
4、is document is produced by free version of Print2Flash.Visit for more information第一章概述1.1电子商务发展现状电子商务发展现状2018年8月20日中国互联网络信息中心发布了第42次中国 互联网络发展状况统计报告在报告中显示，截止2018年6月，中 国网民规模达到8.02亿人，而2012年我国的网购用户人数仅有2.42 亿人，短短几年近乎增长了三倍。截至2018年11月12日零点，双 十一购物狂欢节闭幕，2018年双十一总成交额2135亿元，物流订单 量也超过了 10亿，无论是成交金额还是达成时间，都再次刷新了纪
5、 录。在未来电子商务的发展也将呈上升趋势发展。1.2网店装修概述网店装修概述进入店铺之后，网店的装修就是给顾客的第一印象，重要性是显 而易见的。为了使店铺在众多的网店中更加具有竞争力，具体问题具 体分析，根据店铺的商品确定店铺的风格，认证策划店铺的各类活动,树立企业形象，提高点击率、浏览量，最终提高转化率。1.3网店简介网店简介网店名称：“青楚家居纺”网店地址：https:/ 发，除被芯外，床单、抱枕，均可订制。随着电子商务的快速发展，线上的各大家居市场也在不断壮大，虽然相比服装来讲家居用品的竞 争压力相对较小，但是要想在众多的淘宝商家中更具有竞争能力，就2This document is p
6、roduced by free version of Print2Flash.Visit for more information 必须更加努力。“青楚家居纺”以“诚信为本、竭诚服务、原创品质、求真务实”为服务宗旨。以“制造温暖、传递温馨”为经销理念，一 步一脚印扎实做好品牌的推广。“青楚家居纺”淘宝店铺创立于2018年11月。本人所学习的专 业是电子商务，由于“实践是认识的基础，一切的经验来源于实践”。秉持着对专业课程的喜爱以及对专业技能的培养，所以决定经营一家 网店，提高自己的综合素质。3This document is produced by free version of Print2
7、Flash.Visit for more information第二章企业品牌视觉形象设计2.1 LO GO 设计设计LO GO的设计是店铺品牌形象的说明，更是被识别的重要标识，能够在视觉上最大程度的区别于其他店铺，让顾客在浏览时留下深刻 的印象。根据本店铺的主营产品，以简约、大方、易识别为设计原则,对该公司的标志进行设计。2.1.1企业标识基本元素“青楚家居纺”标识的基本元素由英文标准字、标准色构成。其 企业标识设计以整体简单、意义明确为标准，以建立完整的店铺形象。鲜明的标准色加上具体性的文字说明，使顾客在看到店铺LO GO时，同时能产生联想，加深对店铺的了解和认可。企业标志图形（图2-1）
8、,英文标准字（图2-2）,标准色（图 2-3）效果图展示如下：图2-2英文标准字cmyk：45,too 13,15图2-3标准色图This document is produced by free version of Print2Flash.Visit for more information2.1.2企业标识图解图2-4企业标志图2-5企业标志图标图标义释：“青楚家居纺”店铺标志图标设计简洁，灵感来源于 店铺名称“青楚家纺”，能够直白的通过视觉效果告诉顾客关于企业 品牌的名称，框架中字体使用禹卫书法行书简体,意为宣扬传统文化,也是对祖国文化的传承，禹卫书法行书简体具有传统的美感，给一种 沉
9、稳安全，又不失洒脱的创意感，其中青字的造型设计，则有着很强 的动感，用流畅的线条，勾勒出一幅高山流水画，给人营造出一种青 山流水的美感，简单易记。所看见“青楚家纺”四个字并非实体字，而是一个框架，适应任何的背景色，形容公司不管面对哪种境遇都会 直面挫折，迎难而上。不仅激励自己，也激励众多年轻人，完美的示 意了“制造温暖、传递温馨”的经营理念。色彩义释：店铺品牌LO GO采用红色为标准色。红色是很传统的 颜色，代表喜庆、热情、温暖、沉稳大方、坚强、勇敢又富有青春活 力，红色也是给家带来温暖的颜色。在寒冬里一抹红色给人制造温馨5This document is produced by free v
10、ersion of Print2Flash.Visit for more information 之感。在孤独的困境里红色能给人勇气和自信。直面困难，不退缩逃 避。图2-6英文标准字字体义释：英文采用Blackoak Std具有清晰、醒目、美观、饱 和之感。字母紧凑在一起寓意着团结一致、相互激励、相互温暖，又 有着一种官方正版的即视感。本店铺LO GO本着易辨、易读、易记的设计原则，以简洁明了的 图形化文字为企业代言，并成为品牌文化的沉淀。LO GO效果图展示 如下：本店LO GO使用P hotoshop软件制作过程如下：1.新建一张450X250px的文档，分辨率为72,背景内容为透明,便于
11、logo细节部分的制作。2.创立一个选区，（W:44px H:64px）填充为红色（CMYK:45、100、100、15）。选择好位置放置，然后使用横排文字工具，添加品牌中文 字名称“青楚家纺”字体选择禹卫书法行书简体，填充颜色为（CMYK:。、0、0、0）,中文字填充效果图展示如下：6This document is produced by free version of Print2Flash.Visit for more information图2-8中文字填充3.右击文字图层。选择栅格化文字。停留在文字图层，按住Ctrl 选中文字区域，回到图层一，将选区内容给删除，然后将文字图层删 除
12、。新建一个图层，使用多边形套索工具。利用标线辅助，绘制出“青”字的延伸然后进行填充，再使用多边形套索工具，将另一边修出轮廓，使其圆滑，标志图形绘制效果图展示如下：PS MiT 8S5 ISSSlW IE 3E BSM ElWl-t3 c Pl r Ift 械；g*加Hilt 基n流图2-9标志图形绘制4.使用横排文字工具，添加品牌英文字“QingChu”字体选择Blackoak Std,字体大小为36点，将其填充颜色为（CMYK:45、100、7This document is produced by free version of Print2Flash.Visit for more inf
13、ormation100、15),英文字低端与青字的延伸低端对齐，英文字名称添加效果图展示如下:图2-10英文字名称添加2.1.3标识网格规划图 在创建企业标志时利用标识网格规划，能够更好地规划标志，例如对空间和对各种元素之间的间距，让设计标志更为灵活从而增加亮 点，能够营造即和谐又美观的视觉感受，同时也给标志一个约束力度,图2-12所示:图2-12标识预留空间图2.1.4标识预留空间、标识最小比例限定标识设计预留空间，最主要的目的是为了能够更加清晰的传播品 牌的标志意义，其次不破坏标志的美观性，标志周围必须保留一个细8This document is produced by free vers
14、ion of Print2Flash.Visit for more information 小尺寸的空白面积，而保留的面积则叫做限制范围，该限制范围内不 允许出现任何元素、文字以及其它符号。最小比例限定，是为了在实际运用过程中。企业标志会出现模糊 不清楚的情况，企业标志的最小比例限定在此处比例效果图2-13中,最少标识的宽度不可小于10mmo最少10 MM图2-13标识最小比例限定2.1.5标志黑稿与反白效果制作标志的黑稿与反白效果是为了适应在各种环境与各种场合中使用本图标，但是在使用时必须严格按照范本设计规范使用。标志黑稿与反白效果图如2-14.2-15中,图2-15标志反白效果图图2-14
15、标志黑稿效果图2.1.6标志去色和反相效果标志的原色效果、去色效果、反相效果展示有着颜色的变化，适 合在一些特定的场合中使用，而使用时则要严格按照范本设计的规范9This document is produced by free version of Print2Flash.Visit for more information使用。其标志的原色、去色和反相效果图展示如下:标志原色效果图（图 2-16）,标志去色效果图（图2-17）,标志反相效果图（图2-18）原色 去色 艮相图2-16标志原色效果图 图2-17标志去色效果图 图2-18标志反相效果2.1.7中英文标准字方格规范在此标志中，标准
16、字对于整个设计空间、比例尺寸、字体大小、线条结构、以及高度都有着详细的规定，在各种环境与任何场合中使 用时，都必须要严格按照标准字方格规范使用，不得随意变换。图2-19英文标准字网格图JCkNJSCSEXID1:3-A 5-t7.8-4 1*0 11 12 13 M-l 16-17-IS 19 20 2l2.1.8英文标准字黑稿和反白效果之所以对标准字实行黑稿与反白的效果处理，是为了在一些特定 的场合中使用本图标，在使用时必须严格按照标准字方格规范使用，不得随意变换如图图2-20、图2-21所示：图2-20英文字黑稿10This document is produced by free ver
17、sion of Print2Flash.Visit for more information图2-21英文字反白2.1.9标识与标准字体组合范例横排效果：图2-22标识与标准字横排组合效果竖排效果：图2-23标识与标准字竖排组合效果注：在使用过程中，必须遵循各规范组合时，所设计的比例大小。实行比例缩放，决对不允许对标识做出任何的变换和移动，以及增加 其他元素。2.2.1标识禁用规范11This document is produced by free version of Print2Flash.Visit for more information 企业的标志是企业形象的核心，具有塑造企业的独
18、特形象、经营 理念、品牌文化等基础特质，展现品牌的文化内涵。更重要的是让社会大众认识企业品牌的象征性代表。因此，在整个企业标志设计中,LO GO的设计具有着非常重要的含义，在使用此标志的过程中一定要 严格按照标准规范使用。如图所示：注：标识标准色变化，不符合规范图2-24禁用标志I图2-25禁用标志II图2-26禁用标志III 图2-27禁用标志IV2.2名片设计名片是创建“青楚家纺”企业形象与店铺宣传的重要内容之一，在对设计名片设计时，根据企业的经营产品范围，以及按照名片标准 的设计规格，设计“青楚家纺”店铺名片，名片选择米黄色为主色调,而设计名片的理念则主要从精简、准确、明了这三个方面来设
19、计。12This document is produced by free version of Print2Flash.Visit for more information名片正面，展示主要的信息，在米黄色的背景上增加产品、花纹 装饰，增加设计感。明确了企业的经营范围，公司字体大小、颜色突 出，使得个人与店铺的信息更加醒目。名片正面效果图如图2-28所 示：图2-28名片正面图（尺寸90X 50mm）名片反面同样使用名片正面相同背景，统一整体风格。名片反面 显示经营范围，能快速让大家了解到店铺的经营范围。微信公众号二 维码放大置于显眼的地方，能让方便买家快捷了解店铺更多信息。名 片反面效果图
20、如图2-29所示：主营：床单被套、戡芯、抱枕图2-29名片反面图（尺寸90X50mm）2.3会员卡设计店铺会员制是当前非常流行的一种服务模式，能更好的体现店铺 服务质量，利用会员特权吸引顾客。13This document is produced by free version of Print2Flash.Visit for more information会员卡设计，正面使用乳白色作为底色，在背景上增加正红色矩 形，利用红色矩形突出白色字体VIP的字样，店铺LO GO运用到右上 方，会员卡的左下方放入微信公众号二维码，与LO GO相呼应构造整 体布局，会员卡正面效果如图2-30图2-30会
21、员卡正面(90 X 50mm)会员卡的反面，背景色与正面相同，会员卡反面的字体统一使用白色，使其在浅色背景中更为突出。会员卡反面如图2-31所示：1.持本卡可享受B 8析2.本卡为充值卡，享受会员优惠3此K最终解释权为本场所所有4.若卡遗失，损坏，请到本场所注销和补发图2-31会员卡反面(90 X 50mm)2.4礼品袋的设计礼品袋的设计礼品袋用于店铺盛放产品或者礼品的工具，同时也具有宣传品牌 的形象，性价比较高的广告媒体之一。礼品袋的底色使用白色，礼品 袋正反两面中间均放置品牌的LO GO,礼品袋的带子选择黑色为主色。效果图如图2-32、图2-33所示：14This document is
22、produced by free version of Print2Flash.Visit for more information图2-32礼品袋平铺效果图（长40cmX宽10cmX高50cm）图2-33礼品袋立体效果图2.5信封的设计信封的设计信封底色使用传统的暗黄色，信封右下角位置放置企业LO GO,以及写明品牌简要的相关信息。信封正面图效果图如图2-34所示:15This document is produced by free version of Print2Flash.Visit for more information图2-34信封正面图（尺寸220X 110mm）信封反面使用
23、倒三角做封口增加设计感，封口选用店铺的专用封 章，以此突出品牌，又不失简介大方。信封反面效果图如图2-35所 示：16This document is produced by free version of Print2Flash.Visit for more information第三章首页设计和实现3.1首页布局设计首页布局设计店铺的首页相当于店铺的流量中转站，店铺的整体形象也在首页 展示。因此首页的装修美观、协调非常重要。“青楚家纺”网铺的首页实现主要由店招、导航条、全屏海报、优惠券、轮播海报、宝贝展示、新品推荐、页尾几个部分组成，整个 布局使用暖色，首页背景采用豆沙色为底色。豆沙色使人
24、感到安全、温暖，能更好地体现店铺的经营理念。首页布局规划图如图3-1所示:1、店招(950*120)2、导航(950*30)3、全屏圣诞海报(1920*540)9店铺背景4、产品优惠券展示(950*300)9、店铺背景5、产品促销轮播海报(950*350)6、宝贝展示(950*2000)7、2018冬季新品(950*560)8、店铺尾页(950*200)图3-1首页布局规划图17This document is produced by free version of Print2Flash.Visit for more information首页布局整体效果图如图3-2所示:醵慰MM孑吏拿,H
25、*,志机 MIK*麻一 4岛品岛品图3-2首页布局整体效果图18This document is produced by free version of Print2Flash.Visit for more information3.2首页模块分解设计首页模块分解设计3.2.1店招设计本店铺的店招背景选用黄色作为底色，黄色让人感到温暖安心，符合店铺的经营理念。LO GO放置在左侧位置，LO GO的右侧放入店名，店招中间位置店铺的宣传语加以宣传店铺，用暗黄色斜纹渐变做点 缀，增加店招的整体设计感。产品放置在右侧，在产品的旁边输入收 藏的字样，使用圆角矩形工具增加一个圆角矩形颜色为豆沙色，突出 字
26、体，能让顾客快速收藏店铺。店招效果图如图3-3所示：原创品质.好家纺好舒适*岫炽 J图3-3店招效果图（950pxX 120px）本店的店招制作过程如下：1.打开P hotoshop软件，新建一张950 xl20px的文档。背景选 用白色（CMYK:。、0、0、0）,新建图层选用填充暗黄色（CMYK:25.45、62、0）,改变透明度为54%。2.使用矩形工具，绘制一个长方形。然后旋转成斜条，再复制两 个斜条图层。分别将透明度改为63%、45%,选好位置放置。将制作完 成的LO GO放置左侧位置，添加LO GO效果图展示如下：19This document is produced by fre
27、e version of Print2Flash.Visit for more information图3-4添加LO GO效果图3.使用横排文字工具，输入企业名称“青楚家纺”字体为禹卫书 法行书简体，增加文字“原创品质-好家纺-好舒适”字体为微软雅 黑，字体颜色为（CMYK:100、100、100、100）,放置店招中间位置。使用圆角矩形工具。绘制一个图形，然后在图形上面输入文字收藏的中英文的两个释意。添加文字效果图展示如下:图3-5添加文字效果图4.使用魔棒工具与钢笔工具将店铺产品抠出，放置在店招的宣传 语旁边位置。添加产品效果图展示如下：20This document is produc
28、ed by free version of Print2Flash.Visit for more informationP s 寸w饵 Es（i）（s ztscn?do3 wb（v）ar（vn h3ih）图3-6添加产品效果图3.2.2导航条设计导航条的设置是为了方便买家能快速的找到自己所需要购买的 宝贝，点击导航栏分类便能快速跳转到相应页面。“青楚家纺”导航条的设计主要以简单实用为设计理念。导航条 背景色选择红色（CMYK:45、100、100、15）,字体为白色（CMYK:。、0、0、0）,严格按照设计规则，深色的背景浅色的字，浅色的背景深色 的字为标准。当鼠标停放在所有首页、所有宝贝、冬
29、季新品等字体时 颜色会发生从白色变为黑色，还会出现一个淡黄色形状为圆角长方 形。导航条效果图如图3-7所示：首页秋冬新品抱枕床单被套差被清仓折扣图3-7导航条效果图（950pxX30px）3.2.3海报设计海报是作为向大众推销自家店铺的一种手段。当买家进入店铺首 页时，首先映入眼帘的就是海报。一张好的店铺海报能够更好地向买21This document is produced by free version of Print2Flash.Visit for more information 家传达品牌的形象及产品的卖点，通过海报的力量提高店铺的浏览 量，从而提高店铺的销量。由此看来店内海报设计
30、显得尤为重要。店内全屏海报展示区选用“年货节”促销海报，为迎合节日气氛,海报多选用红色，意为增添喜庆。再加上灯笼、剪纸小猪、祥云、鞭 炮、祥云、松树等具有中国元素的小点缀，明确主题。“年货节”字 体颜色选用黄色，颜色鲜艳，字体加大，突出重点。将宝贝放置于海 报右侧，宣传宝贝，吸引顾客眼球。“年货节”海报效果图如图3-8 所示：图3-8年货节海报效果图(1920pxX540px)本店的“圣诞节”海报制作过程如下：1.打开P hotoshop软件，新建一张1920X540P X的文档。背 景使用默认白色。3.新建图层，填充颜色为红色(CMYK:29.98、96、0),使用蒙版 使其颜色淡化。2.从
31、网上搜索图片素材，将所需要的宝贝图片使用魔棒工具与钢 笔工具抠出，并调整好位置放置。添加图片效果图展示如下：22This document is produced by free version of Print2Flash.Visit for more information图3-9添加图片效果图3.“年货节”字体使用方正韵体幼圆，使字体加粗从而突出字体。“青楚家纺”则使用禹卫书法行书简体。灯笼上的“年货节，全场包 邮”使用红底白字强调店铺优惠信息。添加文字效果图展示如下：图3-10添加文字效果图轮播海报I背景图片使用黄色。加上绿色植物点缀，让人感到舒 适，再用白色方块加以点缀突出文字信息，
32、增加设计感，白色与红色 对比，使海报具有活泼温馨感，不会显得海报很沉闷。海报从颜色搭23This document is produced by free version of Print2Flash.Visit for more information配效果出发，刺激买家视觉，从而吸引眼球。轮播海报效果图如图3-11所示：图3-11轮播海报效果图I(950pxX350px)轮播海报II背景颜色为嫩黄色，店铺产品放置在海报的右侧，模特图片放置在左侧，粉红色的图片与背景形成对比，海报中间叠加 放置两个白色的正方形，增强色彩对比，增加视觉效果，白色正方形 上方填加红色字体，字体使用魂心，文字加大，
33、中间放置一个麋鹿小 玩偶双脚踢开文字，字体本身就是不规则字体，再加上小麋鹿的点缀,海报整体排版给人一种轻松、搞怪、俏皮的感觉。轮播海报效果图如 图3-12所示：图3-12轮播海报效果图II(950pxX350px)轮播海报III背景运用淡粉色、白色、紫色相结合，中间放置一 个矩形框，增加设计感，选择店铺宝贝，大小不一的放置在左右两侧,This document is produced by free version of Print2Flash.Visit for more information填加红色字体放置在白色背景上方，海报运用的元素很和谐、自然,不会给人很奇怪的感觉。轮播海报效果图如
34、图3-13所示:图3-13轮播海报效果图III(950pxX350px)3.2.4主图设计宝贝主图相当于产品的脸面，产品的第一印象相当重要，这与店 铺的浏览量是直接挂钩的。宝贝主图3-14,LO GO放置在左上角宣传品牌，LO GO按标准规范 使用。增加一个红色的矩形框放置在右上方，将产品的宣传语放于其 中，增加视觉效果。下方用红色为底色，用雪地的素材叠放点缀，“欢 情圣诞”选用黄色突出活动主题，用白色的框突出产品的优惠信息。主图如图3-14、图3-15、图3-16、图3-27、图3-18所示:图 3-14 主图 I(800pxX800px)图 3-15 主图 II(800pxX800px)2
35、5This document is produced by free version of Print2Flash.Visit for more information图 3-16 主图 III(800pxX 800px)图 3-17 主图 IV(800pxX800px)图 3-18 主图 V(800pxX800px)3.2.5商品展示设计 商品展小效果图如图3-19所小:This document is produced by free version of Print2Flash.Visit for more information图3-19商品展示效果图27This document i
36、s produced by free version of Print2Flash.Visit for more information3.3首页效果实现首页效果实现3.3.1店招效果实现1.在店铺首页点击装修此页面、选择P C端装修页面（图3-20、图 3-21）装0时员而图3-20店铺首页装修图1南同宝浦S MASW 回曰S：专亡时中心 夺I拜用|1 U 品WWTS|就i TSiVES仁 辛贝刊g汶1 心顿sjirrF!，炫2018-1 1 S:1bl3 4黑4，0 ki/i i后霍2泱3018-1124 13.19-13 义路图3-21店铺P C端装修页面图2.编辑店招（图3-22）f旺
37、浦图3-22 P C编辑店招图3.选择图片和保存图片、预览和发布（图3-23、图3-24）This document is produced by free version of Print2Flash.Visit for more information图3-23选择图片效果图图3-24保存图片效果图4.店招效果实现图（图3-25）淘宝网 店铺Tdobdoxom I若逋七青荤家纺冕也?用理吸9 该店思巨主史剪迁顷:,，.原创品质好家纺好舒适搜索I叠-攻离店铺 用手机逛本店图3-25店招效果实现图3.3.2导航条效果实现1.选择编辑导航条（图3 26）以上为页头区域所有分类 首页 秋冬新品 所
38、有宝贝 抱枕 床单祓套 盖被 清仓折扣+湖眇图3-26编辑导航条图2.选择导航设置、代码设定（图3-27、图3-28）29This document is produced by free version of Print2Flash.Visit for more information图3-27导航设置图图3-28代码设定图3.导航条效果实现图（图3-29）沔座网店铺 TA*iMa rnm店1：.W楚家纺.累.计信用呼价.0.原创品质好家纺-好舒适1阴有分类首页秋冬新品阴有宝见抱枕床单被套盖祯清仓折扣.、图3-29导航条效果实现30This document is produced by f
39、ree version of Print2Flash.Visit for more information3.3.3“年货节”全屏海报效果实现1.选择编辑“年货节”全屏海报（图3-30）原创品质好家纺好舒适府有分 首页 秋冬新品 折有宝贝 抱枕 床单被套 盖祝 清仓折扣图3-30“年货节”全屏海报图2.选择图片地址、链接地址（图3-31、图3-32）图3-31图片地址图宽囹模块使用小贴士：您可以通过囹片+文学的方式引导用点击囹片跳转到您指定的链接。通常用于有店铺 的最新单品、箱彩活动或优惠推茬。图片地址（宽1920,高不大于甜搔地址：540）https:/ /item.taobao.coim/
40、iten U自定宾页面 宝只分类,宝贝一请迭择要添加的宝贝所有分类 v 关键字 伯格 E3广，音楚家纺可爱心形沙发客厅办公室靠枕床头靠背汽车靠垫1400.00青楚家纺貌棉清新实用床上四件套1700.00青楚家纺鹅皴蔽95蒙古捌绒串串皱扭花冬季保瞠单双入学生酒店被子11000.00JL等辞京.场in脚中壬S0ii汶暇t容厅di、必史紊就1庄地秀晋写M堂抱一 1/3:11取消图3-32链接地址图3.“年货节”全屏海报效果实现图（图3-33）31This document is produced by free version of Print2Flash.Visit for more inform
41、ation图3-33 双一全屏海报效果实现图3.3.4图片轮播效果实现1.选择编辑图片轮播（图3-34）图3-34编辑图片轮播图2.选择图片地址、链接地址（图3-35）囹片轮播 X内容设置显示设置使用帮助图片地址；笛榜地址：操作；https:/ 回/ 日/ Xhttps:/ 回/ x取消添加图3 35图片地址设置图3.图片轮播效果实现图（图3-36）32This document is produced by free version of Print2Flash.Visit for more information图3-36图片轮播效果实现图3.3.5宝贝主图效果实现1.在卖家中心选择点击出
42、售中的宝贝，选择编辑宝贝（图3-37）共有出样中宝贝口祭i3录 服务圭只A Ao全选宝贝名称总销垦握作更多曼作制除1 穗 11 创建微海报u青基家纺纯棹简单生铮纹四脂2苞1750.00600020:29图3-37编辑宝贝图2.在图片空间中选择五张宝贝图片，其中一张作为宝贝主图（图3-38)基础信息 销售信息 图文描述 支付信息 物流信息 售后服务王图瞰雎图片宝贝图片雌宝贝姆.电述尊敏的用户.图片空商版本已3璀公测.臆蟾诚瞳.点图3-38图片地址图3.宝贝主图效果实现图（图3-39）33This document is produced by free version of Print2Flas
43、h.Visit for more information180 0-50 1750 19；束 玄日勇 右：棉融生活龄四件套价格 1750.00o o累计评论交易成功翻谖 湖南长沙至湖南长沙快递免运墨*&小时内发货譬分3 Li 8版适用.床 1.2m（4英尺）床 L5m（5英尺）珠 1.8m S英尺）底 尺寸数里 1+件（库存6刑件）四购买虹加入潮阵收蹴宝贝 H分享承诺 Q不支持7天无理由支付，集分宝图3-39宝贝主图动态效果实现图3.3.6商品展示效果实现1.选择编辑商品展示（图3-40）图3-40编辑商品展小图2.选择电脑端显示设置商品为一行展示3个宝贝（图3-41）34This docum
44、ent is produced by free version of Print2Flash.Visit for more information宝悠可以谩过系统自动推专或者手动送择皓泰28个店t衲宝贝，通食可以用于蜘肖诵吕、信赖上梁的两品推专等场尾使用郡助士田仁芳电械端显示设置思示标短:不显示 显示展示方式;_行展示4个宝贝是否昆示:/折扣价 最近3。天笛倦救据宰计评价耕 评论宝珀折扣们格我示与王18潘保持一熟保存取消图3-41电脑端显示图3.商品展示效果实现图（图3-42）图3-42商品展示效果实现图35This document is produced by free version o
45、f Print2Flash.Visit for more information第四章详情页设计与实现4.1详情页的布局设计详情页的布局设计详情页设计主要由版头、产品参数、细节展示、产品展示、替换 方法、卖家承诺几个部分组成。“青楚家纺”产品的详情页选用淡黄 色为背景颜色，字体则主要选择黑色，详情页每一个分块标题，都运 用浅红色的椭圆作装饰，从而突出标题。产品详情页排版主要以图文 排版，整体美观、整齐、清晰、和谐。详情页布局图如图4-1所示：图4T详情页布局图（宽750 px）36This document is produced by free version ofPrint2Flash.V
46、isit for more information4.2详情页模块分解设计4.2.1版头设计版头设计主要是为了让顾客了解产的风格。LO GO放置与左上方,使用直排文字工具加入产品名称，再增加文字广告“暖到您心房”用 红色点缀，突出文字，版头设计整体设计简洁、美观。版头效果图如图4-2所示:图4-2版头效果图（宽750 px）4.2.2产品参数展示产品参数说明主要是为了让顾客了解产品的细节信息、填充物、面料、填充量、产品工艺、洗涤说明、裁剪工艺、细节展示、设计理 念、产品个各部分的出处、不同尺寸的产品适合什么样的床，关于成 品的面料文字描述解释。产品展示效果图如图4-3所示：37This doc
47、ument is produced by free version ofPrint2Flash.Visit for more informationtaaaozxkn 件&S 含 g afei&n.rank背心尺寸zawao件舍尺寸xaax95%吊吊绒绒中珍品洁净无菌，温暖舒适散券痢本身含有异色缄，青楚家坊不使用高浓度漂白割来掩饰，保留羽醒原色w2*Fi*fci.c.wwi.-sriM&atB.Svffia.v?-*eftWib.s-NWTHM*T83.tiflsat,瞄FBI岫.图4-3产品展示效果图（宽750 px）This document is produced by free ver
48、sion of Print2Flash.Visit for more information4.2.3细节展示细节展示说明主要是让顾客了解产品的基本信息，细节描述产品设计细节，突出产品的卖点。产品说明效果图如图4-4所示：图4-4产品细节展示效果图（宽750 px）4.2.4产品展小产品展示主要是让顾客了解产品的颜色、样式。厚度适用季节说明能够更好的帮助顾客选择产品。产品细节效果图如图4-5所示：39This document is produced by free version of Print2Flash.Visit for more information图4-5产品展示效果图（宽75
49、0px）4.2.5替换方法展示 替换方法展示主要是让部分不会替换的产品顾客，能快捷的使用产品。替换方法展小效果图如图4-6所小:图4-6替换方法展示效果图（宽750px）4.2.6卖家承诺展示关于服务质量主要是让顾客了解购买的注意事项、退换货的方法、发货时间及物流等。卖家承诺效果图如图4-7所示：40This document is produced by free version of Print2Flash.Visit for more information4宰M关于品牌,链的原创品牌，所有产品从而利送序six$!a节剿僵携力为顾软供最好的蚌陌品麻矢于商品购实前请务缶牙蝴闭读产品ais.
50、a.瑜诀商更岸有情炙，尺寸找戚e.描述*1未提政.谓奁购其丽剧8询闰赛楚，如如叫，时内未伺款，木GE将自沛取消交铝X于发JS正母111猊在粕下仲歌后2小町内S3.亦府勒排憎况含由H旺客取ilKBE系.入唐育作榭*公司君曲箱快哺.P C诵哓昭10凤快谟.Kt认怯圉为制璃快说一.矢于通贻收留摘西时法博查由货，枕头不郴*在世愉速中莉ft气即象，本店支斧7天无JF由退季货，收研产ffl后如无质问跳，EJ=R-Q理，包.KKH后影响二次WHS.TKE7X退拳变.图4-7卖家承诺效果图（宽750 px）4.3详情页效果实现详情页效果实现第一：选择编辑宝贝（图4-8）青楚家瞧绒被g原古鹅绒串率厢花冬 单双入