網(wǎng)店圖片處理與店鋪裝修課件

1、網(wǎng)店圖片處理與店鋪裝修5.1圖片處理5.2店鋪裝修目錄頁 Contents Page5.1 圖片處理圖片處理與店鋪裝修由于消費(fèi)者在網(wǎng)上購物是看不到實(shí)體的，只能通過圖片來感受產(chǎn)品狀況，因此圖片設(shè)計(jì)的好壞會(huì)直接影響店鋪的流量和轉(zhuǎn)化率，進(jìn)而影響店鋪的銷售額。目前處理圖片的軟件較多，常用的圖片處理軟件有Photoshop、光影魔術(shù)手、Flash、CorelDRAW、Fireworks等。這些軟件中以Photoshop應(yīng)用最廣泛，同時(shí)Photoshop也可以和其他軟件結(jié)合使用。圖片處理Photoshop CS3的工作界面主要由標(biāo)題欄、菜單欄、屬性欄、工具箱、控制面板等組成，如圖所示。5.1.1 Phot

2、oshop軟件的基本功能圖片處理1. Photoshop CS3的工作界面5.1.1 Photoshop軟件的基本功能圖片處理1. Photoshop CS3的工作界面在標(biāo)題欄中顯示的是軟件圖標(biāo)和名稱，當(dāng)工作區(qū)中的圖像窗口顯示為最大化狀態(tài)時(shí)，標(biāo)題欄中還將顯示當(dāng)前編輯文檔的名稱。標(biāo)題欄右側(cè)有3個(gè)按鈕，分別用于控制窗口的顯示大小及退出窗口。標(biāo)題欄5.1.1 Photoshop軟件的基本功能圖片處理1. Photoshop CS3的工作界面菜單欄中包括“文件”“編輯”“圖像”“圖層”“選擇”“濾鏡”“分析”“視圖”“窗口”和“幫助”10個(gè)菜單。單擊任意一個(gè)菜單，系統(tǒng)將會(huì)彈出相應(yīng)的下拉菜單，下拉菜單中

3、又包含若干個(gè)子命令，選擇任意一個(gè)子命令即可實(shí)現(xiàn)相應(yīng)的操作。菜單欄5.1.1 Photoshop軟件的基本功能圖片處理1. Photoshop CS3的工作界面屬性欄顯示工具箱中當(dāng)前選擇工具的參數(shù)和選項(xiàng)設(shè)置。在工具箱中選擇不同的工具，屬性欄中顯示的選項(xiàng)和參數(shù)也各不相同。 屬性欄5.1.1 Photoshop軟件的基本功能圖片處理1. Photoshop CS3的工作界面工具箱中包含各種圖形繪制和圖像處理工具，如對(duì)圖像進(jìn)行選擇、移動(dòng)、繪制、編輯和查看的工具，在圖像中輸入文字的工具，更改前景色和背景色的工具，等等。工具箱5.1.1 Photoshop軟件的基本功能圖片處理1. Photoshop C

4、S3的工作界面Photoshop CS3共提供了21種控制面板。利用這些控制面板可以對(duì)當(dāng)前圖像的色彩、大小、樣式及相關(guān)的操作等進(jìn)行設(shè)置和控制?？刂泼姘?.1.1 Photoshop軟件的基本功能圖片處理2. Photoshop CS3的基本操作（1） 新建文件。選擇“文件”“新建”命令或按“Ctrl+N”組合鍵，或按住Ctrl鍵，在空白界面中雙擊，都可以打開“新建”對(duì)話框，在其中對(duì)新建圖像文件的名稱、尺寸、分辨率、顏色模式和背景內(nèi)容等進(jìn)行設(shè)置，如圖所示。單擊“確定”按鈕即可創(chuàng)建新圖像文件。文件的基本操作5.1.1 Photoshop軟件的基本功能圖片處理2. Photoshop CS3的基本操

5、作（2） 打開文件。選擇“文件”“打開”命令或按“Ctrl+O”組合鍵，或直接在Photoshop界面中雙擊，都可以打開“打開”對(duì)話框，如圖所示。選擇要打開的圖片，單擊“打開”按鈕即可打開圖像文件。文件的基本操作5.1.1 Photoshop軟件的基本功能圖片處理2. Photoshop CS3的基本操作（3） 保存文件。選擇“文件”“存儲(chǔ)為”命令或按“Ctrl+Shift+S”組合鍵，都可打開“存儲(chǔ)為”對(duì)話框，如圖所示。選擇要保存的文件，單擊“保存”按鈕即可保存文件。文件的基本操作5.1.1 Photoshop軟件的基本功能圖片處理2. Photoshop CS3的基本操作（4） 關(guān)閉文件。

