淘宝店铺首页内页等设计框架

合集下载

电商淘宝天猫运营资料之美工-宝贝详情页设计思路与框架(001)

店铺美工必读，宝贝详情页设计思路与框架多新手美工以为做描述页，就是简单的摆放几张产品图，然后加一些参数表最后放个5星好评。

其实做详情页说简单也简单，说难也难，难就难在能否卖出去。

帮助商家提升销量，打造一张优秀的详情页，大概用60%时间去调查构思，确定方向。

然后40%的时间去设计。

网上有些人把美工分为技术型美工和运营型美工，我觉得这个也是美工自我发展的一个过程。

下面通过7个步骤帮助大家更好的理解设计详情前的思路，通过后面的框架，了解设计过程中的具体方法。

一、宝贝详情页的作用宝贝详情页是提高转化率的入口，激发顾客的消费欲望，树立顾客对店铺的信任感，打消顾客的消费疑虑，促使顾客下单。

优化宝贝详情对转化率有提升的作用，但是起决定性作用的还是产品本身。

二、设计详情遵循的前提宝贝详情页要与宝贝主图丶宝贝标题相契合，宝贝详情页必须是真实的介绍出宝贝的属性。

假如标题或者主图里写的是韩版女装但是详情页却是的欧美风格，顾客一看不是自己想要的肯定会马上关闭页面。

三、设计前的市场调查设计宝贝详情页之前要充分进行市场调查，同行业调查，规避同款。

同时也要做好消费者调查，分析消费者人群分析消费者的消费能力，消费的喜好，以及顾客购买所在意的问题等。

①如何进行调查？通过生意参谋后台可以查到消费者的一切喜好以及消费能力丶地域等等很多数据，学会利用这些数据对优化详情页很有帮助。

②如何了解消费者最在意的问题？可以去宝贝评价里面找，在买家评价里面可以挖出很多有价值的东西，了解买家的需求，购买后遇到的问题等等。

四、调查结果及产品分析根据市场调查结果以及自己的产品进行系统的分析总结。

罗列出消费者所在意的问题，同行的优缺点。

以及自身产品的定位，挖掘自身与众不同的卖点。

五、关于宝贝定位根据店铺宝贝以及市场调查确定本店的消费群体。

举个例子：外出旅游住宾馆，有的小旅馆100一夜卖的就是价格，卫生啥的都没有保障。

定位于低端。

有的连锁酒店200一夜卖的是性价比，定位于中端顾客。

淘宝店铺主页布局分析

1、目前公司淘宝首页的布局方式（从上至下）1）店铺标志2）店铺招牌3）宝贝分类以及关于我们4）全屏海报5）营销重点（分三块）6）店铺公告和商品分类7）活动预告及活动促销图片8）畅销关键字9）客服服务10）分享有礼11）立体轮播12）分类橱窗13）宣传图片（5张）14）宝贝展台15）多屏展示16）放大镜17）相册功能18）热点大图19）新品展示20）店长推荐21）宣传图片（5张）22）掌柜推荐23）店铺交流区（通过审核的买家留言）24）宝贝排行榜2、模板备用的一些模块上述模块都可以反复调用，另外还有背景音乐、图片轮播、宝贝推广模块等模块可以添加。

3、公司淘宝首页要实现的功能从不同的家居公司装修风格来看，90%以上的店家都把精美的商品图片大批量的摆在首页，文字性的叙述很少甚至没有。

