如何設(shè)計(jì)淘寶手機(jī)無線端頁面

一、無線端各種尺寸和要求
可以傳一個(gè)小于200K的mp3音頻文件。
圖片最多可以傳30張,單張圖片寬度在480px-620px內(nèi),單張圖片高度小于等于960px。
可以添加文本模塊,每個(gè)模塊不超過500字符。(文本模塊沒有任何樣式可編輯,連首空格2字都不能。行間距不能調(diào)整,字體大小、顏色、加粗等不能調(diào)整,被逼無奈我只能全部做成圖片了。這點(diǎn)希望官方后續(xù)能考慮放寬。)
所有的東西加起來不能超過1.5M。
二、無線端頁面設(shè)計(jì)要點(diǎn)
在無線端的詳情頁是沒有店招的,設(shè)計(jì)一個(gè)店招,這樣會(huì)增強(qiáng)視覺,提升品牌形象。如圖:
一張無線端的海報(bào)圖
可以是主推產(chǎn)品,或者形象展示,這樣看起來會(huì)大氣很多。圖片不可以做鏈接,且所有的圖片和文字在無線端都不可以做鏈接。
內(nèi)容精簡,挑重點(diǎn)說。
不要把你所有PC端的內(nèi)容都縮小照搬到無線端,原因是pc端圖片縮小后文字會(huì)很小,在手機(jī)上看不清楚,原因之二,pc端就那么小一點(diǎn)地方,挑重點(diǎn)內(nèi)容來做就行了,有wifi還好,沒wifi的話別浪費(fèi)買家的流量了。
不要使用太多色彩
顏色信息太豐富的圖片,圖片體積必然會(huì)增大。千萬要記住這是無線端,能小則小。盡量使用單色背景,或者淺色圖片,推薦使用“極簡”設(shè)計(jì)理念。這樣的圖在無線端上看其來會(huì)很清晰和舒服。
字體大小的問題,也是最重要的問題。
經(jīng)過我反復(fù)的測(cè)試得出這個(gè)經(jīng)驗(yàn):我選用的是620px寬的尺寸,正文文字使用(雅黑 26px 模式為銳利)的時(shí)候,在手機(jī)上瀏覽感覺最舒服。不要以為26px在pc上看起來很大,其實(shí)在手機(jī)上顯示是很小的。有圖為例
標(biāo)題是(雅黑 32px Bold 銳利)正文是(雅黑 26px 銳利 行間距自動(dòng)),看起來很大是吧?那我們來看看這個(gè)文本在手機(jī)上是多大,由于Iphone截圖會(huì)把圖片放大,沒辦法做到手機(jī)上的效果。
圖片優(yōu)化的問題,也非常的重要。
每張圖片都必須要優(yōu)化,否則很大,PS里劃好切片以后Ctrl+Alt+Shift鍵 打開優(yōu)化界面,逐一選中每個(gè)切片去優(yōu)化,嘗試不同的格式,有時(shí)候在JPG格式下50%的質(zhì)量,仍然比GIF格式大,這要取決于你的圖片顏色信息。如果顏色比較單一,首選GIF,如果是一些復(fù)雜的圖片,則選JPG。另外有一點(diǎn),有時(shí)候GIF和JPG都很大的情況下選擇PNG8,會(huì)小很多。反正這三個(gè)格式淘寶都支持。
盡量在保證圖片質(zhì)量的情況下,去減小圖片大小,有時(shí)候pc上看起來圖片質(zhì)量壓縮過度了,但在手機(jī)上看效果還不錯(cuò),這個(gè)需要自己去慢慢體會(huì)。
順便說下,我們的現(xiàn)在是29張圖片607k+mp3 197k 還不算是太大,符合淘寶的1.5M以內(nèi)。
不要把圖片或者文字使用切片攔腰斬?cái)?/p>
每個(gè)圖片,或者沒段文字應(yīng)該切成1個(gè)圖,而不是把一張完整的圖片切成幾塊,這樣會(huì)有非常嚴(yán)重的后果。
在淘寶客戶端里面看不出來,一旦使用手機(jī)瀏覽器去看寶貝詳情的時(shí)候,圖片之間是有空隙的,如果你的圖片被攔腰斬?cái)嗔?,那就?huì)出現(xiàn)一個(gè)“斷裂帶”,希望以后淘寶修復(fù)這個(gè)問題。
關(guān)于添加mp3的問題
mp3文件只允許200k內(nèi),但這200k內(nèi)你能說一些什么呢?想過沒?那我告訴你吧,正常的語速,不帶背景音樂,能說80個(gè)字左右,還得看你壓縮的好不好,跟壓縮也有關(guān)系。
如果你想帶點(diǎn)音樂,那么只能說50個(gè)字左右。我的mp3是花錢找專業(yè)錄音的公司做的,他們反復(fù)調(diào)試了2天,才保證文件不超過200k,保證音質(zhì)不那么差,保證文字盡量多,幾個(gè)條件都很苛刻。
至于mp3的內(nèi)容你想說點(diǎn)什么,就看你想要表現(xiàn)什么了,可以表現(xiàn)品牌文化,可以是促銷,可以是產(chǎn)品介紹,可以是一段音樂,可以是...自己去想吧。給大家看看加了mp3以后,詳情頁的展示效果吧。
有木有點(diǎn)小激動(dòng),傳說中可以聽的寶貝就是這樣來的,你想不想聽聽?
補(bǔ)充:手機(jī)瀏覽器上看詳情頁,不會(huì)出現(xiàn)MP3,只有在淘寶客戶端瀏覽時(shí)候才能看見。
關(guān)于文本模塊的問題
這是個(gè)很糾結(jié)的問題,我試過了,使用文本模塊的話就會(huì)減小整個(gè)頁面的體積,但我為什么沒用文本模塊呢,有幾個(gè)原因:
1)、文本模塊不支持字體大小編輯,不支持首行空格。
2)、文本模塊不支持文字顏色編輯。
3)、文本模塊使用后,和我設(shè)計(jì)的效果圖不搭配,看其來巨難看。
我就放棄使用文本模塊了。但是有個(gè)缺點(diǎn),當(dāng)手機(jī)在沒有wifi的情況下就是E模式下,瀏覽寶貝比較慢,在怎么優(yōu)化圖片,也就那樣了,需要點(diǎn)一下出來幾張這樣。
來一張首屏吧!
相關(guān)文章
- 618手機(jī)淘寶打地鼠搶紅包技巧總結(jié)分享給大家2014-06-18
淘寶打地鼠搶紅包 淘寶網(wǎng)手機(jī)端淘寶打地鼠搶紅包活動(dòng)
淘寶怎么搶紅包?今天小編就為大家介紹淘寶網(wǎng)手機(jī)端淘寶打地鼠贏紅包活動(dòng)相關(guān)信息,感興趣的朋友可以看一下2014-06-18- 手機(jī)淘寶碼上淘怎么玩,這個(gè)可以讓你快速找到你手上同類的商品,通過掃商品的條碼找到同款商品,現(xiàn)在使用碼上淘還可以獲得掃獎(jiǎng)的機(jī)會(huì)。下面筆者來演示一下手機(jī)淘寶碼上淘使2014-06-12
手機(jī)淘寶二維碼在哪里?手機(jī)淘寶怎么掃描二維碼?
手機(jī)淘寶二維碼在哪里?手機(jī)淘寶怎么掃描二維碼?本篇文章將會(huì)告訴大家,感興趣的朋友可以看一下2014-06-11手機(jī)淘寶怎么掃二維碼 手機(jī)淘寶掃描二維碼方法圖解
現(xiàn)在大家都知道二維碼的廣泛使用,手機(jī)淘寶也不例外,現(xiàn)在好多淘寶商家都直接做成二維碼的圖片,我們只要輕輕一點(diǎn)就可以購買到精美的物品了。不過手機(jī)淘寶怎么掃描二維碼呢2014-06-10手機(jī)淘寶發(fā)現(xiàn)功能怎么用 發(fā)現(xiàn)使用方法圖解
手機(jī)淘寶最新推出的新版本中有一項(xiàng)發(fā)現(xiàn)功能,聽名字讓人對(duì)這個(gè)功能是一頭霧水,那么究竟這個(gè)功能有什么用呢,一起跟著手機(jī)世界小編來看看吧,告訴你們手機(jī)淘寶發(fā)現(xiàn)怎么用,2014-06-09手機(jī)淘寶無法付款怎么辦?手機(jī)淘寶不能付款的原因及解決方法
有網(wǎng)友說手機(jī)淘寶無法付款怎么辦?為此小編今天給大家?guī)淼氖鞘謾C(jī)淘寶不能付款的原因及解決方法,有興趣的朋友可以看一下2014-05-26手機(jī)淘寶怎么確認(rèn)收貨 使用手機(jī)淘寶確認(rèn)收貨教程圖解
如何使用手機(jī)淘寶進(jìn)行收貨?大家在使用手機(jī)淘寶購物時(shí),在收到貨后該如何給買家確認(rèn)收貨呢?今天,小編就給大家講解一下手機(jī)淘寶怎么確認(rèn)收貨?希望對(duì)大家有所幫助2014-05-23手機(jī)淘寶怎么申請(qǐng)售后 手機(jī)淘寶申請(qǐng)售后流程圖解
現(xiàn)在大家都喜歡使用手機(jī)淘寶購買商品,不過所有的商品都不是說不會(huì)損壞的。如果商品壞了什么申請(qǐng)售后呢?手機(jī)可以申請(qǐng)?zhí)詫毷酆髥??答案可以的,但是如何使用手機(jī)淘寶什么售2014-05-20手機(jī)淘寶怎么申請(qǐng)退貨 使用手機(jī)淘寶什么申請(qǐng)退款流程圖文詳解
手機(jī)淘寶怎么申請(qǐng)退貨或退款?經(jīng)常購物的朋友們都知道在網(wǎng)頁上如何操作淘寶退換貨和退款流程,那么如果在不方便使用電腦的情況下,我們?nèi)绾问褂檬謾C(jī)淘寶進(jìn)行退換貨申請(qǐng)呢?2014-05-15