详情天学会店铺装修

Jiangshi:yuanshan宝贝详情页的设计和制作Jangshi:yuanshanDesign and manufacture of baby details page课题大纲1234什么是内页？内页的具体制作流程及设计方法PS中如何制作内页？实操演示总结 1 什么是内页？What is the inside pages?什么是内页？内页（详情页），也叫宝贝描述页 41.流量的入口。（是买家进入店铺的第一印象）2.转化的终结者。简单的说就是一页详细的产品说明书，是买家的解说员，向买家展示商品，介绍商品，促销商品，树立品牌形象，减少卖卖沟通负担等。如同一张产品说明书5内页的重要性消费者在淘宝通过 搜索产品 点击进入店铺，首先看到的是这个详情页，如果看了详情页觉得满意，才会购买。或跳转到首页或别的页面看到别的产品。如果不满意就关掉了，这个客户就流失了。所以详情页是非常重要的！通常担负着比首页更多的转化率的责任，它将直接面对顾客，经受顾客货比三家和反复推敲。6内页的尺寸和结构尺寸分辨率颜色宽度790（天猫）750（淘宝）高度没有限制，但并不是越长越好。72DPIRGB 店招(招牌）主图1 2 3 4 5 看了又看标题价格物流尺码颜色数量 搭配区 参数页头公共模块 详情描述N个模块页底公共模块店铺底部模块/页尾宽150PX高自定义左侧关联模块（分类）导航条宽790PX高自定义宽950PX高120PX宽950PX 高30PX尺寸1:1正方形建议天猫800*800淘宝700*700有自动放大镜功能 2 内页具体制作流程及设计方法Inside the concrete production process and design method制作流程902.解析文案产品人群淘宝指数客户素描.接受任务0103.准备图片有图片素材无图片素材无其他素材04.处理素材原始图片素材非原始图片素材整理素材05.确认模块及顺序常用16个模块常用的模块排序方法模块排序常见误区06.绘制内页草图简单画出内页草稿（文字排版+图片排版）07.用PS制作内页确定配色方案确定字体新建图片文件确定尺寸拉辅助线从上到下依次填充框架内容统一调整框架的排版、配色、背景保存多稿备选08.提交相关人员进行修改意见通过上传发布未通过-修改审核中.完成任务客户体验0910企业文化企业文化是对品牌的相关介绍，旨在展示品牌实力；传达给买家企业的服务意识、品牌愿景等信息，树立品牌的正面形象，让顾客认同品牌，认同店铺。认同产品。（可从品牌故事、历史、规模、服务、愿景等多方面进行阐述。）详情页是一个陪伴买家购物的过程，客户体验就是要做到如同商品就在眼前的直观效果。给顾客提供人性化的服务，引导消费。（买家想看到的，还没想到的，你都给他完整展示了，体验就高了。）实力展现1112生产流程生产流程主要目的是加强买家对产品的信任感。如同线下生产的监控管理流程，给买家看得到的放心！（生产流程图片要求统一性高，如拍摄角度方法一致性、产品和详情产品一致性、制作流程图一致性、生产空间一致性等。否则也会让买家有作假嫌疑！）实力展现模块，旨在展示品牌实力。可通过生产规模、品牌历史、品牌销量、品牌权威等多方面展示。进一步提升商品的价值，加强买家的购买欲望。（页面排版简单有序，色调统一，避免杂乱，不要让买家感觉有作假嫌疑！）包装展示1314资质证书展示品牌的重要资质（品牌、正品、授权等)与商品相关的认证证书展示。（不但无形地提高了品牌的价值，也打消买家的疑虑，提升购买欲望.）多角度思维展示商品的精美外包装，快递包裹的包装过程等信息。（如上图情景带入，使消费者对其有更加形象生动的认识，迅速拉近了买家和产品的距离。同时通过对包装设计的描述让包装更加高大上，更具有趣味性。）Q&A问答1516关联销售关联营销模块，这里是买家决定要走了，你留下他的最后一个机会。通过关联其它商品，做二次营销，让顾客有更多的选择，从而提高客单价。（注意不要密密麻麻，买家喜欢的是舒适的，对眼球舒服的详情页）Q&A，是questionandanswering（问与答）的缩写，我们可以理解为常见问题解答。常以说明或问答的形式展现，可以减少克服压力，同时让买家放心的购物。（要求图表化，文字简练明了，模块清楚简单，逻辑清晰。）基本信息商品展示细节展示卖点提炼情感营销商品对比包装展示关联销售生产流程承诺铺垫资质证书核心竞争力实力展现企业文化问与答客户体验总结常用16个模块15如何让详情页模块排序有规律可循？详情页模块排序是对前期产品分析、定位、核心卖点、产品信息、品牌信息、服务体系、好评、卖家秀等信息进行分类、重组，进行有序、有条理的排序，以达到提高转化的目的。标品逻辑购物心理分析逻辑问题解决方案逻辑三种常用内页模块排序方法123模块排序1标品逻辑店铺活动商品参数商品展示品牌介绍品质保障包装图示物流快递服务质量以标品逻辑，进行排序。模块排序2购物心理分析逻辑感性理性感性头图铺垫正文分析余韵通过分析顾客的购物心理变化，从感性高理性再到感性。在感性的头部不断通过诱因痛点等来能吸引买家，引导渴求，给买家一个不得不买的理由，激发买家购物欲。中间理性部分则切身关注买家的利益点，增加情感营销，才能让买家浏览兴趣延续。尾部的理性再不断通过诱因痛点等来能吸引买家，引导渴求，给买家一个不得不买的理由，激发买家购物欲，促成购买。以购物心理逻辑，挑选适合模块进行排序。模块排序3问题、解决方案逻辑描述一个消费者正在面临的问题（痛点），通过问题解决问题。（比如：你是否在被雾霾所困扰？现在只要你使用了我的防毒口罩，在外面再也不用担心雾霾问题！）以提出问题，解决问题的逻辑挑选适合模块进行排序。模块排序常见误区1.宝贝描述越长越好？淘宝有人去设计10米长的详情页，其实并不是越长越好，如果能在短短几屏内完整准确的传达信息，做到快准狠，当然是哦不过的。1.16个模块都要用上，并按规定顺序排列？并非16个模块全部都要用上，并非一定要按一定顺序排序。而是根据自己产品内幕的需要，通过常用模块排序方式，选用需要的模块进行排序。例如，在食品类目中，我通常会展示商品展示细节展示情感营销包装展示企业文化客户体验生产流程卖点提炼商品对比色彩，是一种极具视觉冲击力的传播工具。所以在详情页设计中，色彩也是一个非常重要的环节。详情页的配色方案一般沿用店铺已有的配色方案1.从LOGO提取2.从产品的本身属性提取3.从产品的联想属性提取从文案中提取内页配色的3种方法21从文案中提取内页的配色从LOGO提取配色主色：红色R:142G：0B：6背景色：暖白R:142G：0B：622从文案中提取内页的配色从产品的本身属性提取主色：咖啡色R:74G：19B：0背景色：裸粉色R:251G:232B:208辅助色：咖啡色R:156G：81B：3223从文案中提取内页的配色从产品联想属性提取主色：蓝色R:51G：102B：105强调色：黄色R:255G：204B：0主色：蓝色R:51G：102B：105从文案中提取字体的使用规范一般沿用店铺已有的标准规范：字体不超过3种字号不超过3种重点部分突出通过字体颜色深浅，字号大小，区分等对比方式字体大小相当于音强，字体越大相当于声音越大。字体的形式相当于音色，男低音，还是女高音。巧妙的字体组合可以制造和弦。从文案中提取字体使用规范可分为4种类型宋体类型（印刷体）用于标题，内文用的少，因为笔画细，不好识别。黑体类型（现代体）常用于标题，标志等。多采用大黑、中黑、雅黑加粗等。书法体类型（古典体）常用于中国传统节日广告设计中。创意类型（艺术体）常用于节假日，个性型设计中等。01020304常用图片排版方式变化式构图均衡式构图对称式构图紧凑式构图X形构图对角线式构图等 3 PS中何如制作内页实操Inside the concrete production process and design method解析文案整理素材绘制内页草图010203打开打开ps ctrl+n新建文件夹新建文件夹 命名文件命名文件 设定宽度设定宽度750像素像素 高度自高度自定义定义 选择选择RGB颜色颜色 12拉辅助线按顺序依次填充模块新建红木增值模块文件夹新建图层在黑色的背景上用矩形框画出过度条(ctrl+delete)填充前景色（crlt+o）打开故宫图片素材点击要嵌入矩形框的图片按alt键，嵌入其中，移动调整合适位置大小调整色阶红绿蓝通道将扣好的狮子头门把手放置于中间辅助线位置（抠图方法同下页沙发抠图一样）设置过程（crlt+o）打开沙发图片素材进行图片处理1.C剪裁2.通过色阶曲线进行调色3.调整亮度4.白平衡5.饱和度6.对比度7.清晰度用快速选择魔棒工具进行选区调整边缘1.选择反向（ctrl+shift+i)2.复制选区3.黏贴（Ctrl+J)4.转换为智能矢量对象5.（ctrl+t）自由变换合适大小（ctrl+s)保存细细纯色纯色沿着直线沿着直线激动通过调整色阶的红绿蓝通道，把沙发调整成黄金色设计排版文字（ctrl+s)保存还不快动手试试！最后统一调整框架的排版、配色、背景、风格。提交运营进行修改意见通过上传发布未通过修改拉辅助线点击切片工具点击基于参考线点击文件存储为WEB所用格式点击全选图片品质在80左右选择JPEG格式存储点击所存储文件夹打开店铺后台点击图片空间点击要上传到的文件夹点击上传图片123点击出售中的宝贝搜索宝贝点击宝贝描述中图片图标点击左侧图片所在文件夹打开点选图片插入完成调试1234 4 总结美工岗位工作应该做到：掌握详情页定义，内容，规范熟悉操作PS了解模块，有逻辑内容够详细，画面够简单先完成再完美总结详情页设计：力求做到有头有尾、有对比、有逻辑、够详情、图片化、可视化，围绕着突出利益点，强化购买理由，增强购买的欲望，促进转化。Thanks for Your Time