編輯導(dǎo)語：對于電商網(wǎng)站來說，產(chǎn)品頁面的設(shè)計(jì)對于用戶的體驗(yàn)感是極其重要的，甚至可以影響其購買決策。本文作者總結(jié)了有關(guān)產(chǎn)品頁面設(shè)計(jì)的流行做法，并收集了許多示例，和我們一起討論什么是產(chǎn)品頁面以及如何有效地設(shè)計(jì)它。

精心設(shè)計(jì)的產(chǎn)品頁面對于電商網(wǎng)站至關(guān)重要，因?yàn)榇蠖鄶?shù)購買決策都在這里進(jìn)行。我們總結(jié)了有關(guān)產(chǎn)品頁面設(shè)計(jì)的流行做法，并提供許多示例。

在電商網(wǎng)站中，成功的標(biāo)準(zhǔn)不是網(wǎng)站訪問者或點(diǎn)擊次數(shù)，而是最終購買的數(shù)量。從這個(gè)角度來看，產(chǎn)品頁面至關(guān)重要，因?yàn)樗ǔＪ恰百徺I或不購買”的大多數(shù)決策發(fā)生的地方。因此，在設(shè)計(jì)或改進(jìn)電商網(wǎng)站或應(yīng)用程序時(shí)，UX設(shè)計(jì)人員必須仔細(xì)考慮并對其進(jìn)行詳細(xì)測試。

那就是我們今天的文章所要討論的：讓我們討論什么是產(chǎn)品頁面以及如何有效地設(shè)計(jì)它。包含大量來自已知電子商務(wù)網(wǎng)站和針對市場或特定業(yè)務(wù)目標(biāo)的創(chuàng)意設(shè)計(jì)概念的示例。

一、什么是產(chǎn)品頁面

產(chǎn)品頁面可為客戶提供有關(guān)特定項(xiàng)目的所有必需信息，可以選擇各種選項(xiàng)，并使客戶能夠根據(jù)需要快速進(jìn)行購買過程。

與真實(shí)的銷售不同，電商網(wǎng)站不提供商品的實(shí)際聯(lián)系或店員的幫助。產(chǎn)品頁面成為吸引力，印象，信息和說服力的主要來源。因此，其設(shè)計(jì)，可導(dǎo)航性和可用性在銷售增長中起著至關(guān)重要的作用。

設(shè)計(jì)不良的產(chǎn)品頁面可能會浪費(fèi)買方的精力。因此，除了吸引人的產(chǎn)品介紹外，還要關(guān)注功能性、清晰度、可讀性和直觀導(dǎo)航。

二、產(chǎn)品頁面的典型元素

基本上，一個(gè)產(chǎn)品頁面：

1. 顯示產(chǎn)品圖片；
2. 提供有關(guān)產(chǎn)品的所有必要信息；
3. 允許用戶選擇不同的顏色/型號（如果有）；
4. 使訪問者可以查看早期購買者的評論，評分；
5. 允許將產(chǎn)品添加到購物車；
6. 顯示其他相關(guān)選項(xiàng)。

基于此，這是產(chǎn)品頁面布局的基本元素的清單：

• 項(xiàng)目名稱/標(biāo)題
• 圖片
• 價(jià)格
• 項(xiàng)目可用性
• 添加到購物車/添加到購物袋/添加到購物籃/購買按鈕
• 添加到收藏夾按鈕
• 商品描述
• 社會證明：評分，評論，以前的購買者數(shù)量等。
• 顏色選擇
• 型號選擇
• 選擇要購買的物品數(shù)量
• 尺碼指南或推薦（用于衣服和鞋類）
• 擴(kuò)展的細(xì)節(jié)（材料、技術(shù)規(guī)格、尺寸、重量、特殊功能等）

上面的列表并不意味著所有產(chǎn)品頁面都必須具備所有要點(diǎn)，選擇將取決于分析多種因素，了解目標(biāo)受眾并確定優(yōu)先級，以查看針對此特定類型的商品或客戶類別，要包括哪些要點(diǎn)以及哪些要從列表中刪除。

三、產(chǎn)品頁面的設(shè)計(jì)實(shí)踐

1. 視覺示范

