Saas模式，爲不同企業提供交易平台解決方案，不同企業，甚至于不同類目，商詳頁存在差異化(huà)。由于不同租戶對(duì)商詳頁的(de)主體框架都存在不同的(de)訴求，因此，市場(chǎng)上通(tōng)用(yòng)的(de)商詳頁裝修（在既定好主框架上開放裝修）很難滿足多(duō)樣式需求。基于該種場(chǎng)景，可(kě)以通(tōng)過前端組件化(huà)及用(yòng)戶界面可(kě)視化(huà)裝修實現商詳頁主體框架、可(kě)擴展點的(de)多(duō)樣化(huà)裝修。

一、商詳頁應用(yòng)場(chǎng)景分(fēn)析1.用(yòng)戶進入頁面路徑分(fēn)析

從站外進入商詳頁的(de)新用(yòng)戶，商詳頁相當于首頁，因此要具備商品導航、搜索欄、頻(pín)道欄

結合上方列舉場(chǎng)景，商詳頁重點梳理(lǐ)：商品價格促銷信息商品基礎信息：圖片、标題、運費、屬性、售後服務等立即訂購(gòu)、加入進貨車按鈕，保證能在首屏顯示2.從新老用(yòng)戶角度分(fēn)析

新老用(yòng)戶解釋：浏覽維度：首次訪問網站的(de)用(yòng)戶，非首次訪問網站的(de)用(yòng)戶—網站/店(diàn)鋪的(de)曝光(guāng)度交易維度：首次下(xià)單采購(gòu)的(de)用(yòng)戶、複購(gòu)用(yòng)戶—網站/店(diàn)鋪的(de)成交率

小結：頁面視覺、交互，關注用(yòng)戶體驗，簡化(huà)用(yòng)戶采購(gòu)操作頁面結構、産品功能避免大(dà)範圍調整，考慮老用(yòng)戶的(de)使用(yòng)習(xí)慣此外，商詳頁還(hái)需關注的(de)點：商品導購(gòu)信息：商品基礎信息+他(tā)人(rén)行爲（評分(fēn)、評價、銷量、收藏數、分(fēn)享數等）價格需求延伸：促銷信息要凸顯現價和(hé)原價的(de)比較，讓用(yòng)戶明(míng)确感知優惠了(le)多(duō)少具備采購(gòu)意向的(de)操作：收藏、咨詢、進入進貨車、立即訂購(gòu)二、頁面組件化(huà)配置1.商詳頁組件梳理(lǐ)

組件拆分(fēn)時(shí)，可(kě)以結合實際場(chǎng)景，拆分(fēn)到合适的(de)顆粒度。

2.前端組件化(huà)平台

所謂的(de)前端組件化(huà)平台，大(dà)家可(kě)以理(lǐ)解爲管理(lǐ)商詳頁所有抽離出的(de)組件平台，該平台主要面向研發人(rén)員(yuán)或者實施顧問。

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

當然了(le)，組件化(huà)配置商詳頁也(yě)可(kě)以關聯到類目，不同的(de)類目，可(kě)以配置不同功能和(hé)樣式的(de)商詳頁。

3.商詳頁可(kě)視化(huà)裝修

通(tōng)過組件化(huà)方式配置商詳頁主體框架時(shí)，可(kě)以在不同的(de)布局、不同的(de)區(qū)域保留不同的(de)擴展點。所謂的(de)擴展點，即開放給各店(diàn)鋪可(kě)靈活裝修的(de)區(qū)域。店(diàn)鋪可(kě)以通(tōng)過産品詳情頁裝修，在商詳頁不同的(de)可(kě)裝修區(qū)域（擴展點），選擇模塊進行可(kě)視化(huà)裝修。三、流程與規則流程類型：頁面加載流程按鈕操作流程。如：立即訂購(gòu)、進入進貨車等1.頁面加載流程

不同狀态，不同業務會對(duì)應不同的(de)商詳頁，比如：下(xià)架商品、詢價商品、拼團商品等等。除此之外，加載時(shí)還(hái)需根據某些信息，展示對(duì)應的(de)信息。比如：商品的(de)區(qū)域價、用(yòng)戶是否登錄，登錄後是否有會員(yuán)價等等。

2.按鈕操作流程商詳頁的(de)一般常見性操作：立即訂購(gòu)、加入進貨車、收藏商品、分(fēn)享商品、收藏店(diàn)鋪等等。

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

舉例：觸發立即訂購(gòu)，結合當前系統的(de)業務，需要進行：是否登錄、是否風險名單用(yòng)戶、是否黑(hēi)名單用(yòng)戶、起訂規則是否滿足、配送區(qū)域是否滿足等等規則校驗。

3.規則提示交互規範

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

由于商詳頁，或者整個(gè)商城(chéng)（如首頁、頻(pín)道頁、列表頁等）存在很多(duō)規則校驗，建議(yì)整理(lǐ)出交互提示規範，相同或者同類場(chǎng)景，統一交互提示規範。