京东店铺装修与设计从入门到精通（下篇共上下2篇）

电脑端首页设计第6章京东店铺装修与设计从入门到精通（视频指导版）店铺首页店铺店招的设计与制作店铺导航的设计与制作商品分类的设计与制作6.16.26.36.4图片轮播的设计与制作6.5商品推荐的设计与制作6.6实战训练6.7拓展延伸6.8思考练习6.96.1.1首页设计的注意事项店招的设计突显最新信息：客户都是很大意的，所以卖家不要妄想消费者能在繁杂的网页中找到店铺的优惠信息，这时店招就变得尤为重要，在店招中将促销信息体现出来，这样无论消费者跳转到哪个页面，只要还在店铺中就能看到促销信息。导航条设计彰显店铺个性：导航条主要对商品的信息起导航作用，默认的内容包括“所有商品”“首页”“店铺动态”等，卖家可根据自己店铺的特殊情况添加适合的导航按钮，如店铺刚上新冬装，即可以添加“冬装上新”导航。商品分类展现商品种类细分：主要对促销或是上新商品进行简单分类，其方式与导航条类似，在该区域不但可以添加优惠信息，还能对店铺的商品进行简单分类介绍，使客户对店铺有简单的认识。6.1.1首页设计的注意事项图片轮播设计：轮播海报多用于传递最新的商品信息，店铺最新优惠活动及店铺理念等。一个完美的店铺海报不仅可以彰显店铺的风格，还可以向消费者传递出最新的商品信息，最新优惠活动等，可谓是一个功能齐全的首页配件。商品推荐设计要多角度突显商品信息：商品陈列展示区的设计可以是多种多样的。需要注意的是，商品展示的时候应该尽量避免出现重复的商品，设计人员不能按照自己的喜好觉得哪款商品，就多次展示同款商品，需要合理展示。页尾与店招承上启下：页尾属于首页的结尾部分，在页尾中不但需要对首页进行总结，还可添加分类信息，使其与店招和导航条对应，这样当需要重新进行浏览时才会显得更加方便。6.1.2店铺首页布局的要点