6、選擇“文件”“關(guān)閉”命令或按“Ctrl+W”組合鍵，或單擊圖像窗口右上方的“關(guān)閉”按鈕，都可關(guān)閉打開的某個(gè)文件；如果是關(guān)閉全部文件，可以選擇“文件”“關(guān)閉全部”命令或按“Alt+Ctrl+W”組合鍵。文件的基本操作5.1.1 Photoshop軟件的基本功能圖片處理2. Photoshop CS3的基本操作（1） 調(diào)整圖像尺寸。任何一個(gè)圖像都有寬度、高度和分辨率，調(diào)整圖像的尺寸就是通過調(diào)整這些要素來實(shí)現(xiàn)的。操作方法如下。選擇“圖像”“圖像大小”命令，打開“圖像大小”對(duì)話框，如圖所示。圖像的基本編輯5.1.1 Photoshop軟件的基本功能圖片處理2. Photoshop CS3的基本操作（2

7、） 圖像的裁剪。在Photoshop中可以利用裁剪工具對(duì)圖像進(jìn)行任意的裁剪，如圖所示。圖像的基本編輯5.1.1 Photoshop軟件的基本功能圖片處理2. Photoshop CS3的基本操作系統(tǒng)中圖像的色調(diào)是依照色階的明暗層次來劃分的，明亮的部分形成高色調(diào)，陰暗的部分形成低色調(diào)，中間的部分形成半色調(diào)。圖像的色調(diào)是指圖像的明暗度，調(diào)整圖像的色調(diào)就是對(duì)圖像的明暗度進(jìn)行調(diào)整。圖像色調(diào)的調(diào)整只對(duì)圖像選定區(qū)域有效，如果圖像中沒有選定區(qū)域，系統(tǒng)將默認(rèn)整個(gè)圖像為選定區(qū)域。圖像色調(diào)與色彩的調(diào)整5.1.1 Photoshop軟件的基本功能圖片處理2. Photoshop CS3的基本操作（1） 亮度/對(duì)比度

8、的調(diào)整?！傲炼?對(duì)比度”命令可以用來調(diào)節(jié)圖像的亮度和對(duì)比度。選擇“圖像”“調(diào)整”“亮度/對(duì)比度”命令，彈出“亮度/對(duì)比度”對(duì)話框，從中可以設(shè)置亮度和對(duì)比度。亮度/對(duì)比度調(diào)整前、后的效果分別如圖所示。圖像色調(diào)與色彩的調(diào)整5.1.1 Photoshop軟件的基本功能圖片處理2. Photoshop CS3的基本操作（2） 色階的調(diào)整?！吧A”命令可以通過調(diào)整圖像的暗調(diào)、中間調(diào)和高光等強(qiáng)度級(jí)別，校正圖像的色調(diào)范圍和色彩平衡。選擇“圖像”“調(diào)整”“色階”命令，彈出“色階”對(duì)話框（見圖），調(diào)整其中的參數(shù)，完成對(duì)圖像色階的調(diào)整。圖像色調(diào)與色彩的調(diào)整5.1.1 Photoshop軟件的基本功能圖片處理2.

9、Photoshop CS3的基本操作（3） 曲線的調(diào)整?！扒€”命令是使用非常廣泛的色調(diào)控制方式。它的功能和“色階”命令相同，只不過比“色階”命令可以做更多、更精密的設(shè)置?！吧A”命令只是利用3個(gè)變量（高光、暗調(diào)、中間調(diào)）對(duì)色調(diào)進(jìn)行調(diào)整；而“曲線”命令可以調(diào)整0255的任意點(diǎn)，最多可同時(shí)使用16個(gè)變量。圖像色調(diào)與色彩的調(diào)整5.1.1 Photoshop軟件的基本功能圖片處理2. Photoshop CS3的基本操作選擇“圖像”“調(diào)整”“曲線”命令，彈出“曲線”對(duì)話框，如圖所示。在該對(duì)話框中進(jìn)行相應(yīng)參數(shù)的設(shè)置，以完成對(duì)圖像色調(diào)的調(diào)整。圖像色調(diào)與色彩的調(diào)整5.1.1 Photoshop軟件的基本功

