手機(jī)淘寶店鋪首頁裝修技巧

一、手機(jī)淘寶店鋪首頁裝修技巧

手機(jī)淘寶店鋪首頁裝修有別于pc端，不能直接通過代碼實(shí)現(xiàn)進(jìn)行效果的實(shí)現(xiàn)，而是需要通過添加裝修平臺提供各種模塊來實(shí)現(xiàn)無線端首頁的裝修。無線端裝修平臺模塊

除了以上的模塊，當(dāng)然還有不可或缺的店招模塊。那么就讓我們分別來了解下較為主要的模塊不同的作用與使用制作技巧吧。 焦點(diǎn)圖模塊——焦點(diǎn)圖模塊相當(dāng)于pc端的輪播海報(bào)，其尺寸為608*304。作為海報(bào)，它承擔(dān)著宣傳我們店鋪主題活動(dòng)，主打產(chǎn)品的責(zé)任。在設(shè)計(jì)焦點(diǎn)海報(bào)時(shí)，我們應(yīng)以簡約排版位置，以便更全面更清晰的表達(dá)出主題內(nèi)容。一般的排版方式有左右排版方式和上下排版方式，。 壓縮圖片大小，降低頁面加載時(shí)間：在手機(jī)淘寶店鋪首頁中，圖頁面片的大小是影響頁面加載速度主要原因。那我們怎樣才能有效壓縮圖片的大小，又不影響圖片呈現(xiàn)的質(zhì)量呢?一般，我們完成了一張圖，保存時(shí)是通過“另存為”jpg格式實(shí)現(xiàn)的。 選擇結(jié)構(gòu)簡單的字體;在字體中，有些字體有著很多的裝飾，使得字體更具有設(shè)計(jì)感與美感。然而，在我們的手機(jī)淘寶往往就會因?yàn)檫@是裝飾導(dǎo)致文字看不清。 黑體”等簡單字體為主。 提煉文字信息;過多的文字也是影響用戶閱讀的主要因素之一。為了把所有文字都放在圖片里，我們往往會把文字縮的很小，那用戶閱讀自然就困難了，而且一堆文字也會影響我們整體的視覺效果。因此，我們在做無線端時(shí)，要對我們的文案進(jìn)行提煉，將多余的，修飾性的文字刪除，保留主要的內(nèi)容，從而簡化我們的文字信息。 文字與背景對比要強(qiáng)烈;手機(jī)淘寶店鋪首頁圖文并茂是必須的。但是，如果我們的問題內(nèi)容跟主體背景顏色差異太小的話，文字很容易會被忽略掉，也難讓用戶用心去閱讀。因此，我們制作手機(jī)淘寶店鋪首頁時(shí)，在選擇文字方面，要偏向于高對比度的，暗色背景配高亮字體如白色，黃色等。而亮色背景則以暗色字體為主，如黑色，暗紅色等。

1、店鋪店招——店招顧名思義就是店鋪的招牌。而在無線端，店招格式是固定的，其左邊為店鋪logo及店鋪名，右邊為收藏按鈕和一張可以自定義的750*254像素的背景圖。

店招作為手機(jī)淘寶店鋪首頁的第一眼看到的位置，無疑可以作為展現(xiàn)我們品牌調(diào)性或者主動(dòng)活動(dòng)的比較佳位置。在設(shè)計(jì)店招時(shí)，我們可以以符合品牌調(diào)性或者相應(yīng)活動(dòng)的背景作為主調(diào)，再配以簡短的一句口號即可。

需要注意的是，我們的背景不宜太雜亂，排版以簡潔為主，文字不宜過多，且避免文字與固定模塊重疊，導(dǎo)致表述不全，影響效果。而我們在制作店招時(shí)，亮度可以稍微高點(diǎn)，因?yàn)闊o線端店招會在背景前默認(rèn)添加一層黑色半透明的圖層，導(dǎo)致背景亮度下降。如果本來背景亮度太低就很容易導(dǎo)致背景太暗而影響效果。

2、 焦點(diǎn)圖模塊——焦點(diǎn)圖模塊相當(dāng)于pc端的輪播海報(bào)，其尺寸為608*304。作為海報(bào)，它承擔(dān)著宣傳我們店鋪主題活動(dòng)，主打產(chǎn)品的責(zé)任。在設(shè)計(jì)焦點(diǎn)海報(bào)時(shí)，我們應(yīng)以簡約排版位置，以便更全面更清晰的表達(dá)出主題內(nèi)容。一般的排版方式有左右排版方式和上下排版方式，。

3、自定義模塊——自定義模塊為我們的手機(jī)淘寶店鋪首頁設(shè)計(jì)提供了比較大的自由度，在自定義模塊里我們可以自由添加標(biāo)題，海報(bào)及寶貝，并且能很好的配合品牌與主題活動(dòng)的風(fēng)格。在設(shè)計(jì)自定義模塊時(shí)，排版建議簡單，寶貝陳列以整齊的左右排版(1)，也可以作些生動(dòng)的改變，使風(fēng)格更為凸顯(2)。

