Saas模式，為不同企業提供交易平臺解決方案，不同企業，甚至于不同類目，商詳頁存在差異化。由于不同租戶對商詳頁的主體框架都存在不同的訴求，因此，市場上通用的商詳頁裝修（在既定好主框架上開放裝修）很難滿足多樣式需求?；谠摲N場景，可以通過前端組件化及用戶界面可視化裝修實現商詳頁主體框架、可擴展點的多樣化裝修。

一、商詳頁應用場景分析

1.用戶進入頁面路徑分析

站內路徑列舉：

站外路徑列舉：

從站外進入商詳頁的新用戶，商詳頁相當于首頁，因此要具備商品導航、搜索欄、頻道欄

結合上方列舉場景，商詳頁重點梳理：

• 商品價格
• 促銷信息
• 商品基礎信息：圖片、標題、運費、屬性、售后服務等
• 立即訂購、加入進貨車按鈕，保證能在首屏顯示

2.從新老用戶角度分析

新老用戶解釋：

• 瀏覽維度：首次訪問網站的用戶，非首次訪問網站的用戶—網站/店鋪的曝光度
• 交易維度：首次下單采購的用戶、復購用戶—網站/店鋪的成交率

小結：

• 頁面視覺、交互，關注用戶體驗，簡化用戶采購操作
• 頁面結構、產品功能避免大范圍調整，考慮老用戶的使用習慣

此外，商詳頁還需關注的點：

• 商品導購信息：商品基礎信息+他人行為（評分、評價、銷量、收藏數、分享數等）
• 價格需求延伸：促銷信息要凸顯現價和原價的比較，讓用戶明確感知優惠了多少
• 具備采購意向的操作：收藏、咨詢、進入進貨車、立即訂購

二、頁面組件化配置

1.商詳頁組件梳理

組件拆分時，可以結合實際場景，拆分到合適的顆粒度。

(以上并非商詳頁全部組件，不同模式，對商詳頁訴求不同)

2.前端組件化平臺

所謂的前端組件化平臺，大家可以理解為管理商詳頁所有抽離出的組件平臺，該平臺主要面向研發人員或者實施顧問。

組件與布局的結合應用，搭建出不同主體框架樣式的商詳頁，應用至不同的租戶。該平臺具體實施方法，不再在此描述。主要是分享商詳頁的組件配置思路，而不再僅限于主體框架每次都需研發人員重新開發。

當然了，組件化配置商詳頁也可以關聯到類目，不同的類目，可以配置不同功能和樣式的商詳頁。

3.商詳頁可視化裝修

通過組件化方式配置商詳頁主體框架時，可以在不同的布局、不同的區域保留不同的擴展點。所謂的擴展點，即開放給各店鋪可靈活裝修的區域。店鋪可以通過產品詳情頁裝修，在商詳頁不同的可裝修區域（擴展點），選擇模塊進行可視化裝修。

三、流程與規則

流程類型：

• 頁面加載流程
• 按鈕操作流程。如：立即訂購、進入進貨車等

1.頁面加載流程

不同狀態，不同業務會對應不同的商詳頁，比如：下架商品、詢價商品、拼團商品等等。除此之外，加載時還需根據某些信息，展示對應的信息。比如：商品的區域價、用戶是否登錄，登錄后是否有會員價等等。

2.按鈕操作流程

商詳頁的一般常見性操作：立即訂購、加入進貨車、收藏商品、分享商品、收藏店鋪等等。

對于此類功能性操作按鈕，要注意是否需要進行用戶是否登錄、用戶身份及相關業務的要求。

舉例：觸發立即訂購，結合當前系統的業務，需要進行：是否登錄、是否風險名單用戶、是否黑名單用戶、起訂規則是否滿足、配送區域是否滿足等等規則校驗。

3.規則提示交互規范

校驗規則視具體業務而定，當用戶不滿足某些規則檢驗時，需給出相應提示及告知用戶下一步如何操作。

由于商詳頁，或者整個商城（如首頁、頻道頁、列表頁等）存在很多規則校驗，建議整理出交互提示規范，相同或者同類場景，統一交互提示規范。

結語：以上是商詳頁重構，針對降低開發成本，滿足多企業多場景對商詳頁訴求的實踐，希望能給遇到同樣場景的朋友提供不同的解決思路。

此外，在搭建前端組件化時，若發展時機較好，可以擴展為組件交易市場。

本文由 @搖滾小白菜 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels ，基于 CC0 協議