美工设计：店铺详情页设计技巧

只讲淘宝店铺首页，独立网站不适合。两者的区别就是淘宝店铺首页对绝大部分店铺来说不是访客的首访页面！对访客来说，他们已经在宝贝详情页浏览了宝贝、关联宝贝、促销活动，到首页来，我们应该给上帝展现些什么？ 我把自己对美工设计首页的要求分成两部分（偶不是美工，偶是运营）：一：大体突出品牌或产品档次、店铺促销，提高信任感。这个不须多说。分流，引发第二次点击。首页展示的宝贝太多会提高访客的停留时间，但这不是个好数据，这个停留时间实际上是访客的选择成本。选择成本越高转化率越低，同样点击率也越低，统计显示很少有访客会点计more，不管是淘宝店铺还是独立网站。我们应该简单的给顾客展现出店铺产品的主要分类，按风格、空间或者品牌，让访客去分类页浏览该分类的全部产品。记住，一旦你把所有宝贝都展示出来，访客往往就有兴趣全部浏览完毕，生怕错过什么好东西，这是每个访客的通病。而首页是无法展现全部宝贝的。照顾两种客户。一种是随便看看的（促销对他很重要），一种是有明确目标的（分类导航对他很重要）。这就要求首页排版布局要兼顾到两种访客，不再赘述。二：技巧锚点。首页把店铺最贵的一两个宝贝展现出来，没销量就刷几笔，没贵的就上架几个。展现这些宝贝不是为了要卖他们，而是要影响访客心理的预期。一个400元的包怎么卖？要是跟竞争店铺比是没有价格优势的。我们要让访客跟我们店铺其它的宝贝比。闭上眼睛想象一下，你进一个卖包的店，400元的包贵还是便宜？要是它旁边的宝贝就是70、80元，它就贵的离谱。要是它旁边的都是一两千的呢？甚至还有上万的包，你会怎么想？这店铺产品的档次很高、店家很有实力，关键是突然感觉400元的包真实太便宜了，这个店铺里1000多的包都有人买，我只买400元的不会冒多大风险,买不起1000多的我还买不起400元的吗？不能太委屈自己了。 呵呵，我们要的就是这种效果！首页产品标题优化。如果你真要罗列很多宝贝，好吧，但拜托不要用那种直接调去产品的模块，太难看、难分辨、难上档次！ 嘿嘿~~

无线端店铺装修技巧

本次课程主要涉及以下内容：无线店铺的特点、无线店铺的框架、无线店铺装修7大原则、无线店铺首页设计。

一、无线端店铺的特点：

a、场景多样化、时间碎片化；用户随时随地可拿出浏览，也随时可能被打断。

b、内容需要简单快捷、可快速获取浏览；（因为随时会被打断，内容当然要简单直接，做到快速能被用户获取）

c、竞争减少，由于屏幕、流量等原因限制内容的展现（在PC上，可以打开多个浏览器窗口来对商品进行比较，但是手机是无法这样操作的，而且由于流量等因素的限制，用户也不会过多浏览，竞争自然相对PC减少。）

d、关注、收藏的店铺，可随时推送消息、与用户互动。（手机一般都是随身携带的，互动起来时效性更高，当然，要把握好度，过多会打扰到用户造成反效果。）

二、无线端店铺的框架

a、自定义模块，主要包括店招、焦点banner、coupon等卖家可以自定义自己设置的内容。b、宝贝推荐模块，不同的宝贝推荐方式，比如上新的新品、卖得好的爆品等等。

思考逻辑可参考下图：

1、关于自定义模块

1.1 产品是命，图片是王

首先要做的是考虑选择哪些产品、哪些图片用于首页。相信已经越来越多的卖家开始重视图片的处理了，身处于读图时代的卖家们，怎么能少得了一张吸引眼球的图片呢？如下图：左边这些产品图，无论是模特图还是平铺图除了很好的展示了商品之外，也烘托了产品的使用氛围，海边、沙滩、波西米亚风……

但右边的，只是随便得擦了一下背景，甚至商品都有部分被擦掉了，这种给买家的印象是不专业，甚至会怀疑到商品本身的质量等问题。

1.2文字简洁清晰

文字内容简洁清晰是无线上一个永恒的话题。文字内容的大小也要注意，英文与数字最小是24像素。如下图：右边一眼看过去似乎只能看到2016这个数字，但要看清具体内容非常吃力。而左边清晰简单的文案，加上明显的行动点，用户可以在很短的时间内就catch到这张banner要表达的内容。在手机端，一两条卖点或者促销信息，清晰简洁明了即可。