综合不同店家的装修风格以及公司需要，列出以下几点淘宝首页需要实现的功能：1）商品要让买家看到（商品要醒目）；2）优惠要让买家看到（促销活动要醒目，让买家感到实惠）；3）品质要让买家看到（宣传图片一定要精美，突出拥有爱丽屋的时尚生活）；4）服务要让买家看到（客服的联系方式要让买家较容易找到）参考资料（店家地址）：/?spm=a220o.1000855.3.3.779512（主页摆了31个商品，11.5个页面长度）/?spm=a220o.1000855.3.1.a7a9ad（主页摆了65个商品，22.5个页面长度）/shop/view_shop.htm?spm=a220o.1000855.7240061.1.88eaba（主页摆了93个商品，22个页面长度，不过主页显得比较拥挤，不建议采纳这样的风格）/?spm=a220o.1000855.3.2.7ebc44（主页摆了36个商品，9个页面长度）/shop/view_shop.htm?spm=a1z10.1.7453514.1.19c02d（主页摆了24个商品，8个页面长度）根据上述淘宝店家的布局方式，一个页面3个商品对买家来说是比较好的浏览方式，大部分店家也遵循这个原则。

首页框架搭建实战_淘宝天猫网店美工全能一本通：配色抠图装修无线店铺_[共3页]

图8-2 模板管理
步骤 02 在打开的页面中显示了3个可用的模板，单击模板上的“点击查看图片详情及操作”超链接，如图8-3所示。

图8-3 设置前景色
步骤 03 打开“模板详情”对话框，查看模板信息，单击按钮，如图8-4所示。

图8-4 查看模板信息按钮，如图
图8-5 应用模板
操作成功后，店铺模板即发生改变，进入“店铺装修”页面，可以看到店铺
图8-6 成功应用模板
进入店铺装修后台，选择顶部的“装修模板’选项，将打开“卖家服务装修市场”页面。

该页面中提供了很多装修模板，用户可根据旺铺版本、模板类型、行业、风格和色系进行选择，但要注意这些模板大部分需要购买。

经验之谈
一个正常营业的淘宝店铺首页应包括店招、导航、海报、产品分类、
客服旺旺、产品展示、店铺页尾、店铺背景等。

确立店铺的模块与风格
后，即可开始首页框架的搭建，其具体操作如下。

搭建首页框架。

淘宝店铺首页布局分享

产品名称原价:100 折扣价:50 5折
产品名称原价:100 折扣价:50 5折
全部宝贝人气热卖价格排序新品上架收藏店铺分享评价+5 分（链接到论坛）
按材质：羊毛仿羊绒棉人造丝促销活动：爆款特价区包邮区新品到货：十月新品九月下旬新品九月中旬新品九月上旬新品八月新品关于物流的相关说明客服中心：旺旺号1 旺旺号2 旺旺号3 …
产品名称原价:100 折扣价:50 5折
产品名称原价:100 折扣价:50 5折
产品名称原价:100 折扣价:50 5折
产品名称原价:100 折扣价:50 5折
包包
推荐
第六屏幕
第六屏幕
包包推荐
BANNER（活动广告推荐）活动广告推荐）
以下活动正在进行（基本以专题形式或类目形式出现）以下活动正在进行
第三屏幕
新品上市950*120 新品上市查看更多新品> 查看更多新品
产品（可加促销信息）
产品（可加促销信息）
产品（可加促销信息）
产品（可加促销信息）
产品（可加促销信息）
产品名称原价:100 折扣价:50 5折热门分类
产品名称原价:100 折扣价:50 5折
产品名称原价:100 折扣价:50 5折
第四屏幕
第四屏幕
围巾披肩推荐
主推产品
主推产品
主推产品
产品（可加促销信息）
产品（可加促销信息）
产品（可加促销信息）
产品（可加促销信息）
产品（可加促销信息）
产品名称原价:100 折扣价:50 5折
产品名称原价:100 折扣价:50 5折

网店首页结构分析

