網(wǎng)店美工與視覺(jué)設(shè)計(jì)（第二版）課件 第4-9章 店鋪Logo與主圖的視覺(jué)設(shè)計(jì)- 移動(dòng)端網(wǎng)店的視覺(jué)設(shè)計(jì)與裝修

第四章店鋪Logo與主圖的視覺(jué)設(shè)計(jì)網(wǎng)店美工與視覺(jué)設(shè)計(jì)學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)1.了解Logo的定義、分類；2.理解Logo的設(shè)計(jì)原則；3.掌握Logo的設(shè)計(jì)方法；4.掌握主圖的設(shè)計(jì)規(guī)范；5.掌握主圖的設(shè)計(jì)思路與方法。能力目標(biāo)1.能夠設(shè)計(jì)并制作出符合店鋪風(fēng)格的Logo；2.能夠熟練完成高點(diǎn)擊率主圖的制作。素養(yǎng)目標(biāo)1.培養(yǎng)讀者的設(shè)計(jì)與創(chuàng)新能力；2.培養(yǎng)讀者對(duì)Logo釋義的提煉和設(shè)計(jì)傳達(dá)能力。4.1Logo的視覺(jué)設(shè)計(jì)

Logo是一種標(biāo)志，主要通過(guò)造型簡(jiǎn)單和意義明確的視覺(jué)符號(hào)，將經(jīng)營(yíng)理念、企業(yè)文化、經(jīng)營(yíng)內(nèi)容、企業(yè)規(guī)模和產(chǎn)品特性等要素傳遞給買家,使其能夠明確識(shí)別和認(rèn)同店鋪的圖案和文字。

Logo是店鋪視覺(jué)形象的核心，也是構(gòu)成店鋪形象的基本特征,能夠體現(xiàn)店鋪的內(nèi)在素質(zhì)它不僅是調(diào)動(dòng)視覺(jué)要素的主導(dǎo)力量，也是整合視覺(jué)要素的中心，更是買家認(rèn)同店鋪品牌的代表。4.1.1Logo的定義

Logo是徽標(biāo)或者商標(biāo)的英文說(shuō)法，起到對(duì)徽標(biāo)擁有企業(yè)的識(shí)別和推廣的作用，通過(guò)形象的Logo可以讓消費(fèi)者記住公司主體和品牌文化。Logo是一個(gè)品牌的視覺(jué)外露，是品牌傳播的符號(hào)，其真正的力量是Logo背后的品牌氣質(zhì)與精神，是品牌的產(chǎn)品與服務(wù)。企業(yè)通過(guò)可視的圖形，讓用戶感覺(jué)到看不到的品牌，這就是Logo的意義。品牌的聯(lián)想與產(chǎn)品的使用感受，最終凝聚在一個(gè)記憶符號(hào)上。4.1.2Logo的類型從常見(jiàn)的店鋪Logo表現(xiàn)形態(tài)來(lái)看，Logo的類型主要有：中文文字型、英文文字型、中英文組合型、圖形型、圖文結(jié)合型。4.1.3評(píng)價(jià)Logo的標(biāo)準(zhǔn)

優(yōu)秀的Logo首先需要具備創(chuàng)新性。

優(yōu)秀的Logo應(yīng)具備思想性。

優(yōu)秀的Logo應(yīng)具備易傳播的特性。

優(yōu)秀的Logo應(yīng)具備美感。

優(yōu)秀的Logo應(yīng)具備易用性。4.1.4Logo的設(shè)計(jì)思路1、明確網(wǎng)店策略2、明確品類策略定位3、明確風(fēng)格定位4、明確元素5、明確字體6、明確色調(diào)4.1.5如何向領(lǐng)導(dǎo)或客戶推銷你的Logo告訴客戶這個(gè)logo是再怎么來(lái)的。我是怎么思考的，最終的logo作品是怎么樣一步步到現(xiàn)在的這個(gè)樣子的。這就是推導(dǎo)。還要告訴客戶，這個(gè)logo可以怎么用，放到名片上有多精致，掛到大樓上是有多大氣。讓客戶看到自己品牌的未來(lái)。這就是延展。兩段加在一起，呈現(xiàn)給客戶，這就是提案。4.1.5如何向領(lǐng)導(dǎo)或客戶推銷你的Logo

【案例】客戶阿黃，開(kāi)了一家小雞吃米米店，需要做一個(gè)logo。你的終稿如下如所示。想一想：大家覺(jué)得這樣行嗎？你做好的一個(gè)logo用這樣的呈現(xiàn)方式給你的客戶，客戶能接受嗎？4.1.5如何向領(lǐng)導(dǎo)或客戶推銷你的Logo

當(dāng)你做完logo，不能只是簡(jiǎn)單的導(dǎo)一張圖出來(lái)，需要一個(gè)提案。4.1.6Logo的制作Logo是店鋪裝修中必不可少的一部分。4.2主圖的設(shè)計(jì)與制作主圖的構(gòu)成

在網(wǎng)店設(shè)計(jì)中，產(chǎn)品主圖作為產(chǎn)品的流量入口，對(duì)引流有著關(guān)鍵作用。下面就主圖的尺寸、設(shè)計(jì)規(guī)范、設(shè)計(jì)要點(diǎn)和方法進(jìn)行介紹。4.2.1主圖的尺寸要求

對(duì)于主圖的詳細(xì)尺寸，一般情況下，電商平臺(tái)沒(méi)有硬性要求，但是主圖盡量做成正方形，像素在700*700（包含）以上，通常做成800*800像素的大小。在淘寶平臺(tái)，主圖尺寸達(dá)到700*700像素（包含）以上，即可在詳情頁(yè)自動(dòng)生成放大鏡的效果，而在天貓平臺(tái)，要實(shí)現(xiàn)放大鏡的效果，要求主圖尺寸必須在800*800像素（包含）以上。很多企業(yè)在多個(gè)電商平臺(tái)開(kāi)設(shè)店鋪，為了減少工作量，通常主圖都會(huì)設(shè)計(jì)成800*800像素大小。

主圖的格式要求比較寬泛，常見(jiàn)的bmp、png、jpg等圖片格式均可，圖片大小控制在500k以內(nèi)。4.2.2主圖的設(shè)計(jì)規(guī)范

在進(jìn)行主圖的設(shè)計(jì)時(shí)，應(yīng)遵守主圖設(shè)計(jì)規(guī)范，具體要求如下：

首先，產(chǎn)品主體一定要顯眼、清晰，占總體比例的三分之二左右。主圖中可以加入促銷信息，但要簡(jiǎn)單明了，促銷信息不要喧賓奪主，字?jǐn)?shù)控制在10字以內(nèi)。

其次，主圖上盡量有店鋪Logo或名稱，加強(qiáng)品牌感，如果使用Logo，一般放在主圖的左上角。

4.2.2主圖的設(shè)計(jì)規(guī)范

在進(jìn)行主圖的設(shè)計(jì)時(shí)，應(yīng)遵守主圖設(shè)計(jì)規(guī)范，具體要求如下：

第三，主圖上的文案信息避免多個(gè)文字區(qū)域，或大面積鋪蓋，這樣會(huì)干擾到用戶正常查看寶貝。

第四，主圖中的產(chǎn)品最好選用單一產(chǎn)品，過(guò)多的產(chǎn)品容易分散用戶的注意力。