1.3 手机端店铺以新品或爆款引荐为主。

焦点banner上可以是一些推荐新品、爆款的内容。

1.4 发送Coupon（优惠券）：手机端做coupon的优惠活动时，建议简单直接，不要出现让买家猜测店家活动的情况。下图示例为AliExpress iOS APP买家端展示Coupon的界面，可以发现，重点信息突出，买家很容易知道coupon面额及使用门槛。

1.5 建立会场专区以尽可能地多曝光商品，比如大促相关活动商品区，或者无线用户专享区等。

2、关于宝贝推荐模块

商品陈列模块第一区：重点展示新品。手机端用户对上新和爆款最感兴趣，在全年的每季活动中，季节性营销效果最好，季节性营销强调的是应季产品。

商品陈列模块第二区：以爆款为主，需要通过数据分析，将全店最受买家喜爱的产品放在首屏第一个位置。手机端的用户不仅关注爆品，也关注新品。

商品陈列模块第三区：促销商品。促销商品吸引人的点在于它的价格，给买家一种“不买可惜”的感觉。当然商品品质也是保证回头客与好评率的必要条件。

商品陈列模式第四区：特供商品，手机端的特供款是专门针对部分有粘性的消费者设定的，比如，为老会员或者经常关注店铺的会员，推出的独有的产品，是具有独特设计风格或者劲爆价格的产品。

三、无线端店铺装修的7大原则

原则一：手机店铺要做到极速打开；在做店铺设计的时候，一定要考虑到极速打开的问题，手机端流量限制，图片过大会出现图片打不开的现象。

原则二：信息一定要简洁、可快速传播；无线端受手机的载体限制，面积有限，店铺的内容呈现更是受限，信息量过多会导致买家无法读取，随即产生的就是用户流失。

原则三：设计主体和店铺风格相结合，收尾呼应；目前很多店铺主题是一种风格，商品页面是另一种风格，一个店铺没有完整的风格传承塑造，这种情况在PC端也有很多，手机店铺属于窄视觉展示，更应该注意店铺的所有设计，依据品牌调性，使所有的设计保持风格一致。

原则四：保持常换常新；跟PC端道理一样，更加不同的活动内容和促销目的需要有不同风格，增强买家的新鲜感，有变化买家才会经常浏览店铺。

原则五：快速读取信息，控制文字大小，多以图片为主；PC端的用户可能会在一两分钟内浏览店铺或者说还愿意在卖家店铺停留一两分钟，但在无线端买家会更集中于先看图片，一张图胜过千言万语，图片吸引了买家，买家才会去看页面其他的一些文字介绍。

原则六：分类结构要明晰，模块划分要清晰；手机端模块结构是少而精，产品区域清晰。

原则七：店铺装修的颜色使用要有亲切感，不要过于鲜亮；考虑到不少安卓机的屏幕显示问题；也不要过于沉闷，手机屏幕小，大面积的深颜色容易给人压抑感。

四、无线端店铺页面设计

上面说的都是综合的内容，这里我们来整体看一下一个店铺首页从头到尾具体的设计。主要分为四部分：1、店招设计；2、焦点图设计；3、Mini Banner设计；4宝贝推荐模块展示。

1、店招设计以店铺品牌为主，结构元素要尽量少，色彩、字体、文案、照片、设计结构、创意等。另外，也可以通过店铺或者平台活动等氛围渲染。原则为文字清晰、内容简洁、尽量阐述单一诉求。

