海參君註：本文譯自 Julia Dzyubina 的 Designing better product pages。作者為用戶體驗設計公司 Clay 的藝術總監。作者在文中分享了在設計服裝類電商產品頁時的一些經驗以及行業趨勢。希望對您有所啟發。
適合讀者：中級介面設計師、中級互動設計師、服裝類電商產品經理
閱讀難度：☆☆
產品頁面是電子商務網站的核心。這是大多數用戶決定是否購買產品的地方，因此應該格外注意。我希望我的見解能幫助您設計更好的用戶體驗。
採用生活化的照片，而不是單一的產品圖片
儘管商品圖片大多保存在客戶端，但作為設計師，您仍然可以引入完整的概念並影響客戶的產品展示策略。
如今的品牌不僅銷售產品，還銷售生活方式。這就是為什麼 Instagram 上的銷售額在增加，每個大品牌都有一個提供給顧客購物的社交帳戶。
人們從服裝和生活化的圖片中獲得靈感。穿著運動鞋的人比運動鞋本身更容易讓人聯想起來。
如果您為單一品牌商店進行設計，請考慮上下文、現實生活動態中的因素和情感因素，以便在客戶、品牌和整個社區之間建立更牢固的關係。注意Mango&Urban Outfitters 是如何用一張現實生活中的服裝照片來補充他們的真實鏡頭的，照片上展示了所選的產品。
77% 的購物者在做出購買決定之前，更願意看到其他顧客的照片，而不是專業照片。
Smart Insight 的研究顯示，77% 的購物者在做出購買決定之前，更願意看到其他顧客的照片，而不是專業照片。其他顧客的照片可能看起來更現實、更值得信賴，也更容易有認同感。
Baymard 研究所建議允許用戶將自己的圖片上傳到該網站。這可能會導致與時尚博客、雜誌 和零售商建立互惠互利的夥伴關係。例如，Made.com 允許用戶在 Instagram 帖子中標記他們自己的照片，以便在他們的網站上推薦。
由於社會化、全球化、多元化慶祝、風格差異、反諷、開放、透明是西方社會日益增長的價值觀，我相信即使是奢侈品牌也會從嚴肅和疏遠，轉向與顧客進行更加生動的對話。看看 Balenciaga 和 Vetements 最近發布的這些帖子就知道了。
尊重行業標準
在為現有市場設計新產品時，請確保考慮已建立的介面模式和機制。
產品頁面平均分為兩欄：左邊是照片，右邊是產品信息和操作。用戶已經熟悉了這種布局，如果使用它，用戶就不需要學習新的 UI，就可以將注意力直接轉到產品上。
△ COS 和 Farfetch 產品詳情頁
堅持雙重布局並不意味著所有產品頁面看起來都應該是一樣的。在這些限制範圍內，仍有創造的空間。例如，Rick Owens 網站利用整個瀏覽器窗口來展示產品，他們打破了傳統的布局，並帶來了獨特的風格和新鮮感。
允許購買套裝
允許顧客購買整套服裝，並可以購買相似或互補的產品。人們經常從套裝中獲得靈感，購買其他部分的服裝可能是他們購物體驗的關鍵部分。
充分介紹產品
除了使用生活化的產品圖片外，還應該介紹產品的精華，這意味著準確、全面地展示其特性，以及幫助客戶想像產品。
這裡有一些小貼士，可以幫助你讓你的產品圖片變得更棒：
- 在隱形人體模特和模特上展示產品。
- 儘可能提供模特尺寸和產品尺寸。
- 捕捉特寫細節：襯裡、縫合、面料、標籤、拉鏈、紐扣。
- 拍攝一段視頻：觀看動態的產品有助於更好地想像它。
- 用同樣的風格處理產品圖片。確保您的產品都是相同大小的，並且在每個圖片中居中位置相同。圖片應具有相同的縮放比例、Y 位置、清晰度、白平衡設置等。
- 如果產品（如外套）有拉鏈或按鈕，則應該展示其打開和關閉的狀態。
- 按比例展示產品。如果產品的尺寸和比例最初並不明顯，請在已知尺寸的參照物附近放置照片，例如箱包、鞋子和珠寶，應該至少有一張照片與他們作對比。
- 同時顯示更多不同角度的照片。在類似 ASOS 這樣的網站上，用戶在能看到產品背面時還能想到產品正面的樣子，反之亦然。這使得客戶評估和想像的過程變得更加困難、漫長和繁瑣。
Farfetch 同時顯示兩張圖片。Mango 做得更好，去掉了圖片輪播，並將圖片用網格展示。
提供方便的圖片縮放功能。縮放照片是一種缺乏一致性的交互，因為所有網站的操作方式都不同。無論您選擇哪種縮放機制，都要確保您的介面指示其行為方式。圖片縮放使用自定義光標形狀。
不要使用圖片輪播
圖片輪播不起作用，實際上沒有人點擊它們。
大量研究表明，圖片輪播不起作用，實際上沒有人點擊它們。儘管它們指的是促銷時的圖片輪播，但其中的缺點對於產品圖片的輪播也同樣適用：
- 圖片輪播一次只顯示 1-2 張照片。
- 要求用戶準確地用滑鼠點擊一個很小的輪播控制項。
- 不能在「自動切換」上點擊，並且每次點擊都會將注意力從產品轉移到導航上。
越來越多的先進品牌的網站正在轉向寬敞的布局，大圖片占據了整個頁面的左側。用戶通過滾動在它們之間導航，這幾乎可以自動執行，並且不需要關注導航本身的過程。
雖然圖片輪播消失了，但兩列布局仍然存在。有時，右側固定在螢幕上，而包含照片的左側則以通常的方式滾動。
Acne Studios, Ambush 和其他一些品牌會在頁面上放置大圖，讓客戶無需額外點擊就可以近距離查看產品。全尺寸圖片通常與瀏覽器高度不能適配，用戶必須向下滾動才能看到圖片的其餘部分。我覺得這種方法有點把重點推向了錯誤的方向，因為更重要的是理解產品，想像產品的效果並做出決定，而不是查看特寫細節，這通常是用戶確定對產品感興趣後評估的第二步。
不要截斷視覺動線
如果視覺動線在縮略圖部分被截斷，50-80% 的用戶根本看不到圖片。
Baymard 的研究表明，由於節省空間的原因，如果視覺動線在縮略圖部分被截斷，50-80% 的用戶根本看不到圖片。
設計一個所有照片的視覺動線最初都可見的布局，它們不僅可以幫助用戶快速看到所需的角度或特寫，還可以快速直觀地導航至所需的圖片。
優先為極端情況設計
因為它們在電子商務中並不罕見。
總有將產品信息設計得超級簡約和乾淨的誘惑，讓產品成為王。但事實是，用戶確實需要很多細節來決定，商店通常想激起購物者的興趣。
所以在此之前，想像一下產品正在打折或有特價優惠。您可以有一個銷售計時器，「售罄」或「低庫存」標籤，或顯示該產品的庫存只有 M 大小。長的產品名稱、品牌名稱、ID、增值稅包含和店內供應信息需要出現在最初的頁面上。我們不能僅僅為了讓介面看起來簡潔，而將它們摺疊在「更多信息▾」下。
在您已經滿意了流暢和簡潔的模板之後，嘗試將所有這些元素組合在一起可能會非常痛苦，因為它們變得很混亂。刪除東西比添加東西更容易，所以設計時讓所有東西都是同時「打開」，以確保它們看起來都是可讀的和協調的。然後分別設計最小元素數和平均元素。最好是內容不會改變位置，使他們在頁面之間「跳轉」，這將有助於用戶養成空間習慣。
描述產品及其獲取方式
將產品信息正確分組，並考慮哪些附加信息可能會有幫助：
- 在尺寸選擇器附近顯示尺寸指南連結。
- 在模型照片附近顯示模型尺寸。
- 將單位轉換器放置在模型/產品測量值附近。
- 在成分附近顯示保養說明。
- 允許通知缺貨的尺碼。
- 立即顯示運費。Baymard 的研究表明，64% 的用戶會立即在產品頁面上查找運費，其中 24% 的用戶聲稱因為找不到運費而跳過了購買。這對於國際訂單來說尤其重要，因為運費有時會比商品本身的價格高出一倍（我的生活故事）。
為了讓您的頁面保持流暢和簡約，遵循漸進式展示信息的方法：不要一開始就用大量的信息淹沒客戶。允許用戶隨心所欲地深入了解細節。如果您使用可摺疊/可展開的列表或選項卡，您可以容納大量信息。但請記住，要使其易於發現和使用描述性名稱：「成分和保養」比「更多信息」的信息量大得多。
充滿禮貌，熱心幫助
用戶體驗設計的禮貌和關心意味著你預見到用戶可能面臨的任何困難和問題，並試圖避免或防止它們。你應該想像可能出現的問題，並提前提供全面的信息。
UX 對用戶的行為作出響應，並向他們提供明確的視覺反饋，特別是對那些對顯示內容沒有明顯影響的行為，比如將產品添加到願望清單或購物車中。
UI 的表達被許多設計師所低估，他們大多專注於通過各種裝飾設計方法來表現品牌形象或展示產品。大膽的設計和精美的圖片會激起人們的興趣、慾望和其他情緒，而貼心的 UI 會與你的網站建立一種充滿愛心和信任的關係，並促使用戶回訪。
這裡有一些關於如何讓 UI 成為一個「用戶的好朋友」的小貼士：
- 確保可以輕鬆發現聯繫和幫助連結。
- 請隨時複製有用的信息。您可以將有關發貨和退貨的信息放在每個產品頁面和整個結帳流程中，這樣，無論何時用戶需要這些信息，他都不必費力地閱讀常見問題解答(FAQ)。
- 產品 ID 應在那裡以滿足支持需求。
- 當用戶實際上從未犯過任何錯誤時，不要責備他。例如，如果用戶試圖在沒有選擇尺寸的情況下將產品添加到購物車中，請使用動畫或工具提示將他的注意力轉移到缺少的選擇上，但避免使用紅色、所有大寫字母、警告標誌、聲音或與錯誤相關的動畫。
- 添加「添加購物車、願望列表和登錄」的視覺反饋。根據 NNGroup 的研究，這比乍一看要重要得多。
允許跨設備同步
37% 的用戶在移動設備上進行搜索，但會切換到桌面端來完成購買。
根據 Appsee 的數據，37% 的用戶在移動設備上進行搜索，但會切換到桌面端來完成購買，因此請確保您：
- 建議他們登錄以同步他們購物車和願望清單。重要的是要告訴用戶他將如何從註冊中獲益。同步是註冊的強烈動機，因為它提供了更無縫的購物體驗。
- 確保共享選項易於找到，並允許共享物品和整個購物車。