任务一制作宝贝详情页模板
【任务分解】 Alice之前在学校没有网店运营的经验，大部分知识都是按照教科书上操作指示完成，现在需要独立完成宝贝详情页制作，一下子不知道该如何下手，她向师傅 Daisy请教。Daisy给她布置了几个任务，需要在一周时间完成，首先要分析宝贝详情页的基本模块，策划宝贝详情页内容；其次要根据网店装修整体风格制作出模板；然后要跟摄影师沟通要求拍摄产品图片素材；接着要跟文案师沟通拿到宝贝详情页文案；最后根据设计要求制作出完整的详情页交运营部门上传。
活动4.1 分析宝贝详情页基本模块
• 2、宝贝细节模块 • 在宝贝展示模块里，客户可以找到里的大致感觉。当客户想要购买的时候，宝贝细节模块就要开始起作用了，细节是让客户深入了解商品的主要手段。客户熟悉商品能对最后的成交起到关键性的推动作用。 • 3、产品规格参数模块 • 图片是不能反映宝贝的真实情况，因为图片在拍摄的时候是没有参照物的。经常有买家买了宝贝以后要求退货，原因就是买回的商品比预期相差太多，预期便是宝贝图片留给买家的印象。所以我们需要加入产品规格参数的模块，如此才能让客户对宝贝有更为正确的预估。
步骤第一步
消费者心理
宝贝详情页关注点
第一眼印象，这件宝贝（风格、样式等）是否喜欢？整体展示（摆拍、模特展示）
第二步第三步
细看，这件宝贝的质量好不好？（功能全不全）？这件宝贝是否适合我？
细节展示、功能展示、品牌展示
功能展示、尺码规格
第四步第五步
宝贝的实际情况是否与卖家介绍得相符？（是否正品？有无色差？尺码是否偏差？）
活动4.1 分析宝贝详情页基本模块
• 8、会员营销模块 • 目前，在淘宝上的推广成本已经越来越高，争取一个客户所要花费的成本也在逐年

淘宝商场页面设计方案

淘宝商场页面设计方案淘宝商场是中国最大的综合电商平台，界面设计对于提升用户体验和购物效果非常重要。

本文将提出一种淘宝商场页面设计方案，旨在提升界面的可用性、吸引用户留存和提高交易转化率。

1. 首页设计首页是用户进入淘宝商场的第一个界面，应该突出展示优质商品和促销活动。

设计方案中将采用大图轮播的形式展示热销商品、新品推荐和限时折扣等，吸引用户的眼球。

此外，首页还将设置搜索框和商品分类，方便用户快速找到所需商品。

2. 商品列表页面设计商品列表页面是用户在淘宝商场浏览商品的主要界面。

设计方案将采用分页和筛选的形式，用户可根据自己的需求来浏览商品。

同时，商品列表页还将显示商品的关键信息（例如，价格、销量、评价等）和商品主图，方便用户更好地选择商品。

3. 商品详情页面设计商品详情页面是用户了解和购买商品的关键界面。

设计方案将采用图文并茂的形式，将商品的详细信息、多张高清图片和用户评价等展示出来。

此外，还将设置购买按钮和加入购物车的按钮，便于用户直接进行购买。

4. 购物车页面设计购物车页面是用户查看和管理购物车中商品的主要界面。

设计方案中，将展示购物车中的商品清单、总价和配送方式等相关信息，同时还将提供编辑商品数量、删除商品和结算等功能，方便用户进行操作。

5. 个人中心页面设计个人中心是用户管理个人信息和订单的界面。

设计方案中，将提供个人信息管理、订单查看和售后服务等功能。

同时，还将设置积分和优惠券的展示，以及推荐商品和促销活动的推送，增加用户的参与度。

6. 支付页面设计支付页面是用户支付订单的关键界面。

设计方案中，将提供多种支付方式选择、订单信息展示和确认支付等功能。

同时，还将添加优惠券和积分的使用功能，方便用户享受优惠。

综上所述，这是一种针对淘宝商场的页面设计方案，旨在提升用户体验和购物效果。

通过合理的布局和功能设计，提供高质量的商品展示和方便的购物流程，可以吸引用户留存，提高交易转化率，为淘宝商场的用户带来更好的购物体验。

手机淘宝页面设计介绍课件

