項(xiàng)目8 店鋪首頁的設(shè)計(jì)

項(xiàng)目八

店鋪首頁的設(shè)計(jì)網(wǎng)店美工項(xiàng)目實(shí)戰(zhàn)教程CONTENTS目錄珠寶配飾店鋪首頁設(shè)計(jì)8.1拓展藍(lán)色數(shù)碼店鋪首頁設(shè)計(jì)8.2課后思考8.38.1.1設(shè)計(jì)理念8.18.1.2工具方法8.1.3實(shí)現(xiàn)過程珠寶配飾店鋪首頁設(shè)計(jì)珠寶配飾店鋪主要針對(duì)一部分追求生活情調(diào)的知性女性人群，在本案例中，針對(duì)女性適用人群的喜好特點(diǎn)，選取柔和又高貴的色彩，搭配同色調(diào)的干花和絲帶等元素，營造出和諧柔美又知性的整體效果。如右圖所示，為珠寶配飾店鋪首頁的效果圖。8.1珠寶配飾店鋪首頁設(shè)計(jì)8.1.1設(shè)計(jì)理念采用以珊瑚粉、白色為主，點(diǎn)綴亮橙色的淺色系，使得整個(gè)畫面典雅、高貴，貼合女性溫婉迷人又時(shí)尚大方的氣質(zhì)。鏤空花半圓紋、珊瑚粉干花束、絲帶等元素的添加，使得畫面中增添了幾分知性和甜美。采用纖細(xì)又時(shí)尚的字體來編輯文字，使得整個(gè)畫面風(fēng)格統(tǒng)一、富有時(shí)尚感。首頁整體布局內(nèi)容豐富，可以提高用戶的轉(zhuǎn)化率，布局圖如右圖所示。8.1.2工具方法添加參考線來實(shí)現(xiàn)多個(gè)對(duì)象的對(duì)齊和區(qū)域限定，使得頁面更整齊、更規(guī)范。通過創(chuàng)建剪貼蒙版的方式來利用下層形狀控制上層素材圖片的顯示區(qū)域，來達(dá)到圖片大小的統(tǒng)一。使用不同的圖層混合模式來為實(shí)現(xiàn)圖片合成和調(diào)色，利用“漸變疊加”、“投影”等圖層樣式為對(duì)象增添效果。通過“矩形工具”、“鋼筆工具”等繪制不同形狀，達(dá)到頁面的多樣性。8.1.3實(shí)現(xiàn)過程繪制參考線，分別使用“直線工具”、“自定義形狀工具”、“矩形工具”繪制分隔直線、收藏圖標(biāo)、搜索框及導(dǎo)航條，并加入相應(yīng)文字。8.1.3實(shí)現(xiàn)過程依次加入banner配圖素材，使用圖層蒙版控制顯示區(qū)域，并根據(jù)實(shí)際需要使用“色相/飽和度”調(diào)色、添加圖層樣式以及繪制陰影。8.1.3實(shí)現(xiàn)過程依次加入項(xiàng)鏈、戒指素材，使用圖層蒙版控制顯示區(qū)域，并結(jié)合圖層混合模式為戒指添加柔光效果。使用“橫排文字工具”結(jié)合“圓角矩形工具”為banner加入文字。8.1.3實(shí)現(xiàn)過程使用“直線工具”繪制banner區(qū)域和優(yōu)惠券區(qū)域的分隔線，并為其添加圖層樣式。使用“矩形工具”繪制優(yōu)惠券底板，并繪制陰影效果。使用“橫排文字工具”、“直線工具”在白底矩形的上方輸入文字及繪制優(yōu)惠券分隔線。8.1.3實(shí)現(xiàn)過程先使用“矩形工具”和“橫排文字工具”制作人氣熱賣精品區(qū)的標(biāo)題和框架。再加入素材圖片并使用“曲線”工具調(diào)色，最后加入商品名稱及價(jià)格信息。8.1.3實(shí)現(xiàn)過程先使用“矩形工具”和“橫排文字工具”制作分類導(dǎo)航區(qū)的標(biāo)題和框架。再加入素材圖片，使用剪貼蒙版控制其顯示區(qū)域及大小，最后加入分類信息。8.1.3實(shí)現(xiàn)過程先使用“矩形工具”、“直線工具”和“橫排文字工具”制作客服區(qū)的標(biāo)題和框架。再加入旺旺頭像素材，最后加入客服名稱等信息。8.1.3實(shí)現(xiàn)過程仿照人氣熱賣精品區(qū)的制作方法，先使用“矩形工具”和“橫排文字工具”制作標(biāo)題和框架，再加入素材圖片并使用“曲線”工具調(diào)色，最后加入商品名稱及價(jià)格信息。8.1.3實(shí)現(xiàn)過程運(yùn)用為漸變色圖層創(chuàng)建剪貼蒙版的方式，制作漸變的菱形框，并為菱形框輸入文字。應(yīng)用為圖片創(chuàng)建剪貼蒙版的方式，制作兩張店鋪特色圖。8.1.3實(shí)現(xiàn)過程使用“橫排文字工具”輸入文字并設(shè)置格式，使用“矩形工具”繪制框線，使用“直線工具”繪制三段直線，再使用“鋼筆工具”繪制多個(gè)圖形，完成頁面底部的制作。8.2拓展藍(lán)色數(shù)碼店鋪首頁設(shè)計(jì)8.2.1設(shè)計(jì)理念8.2.2實(shí)現(xiàn)過程8.2.1設(shè)計(jì)理念在數(shù)碼產(chǎn)品常用的藍(lán)色系基礎(chǔ)上進(jìn)行變化，加入數(shù)碼相機(jī)用于戶外拍攝的功能屬性，選取符合主題的背景和廣告詞，達(dá)到和諧統(tǒng)一的效果。運(yùn)用平臺(tái)效果營造出相機(jī)擺放的空間感。運(yùn)用對(duì)角線布局兩款熱銷爆款商品、超值優(yōu)惠套裝商品，突出重點(diǎn)的同時(shí)又有變化?！笆詹亍蹦K通過禮盒和優(yōu)惠券的元素，可以為店鋪提升轉(zhuǎn)化率。首頁效果如圖所示。8.2.2實(shí)現(xiàn)過程在Photoshop中新建一個(gè)文檔，添加“背景”素材，并使用圖層蒙版來控制其顯示區(qū)域，通過不透明度、添加柔光層的方式修飾背景。8.2.2實(shí)現(xiàn)過程輸入LOGO文字，設(shè)置其格式，并為其添加圖層樣式，在首頁的左上方制作出LOGO。8.2.2實(shí)現(xiàn)過程加入相機(jī)圖片，并使用“光照效果”的渲染濾鏡來調(diào)整圖片，使其與背景自然地融為一體。結(jié)合使用圖層樣式、圖層混合模式、鋼筆工具等方式，制作出多樣化的Banner文字，Banner。8.2.2實(shí)現(xiàn)過程運(yùn)用形狀的邏輯運(yùn)算繪制出優(yōu)惠券的特別形狀。效果如圖2-4-5所示。應(yīng)用多種圖層樣式，突顯出優(yōu)惠券的層次感。文字的格式和大小設(shè)置，實(shí)現(xiàn)主次效果。8.2.2實(shí)現(xiàn)過程結(jié)合使用漸變疊加圖層樣式和亮光效果，制作富有立體感的HOTSALE標(biāo)題框。按照對(duì)角線的方式布局兩款熱銷爆款商品，運(yùn)用多種圖層樣式，制作出不同的文字效果。8.2.2實(shí)現(xiàn)過程結(jié)合使用圓角矩形、漸變疊加、高斯模糊等方式制作富有立體感的分類大底板，小底板采用純色的平面圓角矩形。運(yùn)用圖層蒙版完成摳圖后將素材圖片置于其中。8.2.2實(shí)現(xiàn)過程結(jié)合使用畫筆工具和矩形工具，制作出鋸齒狀的優(yōu)惠券邊緣。加入禮物素材圖片、旺旺頭像圖片，更方便辨認(rèn)收藏區(qū)、客服區(qū)的功能。8.2.2實(shí)現(xiàn)過程超值優(yōu)惠套裝區(qū)的制作與熱銷爆款專區(qū)相似，以商品為主，在設(shè)計(jì)中稍有變化。8.2.2實(shí)現(xiàn)過程使用多個(gè)矩形、圓角矩形再加入文字，制作出富用代表性的搜索條。運(yùn)用剪貼蒙版的方式，制作出副導(dǎo)航的圖片。使用鋼筆工具繪制頁面底部的圖形。8.3課后思考8.3.1思政思考8.3.2技能思考8.3.1思政思考SUCCESS滿足客戶們的期望讓他們發(fā)現(xiàn)自己真正想要的商品能很方便地點(diǎn)擊進(jìn)入了解商品詳情和購買①從客戶群的需求出發(fā)②建立起店鋪的信譽(yù)③使用客戶群喜好的色彩渲染點(diǎn)綴頁面④運(yùn)用他們習(xí)慣的方式合理布局⑤展示出精美又真實(shí)的商品圖片⑥撰寫富有吸引力的文本訪客來到網(wǎng)店首頁，如果能吸引到客戶在頁面上多瀏覽一會(huì)兒，并且點(diǎn)擊進(jìn)入下一個(gè)鏈接，那么裝修網(wǎng)店首頁的目標(biāo)就達(dá)到了。8.3.1思政思考技術(shù)上要有一定的經(jīng)驗(yàn)積累12要懂得客戶群的想法內(nèi)容上要熟悉店鋪和商品的特色及銷售數(shù)據(jù)具備較強(qiáng)的創(chuàng)新意識(shí)34要成為一個(gè)有責(zé)任擔(dān)當(dāng)、能吃苦耐勞的綜合性多面手實(shí)現(xiàn)交易贏得更多客戶的信任和關(guān)注促進(jìn)購物欲望客戶深入了解店鋪活動(dòng)和商品信息不同的網(wǎng)絡(luò)平臺(tái)上，各家店鋪都使出渾身解數(shù)來裝修自己的首頁，以達(dá)到增加客戶的信任度，留住客戶，降低跳轉(zhuǎn)率，提升點(diǎn)擊率和成交率。請大家到常用的網(wǎng)絡(luò)平臺(tái)（如：淘寶、京東等）上找?guī)讉€(gè)你喜歡的、優(yōu)秀的店鋪首頁，并將其以圖片的形式保存。對(duì)比上述網(wǎng)店首頁中的框架組成、配色方案等，分析各家網(wǎng)店首頁的特色和優(yōu)勢。8.3.2技能思考謝謝觀看01財(cái)務(wù)計(jì)劃報(bào)表您的內(nèi)容打在這里，或者通過您的內(nèi)容打在這里，或者您的內(nèi)容打在這里，添加標(biāo)題您的內(nèi)容打在這里，或者通過您的內(nèi)容打在這里，或者您的內(nèi)容打在這里，添加標(biāo)題添加內(nèi)容添加內(nèi)容您的內(nèi)容打在這里，或者通過您的內(nèi)容打在這里，或者您的內(nèi)容打在這里，添加標(biāo)題您的內(nèi)容打在這里，或者通過您的內(nèi)容打在這里，或者您的內(nèi)容打在這里，添加標(biāo)題添加內(nèi)容添加內(nèi)容01項(xiàng)目背景研究PyramidLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.UtwisienimadminimSettingLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.UtwisienimadminimBrightIdesLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.UtwisienimadminimIntroductionLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.UtwisienimadminimClockLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.UtwisienimadminimNoodleLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.Utwisienimadminim01財(cái)務(wù)計(jì)劃報(bào)表FirstStageTitleGoeshereTherearemanyvariationsofLoremIpsumavailable,butthemajorityOurStartTherearemanysufferedTherearemore.FourthStageTitleGoeshereTherearemanyvariationsofLoremIpsumavailable,butthemajoritySecondStageTitleGoeshereTherearemanyvariationsofLoremIpsumavailable,butthemajorityFifthStageTitleGoeshereTherearemanyvariationsofLoremIpsumavailable,butthemajorityThirdStageTitleGoeshereTherearemanyvariationsofLoremIpsumavailable,butthemajoritySixthStageTitleGoeshereTherearemanyvariationsofLoremIpsumavailable,butthemajority01財(cái)務(wù)計(jì)劃報(bào)表SUCCESSIDEAPLANNINGREALIZATIONLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.工作完成情況★完成概述★完成階段★團(tuán)隊(duì)完成★完成比例★季度完成★月計(jì)劃完成01[第二部分]PART0101市場評(píng)估分析單擊此處添加文本單擊此處添加1單擊此處添加文本單擊此處添加2單擊此處添加文本單擊此處添加3單擊此處添加文本單擊此處添加4單擊此處添加文本單擊此處添加5單擊此處添加文本單擊此處添加6單擊此處添加文本單擊此處添加7標(biāo)題文字01市場評(píng)估分析2001-2001LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1520112001-2001LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1520122000-2001LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1520102006-2007LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe15201301市場評(píng)估分析201635%Therearemanyvariationsofpassagesofloremipsumavailable,butthemajorityhavesufferedalterationinsomeform,byinjectedhumourrandomizedwordswhichdon'tlookevenslightlybelievable65%Therearemanyvariationsofpassagesofloremipsumavailable,butthemajorityhavesufferedalterationinsomeform,byinjectedhumourrandomizedwordswhichdon'tlookevenslightlybelievable成果展示及問題★項(xiàng)目前期★執(zhí)行過程★存在問題★解決方法★成果展示★收益增值01[第三部分]PART0101項(xiàng)目特色展示產(chǎn)品一單擊此處添加對(duì)圖片的說明文字單擊此處添加對(duì)圖片的說明文字.產(chǎn)品二產(chǎn)品三產(chǎn)品四單擊此處添加對(duì)圖片的說明文字單擊此處添加對(duì)圖片的說明文字.單擊此處添加對(duì)圖片的說明文字單擊此處添加對(duì)圖片的說明文字.單擊此處添加對(duì)圖片的說明文字單擊此處添加對(duì)圖片的說明文字.添加標(biāo)題添加標(biāo)題添加標(biāo)題添加標(biāo)題01項(xiàng)目特色展示W(wǎng)ebDesignTherearemanyvariationsofLoremIpsumavailable,butthemajorityhavesufferedTherearemanyvariationsofLorem

