網店美工 市賽獲獎

贏家寶典網店美工贏家寶典吸引買家才是王道之詳情頁設計第11章Areyouready?第11章吸引買家才是王道之詳情頁設計詳情頁設計技巧制作商品詳情頁代碼制作商品詳情頁11.111.211.3商品詳情頁是提高轉化率的入口，它可以激發(fā)買家的消費欲望，樹立買家對店鋪的信任感，打消買家的消費疑慮，促使買家下單。商品本身雖然對轉化率起著決定性的作用，但是好的寶貝詳情頁可以提高商品的轉化率。寶貝詳情頁的設計要與寶貝主圖、寶貝標題相契合，詳情頁的內容必須能真實地介紹寶貝的屬性，如標題或主圖中體現的商品是韓版男士西裝，但是設計出來的頁面卻是歐美風格，買家的第一感覺就是不符合標題所述，肯定會馬上關閉頁面。因此，在打造爆款詳情頁的時候需要遵循三點設計原則。第一：策劃文案策劃商品文案是讓賣家頭痛的一件事，面對自己的寶貝，想提煉的賣點太多，想表現的內容更多，卻沒有一個合理排版的文案，該怎么辦？此時，買家可以參考同行的店鋪來策劃文案，一個成熟的天貓店鋪，他們的文案以及商品體驗系統已經做到了非常優(yōu)秀的地步，而賣家要做的事情僅僅是站在巨人的肩膀上來學習他們的文案系統，并將多個天貓店鋪的文案進行拆分，結合自己商品的特點再將文案重組。策劃方案第二：表現形式這里所指的表現形式就是將文字信息通過圖片+文字的形式展現給買家，而不是以單純的文字對產品進行描述。買家看完詳情頁之后，買還是不買主要是看商品表現形式是否打動了買家的心。另外，不要將詳情頁設計的像商品的說明書一樣，因為沒有買家愿意一字一句得去了解你的商品，需要做的是將文字中的賣點提煉，將賣點通過圖片的形式展現出來提煉前的詳情頁提煉后的詳情頁前后兩張圖片所示的是鑫艾克線纜的賣點。其中，第一幅圖提煉前的詳情頁是通過一句話和一張圖片來闡述了高精度無氧銅的特點，卻沒有將文字中所提及到的重點內容展現出來，只有區(qū)區(qū)幾十個字的寶貝描述，買家會因為這一句話而購買嗎？后一幅圖所示的提煉后的詳情頁是經過筆者修改后，以抓住買家心理讓買家購買為前提，結合生動的圖片表現形式將語句中的賣點提煉出來。不但能夠讓買家清晰、直觀、詳盡地了解高精度無氧銅的特點，還能夠洞察買家的內心世界，提煉出“十年可省電費3264元”來滿足買家的期望。第二：表現形式第三：色調統一寶貝詳情頁的色調是能夠給買家傳達心理暗示的一種最直接的方式。整體詳情頁的色調給大家的第一感覺是什么，買家就會根據這個感覺去瀏覽寶貝詳情頁。例如購買電線時，我們首先想到的是要買品質好的安全電線，那么，電線詳情頁的整體顏色就應該采用綠色，給買家一種安全、環(huán)保的感覺。如果采用紅色系來設計，就會讓買家聯想到火而違背了買家購買的初衷。綠色調詳情頁紅色調詳情頁第三：色調統一從綠色調詳情頁和紅色調詳情頁兩幅圖片中可以看出，商品的文字信息、商品的擺放位置和圖片中采用的元素都是一樣的，不同的是一幅采用綠色調來詮釋電線的特點，而另一幅采用紅色調來詮釋電線的特點，哪張圖更符合商品本身，我想大家一定一目了然了吧。因此，在設計詳情頁時要傳達的色調要符合商品的氣質，帶動買家的情緒，類目不同、商品不同，但是道理是相同的。很多新手買家或者美工以為做商品詳情頁就是簡單的擺放幾張商品圖，然后加一些參數表、再放一個5星好評就可以了，其實做詳情頁說簡單也簡單，說難也難，難就難在什么樣的詳情頁布局能夠將產品賣出去！簡單來說，詳情頁的布局應該采用上半部分闡述商品價值，下半部分培養(yǎng)買家的消費信任感來完成。在詳情頁的構成框架中，每一塊組成都有它的價值，都要經過仔細地推敲和設計，下面針對每一個框架進行詳細的闡述。商品詳情頁的構成上半部分闡述商品價值利用創(chuàng)意海報瞬間傳遞商品以及店鋪信息，用最短的時間使買家產生繼續(xù)瀏覽的欲望，因此在設計該部分時可以盡情展現商品的特色。上半部分闡述商品價值一個商品的賣點有很多，如果零散的分布，買家很難自己總結出商品的優(yōu)勢，因此在闡述賣點之前應該對所有賣點進行一個大的總結，告訴買家這個商品的賣點都在哪里，都有哪些。上半部分闡述商品價值根據商品賣點優(yōu)勢總結進行逐一的展示，其中1～6個賣點在對應的模塊中展示，這里所要展現的就是商品的特色，塑造商品“專業(yè)”性，向買家傳達產品能夠帶來卓越功效等此類信息，提升買家的購買欲望。上半部分闡述商品價值這里要寫的其實就很簡單了，它指的是可視化的商品說明書。上半部分闡述商品價值商品全方位展示以多個角度展示商品面貌，目的就是拉近與買家的距離，讓買家了解這款商品是否適合自己。上半部分闡述商品價值商品細節(jié)展示要清晰、富有質感，并且附加具體細節(jié)的相關文案介紹，方便買家更好地了解商品的材質和構造。下半部分培養(yǎng)買家的消費信任感通過對比強化自己的商品賣點，不斷向買家闡述商品的優(yōu)勢。下半部分培養(yǎng)買家的消費信任感通過商品包裝可以展現店鋪的品牌實力和商品的專業(yè)性，好的產品包裝可以贏得買家的信賴，讓買家覺得這個產品的性價比很高。下半部分培養(yǎng)買家的消費信任感這里體現的是品牌的實力，引導買家關注商品的專業(yè)品質，并讓買家對商品產生信任感，從而接納商品。下半部分培養(yǎng)買家的消費信任感通過店面或者工廠的圖片展示，可以烘托出品牌和店鋪的實力，增強買家對品牌的認知和信任感。下半部分培養(yǎng)買家的消費信任感商品售后說明可以解決買家已知和未知的各種問題，例如，是否支持7天無條件退換貨，本店選擇發(fā)哪種快遞，產品有質量問題應該如何解決等，好的商品售后說明模塊不但可以減輕客服的工作壓力，也可以增加靜默轉化率，從而做到把復雜的問題留給自己，把簡單的答案留給買家。本節(jié)介紹的是常見的詳情頁布局框架，具體情況下，買家需要提煉、結合自身商品的賣點來套用框架，并不是說所有的類目都適合這一框架。通過前面的學習我們已經對商品詳情頁的設計有了深刻的了解，下面就根據所學內容來對商品詳情頁中的部分重要模塊進行設計制作。關聯銷售模塊是推動商品轉化率的重中之重，它的作用不僅僅是分流，還會增加客單價（是指每個顧客平均購買商品的金額），讓買家買完這個還想買那個。賣家可以在這里搭配本店的其他明星產品，這樣不但能增加客單價，也可以促進轉化率。關聯銷售模塊通常放在頁面的最頂端或者創(chuàng)意海報情景大圖下方，但是不建議放入太多的關聯產品，一般5～8個為最優(yōu)效果。具體操作步驟如下：關聯銷售模塊操作步驟步驟1執(zhí)行【文件】丨【新建】命令，新建一個名稱為關聯銷售，尺寸為750×510像素的空白文檔，然后為背景圖像填充顏色，色值為【#c92912】。新建文檔并填充顏色操作步驟步驟2利用【直線工具】繪制粗細為1像素的白色直線，然后利用【橫排文字工具】輸入文字信息。字體：微軟雅黑；大?。?.58點字體：創(chuàng)藝簡老宋；大小：11點字體：AmericanGaramondBold；大?。?點字體：ArrusBT；大?。?0點字體：創(chuàng)藝簡老宋；大小：12點字體：ArrusBT；大?。?5.83點繪制直線并輸入文字執(zhí)行【窗口】丨【字符】命令，打開【字符】面板，點擊其中的【仿斜體】按鈕，可將字體設置為傾斜。【字符】面板操作步驟步驟3在工具箱中選擇【矩形工具】，然后在圖像中直線的下方繪制五個白色矩形。繪制矩形操作步驟步驟4在【圖層】面板中選中左側矩形所在的圖層，打開本書配套素材【1.jpg】文件，將其中的商品圖像拖動到【關聯銷售.psd】圖像窗口中左側矩形上，然后在【圖層】面板中為商品圖像所在的圖層創(chuàng)建剪貼蒙版。復制素材文件并創(chuàng)建剪貼蒙版操作步驟步驟5在工具箱中選擇【橫排文字工具】，然后為商品添加對應的文字信息。輸入文字字體：微軟雅黑；大?。?5.83點；顏色值：#B71300字體：黑體；大?。?點；顏色值：#B71300字體：Arial；大?。?.5點；顏色值：#B71300字體：黑體；大?。?點；顏色值：#B71300操作步驟步驟6根據步驟4～5中的操作方法，將【2.jpg】【3.jpg】【4.jpg】文件中的商品圖像分別拖動到矩形選框中，創(chuàng)建剪貼蒙版后，輸入對應的文字信息。完成關聯銷售模塊后的最終效果如右圖所示。復制素材文件并輸入文字商品賣點總結模塊主要是給買家一個清晰的商品功能全景，讓買家對商品功能、特點，一覽無余，對商品有一個全面的印象。按照先總結后分組的邏輯，把商品最好的一面展示出來。具體操作步驟如下：商品賣點模塊操作步驟步驟1執(zhí)行【文件】丨【新建】命令，新建一個名稱為賣點總結，尺寸為750×630像素的空白文檔，然后為背景圖像填充顏色，色值為【#bff0fe】。打開本書配套素材【6.psd】文件，將其中的商品圖像拖動到【賣點總結.psd】圖像窗口中。新建文檔、填充顏色并復制素材操作步驟步驟2執(zhí)行【文件】丨【新建】命令，新建一個名稱為賣點總結，尺寸為750×630像素的空白文檔，然后為背景圖像填充顏色，色值為【#bff0fe】。打開本書配套素材【6.psd】文件，將其中的商品圖像拖動到【賣點總結.psd】圖像窗口中。字體：方正蘭亭中黑；大?。?6.23點字體：方正蘭亭中黑；大?。?8.93點；顏色值：#7f7f7f字體：方正蘭亭中黑；大?。?9.95點；顏色值：#1c779c字體：方正蘭亭中黑；大?。?3.56點；顏色值：#1c779c繪制圓角矩形并輸入文字操作步驟步驟3在工具箱中選擇【自定形狀工具】，在工具選項欄【形狀】下拉列表中點擊按鈕，在彈出的菜單中選擇【符號】，彈出【AdobePhotoshop】提示框，點擊【追加】按鈕，在列表中選擇【選中復選框】，并設置前景色的色值為【#177299】。添加形狀操作步驟步驟4在圖像上按住【Shift】鍵的同時拖動鼠標繪制形狀。繪制形狀操作步驟步驟5在工具箱中設置前景色的色值為【#75afef】，利用【橢圓工具】在圖像上繪制一個正圓形。繪制正圓形操作步驟步驟6在【圖層】面板中點擊【添加圖層樣式】按鈕，在彈出的菜單中選擇【投影】命令，為正圓形添加陰影樣式。添加投影樣式操作步驟步驟7打開本書配套素材【7.psd】文件，將其中的圖片拖動到【賣點總結.psd】圖像窗口中的正圓形上，并利用【橫排文字工具】輸入對應的文字信息。復制素材并輸入文字字體：方正準圓簡體；大?。?8點；顏色值：#5c6c70字體：方正準圓簡體；大?。?8點；顏色值：#75afaf操作步驟步驟8根據步驟4～6中的操作方法，繪制其他商品功能模塊，其中需要打開本書配套素材【8.psd】文件。制作其他商品功能模塊操作步驟步驟9為了模塊的美觀度，可以為商品添加對應的英文信息，也可以添加一些云朵圖案（素材【9.psd】文件），完成商品賣點總結模塊后的最終效果如右圖所示。最終效果為商品制作可視化的尺寸表格，列出基本參數，讓買家了解商品的真實信息，以免收到商品后低于心理預期。具體操作步驟如下：制作商品基本參數操作步驟步驟1執(zhí)行【文件】丨【新建】命令，新建一個名稱為商品參數，尺寸為750×330像素的空白文檔。新建文檔操作步驟步驟2在工具箱中選擇【直線工具】，在工具選項欄中設置顏色的色值為【#000000】，【粗細】為【1像素】，然后在圖像上繪制多條直線。繪制多條直線操作步驟步驟3利用【橢圓工具】在圖像上繪制三個黑色正圓形，再利用【橫排文字工具】輸入對應的商品文字信息。繪制正圓形并輸入文字操作步驟步驟4打開本書配套素材【10.psd】文件，將其中的商品圖像拖動到【商品參數.psd】圖像窗口中。復制素材文件操作步驟步驟5在工具箱中選擇【直線工具】，設置顏色為黑色，粗細為1像素，然后在圖像上繪制如右圖所示的直線。繪制直線操作步驟步驟6選擇【橢圓工具】，在步驟5中繪制的直線上繪制黑色正圓形，然后利用【橫排文字工具】輸入文字信息，完成基本參數模塊的制作。繪制正圓形并輸入文字商品優(yōu)劣對比模塊是為了凸顯自己商品的品質，讓買家可以對同等商品進行對比。具體操作步驟如下：商品優(yōu)劣對比操作步驟步驟1執(zhí)行【文件】丨【新建】命令，新建一個名稱為商品優(yōu)劣對比，尺寸為750×450像素的空白文檔，然后為背景圖像填充顏色，色值為【#f2f2f2】。利用【橫排文字工具】輸入文字信息。新建文檔、填充顏色并輸入文字字體：方正蘭亭大黑；大小：15.42點；顏色值：#000000字體：方正蘭亭大黑；大小：42.8點；顏色值：#000000字體：方正蘭亭大黑；大?。?5點；顏色值：#b1000a操作步驟步驟2打開本書配套素材【11.psd】文件，將自己店鋪的商品和其他店鋪的商品圖像拖動到【商品優(yōu)劣對比.psd】圖像窗口中，再利用【橫排文字工具】輸入文字【VS】等信息。復制素材并輸入文字字體：Impact；大?。?1.33點；顏色值：#b1000a操作步驟步驟3利用【直線工具】繪制對比選框，利用【橫排文字工具】輸入對比的文字信息。繪制直線并輸入文字字體：張海山楷體；大?。?4.4點字體：微軟雅黑；大?。?3點操作步驟步驟4在工具箱中選擇【自定形狀工具】，在工具選項欄中選擇【選中復選框】形狀，并設置前景色的色值為【#3b8202】，然后在圖像上繪制形狀。繪制形狀操作步驟步驟5利用步驟4中的操作方法，設置前景色的色值為【#b1000a】，繪制【復選框】形狀，然后利用【橫排文字工具】在形狀上輸入【X】，完成商品優(yōu)劣對比模塊的制作。繪制形狀并輸入文字字體：方正蘭亭黑；大?。?4.26點；顏色值：#b1000a商品詳情頁的代碼設計和其他模塊的代碼設計步驟不同，需要先切圖再編輯代碼，然后將代碼上傳到店鋪中，在這里分3個小節(jié)對其進行講解。操作步驟步驟1在Photoshop軟件中打開本書配套素材【詳情頁.jpg】文件。打開素材文件操作步驟步驟2在工具箱中的【裁剪工具】上按住鼠標左鍵停留1～2秒，在彈出的菜單中選擇【切片選擇工具】。選擇切片選擇工具操作步驟步驟3在圖像上點擊鼠標右鍵，在彈出的菜單中選擇【劃分切片】命令，在彈出的【劃分切片】對話框中勾選【水平劃分為】復選框，再點擊【像素/切片】單選鈕，在編輯框中輸入數值，范圍建議在500～700像素之間，點擊【確定】按鈕。操作步驟步驟4關閉對話框后，完成詳情頁的劃分切片操作。執(zhí)行【文件】命令丨【存儲為Web所用格式...】命令，快捷鍵為【Alt+Ctrl+Shift+S】。選擇【存儲為Web所用格式...】命令操作步驟步驟5在彈出的【存儲為Web和設備所用格式】對話框中選擇【圖片格式】為【JPEG】，【品質】設定為【100】，點擊【存儲】按鈕，將文件存儲到桌面上。操作步驟步驟6這時會在桌面上生成一個【image】文件夾，文件夾內就是劃分好的商品詳情頁圖片。【image】文件夾商品詳情頁已經劃分完畢，賣家需要將劃分好的圖片全部上傳到淘寶【圖片空間】，為利用Dreamweaver軟件制作詳情頁代碼做好準備工作。具體操作步驟如下：操作步驟步驟1進入Dreamweaver軟件，在【文件】面板中新建【詳情頁.html】文件。步驟2雙擊打開【詳情頁.html】文件，點擊【代碼】按鈕，然后刪除代碼區(qū)域內所有代碼。操作步驟特效代碼步驟3在【詳情頁.html】代碼區(qū)域內輸入新的代碼內容。步驟4代碼中的【width】代表詳情頁圖片寬度；【overflow:hidden】代表不可以超過750像素以外；【float:left】代表圖片永遠是左側頂端對齊。在詳情頁中劃分了多少張圖片，在這里就需要編輯對應數量的【<