起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識產品頁面設計的UX實踐
編輯導語：對于電商網站來說，產品頁面的設計對于用戶的體驗感是極其重要的，甚至可以影響其購買決策。本文作者總結了有關產品頁面設計的流行做法，并收集了許多示例，和我們一起討論什么是產品頁面以及如何有效地設計它。
精心設計的產品頁面對于電商網站至關重要，因為大多數購買決策都在這里進行。我們總結了有關產品頁面設計的流行做法，并提供許多示例。
在電商網站中，成功的標準不是網站訪問者或點擊次數，而是最終購買的數量。從這個角度來看，產品頁面至關重要，因為它通常是“購買或不購買”的大多數決策發生的地方。因此，在設計或改進電商網站或應用程序時，UX設計人員必須仔細考慮并對其進行詳細測試。
那就是我們今天的文章所要討論的：讓我們討論什么是產品頁面以及如何有效地設計它。包含大量來自已知電子商務網站和針對市場或特定業務目標的創意設計概念的示例。
一、什么是產品頁面
產品頁面可為客戶提供有關特定項目的所有必需信息，可以選擇各種選項，并使客戶能夠根據需要快速進行購買過程。
與真實的銷售不同，電商網站不提供商品的實際聯系或店員的幫助。產品頁面成為吸引力，印象，信息和說服力的主要來源。因此，其設計，可導航性和可用性在銷售增長中起著至關重要的作用。
設計不良的產品頁面可能會浪費買方的精力。因此，除了吸引人的產品介紹外，還要關注功能性、清晰度、可讀性和直觀導航。
二、產品頁面的典型元素
基本上，一個產品頁面：
- 顯示產品圖片；
- 提供有關產品的所有必要信息；
- 允許用戶選擇不同的顏色/型號（如果有）；
- 使訪問者可以查看早期購買者的評論，評分；
- 允許將產品添加到購物車；
- 顯示其他相關選項。
基于此，這是產品頁面布局的基本元素的清單：
- 項目名稱/標題
- 圖片
- 價格
- 項目可用性
- 添加到購物車/添加到購物袋/添加到購物籃/購買按鈕
- 添加到收藏夾按鈕
- 商品描述
- 社會證明：評分，評論，以前的購買者數量等。
- 顏色選擇
- 型號選擇
- 選擇要購買的物品數量
- 尺碼指南或推薦（用于衣服和鞋類）
- 擴展的細節（材料、技術規格、尺寸、重量、特殊功能等）
上面的列表并不意味著所有產品頁面都必須具備所有要點，選擇將取決于分析多種因素，了解目標受眾并確定優先級，以查看針對此特定類型的商品或客戶類別，要包括哪些要點以及哪些要從列表中刪除。
三、產品頁面的設計實踐
1. 視覺示范
電商網站是證明圖片價值的最佳地點，無法親身接觸商品，訪客將依靠產品的視覺效果對商品產生第一印象。更重要的是，圖片比文字更容易被注意到，它們將是吸引訪問者注意力的第一個元素，他們呈現的內容既豐富又具有情感吸引力。
這就是為什么許多電商網站：
- 使用一組圖像從不同的角度呈現一個項目；
- 應用縮放功能，使訪問者可以更近地看照片的某些部分，查看紋理和小細節；
- 將項目的照片與模型或適當環境下的照片結合使用，以更好地了解其外觀和尺寸。
除了圖像外，還可以使用其他更復雜或更具交互性的媒體。其中，您現在可以找到：
- 產品視頻，詳細的視頻評論和說明；
- 物品的360度視角；
- 增強現實技術可幫助人們在自己的環境中觀察物品或在虛擬環境中進行嘗試。
顯然，這些類型的媒體通常比照片更復雜，耗時且昂貴。因此，是否值得決定通常取決于所提供物品的類型和價格。
例如，出售一件5美元的T恤，照片就足夠了，但是要購買價格昂貴的冰箱，智能手機，計算機甚至汽車，客戶就需要更具說服力的決策方式。在這種情況下，花在更復雜但更令人印象深刻，有說服力和信息量豐富的視覺和媒體上的費用可能是值得的投資。
2. 內容豐富但簡單的描述
當客戶決定花錢時，他們會閱讀需要了解的關于要購買的產品的信息。不過，由于關注范圍非常有限，所以這不是超載描述的原因。
說明文字應簡潔，真實，簡單，并以聽眾的語言講話。它應該回答以下基本問題：產品是什么，外觀如何，功能如何以及如何執行。最好從第一行開始閱讀，因為第一行閱讀的可能性最大，而不是用標準的營銷套路。
不僅要詳細描述袋子的外觀，還要顯示照片。不要只說這條圍巾和那件夾克有多漂亮-請顯示照片。將文字的力量與適當的圖像結合起來，可以使體驗更加有效。
3. 超級明顯的號召性用語
號召性用語（CTA）應該立即引起注意。在電商界面中，CTA元素是與產品有效互動的核心因素，它們在可用性和導航性起著至關重要的作用。
如果為用戶清楚地構建了交互和過渡路徑，但CTA元素不明顯，放錯位置或設計不當，則風險會增加，用戶會感到困惑。因此，不良的轉換率和不良的用戶體驗的風險增加了。
四、專注于項目
考慮到產品頁面的布局和內容，利益相關者和設計人員都感到有將所有可能的東西都填滿的沖動，甚至更多，以使頁面超級有用。但是，請謹慎操作，因為這種策略可能會帶來負面的影響：在信息泛濫的情況下，焦點變得模糊，訪問者可能會太分心以致無法做出決定。
一方面，建議不要在頁面上堆滿大量信息，這些信息會使客戶不知所措，并使他們的注意力從主要目標（購買）上轉移開來；另一方面，訪問者不準備從一頁跳到另一頁以獲取有關他們感興趣的項目的不同信息。因此，設計者必須花時間對問題進行深入研究，仔細確定優先級，然后查找產品頁面上需要提供的數據。
使用原則倒金字塔并逐漸發現信息，從最重要，最先顯示的信息，到越來越多的具體細節，進一步揭開面紗。在內容演示中要開放，直接和整潔，而不是引起外界的興趣。嘗試將所有核心信息以易于閱讀的形式放在頁面的折疊部分。
然后進行測試，分析頁面上的時間，熱圖和點擊次數，詢問并進行分析，以了解購買者真正需要什么以及什么使他們購物方便。
五、直觀的導航
每個按鈕，鏈接的設計都可以顯著改變轉換率。
始終牢記至關重要：在我們如今在電商網站中觀察到的激烈競爭，購買者不準備等待或浪費時間進行不必要的操作。與實際商店相比，他們從電商網站中獲得的需求是一種更快，更輕松，更便捷的體驗。
因此，在添加明顯的CTA時，請確保用戶可以毫不費力地執行常見步驟，例如：
- 找搜索功能
- 用導航快速了解網站的當前位置
- 完全確定頁面上的哪些元素是可點擊的
- 查看商品是否已經在購物車中
- 查看購物車或購物袋中的商品數量
- 在網站頁腳中找到聯系信息和導航鏈接
1. 一致性
一致性表示產品以相同或相似的方式與用戶進行交流，無論交流的點或渠道如何。就用戶體驗而言，這意味著相似的元素在外觀和功能上都相似，從而減輕了認知負擔，并使交互更加流暢和直觀。
在電商界面中，它涉及到以下兩個方面：
內部一致性是指界面或品牌的不同部分，它們的外觀和行為就像一個清晰的系統。例如，當您在產品的不同頁面或屏幕上以相同的方式對所有CTA按鈕進行著色和設計時，訪問者可以快速學習，并能夠在用戶使用過程的任何步驟中迅速區分它們。
外部一致性是指界面的某些部分，這些部分的外觀和行為類似于大多數此類產品的典型模式。舉例來說，當您在銷售非有形產品的網站上使用購物車時，或在文本鏈接下劃線時，都會向用戶提供可點擊的提示。
2. 可掃性和可讀性
眾所周知，進入網站或應用程序后，用戶通常不會閱讀和觀察頁面或屏幕上的所有內容。
相反，他們從快速開始掃描了解其中是否包含他們需要或想要的東西。了解了眼動追蹤模型，格式塔原理，以及視覺層次，設計師和信息架構師可以將核心數據和交互式元素放在自然可見度高的區域。使產品頁面可掃描的其他因素是可讀的排版和足夠的空白空間。
影響決策的因素很多，和諧是其中之一。令人眼花的色彩組合，不可讀或無法組合的字體，激進的背景，令人討厭的彈出式窗口或動畫，令人討厭的聲音或頁面加載時間長–這些東西的任何一點都可能迅速破壞體驗，分散用戶注意力并轉移他們。細節很重要，請仔細考慮并精心組織。
3. 社會證明
這個術語是由Robert Cialdini在1984年的著作《影響》中引入的，這個概念也稱為信息社會影響力。
在電商網站中，前一個購買者的體驗會極大地影響下一個購買者的行為，這就是為什么需要評分，評論的原因，尤其是在大眾市場平臺上。它們可以幫助客戶與一群類似的買家團結在一起，這在其他購物者中的實際商店中很容易感覺到，但是當您獨自在計算機或移動屏幕前購物時，在線購物體驗中甚至需要更多。
更重要的是，評論可以回答客戶的問題，從而為購買的積極決定提供支持-或防止購買錯誤的商品并獲得負面的體驗。
4. 互動性
交互性模仿了從不同角度看待物品并進行操作，試穿衣服或鞋類，測試臉上的化妝選項，將家具或裝飾物幾乎放到房間中的互動性，所有這些以及其他各種創新都是由于創造力，客戶體驗和新技術，變得越來越容易獲得。
如今，電商網站中交互性的另一個重要方面是個性化和自定義，人們可以自定義購買商品，而不僅僅是從目錄中選擇購買的商品。選擇一束鮮花的自定義組合，使用最喜歡的食材定制漢堡或比薩餅，收集個人服裝或家庭裝扮，而不僅僅是購買現成的商品-能夠在報價中添加自己的個性。
5. 移動適應
不用說，如今人們每天用智能手機做什么事，而購物已成為最重要的選擇之一。
此外，移動適應是搜索引擎優化的核心網絡要素之一。如果您希望成功搜索一個電商網站并讓訪問者從任何設備上獲得無縫的購物體驗，請使產品頁面適合移動設備并重新考慮布局，以使界面便于移動設備瀏覽。
無論如何，無論本機應用程序是否存在，產品頁面以及網站的其余頁面都應該具有響應性并且對移動設備友好。
6. 404錯誤
由于大量使用產品頁面并經常對其進行更新，因此在不同情況下都會出現錯誤。人們可能會不小心在URL或他們之前保存的頁面中鍵入字母，因為該產品已經缺貨，因此可能不存在。
確保不要讓客戶碰到一個空的錯誤頁面然后走開。將它們連接到其他頁面，提供相關選項或類別，并盡一切努力利用涉及客戶的錯誤頁面來檢查其他內容。
六、總結
當然，要為特定的電商項目選擇設計實踐的決定是經過深思熟慮的問題，關于使用什么和剩下什么的解決方案將基于產品和市場類型的許多主觀因素。根據公司預算，雇主的技能，個人品味和目標受眾的特定需求進行細分。
無論如何，如果您提供的產品很好并且客戶已經在網站上，則讓產品頁面以最佳的方式顯示商品，讓購物者感覺親切、方便、清晰和友好。
作者：對啊設計君，微信公眾號：對啊設計君
原文鏈接：https://www.zcool.com.cn/article/ZMTI0NDk0OA==.html
本文由 @對啊設計君 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Pexels，基于 CC0 協議
- 目前還沒評論，等你發揮！