Ipsumavailable,MobileAppsTherearemanyvariationsofLoremIpsumavailable,butthemajorityhavesufferedTherearemanyvariationsofLorem

IpsumavailableDataAnalysisTherearemanyvariationsofLoremIpsumavailable,butthemajorityhavesufferedTherearemanyvariationsofLorem

IpsumavailableManagementTherearemanyvariationsofLoremIpsumavailable,butthemajorityhavesufferedTherearemanyvariationsofLorem

Ipsumavailable01項(xiàng)目特色展示TitleGoesHere

ofloremipsumavailable,butthemajorityhavesufferedTitleGoesHere

ofloremipsumavailable,butthemajorityhavesufferedalterationinsomeform,byinjectedhumour

randomizedTitleGoesHere

ofloremipsumavailable,butthemajorityhavesufferedTitleGoesHere

ofloremipsumavailable,butthemajorityhavesufferedTitleGoesHere

ofloremipsumavailable,butthemajorityhavesufferedTitleGoesHere

ofloremipsumavailable,butthemajorityhavesuffered01項(xiàng)目特色展示TitleGoesHereTherearemanyvariations

ofpassagesloremipsumavailable,butthemajoritysufferedalterationTitleGoesHereTherearemanyvariations

ofpassagesloremipsumavailable,butthemajoritysufferedalterationTitleGoesHereTherearemanyvariations

