電商設(shè)計(jì)電子課件

第7章PC端店鋪首頁設(shè)計(jì)本章介紹：PC端店鋪首頁設(shè)計(jì)是電商設(shè)計(jì)任務(wù)中的綜合型工作任務(wù)，通過精心設(shè)計(jì)的PC端店鋪首頁能夠向用戶傳達(dá)品牌感和信任感。本章針對(duì)PC端店鋪首頁的基本概念以及設(shè)計(jì)模塊等基礎(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)學(xué)習(xí)目標(biāo)7.1首頁的基本概述店鋪首頁是消費(fèi)者進(jìn)入店鋪的第一張展示頁面，具有展現(xiàn)品牌氣質(zhì)、承擔(dān)流量分發(fā)的功能作用。視覺精美的首頁，不但可以提升消費(fèi)者對(duì)店鋪的好感，還可以提高商品轉(zhuǎn)換率，因此需要網(wǎng)店美工用心設(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ī)則課堂案例-國產(chǎn)護(hù)膚品店招導(dǎo)航設(shè)計(jì)店招與導(dǎo)航位于店鋪頁面頂部，在PC端的任何頁面都可以看到。店招即店鋪的招牌，主要用于展示店鋪品牌、活動(dòng)內(nèi)容和特價(jià)商品等內(nèi)容。好的店招會(huì)起到品牌宣傳，加深記憶的作用。導(dǎo)航則是對(duì)商品進(jìn)行分類，用于幫助消費(fèi)者定位到當(dāng)前位置、完成頁面之間的跳轉(zhuǎn)并快速找到商品。店招導(dǎo)航效果圖7.2.1店招導(dǎo)航的基本概念·店招：店招以淘寶為例可以分為常規(guī)店招和通欄店招兩類，常規(guī)店招尺寸950×120像素；通欄店招包含店招、導(dǎo)航和背景，尺寸建議為1920×150像素?！?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課堂案例-國產(chǎn)護(hù)膚品店招導(dǎo)航設(shè)計(jì)效果圖7.3輪播海報(bào)設(shè)計(jì)輪播海報(bào)的基本概念輪播海報(bào)的設(shè)計(jì)規(guī)則課堂案例-國產(chǎn)護(hù)膚品輪播海報(bào)設(shè)計(jì)7.3.1輪播海報(bào)的基本概念輪播海報(bào)即多張海報(bào)循環(huán)播放，通常位于首頁店招和導(dǎo)航欄下方，主要用于進(jìn)行產(chǎn)品宣傳和活動(dòng)促銷等內(nèi)容。優(yōu)秀的輪播海報(bào)會(huì)對(duì)每張海報(bào)的主題、構(gòu)圖和配色等因素進(jìn)行綜合考慮和設(shè)計(jì)。