10、能圖片處理2. Photoshop CS3的基本操作（4） 色彩平衡的調(diào)整?！吧势胶狻泵羁梢愿淖儾噬珗D像中顏色的混合，從而使整體圖像的色彩平衡。選擇“圖像”“調(diào)整”“色彩平衡”命令，系統(tǒng)彈出“色彩平衡”對(duì)話框，如圖所示。圖像色調(diào)與色彩的調(diào)整5.1.1 Photoshop軟件的基本功能圖片處理2. Photoshop CS3的基本操作（5） 色相/飽和度的調(diào)整?！吧?飽和度”命令主要用于改變像素的色相及飽和度，而且可以給像素指定新的色相和飽和度，實(shí)現(xiàn)給灰度圖像添加色彩的功能。在Photoshop CS3中還可以存儲(chǔ)和載入色相/飽和度的設(shè)置，供其他圖像重復(fù)使用。選擇“圖像”“調(diào)整”“色相/飽

11、和度”命令，系統(tǒng)彈出“色相/飽和度”對(duì)話框，如下圖所示。圖像色調(diào)與色彩的調(diào)整5.1.1 Photoshop軟件的基本功能圖片處理2. Photoshop CS3的基本操作圖像色調(diào)與色彩的調(diào)整“色相/飽和度”對(duì)話框5.1.1 Photoshop軟件的基本功能圖片處理2. Photoshop CS3的基本操作在Photoshop中圖層具有很強(qiáng)大的功能，利用它可以獨(dú)立修改某一圖層的圖像，而不影響其他圖層的圖像；圖層樣式可以提供各種各樣的效果，如暗調(diào)、發(fā)光、斜面、疊加和描邊，利用這些效果可以迅速改變圖層內(nèi)容的外觀。圖層及圖層樣式是進(jìn)行效果處理時(shí)很常用的工具，必須熟練掌握。圖層就好比一層透明的玻璃紙，透

12、過這層紙可以看到紙后面的東西，而且無論在這層紙上如何涂畫，都不會(huì)影響其他層中的內(nèi)容。圖層的應(yīng)用5.1.1 Photoshop軟件的基本功能圖片處理2. Photoshop CS3的基本操作（1） 圖層的基本操作。圖層的基本操作包括圖層的新建、移動(dòng)、復(fù)制和刪除等。由于受篇幅限制，本部分內(nèi)容將不再展開。（2） 圖層樣式命令的運(yùn)用。選擇“圖層”“圖層樣式”命令，在“圖層樣式”下拉菜單中提供了投影、內(nèi)陰影、外發(fā)光、內(nèi)發(fā)光、斜面和浮雕、光澤、顏色疊加、漸變疊加、圖案疊加和描邊等效果。選擇“圖層”“圖層樣式”“混合選項(xiàng)”命令，系統(tǒng)彈出“圖層樣式”對(duì)話框。在“圖層樣式”對(duì)話框中可以對(duì)這些效果進(jìn)行調(diào)整，如圖所

13、示。圖層的應(yīng)用5.1.1 Photoshop軟件的基本功能圖片處理2. Photoshop CS3的基本操作圖層的應(yīng)用“圖層樣式”對(duì)話框5.1.1 Photoshop軟件的基本功能圖片處理2. Photoshop CS3的基本操作在處理網(wǎng)店圖片時(shí)經(jīng)常會(huì)用到摳圖，常用的摳圖方法主要有矩形選區(qū)和橢圓選區(qū)摳圖、多邊形套索工具摳圖、單色背景摳圖、鋼筆工具摳圖、通道摳圖、濾鏡摳圖等。摳圖的應(yīng)用主圖是產(chǎn)品展示的首要窗口，不僅出現(xiàn)在詳情頁的第一屏、店鋪的首頁、列表頁，而且在淘寶網(wǎng)的搜索頁上也可以看到。主圖傳達(dá)了產(chǎn)品的款式、顏色、質(zhì)地、品牌等很多重要信息，買家通過這些信息會(huì)決定是否瀏覽該產(chǎn)品，因此，主圖的好壞

14、會(huì)直接影響買家的關(guān)注度和點(diǎn)擊量，主圖是流量來源的最基本入口。主圖制作的基本要求是背景色單一、畫面清晰、品牌突出、主體商品突出、5張主圖完整呈現(xiàn)等。5.1.2 主圖和廣告圖的制作圖片處理1. 主圖的制作白底主圖的制作方法如下。步驟1：打開Photoshop CS3軟件，選擇“文件”“新建”命令。步驟2：在彈出的“新建”對(duì)話框中設(shè)置“寬度”為800，“高度”為800，“分辨率”為72，“顏色模式”為“RGB顏色”，設(shè)置完成后單擊“確定”按鈕。5.1.2 主圖和廣告圖的制作圖片處理1. 主圖的制作步驟3：打開素材圖片，采用抽出（選擇“濾鏡”“抽出”命令）的方法將素材圈選，然后單擊左側(cè)的填充工具，在圈

