寶貝產(chǎn)品詳情介紹及訂購頁面是電子商務(wù)網(wǎng)站的核心。這是大多數(shù)用戶決定是否購買產(chǎn)品的地方，因此應(yīng)該格外的下工夫。我希望我的見解能幫助您設(shè)計更好的體驗。

01、采用生活化的照片，而不是單一的產(chǎn)品圖片

盡管商品圖片大多保存在客戶端，但作為設(shè)計師，您仍然可以引入完整的概念并影響客戶的產(chǎn)品展示策略。

如今的品牌不僅銷售產(chǎn)品，還銷售生活方式。這就是為什么Instagram上的銷售額在增加，每個大品牌都有一個提供給顧客購物的社交賬戶。

人們從服裝和生活化的圖片中獲得靈感。穿著運動鞋的人比運動鞋本身更容易讓人聯(lián)想起來。

如果您為單一品牌商店進行設(shè)計，請考慮上下文、現(xiàn)實生活動態(tài)中的因素和情感因素，以便在客戶、品牌和整個社區(qū)之間建立更牢固的關(guān)系。注意Mango&Urban  Outfitters是如何用一張現(xiàn)實生活中的服裝照片來補充他們的正式鏡頭的，照片上展示了所選的產(chǎn)品。

77%的購物者在做出購買決定之前，更愿意看到其他顧客的照片，而不是專業(yè)照片。

Smart Insight的研究顯示，77%的購物者在做出購買決定之前，更愿意看到其他顧客的照片，而不是專業(yè)照片。其他顧客的照片可能看起來更現(xiàn)實、更值得信賴，也更容易有認(rèn)同感。

Baymard研究所建議允許用戶將自己的圖片上傳到該網(wǎng)站。這可能會導(dǎo)致與時尚博客、雜志 和零售商建立互惠互利的伙伴關(guān)系。例如，Made.com允許用戶在Instagram帖子中標(biāo)記他們自己的照片，以便在他們的網(wǎng)站上推薦。

由于社會化、全球化、多元化慶祝、風(fēng)格差異、反諷、開放、透明是西方社會日益增長的價值觀，我相信即使是奢侈品牌也會從嚴(yán)肅和疏遠，轉(zhuǎn)向與顧客進行更加生動的對話?？纯碆alenciaga和Vetements最近發(fā)布的這些帖子就知道了。

02、尊重行業(yè)標(biāo)準(zhǔn)

在為現(xiàn)有市場設(shè)計新產(chǎn)品時，請確?？紤]已建立的界面模式和機制。

產(chǎn)品頁面平均分為兩欄：左邊是照片，右邊是產(chǎn)品信息和操作。用戶已經(jīng)熟悉了這種布局，如果使用它，用戶就不需要學(xué)習(xí)新的UI，就可以將注意力直接轉(zhuǎn)到產(chǎn)品上。

COS和Farfetch 產(chǎn)品詳情頁

堅持雙重布局并不意味著所有產(chǎn)品頁面看起來都應(yīng)該是一樣的。在這些限制范圍內(nèi)，仍有創(chuàng)造的空間。例如，Rick Owens網(wǎng)站利用整個瀏覽器窗口來展示產(chǎn)品，他們打破了傳統(tǒng)的布局，并帶來了獨特的風(fēng)格和新鮮感。

03、允許購買套裝

允許顧客購買整套服裝，并可以購買相似或互補的產(chǎn)品。人們經(jīng)常從套裝中獲得靈感，購買其他部分的服裝可能是他們購物體驗的關(guān)鍵部分。

04、充分介紹產(chǎn)品

除了使用生活化的產(chǎn)品圖片外，還應(yīng)該介紹產(chǎn)品的精華，這意味著準(zhǔn)確的、全面地展示其特性，以及幫助客戶想象產(chǎn)品。

這里有一些小貼士，可以幫助你讓你的產(chǎn)品圖片變得更棒：

- 在隱形人體模特和模特上展示產(chǎn)品。

- 盡可能提供模特尺寸和產(chǎn)品尺寸。

- 捕捉特寫細(xì)節(jié)：襯里、縫合、面料、標(biāo)簽、拉鏈、紐扣。

- 拍攝一段視頻：觀看動態(tài)的產(chǎn)品有助于更好地想象它。