左右布局輪播海報(bào)上下布局輪播海報(bào)輪播海報(bào)的設(shè)計(jì)尺寸可以依據(jù)4.1.2中的PC端全屏海報(bào)和PC端常規(guī)海報(bào)進(jìn)行設(shè)計(jì)。其他設(shè)計(jì)規(guī)則可以依據(jù)4.2PC端海報(bào)的版面布局和4.3PC端海報(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

課堂案例-國產(chǎn)護(hù)膚品輪播海報(bào)設(shè)計(jì)效果圖7.4優(yōu)惠券設(shè)計(jì)優(yōu)惠券的基本概念優(yōu)惠券的設(shè)計(jì)規(guī)則課堂案例-國產(chǎn)護(hù)膚品優(yōu)惠券設(shè)計(jì)優(yōu)惠券即減價(jià)優(yōu)惠，通常位于首頁輪播海報(bào)下方，是店鋪常用的促銷方式，也是吸引消費(fèi)者進(jìn)行二次消費(fèi)的策略。優(yōu)惠券可以起到提高購買欲望、刺激沖動(dòng)消費(fèi)的作用。橫向優(yōu)惠券7.4.1優(yōu)惠券的基本概念縱向優(yōu)惠券

優(yōu)惠券的數(shù)額一定要突出醒目，而滿減條件建議使用黑體小字，這樣在刺激消費(fèi)著消費(fèi)的同時(shí)也可以保證商家自身的利潤(rùn)。7.4.2優(yōu)惠券的設(shè)計(jì)規(guī)則使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖標(biāo)，使用“橫排文字”工具添加文字，使用“矩形”工具、“橢圓”工具、“圓角矩形”工具繪制基本形狀，使用“添加圖層樣式”命令為圖形添加效果。7.4.3課堂案例-國產(chǎn)護(hù)膚品優(yōu)惠券設(shè)計(jì)效果圖7.5分類模塊設(shè)計(jì)分類模塊的基本概念分類模塊的設(shè)計(jì)規(guī)則課堂案例-國產(chǎn)護(hù)膚品分類模塊設(shè)計(jì)

分類模塊即店鋪商品的類別，通常位于首頁輪播海報(bào)或優(yōu)惠券下方，是用于引導(dǎo)消費(fèi)者進(jìn)行購買商品的重要模塊。優(yōu)秀的分類模塊起到提升購買效率、加強(qiáng)用戶體驗(yàn)的作用。7.5.1分類模塊的基本概念分類模塊展示效果圖分類模塊的設(shè)計(jì)需要符合店鋪的整體裝修風(fēng)格。字體為黑體或粗宋，圖標(biāo)風(fēng)格需要統(tǒng)一，圖片如果是進(jìn)行橫向分類，寬度應(yīng)該控制在950像素以內(nèi)，縱向分類高度應(yīng)該控制在150像素。另外圖標(biāo)、圖片與文案應(yīng)該相互呼應(yīng)。7.5.2分類模塊的設(shè)計(jì)規(guī)則使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“直線”工具和“圓角矩形”工具繪制基本形狀，使用“創(chuàng)建剪貼蒙版”命令調(diào)整圖片顯示區(qū)域。7.5.3課堂案例-國產(chǎn)護(hù)膚品分類模塊設(shè)計(jì)效果圖7.6商品展示設(shè)計(jì)商品展示的基本概念商品展示的設(shè)計(jì)規(guī)則課堂案例-國產(chǎn)護(hù)膚品商品展示設(shè)計(jì)商品展示即商品的展示區(qū)域，通常位于首頁優(yōu)惠券或分類模塊下方，是用于向消費(fèi)者展示爆款商品、新品商品和推薦商品等內(nèi)容的模塊。優(yōu)秀的商品展示模塊可以起到引導(dǎo)消費(fèi)者購買、促進(jìn)產(chǎn)品銷售的作用。7.6.1商品展示的基本概念商品展示

展示標(biāo)題的設(shè)計(jì)形式通常是圖形形式、圖片形式或文案形式，商品展示區(qū)域的商品需要選擇店鋪中美觀且有代表性的商品，除此之外，還可以選擇臨近下架的商品，以此獲得優(yōu)先展示的機(jī)會(huì)。關(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課堂案例-國產(chǎn)護(hù)膚品商品展示設(shè)計(jì)效果圖7.7底部信息設(shè)計(jì)底部信息的基本概念底部信息的設(shè)計(jì)規(guī)則課堂案例-國產(chǎn)護(hù)膚品底部信息設(shè)計(jì)

底部信息即其他信息展示，通常位于首頁的最下方，用于放置店鋪品牌故事、購物須知和店鋪公告等信息，優(yōu)秀的底部信息可以起到補(bǔ)充說明、挽留消費(fèi)者的作用。7.7.1底部信息的基本概念底部信息展示頁尾的主要功能是在為消費(fèi)者提供方便的同時(shí)體現(xiàn)店鋪的服務(wù)。店鋪的頁尾整體布局應(yīng)簡(jiǎn)介明確、設(shè)計(jì)需使用簡(jiǎn)短的文字和具有代表性的圖標(biāo)來傳遞相關(guān)的信息。7.7.2底部信息的設(shè)計(jì)規(guī)則使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具和“圓角矩形”工具繪制基本形狀，使用“創(chuàng)建剪貼蒙版”