如何為您的電子商務業務創建圖片完美的產品頁面

已發表: 2021-08-15

您的產品頁面設計是您商店中最重要和最複雜的頁面之一。考慮潛在客戶可能登陸您的產品頁面的所有情況：

直接來自搜索引擎
瀏覽您的商店後
點擊目標廣告後

作為銷售的最後步驟之一，您的產品頁面必須是：

優化以確保它可以很容易地找到，
信息量足以讓您對客戶充滿信心，並且
精心設計以提供出色的在線購物體驗

您可以採取多種措施來提高人們找到您的產品頁面的機會，並在他們到達後提高轉化率。為了分解事情，我們創建了一個由五部分組成的指南來創建完美的產品頁面。

第 1 部分：了解優秀產品頁面設計的組成部分

在深入了解如何優化產品頁面的各個方面的細節之前，讓我們看一個很棒的產品頁面設計示例，以了解每個組件如何適應以及它們為何重要。

優衣庫澳大利亞有一個很好的例子，它是為用戶設計的產品頁面。這是他們典型產品頁面之一的屏幕截圖，其中突出顯示了關鍵組件：

優衣庫產品頁面設計示例

您會立即註意到，超過 90% 的頁面專門用於向客戶提供有關他們正在查看的產品的更多信息，並且在折疊上方幾乎沒有浪費任何空間。進一步分解每個部分：

產品標題和概述很容易找到。就像您訪問一個新城市時建築物和標誌充當參考點一樣，好的標題可以幫助客戶瀏覽新站點。
從不同角度展示產品的圖片庫，模型，以及近距離。
產品圖像在前面和中間。白色背景上的清晰照片以最佳光線展示產品。圖像是客戶所尋找的，因此讓它們突出是值得的。
對產品的獨特而詳細的描述，描述了它是什麼、其設計背後的思想以及它如何解決買家的問題。
真誠的客戶評論有助於建立對您的產品和品牌的信心。
客戶知道他們想要什麼，但他們可能不知道如何找到它。顯示最近查看或相關的產品有助於他們更快地縮小選擇範圍，並讓您有機會展示您認為他們可能更喜歡的產品。
一頁上的大量選項和變體意味著客戶不必瀏覽多個產品。
客戶完成選擇後，“添加到購物車”按鈕正在等待他們。
還沒準備好承諾？額外信息（例如您的運輸和退貨政策）的鏈接有助於回答任何揮之不去的問題。

我總是發現查看其他商店如何設計他們的產品頁面很有幫助。您也不一定非要查看同一行業內的商店。考慮看看其他行業的流行網站正在採取哪些客戶喜歡但沒有被競爭對手使用的策略。

在大多數成功的產品頁面上，您會發現這些相同組件的變體：

清晰獨特的描述
很棒的產品攝影
評論以灌輸買家信心
定制選項
清除“添加到購物車”按鈕
其他運輸或購買信息

第 2 部分：在您的產品副本中回答這些問題

出色的文案對您的產品頁面至關重要。不僅為您的客戶，也為 SEO。使用製造商或通用產品信息是確保您的產品在搜索排名中不具有競爭力的可靠方法。

要創建出色的產品頁面副本，您可以回答幾個問題。

它是什麼？

您的產品副本需要解決的第一件事是產品到底是什麼。如果客戶正在尋找特定產品，這是他們想要回答的第一件事。

對於新產品，他們想知道它到底是什麼以及為什麼他們應該感興趣。

它如何解決問題？

你的產品解決了什麼問題，又是如何解決的？這是您需要為客戶回答的基本問題。

也許它就像一件讓你保暖的毛衣之類的實用功能一樣簡單。在這種情況下，包括哪些材料或製造工藝有助於使您的產品解決方案成為可能。

或者，問題可能在需求層次的下層，而產品只是幫助您看起來更時尚。產品背後的什麼故事或過程使它值得擁有？

您已經確定存在問題以及您的產品如何解決它。現在，他們為什麼要選擇您的產品而不是競爭產品？你採取了哪些額外的措施來確保你的毛衣是最溫暖的？你使用了哪些其他人沒有使用的成分？這是您展示您的產品為何與眾不同的機會。

