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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

03、允許購(gòu)買套裝

允許顧客購(gòu)買整套服裝，并可以購(gòu)買相似或互補(bǔ)的產(chǎn)品。人們經(jīng)常從套裝中獲得靈感，購(gòu)買其他部分的服裝可能是他們購(gòu)物體驗(yàn)的關(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)簽、拉鏈、紐扣。

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

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

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

- 按比例展示產(chǎn)品。如果產(chǎn)品的尺寸和比例最初并不明顯，請(qǐng)?jiān)谝阎叽绲膮⒄瘴锔浇胖谜掌缦浒?、鞋子和珠寶，?yīng)該至少有一張照片與他們做對(duì)比。

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

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

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

05、不要使用圖片輪播

圖片輪播不起作用，實(shí)際上沒有人點(diǎn)擊它們。

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

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

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

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

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

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

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

06、不要截?cái)嘁曈X動(dòng)線

如果視覺動(dòng)線在縮略圖部分被截?cái)啵?0-80%的用戶根本看不到圖片。

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

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

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

因?yàn)樗鼈冊(cè)陔娮由虅?wù)中并不罕見。

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

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

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

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

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

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

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

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

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

- 允許通知缺貨的尺碼。

- 立即顯示運(yùn)費(fèi)。Baymard的研究表明，64%的用戶會(huì)立即在產(chǎn)品頁(yè)面上查找運(yùn)費(fèi)，其中24%的用戶聲稱因?yàn)檎也坏竭\(yùn)費(fèi)而跳過(guò)了購(gòu)買。這對(duì)于國(guó)際訂單來(lái)說(shuō)尤其重要，因?yàn)檫\(yùn)費(fèi)有時(shí)會(huì)比商品本身的價(jià)格高出一倍(我的生活故事)。

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

09、充滿禮貌，熱心幫助

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

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

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

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

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

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

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

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

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

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

37%的用戶在移動(dòng)設(shè)備上進(jìn)行搜索，但會(huì)切換到桌面端來(lái)完成購(gòu)買。

根據(jù)Appsee的數(shù)據(jù)，37%的用戶在移動(dòng)設(shè)備上進(jìn)行搜索，但會(huì)切換到桌面端來(lái)完成購(gòu)買，因此請(qǐng)確保您：

- 建議他們登錄以同步他們購(gòu)物車和愿望清單。重要的是要告訴用戶他將如何從注冊(cè)中獲益。同步是注冊(cè)的強(qiáng)烈動(dòng)機(jī)，因?yàn)樗峁┝烁鼰o(wú)縫的購(gòu)物體驗(yàn)。

- 確保共享選項(xiàng)易于找到，并允許共享物品和整個(gè)購(gòu)物車。