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