4.2.2主圖的設(shè)計(jì)規(guī)范

在進(jìn)行主圖的設(shè)計(jì)時(shí)，應(yīng)遵守主圖設(shè)計(jì)規(guī)范，具體要求如下：

最后，主圖應(yīng)盡量避免拼接圖形，拼接圖的整體視覺(jué)效果會(huì)顯得非常凌亂，即使是高檔產(chǎn)品也無(wú)法營(yíng)造出高品質(zhì)的視覺(jué)效果.4.2.3主圖設(shè)計(jì)思路1、從市場(chǎng)出發(fā)，做好產(chǎn)品定位不僅是網(wǎng)店的店長(zhǎng)、店鋪運(yùn)營(yíng)，其實(shí)美工也應(yīng)該明確產(chǎn)品的定位，要知道店鋪賣什么，賣給誰(shuí)以及怎么賣。只有做好產(chǎn)品定位，明確產(chǎn)品在市場(chǎng)中處于什么位置，明確目標(biāo)人群，才能知道主圖設(shè)計(jì)的出發(fā)點(diǎn)在哪里。2、參考同行，提煉賣點(diǎn)在做主圖之前，除了要全面地了解產(chǎn)品信息，還要了解行業(yè)內(nèi)具有同樣定位的產(chǎn)品主圖，通過(guò)對(duì)比，提煉產(chǎn)品的賣點(diǎn)和優(yōu)勢(shì)。分析買家需求以及痛點(diǎn)，然后將其在主圖上給予適當(dāng)?shù)恼故?，刺激需求?.2.3主圖設(shè)計(jì)思路3、差異化的視覺(jué)效果在搜索結(jié)果頁(yè)面眾多的商品面前，差異化的視覺(jué)效果更容易引起買家的點(diǎn)擊，但對(duì)于一些標(biāo)準(zhǔn)化的產(chǎn)品，要做到差異化不容易，所以設(shè)計(jì)師在制作主圖時(shí)，盡量在跟上同行水平的基礎(chǔ)上，再做一定的差異化。4.2.3主圖設(shè)計(jì)思路4、確定主圖風(fēng)格和文案信息主圖風(fēng)格應(yīng)符合產(chǎn)品及行業(yè)屬性，符合目標(biāo)客戶人群喜好。商品圖片搭配簡(jiǎn)單的文案信息，能夠更好的提升主圖的點(diǎn)擊率。確定好風(fēng)格和文案信息后，即可按照主圖的設(shè)計(jì)規(guī)范進(jìn)行主圖的設(shè)計(jì)和制作了。4.2.4主圖的制作本案例將制作洗面奶主圖，在該主圖中需要體現(xiàn)產(chǎn)品的logo和促銷信息。本章小結(jié)主圖的構(gòu)成

本章介紹了Logo和主圖的設(shè)計(jì)與制作。Logo方面，主要介紹了Logo的定義、類型、評(píng)價(jià)標(biāo)準(zhǔn)、設(shè)計(jì)思路和提案等內(nèi)容。主圖方面，主要介紹了主圖的尺寸要求、主圖設(shè)計(jì)規(guī)范和設(shè)計(jì)思路。實(shí)訓(xùn)活動(dòng)主圖的構(gòu)成實(shí)訓(xùn)目的：掌握Logo和主圖的設(shè)計(jì)與制作實(shí)訓(xùn)內(nèi)容：商品主圖的制作實(shí)訓(xùn)要求：1、請(qǐng)為一兒童玩具店鋪（店鋪名稱為：歡樂(lè)時(shí)光）設(shè)計(jì)一個(gè)Logo，要求logo簡(jiǎn)潔、個(gè)性，易于傳播和記憶，且美觀、精致。完成Logo提案，即Logo設(shè)計(jì)的推導(dǎo)過(guò)程+應(yīng)用延展+呈現(xiàn)；2、利用素材圖4-28，設(shè)計(jì)一幅商品主圖，將Logo至于主圖左上角。主圖要要能夠體現(xiàn)商品的賣點(diǎn)和特色，和同行業(yè)商品主圖形成差異性。網(wǎng)店美工與視覺(jué)設(shè)計(jì)第五章網(wǎng)店首頁(yè)視覺(jué)設(shè)計(jì)學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)1.熟悉并掌握店鋪首頁(yè)各個(gè)模塊的設(shè)計(jì)要點(diǎn)及主要內(nèi)容；2.了解店鋪首頁(yè)的頁(yè)面結(jié)構(gòu)及常見(jiàn)布局；3.掌握店鋪首頁(yè)的設(shè)計(jì)制作流程。能力目標(biāo)1.能夠獨(dú)立設(shè)計(jì)制作出符合店鋪風(fēng)格的店鋪首頁(yè)；2.能夠完成詳情頁(yè)中各個(gè)模塊設(shè)計(jì)；2.能夠根據(jù)需要對(duì)店鋪首頁(yè)進(jìn)行裝修。素養(yǎng)目標(biāo)1.培養(yǎng)讀者遵守平臺(tái)規(guī)范的意識(shí)；2.培養(yǎng)讀者主動(dòng)學(xué)習(xí)的習(xí)慣。5.1網(wǎng)絡(luò)店鋪首頁(yè)裝修及其設(shè)計(jì)思路

網(wǎng)店裝修通過(guò)圖形圖像軟件對(duì)商品照片進(jìn)行修飾，利用美學(xué)設(shè)計(jì)對(duì)素材、文字和照片進(jìn)行組合，給人以舒適的、直觀的視覺(jué)感受，讓買家從設(shè)計(jì)好的網(wǎng)店中了解到更多的商品信息和店鋪信息。5.1.1網(wǎng)店首頁(yè)裝修設(shè)計(jì)的目的

網(wǎng)店的頁(yè)面裝修的漂亮別致，首先從視覺(jué)方面就能打動(dòng)消費(fèi)者的心，讓消費(fèi)者感覺(jué)到賣家對(duì)店鋪的用心，從而增添對(duì)店鋪商品的信任感。而賣家把所有的關(guān)于店鋪的基本信息展示在店鋪首頁(yè)，讓消費(fèi)者能第一時(shí)間很清晰地了解到店鋪的所有信息，同時(shí)也能加深消費(fèi)者對(duì)店鋪的印象，促進(jìn)消費(fèi)者對(duì)店鋪內(nèi)商品的購(gòu)買，增加商品的成交量。良好的店鋪裝修效果能很好的提升店鋪的形象，增加消費(fèi)者對(duì)店鋪的關(guān)注度，提高店鋪點(diǎn)擊率。5.1.2網(wǎng)店店鋪首頁(yè)基本布局合理的布局不但可以增加店鋪黏性，提升新老顧客的忠誠(chéng)度，還可以達(dá)到更好的視覺(jué)效果和用戶體驗(yàn)效果。在安排店鋪首頁(yè)布局時(shí)應(yīng)組合排列，將各模塊合理的布局到店鋪首頁(yè)。合理的布局不但可以增加店鋪黏性，提升新老顧客的忠誠(chéng)度，還可以達(dá)到更好的視覺(jué)效果和用戶體驗(yàn)效果。5.2店鋪首頁(yè)核心模塊設(shè)計(jì)主圖的構(gòu)成