即使您銷售的是其他製造商的商品，花時間表明您了解該產品更好的原因，也表明您已花時間進行研究。

它是什麼做的？

要添加的最後一個細節是可能被視為您產品的元數據。提供有關進入您的產品的材料或成分的信息有助於彌補在線購物者無法親自感受產品的問題。

簡單的信息（例如成分）和基本說明（例如如何保養或預期用途）可以幫助客戶可視化產品並為搜索引擎提供更多上下文。

第 3 部分：創建出色的產品圖像

您的產品照片通常是客戶在頁面上首先看到的內容，他們可以立即以負面或正面的方式展示您的產品。但除了第一印象之外，產品照片還有助於傳達比單獨文字更多的細節，這有助於銷售產品。產品攝影做得好甚至可以減少用於客戶服務和退貨的資源數量。

因此，要創建出色的產品圖片，您需要執行以下操作：

從好的攝影開始

在沒有合適設備的情況下拍攝的光線不足的照片可能是客戶的危險信號。不花時間拍攝像樣的照片實際上會花費您更多的時間進行編輯。

但是......你不需要花很多錢來獲得一個很棒的小型攝影設置。 DIY 產品攝影的更好的檸檬水支架指南列出瞭如何在任何預算下開始 DIY 產品攝影。

您對 DIY 產品攝影設置的基本要求應包括：

優質相機或智能手機：您不一定需要數碼單反相機進行產品攝影。您的智能手機將生成具有足夠高的分辨率和足夠數量的設置來調整光線和光圈條件的照片。
一致的光源：您的照明應該有助於照亮您產品最重要的功能並隱藏任何陰影。自然光是入門的理想選擇，因為它不像人工照明那樣昂貴或挑剔；但是，您還需要使用補光燈或鏡子從兩側均勻分佈光源。
白色背景：白色背景有助於均勻地偏轉光線，因此修復對比度所需的工作更少。它還可以讓稍後使用魔術棒或鋼筆工具更輕鬆地編輯照片。您可以使用一捲紙甚至一張足夠白的紙來開始。
穩定的表面：均勻地拍攝照片。
剪輯：將您的背景或燈光固定到位。
三腳架：用來固定你的相機。三腳架不是必需品，但它可以幫助您快速為許多不同的產品拍攝一致的照片。如果您是單人攝影操作，它也可以使事情變得更容易，並節省您的後期製作時間。

使用多個圖像

僅使用單個產品鏡頭是不夠的。客戶希望從各種角度和角度來看待產品。您的產品攝影可以比任何描述更好地展示產品最重要的方面，因此添加盡可能多的照片來回答客戶的問題非常重要。

在購買過程的不同階段，不同的照片也可能具有不同的重要性。

當新客戶第一次發現您的產品時，他們可能更喜歡查看其他人使用該產品的圖片。這對於像 Tile 這樣的產品尤其重要，因為產品本身不足以說明它的作用，更不用說它的好處了。因此，該公司使用產品攝影來說明您將如何以及為何使用它：

Tile Mate 產品頁面集合示例

但是當你深入到實際的產品頁面時，你會發現更多專注於產品本身的詳細照片。一旦用戶進入產品頁面，他們就會發現您的產品如何解決他們的問題，並且更有興趣了解它的效果如何。

Tile Mate 產品頁面設計示例

編輯您的照片

一旦你有了照片，你需要做一些事情來讓它們做好零售準備。最明顯的任務是刪除他們的背景。使用 Adobe Creative Cloud Magic Wand 或 Pen 工具輕鬆完成此操作，擁有白色屏幕。

GIFS是低質量的圖像，適用於圖標和縮略圖。它們也支持動畫，但由於文件大小和質量較差，不適合大圖像。
SVG是一種矢量格式，這意味著它使用 XML 以文本格式描述圖像的內容。它將幾乎立即以非常小的文件大小加載圖標和基本圖像，但常規圖像將太複雜而無法使用這種格式。
PNG圖像是支持較少壓縮的更快文件，這意味著它們將保留原始圖像質量。它們還支持灰度和透明度，但文件大小對於電子商務而言通常太大。
JPG是一種壓縮方法，可讓您更改壓縮程度。通常，JPG 圖像最多可將文件大小減少 10 倍，而不會造成明顯的質量損失。這使它們成為創建高質量、低文件大小的產品圖像的理想選擇。