2、焦点图设计：一可以是店铺或者平台的活动信息Banner，也可以是爆品推荐，或者配合活动的单品推荐。原则依旧是文字清晰、内容简洁、尽量阐述单一诉求。手机屏幕较小，浏览信息受限，买家不会对一个页面做过多停留，更不会细细研读卖家的`各种细节文案。

3、Mini Banner的设计：Mini Banner可以作为分类入口设计，在分类入口的前提下，放爆款产品作为画面主题，目的是吸引买家点击进入承接页，达到让其看到图片就想点击进入查看该模块产品的效果。也可以像焦点图一样作为独立Banner出现。

手机端的分类不一定是单纯的文字，可以以主推产品作为分类画面主体，这样可以快速引导买家点击进入商品分类的承接页，更多的展现是以图片为主的，不需要看文字来区别产品分类，更何况我们还有多语言的问题。

五、无线端宝贝详情页设计的基础规范

无线端最佳的图片像素规范：宽度在480~640像素之间；高度不大于960像素。

最佳的文字设计规范：当需要在图片上添加文字时，英文或数字字体需≧24PX（像素）；文字太多时，建议使用纯文本编辑。

六、无线端宝贝详情页的设计思路

1、3秒注意力：看图说话是网络销售的原则，现在是注意力经济时代，产品页面需要在3s获得关注，吸引买家留下来继续浏览。商品详情页必须以图片为主，精简文字为辅。

手机浏览的连贯性不如PC端，且买家停留时间短，所以商品详情页必须简单直接，在手机端商品详情页设计中的前三屏必须产品卖点和重要信息，不能有烦琐的其他关联信息。

所有产品重点信息不能超过第三屏，在前三屏一定要展示完毕，否则没有办法让买家产生购买欲望，容易直接跳失。

2、FAB利益排序法：FBA是一种演讲或者营销法则。FBA是指Feature（产品卖点）/Advantage（产品优势）/Benefit（消费者益处）的缩写。Feature 产品卖点，重点提炼产品优势、卖点，再辅佐以文字说明，用户可以很方便直接地了解到产品信息。Advantage产品优势，与其他同类产品的差异，比如在设计上将几个重要的数据单拎了出来，使用户更容易识别内容。Benefit消费者益处，即给买家带来的利益。

3、模特展示图：模特展示图要少而精，模特展示图不能像PC端一样重复更多的正侧面模特图，或是各种颜色分类的模特图。PC端会把页面做得很长，而无线端页面要做到精简、精选。

4、产品实拍展示图：产品要实拍细节图，并精选细节图。

5、品牌背书或者公司简介：品牌或者公司介绍可以帮助消除买家对购买产品的疑虑，增强产品的可信度。

宝贝详情页建议：第一屏为产品卖点和优势，遵循FAB的前两项FA。第二屏为产品细节展示，第三屏为产品属性信息和尺码说明，这两屏以商品细节及参数等信息消除买家购买顾虑。第四~六屏为产品模特图片和实物图片，仍遵循FAB营销法则。

PS：做一些独特的照片放在上面；

登陆淘宝后台--选择我是卖家--在左侧导航栏中点击“店铺装修”--点击后会自动跳转到装修页面

店招，把鼠标移动到店招上面，在店招右上角会出现编辑、向上移动、向下移动、删除四个按钮；点击编辑按钮，页面跳转到店招编辑页面；把制作好的店招进行浏览，直接上传即可

装修宝贝分类，把鼠标移动到左侧宝贝分类上，在宝贝分类右上角会出现编辑、向上移动、向下移动、删除四个按钮。当然另猫电商在，可以参考一下别人做的好的，类目不是越多越好，要图文并茂。其设计所需要的技术：reamweaver 、photoshop 、coredraw、flash、firework相结合使用根据主题设置（首页、详情页、图片、文字）

优化导航设计

买家进入店铺首页之后，首先看到的是产品导航。卖家在这里只是简单的放置了两个产品的主图，没有突出产品的卖点，是比较失败的地方。

建议：

卖家可以在导航栏加入店铺的介绍，建立单独的店铺形象页面，增加一定的信赖感，让人感觉到产品都是优质的，都是有保障的。另外，卖家可以在首页首屏，把店铺的活动信息或者店铺的主推产品，页面以海报的形式展现给客户。

合理设置首页架构

首页的设计，掌柜列出了大量商品，但是，产品的图片均为实物图，很少出现场景图，这样简单粗略的布局，让客户看的眼花缭乱。

建议：

店铺首页就是让客户舒服而又快速准确的找到自己想要的信息。

自定义区是做关联推荐比较好的一个区域，在这里可以关联店铺最热门的活动，还可以关联店铺中最热门的搭配。比如，店铺内有两个宝贝一起被购买的机率非常大，就可以把这两个宝贝放在首页自定义区做关联搭配。另外，如果有新品上市的话，也可以在自定义区域展示，给新品多一些展示机会，提高新品的曝光度，提升成交量。

左侧栏内容最好能包含促销主题和时限、原价、现价、立省多少等信息，有针对性的向新老客户推荐店铺镇店之宝。新客户通常比较关心热销程度，所以应突出呈现成交量；而老客户在对店铺和店铺商品有一定信赖度的基础上，更为关心折扣力度，所以应突出呈现优惠价格。

宝贝分类、橱窗推荐等设置可以按照买家的消费需求和搜索习惯来进行分类，比如：按商品品类、功用、消费力、使用场景等来划分，以便老客户都能最快的找到自己的消费目标，引导他们进入下一级的商品列表。如果同时想针对的是新老客户这两大消费群体，那么就要在视觉设计上同时强化销量和折扣这两个信息，迎合他们的兴趣点，引导其浏览页面。

优化宝贝详情页

先来看看该店铺宝贝详情页面出现的问题。页面情况：简单的单品促销，其次就是产品展示。显然这样简单的布局，对客户的体验度是很不好。

建议：

宝贝描述要增加客户体验，简单说，就是要表达出这个产品用来干什么的，是解决什么问题的，卖点一定要抓准顾客的心理需求，用图片和文字展现。

针对该店铺要注意三点：

1.可以增加实景图，把产品放到现实生活中去，让客户可以直接感受到，自己如果用上该产品，大致是什么效果。

2.建议实景图，可以同时加在宝贝详情的顶部和底部，加在顶部是给客户一个大致的效果展示，刺激客户看下去，加在底部是为了刺激客户形成购买。

3.卖家在做单独的促销活动页面时候，同样可以参照上面首页的布局思路，但切忌，要抓住整个促销页面的主题核心，围绕着这个主题核心展开相关的页面设计。

1.在PS里设计好页面，进行切片处理，Ctrl+Shift+Alt+S储存为Web格式，文件格式选择“HTML和图像”；

2.把切好的图片上传淘宝的图片空间，复制淘宝图片空间的图片地址；

3.用Dreamweaver打开HTML文件，复制淘宝图片空间的图片地址替换相对应的图片链接，灵猫dian商 全面并添加超链接；

4.进入淘宝“店铺装修”后台，添加一个自定义模块，把Dreamweaver里的代码直接复制粘贴进行，点击确认；

5.点击预览，如果效果可以了，再点击发布，此时，店铺装修就完成了。

以上就是关于淘宝装修的具体步骤。

1、制造一个最佳阅读距离 主要从标题 、细节、细节打印做起

2，突出对比 3、考虑尺寸和场所 4、制作小尺寸海报 5，使用大的画面 6、大胆留白

7.海报有一定的行动和号召力

1、登入淘宝网，点击“卖家中心”

2、在店铺管理，点击“店铺装修”

3、点击“首页”

4、在“首页”对话框，选择“新建页面”

5、在“新建页面”对话框，“页面名称”输入名称，例如“公司简介”，再按“保存”

6、然后发现之前显示“首页”，现在已变成刚刚设置例如“公司简介”

7、点击导航，在点击“编辑”

8、出现“导航”对话框，选择“添加”

9、出现“添加导航内容”中选择“页面”，在勾选刚才设置“公司简介”，按确定，然后发现“公司简介”出现在首页下面，再按确定

10、按“发布”完成

淘宝店铺首页第一屏是点击率最高的一个区域，因为买家来到店铺第一眼看到的就是这个地方，如果这块地方设计得不够出色那么买家就会迅速的下拉页面。

现在很多店铺的首页都实现了在1024px下能完整的看到这个轮播图片。在这个重要区域就要展现出店铺的重要信息，比如热销的宝贝、商品的分类、促销活动等等。

还有一点是要保证这个区域在不同的屏幕分辨率下都能够清晰的展现出来。

二、 首页下半部分整洁统一，要有层次感

1.整洁统一。每个楼层布局是一样的，你可以看看天猫首页，电器城，还有其他外站以及网店系统的精美模板，他们每个楼层布局都是一样的，为什么呢?考虑到客户浏览的时候总是很快的，这样他就知道他想要的在哪，不用花时间去找。

2.每个楼层色调又是不一样的，这样能刺激浏览者的视觉，让他能够分开不同的楼层快速定位到他想要的哪一个楼层中。

三、要学会做活动页

首页第一屏那么重要的区域，如果轮播图片只是链接到某一个宝贝是在太浪费了，如果客户不喜欢这个宝贝，跳出率就很高，你可以新建一个活动页，列出多个相关产品，让客户有的选择，成交率就会大大提高。

建立活动页的好处：1.减少首页的高度，加快首页加载速度2.给客户以选择，提高成交率。

店铺首页就好比一个人的外貌，你把首页做好了，别人才会有想再看一眼的欲望，所以在装修网店时，千万要做好首页的布局与装修，这样才能保证你比别家网店更胜一筹。