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

第7章PC端店鋪首頁設(shè)計本章介紹：PC端店鋪首頁設(shè)計是電商設(shè)計任務(wù)中的綜合型工作任務(wù)，通過精心設(shè)計的PC端店鋪首頁能夠向用戶傳達品牌感和信任感。本章針對PC端店鋪首頁的基本概念以及設(shè)計模塊等基礎(chǔ)知識進行系統(tǒng)講解，并針對流行風(fēng)格與典型行業(yè)的PC端店鋪首頁進行設(shè)計演練。通過本章的學(xué)習(xí)，讀者可以對PC端店鋪首頁的設(shè)計有一個系統(tǒng)的認識，并快速掌握PC端店鋪首頁的設(shè)計規(guī)范和制作方法，成功塑造具有品牌影響力的PC端店鋪首頁。了解PC端店鋪首頁的基本概念明確PC端店鋪首頁的模塊結(jié)構(gòu)學(xué)習(xí)目標7.1首頁的基本概述店鋪首頁是消費者進入店鋪的第一張展示頁面，具有展現(xiàn)品牌氣質(zhì)、承擔(dān)流量分發(fā)的功能作用。視覺精美的首頁，不但可以提升消費者對店鋪的好感，還可以提高商品轉(zhuǎn)換率，因此需要網(wǎng)店美工用心設(shè)計。PC端店鋪首頁的寬度為1920像素，高度不限，其設(shè)計可以根據(jù)商家不同需要和后臺裝修模塊進行組合變化。首頁的核心模塊通常由店招導(dǎo)航、輪播海報、優(yōu)惠券、分類導(dǎo)航、商品展示和底部信息構(gòu)成。pc端首頁7.2店招導(dǎo)航設(shè)計店招導(dǎo)航的基本概念店招導(dǎo)航的設(shè)計規(guī)則課堂案例-國產(chǎn)護膚品店招導(dǎo)航設(shè)計店招與導(dǎo)航位于店鋪頁面頂部，在PC端的任何頁面都可以看到。店招即店鋪的招牌，主要用于展示店鋪品牌、活動內(nèi)容和特價商品等內(nèi)容。好的店招會起到品牌宣傳，加深記憶的作用。導(dǎo)航則是對商品進行分類，用于幫助消費者定位到當(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)航欄字體建議為黑體和宋體，字號黑體建議為14像素、16像素，宋體建議12像素、14像素；文字間距建議為20像素。7.2.2店招導(dǎo)航的設(shè)計規(guī)則使用“新建參考線版面”命令建立參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“直線”工具繪制基本形狀。7.2.3課堂案例-國產(chǎn)護膚品店招導(dǎo)航設(shè)計效果圖7.3輪播海報設(shè)計輪播海報的基本概念輪播海報的設(shè)計規(guī)則課堂案例-國產(chǎn)護膚品輪播海報設(shè)計7.3.1輪播海報的基本概念輪播海報即多張海報循環(huán)播放，通常位于首頁店招和導(dǎo)航欄下方，主要用于進行產(chǎn)品宣傳和活動促銷等內(nèi)容。優(yōu)秀的輪播海報會對每張海報的主題、構(gòu)圖和配色等因素進行綜合考慮和設(shè)計。

左右布局輪播海報上下布局輪播海報輪播海報的設(shè)計尺寸可以依據(jù)4.1.2中的PC端全屏海報和PC端常規(guī)海報進行設(shè)計。其他設(shè)計規(guī)則可以依據(jù)4.2PC端海報的版面布局和4.3PC端海報的表現(xiàn)形式進行設(shè)計。7.3.2輪播海報的設(shè)計規(guī)則

使用“新建參考線版面”命令建立參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“直線”工具、“橢圓”工具、“圓角矩形”工具繪制基本形狀，使用“添加圖層樣式”命令為圖形添加效果，使用“創(chuàng)建剪貼蒙版”命令調(diào)整圖片顯示區(qū)域。7.3.3

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

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

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

展示標題的設(shè)計形式通常是圖形形式、圖片形式或文案形式，商品展示區(qū)域的商品需要選擇店鋪中美觀且有代表性的商品，除此之外，還可以選擇臨近下架的商品，以此獲得優(yōu)先展示的機會。關(guān)聯(lián)的素材和整體背景需要相互搭配，并且要符合店鋪的風(fēng)格。7.6.2商品展示的設(shè)計規(guī)則展示標題設(shè)計使用“新建參考線版面”命令建立參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“多邊形”工具和“圓角矩形”工具繪制基本形狀，使用“創(chuàng)建剪貼蒙版”命令調(diào)整圖片顯示區(qū)域。7.6.3課堂案例-國產(chǎn)護膚品商品展示設(shè)計效果圖7.7底部信息設(shè)計底部信息的基本概念底部信息的設(shè)計規(guī)則課堂案例-國產(chǎn)護膚品底部信息設(shè)計

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