此外，請確保您使用適當的文件名命名圖像，並使用準確描述圖像和內容的標題和 alt 標籤。 Alt 標籤可用於包含顯著的關鍵字，但它們的主要目的是輔助可訪問性。

獎勵：查看 A Better Lemonade Stand 關於為 Web 優化圖像的文章：針對有興趣了解有關圖像優化的更多信息的初學者的分步實用指南。

第 4 部分：保持產品攝影的一致性

偉大的電子商務商店使用在單個產品頁面或類似產品集合中同樣適用的產品照片。擁有一致的圖像可以更輕鬆地搜索和比較產品，還可以圍繞您的品牌創造一致性和專業性。

以下是保持產品攝影一致的最佳方法：

在白色背景上拍攝您的產品

始終如一地製作出色產品照片的最簡單方法之一是使用白色背景。在我們之前的攝影文章中，我們概述瞭如何創建自己的攝影設置並拍攝專業級產品照片。

將照片放在白色背景上可以讓您：

在您的所有產品中創建一致性
增強產品的某些方面
將來輕鬆編輯您的照片，以及
在谷歌購物和亞馬遜等需要白色背景的市場上銷售您的產品。

使用相同的尺寸或縱橫比

在收藏頁面上，沒有什麼比不同尺寸的圖像更突出的了。除非您使用 CSS 專門設置了最小高度和寬度，否則您的收藏頁面將變得一團糟。用戶將不得不花費他們寶貴的購物時間來破譯點擊哪裡。

甚至考慮一個簡單的產品集合頁面。與左側的多尺寸產品相比，右側的方形產品的瀏覽和比較容易多少？

產品圖片集頁面設計

哪個更好看？

雖然有可用的應用程序和插件可以為您整理圖像，但最好的方法是確保您的產品圖像始終以特定尺寸保存。

在最長邊創建尺寸在 1000 像素和 1600 像素之間的圖像是可以的，但您也應該盡量保持所有圖像的方形。無論圖像是水平的還是垂直的，方形圖像都會很好看，並且會使您的圖像在您的商店中保持一致。

利用產品模板

要打造具有專業外觀的電子商務商店，您需要在產品圖片之間保持一致性。這意味著照片不僅尺寸相同，而且在圖像中具有相似的風格和一致的定位。

如果您查看任何成功的電子商務商店，您會發現它們的圖像本身就很突出，但也非常適合收藏，因為它們都與相機的距離相同。

注意：如需更有用的 Photoshop 教程，可將您的產品照片提升到一個新的水平，包括逐步演練以去除產品照片中的小瑕疵、在後期製作中更改產品顏色以及提高照片中產品的清晰度，查看我們的 Photoshop 電子商務教程：改進您的產品照片文章。

第 5 部分：讓您的產品照片更上一層樓！

如果您擁有出色的產品攝影和出色的產品描述，那麼您就有了製作高轉化率產品頁面的條件。但是，您仍然可以做一些最後的事情來改進您的產品照片，以確保您擁有最好的頁面。

加速你的圖像

圖像會對頁面加載時間產生巨大影響。如果您的產品頁面加載緩慢，您的訪問者會因為等待他們加載並訪問更少的頁面而感到沮喪。事實上，如果加載時間超過 3 秒，40% 的訪問者會放棄您的網站。因此，產品頁面應該能夠快速加載並易於瀏覽。您可以通過多種方式優化圖像以實現這一目標。

一方面，將 CSS 用於頁面背景而不是圖像。同樣，CSS 應該用於在圖像和按鈕元素周圍創建邊框。

加載插件或圖片庫的外部庫也會減慢頁面的整體加載時間，應避免用於頁面的關鍵元素。

您還可以通過 Google PageSpeed Insights 運行您的頁面，以確定加快移動和桌面網站速度的方法。 Google PageSpeed 會告訴您可以壓縮哪些圖像、如何優化圖像以及這樣做可以節省多少空間。

