電商視覺設(shè)計(jì)課件 第7章 PC端店鋪首頁設(shè)計(jì)

第7章PC端店鋪首頁設(shè)計(jì)本章介紹：PC端店鋪首頁設(shè)計(jì)是電商視覺設(shè)計(jì)任務(wù)中的綜合型工作任務(wù)，精心設(shè)計(jì)的PC端店鋪首頁能夠向用戶傳達(dá)品牌感和信任感。本章針對(duì)PC端店鋪首頁的基本概念以及模塊結(jié)構(gòu)等基礎(chǔ)知識(shí)進(jìn)行系統(tǒng)講解，并針對(duì)流行風(fēng)格與典型行業(yè)的PC端店鋪首頁進(jìn)行設(shè)計(jì)演練。通過本章的學(xué)習(xí)，讀者可以對(duì)PC端店鋪首頁的設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識(shí)，并快速掌握PC端店鋪首頁的設(shè)計(jì)規(guī)范和制作方法，成功塑造具有品牌影響力的PC端店鋪首頁。了解PC端店鋪首頁的基本概念熟悉PC端店鋪首頁的模塊結(jié)構(gòu)知識(shí)目標(biāo)熟悉PC端店鋪首頁的設(shè)計(jì)思路掌握PC端店鋪首頁的制作方法能力目標(biāo)培養(yǎng)良好的PC端店鋪首頁設(shè)計(jì)的操作習(xí)慣培養(yǎng)對(duì)PC端店鋪首頁的審美鑒賞能力培養(yǎng)對(duì)PC端店鋪首頁的設(shè)計(jì)創(chuàng)意能力素質(zhì)目標(biāo)7.1PC端店鋪概述店鋪首頁是消費(fèi)者進(jìn)入店鋪的第一個(gè)展示頁面，具有展現(xiàn)品牌氣質(zhì)、承擔(dān)流量分發(fā)的功能。視覺精美的首頁，不但可以提升消費(fèi)者對(duì)店鋪的好感，還可以提高商品轉(zhuǎn)化率，因此需要電商視覺設(shè)計(jì)師用心設(shè)計(jì)。PC端店鋪首頁的寬度為1920像素，高度不限，其設(shè)計(jì)可以根據(jù)商家不同需要和后臺(tái)裝修模塊進(jìn)行組合變化。首頁的核心模塊通常由店招與導(dǎo)航欄、輪播海報(bào)、優(yōu)惠券、分類導(dǎo)航、商品展示和底部信息構(gòu)成。PC端首頁7.2店招與導(dǎo)航欄設(shè)計(jì)店招與導(dǎo)航欄的定義店招與導(dǎo)航欄的設(shè)計(jì)規(guī)則應(yīng)用案例——設(shè)計(jì)簡(jiǎn)約家具PC端店鋪店招與導(dǎo)航欄店招與導(dǎo)航欄位于店鋪頁面頂部，在PC端店鋪的任何頁面都可以看到。店招即店鋪的招牌，主要用于展示店鋪品牌、促銷活動(dòng)內(nèi)容和特價(jià)商品等內(nèi)容。好的店招會(huì)起到品牌宣傳，加深消費(fèi)者記憶的作用。導(dǎo)航欄則是對(duì)商品進(jìn)行分類，用于幫助消費(fèi)者定位到當(dāng)前位置、完成頁面之間的跳轉(zhuǎn)并快速找到商品。店招導(dǎo)航效果圖7.2.1店招與導(dǎo)航欄的定義1.店招：以淘寶為例，店招可以分為常規(guī)店招和通欄店招兩類，常規(guī)店招尺寸950像素×120像素；通欄店招包含店招、導(dǎo)航和背景，尺寸建議為1920像素×150像素。2.導(dǎo)航欄：導(dǎo)航欄高度10-50像素，建議30像素；導(dǎo)航欄字體建議為黑體和宋體，字號(hào)建議黑體為14像素或16像素，宋體12像素或14像素；文字間距建議為20像素。7.2.2店招與導(dǎo)航欄的設(shè)計(jì)規(guī)則使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“直線”工具繪制基本形狀。7.2.3應(yīng)用案例——設(shè)計(jì)簡(jiǎn)約家具PC端店鋪店招與導(dǎo)航欄效果圖7.3輪播海報(bào)設(shè)計(jì)輪播海報(bào)的定義輪播海報(bào)的設(shè)計(jì)規(guī)則應(yīng)用案例——設(shè)計(jì)簡(jiǎn)約家具PC端店鋪輪播海報(bào)7.3.1輪播海報(bào)的定義輪播海報(bào)即多張海報(bào)循環(huán)播放，通常位于店鋪首頁店招與導(dǎo)航欄下方，主要用于展示商品宣傳和活動(dòng)促銷等內(nèi)容。優(yōu)秀的電商視覺設(shè)計(jì)師會(huì)對(duì)每張海報(bào)的主題、構(gòu)圖和配色等因素進(jìn)行綜合考慮和設(shè)計(jì)，輪播海報(bào)可分為左右布局和上下布局兩種。左右布局輪播海報(bào)