15、選的圖形中單擊，最后單擊“確定”按鈕，即可將要摳的圖形摳出來，如圖所示。5.1.2 主圖和廣告圖的制作圖片處理1. 主圖的制作步驟4：將摳好的圖片放到主圖文件中。首先按“Ctrl+A”組合鍵全選素材圖片，然后按“Ctrl+C”組合鍵復(fù)制素材圖片，再按“Ctrl+Tab”組合鍵切換到主圖文件，最后按“Ctrl+V”組合鍵將素材圖片粘貼到主圖文件中，如圖所示。5.1.2 主圖和廣告圖的制作圖片處理1. 主圖的制作步驟5：復(fù)制一個(gè)產(chǎn)品，給產(chǎn)品加一個(gè)倒影。首先按“Ctrl+A”組合鍵全選素材圖片，再按“Ctrl+C”組合鍵復(fù)制一個(gè)圖層，然后按“Ctrl+V”組合鍵粘貼圖層，最后按“Ctrl+T”組合鍵

16、自由變換，右擊，在彈出的快捷菜單中選擇“垂直翻轉(zhuǎn)”命令，按住鼠標(biāo)左鍵拖動(dòng)圖片到相應(yīng)的位置，如圖所示。5.1.2 主圖和廣告圖的制作圖片處理1. 主圖的制作步驟6：給主圖添加logo。添加logo一方面可以起到宣傳和促銷的作用，另一方面可以防止他人盜用圖片?？梢詫⑹孪仍O(shè)計(jì)好的logo直接拖到主圖中來添加logo，如圖所示。5.1.2 主圖和廣告圖的制作圖片處理1. 主圖的制作步驟7：在主圖上添加邊框和水印文字。首先在新的背景圖層上雙擊，打開“圖層樣式”對(duì)話框，單擊“描邊”選項(xiàng)，在打開的“描邊”選項(xiàng)板中，將“大小”改為10，“位置”改為內(nèi)部，描邊顏色設(shè)置為咖啡色，單擊“確定”按鈕。然后在主圖上輸入

17、水印文字，并調(diào)整文字的透明度，如圖所示。5.1.2 主圖和廣告圖的制作圖片處理1. 主圖的制作凡是為了滿足某種特定的需求，公開而廣泛地向公眾傳遞信息的圖片，都可稱為廣告圖。廣告圖是為商家贏取流量從而轉(zhuǎn)化為交易的媒介，因此非常重要。廣告圖具有色彩搭配層次分明、主體清晰明確、賣點(diǎn)突出、排版布局符合客戶瀏覽習(xí)慣、產(chǎn)品及價(jià)格突出等特點(diǎn)。5.1.2 主圖和廣告圖的制作圖片處理2. 廣告圖的制作（1） 直通車廣告圖。直通車廣告圖主要分布在淘寶站內(nèi)和站外，站內(nèi)直通車廣告圖主要分布在搜索頁的右側(cè)和下側(cè)，如圖所示。直通車廣告圖的設(shè)計(jì)水平直接影響店鋪的點(diǎn)擊率和轉(zhuǎn)化率。5.1.2 主圖和廣告圖的制作圖片處理2. 廣

18、告圖的制作廣告圖的類型（2） 鉆石展位廣告圖。鉆石展位廣告圖主要分布在淘寶首頁的焦點(diǎn)圖、右側(cè)的banner圖、淘寶垂直頻道等位置，如圖所示。鉆石展位廣告圖的設(shè)計(jì)水平會(huì)直接影響店鋪的流量和轉(zhuǎn)化率。5.1.2 主圖和廣告圖的制作圖片處理2. 廣告圖的制作廣告圖的類型（3） 活動(dòng)廣告圖?；顒?dòng)廣告圖主要是參加各類活動(dòng)需要制作的廣告圖，它對(duì)于圖片的尺寸、背景和創(chuàng)意都有一定的要求，因此在報(bào)名參加活動(dòng)時(shí)要仔細(xì)研讀活動(dòng)對(duì)于圖片的要求，嚴(yán)格按照活動(dòng)的要求設(shè)計(jì)圖片，這樣才能保證活動(dòng)通過的概率。聚劃算活動(dòng)廣告圖如圖所示。5.1.2 主圖和廣告圖的制作圖片處理2. 廣告圖的制作廣告圖的類型5.1.2 主圖和廣告圖的制