需要注意的是，在陳列寶貝時(shí)，一行的寶貝不建議超過兩個(gè)，否則會導(dǎo)致寶貝過小，影響展示。在設(shè)計(jì)自定義模塊時(shí)，有一個(gè)小技巧：先將大致的排版畫個(gè)草稿，然后在無線端的自定義模塊上添加上圖片為證，比較后以每個(gè)圖片的位置與尺寸在photoshop畫上輔助線再進(jìn)行創(chuàng)作。

其他的模塊則以文字與自動(dòng)模塊為主，在這里就不一一細(xì)說了，只需按照模塊規(guī)定的尺寸制作，謹(jǐn)記以簡約位置就可以了。在我們了解了模塊的應(yīng)用方式以后，讓我們從用戶體驗(yàn)出發(fā)，再一次提升我們頁面的效果吧。

二、提升用戶體驗(yàn)

手機(jī)淘寶店鋪首頁跟pc端的首頁一樣，有著展現(xiàn)品牌形象與引導(dǎo)流量的重要作用。因此，一個(gè)良好的用戶體驗(yàn)，無疑能很好地增加用戶對品牌的影響，并且能更好更快的讓用戶找到自己想要的信息，加強(qiáng)流量引導(dǎo)的效果，促進(jìn)成交。我們知道，手機(jī)淘寶店鋪首頁主要呈現(xiàn)在用戶的移動(dòng)設(shè)備上，手機(jī)淘寶店鋪首頁尺寸比pc端首頁的尺寸小很多。

因此，手機(jī)淘寶店鋪首頁影響用戶體驗(yàn)的因素主要有兩個(gè)方面：1、頁面加載時(shí)間過長;2、頁面信息不清晰。那么，提升用戶體驗(yàn)我們可以從這兩方面下手。

1、 壓縮圖片大小，降低頁面加載時(shí)間：在手機(jī)淘寶店鋪首頁中，圖頁面片的大小是影響頁面加載速度主要原因。那我們怎樣才能有效壓縮圖片的大小，又不影響圖片呈現(xiàn)的質(zhì)量呢?一般，我們完成了一張圖，保存時(shí)是通過“另存為”jpg格式實(shí)現(xiàn)的。

通過這種方式保存的圖片就是降低圖片質(zhì)量，所減少圖片大小并不明顯，我們可以通過“存儲為web所用格式”并且適當(dāng)降低品質(zhì)，從而大大減少圖片的大小，一般將品質(zhì)設(shè)置為50-60之間，可以有效的降低圖片的大小，并且不會對圖片質(zhì)量產(chǎn)生較大影響。

2、 優(yōu)化文字，簡化頁面排版，讓頁面清晰明了。

先說文字吧，手機(jī)淘寶頁面尺寸比pc端小很多，我們平時(shí)在pc端用的各種創(chuàng)意字體適配到手機(jī)淘寶時(shí)，可能都會因?yàn)槌叽鐔栴}而導(dǎo)致文字信息看不清。因此，我們在制作手機(jī)淘寶頁面時(shí)，文字使用要注意三個(gè)要點(diǎn)：

(1) 選擇結(jié)構(gòu)簡單的字體;在字體中，有些字體有著很多的裝飾，使得字體更具有設(shè)計(jì)感與美感。然而，在我們的手機(jī)淘寶往往就會因?yàn)檫@是裝飾導(dǎo)致文字看不清。

所以，我們在選擇字體時(shí)，盡量去選擇結(jié)構(gòu)較為簡單的字體。對于標(biāo)題性文字，因?yàn)樽煮w尺寸會較的，在選擇字體時(shí)可以稍微靈活些，只需盡量避免使用一些裝飾復(fù)雜和書法字體就可以了。如“華康娃娃體”等字體都可以隨心使用。而內(nèi)容性文字，則建議以“ 黑體”等簡單字體為主。

(2) 提煉文字信息;過多的文字也是影響用戶閱讀的主要因素之一。為了把所有文字都放在圖片里，我們往往會把文字縮的很小，那用戶閱讀自然就困難了，而且一堆文字也會影響我們整體的視覺效果。因此，我們在做無線端時(shí)，要對我們的文案進(jìn)行提煉，將多余的，修飾性的文字刪除，保留主要的內(nèi)容，從而簡化我們的文字信息。

(3) 文字與背景對比要強(qiáng)烈;手機(jī)淘寶店鋪首頁圖文并茂是必須的。但是，如果我們的問題內(nèi)容跟主體背景顏色差異太小的話，文字很容易會被忽略掉，也難讓用戶用心去閱讀。因此，我們制作手機(jī)淘寶店鋪首頁時(shí)，在選擇文字方面，要偏向于高對比度的，暗色背景配高亮字體如白色，黃色等。而亮色背景則以暗色字體為主，如黑色，暗紅色等。

除了文字需要清晰明了外，手機(jī)淘寶店鋪首頁的排版更是要簡單易懂。在手機(jī)淘寶，由于用戶屏幕較pc端的小，可操作性也相對低。過于復(fù)雜的首頁排版很容易找不到重心，使得我們的主推產(chǎn)品吸引不了用戶的主要，也使得用戶找不到自己想要東西，從而形成跳失。因此，在排版時(shí)，我們要注意：促銷信息優(yōu)先展示，主推寶貝排列靠前，分流導(dǎo)航清晰。以下是手機(jī)淘寶店鋪裝修的很好的案例，以供大家參考：