- 用同樣的風(fēng)格處理產(chǎn)品圖片。確保您的產(chǎn)品都是相同大小的，并且在每個圖片中居中位置相同。圖片應(yīng)具有相同的縮放比例、Y位置、清晰度、白平衡設(shè)置等。

- 如果產(chǎn)品(如外套)有拉鏈或按鈕，則應(yīng)該展示其打開和關(guān)閉的狀態(tài)。

- 按比例展示產(chǎn)品。如果產(chǎn)品的尺寸和比例最初并不明顯，請在已知尺寸的參照物附近放置照片，例如箱包、鞋子和珠寶，應(yīng)該至少有一張照片與他們做對比。

- 同時顯示更多不同角度的照片。在類似ASOS這樣的網(wǎng)站上，用戶在能看到產(chǎn)品背面時還 能想到產(chǎn)品正面的樣子，反之亦然。這使得客戶評估和想象的過程變得更加困難、漫長和繁瑣。

Farfetch同時顯示兩張圖片。Mango做得更好，去掉了圖片輪播，并將圖片用網(wǎng)格展示。

提供方便的圖片縮放功能?？s放照片是一種缺乏一致性的交互，因為所有網(wǎng)站的操作方式都不同。無論您選擇哪種縮放機制，都要確保您的界面指示其行為方式。為圖片縮放使用自定義光標(biāo)形狀。

05、不要使用圖片輪播

圖片輪播不起作用，實際上沒有人點擊它們。

大量研究表明，圖片輪播不起作用，實際上沒有人點擊它們。盡管它們指的是促銷時的圖片輪播，但其中的缺點對于產(chǎn)品圖片的輪播也同樣適用：

圖片輪播一次只顯示1-2張照片。

要求用戶準(zhǔn)確地用鼠標(biāo)點擊一個很小的輪播控件。

不能在"自動切換"上點擊，并且每次點擊都會將注意力從產(chǎn)品轉(zhuǎn)移到導(dǎo)航上。

越來越多的先進品牌的網(wǎng)站正在轉(zhuǎn)向?qū)挸ǖ牟季?，大圖片占據(jù)了整個頁面的左側(cè)。用戶通過滾動在它們之間導(dǎo)航，這幾乎可以自動執(zhí)行，并且不需要關(guān)注導(dǎo)航本身的過程。

雖然圖片輪播消失了，但兩列布局仍然存在。有時，右側(cè)固定在屏幕上，而包含照片的左側(cè)則以通常的方式滾動。

Acne Studios, Ambush和其他一些品牌會在頁面上放置大圖，讓客戶無需額外點擊就可以近距離查看產(chǎn)品。全尺寸圖片通常與瀏覽器高度不能適配，用戶必須向下滾動才能看到圖片的其余部分。我覺得這種方法有點把重點推向了錯誤的方向，因為更重要的是理解產(chǎn)品，想象產(chǎn)品的效果并做出決定，而不是查看特寫細(xì)節(jié)，這通常是用戶確定對產(chǎn)品感興趣后評估的第二步。

06、不要截斷視覺動線

如果視覺動線在縮略圖部分被截斷，50-80%的用戶根本看不到圖片。

Baymard的研究表明，由于節(jié)省空間的原因，如果視覺動線在縮略圖部分被截斷，50-80%的用戶根本看不到圖片。

設(shè)計一個所有照片的視覺動線最初都可見的布局，它們不僅可以幫助用戶快速看到所需的角度或特寫，還可以快速直觀的導(dǎo)航至所需的圖片。

07、優(yōu)先為極端情況設(shè)計

因為它們在電子商務(wù)中并不罕見。

總有將產(chǎn)品信息設(shè)計得超級簡約和干凈的誘惑，讓產(chǎn)品成為王。但事實是，用戶確實需要很多細(xì)節(jié)來決定，商店通常想激起購物者的興趣。

所以在此之前，想象一下產(chǎn)品正在打折或有特價優(yōu)惠。您可以有一個銷售計時器，"售罄"或"低庫存"標(biāo)簽，或顯示該產(chǎn)品的庫存只有M大小。產(chǎn)品名稱、品牌名稱、ID、增值稅包含和店內(nèi)供應(yīng)信息需要出現(xiàn)在最初的頁面上。我們不能僅僅為了讓界面看起來簡潔的，而將它們折疊在"更多信息?"下。