店鋪首頁(yè)的常用模塊通常包含：店鋪招牌、導(dǎo)航欄、輪播海報(bào)、產(chǎn)品推薦、商品展示區(qū)、店尾等。5.2.1店招的設(shè)計(jì)制作

1、店招設(shè)計(jì)要求店招內(nèi)容：從內(nèi)容上講，店招上可以放置店鋪名稱、Logo、廣告語(yǔ)、促銷產(chǎn)品、關(guān)注按鈕、優(yōu)惠券、搜索框、店鋪公告等一系列信息。5.2.1店招的設(shè)計(jì)制作

1、店招設(shè)計(jì)要求店招分類：店招分為常規(guī)店招和通欄店招，常規(guī)店招的寬度尺寸為950像素，高度尺寸不超過(guò)120像素。通欄店招的寬度尺寸為1920像素，高度尺寸不超過(guò)150像素。5.2.1店招的設(shè)計(jì)制作

1、店招設(shè)計(jì)要求設(shè)計(jì)原則：店招設(shè)計(jì)要遵守的第一個(gè)原則是品牌形象的植入。品牌形象的植入可以通過(guò)店鋪名稱、店鋪Logo的展示來(lái)進(jìn)行。第二個(gè)原則是抓住產(chǎn)品定位，產(chǎn)品定位是指展示店鋪賣什么產(chǎn)品，自己店鋪的賣點(diǎn)、特點(diǎn)、優(yōu)勢(shì)、差異化等，精準(zhǔn)的產(chǎn)品定位可以快速吸引目標(biāo)消費(fèi)群體進(jìn)入店鋪。5.2.1店招的設(shè)計(jì)制作

2、不同類型店招的設(shè)計(jì)品牌宣傳類：首先要考慮和品牌相關(guān)元素的應(yīng)用，如店鋪名稱、Logo、廣告標(biāo)語(yǔ)，因?yàn)檫@是品牌宣傳最基本的內(nèi)容載體；其次是關(guān)注按鈕、關(guān)注人數(shù)、收藏按鈕，可以側(cè)面反映店鋪實(shí)力；第三是搜索框、第二導(dǎo)航等能夠提升用戶體驗(yàn)的內(nèi)容。5.2.1店招的設(shè)計(jì)制作

2、不同類型店招的設(shè)計(jì)活動(dòng)促銷類：首先放置店鋪名稱、Logo等內(nèi)容。接下來(lái)要考慮的因素是活動(dòng)信息、優(yōu)惠券、促銷產(chǎn)品等和活動(dòng)相關(guān)的信息；最后考慮的是搜索框、旺旺、第二導(dǎo)航等方便用戶體驗(yàn)的內(nèi)容。5.2.1店招的設(shè)計(jì)制作

2、不同類型店招的設(shè)計(jì)產(chǎn)品推廣類：在店招上，同樣是先擺放店鋪名、logo、廣告語(yǔ)等，然后要主打促銷產(chǎn)品以及和產(chǎn)品匹配的促銷信息、優(yōu)惠券、活動(dòng)信息等；最后是搜索框、第二導(dǎo)航條等方便用戶體驗(yàn)的內(nèi)容。5.2.1店招的設(shè)計(jì)制作2、不同類型店招的設(shè)計(jì)5.2.2輪播海報(bào)設(shè)計(jì)1、輪播海報(bào)設(shè)計(jì)要求全屏輪播海報(bào)寸：全屏輪播圖片的寬度為1920像素，高度一般以400像素—800像素為最佳。5.2.2輪播海報(bào)設(shè)計(jì)1、輪播海報(bào)設(shè)計(jì)要求常規(guī)輪播海報(bào)寸：使用淘寶中的“輪播圖”模塊可以制作常規(guī)輪播圖，按寬度可以細(xì)分為通欄輪播圖（950像素），如左圖所示。右側(cè)輪播圖（750像素），左側(cè)輪播圖（190像素），如右圖所示。5.2.2輪播海報(bào)設(shè)計(jì)1、輪播海報(bào)設(shè)計(jì)要求輪播海報(bào)設(shè)計(jì)要點(diǎn)：制作全屏輪播海報(bào)的時(shí)要保證其在構(gòu)圖方式、色彩搭配、字體應(yīng)用等方面風(fēng)格一致，整體畫面保持簡(jiǎn)潔美觀、主題突出、能夠吸引買家注意。此外，由于用戶的屏幕分辨率不同，每個(gè)用戶看到的界面會(huì)有所差異，為了保證不同分辨率的用戶在觀看輪播海報(bào)時(shí)，都能看全面、看清晰，在輪播海報(bào)的設(shè)計(jì)中，應(yīng)將主要產(chǎn)品及文案信息盡可能的居中顯示。5.2.2輪播海報(bào)設(shè)計(jì)2、全屏輪播海報(bào)設(shè)計(jì)制作5.2.3優(yōu)惠券的設(shè)計(jì)制作優(yōu)惠券的使用范圍：明確優(yōu)惠券的使用范圍和使用方式，例如是全店通用，還是僅限店內(nèi)的單款、新品或者某系列商品使用。明確優(yōu)惠券的使用范圍可以限定消費(fèi)對(duì)象，起到引導(dǎo)店鋪流量走向的作用。優(yōu)惠券的使用條件：如全場(chǎng)購(gòu)物滿168元可以使用10元優(yōu)惠券、滿288元可以使用20元優(yōu)惠券。限制優(yōu)惠券的使用條件，可以在刺激客戶消費(fèi)的同時(shí)最大限度地保證利潤(rùn)。優(yōu)惠券的使用時(shí)間：如果店鋪開(kāi)展短期推廣，一般應(yīng)設(shè)置優(yōu)惠券的到期時(shí)間以接近消費(fèi)周期為佳，該周期一般為1個(gè)月。若是做促銷活動(dòng)，那么優(yōu)惠券的使用周期為對(duì)應(yīng)的促銷天數(shù)。限制使用時(shí)間可以讓顧客產(chǎn)生過(guò)期浪費(fèi)的心理，提高顧客的轉(zhuǎn)化率。5.2.3客服模塊的設(shè)計(jì)制作2、優(yōu)惠券的設(shè)計(jì)與制作5.2.4商品陳列展示模塊設(shè)計(jì)1、商品陳列展示模塊設(shè)計(jì)要求商品類別要明確：進(jìn)行分類展示，可以使商品顯得更加豐富、整潔、美觀且容易刺激消費(fèi)者的購(gòu)物欲望。突出商品的價(jià)格和購(gòu)買按鈕：對(duì)于價(jià)格和購(gòu)買按鈕突出顯示，通?？梢圆捎梅糯?、加粗或者使用對(duì)比色等方法。5.2.4商品陳列展示模塊設(shè)計(jì)2、商品陳列展示模塊設(shè)計(jì)制作5.2.5店鋪?lái)?yè)尾區(qū)設(shè)計(jì)

頁(yè)尾位于店鋪的最后一屏，一般用于放置店鋪的收藏區(qū)、手機(jī)店鋪的二維碼、禮品或者購(gòu)物需知和店鋪公告等內(nèi)容，其目的在于加強(qiáng)品牌記憶，給顧客購(gòu)物安全感，希望顧客下次光臨。5.2.5店鋪?lái)?yè)尾區(qū)設(shè)計(jì)