店铺风格一定程度上影响着店铺的布局方式，因此选择合适的店铺风格是店铺布局的前提，而店铺风格则受品牌文化、商品信息、目标消费者、市场环境和季节等因素影响，在选择店铺风格时必须考虑这些因素，这样风格才能和商品统一。店铺的活动和优惠信息，要放在非常重要的位置，如轮播海报或活动导航。这些板块中的内容设计要清晰、一目了然，并且可读性要强。在商品推荐模块中推荐的爆款或新款不宜过多，此时可通过商品分类或商品搜索将客户流量引至相应的分类页面中。6.1.2店铺首页布局的要点关注和客服等互动性版面是卖家与顾客互动的销售利器，这些版面可以提升客户忠诚度，提高二次购买率，因此是必不可少的。制作搜索或商品分类模块时，需要将商品分门别类，详细地列举出商品类目，将有助于顾客搜索或很快找到喜欢的类目及商品。结构和商品系列要清晰明了，布局要错落有致，列表和图文搭配，减少客户的视觉疲劳。店铺首页店铺店招的设计与制作店铺导航的设计与制作商品分类的设计与制作6.16.26.36.4图片轮播的设计与制作6.5商品推荐的设计与制作6.6实战训练6.7拓展延伸6.8思考练习6.96.2.1店招的设计原则店招设计除了突显最新信息，方便买家查看外，还应注重店铺商品的推广，让买家留下印象。因此，要求店招在设计上具有新颖别致、易于传播的特点，这就必须遵循两个基本的原则：一是品牌形象的植入；二是抓住商品定位。6.2.2确定店招风格定位商品品牌和商品类型后，还需要确定店招风格。店招的风格引导着店铺的风格，而店铺的风格很大程度上取决于店铺所经营的商品。一般而言，店铺应保证店招、商品、店铺风格的统一性。6.2.3制作店铺logo新建图像文件绘制基础形状步骤02步骤016.2.3制作店铺logo设置描边参数绘制嘴巴步骤04步骤03绘制眼睛形状步骤056.2.3制作店铺logo绘制耳朵和眼睛绘制其他区域步骤07步骤06绘制胡子步骤086.2.3制作店铺logo绘制纹理输入文字步骤10步骤096.2.3制作店铺logo盖印图像调整盖印图像的大小步骤12步骤116.2.3制作店铺logo栅格化文字擦除多余文字部分步骤14步骤136.2.3制作店铺logo设置投影参数设置描边参数步骤16步骤156.2.3制作店铺logo查看添加描边和投影后的效果链接图层并查看完成后的效果步骤18步骤176.2.4制作店招新建图像文件添加渐变效果步骤02步骤016.2.4制作店招添加参考线添加其他参考线步骤04步骤036.2.4制作店招添加背景素材绘制虚线步骤06步骤05添加文字步骤076.2.4制作店招绘制圆角矩形步骤08设置图层样式步骤096.2.4制作店招设置投影步骤10输入收藏文字步骤116.2.4制作店招输入文字步骤12添加店招素材步骤136.2.4制作店招输入吐司说明性文字步骤14输入其他文字步骤156.2.4制作店招查看完成后的效果步骤16店铺首页店铺店招的设计与制作店铺导航的设计与制作商品分类的设计与制作6.16.26.36.4图片轮播的设计与制作6.5商品推荐的设计与制作6.6实战训练6.7拓展延伸6.8思考练习6.96.3.1基础导航条的设置方法打开“店铺装修”页面，单击右侧的“导航条”模块，打开“店铺导航”面板，单击“基础”选项卡，在下方的面板中设置“背景颜色”和“字体颜色”，单击“添加分类”按钮，在弹出的店内分类和自定义分类两种样式。6.3.2自定义导航条的设计要点保持连贯性和一致性：导航条的风格和内容要与店招和图片轮播等色调保持一致，不要对色彩进行过多的差异化处理，否则会产生突兀的感觉，在导航内容的选择上，要与店铺的商品保持连贯性，而不能随意进行删减。设计清晰易懂的展现：在导航条的内容上要清晰易懂，而不是简单商品类别的罗列。在商品类别的表现上要直击要点，而不是过多的分类。在其中要将促销内容或活动详情进行展现。6.3.3制作导航添加导航背景添加导航文字步骤02步骤016.3.3制作导航绘制矩形框查看完成后的效果步骤04步骤03店铺首页店铺店招的设计与制作店铺导航的设计与制作商品分类的设计与制作6.16.26.36.4图片轮播的设计与制作6.5商品推荐的设计与制作6.6实战训练6.7拓展延伸6.8思考练习6.96.4.1优惠券的设计要点优惠券的使用范围：明确使用的店铺，以及使用的方式是全店通用，还是店内的单款、新品或者某系列商品上使用，以此限定消费的对象，起到引导店铺流量走向的作用。优惠券的使用条件：如全场购物满168元可以使用10元优惠券、满288元可以使用20元优惠券。优惠券的使用时间限制：一般情况下，如果店铺是短期推广，应当限定使用日期，一般设置优惠券的到期时间以接近消费周期为佳，该周期一般为1个月，但是若是做促销活动那么优惠券的使用周期也将是对应的促销天数。限制使用时间可以让顾客产生过期浪费的心理，可以提高顾客的使用率。设置使用张数限制：如“每笔订单限用一张优惠券”，可以限制折上折的情况出现。6.4.2商品分类的设计要点若店铺已经有装修风格，商品分类模块的设计必须从该店铺的风格出发。商品分类中，分类名称必不可少，可以是中文，也可以是英文。可以根据需要添加分类图标，因为添加分类图标后更易于买家查看。横向商品分类的图片宽度尺寸应控制在950像素以内；纵向商品分类的图片宽度尺寸不宜超过160像素，若超过该宽度，当显示器分辨率小于或等于1024×768像素时，将导致商品分类栏右边的商品列表下沉，从而影响店铺的美观。商品分类不宜太长，可根据商品分类添加子分类，便于买家浏览。6.4.3制作商品分类图新建图像文件添加渐变效果步骤02步骤016.4.3制作商品分类图设置图案叠加添加图案后的效果步骤04步骤036.4.3制作商品分类图绘制形状添加其他形状步骤06步骤056.4.3制作商品分类图输入文字添加投影步骤08步骤076.4.3制作商品分类图绘制红色正圆添加描边步骤10步骤096.4.3制作商品分类图绘制其他圆输入文字并绘制直线步骤12步骤116.4.3制作商品分类图添加矢量蒙版栅格化图层步骤14步骤13输入“元”文字步骤156.4.3制作商品分类图设置投影参数拷贝图层样式步骤17步骤166.4.3制作商品分类图设置内阴影参数完成单个优惠券绘制步骤19步骤186.4.3制作商品分类图查看优惠券效果绘制圆角矩形步骤21步骤206.4.3制作商品分类图添加素材输入文字步骤23步骤226.4.3制作商品分类图查看完成后的效果步骤24店铺首页店铺店招的设计与制作店铺导航的设计与制作商品分类的设计与制作6.16.26.36.4图片轮播的设计与制作6.5商品推荐的设计与制作6.6实战训练6.7拓展延伸6.8思考练习6.96.5.1图片轮播的设计要点主题构图配色6.5.2制作首张图片轮播图新建图像文件添加素材图像步骤02步骤016.5.2制作首张图片轮播图创建图层蒙版步骤036.5.2制作首张图片轮播图绘制矩形并新建图层步骤046.5.2制作首张图片轮播图添加草坪效果步骤05添加坚果素材步骤066.5.2制作首张图片轮播图创建阴影步骤076.5.2制作首张图片轮播图输入文字步骤08复制文字并更改颜色步骤096.5.2制作首张图片轮播图查看完成后的效果步骤106.5.3制作第2张图片轮播图添加背景步骤01设置投影参数步骤026.5.3制作第2张图片轮播图添加海浪纹理图步骤03绘制波纹形状步骤046.5.3制作第2张图片轮播图绘制白色纹理步骤05创建剪贴蒙版后的效果步骤066.5.3制作第2张图片轮播图绘制椭圆步骤07添加素材图像步骤086.5.3制作第2张图片轮播图绘制椭圆步骤09设置描边参数步骤106.5.3制作第2张图片轮播图设置投影参数步骤11输入“夏日大促”文字步骤126.5.3制作第2张图片轮播图查看完成后的效果步骤13店铺首页店铺店招的设计与制作店铺导航的设计与制作商品分类的设计与制作6.16.26.36.4图片轮播的设计与制作6.5商品推荐的设计与制作6.6实战训练6.7拓展延伸6.8思考练习6.96.6.1商品推荐的设计要点商品推荐中每一个商品的名称定义要全面、准确，不能过于复杂或是过于简单，以能体现商品名字和特点的名称为最佳。商品促销展示区中的每一个单品都是吸引客户点击的重要图片，除了选择店铺中热销商品外，还可以选择部分新品、有特色商品，进而达到吸引客户点击的目的。在设计过程中要保留商品拍摄中的真实性，并且商品要足够，因为要有足够多的商品数量来支持上架和推荐，同时也更便于模块设计。6.6.2商品推荐的设计要点添加背景添加背景素材并添加参考线步骤02步骤016.6.2商品推荐的设计要点绘制圆角矩形设置描边参数步骤04步骤036.6.2商品推荐的设计要点输入文字设置文字描边参数步骤06步骤056.6.2商品推荐的设计要点绘制圆角矩形添加素材步骤08步骤07绘制其他圆角矩形步骤096.6.2商品推荐的设计要点查看完成后的效果步骤10店铺首页店铺店招的设计与制作店铺导航的设计与制作商品分类的设计与制作6.16.26.36.4图片轮播的设计与制作6.5商品推荐的设计与制作6.6实战训练6.7拓展延伸6.8思考练习6.9实战训练实训要求1本例将制作女包店铺首页，在制作时先制作店招，再对轮播图和商品推荐进行设计，使整个画面简约、美观。实训分析2本店铺主要针对时尚女包，在页面的制作上主要采用时尚简约的方式进行展现，并通过各类模特对商品的展现，体现女包的时尚感，完成后通过错落有致的排序与布局，增强店铺的时尚感。实战训练操作思路3logo是制作店招的第一步，制作带有眼睛图像的店招，突出店铺的时尚感。0102店招是查看店铺的重点，本例主要采用左中右布局的样式，将制作好的logo排列到店招中，在中间输入店铺的名称，在右侧输入互动内容，使店招效果更加美观。03在店招的下方制作导航，本导航采用深灰色为底色，通过输入文字的方式，将店铺中的女包样式列表罗列出来。实战训练操作思路3在海报的制作上，先插入需要体现的女包图像，并在右侧输入说明性的文字，使整个画面时尚、简单。0405海报的下方为商品推荐模块，该模块主要分为3个部分，最上方部分为商品的海报展示区，该区域不但包含了商品展现效果，还罗列了说明性文字，使整个画面简洁、明快。在下方为单个商品的展示，并在左侧添加文字，使简单的展示都具有时尚感。最下方为单个商品的展示，不但有说明性文字，还对商品进行了展现。店铺首页店铺店招的设计与制作店铺导航的设计与制作商品分类的设计与制作6.16.26.36.4图片轮播的设计与制作6.5商品推荐的设计与制作6.6实战训练6.7拓展延伸6.8思考练习6.91.怎么选择Logo素材在选择logo素材时可先对店铺进行定位，确定店铺的主要类型，再确定店铺的名称。确定店铺的基本信息后，可根据这些要求进行Logo素材的收集，收集一定量的素材后，可对素材中的优点进行罗列，再根据需要进行Logo的设计与制作。2.认识京东首页的设计技巧在设计首页时，应转换角度，将自己当做客户设身处地的进行思考。在浏览一个店铺时，精致的画面更容易引起客户的注意，从而对商品产生购买欲望。此外，页面中的新品推荐、店铺热销和左侧分类等栏目，都需要充分的利用起来，从每一个细节出发，创造最大的展示价值。店铺首页店铺店招的设计与制作店铺导航的设计与制作商品分类的设计与制作6.16.26.36.4图片轮播的设计与制作6.5商品推荐的设计与制作6.6实战训练6.7拓展延伸6.8思考练习6.9思考练习（1）本练习将制作洗衣机店铺的海报，洗衣机店铺的商品海报应该展示不同洗衣机的性能，通过性价比吸引客户。在制作时为了体现简约性和实用性，不用添加过多的装饰。思考练习（2）本例的商品促销展示模块只是首页中的一个板块，主要用于介绍12月新品，在制作该板块时，先要制作横幅海报，再在海报的下方分别制作展示的新品洗衣机。学业进步京东店铺装修与设计从入门到精通（视频指导版）海量图书方便查询免费申请样书下载配套资源优惠购书成为作者更多样书申请和资源下载需求，请登录人邮教育社区（)囊括各大品类，您想要的应有尽有教师免费申请样书，我们将安排快递迅速送达教学视频、PPT课件、教学案例、习题答案、模拟试卷等丰富资源免费下载教师可以申请最低折扣学生直接优惠购买图书欢迎写文章／投稿，我们强大的编辑团队将为您提供专业和高效的编辑出版服务电脑端详情页设计第7章京东店铺装修与设计从入门到精通（视频指导版）商品详情页焦点图的制作商品卖点图的制作商品信息展示图的制作7.17.27.37.4商品细节图的制作7.5实战训练7.6拓展延伸7.7思考练习7.87.1.1商品详情页的设计要点引发兴趣、激发潜在需求：在商品详情页面可以利用创意性的焦点图来吸引顾客眼球，兴趣点可以是产品的销量优势、产品的功能特点、产品的目标消费群、营销等，激发顾客的潜在需求。赢得消费者信任：赢得消费者信任可从商品细节的完善、买家痛点和产品卖点的挖掘、同类商品对比、第三方评价、品牌附加值、消费者情感、塑造拥有后的感觉等方面入手。替顾客做决定：通过品牌介绍、提高客单价、数量有限、库存紧张、预购从速等手段号召犹豫不决的顾客快速下单。若浏览整个描述页后仍然没有下单，可通过相关推荐模块进行商品推荐。7.1.2商品详情页的设计思路与准备工作商品详情页是商品展示的重中之重，在设计时要注意，详情页的内容不是要告诉顾客本产品该如何使用，而是要说明该产品在什么情况下使用会产生怎样的效果。商品详情页是提高转化率的关键性因素，好的描述内容不但能激发顾客的消费欲望，树立顾客对店铺的信任感，还能打消顾客的消费疑虑，促使顾客下单。7.1.3商品详情页应遵循的原则逻辑亲切真实氛围专业品牌图片质量商品详情页焦点图的制作商品卖点图的制作商品信息展示图的制作7.17.27.37.4商品细节图的制作7.5实战训练7.6拓展延伸7.7思考练习7.87.2.1焦点图的设计要点详情页焦点设计一般有2个目的：明确产品主体，突出产品优势；承上启下，做好产品信息的过渡。基本上，所有的卖点都是俗气的，如何点出自己产品的优势，在文案与图片的设计上要讲究创意，通过突出产品的特色以及放大产品的优势，或通过优劣产品进行对比，将产品的优势展现出来，则变得尤为重要。7.2.2制作焦点图新建图像文件添加渐变效果步骤02步骤017.2.2制作焦点图设置图案叠加绘制云朵步骤04步骤03绘制绿色草地步骤057.2.2制作焦点图绘制椭圆绘制形状步骤07步骤06设置投影步骤087.2.2制作焦点图调整位置设置描边步骤10步骤09绘制投影步骤117.2.2制作焦点图输入文字负责文字并修改文字颜色步骤13步骤12添加素材步骤14商品详情页焦点图的制作商品卖点图的制作商品信息展示图的制作7.17.27.37.4商品细节图的制作7.5实战训练7.6拓展延伸7.7思考练习7.87.3.1卖点的特征卖点独特，共性的产品特性你第一个说出来，就能影响购买，如农夫山泉的“有点甜”。有足够的说服力，能打动顾客购买，就要求卖点与消费者核心利益息息相关，如空调的“变频”与“回流”，面膜的抗衰美白补水的功效。长期传播的价值及品牌辨识度。7.3.2卖点提炼的原则与方法FAB法则：F指属性（Feature），即产品的特点和属性；A是优点或优势（advantage），即自己与竞争对手的不同之处；B是客户利益与价值（benefit），指这一特点或优点带给顾客的利益，如在购买减肥产品时，产品的卖点图中标明1个月无效退货，既可说明产品的卖点，又能体现顾客的利益。从产品概念提炼：一个完整的产品概念是立体的，包括核心产品、形式产品、延伸产品三个层次。核心产品是指产品使用价值；形式产品是指产品的外在表观，如原料、技术、外型、品质、重量、体积、视觉、手感、包装等；延伸产品是指产品的附加价值，如服务、承诺、身份、荣誉等。从更高层次的需求提炼：从情感、时尚、热点、公益、梦想等更高级别的需求角度提炼卖点。若以情感为诉求，可以适当加深人们对产品的好感。7.3.3制作卖点图新建图像文件添加下午茶图片步骤02步骤01输入文字步骤037.3.3制作卖点图绘制直线添加图片步骤05步骤04输入文字步骤067.3.3制作卖点图绘制矩形再次绘制矩形步骤08步骤077.3.3制作卖点图设置投影参数输入字体步骤10步骤097.3.3制作卖点图绘制形状添加剪贴蒙版步骤12步骤11绘制半圆形状步骤137.3.3制作卖点图添加渐变效果绘制矩形选框并旋转步骤15步骤14绘制其他矩形选区步骤167.3.3制作卖点图使用相同的方法输入文字和其他形状绘制形状并填充渐变步骤18步骤177.3.3制作卖点图绘制正圆添加素材步骤20步骤19输入文字步骤217.3.3制作卖点图添加树叶添加蓝莓效果步骤23步骤22绘制形状并添加果干步骤24商品详情页焦点图的制作商品卖点图的制作商品信息展示图的制作7.17.27.37.4商品细节图的制作7.5实战训练7.6拓展延伸7.7思考练习7.87.4.1商品参数的常用表达方式商品参数的直接输入：自由排列输入的商品参数，一般需要使用文本框来统一文本的行间距。通栏排参数：使用文本框直接输入参数，添加形状或线条来修饰参数模块；使用商品参数表输入参数，商品参数表可以比较全面的反映出商品的特性、功能和规格等，在尺码方面应用的尤为广泛。商品参数与商品图片的自由组合：可以直接将商品的参数输入到商品图片上，也可以将商品参数细化到不同的商品图片中进行显示。参数与商品两栏排：当商品参数比较少时，可通过左表右图或左图右表的方式排列商品参数模块。对于有尺寸规格的产品，还可在商品图上添加尺寸标注。7.4.2制作信息展示图绘制形状设置投影参数步骤02步骤01绘制虚线步骤037.4.2制作信息展示图输入文字绘制矩形并添加素材步骤05步骤04查看完成后的效果步骤06商品详情页焦点图的制作商品卖点图的制作商品信息展示图的制作7.17.27.37.4商品细节图的制作7.5实战训练7.6拓展延伸7.7思考练习7.87.5.1细节图的展示方法在制作细节图时，细节照片的选择对于细节的展示十分重要，细节照片一定要清晰、明了、尽量避免偏色。此外，还要逻辑性强，做到有条不紊，才能带着买家按照你的思路，完整的浏览一遍商品详情。细节图的样式一般分为两种，一种是同时放置商品或细节图，将细节图指向商品的具体位置；还有一种就是单独的进行细节的展示，在排列布局上，可根据个人喜好与店铺的整体风格进行设计。7.5.2制作细节图新建图像文件添加渐变效果步骤02步骤017.5.2制作细节图添加素材添加文字步骤04步骤03添加树叶步骤057.5.2制作细节图图案叠加添加图片步骤07步骤06绘制矩形步骤087.5.2制作细节图添加图像输入文字步骤10步骤09选择形状步骤117.5.2制作细节图绘制月亮绘制太阳步骤13步骤12添加树叶步骤14商品详情页焦点图的制作商品卖点图的制作商品信息展示图的制作7.17.27.37.4商品细节图的制作7.5实战训练7.6拓展延伸7.7思考练习7.8实战训练实训要求1本例将制作女包详情页，在制作时先制作焦点图，再对商品参数、色彩选择、商品亮点以及细节展示进行设计，使整个画面简约、美观。实训分析2时尚小包是夏天必备的产品，在制作该详情页时，可将其分为5个部分，分别是焦点图、商品参数、色彩选择、商品亮点以及细节展示。在制作时应该将小包的百搭体现出来，这里通过不同的人物穿戴搭配，让时尚和百搭体现出来，并通过细节的展示让产品的品质得到展现。实战训练操作思路3焦点图为女包详情页的第一个页面，在制作该页面时，需要从产品的形状进行构图、以产品的颜色来搭配背景的颜色，并以“时尚百搭小包”文案从百搭的角度打动消费。0102产品参数主要用于展现女包的商品信息，在展现过程中，先制作灰色底纹，再在上方输入参数文字，并采用左右对齐的方式进行文字的排版。03色彩选择主要用于展现女包的不同颜色，本例中主要分为3种颜色，分别是灰色、黑色和焦糖色，在制作时，先输入对应的色彩位置，并添加素材。实战训练操作思路3商品亮点主要是通过模特的展现体现商品的展现效果，本例中主要通过3张图片进行体现，其中左、中图片分别为大图展现，而右侧图片则为小图，在其上方通过文字的说明体现女包的时尚感。0405在制作细节图时，先对女包单个机芯展现，再通过将包的细节放大，来展示包的制作工艺、材质、五金件等内容，完成后添加文案增加说服力。商品详情页焦点图的制作商品卖点图的制作商品信息展示图的制作7.17.27.37.4商品细节图的制作7.5实战训练7.6拓展延伸7.7思考练习7.81.抓住详情页设计的重点在设计详情页时，店家往往会通过各种方式来加强客户的购买欲望，如宣传品牌、皮质、优化服务、提高性价比、展示差异化优势、热销盛况、展示好评等。然而针对不同的商品，在详情页中需要呈现的重点也是有所不同的。2.分析客户流失原因不是消费者需要的商品：若该商品不是消费者需要的商品，那么就需要进行关联营销，在这个商品页面里推荐其他商品，促进消费者二次购买的可能性，以提高每笔订单的成交单价。对店铺的整体服务没有概念：当消费者觉得商品还可以的时候，下一步就会考虑商品的品质。看品质不能只看详情页，还需要对店铺总体实力有一个比较明确的把握。这时最能体现店铺实力的就是店铺首页，所以首页的制作也至关重要。价格不合适：通常这个时候消费者对商品已产生认同，已经想买，就是觉得价格偏高。这时使该详情页和活动页面相联系，传递活动信息，就能将消费者的注意力集中到活动上。商品详情页焦点图的制作商品卖点图的制作商品信息展示图的制作7.17.27.37.4商品细节图的制作7.5实战训练7.6拓展延伸7.7思考练习7.8思考练习（1）利用收集的素材制作登山包的详情页。根据登山包的风格，将橄榄色和深绿色作为店铺的颜色，给人以户外登山的清新感，在设计上主要体现旅行包的功能性和实用性。（2）利用收集的素材制作灯具详情页。根据灯具的风格，将咖啡色和白色作为店铺的颜色，给人以简约、时尚感。在制作上，采用了焦点图、场景展示、商品情景、适用风格、信息展示、细节展示等展现方法。学业进步京东店铺装修与设计从入门到精通（视频指导版）海量图书方便查询免费申请样书下载配套资源优惠购书成为作者更多样书申请和资源下载需求，请登录人邮教育社区（)囊括各大品类，您想要的应有尽有教师免费申请样书，我们将安排快递迅速送达教学视频、PPT课件、教学案例、习题答案、模拟试卷等丰富资源免费下载教师可以申请最低折扣学生直接优惠购买图书欢迎写文章／投稿，我们强大的编辑团队将为您提供专业和高效的编辑出版服务电脑端其他页面的设计第8章京东店铺装修与设计从入门到精通（视频指导版）专题页的制作活动页的制作品牌介绍页面的制作实战训练8.18.28.38.4拓展延伸8.5思考练习8.68.1.1专题页的作用可以补充、整合大量信息，吸引消费者注意力可以对大型或多个促销活动进行集中展示是对外展示店铺、品牌形象、实力的工具给店铺带来流量，吸引部分消费者8.1.2专题页的分类陈述型：该类型的专题页一般针对安全要求或价值较高的商品，如药品、护肤品、奢侈品等。专题页展示的内容要能打消消费者对商品的顾虑，同时可以适当传递商品信息，加深消费者对店铺的好感促销型：促销型专题页主要通过促销活动来拉近消费者和商品的距离，增加消费者的购买概率。该类型专题页与后面讲解的活动页类似，只是其针对的主体更大，体现的内容要更加具有代表性，不能自由设置活动内容。专题页可能是多个店铺联合举行活动的展现，可使整个促销内容更具有多样性和完整性。8.1.3设计与制作专题页新建图像文件锁定图层步骤02步骤018.1.3设计与制作专题页添加星空图像添加莲花步骤04步骤038.1.3设计与制作专题页为莲花图像添加蒙版添加水效果步骤06步骤058.1.3设计与制作专题页添加云朵图像并设置不透明度设置渐变步骤08步骤078.1.3设计与制作专题页设置内发光参数设置投影参数步骤10步骤098.1.3设计与制作专题页添加嫦娥奔月添加小船步骤12步骤11添加产品步骤138.1.3设计与制作专题页绘制投影添加祥云步骤15步骤14输入文字步骤168.1.3设计与制作专题页输入文字设置投影参数步骤18步骤178.1.3设计与制作专题页输入其他文字添加组步骤20步骤19添加莲花金鱼步骤218.1.3设计与制作专题页输入文字添加组步骤23步骤228.1.3设计与制作专题页制作其他优惠券步骤248.1.3设计与制作专题页绘制形状添加渐变叠加步骤26步骤258.1.3设计与制作专题页添加莲花图像输入文字步骤28步骤278.1.3设计与制作专题页设置投影参数查看完成后的效果步骤30步骤298.1.3设计与制作专题页绘制圆角矩形添加护肤品素材步骤32步骤318.1.3设计与制作专题页输入文字输入其他文字步骤34步骤338.1.3设计与制作专题页设置渐变叠加参数绘制圆角矩形步骤36步骤358.1.3设计与制作专题页制作第二个商品展示制作第二个专题栏步骤38步骤378.1.3设计与制作专题页绘制圆角矩形添加护肤品素材步骤40步骤398.1.3设计与制作专题页添加文字设置投影参数步骤42步骤418.1.3设计与制作专题页设置渐变的图层样式绘制圆角矩形步骤44步骤438.1.3设计与制作专题页添加其他渐变和形状添加兔子和荷花素材步骤46步骤45专题页的制作活动页的制作品牌介绍页面的制作实战训练8.18.28.38.4拓展延伸8.5思考练习8.68.2.1活动页的设计要点标题出彩色彩出彩细节出彩8.2.2设计与制作活动页新建图像文件添加下午茶图片步骤02步骤018.2.2设计与制作活动页添加图片添加图层蒙版步骤04步骤038.2.2设计与制作活动页设置图层混合模式添加线条步骤06步骤058.2.2设计与制作活动页设置灰色图层混合模式设置紫色图层混合模式步骤08步骤078.2.2设计与制作活动页添加渐变效果设置描边的渐变颜色步骤10步骤098.2.2设计与制作活动页设置内阴影参数添加灯光效果步骤12步骤118.2.2设计与制作活动页设置填充渐变效果设置描边图层样式步骤14步骤138.2.2设计与制作活动页设置内阴影参数设置投影参数步骤16步骤158.2.2设计与制作活动页添加圆球创建选区步骤18步骤178.2.2设计与制作活动页设置内阴影参数设置投影参数步骤20步骤198.2.2设计与制作活动页设置投影参数添加斜纹步骤22步骤218.2.2设计与制作活动页添加文字灯光效果绘制圆角矩形并添加灯光步骤24步骤238.2.2设计与制作活动页输入“11.11提前购”文字设置外发光参数步骤26步骤258.2.2设计与制作活动页设置斜面和浮雕参数查看设置浮雕后的效果步骤28步骤278.2.2设计与制作活动页绘制矩形输入文字步骤30步骤298.2.2设计与制作活动页设置描边参数设置外发光参数步骤32步骤318.2.2设计与制作活动页绘制矩形并添加文字绘制形状步骤34步骤338.2.2设计与制作活动页绘制圆和圆角矩形绘制其他形状步骤36步骤358.2.2设计与制作活动页输入文字输入其他文字步骤38步骤378.2.2设计与制作活动页绘制矩形添加素材步骤40步骤398.2.2设计与制作活动页输入文字绘制不同大小的矩形步骤42步骤418.2.2设计与制作活动页添加素材图形输入文字内容步骤44步骤43专题页的制作活动页的制作品牌介绍页面的制作实战训练8.18.28.38.4拓展延伸8.5思考练习8.6新建图像文件添加海报背景步骤02步骤01输入文字步骤03添加图层蒙版步骤04绘制正圆步骤05输入“品牌简介”文字步骤06输入其他文字步骤07绘制虚线步骤08绘制矩形并创建剪贴蒙版步骤09添加素材图形步骤10绘制矩形并输入文字步骤11添加素材图形步骤12输入文字步骤13输入其他文字步骤14绘制虚线步骤15专题页的制作活动页的制作品牌介绍页面的制作实战训练8.18.28.38.4拓展延伸8.5思考练习8.6实战训练实训要求1本例将制作年货节活动页，首先制作年货节的促销海报，再对优惠券、爆款和产品等进行装修设计。实训分析2过年是一个喜庆的日子，因此在颜色的选择上以红色为主，表现红红火火，在素材的选择上以剪纸、鞭炮、灯笼、雪花、礼花等为主，通过过年的常见物品，烘托主题。完成后将产品素材添加到对应的位置，使整个活动效果变得完整。实战训练操作思路3新建1920×3400像素的图像文件，制作年货节海报，在该海报中通过带有中国节日气息的鞭炮、灯笼、剪纸等素材，体现年味。在通过扇面效果的展现，让活动文字得到体现。并添加产品内容，让素材内容和节日感融为一体。0102在海报的下方添加祥云效果的优惠券内容，让红火效果无处不在。并在下方添加赠送内容让活动的促销内容得到展现。03在下方添加带有黄色纹理的背景效果，添加促销产品，并对产品添加说明性文字，注意在展示的底部矩形中要添加纹理。实战训练操作思路3在产品的底部绘制纹理，并添加最下方的文字内容。04专题页的制作活动页的制作品牌介绍页面的制作实战训练8.18.28.38.4拓展延伸8.5思考练习8.61.确定活动目的针对京东平台而言，可以将常用的活动分成两种形式，店铺内活动和店铺外部活动，店铺外部活动又包括大促活动和平台活动。大促活动包括618大促、11.11大促、黑色星期五等。而平台活动又可分为类目和分类两种形式：以类目为主的，诸如3月女性蝴蝶节、9月沙漠风暴、一年两次的家装节等；以分类为主的活动如品牌秒杀、预售、众筹等。2.确定活动风格故事性娱乐性利益性专题页的制作活动页的制作品牌介绍页面的制作实战训练8.18.28.38.4拓展延伸8.5思考练习8.6思考练习本练习将利用搜集的素材制作旅行箱上新页面，在制作时先制作上新海报，再根据产品内容制作上新页面。学业进步京东店铺装修与设计从入门到精通（视频指导版）海量图书方便查询免费申请样书下载配套资源优惠购书成为作者更多样书申请和资源下载需求，请登录人邮教育社区（)囊括各大品类，您想要的应有尽有教师免费申请样书，我们将安排快递迅速送达教学视频、PPT课件、教学案例、习题答案、模拟试卷等丰富资源免费下载教师可以申请最低折扣学生直接优惠购买图书欢迎写文章／投稿，我们强大的编辑团队将为您提供专业和高效的编辑出版服务切片与装修店铺各个板块第9章京东店铺装修与设计从入门到精通（视频指导版）Photoshop切片的使用使用系统模块快速装修店铺使用代码自定义装修店铺实战训练9.19.29.39.4拓展延伸9.5思考练习9.69.1.1切片的作用