19、作圖片處理2. 廣告圖的制作廣告圖的類型聚劃算活動(dòng)廣告圖（1） 推廣主題清晰。每個(gè)廣告圖都要有一個(gè)明確的主題，在主題確定好后，所有的元素都要圍繞這個(gè)主題展開。圖示的圖片展示了鞋透氣這一特點(diǎn)。5.1.2 主圖和廣告圖的制作圖片處理2. 廣告圖的制作廣告圖的設(shè)計(jì)原則（2） 目標(biāo)人群準(zhǔn)確。不同目標(biāo)人群的審美標(biāo)準(zhǔn)和興趣愛好不同，所以在設(shè)計(jì)廣告圖時(shí)應(yīng)清楚地認(rèn)識(shí)到產(chǎn)品所針對(duì)的購買人群。如圖所示，產(chǎn)品的目標(biāo)人群主要針對(duì)身材較胖的女性。5.1.2 主圖和廣告圖的制作圖片處理2. 廣告圖的制作廣告圖的設(shè)計(jì)原則（3） 表現(xiàn)形式美觀。在處理廣告圖的色彩和構(gòu)圖方式時(shí)需要一定的技巧。不同的色彩會(huì)產(chǎn)生不同的色彩情感，如人

20、們見到紅色、橙色、紫色等顏色會(huì)產(chǎn)生溫暖、熱烈、危險(xiǎn)等感覺，使人產(chǎn)生沖動(dòng)情緒；見到藍(lán)色、綠色等顏色會(huì)產(chǎn)生寒冷、理智、平靜等感覺。所以，廣告圖要根據(jù)所表達(dá)的主題來選擇不同的主色調(diào)，一般廣告圖的用色不宜超過三種，并且按照 631 的比例進(jìn)行配置，同時(shí)主色調(diào)應(yīng)與產(chǎn)品包裝的顏色保持統(tǒng)一，如下圖所示。5.1.2 主圖和廣告圖的制作圖片處理2. 廣告圖的制作廣告圖的設(shè)計(jì)原則5.1.2 主圖和廣告圖的制作圖片處理2. 廣告圖的制作廣告圖的設(shè)計(jì)原則淘寶焦點(diǎn)圖廣告圖的構(gòu)圖方式也是衡量廣告圖質(zhì)量的一個(gè)重要因素。目前，廣告圖的構(gòu)圖方式主要有圖片文案兩邊分構(gòu)圖法、3/7開構(gòu)圖法、左-右-左構(gòu)圖法、斜切式構(gòu)圖法和極端構(gòu)圖

21、法。圖片文案兩邊分是最便捷也是最不容易犯錯(cuò)的構(gòu)圖方法，即將圖片和文字各放一邊，但在文案排版上一定要突出中心點(diǎn)，如圖所示。5.1.2 主圖和廣告圖的制作圖片處理2. 廣告圖的制作廣告圖的設(shè)計(jì)原則5.1.2 主圖和廣告圖的制作圖片處理2. 廣告圖的制作廣告圖的設(shè)計(jì)原則圖片文案兩邊分構(gòu)圖法示例3/7開構(gòu)圖法是將圖片和文字左右3/7開，這是令人感覺舒服的視覺比例，且整體畫面具有很強(qiáng)的層次感和節(jié)奏感，如圖所示。5.1.2 主圖和廣告圖的制作圖片處理2. 廣告圖的制作廣告圖的設(shè)計(jì)原則3/7開構(gòu)圖法示例左-右-左構(gòu)圖法是將圖片以不同大小和位置進(jìn)行擺放，形成空間感、層次感和節(jié)奏感，如圖所示。5.1.2 主圖和