電商網(wǎng)站是證明圖片價(jià)值的最佳地點(diǎn)，無法親身接觸商品，訪客將依靠產(chǎn)品的視覺效果對商品產(chǎn)生第一印象。更重要的是，圖片比文字更容易被注意到，它們將是吸引訪問者注意力的第一個(gè)元素，他們呈現(xiàn)的內(nèi)容既豐富又具有情感吸引力。

這就是為什么許多電商網(wǎng)站：

• 使用一組圖像從不同的角度呈現(xiàn)一個(gè)項(xiàng)目；
• 應(yīng)用縮放功能，使訪問者可以更近地看照片的某些部分，查看紋理和小細(xì)節(jié)；
• 將項(xiàng)目的照片與模型或適當(dāng)環(huán)境下的照片結(jié)合使用，以更好地了解其外觀和尺寸。

除了圖像外，還可以使用其他更復(fù)雜或更具交互性的媒體。其中，您現(xiàn)在可以找到：

• 產(chǎn)品視頻，詳細(xì)的視頻評論和說明；
• 物品的360度視角；
• 增強(qiáng)現(xiàn)實(shí)技術(shù)可幫助人們在自己的環(huán)境中觀察物品或在虛擬環(huán)境中進(jìn)行嘗試。

顯然，這些類型的媒體通常比照片更復(fù)雜，耗時(shí)且昂貴。因此，是否值得決定通常取決于所提供物品的類型和價(jià)格。

例如，出售一件5美元的T恤，照片就足夠了，但是要購買價(jià)格昂貴的冰箱，智能手機(jī)，計(jì)算機(jī)甚至汽車，客戶就需要更具說服力的決策方式。在這種情況下，花在更復(fù)雜但更令人印象深刻，有說服力和信息量豐富的視覺和媒體上的費(fèi)用可能是值得的投資。

2. 內(nèi)容豐富但簡單的描述

當(dāng)客戶決定花錢時(shí)，他們會閱讀需要了解的關(guān)于要購買的產(chǎn)品的信息。不過，由于關(guān)注范圍非常有限，所以這不是超載描述的原因。

說明文字應(yīng)簡潔，真實(shí)，簡單，并以聽眾的語言講話。它應(yīng)該回答以下基本問題：產(chǎn)品是什么，外觀如何，功能如何以及如何執(zhí)行。最好從第一行開始閱讀，因?yàn)榈谝恍虚喿x的可能性最大，而不是用標(biāo)準(zhǔn)的營銷套路。

不僅要詳細(xì)描述袋子的外觀，還要顯示照片。不要只說這條圍巾和那件夾克有多漂亮-請顯示照片。將文字的力量與適當(dāng)?shù)膱D像結(jié)合起來，可以使體驗(yàn)更加有效。

3. 超級明顯的號召性用語

號召性用語（CTA）應(yīng)該立即引起注意。在電商界面中，CTA元素是與產(chǎn)品有效互動的核心因素，它們在可用性和導(dǎo)航性起著至關(guān)重要的作用。

如果為用戶清楚地構(gòu)建了交互和過渡路徑，但CTA元素不明顯，放錯(cuò)位置或設(shè)計(jì)不當(dāng)，則風(fēng)險(xiǎn)會增加，用戶會感到困惑。因此，不良的轉(zhuǎn)換率和不良的用戶體驗(yàn)的風(fēng)險(xiǎn)增加了。

四、專注于項(xiàng)目

考慮到產(chǎn)品頁面的布局和內(nèi)容，利益相關(guān)者和設(shè)計(jì)人員都感到有將所有可能的東西都填滿的沖動，甚至更多，以使頁面超級有用。但是，請謹(jǐn)慎操作，因?yàn)檫@種策略可能會帶來負(fù)面的影響：在信息泛濫的情況下，焦點(diǎn)變得模糊，訪問者可能會太分心以致無法做出決定。