ofpassagesloremipsumavailable,butthemajoritysufferedalterationTitleGoesHereTherearemanyvariations

ofpassagesloremipsumavailable,butthemajoritysufferedalterationTitleGoesHereTherearemanyvariations

ofpassagesloremipsumavailable,butthemajoritysufferedalterationTitleGoesHereTherearemanyvariations

ofpassagesloremipsumavailable,butthemajoritysufferedalteration工作不足及提高★努力方向★工作效率★團(tuán)隊(duì)提高★擴(kuò)展銷售01[第四部分]PART0101團(tuán)隊(duì)成員介紹Portfolio1Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummyPortfolio2Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummyPortfolio3Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummyPortfolio4Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummy01團(tuán)隊(duì)成員介紹TitleGoesHere

Therearemanyvariationsofpassagesofloremipsumavailable,butthemajority亮亮圖文旗艦店tobesure.TitleGoeshereTherearemanyvariationsofthemetotheheavenTwo50%TitleGoesHere

Therearemanyvariationsofpassagesofloremipsumavailable,butthemajorityhavesufferedalterationinsomeform,byinjectedhumourrandomizewordswhichdon'tlookevenslightlybelievable.IfyouaregoingtouseApassageofloremipsum,youneedtobesure.TitleGoeshereTherearemanyvariationsofthemetotheheavenTwo90%01團(tuán)隊(duì)成員介紹Loremipsumdolorsitamet,consecteturadipiscingelit.Curabiturelementumposuerepretium.Quisquenibhdolor,dignissimacdignissimut,luctusacurna.Aliquamaliquetnonmassaquistincidunt.Maurisullamcorperjustotristiqueduiposueretincidunt.Inneclacuslaoreetorcivariusimperdietsitametinaugue.ImprovementsLoremipsumdolorsitamet,consecteturadipiscingelit.PasswordsLoremipsumdolorsitamet,consecteturadipiscingelit.UploadsLoremipsumdolorsitamet,consecteturadipiscingelit.SupportLoremipsumdolorsitamet,consecteturadipiscingelit.NetworksLoremipsumdolorsitamet,consecteturadipiscingelit.01團(tuán)隊(duì)成員介紹

