新手教程，无线端详情页的设计要点 - 帮助中心 - 种斯信用平台

在线客服 您好，欢迎来到信用网！[请登录]，新用户？[免费注册]
我的账号 任务中心 推广赚钱 帮助中心 礼品专区
网站首页 > 帮助中心 > [淘宝教学] > 新手教程，无线端详情页的设计要点
新手教程，无线端详情页的设计要点
shua.51jonce.com 时间：2014-01-14 来源：系统 类别：[淘宝教学]
导读
无线端来袭，你准备好了吗？
淘宝对2013年12月31日之前发布手机版宝贝详情页将给予流量倾斜的政策。
的确，我们店铺刚上了手机版详情页第一天就来了不少手机端的流量，兑现承诺了。
截止目前，我们的手机版详情页尚未完全做完，在这种情况下，我本应该赶紧做好其他宝贝的详情页，但是我忍不住要和各位分享一下我在做无线端详情页的一些经验和理解。标题说是教你做无线端详情页，有点自夸了，写的不足的地方还望各位多多包涵。
关于发布手机版宝贝的官方教程在这里：
http://bbs.taobao.com/catalog/thread/510526-265334918.htm
做手机版宝贝的官方宣传页在这里：
http://www.taobao.com/go/act/315/sctaa.php
关于那些移动端的趋势，数据分析等，不是我本次讨论的重点，请自行查阅相关资料。
下面开始正题.....
一、无线端各种尺寸和要求

- 可以传一个小于200K的mp3音频文件。
- 图片最多可以传30张，单张图片宽度在480px-620px内，单张图片高度小于等于960px。
- 可以添加文本模块，每个模块不超过500字符。（文本模块没有任何样式可编辑，连首空格2字都不能。行间距不能调整，字体大小、颜色、加粗等不能调整，被逼无奈我只能全部做成图片了。这点希望官方后续能考虑放宽。）
- 所有的东西加起来不能超过1.5M。

二、无线端页面设计要点

- 在无线端的详情页是没有店招的，设计一个店招，这样会增强视觉，提升品牌形象。如图：
- 一张无线端的海报图
  可以是主推产品，或者形象展示，这样看起来会大气很多。图片不可以做链接，且所有的图片和文字在无线端都不可以做链接。
- 内容精简，挑重点说。
  不要把你所有PC端的内容都缩小照搬到无线端，原因是pc端图片缩小后文字会很小，在手机上看不清楚，原因之二，pc端就那么小一点地方，挑重点内容来做就行了，有wifi还好，没wifi的话别浪费买家的流量了。
- 不要使用太多色彩
  颜色信息太丰富的图片，图片体积必然会增大。千万要记住这是无线端，能小则小。尽量使用单色背景，或者浅色图片，推荐使用“极简”设计理念。这样的图在无线端上看其来会很清晰和舒服。
- 字体大小的问题，也是最重要的问题。
  经过我反复的测试得出这个经验：我选用的是620px宽的尺寸，正文文字使用（雅黑 26px 模式为锐利）的时候，在手机上浏览感觉最舒服。不要以为26px在pc上看起来很大，其实在手机上显示是很小的。有图为例
  标题是（雅黑 32px Bold 锐利）正文是（雅黑 26px 锐利 行间距自动），看起来很大是吧？那我们来看看这个文本在手机上是多大，由于Iphone截图会把图片放大，没办法做到手机上的效果。
- 图片优化的问题，也非常的重要。
  每张图片都必须要优化，否则很大，PS里划好切片以后Ctrl+Alt+Shift键 打开优化界面，逐一选中每个切片去优化，尝试不同的格式，有时候在JPG格式下50%的质量，仍然比GIF格式大，这要取决于你的图片颜色信息。如果颜色比较单一，首选GIF，如果是一些复杂的图片，则选JPG。另外有一点，有时候GIF和JPG都很大的情况下选择PNG8，会小很多。反正这三个格式淘宝都支持。
  尽量在保证图片质量的情况下，去减小图片大小，有时候pc上看起来图片质量压缩过度了，但在手机上看效果还不错，这个需要自己去慢慢体会。
  顺便说下，我们的现在是29张图片607k+mp3 197k 还不算是太大，符合淘宝的1.5M以内。
- 不要把图片或者文字使用切片拦腰斩断
  每个图片，或者没段文字应该切成1个图，而不是把一张完整的图片切成几块，这样会有非常严重的后果。
  在淘宝客户端里面看不出来，一旦使用手机浏览器去看宝贝详情的时候，图片之间是有空隙的，如果你的图片被拦腰斩断了，那就会出现一个“断裂带”，希望以后淘宝修复这个问题。
- 关于添加mp3的问题
  mp3文件只允许200k内，但这200k内你能说一些什么呢？想过没？那我告诉你吧，正常的语速，不带背景音乐，能说80个字左右，还得看你压缩的好不好，跟压缩也有关系。
  如果你想带点音乐，那么只能说50个字左右。我的mp3是花钱找专业录音的公司做的，他们反复调试了2天，才保证文件不超过200k，保证音质不那么差，保证文字尽量多，几个条件都很苛刻。
  至于mp3的内容你想说点什么，就看你想要表现什么了，可以表现品牌文化，可以是促销，可以是产品介绍，可以是一段音乐，可以是...自己去想吧。给大家看看加了mp3以后，详情页的展示效果吧。
  有木有点小激动，传说中可以听的宝贝就是这样来的，你想不想听听？
  补充：手机浏览器上看详情页，不会出现MP3，只有在淘宝客户端浏览时候才能看见。
- 关于文本模块的问题
  这是个很纠结的问题，我试过了，使用文本模块的话就会减小整个页面的体积，但我为什么没用文本模块呢，有几个原因：
  1）、文本模块不支持字体大小编辑，不支持首行空格。
  2）、文本模块不支持文字颜色编辑。
  3）、文本模块使用后，和我设计的效果图不搭配，看其来巨难看。
  我就放弃使用文本模块了。但是有个缺点，当手机在没有wifi的情况下就是E模式下，浏览宝贝比较慢，在怎么优化图片，也就那样了，需要点一下出来几张这样。

来一张首屏吧！
>>其它相关资讯<<
新手卖家使用橱窗推荐需要注意哪些细节
中小卖家如何利用精美文案打造别样网店
成功者足迹，必看14条网络创业不外传的绝招
集市新版详情页覆盖全网实物类目公告
抛开数据聊淘宝
免费流量三剑客之论坛营销！
分类导航
[每日公告] [任务相关] [资金安全]
[时讯新闻] [防编密技] [淘宝教学]
[名词解释] [思维转变] [排名优化]
最新资讯
【[防编密技]】淘金币新动态，淘宝刷信用卖家要了解
【[防编密技]】淘宝刷信誉卖家让商品说话打动买家
【[防编密技]】教你用凹凸曼屏蔽职业差评师、无良同行、骗子买家！
【[防编密技]】淘宝新职业病——鼠标手 刷钻卖家你的手安全吗？
【[防编密技]】亡羊补牢为时不晚，淘宝刷钻卖家提高转化率
【[防编密技]】淘宝刷信誉卖家万事小心，减少买家退货率
【[防编密技]】淘宝刷钻新手卖家易陷误区只会让生意越来越差
【[时讯新闻]】车品店玩微淘，抓住定位很重要！
【[时讯新闻]】新店也能快速上冠，不信你看！
【[时讯新闻]】淘宝卖家年后如何快速步入正轨？

| 首页 | 关于我们 | 媒体报道 | 平台规则 | 帮助中心 | 商务合作 | Copyright © 2013 - 2014 51JONCE ALL Rights Reserved