浏览京东店铺时，图片的大小对页面的打开速度影响很大。将一张大图切割成多张小图，可以加快页面图片的打开速度，提高买家体验的满意度。进行京东店铺装修时，方便替换单一商品。切片后，方便对首页与详情页中的商品进行链接。9.1.2切片技巧依靠参考线：从标尺上拖动鼠标，为图像创建切片的辅助线，在切片时可沿着该辅助线拖动鼠标创建切片。切片位置：切片时不能将一个完整的图像区域断开，应尽量按完整图片切割，避免在网速很慢时图片被断开，不能完整地呈现出来。切片储存的颜色：在储存切片时，需要保存为Web所用格式。切片储存的格式：在储存切片时，可单独为各个切片设置储存格式，切片储存的格式不同，其大小与效果也会有所不同。9.1.3切片与保存图片打开素材添加参考线步骤02步骤019.1.3切片与保存图片开始切片进行切片步骤04步骤039.1.3切片与保存图片选择“编辑切片选项”命令步骤059.1.3切片与保存图片为店招图像切片并命名步骤06为导航图像切片并命名步骤079.1.3切片与保存图片为海报切片步骤08为其他区域切片步骤099.1.3切片与保存图片划分切片步骤10查看划分切片后的效果步骤119.1.3切片与保存图片查看切片后的效果步骤129.1.3切片与保存图片调整图像步骤13选择“优化文件大小”选项步骤149.1.3切片与保存图片优化文件大小步骤15设置参数步骤169.1.3切片与保存图片设置颜色步骤17保存图像步骤189.1.3切片与保存图片查看切片后的文件夹步骤19查看切片后的效果步骤20Photoshop切片的使用使用系统模块快速装修店铺使用代码自定义装修店铺实战训练9.19.29.39.4拓展延伸9.5思考练习9.69.2.1认识系统模块类型进行店铺装修前，需要了解店铺装修的基础模块，除了前面的店招、导航与页面背景外，还可根据用途的不同，在不同的装修栏中选择对应类目的模块，常见的类目包括商品类、图文类、营销类、创意代码类等。9.2.2使用系统模块装修店招打开“店铺装修”页面步骤019.2.2使用系统模块装修店招进行店招的装修步骤029.2.2使用系统模块装修店招选择要添加的图片步骤039.2.2使用系统模块装修店招添加热区步骤049.2.2使用系统模块装修店招编辑链接步骤059.2.2使用系统模块装修店招添加其他区域热区步骤069.2.2使用系统模块装修店招完成店招的装修步骤079.2.3使用系统模块装修店铺轮播图选择“图片轮播”模块步骤019.2.3使用系统模块装修店铺轮播图添加图片轮播模块步骤029.2.3使用系统模块装修店铺轮播图设置图片高度和宽度步骤039.2.3使用系统模块装修店铺轮播图准备上传图片步骤049.2.3使用系统模块装修店铺轮播图选择需要上传的图片步骤059.2.3使用系统模块装修店铺轮播图选择添加的轮播图步骤069.2.3使用系统模块装修店铺轮播图输入链接地址步骤079.2.3使用系统模块装修店铺轮播图单击“添加轮播图”按钮步骤089.2.3使用系统模块装修店铺轮播图添加轮播图2步骤099.2.4使用系统模块装修店铺其他模块添加“图片热区”模块步骤019.2.4使用系统模块装修店铺其他模块需要打开的图片步骤029.2.4使用系统模块装修店铺其他模块单击“添加热区”按钮步骤039.2.4使用系统模块装修店铺其他模块自定义链接步骤049.2.4使用系统模块装修店铺其他模块绘制其他区域热区步骤059.2.4使用系统模块装修店铺其他模块保存设置步骤069.2.4使用系统模块装修店铺其他模块单击“添加热区”按钮步骤079.2.4使用系统模块装修店铺其他模块完成商品推荐图片的装修步骤08Photoshop切片的使用使用系统模块快速装修店铺使用代码自定义装修店铺实战训练9.19.29.39.4拓展延伸9.5思考练习9.6新建自定义页面步骤01进行自定义页面装修步骤02单击“100%通栏”布局样式步骤03进行自定义页面装修步骤04单击“编辑代码”按钮步骤05单击“HTML代码”按钮步骤06准备上传图片步骤07复制链接步骤08选择“HTML”选项步骤09选择图像源文件步骤10选择“HTML”选项步骤11创建热点步骤12复制代码步骤13输入装修代码步骤14查看图片展现效果步骤15Photoshop切片的使用使用系统模块快速装修店铺使用代码自定义装修店铺实战训练9.19.29.39.4拓展延伸9.5思考练习9.6实战训练实训要求1对料理机的首页进行切片，并使其以海报的方式进行显示。完成后，将其装修到首页中进行查看。实训分析2由于料理机首页是以海报的形式进行展现，因此在切片时，可直接进行横向切片，使其保证每张图片都是完整的整体。完成后再使用模块装修的方式进行单个海报的装修，使整个画面以海报的形式进行展现。实战训练操作思路3打开素材文件“料理机.gif”，选择【视图】/【标尺】命令，或按[Ctrl+R】组合键打开标尺，从左侧和顶端拖动参考线，设置切片区域。0102选择【文件】/【储存为Web所用格式】命令，打开“存储为Web所用格式”对话框，单击“存储”按钮，再单击“保存”按钮。03在京东商家后台单击“我的店铺”选项卡，在打开的下拉列表中选择“店铺装修”选项，打开“店铺装修”页面，单击“电脑端”选项卡，单击“店铺首页”后的“装修页面”按钮。实战训练操作思路3单击“装修”选项卡，在打开的面板中，选择“图片热区”模块。0405按住鼠标左键不放，向右进行拖动，将模块添加到右侧编辑区的空白区域，完成图片热区模块的添加。06在右侧打开“图片热区”面板，单击“从本地上传”按钮，打开“打开”对话框，在左侧的列表中选择图片的保存位置，在右侧的面板中选择需要要上传的图片，完成后单击“打开”按钮。实战训练操作思路3返回“图片热区”对话框，单击“添加热区”按钮。0708打开“图片热区”对话框，在其中绘制热点区域，并在右侧的文本框中输入热点链接，单击“确定”按钮。09返回“图片热区”面板，单击“保存”按钮，再单击“发布页面”按钮。Photoshop切片的使用使用系统模块快速装修店铺使用代码自定义装修店铺实战训练9.19.29.39.4拓展延伸9.5思考练习9.61.备份装修效果当完成图片的创建与编辑后，可将装修后的效果进行备份，以便下次使用时可直接调用。其方法为：完成绘制后，单击“备份”按钮，打开“店铺备份”对话框，设置备份名称和备份描述，单击“确定”按钮。2.使用备份图像备份完成后，当下次需要使用该备份时，可恢复备份。其方法为：打开店铺装修页面，单击左侧的“备份”选项卡，在打开的页面中显示了所有备份页面，选择需要恢复的页面，单击“恢复备份”按钮可恢复备份的文字，单击“删除”按钮，可删除备份页面。3.店铺中常见的链接代码店铺音乐代码：音乐网址"loop="-1">。图片制作代码：＜imgsrc="这里放图片地址"＞。公告图片代码：＜imgborder="0"src="这里放图片地址"/＞或＜imgsrc="这里放图片地址"/＞。悬浮挂饰代码：＜imgsrc="这里放图片地址"style="left:20px;position:relative;top:0px"/＞。商品分类代码：＜imgsrc="这里放图片地址"/＞。字体大小代码：＜fontsize="2"＞这里放要处理的文字，可用3、4、5等设置大小＜/font＞。3.店铺中常见的链接代码字体颜色代码：＜fontcolor="red"＞这里放要处理的文字，可以换成blue,yellow等＜/font＞。文字链接代码：＜ahref="网页地址"＞链接的文字，在分类栏里用时链接的网页地址必须缩短＜/a＞。移动文字代码：＜marquee＞从右到左移动的文字＜/marquee＞。背景音乐代码：＜bgsoundloop="-1"src="这里放音乐地址"＞＜/bgsound＞。图片附加音乐代码：＜imgborder=0src="这里放图片地址"dynsrc="这里放音乐地址"＞。浮动图片代码：＜imgalt="1"height="150"src="这里放图片地址"/＞。Photoshop切片的使用使用系统模块快速装修店铺使用代码自定义装修店铺实战训练9.19.29.39.4拓展延伸9.5思考练习9.6思考练习（1）打开“休闲鞋.psd”素材将其中的图片分别进行切片，查看切片后的效果，并保存为“HTML和图像”格式。（2）在图片空间中新建文件夹，并将文件命名为“休闲鞋首页”，完成后将图片上传到该文件夹，打开店铺装修页面，利用切片后的图片进行店铺装修。学业进步京东店铺装修与设计从入门到精通（视频指导版）海量图书方便查询免费申请样书下载配套资源优惠购书成为作者更多样书申请和资源下载需求，请登录人邮教育社区（)囊括各大品类，您想要的应有尽有教师免费申请样书，我们将安排快递迅速送达教学视频、PPT课件、教学案例、习题答案、模拟试卷等丰富资源免费下载教师可以申请最低折扣学生直接优惠购买图书欢迎写文章／投稿，我们强大的编辑团队将为您提供专业和高效的编辑出版服务移动端店铺的装修第10章京东店铺装修与设计从入门到精通（视频指导版）移动端店铺装修的基础知识移动端店铺页面的设计与制作装修移动端店铺拓展延伸10.110.210.310.5思考练习10.6实战训练10.410.1.1移动端店铺装修的重要性与传统电脑端展示设备不同，移动端展示设备的屏幕更小，分辨率更低。因此商家在装修移动端店铺时，应该考虑图片和文字的实际展示效果，不宜太过复杂，避免图片模糊不清。对于字体，建议商家保证最小的文字字号在20以上。10.1.2移动端店铺设计原则目标明确，内容简洁图片不要太大页面色调简洁而统一颜色不宜太暗淡部分模块重点展示移动端店铺装修的基础知识移动端店铺页面的设计与制作装修移动端店铺拓展延伸10.110.210.310.5思考练习10.6实战训练10.410.2.1移动端店铺首页设计的要点注重感官的习惯性与舒适性合理控制页面的长度页面整体内容的把握与电脑端的视觉统一10.2.2移动端详情页设计的要点图片设计要点：图片的体积不能太大，否则容易加载缓慢，影响购物体验，此时应在保证图片清晰度的同时压缩图片。细节图不能太小，尽量保证清晰度，让消费者能够看见细节详情，产生购买欲。文字设计要点：图片文字、商品信息和商品描述文字都不能太小，否则容易造成表述不清楚。商品重点设计：商品重点需要突出，这就要求合理控制页面展示的信息量，省略一些无关紧要的内容，提高购物体验。10.2.3移动端首页的设计与制作新建图像文件步骤01绘制矩形步骤0210.2.3移动端首页的设计与制作绘制形状步骤03添加卡通人物步骤0410.2.3移动端首页的设计与制作绘制云朵形状步骤05绘制其他云朵形状步骤0610.2.3移动端首页的设计与制作添加其他素材步骤05绘制形状步骤0610.2.3移动端首页的设计与制作设置描边参数步骤07输入文字步骤0810.2.3移动端首页的设计与制作输入“吃货节”文字步骤09设置斜面和浮雕步骤1010.2.3移动端首页的设计与制作设置描边参数步骤11添加坚果礼包步骤12绘制形状步骤1310.2.3移动端首页的设计与制作绘制圆步骤14绘制圆环步骤15绘制三角形步骤1610.2.3移动端首页的设计与制作添加图层蒙版步骤17输入优惠券文字步骤1810.2.3移动端首页的设计与制作完成其他优惠券内容步骤19绘制白色形状步骤2010.2.3移动端首页的设计与制作绘制形状步骤21设置描边参数步骤2210.2.3移动端首页的设计与制作设置投影参数步骤23完成标题栏的绘制步骤2410.2.3移动端首页的设计与制作添加转盘图像步骤25制作“肉类零食集合”栏框架步骤2610.2.3移动端首页的设计与制作添加食品素材步骤27绘制锯齿形状