谷歌頁面速度洞察

您瀏覽器的內置開發人員工具還可以識別您的頁面如何加載文件以及哪些文件需要很長時間。

要在 Google Chrome 中執行此操作：

花一些時間查看您的產品頁面在各種移動設備上的顯示方式至關重要。 Hotjar 等工具允許您創建用戶如何與您的頁面交互的熱圖。而且，如果您安裝了 Google Analytics，您可以比較您的移動和桌面轉化率，以確定您的移動購物體驗是否符合要求。

優化移動產品頁面

谷歌分析可以為您提供大量關於轉化率和購買旅程的有用電子商務數據，但體驗您的網站在多種設備上的外觀的最簡單方法是親自體驗。使用 Chrome 設備工具欄——或者響應式設計模式（如果你使用的是 Firefox 或 Safari）——你可以看到你的產品頁面在任何設備上的外觀。

移動產品頁面的一些注意事項：

將您的圖像放在前面和居中。額外的信息應該在用戶需要時提供給用戶，但不應妨礙圖像。
通過確保您的圖像已縮小尺寸並且您沒有加載太多第三方插件來加速您的網站。加載時間對於通過移動網絡加載的客戶來說尤其重要。
考慮使用固定菜單欄，以便客戶始終可以訪問搜索欄、主菜單和購物車。

客戶將花費更少的時間在移動設備上瀏覽和閱讀內容，因此圖像對於您的移動購物者來說將發揮特別重要的作用。確保您的圖片醒目且加載速度快，以確保您提供最佳的移動購物體驗。

記住搜索引擎優化

就 SEO 而言，產品頁面通常似乎是未充分利用的資源。您的產品頁面讓您有機會展示一些最有價值和獨特的內容，這些內容可以幫助您的商店在搜索列表中排名更高。通常情況下，產品頁面正是您的客戶想要看到的。

要加強您的產品頁面 SEO：

製作獨特的產品描述，清楚地概述您的產品是什麼，並與您的客戶搜索的術語相匹配。
通過包含用於描述圖像的 ALT 標籤、適當的標題標籤和相關文件名來優化您的圖像元數據。
考慮將視頻添加到您的產品頁面。將視頻添加到您的頁面是否有助於 SEO 有待討論，但它們可以幫助為您的產品提供更多背景信息，從而提高您的轉化率。

為縮放優化圖像

您是否注意到大多數電子商務網站將允許您將鼠標懸停在圖像上以“放大”產品？這已成為幾乎成為第二天性的特徵。當我們單擊或懸停在產品上時，我們希望獲得更大版本的產品。

為縮放優化產品圖像

擁有此功能有一個重要目的。它可以讓客戶詳細確定產品的質量。當客戶無法親身感受或看到產品時，它還有助於增強對客戶購買的信心。有時，縫合質量或顏色深淺會影響客戶選擇您的產品而不是競爭對手的產品。

那麼你如何確保你有一個有效的縮放功能呢？秘訣在於知道如何使用正確的圖像尺寸。

大多數電子商務網站都會有各種“模板”。這些模板將調整您的圖像大小以匹配該模板大小。例如，您可能有：

一個 50px x 50px 的縮略圖模板
一個 100px x 100px 的集合圖像模板
150px x 150px 的相關圖片模板
500px x 500px 的主照片模板

縮放功能通常通過以完整的原始尺寸顯示圖像來工作。因此，如果您有一張以 1000 像素 x 1000 像素保存的圖像，當您將鼠標懸停在主照片模板（500 像素 x 500 像素）上時，它將以兩倍的尺寸顯示。

這意味著，要使用縮放功能，您必須確保圖像尺寸大於主照片模板。

結論

在這五章中，我們已經能夠廣泛涵蓋您在製作產品頁面時需要適當考慮的最重要領域。如果您遵循這些準則，您將擁有一個產品頁面，為您的客戶提供出色的購物體驗並享有高轉化率。既然您有了指南，就可以出去創建一個成功的產品頁面，為您的電子商務商店創造銷售量。