一方面，建議不要在頁面上堆滿大量信息，這些信息會使客戶不知所措，并使他們的注意力從主要目標(biāo)（購買）上轉(zhuǎn)移開來；另一方面，訪問者不準(zhǔn)備從一頁跳到另一頁以獲取有關(guān)他們感興趣的項(xiàng)目的不同信息。因此，設(shè)計(jì)者必須花時(shí)間對問題進(jìn)行深入研究，仔細(xì)確定優(yōu)先級，然后查找產(chǎn)品頁面上需要提供的數(shù)據(jù)。

使用原則倒金字塔并逐漸發(fā)現(xiàn)信息，從最重要，最先顯示的信息，到越來越多的具體細(xì)節(jié)，進(jìn)一步揭開面紗。在內(nèi)容演示中要開放，直接和整潔，而不是引起外界的興趣。嘗試將所有核心信息以易于閱讀的形式放在頁面的折疊部分。

然后進(jìn)行測試，分析頁面上的時(shí)間，熱圖和點(diǎn)擊次數(shù)，詢問并進(jìn)行分析，以了解購買者真正需要什么以及什么使他們購物方便。

五、直觀的導(dǎo)航

每個(gè)按鈕，鏈接的設(shè)計(jì)都可以顯著改變轉(zhuǎn)換率。

始終牢記至關(guān)重要：在我們?nèi)缃裨陔娚叹W(wǎng)站中觀察到的激烈競爭，購買者不準(zhǔn)備等待或浪費(fèi)時(shí)間進(jìn)行不必要的操作。與實(shí)際商店相比，他們從電商網(wǎng)站中獲得的需求是一種更快，更輕松，更便捷的體驗(yàn)。

因此，在添加明顯的CTA時(shí)，請確保用戶可以毫不費(fèi)力地執(zhí)行常見步驟，例如：

• 找搜索功能
• 用導(dǎo)航快速了解網(wǎng)站的當(dāng)前位置
• 完全確定頁面上的哪些元素是可點(diǎn)擊的
• 查看商品是否已經(jīng)在購物車中
• 查看購物車或購物袋中的商品數(shù)量
• 在網(wǎng)站頁腳中找到聯(lián)系信息和導(dǎo)航鏈接

1. 一致性

一致性表示產(chǎn)品以相同或相似的方式與用戶進(jìn)行交流，無論交流的點(diǎn)或渠道如何。就用戶體驗(yàn)而言，這意味著相似的元素在外觀和功能上都相似，從而減輕了認(rèn)知負(fù)擔(dān)，并使交互更加流暢和直觀。

在電商界面中，它涉及到以下兩個(gè)方面：

內(nèi)部一致性是指界面或品牌的不同部分，它們的外觀和行為就像一個(gè)清晰的系統(tǒng)。例如，當(dāng)您在產(chǎn)品的不同頁面或屏幕上以相同的方式對所有CTA按鈕進(jìn)行著色和設(shè)計(jì)時(shí)，訪問者可以快速學(xué)習(xí)，并能夠在用戶使用過程的任何步驟中迅速區(qū)分它們。

外部一致性是指界面的某些部分，這些部分的外觀和行為類似于大多數(shù)此類產(chǎn)品的典型模式。舉例來說，當(dāng)您在銷售非有形產(chǎn)品的網(wǎng)站上使用購物車時(shí)，或在文本鏈接下劃線時(shí)，都會向用戶提供可點(diǎn)擊的提示。

2. 可掃性和可讀性

眾所周知，進(jìn)入網(wǎng)站或應(yīng)用程序后，用戶通常不會閱讀和觀察頁面或屏幕上的所有內(nèi)容。

相反，他們從快速開始掃描了解其中是否包含他們需要或想要的東西。了解了眼動追蹤模型，格式塔原理，以及視覺層次，設(shè)計(jì)師和信息架構(gòu)師可以將核心數(shù)據(jù)和交互式元素放在自然可見度高的區(qū)域。使產(chǎn)品頁面可掃描的其他因素是可讀的排版和足夠的空白空間。

影響決策的因素很多，和諧是其中之一。令人眼花的色彩組合，不可讀或無法組合的字體，激進(jìn)的背景，令人討厭的彈出式窗口或動畫，令人討厭的聲音或頁面加載時(shí)間長–這些東西的任何一點(diǎn)都可能迅速破壞體驗(yàn)，分散用戶注意力并轉(zhuǎn)移他們。細(xì)節(jié)很重要，請仔細(xì)考慮并精心組織。