22、廣告圖的制作圖片處理2. 廣告圖的制作廣告圖的設(shè)計(jì)原則左-右-左構(gòu)圖法示例斜切式構(gòu)圖法能讓整個(gè)畫面充滿非常強(qiáng)的張力，讓主體和需要表達(dá)的核心內(nèi)容得到更加突出的展示，如圖所示。5.1.2 主圖和廣告圖的制作圖片處理2. 廣告圖的制作廣告圖的設(shè)計(jì)原則斜切式構(gòu)圖法示例極端構(gòu)圖法是將文字或圖形中的某一個(gè)元素極端放大，使整個(gè)畫面的走向圍繞此元素展開，如圖所示。5.1.2 主圖和廣告圖的制作圖片處理2. 廣告圖的制作廣告圖的設(shè)計(jì)原則極端構(gòu)圖法示例5.2 店鋪裝修圖片處理與店鋪裝修賣家在裝修店鋪時(shí)應(yīng)考慮所銷售商品的類目和風(fēng)格。裝修店鋪的主要目的是吸引買家，買家在店鋪里停留的時(shí)間越長(zhǎng)，其購買體驗(yàn)越好。因此，在裝

23、修店鋪時(shí)應(yīng)遵循的原則是：第一，店鋪與商品相得益彰，店鋪的風(fēng)格要與商品的風(fēng)格相協(xié)調(diào)；第二，店鋪在布局上應(yīng)突顯簡(jiǎn)潔性；第三，店鋪的整體風(fēng)格要協(xié)調(diào)。店鋪裝修對(duì)于店招設(shè)計(jì)需要注意以下三個(gè)方面。（1） 店招應(yīng)有固定統(tǒng)一的尺寸，一般是950 px120 px，圖片格式為jpg或gif。（2） 店招設(shè)計(jì)需要向客戶傳達(dá)自己的賣點(diǎn)，以吸引客戶，提高店鋪的轉(zhuǎn)化率。（3） 店招的設(shè)計(jì)應(yīng)新穎、獨(dú)特。5.2.1 店招的設(shè)計(jì)店鋪裝修1. 店招設(shè)計(jì)的注意事項(xiàng)根據(jù)5.1節(jié)所學(xué)的圖片處理知識(shí)，設(shè)計(jì)一個(gè)食品類目的店招并上傳到店鋪中。步驟1：進(jìn)入淘寶網(wǎng)的賣家中心，單擊“店鋪管理”“店鋪裝修”選項(xiàng)，進(jìn)入店鋪裝修界面，如圖所示。5.2

24、.1 店招的設(shè)計(jì)店鋪裝修2. 店招設(shè)計(jì)案例步驟2：上傳設(shè)計(jì)好的店招，如圖所示。5.2.1 店招的設(shè)計(jì)店鋪裝修2. 店招設(shè)計(jì)案例合理的寶貝分類可以使店鋪的商品更清晰、更有條理性，方便買家快速瀏覽與查找想要的寶貝。如果店鋪發(fā)布的寶貝數(shù)目眾多，那么合理的分類就顯得更加重要，如圖所示。5.2.2 寶貝分類的設(shè)計(jì)店鋪裝修寶貝分類主要是方便消費(fèi)者查找店內(nèi)商品，因此應(yīng)結(jié)合產(chǎn)品的特性和消費(fèi)者的搜索習(xí)慣對(duì)寶貝進(jìn)行分類。對(duì)寶貝可以同時(shí)從多個(gè)角度進(jìn)行分類，如按照產(chǎn)品的種類進(jìn)行分類，按照不同品牌進(jìn)行分類；但分類不宜過細(xì)、過多，并且不能出現(xiàn)有分類、無寶貝的情況。5.2.2 寶貝分類的設(shè)計(jì)店鋪裝修寶貝詳情頁是一個(gè)向顧客詳

25、細(xì)展示寶貝細(xì)節(jié)與優(yōu)勢(shì)的地方。顧客喜不喜歡寶貝、是否愿意在你的店里購買那肯定都要仔細(xì)查看寶貝詳情頁，99%的訂單也都是在看過寶貝詳情頁后生成的。寶貝詳情頁就像一頁詳細(xì)的產(chǎn)品說明書，顧客通過瀏覽詳情頁就可以了解產(chǎn)品的相關(guān)信息。除此之外，寶貝詳情頁還可以說是產(chǎn)品的形象展示，通過寶貝詳情頁能夠直觀看到產(chǎn)品的整體形象、細(xì)節(jié)、構(gòu)造等。5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修1. 寶貝詳情頁的定義與作用寶貝詳情頁的一般寬度是750 px，對(duì)高度沒有限制，但并不是越長(zhǎng)越好。寶貝詳情頁的結(jié)構(gòu)如圖所示。5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修2. 寶貝詳情頁的尺寸和結(jié)構(gòu)5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修3. 寶貝詳情頁