1、店鋪?lái)?yè)尾模塊設(shè)計(jì)要求產(chǎn)品的分類便于消費(fèi)者再次瀏覽網(wǎng)頁(yè)；返回頂部的文字或者按鈕當(dāng)?shù)赇來(lái)?yè)面過(guò)長(zhǎng)時(shí)，添加返回頂部的文字或按鈕可以快速跳轉(zhuǎn)到頁(yè)面頂部，從而方便用戶反復(fù)瀏覽網(wǎng)店；收藏、分享店鋪在頁(yè)尾添加收藏與分享店鋪的鏈接，可以方便用戶快速收藏或分享店鋪，盡量留住客戶；溫馨提示如發(fā)貨須知、關(guān)于色差、關(guān)于售后等信息，以便于幫助顧客快速解決購(gòu)物過(guò)程中的問(wèn)題。5.2.5店鋪?lái)?yè)尾區(qū)設(shè)計(jì)2、店鋪?lái)?yè)尾模塊設(shè)計(jì)制作本章小結(jié)主圖的構(gòu)成

網(wǎng)店首頁(yè)代表了網(wǎng)店的形象，作為門面擔(dān)當(dāng)，首頁(yè)頁(yè)面設(shè)計(jì)的美觀性不僅可以激發(fā)買家的購(gòu)買欲，對(duì)轉(zhuǎn)化率也有很大影響。本章介紹了網(wǎng)店首頁(yè)模塊的視覺(jué)設(shè)計(jì)方法及技巧，包括店招、輪播海報(bào)、寶貝推薦模塊、頁(yè)尾的設(shè)計(jì)與制作。實(shí)訓(xùn)活動(dòng)主圖的構(gòu)成實(shí)訓(xùn)內(nèi)容：自選一女裝類網(wǎng)店，重新為期設(shè)計(jì)店鋪首頁(yè)。實(shí)訓(xùn)目的：練習(xí)網(wǎng)店首頁(yè)的視覺(jué)設(shè)計(jì)與制作。實(shí)訓(xùn)要求：1、根據(jù)店鋪、產(chǎn)品的特性，設(shè)計(jì)以品牌宣傳、活動(dòng)促銷或產(chǎn)品推廣為主題的店招，店招尺寸為950*120像素；2、設(shè)計(jì)并制作全屏海報(bào)，尺寸為1920*600像素；3、設(shè)計(jì)并制作頁(yè)尾區(qū)域，寬度為950像素，高度不限。頁(yè)尾內(nèi)容應(yīng)包括但不限于：引導(dǎo)收藏、聯(lián)系方式；4、要求整體風(fēng)格一致，形式美觀，和產(chǎn)品、店鋪定位相匹配。網(wǎng)店美工與視覺(jué)設(shè)計(jì)第六章商品詳情頁(yè)的設(shè)計(jì)制作學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)1.了解商品詳情頁(yè)設(shè)計(jì)的重要性；2.熟悉商品詳情頁(yè)的設(shè)計(jì)思路；3.掌握商品詳情頁(yè)設(shè)計(jì)要點(diǎn)與技巧。能力目標(biāo)1.能夠抓住不同商品的特點(diǎn)設(shè)計(jì)出別具一格的商品詳情頁(yè)；2.能夠熟練制作焦點(diǎn)圖、功能圖、展示圖、細(xì)節(jié)圖等。素養(yǎng)目標(biāo)1.培養(yǎng)讀者對(duì)詳情頁(yè)內(nèi)容的總結(jié)、分析、規(guī)劃能力；2.提升讀者對(duì)詳情頁(yè)內(nèi)容的布局和展現(xiàn)能力。6.1商品詳情頁(yè)及其設(shè)計(jì)思路

商品詳情頁(yè)是提高網(wǎng)店轉(zhuǎn)化率的重要入口，是網(wǎng)店中最容易與買家產(chǎn)生交集的頁(yè)面，一個(gè)好的商品詳情頁(yè)勝過(guò)一位優(yōu)秀的銷售專員，商品詳情頁(yè)就是用圖文混排的視覺(jué)語(yǔ)言傳達(dá)商品的特性與屬性，對(duì)網(wǎng)絡(luò)消費(fèi)者購(gòu)買行為產(chǎn)生影響，因此，商品詳情頁(yè)需要同銷售專員一樣從客戶的需求出發(fā)，站在消費(fèi)者的角度想問(wèn)題。6.1.1認(rèn)識(shí)商品詳情頁(yè)商品詳情頁(yè)也叫做寶貝描述頁(yè)，顧名思義，指淘寶、京東等電子商務(wù)平臺(tái)中對(duì)所售商品以圖片、文字、視頻等各種手段進(jìn)行展示的表現(xiàn)形式。6.1.2商品詳情頁(yè)的作用具體來(lái)講，在詳情頁(yè)的設(shè)計(jì)中，應(yīng)達(dá)到以下目標(biāo)：? 引發(fā)買家興趣、激發(fā)顧客的消費(fèi)欲望；? 通過(guò)詳情頁(yè)圖片和文字介紹讓買家全面了解產(chǎn)品；? 樹立買家對(duì)商品的信任感，打消消費(fèi)疑慮，促使下單；? 降低服務(wù)成本、提升客單價(jià)。6.1.3商品詳情頁(yè)規(guī)格

各個(gè)電子商務(wù)平臺(tái)的商品詳情頁(yè)的標(biāo)準(zhǔn)略有不同，都有各自的尺寸和標(biāo)準(zhǔn)，主流平臺(tái)詳情頁(yè)圖片的建議尺寸如圖所示。6.2商品詳情頁(yè)的制作要點(diǎn)主圖的構(gòu)成

商品詳情頁(yè)是電子商務(wù)平臺(tái)中買家最為關(guān)注的頁(yè)面，商品詳情頁(yè)不僅要展示商品圖片和內(nèi)容，更要營(yíng)造一種氛圍和意境，使顧客愿意下單購(gòu)買商品。6.2.1詳情頁(yè)前期策劃

商品信息收集：在制作商品詳情頁(yè)之前，需要仔細(xì)閱讀廠家提供的產(chǎn)品介紹資料或者在互聯(lián)網(wǎng)查詢類似的商品的參考數(shù)據(jù)，了解產(chǎn)品的名稱、顏色、尺寸、重量等基本屬性信息。6.2.1詳情頁(yè)前期策劃

競(jìng)品市場(chǎng)調(diào)研：在眾多的網(wǎng)絡(luò)商品以及商家面前，買家會(huì)對(duì)他感興趣的東西進(jìn)行挑選、對(duì)比，然后再確定購(gòu)買，因此制作產(chǎn)品詳情頁(yè)就要在眾多商品中中，找到與自己屬性差不多的產(chǎn)品進(jìn)行對(duì)比分析。通過(guò)查看同類同檔次且銷量在前10的寶貝詳情頁(yè)，收集以下信息。6.2.1詳情頁(yè)前期策劃

商品賣點(diǎn)挖掘：商品的賣點(diǎn)是指商品具備前所未有、別出心裁或與眾不同的特色、特點(diǎn)。通常我們采用FAB法或者從產(chǎn)品概念進(jìn)行產(chǎn)品賣點(diǎn)挖掘。6.2.1詳情頁(yè)前期策劃