3. 社會證明

這個(gè)術(shù)語是由Robert Cialdini在1984年的著作《影響》中引入的，這個(gè)概念也稱為信息社會影響力。

在電商網(wǎng)站中，前一個(gè)購買者的體驗(yàn)會極大地影響下一個(gè)購買者的行為，這就是為什么需要評分，評論的原因，尤其是在大眾市場平臺上。它們可以幫助客戶與一群類似的買家團(tuán)結(jié)在一起，這在其他購物者中的實(shí)際商店中很容易感覺到，但是當(dāng)您獨(dú)自在計(jì)算機(jī)或移動屏幕前購物時(shí)，在線購物體驗(yàn)中甚至需要更多。

更重要的是，評論可以回答客戶的問題，從而為購買的積極決定提供支持-或防止購買錯(cuò)誤的商品并獲得負(fù)面的體驗(yàn)。

4. 互動性

交互性模仿了從不同角度看待物品并進(jìn)行操作，試穿衣服或鞋類，測試臉上的化妝選項(xiàng)，將家具或裝飾物幾乎放到房間中的互動性，所有這些以及其他各種創(chuàng)新都是由于創(chuàng)造力，客戶體驗(yàn)和新技術(shù)，變得越來越容易獲得。

如今，電商網(wǎng)站中交互性的另一個(gè)重要方面是個(gè)性化和自定義，人們可以自定義購買商品，而不僅僅是從目錄中選擇購買的商品。選擇一束鮮花的自定義組合，使用最喜歡的食材定制漢堡或比薩餅，收集個(gè)人服裝或家庭裝扮，而不僅僅是購買現(xiàn)成的商品-能夠在報(bào)價(jià)中添加自己的個(gè)性。

5. 移動適應(yīng)

不用說，如今人們每天用智能手機(jī)做什么事，而購物已成為最重要的選擇之一。

此外，移動適應(yīng)是搜索引擎優(yōu)化的核心網(wǎng)絡(luò)要素之一。如果您希望成功搜索一個(gè)電商網(wǎng)站并讓訪問者從任何設(shè)備上獲得無縫的購物體驗(yàn)，請使產(chǎn)品頁面適合移動設(shè)備并重新考慮布局，以使界面便于移動設(shè)備瀏覽。

無論如何，無論本機(jī)應(yīng)用程序是否存在，產(chǎn)品頁面以及網(wǎng)站的其余頁面都應(yīng)該具有響應(yīng)性并且對移動設(shè)備友好。

6. 404錯(cuò)誤

由于大量使用產(chǎn)品頁面并經(jīng)常對其進(jìn)行更新，因此在不同情況下都會出現(xiàn)錯(cuò)誤。人們可能會不小心在URL或他們之前保存的頁面中鍵入字母，因?yàn)樵摦a(chǎn)品已經(jīng)缺貨，因此可能不存在。

確保不要讓客戶碰到一個(gè)空的錯(cuò)誤頁面然后走開。將它們連接到其他頁面，提供相關(guān)選項(xiàng)或類別，并盡一切努力利用涉及客戶的錯(cuò)誤頁面來檢查其他內(nèi)容。

六、總結(jié)

當(dāng)然，要為特定的電商項(xiàng)目選擇設(shè)計(jì)實(shí)踐的決定是經(jīng)過深思熟慮的問題，關(guān)于使用什么和剩下什么的解決方案將基于產(chǎn)品和市場類型的許多主觀因素。根據(jù)公司預(yù)算，雇主的技能，個(gè)人品味和目標(biāo)受眾的特定需求進(jìn)行細(xì)分。

無論如何，如果您提供的產(chǎn)品很好并且客戶已經(jīng)在網(wǎng)站上，則讓產(chǎn)品頁面以最佳的方式顯示商品，讓購物者感覺親切、方便、清晰和友好。

作者：對啊設(shè)計(jì)君，微信公眾號：對啊設(shè)計(jì)君

原文鏈接：https://www.zcool.com.cn/article/ZMTI0NDk0OA==.html

本文由 @對啊設(shè)計(jì)君 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議