2023年產(chǎn)品頁面設(shè)計(jì)的UX實(shí)踐

產(chǎn)品頁面設(shè)計(jì)的UX實(shí)踐細(xì)心設(shè)計(jì)的產(chǎn)品頁面對(duì)于電商網(wǎng)站至關(guān)重要，由于大多數(shù)購買決策都在這里進(jìn)行。我們總結(jié)了有關(guān)產(chǎn)品頁面設(shè)計(jì)的流行做法，并供應(yīng)很多示例。

在電商網(wǎng)站中，勝利的標(biāo)準(zhǔn)不是網(wǎng)站訪問者或點(diǎn)擊次數(shù)，而是最終購買的數(shù)量。從這個(gè)角度來看，產(chǎn)品頁面至關(guān)重要，由于它通常是“購買或不購買”的大多數(shù)決策發(fā)生的地方。因此，在設(shè)計(jì)或改進(jìn)電商網(wǎng)站或應(yīng)用程序時(shí)，UX設(shè)計(jì)人員必需認(rèn)真考慮并對(duì)其進(jìn)行具體測試。

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

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

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

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

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

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

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

顯示產(chǎn)品圖片；供應(yīng)有關(guān)產(chǎn)品的全部必要信息；允許用戶選擇不同的顏色/型號(hào)（假如有）；使訪問者可以查看早期購買者的評(píng)論，評(píng)分；允許將產(chǎn)品添加到購物車；顯示其他相關(guān)選項(xiàng)?；诖?，這是產(chǎn)品頁面布局的基本元素的清單：

項(xiàng)目名稱/標(biāo)題圖片價(jià)格項(xiàng)目可用性添加到購物車/添加到購物袋/添加到購物籃/購買按鈕添加到保藏夾按鈕商品描述社會(huì)證明：評(píng)分，評(píng)論，以前的購買者數(shù)量等。顏色選擇型號(hào)選擇選擇要購買的物品數(shù)量尺碼指南或推舉（用于衣服和鞋類）擴(kuò)展的細(xì)節(jié)（材料、技術(shù)規(guī)格、尺寸、重量、特別功能等）上面的列表并不意味著全部產(chǎn)品頁面都必需具備全部要點(diǎn)，選擇將取決于分析多種因素，了解目標(biāo)受眾并確定優(yōu)先級(jí)，以查看針對(duì)此特定類型的商品或客戶類別，要包括哪些要點(diǎn)以及哪些要從列表中刪除。

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

1.視覺示范

電商網(wǎng)站是證明圖片價(jià)值的最佳地點(diǎn)，無法親身接觸商品，訪客將依靠產(chǎn)品的視覺效果對(duì)商品產(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é)合使用，以更好地了解其外觀和尺寸。

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

產(chǎn)品視頻，具體的視頻評(píng)論和說明；物品的360度視角；增加現(xiàn)實(shí)技術(shù)可關(guān)心人們在自己的環(huán)境中觀看物品或在虛擬環(huán)境中進(jìn)行嘗試。

明顯，這些類型的媒體通常比照片更簡單，耗時(shí)且昂貴。因此，是否值得打算通常取決于所供應(yīng)物品的類型和價(jià)格。

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

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

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

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

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

3.超級(jí)明顯的號(hào)召性用語

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

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

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

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

一方面，建議不要在頁面上堆滿大量信息，這些信息會(huì)使客戶不知所措，并使他們的留意力從主要目標(biāo)（購買）上轉(zhuǎn)移開來；另一方面，訪問者不預(yù)備從一頁跳到另一頁以獵取有關(guān)他們感愛好的項(xiàng)目的不同信息。因此，設(shè)計(jì)者必需花時(shí)間對(duì)問題進(jìn)行深化討論，認(rèn)真確定優(yōu)先級(jí)，然后查找產(chǎn)品頁面上需要供應(yīng)的數(shù)據(jù)。

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

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

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

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

始終牢記至關(guān)重要：在我們?nèi)缃裨陔娚叹W(wǎng)站中觀看到的激烈競爭，購買者不預(yù)備等待或鋪張時(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)品的不同頁面或屏幕上以相同的方式對(duì)全部CTA按鈕進(jìn)行著色和設(shè)計(jì)時(shí)，訪問者可以快速學(xué)習(xí)，并能夠在用戶使用過程的任何步驟中快速區(qū)分它們。

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

2.可掃性和可讀性

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

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

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

3.社會(huì)證明

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

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

更重要的是，評(píng)論可以回答客戶的問題，從而為購買的樂觀打算供應(yīng)支持-或防止購買錯(cuò)誤的商品并獲得負(fù)面的體驗(yàn)。

4.互動(dòng)性

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

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

5.移動(dòng)適應(yīng)

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

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

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

6.404錯(cuò)誤

由于大量使用產(chǎn)品頁面并常常對(duì)其進(jìn)行更新，因此在不憐憫況下都會(huì)消失錯(cuò)誤。人們可能會(huì)不當(dāng)心在URL或他們之前保存的頁面中鍵入字母，由于該產(chǎn)品已經(jīng)缺貨，因此可能不存在。

確保不要讓客戶遇到一個(gè)空的錯(cuò)誤頁面然后走開。將它們連接到其他頁面，供應(yīng)相關(guān)選項(xiàng)或