zěn me shè jì táo bǎo shǒu jī wú xiàn duān yè miàn shè jì táo bǎo shǒu jī wú xiàn duān yè miàn fāng fǎ xiáng jiě

怎么设计淘宝手机无线端页面 设计淘宝手机无线端页面方法【详解】

发布时间:2026-06-01 04:52

怎么设计淘宝手机无线端页面 设计淘宝手机无线端页面方法【详解】

一、无线端各种尺寸和要求

可以传一个小于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模式下,浏览宝贝比较慢,在怎么优化图片,也就那样了,需要点一下出来几张这样。

淘宝相关文章