
企業網站設計是如何設計產品頁面
產品頁面是專門用於銷售特定產品或服務的網站的一部分。與主頁(主要是訊息性的)等其他網頁相反,產品頁面既可以提供訊息,也可以說服用戶,這意味著理想情況下,它會引導客戶點擊「添加到購物車」按鈕。這也是使產品頁面設計成為挑戰的原因,考慮到漂亮的設計並不總是轉化為高轉化率的設計。
美學選擇必須比平時更具戰略意義,才能讓產品從螢幕上移到客戶手中。
產品頁面的目標
基本上,產品頁面是為了促成購買。但是為了這個總體目標,產品頁面必須完成幾件事。
它應該解釋出售的什麼。產品頁面必須向訪問者展示產品的外觀、功能以及成本。
它應該建立信任。第一次購買是一種信仰的飛躍,尤其是當產品線上時,因此產品頁面必須預測並緩解訪問者的疑慮。
它應該創造一種體驗。產品頁面將使用引人注目的媒體和文本,讓客戶覺得數位化的東西很真實。
它應該是直觀的。產品頁面必須完成上述所有目標,而不會用訊息轟炸用戶。
產品頁面的目標和買家的目標
實際上,產品頁面的目標應該與買家的目標保持一致。客戶在此頁面上是因為他們正在努力滿足需求。假設產品是解決方案,產品頁面的工作就是說服訪問者這是真的。如果產品不是,也應立即說明。當然,所有這些都需要了解買家的需求。您必須首先了解產品的行銷對象以及他們習慣與之互動的產品和網頁類型。
廣泛的人群統計、調查、訪談和心理概況都是目標受眾研究的標準技術。然後,設計師必須將他們對買家的了解轉化為設計中的心理學原理。
產品頁面的內容
產品頁面的基本內容圍繞「摺疊」或螢幕切斷頁面其餘部分的點構成。
因為用戶必須滾動以查看摺疊下方的內容,他們必須主動選擇繼續瀏覽,最初的「首頁」部分是保存最重要訊息的地方。所以讓我們從那裡開始:
1.標題:這包含品牌標誌和導航菜單選項。這在大多數網頁上是相當標準的,因此不必特別大。許多品牌甚至在桌面上也選擇最小化版本的導航,例如漢堡包圖標。
2.產品描述:這包含產品名稱、價格、價值主張,有時還包含評論快照(例如星級)。從本質上講,這可以識別產品並簡要說明訪問者應該購買它的原因。
3.產品圖片和媒體:這包含主要產品圖片,通常在輪播中供訪問者從各個角度循環。這還將包括查看選項,例如不同的顏色或模型。
4.行動呼籲(CTA)按鈕:這是通向購買頁面的按鈕。CTA 附近包括購買選項,例如數量或尺寸。
我們將列出的其餘內容項不一定非要低於首頁,但不如上面那麼重要。
1.支持訊息:這將包括有關產品的更詳細的工作原理訊息,例如重量和尺寸、常見問題解答,甚至產品特定部件的細分。
2.同行認可:這包括任何著名品牌或過去使用過該產品的人的推薦、評論和列表。
3.支持圖形:這些是輔助滾動的非必要圖像,例如插圖/動畫,可幫助頁面感覺更具互動性和活力。它們通常與網站的一般品牌相關聯。
4.推薦產品:這會顯示訪問者可以考慮的其他產品列表。如果訪問者最終對這個產品不感興趣,推薦的產品可以讓他們有機會繼續瀏覽其他產品頁面,而不是簡單地離開網站。
不同類型的產品如何影響產品頁面內容
產品頁面的內容可能因產品/服務的性質而異。最常見的區別發生在物理產品和數字產品(或可見和不可見)之間。
實體產品在數位空間具有先天的劣勢,其頁面內容的目標是替代實體店。他們可能會通過將更多資源投入媒體、詳細的產品規格或突出運輸/退貨政策來實現這一目標。
與此同時,像蠟燭或葡萄酒這樣依賴非視覺感官的實物產品,往往會在其頁面策略中模仿數字產品,即強調有說服力的描述。但是因為他們依賴於個人品味,這個領域的一個趨勢是在產品頁面之前使用入職測驗。
這些向訪問者詢問(有趣但具有戰略意義的)關於他們偏好的問題,以營造一種他們最終看到的產品頁面已經為他們策劃的感覺。
3C產品或服務可能無法顯示圖像,因為產品無法拍照。一項服務也經常是新穎的或陌生的,需要花更多的時間來確定品牌是誰以及他們提供什麼。出於這個原因,定價通常被保留在最後。在沒有完全了解報價的情況下列出的價格可能會嚇跑訪問者。
如何設計產品頁面
1.使用正確的產品頁面設計軟體
設計過程通常會從一個簡短的或必要的功能列表開始。然後,大多數設計師將過渡到紙筆草圖,以產生有關如何將元素組合在一起的想法。這稱為線框,頁面結構的簡化骨架表示。一旦你縮小了範圍,你就必須轉向軟體。
Sketch和Figma等原型應用程式可以創建更複雜的模型,讓您更準確地表示頁面的外觀。與此同時,InvisionApp創建了互動式原型,從而加快了測試過程。
原型應用程式的好處是它們允許設計者在早期就專注於用戶體驗。它們也往往導致較少的原創設計。但如果您想製作更具創意的設計、紋理或動畫,您將需要Photoshop和 After Effects等軟體。
2. 使用基於模板的布局方法
考慮到電子商務網站將有多個產品(如果不是數百個),為每個單獨的項目定製產品頁面是不可行的。大多數設計師的目標是模板布局,使添加新產品頁面就像複製和粘貼內容一樣簡單。一種方法是為所有產品頁面使用一個模板,或者為不同的產品類別使用稍微不同的模板。
基於模板的設計需要規劃:行銷人員和文案撰稿人必須承諾為每個產品提供一致數量的圖像、功能列表、問答、推薦等。同時,產品頁面模板並不總是100%相同。例如,如果產品之間的顏色會有所不同,則可以更改產品頁面的配色方案以進行匹配。
如今,即使在不同的公司中,許多產品頁面也具有相當標準的布局。例如,電子商務網站傾向於在左側顯示圖像,在右側顯示產品描述、自定義選項和CTA。下面是規格和優點列表,然後是常見問題解答和評論/推薦。
像這樣無處不在的布局的優勢在於它的熟悉性:大多數訪問者會憑直覺知道在哪裡可以找到他們正在尋找的訊息。它的直率特別適合買家/賣家平台(如Ebay),在這些平台上,品牌無法控制產品圖片和文案。
3. 設計時考慮到網站的其餘部分
產品頁面不是孤立設計的:它們必須與網站的其餘部分集成。像這樣的一致性不僅對品牌推廣很重要,而且因為不和諧的產品頁面可能會在潛意識中對潛在購買者不那麼信任。
將產品頁面限制為現有品牌也可能給設計師帶來挑戰。假設一個品牌團隊出於某種不相關的原因決定對所有圖像使用黑白過濾器 - 現在,如果產品頁面強調項目的顏色,則產品頁面將與品牌無關。這就是為什麼優先考慮線上購物的電子商務企業應該從產品頁面設計開始網頁設計過程。
同時,讓品牌個性通過產品頁面閃耀也可以帶來創意自由。但是,如果它有助於優化產品頁面,那麼考慮完整的站點重新設計也永遠不會太晚。
同樣,結帳頁面通常是產品頁面的極其簡化版本,顯示微型產品的關鍵產品圖像、價格和數量以及更改選項。
考慮到幾乎70%的購物車被放棄,結帳時間是展示產品頁面上列出的好處(例如運輸時間和低費用)的理想機會。將結帳頁面覆蓋在產品頁面的頂部也將使用戶更容易點擊退出,而不是潛在地離開網站。
4. 有選擇地優先考慮訊息
產品頁面必須平衡告知潛在買家,而不是讓他們充斥訊息。這意味著設計師必須決定用戶必須看到什麼以及何時看到。
這部分與與摺疊相關的內容有關。但是建立優先級的具體設計技巧(如大小、顏色和字體樣式)在視覺層次原則中總結。
優先考慮哪些訊息取決於您銷售的產品。對於服裝、家具、藝術品等美學產品,產品形象將成為主要賣點。對於缺乏視覺元素的服務或產品,解釋產品的描述將優先。
在任何情況下,您都可以指望CTA具有高優先級,但這並不意味著您必須過度使用醒目的顏色或超大按鈕。設計CTA的主要技術之一是與其他頁面元素形成對比。
類似地,輪播可用於在狹窄的水平部分中顯示內容的選擇性樣本(例如圖像或客戶評論),允許用戶滑動查看更多內容。
這些方法不僅可以防止網站感覺過於混亂,還可以促進互動——讓訪問者保持參與而不是被動閱讀。
5. 用圖片講故事
圖像不可避免地是產品頁面設計中最引人注目的部分,原因很簡單,它們比文本掃描速度更快。根據Salsify 的研究,如今的線上購物者希望在產品頁面上看到平均 6 張圖片和 3 個視頻,這可能不足為奇。
與此同時,產品頁面上的圖像必須不僅僅是引人注目:它們必須讓數字產品感覺真實。這意味著圖像應該創造一種產品體驗,講述一個沒有文字的故事。
圖像如何做到這一點取決於產品。對於實物產品,尺寸通常很重要,這不僅僅是顯示測量值。例如,對於家具,在家具齊全的房間中展示產品的圖像不僅可以為客戶提供裝飾想法,還可以將其與附近的物體進行比較,以獲得更好的比例感。
服裝品牌通常會使用模特來展示合身度,但他們也可以在特定環境下更進一步展示模特,暗示可能伴隨購買的潛在未來。在成分(或機械部件)是主要賣點的情況下,這些可以以巧妙的方式展示。
對於沒有視覺組件的產品或服務,設計師必須更有創意,使用能夠喚起使用產品體驗的圖像。
此外,使用圖標或簡單的插圖來配合工作原理部分可以輕鬆地為視覺學習者總結過程的步驟。對於這種方法,從訊息圖設計中汲取靈感,了解如何通過圖像過濾複雜數據。
6. 不要低估用戶生成的內容
儘管管理頁面上的每個元素可能是您的第一直覺,但為用戶生成的內容騰出空間是值得的。通常,這意味著允許用戶提交他們自己的產品公開評論、問題和照片。
這似乎是設計師的噩夢:圖像品質幾乎肯定會很差,偶爾的憤怒評論是不可避免的。
另一方面,用戶對其他用戶的信任遠遠超過他們對品牌提供的精選圖片和推薦的信任。像這樣的信任可以成就或破壞購買。這就是為什麼用戶生成的內容通常保存在頁面底部的原因,此時訪問者可能已經瀏覽了所有官方訊息並正在考慮他們的最終決定。
歸根結底,在大多數消費者心目中,平均正面評價將超過負面異常值。此外,這些空間可以成為品牌回應問題和負面評論的機會,展示他們的個性化關懷和客戶服務。
相反,忽略包含此類內容可能會被視為缺乏信心或賣家有什麼要隱瞞的。為了進行銷售,真實性可能比外觀完美的產品頁面設計更重要。
產品頁面的設計一部分是科學,一部分是風格,也是全部業務。歸根結底,一個出色的產品頁面旨在將產品從電腦螢幕提升到客戶的日常生活中。