產(chǎn)品頁面是專門用于銷售特定產(chǎn)品或服務(wù)的網(wǎng)站的一部分。與主頁（主要是信息性的）等其他網(wǎng)頁不同，產(chǎn)品頁面的作用是告知和說服——這意味著它會理想地引導(dǎo)客戶點(diǎn)擊“添加到購物車”按鈕。這也是產(chǎn)品頁面設(shè)計成為挑戰(zhàn)的原因，考慮到漂亮的設(shè)計并不總是轉(zhuǎn)化為高轉(zhuǎn)化率的設(shè)計。
審美選擇必須比平時更具戰(zhàn)略性，才能將產(chǎn)品從屏幕上移到客戶手中。為了使這更容易，國外vi系統(tǒng)設(shè)計公司整理了這份產(chǎn)品頁面設(shè)計的終極指南。
基本而言，制作產(chǎn)品頁面是為了促成購買。但是為了實(shí)現(xiàn)這一總體目標(biāo)，產(chǎn)品頁面必須完成幾件事。
它應(yīng)該解釋什么是出售的。產(chǎn)品頁面必須向訪問者展示產(chǎn)品的外觀、功能以及成本。
它應(yīng)該建立信任。首次購買是一種信念的飛躍，尤其是當(dāng)產(chǎn)品在線時，因此產(chǎn)品頁面必須預(yù)見并消除訪問者的疑慮。
它應(yīng)該創(chuàng)造一種體驗(yàn)。產(chǎn)品頁面將使用引人注目的媒體和副本，讓客戶感覺數(shù)字化的東西真實(shí)。
它應(yīng)該是直觀的。產(chǎn)品頁面必須完成上述所有目標(biāo)，而不會用信息轟炸用戶。
實(shí)際上，產(chǎn)品頁面的目標(biāo)應(yīng)該與買家的目標(biāo)一致?？蛻粼诖隧撁嫔鲜且?yàn)樗麄冊噲D滿足需求。
假設(shè)產(chǎn)品是解決方案，那么產(chǎn)品頁面的工作就是說服訪問者這是真的。如果產(chǎn)品不是，這也應(yīng)立即明確。
當(dāng)然，所有這些都需要了解買家的需求。您必須首先了解產(chǎn)品的營銷對象以及他們習(xí)慣與之交互的產(chǎn)品類型和網(wǎng)頁。
廣泛的人口統(tǒng)計、調(diào)查、訪談和心理概況都是目標(biāo)受眾研究的標(biāo)準(zhǔn)技術(shù)。然后，國外vi系統(tǒng)設(shè)計公司必須將他們對購買者的了解轉(zhuǎn)化為設(shè)計中的心理學(xué)原理。
產(chǎn)品頁面的基本內(nèi)容圍繞“折疊”或屏幕截斷頁面其余部分的點(diǎn)構(gòu)建。
因?yàn)橛脩舯仨殱L動才能查看首屏下方的內(nèi)容——換句話說，他們必須做出主動選擇才能繼續(xù)瀏覽——最初的“首屏”部分是保存最重要信息的地方。所以讓我們從那里開始：
標(biāo)頭：這包含品牌徽標(biāo)和導(dǎo)航菜單選項(xiàng)。這在大多數(shù)網(wǎng)頁上是相當(dāng)標(biāo)準(zhǔn)的，因此不必特別大。許多品牌即使在桌面上也選擇最小化版本的導(dǎo)航，例如漢堡包圖標(biāo)。
產(chǎn)品描述：這包含產(chǎn)品名稱、價格、價值主張，有時還包含評論快照（例如星級）。從本質(zhì)上講，這可以識別產(chǎn)品并簡要說明訪問者應(yīng)該購買它的原因。
產(chǎn)品圖片和媒體：這包含主要的產(chǎn)品圖片，通常在輪播中，供訪客循環(huán)瀏覽各個角度。這還包括查看選項(xiàng)，例如不同的顏色或型號。
號召性用語（CTA）按鈕：這是指向購買頁面的按鈕。CTA 附近包括購買選項(xiàng)，例如數(shù)量或尺寸。
國外vi系統(tǒng)設(shè)計公司將列出的其余內(nèi)容項(xiàng)不一定非要放在首屏以下，但不如上述內(nèi)容那么重要。
支持信息：這將包括有關(guān)產(chǎn)品的更詳細(xì)的工作原理信息，例如重量和尺寸、常見問題解答，甚至產(chǎn)品特定部件的故障。
同行認(rèn)可：這包括任何著名品牌或過去使用過該產(chǎn)品的人的推薦、評論和列表。
支持圖形：這些是輔助滾動的非必要圖像，例如有助于頁面更具交互性和活力的插圖/動畫。它們通常與網(wǎng)站的一般品牌相關(guān)。
推薦產(chǎn)品：這會顯示訪問者可以考慮的其他產(chǎn)品列表。如果訪問者最終對這個產(chǎn)品不感興趣，推薦的產(chǎn)品可以讓他們有機(jī)會繼續(xù)瀏覽其他產(chǎn)品頁面，而不是簡單地離開網(wǎng)站。
產(chǎn)品頁面的內(nèi)容可能因產(chǎn)品/服務(wù)的性質(zhì)而異。最常見的區(qū)別發(fā)生在物理產(chǎn)品和數(shù)字產(chǎn)品（或可見和不可見）之間。
實(shí)體產(chǎn)品在數(shù)字空間中具有固有的劣勢，其頁面內(nèi)容的目標(biāo)是替代實(shí)體店。他們可以通過將更多資源投入媒體、詳細(xì)的產(chǎn)品規(guī)格或突出運(yùn)輸/退貨政策來實(shí)現(xiàn)這一目標(biāo)。
與此同時，依賴非視覺感官的蠟燭或葡萄酒等實(shí)體產(chǎn)品往往在其頁面策略中模仿數(shù)字產(chǎn)品——即強(qiáng)調(diào)有說服力的描述。但是因?yàn)樗麄円蕾噦€人品味，所以這個領(lǐng)域的趨勢是在產(chǎn)品頁面之前使用入職測驗(yàn)。
這些向訪問者（有趣但具有戰(zhàn)略意義）詢問有關(guān)他們偏好的問題，以營造一種他們最終看到的產(chǎn)品頁面已經(jīng)為他們策劃的感覺。
數(shù)碼產(chǎn)品或服務(wù)可能無法顯示圖像，因?yàn)楫a(chǎn)品無法拍照。服務(wù)也可能經(jīng)常是新奇或陌生的，需要花費(fèi)更多時間來確定品牌是誰以及他們提供什么。出于這個原因，定價通常被保留到最后。未完全了解報價的列出的價格可能會嚇跑訪問者。
另一方面，實(shí)體產(chǎn)品在這方面可以更直接——一件 T 恤就是一件 T 恤，你要么認(rèn)為它看起來足夠好買，要么不買。
現(xiàn)在國外vi系統(tǒng)設(shè)計公司已經(jīng)了解了產(chǎn)品頁面如何工作的基礎(chǔ)知識，我們將介紹一些設(shè)計技巧并查看一些示例。
1.使用合適的產(chǎn)品頁面設(shè)計軟件
設(shè)計過程通常會從簡要或必要功能列表開始。然后，大多數(shù)設(shè)計師將過渡到紙筆草圖，以產(chǎn)生有關(guān)元素如何組合在一起的想法。這被稱為線框- 頁面結(jié)構(gòu)的簡化骨架表示。一旦你縮小了這些范圍，你必須轉(zhuǎn)向軟件。
Sketch 和 Figma 等原型應(yīng)用程序可以創(chuàng)建更復(fù)雜的模型，讓您更準(zhǔn)確地表示頁面的外觀。與此同時，InvisionApp 創(chuàng)建了交互式原型，從而加快了測試過程。
原型應(yīng)用程序的好處是它們允許設(shè)計師在早期只關(guān)注用戶體驗(yàn)。它們也往往導(dǎo)致較少的原創(chuàng)設(shè)計。雖然這通常更可取（目標(biāo)是無縫購物體驗(yàn)），但如果您想制作更具創(chuàng)意的設(shè)計、紋理或動畫，則需要Photoshop 和 After Effects 等軟件。
2.使用基于模板的布局方法
考慮到電子商務(wù)網(wǎng)站將有多種產(chǎn)品（如果不是數(shù)百種），為每個單獨(dú)的項(xiàng)目定制產(chǎn)品頁面是不可行的。大多數(shù)設(shè)計師的目標(biāo)是模板布局，使添加新產(chǎn)品頁面像復(fù)制和粘貼內(nèi)容一樣容易。一種方法是為所有產(chǎn)品頁面使用一個模板，或者為不同的產(chǎn)品類別使用稍微不同的模板。
基于模板的設(shè)計需要規(guī)劃：營銷人員和文案必須為每種產(chǎn)品提供一致數(shù)量的圖像、功能列表、問答、推薦等。同時，產(chǎn)品頁面模板不必總是100% 相同。例如，如果產(chǎn)品之間的顏色會有所不同，則可以改變產(chǎn)品頁面的配色方案以匹配。
如今，許多產(chǎn)品頁面甚至在不同公司都有相當(dāng)標(biāo)準(zhǔn)的布局。例如，電子商務(wù)網(wǎng)站傾向于在左側(cè)顯示圖像，右側(cè)顯示產(chǎn)品描述、自定義選項(xiàng)和CTA。下面是規(guī)格和優(yōu)勢列表，然后是常見問題解答和評論/推薦。
像這樣無處不在的布局的優(yōu)勢在于它的熟悉度：大多數(shù)訪問者會直觀地知道在哪里可以找到他們正在尋找的信息。它的直截了當(dāng)對于品牌無法控制產(chǎn)品圖像和副本的買家/賣家平臺（如 Ebay）來說尤其理想。
但是有一些方法可以防止這種布局變得乏味。在圖中的國外vi系統(tǒng)設(shè)計公司設(shè)計中，產(chǎn)品頁面元素的總體定位是標(biāo)準(zhǔn)的，但圖像的比例和純色背景都出乎意料。
當(dāng)然，產(chǎn)品頁面不是孤立設(shè)計的：它們必須與網(wǎng)站的其余部分集成。像這樣的一致性不僅對于品牌推廣很重要，而且因?yàn)椴灰恢碌漠a(chǎn)品頁面在潛意識中對潛在購買者來說似乎不太值得信賴。
將產(chǎn)品頁面限制在現(xiàn)有品牌中也可能給國外vi系統(tǒng)設(shè)計公司帶來挑戰(zhàn)。假設(shè)一個品牌團(tuán)隊(duì)出于一些不相關(guān)的原因決定對所有圖像使用黑白濾鏡——現(xiàn)在如果產(chǎn)品頁面強(qiáng)調(diào)商品的顏色，它就會脫離品牌。這就是為什么優(yōu)先考慮在線購物的電子商務(wù)企業(yè)應(yīng)該從產(chǎn)品頁面設(shè)計開始網(wǎng)頁設(shè)計過程。
添加品牌總監(jiān)微信
總監(jiān)微信
復(fù)制成功
業(yè)務(wù)咨詢 何先生
業(yè)務(wù)咨詢 何先生
搜索感興趣的內(nèi)容