26、設(shè)計(jì)的準(zhǔn)備工作（1） 市場(chǎng)調(diào)查（2） 調(diào)查結(jié)果及產(chǎn)品的分析（3） 寶貝賣點(diǎn)的挖掘（4） 設(shè)計(jì)元素的準(zhǔn)備在設(shè)計(jì)寶貝詳情頁之前要進(jìn)行充分的市場(chǎng)調(diào)查（同行業(yè)調(diào)查、規(guī)避同款等），同時(shí)也要做好消費(fèi)者調(diào)查（分析消費(fèi)人群、消費(fèi)能力、消費(fèi)喜好及消費(fèi)者在意的問題等）。5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修3. 寶貝詳情頁設(shè)計(jì)的準(zhǔn)備工作市場(chǎng)調(diào)查根據(jù)市場(chǎng)調(diào)查結(jié)果及自己的產(chǎn)品進(jìn)行系統(tǒng)的分析、總結(jié)，羅列出消費(fèi)者在意的問題、同行的優(yōu)缺點(diǎn)及自身產(chǎn)品的定位，挖掘自身產(chǎn)品與眾不同的賣點(diǎn)。5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修3. 寶貝詳情頁設(shè)計(jì)的準(zhǔn)備工作調(diào)查結(jié)果及產(chǎn)品的分析針對(duì)不同消費(fèi)群體的需求特點(diǎn)，挖掘出本店寶貝的賣點(diǎn)。賣點(diǎn)的挖

27、掘可以從多個(gè)角度進(jìn)行，如價(jià)格、款式、文化、感覺、服務(wù)、特色、品質(zhì)及人氣等。5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修3. 寶貝詳情頁設(shè)計(jì)的準(zhǔn)備工作寶貝賣點(diǎn)的挖掘通過對(duì)消費(fèi)者的分析及自身產(chǎn)品賣點(diǎn)的提煉，首先根據(jù)寶貝風(fēng)格的定位，開始準(zhǔn)備所用的設(shè)計(jì)素材；然后根據(jù)詳情頁所用的文案確立寶貝詳情頁的用色、字體及排版等；最后還要營(yíng)造出符合寶貝特性的氛圍。例如，羽絨服的背景可以采用冬天的冰山效果。因此，寶貝詳情頁主要包括配色、字體、文案、構(gòu)圖、排版及氛圍六大元素。5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修3. 寶貝詳情頁設(shè)計(jì)的準(zhǔn)備工作設(shè)計(jì)元素的準(zhǔn)備根據(jù)店鋪和產(chǎn)品的特點(diǎn)確定寶貝詳情頁的主色調(diào)與字體，避免出現(xiàn)配色凌亂、沖突和

28、字體過多的現(xiàn)象，可以考慮從logo、產(chǎn)品本身的屬性和產(chǎn)品的聯(lián)想屬性中提取內(nèi)頁的配色。5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修4. 寶貝詳情頁的設(shè)計(jì)流程確定色彩和字體雖然寶貝詳情頁沒有固定的模板可以直接套用，但是在設(shè)計(jì)寶貝詳情頁之前還是需要對(duì)整體的框架結(jié)構(gòu)做一個(gè)大致的規(guī)劃。確定框架結(jié)構(gòu)5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修4. 寶貝詳情頁的設(shè)計(jì)流程詳情頁是影響客戶最終是否下訂單的重要因素，因此，詳情頁的設(shè)計(jì)尤為重要。美工應(yīng)根據(jù)產(chǎn)品的特點(diǎn)和店鋪的特點(diǎn)將設(shè)計(jì)好的頁面模塊進(jìn)行組合，同時(shí)要保證頁面效果的統(tǒng)一。統(tǒng)一頁面效果確定好框架結(jié)構(gòu)后，要對(duì)每個(gè)模塊進(jìn)行設(shè)計(jì)和制作。對(duì)于制作好的圖片可以分文件夾進(jìn)行保存，最好以

29、psd格式進(jìn)行保存，方便后期的修改和完善。設(shè)計(jì)模塊5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修4. 寶貝詳情頁的設(shè)計(jì)流程對(duì)于設(shè)計(jì)好的寶貝詳情頁還要進(jìn)行審核，審核的內(nèi)容主要包括有沒有違規(guī)的地方，有沒有字體不統(tǒng)一、圖片不清晰等。審核沒有問題后可以直接通過淘寶后臺(tái)上傳、發(fā)布。審核和上傳發(fā)布5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修5. 寶貝詳情頁的內(nèi)容基本信息是寶貝詳情頁最常用的模塊之一，主要內(nèi)容包括商品的屬性、尺寸等信息，如圖所示?；拘畔?.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修5. 寶貝詳情頁的內(nèi)容從各個(gè)角度展示商品，配合模特展示圖來展示商品和商品的使用環(huán)境等，如圖所示。商品展示5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝

30、修5. 寶貝詳情頁的內(nèi)容展示買家最關(guān)注的商品的細(xì)節(jié)，突出商品的優(yōu)勢(shì)，如圖所示。細(xì)節(jié)展示5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修5. 寶貝詳情頁的內(nèi)容深度挖掘商品的賣點(diǎn)，提升商品的價(jià)值和買家的購買欲望，如圖所示。賣點(diǎn)提煉5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修5. 寶貝詳情頁的內(nèi)容與同類商品進(jìn)行對(duì)比，突出商品的優(yōu)勢(shì)，加深買家對(duì)商品的認(rèn)同，如圖所示。商品對(duì)比5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修5. 寶貝詳情頁的內(nèi)容突出與同類商品的差異化優(yōu)勢(shì)，提煉商品的核心競(jìng)爭(zhēng)力，給買家一個(gè)非常好的購買理由，如圖所示。核心競(jìng)爭(zhēng)力5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修5. 寶貝詳情頁的內(nèi)容通過情感營(yíng)銷博得買家的情感共鳴，加強(qiáng)其

31、購買欲望。情感營(yíng)銷可以以友情、親情、愛情和關(guān)懷等為主題，如圖所示。情感營(yíng)銷5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修5. 寶貝詳情頁的內(nèi)容展示賣家或者品牌做出的承諾，從而打消買家的購買疑慮，促使買家下單，如圖所示。賣家承諾5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修5. 寶貝詳情頁的內(nèi)容通過企業(yè)文化將企業(yè)的服務(wù)意識(shí)、品牌愿景等信息傳達(dá)給買家，借此樹立品牌的正面形象，讓買家認(rèn)同品牌、認(rèn)同店鋪，如圖所示。企業(yè)文化5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修5. 寶貝詳情頁的內(nèi)容賣家和品牌的實(shí)力展示可以進(jìn)一步提升商品的價(jià)值，增強(qiáng)買家的購買欲望，如圖所示。實(shí)力展示5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修5. 寶貝詳情頁的內(nèi)容展

32、示商品半公開性的生產(chǎn)過程，可以加強(qiáng)買家對(duì)商品的信任，如圖所示。生產(chǎn)流程5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修5. 寶貝詳情頁的內(nèi)容展示商品精美的外包裝、快遞包裹的包裝過程等信息，如圖所示。包裝展示5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修5. 寶貝詳情頁的內(nèi)容將商品的常見問題以問答的形式展現(xiàn)，可以減輕客服的壓力，并且能打消買家的購物顧慮，如圖所示。Q&A問答5.2.3 寶貝詳情頁的設(shè)計(jì)店鋪裝修5. 寶貝詳情頁的內(nèi)容通過關(guān)聯(lián)其他商品，讓買家有更多的選擇，以提升客單價(jià)，如圖所示。關(guān)聯(lián)銷售用手機(jī)上淘寶App購物更為方便、快捷，已經(jīng)成為網(wǎng)購人群的新消費(fèi)行為。因此，無線端的設(shè)計(jì)顯得尤為重要，如圖所示。5.2.4

33、 無線端的設(shè)計(jì)店鋪裝修無線端的基本信息包括店鋪名稱、店鋪logo、店招圖片等，如圖所示。其中，店招圖片可以用官方推薦的，也可以自行設(shè)計(jì)。5.2.4 無線端的設(shè)計(jì)店鋪裝修1. 無線端基本信息的設(shè)置設(shè)置導(dǎo)航是為了方便買家快速找到所需要的商品。導(dǎo)航可以按照店內(nèi)商品的分類進(jìn)行設(shè)置，如可以將店內(nèi)商品分為燒雞、燒雞醬和牛肉湯等，每個(gè)分類還應(yīng)設(shè)置一個(gè)鏈接，如圖所示。5.2.4 無線端的設(shè)計(jì)店鋪裝修2. 無線端導(dǎo)航的設(shè)置若要選擇某個(gè)分類，則只需單擊“選擇鏈接”按鈕，如圖所示。5.2.4 無線端的設(shè)計(jì)店鋪裝修2. 無線端導(dǎo)航的設(shè)置打開Photoshop CS3軟件，選擇“文件”“新建”命令，新建寬度為640 px、高度為5