商品素材整理：商品詳情頁(yè)制作過(guò)程中，一般需要收集的素材包括：經(jīng)過(guò)美化處理的白色背景圖、商品場(chǎng)景圖、模特圖、細(xì)節(jié)圖等，還有互聯(lián)網(wǎng)上搜集相關(guān)商品時(shí)的搜索到的網(wǎng)絡(luò)素材等。6.2.2詳情頁(yè)設(shè)計(jì)思路

確定頁(yè)面風(fēng)格：頁(yè)面風(fēng)格主要是根據(jù)產(chǎn)品本身來(lái)定的，通過(guò)分析產(chǎn)品的屬性、產(chǎn)品的功能以及客戶人群，最后確定頁(yè)面風(fēng)格。6.2.2詳情頁(yè)設(shè)計(jì)思路焦點(diǎn)圖——引發(fā)興趣目標(biāo)客戶群設(shè)計(jì)——買給誰(shuí)用，自己能不能使用。場(chǎng)景圖——激發(fā)潛在需求商品細(xì)節(jié)——逐步信任為什么購(gòu)買——好處設(shè)計(jì)、痛點(diǎn)設(shè)計(jì)同類商品對(duì)比——為什么選擇我的產(chǎn)品客戶評(píng)價(jià)、第三方評(píng)價(jià)——產(chǎn)生信任購(gòu)后的感覺(jué)塑造——給客戶一個(gè)100%購(gòu)買的理由給客戶購(gòu)買理由——送戀人、孝敬父母、送領(lǐng)導(dǎo)、送朋友等發(fā)出購(gòu)買號(hào)召——為什么立刻品牌介紹購(gòu)買須知——郵費(fèi)、發(fā)貨、退貨等關(guān)聯(lián)推薦6.2.2詳情頁(yè)設(shè)計(jì)思路

確定配色方案：對(duì)于店鋪已經(jīng)有視覺(jué)規(guī)范的情況下，可以繼續(xù)沿用已有的配色方案，在沒(méi)有視覺(jué)規(guī)范，無(wú)從下手的時(shí)候，提供幾種配色的技巧。從LOGO提取，從LOGO提取配色方案比較適合已有店鋪VI系統(tǒng)或者線下的知名品牌。從產(chǎn)品本身或者行業(yè)屬性提取，比如醫(yī)療行業(yè)，可選取藍(lán)色作為主色；家具行業(yè)可選取綠色作為主色。從產(chǎn)品的聯(lián)想屬性提取，比如嬰幼兒產(chǎn)品，為了凸顯寶寶的可愛(ài)、純潔，多選用粉色和純凈的淺藍(lán)色。6.2.2詳情頁(yè)設(shè)計(jì)思路

文字在詳情頁(yè)中起到對(duì)商品及活動(dòng)等信息的解釋和說(shuō)明的作用，具體規(guī)范內(nèi)容如下：一般不超過(guò)3種字體；重點(diǎn)的部分要突出顯示，注意文字大小、粗細(xì)、疏密的對(duì)比；字體顏色的選擇不宜過(guò)于復(fù)雜，避免影響閱讀；字體選擇要符合產(chǎn)品的定位；字號(hào)一般要大于12號(hào)。6.2.2詳情頁(yè)設(shè)計(jì)思路

頁(yè)面上線：制作完成的商品詳情頁(yè)面，需要相關(guān)部門進(jìn)行審核，確保萬(wàn)無(wú)一失。頁(yè)面上傳前一定要對(duì)詳情頁(yè)進(jìn)行切圖處理，如果整張大圖直接上傳發(fā)布，由于圖片太大，買家打開(kāi)頁(yè)面時(shí)，加載時(shí)間會(huì)很長(zhǎng)，因此會(huì)增加了頁(yè)面的跳失率。兼顧平臺(tái)對(duì)pc端和移動(dòng)端的要求，每張圖片不超過(guò)200K（圖片越小越便于快速呈現(xiàn)），圖片總數(shù)不超過(guò)20張。6.2.2詳情頁(yè)設(shè)計(jì)思路修改完善：頁(yè)面發(fā)布后要對(duì)其進(jìn)行測(cè)試，測(cè)試電腦端、手機(jī)端頁(yè)面的打開(kāi)速度，結(jié)合運(yùn)營(yíng)相關(guān)數(shù)據(jù)對(duì)頁(yè)面進(jìn)行優(yōu)化調(diào)整，力求頁(yè)面完善。6.3商品詳情頁(yè)核心模塊設(shè)計(jì)主圖的構(gòu)成

商品詳情頁(yè)核心模塊主要包括焦點(diǎn)圖模塊、商品基本參數(shù)設(shè)計(jì)、商品賣點(diǎn)設(shè)計(jì)、商品展示設(shè)計(jì)、商品細(xì)節(jié)設(shè)計(jì)等。6.3.1商品焦點(diǎn)圖設(shè)計(jì)

詳情頁(yè)的焦點(diǎn)圖一般位于商品詳情描述的上方，是為推廣該款商品而設(shè)計(jì)的海報(bào)，由產(chǎn)品、主題與賣點(diǎn)3部分組成，目的在于吸引消費(fèi)者購(gòu)買該產(chǎn)品，其設(shè)計(jì)方法與海報(bào)的設(shè)計(jì)方法相似。下面以兒童毛絨書包為例進(jìn)行焦點(diǎn)圖設(shè)計(jì)。6.3.2商品基本參數(shù)設(shè)計(jì)

商品基本參數(shù)是詳情頁(yè)中不可或缺的一部分，不同的商品具有不同的參數(shù)，具體內(nèi)容可根據(jù)同行產(chǎn)品進(jìn)行相應(yīng)的設(shè)置。商品參數(shù)展示方法多種多樣，可以根據(jù)參數(shù)內(nèi)容靈活多樣設(shè)計(jì)。6.3.3商品賣點(diǎn)設(shè)計(jì)

商品的亮點(diǎn)實(shí)質(zhì)為商品賣點(diǎn)的表達(dá)形式之一，商品的亮點(diǎn)可以理解為商品具備的前所未有、別出心裁或與眾不同的特點(diǎn)。下面將以兒童毛絨書包的賣點(diǎn)設(shè)計(jì)進(jìn)行展示。6.3.4商品展示設(shè)計(jì)

用戶購(gòu)買產(chǎn)品最主要看的就是產(chǎn)品展示的部分，在這里需要讓客戶對(duì)寶貝有一個(gè)直觀的感覺(jué)。通常，這個(gè)部分以圖片為主，文案為輔。按選擇的圖片素材分，可將產(chǎn)品展示圖分為擺拍圖和場(chǎng)景圖兩種類型。6.3.5商品細(xì)節(jié)圖設(shè)計(jì)

在細(xì)節(jié)圖的設(shè)計(jì)方面，需要注意的是，既然是“細(xì)節(jié)圖”，那么圖片就應(yīng)該能夠具有足夠的放大效果，使客戶能夠清晰看到細(xì)節(jié)，比如面料的紋理、拉鏈的金屬質(zhì)感等等。本章小結(jié)主圖的構(gòu)成

