淘寶天貓網(wǎng)店美工實(shí)戰(zhàn)--視覺(jué)設(shè)計(jì)+店鋪裝修+移動(dòng)端店鋪（微課版）第9章制作移動(dòng)端網(wǎng)店頁(yè)面目錄Contents9.1移動(dòng)端網(wǎng)店首頁(yè)設(shè)計(jì)與制作9.2移動(dòng)端商品詳情頁(yè)特征與制作9.3課堂實(shí)訓(xùn)——制作移動(dòng)端家具網(wǎng)店首頁(yè)9.1.1移動(dòng)端網(wǎng)店首頁(yè)設(shè)計(jì)的注意事項(xiàng)由于目前大多數(shù)的流量和訂單都來(lái)自于移動(dòng)端，因此商家都很重視移動(dòng)端的運(yùn)營(yíng)，尤其是網(wǎng)店首頁(yè)的優(yōu)化。在設(shè)計(jì)移動(dòng)端首頁(yè)時(shí)，通常需注意以下4點(diǎn)。把握頁(yè)面整體內(nèi)容頁(yè)面整體內(nèi)容要便于消費(fèi)者識(shí)別、讀取和點(diǎn)擊。03合理控制頁(yè)面的長(zhǎng)度信息不必過(guò)多，一般以6屏以內(nèi)頁(yè)面長(zhǎng)度為最佳。02與PC端的視覺(jué)統(tǒng)一移動(dòng)端的內(nèi)容要與PC端的內(nèi)容相互呼應(yīng)，以提高網(wǎng)店品牌的關(guān)聯(lián)性。04注重感官的舒適性圖片的清晰度和大小都要適應(yīng)移動(dòng)設(shè)備的尺寸；商品的細(xì)節(jié)清晰、美觀。019.1.1移動(dòng)端網(wǎng)店首頁(yè)設(shè)計(jì)的注意事項(xiàng)如圖所示即為某衛(wèi)浴商品網(wǎng)店的移動(dòng)端首頁(yè)設(shè)計(jì)示例。該網(wǎng)店設(shè)計(jì)時(shí)，在合理分配內(nèi)容框架的基礎(chǔ)上，嚴(yán)格遵守了設(shè)計(jì)規(guī)范，其內(nèi)容展示重點(diǎn)明確、商品突出，可以吸引對(duì)這類商品感興趣的消費(fèi)者進(jìn)行瀏覽。9.1.2移動(dòng)端網(wǎng)店首頁(yè)的設(shè)計(jì)要點(diǎn)優(yōu)惠券首屏焦點(diǎn)圖活動(dòng)信息商品列表移動(dòng)端首屏焦點(diǎn)圖要在有限的頁(yè)面范圍內(nèi)放大商品和主要文案?？梢灾鲃?dòng)羅列其他商品信息來(lái)增加其曝光率與流量。每排的優(yōu)惠券數(shù)量不要超過(guò)3個(gè)。一般涉及單欄單品重點(diǎn)推廣和雙欄大量推廣兩種類型。9.1.3制作移動(dòng)端網(wǎng)店首頁(yè)本例將制作小家電網(wǎng)店移動(dòng)端首頁(yè)，首先確定網(wǎng)店的主題，通過(guò)不規(guī)則形狀的展現(xiàn)，再加上漸變的顏色，促銷的商品，讓整個(gè)首頁(yè)美觀、時(shí)尚且更具有亮點(diǎn)。其具體操作如下。1設(shè)置漸變疊加參數(shù)2設(shè)置投影參數(shù)9.1.3制作移動(dòng)端網(wǎng)店首頁(yè)3繪制正圓6繪制形狀5填充漸變4繪制形狀7添加漸變和投影8繪制形狀并添加漸變疊加9.1.3制作移動(dòng)端網(wǎng)店首頁(yè)9繪制高光11繪制形狀并添加漸變疊加10繪制形狀9.1.3制作移動(dòng)端網(wǎng)店首頁(yè)12輸入文字13設(shè)置圖層樣式參數(shù)9.1.3制作移動(dòng)端網(wǎng)店首頁(yè)14拷貝圖層樣式15輸入文字18設(shè)置漸變疊加參數(shù)16繪制圓角矩形17設(shè)置斜面和浮雕參數(shù)9.1.3制作移動(dòng)端網(wǎng)店首頁(yè)19輸入文字20繪制圓角矩形21復(fù)制優(yōu)惠券并修改內(nèi)容9.1.3制作移動(dòng)端網(wǎng)店首頁(yè)23繪制圓角矩形并輸入文字24繪制矩形并添加素材25輸入文字22繪制圓角矩形并輸入符號(hào)9.1.3制作移動(dòng)端網(wǎng)店首頁(yè)26繪制圓角矩形并添加素材27輸入文字并繪制圓角矩形9.1.3制作移動(dòng)端網(wǎng)店首頁(yè)28完成后的效果目錄Contents9.1移動(dòng)端網(wǎng)店首頁(yè)設(shè)計(jì)與制作9.2移動(dòng)端商品詳情頁(yè)特征與制作9.3課堂實(shí)訓(xùn)——制作移動(dòng)端家具網(wǎng)店首頁(yè)9.2.1移動(dòng)端商品詳情頁(yè)的特征與PC端詳情頁(yè)相比，移動(dòng)端商品詳情頁(yè)具有以下4個(gè)特征。一屏一主題賣點(diǎn)展示更加精煉商品更突出細(xì)節(jié)的展現(xiàn)9.2.2制作移動(dòng)端商品詳情頁(yè)下面將制作蓮子商品的移動(dòng)端詳情頁(yè)，在制作時(shí)不但要體現(xiàn)蓮子的品質(zhì)，還需要將蓮子的純天然、營(yíng)養(yǎng)美味、安全放心等內(nèi)容體現(xiàn)出來(lái)，通過(guò)圖片與文字的組合讓整個(gè)商品詳情頁(yè)更加美觀，其具體操作如下。1添加素材3添加素材并輸入文字2輸入文字9.2.2制作移動(dòng)端商品詳情頁(yè)4添加素材7添加素材并輸入文字6繪制圓角矩形5繪制矩形并輸入文字9.2.2制作移動(dòng)端商品詳情頁(yè)8繪制圓角矩形12繪制矩形11輸入文字10繪制箭頭9繪制正圓并添加素材9.2.2制作移動(dòng)端商品詳情頁(yè)14查看完成后的效果13制作細(xì)節(jié)展示目錄Contents9.1移動(dòng)端網(wǎng)店首頁(yè)設(shè)計(jì)與制作9.2移動(dòng)端商品詳情頁(yè)特征與制作9.3課堂實(shí)訓(xùn)——制作移動(dòng)端家具網(wǎng)店首頁(yè)9.3課堂實(shí)訓(xùn)——制作移動(dòng)端家具網(wǎng)店首頁(yè)本例將制作家具網(wǎng)店網(wǎng)店移動(dòng)端首頁(yè)。要求在移動(dòng)端首頁(yè)中要展現(xiàn)出的家居用品，并將新品通過(guò)矩形框的形式展現(xiàn)出來(lái)，通過(guò)淺色的效果展現(xiàn)，讓整個(gè)網(wǎng)店首頁(yè)清新、自然。在結(jié)構(gòu)上，可以將本例的移動(dòng)端網(wǎng)店首頁(yè)劃分為首屏焦點(diǎn)圖、優(yōu)惠券、爆款活動(dòng)3個(gè)部分。完成后的參考效果如圖所示。實(shí)訓(xùn)目標(biāo)9.3課堂實(shí)訓(xùn)——制作移動(dòng)端家具網(wǎng)店首頁(yè)實(shí)訓(xùn)思路根據(jù)實(shí)訓(xùn)目標(biāo)，完成本實(shí)訓(xùn)主要需進(jìn)行以下主要操作。（1）打開“移動(dòng)端家具網(wǎng)店首頁(yè)素材.psd”素材文件，將其中的“圖層1”圖層拖動(dòng)到新建的文件中，調(diào)整位置和大小，并輸入文字內(nèi)容。（2）根據(jù)各個(gè)板塊的具體情況，繪制矩形框添加優(yōu)惠券信息。（3）在優(yōu)惠券的下方添加單個(gè)圖片，并在圖片的下方輸入說(shuō)明性文字。（4）制作商品列表時(shí)，先使用矩形框的形式制作商品列表，在