網(wǎng)店美工與視覺設(shè)計(jì)-第八章-無線端店鋪視覺設(shè)計(jì)課件

網(wǎng)店美工

無線端店鋪視覺設(shè)計(jì)第8章網(wǎng)店美工無線端店鋪視覺設(shè)計(jì)第8章目錄contents8.1無線端店鋪視覺設(shè)計(jì)8.2無線端店鋪的設(shè)計(jì)目錄contents8.1無線端店鋪視覺設(shè)計(jì)8.8.1無線端店鋪視覺設(shè)計(jì)v在當(dāng)今互聯(lián)網(wǎng)時(shí)代，智能手機(jī)的運(yùn)用幾乎遍布整個(gè)世界，人們?cè)絹碓阶⒅厥謾C(jī)端的研究開發(fā)與應(yīng)用，而隨著智能手機(jī)設(shè)備的發(fā)展而成熟，淘寶不停地把流量引到移動(dòng)端上，現(xiàn)在移動(dòng)端流量占比達(dá)80%以上。另外，手機(jī)端頁面的設(shè)計(jì)有許多的規(guī)范，大到整個(gè)頁面的排版和呈現(xiàn)方式，小到一個(gè)圖標(biāo)的尺寸，這都關(guān)系到視覺頁面的美觀程度以及用戶體驗(yàn)。因此，對(duì)于電商企業(yè)來說，無線端店鋪視覺設(shè)計(jì)成為重點(diǎn)關(guān)注對(duì)象之一。無線端店鋪的設(shè)計(jì)特點(diǎn)淘寶無線端就是相對(duì)于PC端而言的移動(dòng)設(shè)備上的淘寶，即手機(jī)、平板等移動(dòng)設(shè)備上的淘寶應(yīng)用，如可用手機(jī)登錄淘寶網(wǎng)，或者通過“手機(jī)淘寶”“天貓”等軟件查看。無線端店鋪旨在滿足不同用戶的購物需求，其中聚合了大量的功能，呈現(xiàn)出了流量大、點(diǎn)擊率高、轉(zhuǎn)化率高等特點(diǎn)。從無線端店鋪的搜索來看，無線搜索延續(xù)了PC端淘寶軟件的人氣算法，并加入買家的差異化行為習(xí)慣進(jìn)行調(diào)整。8.1無線端店鋪視覺設(shè)計(jì)v在當(dāng)今互聯(lián)網(wǎng)時(shí)8.1無線端店鋪視覺設(shè)計(jì)v無線端店鋪與PC端店鋪的區(qū)別近年來，用戶流量越來越多地涌向了手機(jī)端，大家已經(jīng)漸漸習(xí)慣在手機(jī)上看新聞、刷朋友圈和購物了，絕大部分淘寶賣家也可以明顯地感受到手機(jī)端的訂單成交比重已經(jīng)趕超PC端。但是值得注意的是，手機(jī)端有其自身的特點(diǎn)，在店鋪的推廣運(yùn)營上絕不能照搬PC端的策略和方法，接下來了解無線端店鋪和PC端店鋪的差異。（1）在使用人群方面（2）在使用時(shí)間段方面（3）在停留時(shí)間方面（4）在使用場景方面（5）在個(gè)性化展示方面（6）在瀏覽商品方面8.1無線端店鋪視覺設(shè)計(jì)v無線端店鋪與PC端店鋪的區(qū)別（8.1無線端店鋪視覺設(shè)計(jì)8.1無線端店鋪視覺設(shè)計(jì)目錄contents8.1無線端店鋪視覺設(shè)計(jì)8.2無線端店鋪的設(shè)計(jì)目錄contents8.1無線端店鋪視覺設(shè)計(jì)8.8.2.1無線端店鋪裝修要點(diǎn)在設(shè)計(jì)無線端店鋪首頁前需要明白，無線端店鋪首頁的布局決定著店鋪內(nèi)流量的流轉(zhuǎn)效果。下面將從裝修風(fēng)格、頁面布局和商品主圖三個(gè)方面來介紹無線端店鋪設(shè)計(jì)的主要內(nèi)容。8.2.1無線端店鋪裝修要點(diǎn)在設(shè)計(jì)無線端8.2.1無線端店鋪裝修要點(diǎn)1．裝修風(fēng)格在設(shè)計(jì)無線端店鋪前，賣家需要根據(jù)自己的產(chǎn)品和店鋪定位來選擇合適的裝修風(fēng)格。為了營造更好的視覺效果，店鋪內(nèi)運(yùn)用的色彩和風(fēng)格應(yīng)該保持統(tǒng)一。除此之外，還要體現(xiàn)出店鋪的品牌文化及形象，給顧客留下好印象。如圖所示為定位店鋪風(fēng)格的三個(gè)要素。8.2.1無線端店鋪裝修要點(diǎn)1．裝修風(fēng)格8.2.1無線端店鋪裝修要點(diǎn)2．頁面布局在PC端，打開的商品頁面可以直接往下拉，加載的速度也很快。但在移動(dòng)端，消費(fèi)者沒有那么多的耐心，所以頁面布局就非常重要。在移動(dòng)端打開一個(gè)商品頁面時(shí)，消費(fèi)者從上到下看到的內(nèi)容是：主圖、標(biāo)題、價(jià)格、寶貝評(píng)價(jià)、問大家、店鋪的基本信息。8.2.1無線端店鋪裝修要點(diǎn)2．頁面布局8.2.1無線端店鋪裝修要點(diǎn)3．商品主圖無線端店鋪裝修中最重要的環(huán)節(jié)就是設(shè)計(jì)商品主圖。主圖制作要盡量按照淘寶的規(guī)則，第一張圖的主要作用就是吸引消費(fèi)者點(diǎn)擊，寶貝的點(diǎn)擊率全靠這張圖，第二張圖可做白底無Logo和水印以便突出產(chǎn)品本身，剩下的一些主圖也很重要，因?yàn)楹芏酂o線端的買家在購物時(shí)只看主圖。8.2.1無線端店鋪裝修要點(diǎn)3．商品主圖8.2.2無線端店鋪裝修思路1．清晰的導(dǎo)購思路用戶在看手機(jī)的時(shí)候會(huì)比較放松，如果在幾秒內(nèi)不能吸引到他，那么就流失了客戶。因此，擁有一個(gè)清晰的導(dǎo)購思路是非常重要的。無線端店鋪頁面的設(shè)計(jì)核心是模塊化，平臺(tái)對(duì)頁面模塊的數(shù)量也有限制，因此要利用有限的模塊創(chuàng)造更多的價(jià)值。普遍的無線端店鋪首頁由以下幾部分組成：店招、海報(bào)、分類入口、優(yōu)惠券、單品展示等。8.2.2無線端店鋪裝修思路1．清晰的導(dǎo)購思路8.2.2無線端店鋪裝修思路2．簡潔的店鋪色調(diào)屬性在設(shè)計(jì)學(xué)中有一條“七秒鐘定律”，有研究表明，“人關(guān)注一個(gè)商品的時(shí)間通常為7秒鐘，而這7秒鐘的時(shí)間內(nèi)70%的人確定購買的第一要素是色彩”。同一版塊內(nèi)不要超過3種顏色。這三種顏色可以看作是主色、輔助色、點(diǎn)綴色。百歲山礦泉水的無線端店鋪頁面，白色是主色，藍(lán)色是輔助色，紅色是點(diǎn)綴色。設(shè)計(jì)師使用這樣的配色方案是根據(jù)恒大冰泉的品牌主色而決定的。這樣的配色方案就能讓這個(gè)頁面看起來十分地和諧統(tǒng)一，因?yàn)闊o線端店鋪的頁面本身就很小，實(shí)在不適合過多地賣弄色彩。8.2.2無線端店鋪裝修思路2．簡潔的店鋪色調(diào)屬性8.2.2無線端店鋪裝修思路3．首頁布局確定了店鋪裝修風(fēng)格之后，就需要設(shè)計(jì)首頁布局。無線端店鋪詳情頁寬度可以做到750～1240像素，由于手機(jī)屏幕和流量的關(guān)系，無線端店鋪詳情頁最好控制在10屏以下，每屏切割為多個(gè)小屏。產(chǎn)品圖片要突出整體場景，重視效果圖和搭配感覺。首頁上各類模塊的搭配要統(tǒng)一、簡潔。好的頁面布局能夠吸引更多顧客駐足。賣家可以先設(shè)計(jì)店鋪首頁的整體框架結(jié)構(gòu)，再單獨(dú)調(diào)整各個(gè)模塊的內(nèi)容。一般，常見的店鋪頁面布局包括店招、導(dǎo)航條、全屏海報(bào)、產(chǎn)品促銷輪播海報(bào)、產(chǎn)品自定義主圖展示區(qū)等。8.2.2無線端店鋪裝修思路3．首頁布局8.2.2無線端店鋪裝修思路4．圖片布局技巧無線端店鋪首頁大多是以豆腐塊的形式展現(xiàn)，范圍確實(shí)有限，因此在選擇圖片上要盡量使用半身圖或局部特寫圖，避免視覺上的不清晰。另外，要兼顧圖片與圖片之間的過度搭配，如果全部都用半身圖或局部特寫圖，頁面就會(huì)顯得單調(diào)和乏味。所以可以適當(dāng)?shù)卮┎逡恍┤皥D，有意識(shí)地調(diào)整頁面的節(jié)奏，使得整個(gè)頁面更加和諧、活潑，如圖所示，全景圖與局部圖交替使用。8.2.2無線端店鋪裝修思路4．圖片布局技巧8.2.2無線端店鋪裝修思路5．圖文搭配的排列技巧排版是為了統(tǒng)一布局文字和圖片。在面積較小的情況下，統(tǒng)一能讓頁面看起來變得更大，還能避免因?yàn)椤皝y”和“雜”而產(chǎn)生的廉價(jià)感。從上面的無線海報(bào)案例看出，無線端店鋪的海報(bào)設(shè)計(jì)相對(duì)于PC端的海報(bào)設(shè)計(jì)簡直是小菜一碟，但想要做好它也不是容易的事情，讀者可以根據(jù)實(shí)操積累的經(jīng)驗(yàn)總結(jié)出一些規(guī)律。例如，文字大多是占整個(gè)海報(bào)的1/2或1/3，文字應(yīng)盡量地放在同一個(gè)區(qū)域，在設(shè)計(jì)的時(shí)候，要注意文字間的關(guān)系，字體上粗下細(xì)、上大下小，架構(gòu)主次分明。另外，無線端店鋪首頁的位置有限，在設(shè)計(jì)的時(shí)候要注意分清主次。先想清楚這個(gè)海報(bào)中要突出的重點(diǎn)是什么，是促銷信息還是推寶貝，這些都是要在設(shè)計(jì)之前明確的內(nèi)容。8.2.2無線端店鋪裝修思路5．圖文搭配的排列技巧8.2.2無線端店鋪裝修思路6．產(chǎn)品類目布局技巧從吸引買家的角度來講，如果店鋪類目明確，如餐具按照不同功能分為盤子、碗和杯具(如圖)，買家就能快速找到自己想要的商品。畢竟，不是所有人都只沖著一款產(chǎn)品而來。有條件的話，可以在首頁提供多種選擇，這樣做實(shí)際是在幫賣家留住顧客。從顏色搭配上來說，如果不做裝修，在產(chǎn)品較多的情況下，分類頁與主頁的色調(diào)容易沖突。如圖所示的箱包類店鋪首頁中，不同用途的箱包搭配不同的顏色，如黃色和出游類箱包搭配，黑色和商務(wù)出差類箱包搭配，紅色和開學(xué)季優(yōu)惠商品搭配。如圖所示的店鋪首頁頁尾設(shè)計(jì)展示了店鋪內(nèi)的商品分類、結(jié)束語、領(lǐng)取優(yōu)惠券和店鋪地圖，方便買家按需選擇。8.2.2無線端店鋪裝修思路6．產(chǎn)品類目布局技巧8.2.3無線端店鋪模板參數(shù)介紹無線端店鋪首頁包含系統(tǒng)推薦模塊和自定義模塊，左圖是系統(tǒng)推薦模塊，可以隨機(jī)從店里選擇已有的產(chǎn)品，不用單獨(dú)設(shè)計(jì)；右圖是自定義模塊，這個(gè)需要懂代碼才能安裝。8.2.3無線端店鋪模板參數(shù)介紹無線端店鋪首頁包8.2.3無線端店鋪模板參數(shù)介紹下面以系統(tǒng)推薦模塊為例進(jìn)行介紹首頁的頂部是輪播海報(bào)，這里可以放多個(gè)輪播圖片，因無線端店鋪的屏幕限制，建議放1～3張即可，建議尺寸為608像素×304像素，或者使所有圖片保持統(tǒng)一的長寬比。這里可以放店鋪的主推款，還有一些店鋪公告。8.2.3無線端店鋪模板參數(shù)介紹下面以系統(tǒng)推薦模塊為例進(jìn)8.2.3無線端店鋪模板參數(shù)介紹輪播海報(bào)的下面是奪眼球的地方，很多店鋪的活動(dòng)信息或者促銷優(yōu)惠券會(huì)放在這里，如果放優(yōu)惠券，最多只能放6個(gè)，尺寸統(tǒng)一。接下來可以添加店鋪分類，比如是賣衣服的，可以分為外套、裙子、褲子等熱賣主推的類目，尺寸建議設(shè)為296像素×160像素。如果用其他尺寸，則保持統(tǒng)一標(biāo)準(zhǔn)即可。8.2.3無線端店鋪模板參數(shù)介紹輪播海報(bào)的下面是網(wǎng)店美工