本章學(xué)習(xí)了網(wǎng)店詳情頁(yè)設(shè)計(jì)與制作的相關(guān)知識(shí)，合理美觀的詳情頁(yè)設(shè)計(jì)對(duì)提升店鋪的轉(zhuǎn)化率起到至關(guān)重要的作用。在詳情頁(yè)的設(shè)計(jì)過(guò)程中，除了要考慮美觀程度外，還需站在買家的角度考慮，思考買家的購(gòu)物心理和購(gòu)物流程，使詳情頁(yè)盡量符合買家的購(gòu)物心理，不僅展示商品的外觀，還需從細(xì)節(jié)方面、實(shí)力方面、產(chǎn)品特色方面以及加工制作流程等方面全面的去消除消費(fèi)者的購(gòu)物疑慮，提升購(gòu)物欲望，促成交易。實(shí)訓(xùn)活動(dòng)主圖的構(gòu)成實(shí)訓(xùn)內(nèi)容：下載本章實(shí)訓(xùn)素材，并利用相關(guān)素材設(shè)計(jì)制作一幅網(wǎng)店詳情頁(yè)。實(shí)訓(xùn)目的：練習(xí)網(wǎng)店詳情頁(yè)的視覺(jué)設(shè)計(jì)與制作。實(shí)訓(xùn)要求：1.根據(jù)給出的素材，進(jìn)行產(chǎn)品定位，進(jìn)而確定整體風(fēng)格和產(chǎn)品特色等內(nèi)容；2.構(gòu)思符合買家購(gòu)買習(xí)慣的設(shè)計(jì)思路；3.設(shè)計(jì)并制作產(chǎn)品詳情頁(yè)，寬度750像素，高度不限。網(wǎng)店美工與視覺(jué)設(shè)計(jì)第七章網(wǎng)店?duì)I銷推廣圖的制作學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)1.熟悉并掌握直通車圖的設(shè)計(jì)要點(diǎn)；2.熟悉并掌握聚劃算圖的設(shè)計(jì)要點(diǎn)；3.熟悉并掌握智能鉆展圖的設(shè)計(jì)要點(diǎn)。能力目標(biāo)1.能夠設(shè)計(jì)制作出鉆展圖；2.能夠設(shè)計(jì)制作出直通車圖片以及聚劃算主圖。素養(yǎng)目標(biāo)1.培養(yǎng)讀者與時(shí)俱進(jìn)的意識(shí)，根據(jù)平臺(tái)要求設(shè)計(jì)高點(diǎn)擊率的推廣圖；2.培養(yǎng)讀者舉一反三的能力。7.1聚劃算主圖設(shè)計(jì)制作

聚劃算是阿里巴巴集團(tuán)旗下的團(tuán)購(gòu)網(wǎng)站，是淘寶天貓內(nèi)容優(yōu)質(zhì)流量的整合。對(duì)于賣家來(lái)說(shuō)，如果聚劃算用的好，不僅可以為店鋪與商品帶來(lái)豐富的流量，更能幫助打造爆款，提升店鋪銷售額。因此，聚劃算主圖的設(shè)計(jì)就變得尤為重要，只有設(shè)計(jì)出有吸引力的聚劃算主圖，才能吸引消費(fèi)者點(diǎn)擊進(jìn)入產(chǎn)品詳情頁(yè)。7.1.1聚劃算廣告圖的設(shè)計(jì)要點(diǎn)

商品圖片：商家上傳的產(chǎn)品圖片中不得出現(xiàn)任何形式的自制標(biāo)簽以及產(chǎn)品特點(diǎn)、營(yíng)銷利益點(diǎn)等文字信息。格式規(guī)范：LOGO統(tǒng)一放置在畫面左上角，不得添加底色，顯示大小最寬不超過(guò)180像素，最高不超過(guò)120像素。LOGO最左側(cè)及最上側(cè)均離產(chǎn)品圖片左側(cè)及上側(cè)20像素。

圖片背景：圖片背景只選擇真實(shí)拍攝的實(shí)景或者單色背景其中一種。

商品構(gòu)圖：注意不要使用畫中畫，商品圖片需要展示多個(gè)主體（模特、商品）時(shí)，建議保持同類主體（模特、商品）之間比例一致且背景統(tǒng)一。7.1.2聚劃算廣告圖設(shè)計(jì)案例7.2直通車推廣圖設(shè)計(jì)制作主圖的構(gòu)成

淘寶直通車是淘寶網(wǎng)為賣家量身定制的一種推廣方式，按點(diǎn)擊付費(fèi)的效果營(yíng)銷工具，可以精準(zhǔn)推廣商品，利用直通車推廣，在給寶貝帶來(lái)曝光量的同時(shí)，精準(zhǔn)的搜索匹配也給寶貝帶來(lái)了精準(zhǔn)的潛在買家。對(duì)于直通車而言，最最重要的就是點(diǎn)擊率這個(gè)核心維度。7.2.1直通車推廣圖的設(shè)計(jì)要點(diǎn)設(shè)計(jì)定位，思考為先亮出商品，重點(diǎn)展示構(gòu)圖合理，排版統(tǒng)一7.2.2直通車廣告圖設(shè)計(jì)案例7.3

引力魔方圖設(shè)計(jì)制作主圖的構(gòu)成

引力魔方是淘寶網(wǎng)提供的一種適用于移動(dòng)端的營(yíng)銷工具，是淘寶網(wǎng)圖片類廣告位競(jìng)價(jià)投放平臺(tái)，能夠?yàn)樯碳姨峁?shù)量眾多的優(yōu)質(zhì)展位，但需要商家自行投放，并且按照點(diǎn)擊次數(shù)收取費(fèi)用。引力魔方圖就是在展位上展示的圖片，用于吸引消費(fèi)者注意力引力魔方是一個(gè)全新的推廣商品的手段，覆蓋了用戶購(gòu)買前、購(gòu)買中、購(gòu)買后的消費(fèi)全鏈路，是喚醒用戶需求的重要入口。7.3.1引力魔方廣告圖的設(shè)計(jì)要點(diǎn)

主題突出：推廣展示的過(guò)程就像一次陳述，必須要有一個(gè)明確的主題，所有的元素都必須圍繞這個(gè)主題展開(kāi)。

目標(biāo)明確：在智鉆圖的設(shè)計(jì)制作中，電商美工首先需要明確自己的營(yíng)銷目標(biāo)，然后針對(duì)目標(biāo)進(jìn)行素材的選擇和設(shè)計(jì)，這樣才能保證廣告取得較高的點(diǎn)擊率與轉(zhuǎn)化率。

形式美觀：美好的東西總是令人無(wú)法抗拒的，形式美觀主要是指從字體、色彩、構(gòu)圖、標(biāo)簽以及營(yíng)造的氣氛等方面去綜合衡量畫面質(zhì)量。7.3.2引力魔方圖設(shè)計(jì)制作本章小結(jié)主圖的構(gòu)成