05
广告区域：展示各种广告信息
06
页面背景：采用简洁、清晰的背景，提高用户体验
色彩搭配
主色调：手机淘宝的主色调为橙色，代表活力、热情和温暖
辅助色：辅助色包括蓝色、绿色、紫色等，用于强调和区分不同功能区域
对比色：使用对比色可以突出重点信息，如红色、黄色等
渐变色：渐变色可以增加页面的层次感和立体感，如从浅到深的渐变效果
搜索页面设计：快速准确找到 ห้องสมุดไป่ตู้需商品，提高用户体验
市场竞争力：优秀的页面设计可以提高手机淘宝在市场竞争中的优势，吸引更多用户和商家。
手机淘宝页面设计的原则
简洁明了：页面设计应简洁明了，让用户能够快速找到所需信息。
易于操作：页面设计应易于操作，让用户能够轻松完成购物流程。
视觉吸引力：页面设计应具有视觉吸引力，吸引用户关注并激发购买欲望。
6
设计页面风格：设计手机淘宝页面的整体风格，包括色彩、字体、背景等
7
测试与优化：对手机淘宝页面进行测试和优化，确保页面的可用性和易用性
8
发布与维护：发布手机淘宝页面，并根据用户反馈进行维护和更新
设计实践技巧
01
简化页面：减少不必要的元素，突出重点信息
02
色彩搭配：选择合适的色彩搭配，提高页面视觉效果
03
布局合理：合理安排页面元素，提高页面可读性
04
响应式设计：考虑不同设备的屏幕尺寸，实现页面自适应
设计实践成果展示
首页设计：简洁明了，突出重点
分类页面设计：清晰明了，易于查找
商品详情页设计：详细展示商品信息，提高购买欲望
购物车页面设计：方便用户管理购买商品，提高购买效率

淘宝商城(天猫)组织结构图

天猫商城组织结构2017年6月一、商城组织结构二、工作内容（一）运营1、负责网店整体规划、营销、推广、客户关系管理等系统经营性工作；2、负责网店日常改版策划、上架、推广、销售、售后服务等经营与管理工作；3、负责网店日常维护，保证网店的正常运作，优化店铺及商品排名；4、负责执行与配合公司相关营销活动，策划店铺促销活动方案；5、负责收集市场和行业信息，提供有效应对方案；6、制定销售计划，带领团队完成销售业绩目标；7、客户关系维护，处理相关客户投诉及纠纷问题。

(二)客服人员1、通过在线聊天工具，负责在淘宝上和顾客沟通，解答顾客对产品和购买服务的疑问；2、产品数据在线维护管理，登陆销售系统内部处理定单的完成，制作快递单，整理货物等；3、客户关系维护工作，在线沟通解答顾客咨询，引导用户在商城上顺利的购买，促成交易；4、负责客户疑难订单的追踪和查件，处理评价、投诉等。

(三)配送人员1、负责网店备货和物资的验收、入库、码放、保管、盘点、对账等工作；2、负责保持仓库内货品和环境的清洁、整齐和卫生工作；3、按发货单正确执行商品包装工作，准时准确完成包装任务；4、准确在网店后台输入发货单号，更改发货状态，对问题件能及时处理。

(四)网店美工1、负责网店产品上传宝贝的文字编辑及上传宝贝的相关工作，图片拍摄制作。

2、根据主题需要完成店铺进行整体的美化(公告栏和促销栏图片设计)。

3、根据文字需求完成网页平面设计，完成网页html编辑。

4、产品拍摄图片的美化、编辑排版；(五)网店财务员1、负责网店销售与资金到账的管理；2、负责网店与快递公司业务费用的管理；3、负责网店日常运营财务方面的处理；(六)网店推广员1、负责不定期策划淘宝商城营销活动；1、负责公司淘宝交易平台推广工作；2、策划并制定网络店铺及产品推广方案（包括淘宝推广、SEO、论坛推广、博客营销、旺旺推广等）等营销工作；3、研究竞争对手的推广方案，向运营经理提出推广建议；4、对数据进行分析和挖掘，向运营经理汇报推广效果；5、负责对店铺与标题关键字策略优化、橱窗推荐、搜索引擎营销、淘宝直通车、淘宝客等推广工作。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。