無線端店鋪視覺設(shè)計(jì)第8章網(wǎng)店美工無線端店鋪視覺設(shè)計(jì)第8章目錄contents8.1無線端店鋪視覺設(shè)計(jì)8.2無線端店鋪的設(shè)計(jì)目錄contents8.1無線端店鋪視覺設(shè)計(jì)8.8.1無線端店鋪視覺設(shè)計(jì)v在當(dāng)今互聯(lián)網(wǎng)時(shí)代，智能手機(jī)的運(yùn)用幾乎遍布整個(gè)世界，人們?cè)絹碓阶⒅厥謾C(jī)端的研究開發(fā)與應(yīng)用，而隨著智能手機(jī)設(shè)備的發(fā)展而成熟，淘寶不停地把流量引到移動(dòng)端上，現(xiàn)在移動(dòng)端流量占比達(dá)80%以上。另外，手機(jī)端頁面的設(shè)計(jì)有許多的規(guī)范，大到整個(gè)頁面的排版和呈現(xiàn)方式，小到一個(gè)圖標(biāo)的尺寸，這都關(guān)系到視覺頁面的美觀程度以及用戶體驗(yàn)。因此，對(duì)于電商企業(yè)來說，無線端店鋪視覺設(shè)計(jì)成為重點(diǎn)關(guān)注對(duì)象之一。無線端店鋪的設(shè)計(jì)特點(diǎn)淘寶無線端就是相對(duì)于PC端而言的移動(dòng)設(shè)備上的淘寶，即手機(jī)、平板等移動(dòng)設(shè)備上的淘寶應(yīng)用，如可用手機(jī)登錄淘寶網(wǎng)，或者通過“手機(jī)淘寶”“天貓”等軟件查看。無線端店鋪旨在滿足不同用戶的購物需求，其中聚合了大量的功能，呈現(xiàn)出了流量大、點(diǎn)擊率高、轉(zhuǎn)化率高等特點(diǎn)。從無線端店鋪的搜索來看，無線搜索延續(xù)了PC端淘寶軟件的人氣算法，并加入買家的差異化行為習(xí)慣進(jìn)行調(diào)整。8.1無線端店鋪視覺設(shè)計(jì)v在當(dāng)今互聯(lián)網(wǎng)時(shí)8.1無線端店鋪視覺設(shè)計(jì)v無線端店鋪與PC端店鋪的區(qū)別近年來，用戶流量越來越多地涌向了手機(jī)端，大家已經(jīng)漸漸習(xí)慣在手機(jī)上看新聞、刷朋友圈和購物了，絕大部分淘寶賣家也可以明顯地感受到手機(jī)端的訂單成交比重已經(jīng)趕超PC端。但是值得注意的是，手機(jī)端有其自身的特點(diǎn)，在店鋪的推廣運(yùn)營上絕不能照搬PC端的策略和方法，接下來了解無線端店鋪和PC端店鋪的差異。（1）在使用人群方面（2）在使用時(shí)間段方面（3）在停留時(shí)間方面（4）在使用場景方面（5）在個(gè)性化展示方面（6）在瀏覽商品方面8.1無線端店鋪視覺設(shè)計(jì)v無線端店鋪與PC端店鋪的區(qū)別（8.1無線端店鋪視覺設(shè)計(jì)8.1無線端店鋪視覺設(shè)計(jì)目錄contents8.1無線端店鋪視覺設(shè)計(jì)8.2無線端店鋪的設(shè)計(jì)目錄contents8.1無線端店鋪視覺設(shè)計(jì)8.8.2.1無線端店鋪裝修要點(diǎn)在設(shè)計(jì)無線端店鋪首頁前需要明白，無線端店鋪首頁的布局決定著店鋪內(nèi)流量的流轉(zhuǎn)效果。下面將從裝修風(fēng)格、頁面布局和商品主圖三個(gè)方面來介紹無線端店鋪設(shè)計(jì)的主要內(nèi)容。8.2.1無線端店鋪裝修要點(diǎn)在設(shè)計(jì)無線端8.2.1無線端店鋪裝修要點(diǎn)1．裝修風(fēng)格在設(shè)計(jì)無線端店鋪前，賣家需要根據(jù)自己的產(chǎn)品和店鋪定位來選擇合適的裝修風(fēng)格。為了營造更好的視覺效果，店鋪內(nèi)運(yùn)用的色彩和風(fēng)格應(yīng)該保持統(tǒng)一。除此之外，還要體現(xiàn)出店鋪的品牌文化及形象，給顧客留下好印象。如圖所示為定位店鋪風(fēng)格的三個(gè)要素。8.2.1無線端店鋪裝修要點(diǎn)1．裝修風(fēng)格8.2.1無線端店鋪裝修要點(diǎn)2．頁面布局在PC端，打開的商品頁面可以直接往下拉，加載的速度也很快。但在移動(dòng)端，消費(fèi)者沒有那么多的耐心，所以頁面布局就非常重要。在移動(dòng)端打開一個(gè)商品頁面時(shí)，消費(fèi)者從上到下看到的內(nèi)容是：主圖、標(biāo)題、價(jià)格、寶貝評(píng)價(jià)、問大家、店鋪的基本信息。8.2.1無線端店鋪裝修要點(diǎn)2．頁面布局8.2.1無線端店鋪裝修要點(diǎn)3．商品主圖無線端店鋪裝修中最重要的環(huán)節(jié)就是設(shè)計(jì)商品主圖。主圖制作要盡量按照淘寶的規(guī)則，第一張圖的主要作用就是吸引消費(fèi)者點(diǎn)擊，寶貝的點(diǎn)擊率全靠這張圖，第二張圖可做白底無Logo和水印以便突出產(chǎn)品本身，剩下的一些主圖也很重要，因?yàn)楹芏酂o線端的買家在購物時(shí)只看主圖。8.2.1無線端店鋪裝修要點(diǎn)3．商品主圖8.2.2無線端店鋪裝修思路1．清晰的導(dǎo)購思路用戶在看手機(jī)的時(shí)候會(huì)比較放松，如果在幾秒內(nèi)不能吸引到他，那么就流失了客戶。因此，擁有一個(gè)清晰的導(dǎo)購思路是非常重要的。無線端店鋪頁面的設(shè)計(jì)核心是模塊化，平臺(tái)對(duì)頁面模塊的數(shù)量也有限制，因此要利用有限的模塊創(chuàng)造更多的價(jià)值。普遍的無線端店鋪首頁由以下幾部分組成：店招、海報(bào)、分類入口、優(yōu)惠券、單品展示等。8.2.2無線端店鋪裝修思路1．清晰的導(dǎo)購思路8.2.2無線端店鋪裝修思路2．簡潔的店鋪色調(diào)屬性在設(shè)計(jì)學(xué)中有一條“七秒鐘定律”，有研究表明，“人關(guān)注一個(gè)商品的時(shí)間通常為7秒鐘，而這7秒鐘的時(shí)間內(nèi)70%的人確定購買的第一要素是色彩”。同一版塊內(nèi)不要超過3種顏色。這三種顏色可以看作是主色、輔助色、點(diǎn)綴色。百歲山礦泉水的無線端店鋪頁面，白色是主色，藍(lán)色是輔助色，紅色是點(diǎn)綴色。設(shè)計(jì)師使用這樣的配色方案是根據(jù)恒大冰泉的品牌主色而決定的。這樣的配色方案就能讓這個(gè)頁面看起來十分地和諧統(tǒng)一，因?yàn)闊o線端店鋪的頁面本身就很小，實(shí)在不適合過多地賣弄色彩。8.2.2無線端店鋪裝修思路2．簡潔的店鋪色調(diào)屬性8.2.2無線端店鋪裝修思路3．首頁布局確定了店鋪裝修風(fēng)格之后，就需要設(shè)計(jì)首頁布局。無線端店鋪詳情頁寬度可以做到750～1240像素，由于手機(jī)屏幕和流量的關(guān)系，無線端店鋪詳情頁最好控制在10屏以下，每屏切割為多個(gè)小屏。產(chǎn)品圖片要突出整體場景，重視效果圖和搭配感覺。首頁上各類模塊的搭配要統(tǒng)一、簡潔。好的頁面布局能夠吸引更多顧客駐足。賣家可以先設(shè)計(jì)店鋪首頁的整體框架結(jié)構(gòu)，再單獨(dú)調(diào)整各個(gè)模塊的內(nèi)容。一般，常見的店鋪頁面布局包括店招、導(dǎo)航條、全屏海報(bào)、產(chǎn)品促銷輪播海報(bào)、產(chǎn)品自定義主圖展示區(qū)等。8.2.2無線端店鋪裝修思路3．首頁布局8.2.2無線端店鋪裝修思路4．圖片布局技巧無線端店鋪首頁大多是以豆腐塊的形式展現(xiàn)，范圍確實(shí)有限，因此在選擇圖片上要盡量使用半身圖或局部特寫圖，避免視覺上的不清晰。另外，要兼顧圖片與圖片之間的過度搭配，如果全部都用半身圖或局部特寫圖，頁面就會(huì)顯得單調(diào)和乏味。所以可以適當(dāng)?shù)卮┎逡恍┤皥D，有意識(shí)地調(diào)整頁面的節(jié)奏，使得整個(gè)頁面更加和諧、活潑，如圖所示，全景圖與局部圖交替使用。8.2.2無線端店鋪裝修思路4．圖片布局技巧8.2.2無線端店鋪裝修思路5．圖文搭配的排列技巧排版是為了統(tǒng)一布局文字和圖片。在面積較小的情況下，統(tǒng)一能讓頁面看起來變得更大，還能避免因?yàn)椤皝y”和“雜”而產(chǎn)生的廉價(jià)感。從上面的無線海報(bào)案例看出，無線端店鋪的海報(bào)設(shè)計(jì)相對(duì)于PC端的海報(bào)設(shè)計(jì)簡直是小菜一碟，但想要做好它也不是容易的事情，讀者可以根據(jù)實(shí)操積累的經(jīng)驗(yàn)總結(jié)出一些規(guī)律。例如，文字大多是占整個(gè)海報(bào)的1/2或1/3，文字應(yīng)盡量地放在同一個(gè)區(qū)域，在設(shè)計(jì)的時(shí)候，要注意文字間的關(guān)系，字體上粗下細(xì)、上大下小，架構(gòu)主次分明。另外，無線端店鋪首頁的位置有限，在設(shè)計(jì)的時(shí)候要注意分清主次。先想清楚這個(gè)海報(bào)中要突出的重點(diǎn)是什么，是促銷信息還是推寶貝，這些都是要在設(shè)計(jì)之前明確的內(nèi)容。8.2.2無線端店鋪裝修思路5．圖文搭配的排列技巧8.2.2無線端店鋪裝修思路6．產(chǎn)品類目布局技巧從吸引買家的角度來講，如果店鋪類目明確，如餐具按照不同功能分為盤子、碗和杯具(如圖)