本章介紹了聚劃算主圖、直通車主圖、引力魔方圖的設(shè)計(jì)與制作，以上三種圖片出現(xiàn)的位置不同，制作規(guī)范也不同，但在設(shè)計(jì)與制作的過(guò)程中都需要做到圖片風(fēng)格一致、主題突出、形式美觀、構(gòu)圖合理。實(shí)訓(xùn)活動(dòng)主圖的構(gòu)成實(shí)訓(xùn)內(nèi)容：下載本章實(shí)訓(xùn)素材，任選其中一張或幾張素材，分別設(shè)計(jì)出聚劃算主圖、直通車主圖和引力魔方圖。實(shí)訓(xùn)目的：練習(xí)聚劃算主圖、直通車主圖和引力魔方圖的視覺(jué)設(shè)計(jì)與制作。實(shí)訓(xùn)要求：1.根據(jù)給出的素材，進(jìn)行產(chǎn)品定位，進(jìn)而確定整體風(fēng)格和產(chǎn)品特色等內(nèi)容；2.提煉不同圖片類型的主題，并進(jìn)行構(gòu)圖；3.設(shè)計(jì)并制作聚劃算主圖、直通車主圖和引力魔方圖。網(wǎng)店美工與視覺(jué)設(shè)計(jì)第八章專題頁(yè)與活動(dòng)頁(yè)的視覺(jué)設(shè)計(jì)學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)1．掌握專題頁(yè)的設(shè)計(jì)與制作方法；2.掌握活動(dòng)頁(yè)的設(shè)計(jì)與制作方法。能力目標(biāo)1．能夠獨(dú)立完成專題頁(yè)的視覺(jué)設(shè)計(jì)；2.能夠獨(dú)立完成活動(dòng)頁(yè)的視覺(jué)設(shè)計(jì)。素養(yǎng)目標(biāo)1.培養(yǎng)設(shè)計(jì)與創(chuàng)新傳統(tǒng)節(jié)日類專題頁(yè)的能力。2.培養(yǎng)設(shè)計(jì)與創(chuàng)新各類活動(dòng)頁(yè)的能力。8.1專題頁(yè)的視覺(jué)設(shè)計(jì)

專題頁(yè)是一個(gè)內(nèi)容聚合頁(yè)，利用一個(gè)點(diǎn)、一件事、一個(gè)主題來(lái)策劃一個(gè)頁(yè)面或者一個(gè)活動(dòng)的流程頁(yè)面，其信息來(lái)源于同一主題的內(nèi)容(文章、圖片、視頻等)，該頁(yè)面會(huì)包括網(wǎng)站相應(yīng)模塊和頻道所涉及到的功能與該主題事件的內(nèi)容展示。電子商務(wù)領(lǐng)域的專題頁(yè)主要用于活動(dòng)推廣、產(chǎn)品上新等情況，專題頁(yè)面的設(shè)計(jì)也是網(wǎng)店美工的主要工作之一。8.1.1專題頁(yè)的設(shè)計(jì)規(guī)范1.專題頁(yè)結(jié)構(gòu)專題頁(yè)的形式多種多樣，大多數(shù)的專題結(jié)構(gòu)分為頭圖部分和內(nèi)容部分，傳統(tǒng)的專題一般只有一個(gè)主頁(yè)面，復(fù)雜的則有若干的二級(jí)頁(yè)面組成。專題頁(yè)的基本內(nèi)容主要包括：頭圖Banner＋至少1個(gè)樓層模塊＋背景＋氛圍點(diǎn)綴物8.1.1專題頁(yè)的設(shè)計(jì)規(guī)范2.設(shè)計(jì)頭圖

結(jié)構(gòu)確立接下來(lái)后就開(kāi)始著手頭圖的設(shè)計(jì)，優(yōu)秀的頭圖是專題設(shè)計(jì)的靈魂。設(shè)計(jì)頭圖首先要考慮的是頭圖的設(shè)計(jì)風(fēng)格。頭圖部分的設(shè)計(jì)是整個(gè)專題的重點(diǎn)，也是專題最需要突出的亮點(diǎn)，頭圖可以確立整個(gè)專題的基調(diào)。8.1.1專題頁(yè)的設(shè)計(jì)規(guī)范2.設(shè)計(jì)頭圖頭圖元素的設(shè)計(jì)不分楚河和漢界，要讓頭圖和下面的內(nèi)容在視覺(jué)上有聯(lián)系，打破首屏與次屏在設(shè)計(jì)上有明顯的顏色條分隔、形式分隔、線分隔等。8.1.1專題頁(yè)的設(shè)計(jì)規(guī)范2.設(shè)計(jì)頭圖

常規(guī)的頭圖主要由文案、產(chǎn)品圖、背景和按鈕四個(gè)框架構(gòu)成，而易懂性常常體現(xiàn)在文案的內(nèi)容和設(shè)計(jì)上，因此要做到文案盡量簡(jiǎn)潔通俗、文案內(nèi)容的行數(shù)盡量控制在三行以內(nèi)，確?？勺x性。8.1.1專題頁(yè)的設(shè)計(jì)規(guī)范2.設(shè)計(jì)頭圖

在設(shè)計(jì)上，不僅要做到舒服、顯眼，還要有信息層級(jí)，合理引導(dǎo)用戶第一眼的信息內(nèi)容，它通常需要設(shè)計(jì)師花費(fèi)專門的精力來(lái)制作字體的變形和特效。8.1.1專題頁(yè)的設(shè)計(jì)規(guī)范3.專題內(nèi)容區(qū)的設(shè)計(jì)內(nèi)容區(qū)與頭圖的銜接要巧妙，忌生硬。除了要突出專題頁(yè)面整體的視覺(jué)沖擊力，還需讓用戶能夠關(guān)注專題也的實(shí)質(zhì)內(nèi)容，不能因注重頭圖的設(shè)計(jì)而怠慢文案內(nèi)容。除了一些“PK性質(zhì)”的專題模塊，要注意模塊欄目分布的權(quán)重，內(nèi)容的主次要清晰，排布在邏輯上有關(guān)聯(lián)性。一些重點(diǎn)突出的模塊要和其他欄目模塊做區(qū)別設(shè)計(jì)，做到突出而不突兀。8.1.2專題頁(yè)的設(shè)計(jì)制作8.2活動(dòng)頁(yè)的視覺(jué)設(shè)計(jì)

活動(dòng)頁(yè)與專題頁(yè)中的促銷型面面類似，是針對(duì)店鋪活動(dòng)或官方活動(dòng)所制作的單獨(dú)頁(yè)面。需要注意，活動(dòng)既可以是店鋪活動(dòng)，又可以是電商平臺(tái)官方活動(dòng)，相對(duì)于專題頁(yè)更具有普遍性。8.2.1舉辦活動(dòng)的目的和作用1.縮短產(chǎn)品入市的進(jìn)程2.激勵(lì)買家初次購(gòu)買，達(dá)到使用目的3.激勵(lì)顧客再次購(gòu)買，建立消費(fèi)習(xí)慣4.提升市場(chǎng)份額，達(dá)到銷售目的5.提高網(wǎng)店信譽(yù)度8.2.2活動(dòng)頁(yè)的設(shè)計(jì)要點(diǎn)1.主題出彩

優(yōu)質(zhì)的活動(dòng)主題，不僅能讓用戶拍手叫絕，還能賦予活動(dòng)更多的內(nèi)涵與意義。在確定主題時(shí)，需要先明確活動(dòng)目的，內(nèi)容上要簡(jiǎn)明扼要。在設(shè)計(jì)時(shí)需要根據(jù)主題出發(fā)，圍繞主題進(jìn)行設(shè)計(jì)。8.2.2活動(dòng)頁(yè)的設(shè)計(jì)要點(diǎn)2.色彩出彩