DetermineyourRealRewardIdentifyyourTriggerCreateaNewRoutineLoremipsumdolorsitamet,consecteturadipiscingelit.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s.Step1Loremipsumdolorsitamet,consecteturadipiscingelit.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s.Step2Loremipsumdolorsitamet,consecteturadipiscingelit.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s.Step301團(tuán)隊(duì)成員介紹FinancialFamilySecureSafetyOURGOALSButallsunshinewithoutshade,allpleasurewithoutpain,isnotlifeatall.Takethelotofthehappiest-itisatangledyarn.Bereavementsandblessings,onefollowinganother,makeussadandblessedbyturns.Evendeathitselfmakeslifemoreloving.Butllsunshinewithoutshade,allpleasurewithoutpain,isnotlifeatall.itisatangledyarn.allsunshinewithoutshade,allpleasurewithoutpain,isnotlifeatall.Takethelotofthe.Bereavementsandblessings,one明年工作計(jì)劃方向★營業(yè)額提升★團(tuán)隊(duì)擴(kuò)大★管理提高★利益最大化01[第五部分]PART0101項(xiàng)目背景研究此處添加詳細(xì)文本描述，建議與標(biāo)題相關(guān)并符合整體語言風(fēng)格2009此處添加詳細(xì)文本描述，建議與標(biāo)題相關(guān)并符合整體語言風(fēng)格2010此處添加詳細(xì)文本描述，建議與標(biāo)題相關(guān)并符合整體語言風(fēng)格2011此處添加詳細(xì)文本描述，建議與標(biāo)題相關(guān)并符合整體語言風(fēng)格2012此處添加詳細(xì)文本描述，建議與標(biāo)題相關(guān)并符合整體語言風(fēng)格2013此處添加詳細(xì)文本描述，建議與標(biāo)題相關(guān)并符合整體語言風(fēng)格2014此處添加詳細(xì)文本描述，建議與標(biāo)題相關(guān)并符合整體語言風(fēng)格201501項(xiàng)目背景研究您的內(nèi)容打在這里，或者通過您的內(nèi)容打在這里添加標(biāo)題您的內(nèi)容打在這里，或者通過您的內(nèi)容打在這里添加標(biāo)題您的內(nèi)容打在這里，或者通過您的內(nèi)容打在這里添加標(biāo)題您的內(nèi)容打在這里，或者通過您的內(nèi)容打在這里