在您已經(jīng)滿意了流暢和簡潔的模板之后，嘗試將所有這些元素組合在一起可能會非常痛苦，因為它們很變得混亂。刪除東西比添加?xùn)|西更容易，所以設(shè)計時讓所有東西都是同時"打開"，以確保它們看起來都是可讀的和協(xié)調(diào)的。然后分別設(shè)計最小元素數(shù)和平均元素。最好是內(nèi)容不會改變位置，使他們在頁面之間"跳轉(zhuǎn)"，這將有助于用戶養(yǎng)成空間習(xí)慣。

08、描述產(chǎn)品及其獲取方式

將產(chǎn)品信息正確分組，并考慮哪些附加信息可能會有幫助：

- 在尺寸選擇器附近顯示尺寸指南鏈接。

- 在模型照片附近顯示模型尺寸。

- 將單位轉(zhuǎn)換器放置在模型/產(chǎn)品測量值附近。

- 在成分附近顯示保養(yǎng)說明。

- 允許通知缺貨的尺碼。

- 立即顯示運費。Baymard的研究表明，64%的用戶會立即在產(chǎn)品頁面上查找運費，其中24%的用戶聲稱因為找不到運費而跳過了購買。這對于國際訂單來說尤其重要，因為運費有時會比商品本身的價格高出一倍(我的生活故事)。

為了讓您的頁面保持流暢和簡約，遵循漸進式展示信息的方法：不要一開始就用大量的信息淹沒客戶。允許用戶隨心所欲地深入了解細(xì)節(jié)。如果您使用可折疊/可展開的列表或選項卡，您可以容納大量信息。但請記住，要使其易于發(fā)現(xiàn)和使用描述性名稱："成分和保養(yǎng)"比"更多信息"的信息量大得多。

09、充滿禮貌，熱心幫助

用戶體驗設(shè)計的禮貌和關(guān)心意味著你預(yù)見到用戶可能面臨的任何困難和問題，并試圖避免或防止它們。你應(yīng)該想象可能出現(xiàn)的問題，并提前提供全面的信息。

UX對用戶的行為作出響應(yīng)，并向他們提供明確的視覺反饋，特別是對那些對顯示內(nèi)容沒有明顯影響的行為，比如將產(chǎn)品添加到愿望清單或購物車中。

UI的表達被許多設(shè)計師所低估，他們大多專注于通過各種裝飾設(shè)計方法來表現(xiàn)品牌形象或展示產(chǎn)品。大膽的設(shè)計和精美的圖片會激起人們的興趣、欲望和其他情緒，而貼心的UI會與你的網(wǎng)站建立一種充滿愛心和信任的關(guān)系，并促使用戶回訪。

這里有一些關(guān)于如何讓UI成為一個"用戶的好朋友"的小貼士：

- 確保可以輕松發(fā)現(xiàn)聯(lián)系和幫助鏈接。

- 請隨時復(fù)制有用的信息。您可以將有關(guān)發(fā)貨和退貨的信息放在每個產(chǎn)品頁面和整個結(jié)賬流程中，這樣，無論何時用戶需要這些信息，他都不必費力地閱讀常見問題解答(FAQ)。

- 產(chǎn)品ID應(yīng)在那里以滿足支持需求。

- 當(dāng)用戶實際上從未犯過任何錯誤時，不要責(zé)備他。例如，如果用戶試圖在沒有選擇尺寸的情況下將產(chǎn)品添加到購物車中，請使用動畫或工具提示將他的注意力轉(zhuǎn)移到缺少的選擇上，但避免使用紅色、所有大寫字母、警告標(biāo)志、聲音或與錯誤相關(guān)的動畫。

- 添加"添加購物車、愿望列表和登錄"的視覺反饋。根據(jù)NNGroup的研究，這比乍一看要重要得多。

10、允許跨設(shè)備同步

37%的用戶在移動設(shè)備上進行搜索，但會切換到桌面端來完成購買。

根據(jù)Appsee的數(shù)據(jù)，37%的用戶在移動設(shè)備上進行搜索，但會切換到桌面端來完成購買，因此請確保您：

- 建議他們登錄以同步他們購物車和愿望清單。重要的是要告訴用戶他將如何從注冊中獲益。同步是注冊的強烈動機，因為它提供了更無縫的購物體驗。

- 確保共享選項易于找到，并允許共享物品和整個購物車。