該色彩不是單純指顏色的艷麗或是顏色的突出，而是指頁(yè)面主色的獨(dú)特性、合適性和聯(lián)想性。其中色彩的合適性，指色彩與活動(dòng)氣氛相融合。圖8-17所示的活動(dòng)頁(yè)，采用紅色為主色調(diào)，和活動(dòng)的主題相符，搭配紫色，并適當(dāng)降低紅色的飽和度，凸顯商品的品質(zhì)感。8.2.2活動(dòng)頁(yè)的設(shè)計(jì)要點(diǎn)3.細(xì)節(jié)出彩

對(duì)于活動(dòng)頁(yè)來(lái)說(shuō)，每個(gè)細(xì)節(jié)都決定了店鋪能否吸引用戶。在活動(dòng)頁(yè)中每個(gè)出彩的細(xì)節(jié)，如抽象的紋理、符號(hào)和線條等，都能使整個(gè)畫面顯得更有活力與個(gè)性。8.2.3活動(dòng)頁(yè)的設(shè)計(jì)制作本章小結(jié)主圖的構(gòu)成

本章學(xué)習(xí)了專題頁(yè)與活動(dòng)頁(yè)的設(shè)計(jì)與制作方法。專題頁(yè)的視覺(jué)設(shè)計(jì)方面，主要學(xué)習(xí)了專題頁(yè)的結(jié)構(gòu)、頭圖設(shè)計(jì)以及內(nèi)容區(qū)設(shè)計(jì)?；顒?dòng)頁(yè)的視覺(jué)設(shè)計(jì)方面，主要學(xué)習(xí)了活動(dòng)的作用和目的、活動(dòng)頁(yè)的設(shè)計(jì)要點(diǎn)。實(shí)訓(xùn)活動(dòng)主圖的構(gòu)成實(shí)訓(xùn)內(nèi)容：下載本章實(shí)訓(xùn)素材，完成“走遍大好河山”專題頁(yè)制作，如圖8-54所示。實(shí)訓(xùn)目的：練習(xí)專題頁(yè)的視覺(jué)設(shè)計(jì)與制作。實(shí)訓(xùn)要求：1.下載本章素材，分析專題頁(yè)的結(jié)構(gòu)、配色、字體等；2.完成圖8-54效果的制作。圖8-54網(wǎng)店美工與視覺(jué)設(shè)計(jì)第九章移動(dòng)端網(wǎng)店的視覺(jué)設(shè)計(jì)與裝修學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)1．了解移動(dòng)端店鋪?lái)?yè)面的框架結(jié)構(gòu)；2．了解移動(dòng)端店鋪對(duì)圖片發(fā)布的尺寸要求；3．掌握移動(dòng)端網(wǎng)店模塊的編輯與裝修方法。能力目標(biāo)1．能夠完成移動(dòng)端模塊設(shè)計(jì)和裝修；2．能夠完成移動(dòng)端頁(yè)面裝修設(shè)計(jì)。素養(yǎng)目標(biāo)1.培養(yǎng)讀者隨機(jī)應(yīng)變的能力；2.培養(yǎng)讀者獨(dú)立規(guī)劃布局移動(dòng)端網(wǎng)頁(yè)的能力。9.1移動(dòng)端網(wǎng)店裝修的基礎(chǔ)知識(shí)

在當(dāng)今移動(dòng)互聯(lián)網(wǎng)時(shí)代，隨著移動(dòng)設(shè)備的普及和發(fā)展，越來(lái)越多的網(wǎng)民喜歡用手機(jī)上網(wǎng)購(gòu)物，網(wǎng)絡(luò)購(gòu)物向移動(dòng)端轉(zhuǎn)移的趨勢(shì)進(jìn)一步加強(qiáng)。無(wú)線端無(wú)論是在網(wǎng)店流量還是成交額方面都占據(jù)著非常重要的位置，因此，對(duì)于電商企業(yè)來(lái)說(shuō)，移動(dòng)端店鋪視覺(jué)設(shè)計(jì)成為重點(diǎn)關(guān)注對(duì)象之一。9.1.1移動(dòng)端店鋪的設(shè)計(jì)要點(diǎn)對(duì)內(nèi)容整體把控：移動(dòng)端網(wǎng)店空間有限，這就要求頁(yè)面內(nèi)容要精簡(jiǎn)，并且突出重點(diǎn)。注意圖片大?。簣D片過(guò)大，一會(huì)浪費(fèi)顧客流量；另一方面，過(guò)大的圖片會(huì)延長(zhǎng)頁(yè)面加載時(shí)間，進(jìn)而影響到客戶體驗(yàn)，導(dǎo)致客戶流失。從買家購(gòu)物習(xí)慣出發(fā)：圖片的清晰度和大小均要適應(yīng)手機(jī)的尺寸及分辨率等特征，使得商品能完美的體現(xiàn)。充分利用模塊展現(xiàn)：移動(dòng)端屬于窄屏展示，要充分利用移動(dòng)端的主圖展示位，充分利用主圖體現(xiàn)寶貝的細(xì)節(jié)、特色、品質(zhì)等。9.1.2移動(dòng)端與計(jì)算機(jī)端店鋪的區(qū)別

尺寸不同：移動(dòng)端顯示的寬度為750像素，而電腦端的顯示寬度一般為950像素，若尺寸不適合會(huì)造成界面混亂。

布局不同：相比于電腦端，移動(dòng)端端更注重瀏覽體驗(yàn)，省略了邊角的活動(dòng)模塊，以及詳細(xì)的廣告文案。

內(nèi)容不同：電腦端會(huì)通過(guò)較多文字說(shuō)明產(chǎn)品的賣點(diǎn)、促銷信息、優(yōu)惠信息等，而無(wú)線端文字則更為精簡(jiǎn)。

分類不同：無(wú)線端的分類模塊比較簡(jiǎn)潔、清晰，使用了分類圖標(biāo)，而電腦端的分類信息更詳細(xì)。9.2移動(dòng)端網(wǎng)店首頁(yè)的視覺(jué)設(shè)計(jì)主圖的構(gòu)成

在設(shè)計(jì)移動(dòng)端店鋪首頁(yè)前，需要先設(shè)計(jì)店鋪首頁(yè)的整體框架結(jié)構(gòu)，再單獨(dú)調(diào)整各個(gè)模塊內(nèi)容。一般地，常見(jiàn)的店鋪?lái)?yè)面布局包括店招、導(dǎo)航欄、焦點(diǎn)圖、促銷區(qū)、商品分類、商品展示區(qū)、店鋪尾部等，布局模板如圖所示。9.2.1店鋪店招設(shè)計(jì)

移動(dòng)端店招與PC端不同，PC端的店招允許商家自行上傳符合店鋪風(fēng)格和品牌個(gè)性的店招素材，但移動(dòng)端的店招則由系統(tǒng)自動(dòng)生成，不再有店招模塊，不需要商家自行裝修。由于店招模塊尺寸有限，無(wú)法同時(shí)呈現(xiàn)過(guò)多的營(yíng)銷信息，為了使店招信息更加清晰明了，增加信息的可讀性，店招默認(rèn)展示店鋪名稱，店鋪類別，店鋪信譽(yù)、粉絲數(shù)量、收錄情況以及訂閱按鈕。9.2.2焦