上下布局輪播海報(bào)輪播海報(bào)的設(shè)計(jì)尺寸可以依據(jù)4.1.2節(jié)中的PC端全屏海報(bào)和PC端常規(guī)海報(bào)的尺寸進(jìn)行設(shè)計(jì)。其他設(shè)計(jì)規(guī)則可以依據(jù)4.2節(jié)PC端海報(bào)的版面布局和4.3節(jié)PC端海報(bào)的表現(xiàn)形式進(jìn)行設(shè)計(jì)。7.3.2輪播海報(bào)的設(shè)計(jì)規(guī)則使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“直線”工具、“橢圓”工具、“圓角矩形”工具繪制基本形狀，使用“添加圖層樣式”命令為圖形添加效果，使用“創(chuàng)建剪貼蒙版”命令調(diào)整圖片顯示區(qū)域。7.3.3

應(yīng)用案例——設(shè)計(jì)簡(jiǎn)約家具PC端店鋪輪播海報(bào)效果圖7.4優(yōu)惠券設(shè)計(jì)優(yōu)惠券的定義優(yōu)惠券的設(shè)計(jì)規(guī)則應(yīng)用案例——設(shè)計(jì)簡(jiǎn)約家具PC端店鋪優(yōu)惠券優(yōu)惠券即減價(jià)優(yōu)惠，通常位于首頁輪播海報(bào)下方。優(yōu)惠券可以起到提高購買欲望、刺激沖動(dòng)消費(fèi)的作用，還能吸引消費(fèi)者進(jìn)行二次消費(fèi)。橫向優(yōu)惠券7.4.1優(yōu)惠券的定義縱向優(yōu)惠券綜合型優(yōu)惠券優(yōu)惠券的數(shù)額一定要突出醒目，并在旁邊設(shè)計(jì)明顯的“立即領(lǐng)取”“馬上使用”等按鈕，以引導(dǎo)消費(fèi)者采取行動(dòng)。除此之外，還要明確標(biāo)注出有效期和滿減條件，其中有效期和滿減條件建議使用黑體小字，這樣在刺激消費(fèi)者消費(fèi)的同時(shí)也可以保證商家自身的利潤(rùn)。7.4.2優(yōu)惠券的設(shè)計(jì)規(guī)則使用“新建參考線版面”命令建立參考線，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”工具繪制基本形狀。7.4.3應(yīng)用案例——設(shè)計(jì)簡(jiǎn)約家具PC端店鋪優(yōu)惠券效果圖7.5分類模塊設(shè)計(jì)分類模塊的定義分類模塊的設(shè)計(jì)規(guī)則應(yīng)用案例——設(shè)計(jì)簡(jiǎn)約家具PC端店鋪分類模塊分類模塊即店鋪商品的類別，通常位于店鋪首頁輪播海報(bào)或優(yōu)惠券下方，是用于引導(dǎo)消費(fèi)者購買商品的重要模塊。優(yōu)秀的分類模塊設(shè)計(jì)能提升購買效率、加強(qiáng)消費(fèi)者體驗(yàn)。7.5.1分類模塊的定義分類模塊展示效果圖分類模塊的設(shè)計(jì)需要符合店鋪的整體裝修風(fēng)格。字體建議為黑體或粗宋，圖標(biāo)風(fēng)格需要統(tǒng)一。關(guān)于圖片，如果是進(jìn)行橫向分類，寬度應(yīng)該控制在950像素以內(nèi)，如果縱向分類，高度應(yīng)該控制在150像素以內(nèi)。另外圖標(biāo)、圖片與文案應(yīng)該相互呼應(yīng)。7.5.2分類模塊的設(shè)計(jì)規(guī)則使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“直線”工具和“圓角矩形”工具繪制基本形狀，使用“創(chuàng)建剪貼蒙版”命令調(diào)整圖片顯示區(qū)域。7.5.3應(yīng)用案例——設(shè)計(jì)簡(jiǎn)約家具PC端店鋪分類模塊效果圖7.6商品展示設(shè)計(jì)商品展示的定義商品展示的設(shè)計(jì)規(guī)則應(yīng)用案例——設(shè)計(jì)簡(jiǎn)約家具PC端店鋪商品展示商品展示即商品的展示區(qū)域，通常位于店鋪首頁優(yōu)惠券或分類模塊下方，用于向消費(fèi)者展示爆款商品、新品商品和推薦商品等內(nèi)容。優(yōu)秀的商品展示設(shè)計(jì)可以起到引導(dǎo)消費(fèi)者購買、促進(jìn)商品銷售的作用。7.6.1商品展示的定義商品展示商品展示的設(shè)計(jì)形式通常包括圖形形式、圖片形式或文案形式。電商視覺設(shè)計(jì)師在設(shè)計(jì)商品展示模塊時(shí)，需要選擇店鋪中美觀且有代表性的商品，除此之外，還可以選擇臨近下架的商品，以此獲得優(yōu)先展示的機(jī)會(huì)，提升網(wǎng)店流量。關(guān)聯(lián)的素材和整體背景需要相互搭配，并且符合店鋪的整體風(fēng)格。7.6.2商品展示的設(shè)計(jì)規(guī)則展示標(biāo)題設(shè)計(jì)使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“橢圓”工具和“圓角矩形”工具繪制基本形狀，使用“創(chuàng)建剪貼蒙版”命令調(diào)整圖片顯示區(qū)域。7.6.3應(yīng)用案例——設(shè)計(jì)簡(jiǎn)約家具PC端店鋪商品展示效果圖7.7底部信息設(shè)計(jì)底部信息的定義底部信息的設(shè)計(jì)規(guī)則應(yīng)用案例——設(shè)計(jì)簡(jiǎn)約家具PC端店鋪底部信息底部信息即其他信息展示，通常位于店鋪首頁的最下方，用于放置店鋪品牌故事、購物須知和店鋪公告等信息，優(yōu)秀的底部信息設(shè)計(jì)可以起到補(bǔ)充說明、挽留消費(fèi)者的作用。7.7.1底部信息的定義底部信息展示底部信息的主要功能是在為消費(fèi)者提供方便的同時(shí)體現(xiàn)店鋪的服務(wù)。首頁的底部信息除了放置店鋪品牌故事、購物須知和店鋪公告還會(huì)加入聯(lián)系信息、導(dǎo)航鏈接和版權(quán)信息等內(nèi)容。其整體布局應(yīng)簡(jiǎn)單明確，使用簡(jiǎn)短的文字和具有代表性的圖標(biāo)來傳遞相關(guān)信息。7.7.2底部信息的設(shè)計(jì)規(guī)則使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具和“圓角矩形”工具繪制基本形狀，使用“創(chuàng)建剪貼蒙版”命令調(diào)整圖片顯示區(qū)域。7.7.3?應(yīng)用案例——設(shè)計(jì)簡(jiǎn)約家具PC端店鋪底部信息效果圖使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”“圓角矩形”工具繪制基本形狀，使用“添加圖層