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

文/搖滾小(xiǎo)白菜

一、商詳頁應用場(chǎng)景分析

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

站(zhàn)內(nèi)路徑列舉：

站(zhàn)外路徑列舉：

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

結合上(shàng)方列舉場(chǎng)景，商詳頁重點梳理(lǐ)：

商品價格

促銷信息

商品基礎信息：圖片、标題、運費、屬性、售後服務等

立即訂購、加入進貨車(chē)按鈕，保證能在首屏顯示

2.從新老用戶角度分析

新老用戶解釋：

浏覽維度：首次訪問網站(zhàn)的用戶，非首次訪問網站(zhàn)的用戶—網站(zhàn)/店(diàn)鋪的曝光度

交易維度：首次下單采購的用戶、複購用戶—網站(zhàn)/店(diàn)鋪的成交率

小(xiǎo)結：

頁面視(shì)覺、交互，關注用戶體(tǐ)驗，簡化用戶采購操作(zuò)

頁面結構、産品功能避免大(dà)範圍調整，考慮老用戶的使用習慣

此外，商詳頁還(hái)需關注的點：

商品導購信息：商品基礎信息+他人(rén)行(xíng)為(wèi)（評分、評價、銷量、收藏數(shù)、分享數(shù)等）

價格需求延伸：促銷信息要凸顯現價和(hé)原價的比較，讓用戶明(míng)确感知優惠了多(duō)少(shǎo)

具備采購意向的操作(zuò)：收藏、咨詢、進入進貨車(chē)、立即訂購

二、頁面組件化配置

1.商詳頁組件梳理(lǐ)

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

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

2.前端組件化平台

所謂的前端組件化平台，大(dà)家(jiā)可(kě)以理(lǐ)解為(wèi)管理(lǐ)商詳頁所有(yǒu)抽離出的組件平台，該平台主要面向研發人(rén)員或者實施顧問。

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

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

3.商詳頁可(kě)視(shì)化裝修

通(tōng)過組件化方式配置商詳頁主體(tǐ)框架時(shí)，可(kě)以在不同的布局、不同的區(qū)域保留不同的擴展點。所謂的擴展點，即開(kāi)放給各店(diàn)鋪可(kě)靈活裝修的區(qū)域。店(diàn)鋪可(kě)以通(tōng)過産品詳情頁裝修，在商詳頁不同的可(kě)裝修區(qū)域（擴展點），選擇模塊進行(xíng)可(kě)視(shì)化裝修。

三、流程與規則

流程類型：

頁面加載流程

按鈕操作(zuò)流程。如：立即訂購、進入進貨車(chē)等

1.頁面加載流程

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

2.按鈕操作(zuò)流程

商詳頁的一般常見性操作(zuò)：立即訂購、加入進貨車(chē)、收藏商品、分享商品、收藏店(diàn)鋪等等。

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

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

3.規則提示交互規範

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

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

結語

以上(shàng)是商詳頁重構，針對降低(dī)開(kāi)發成本，滿足多(duō)企業多(duō)場(chǎng)景對商詳頁訴求的實踐，希望能給遇到同樣場(chǎng)景的朋友(yǒu)提供不同的解決思路。此外，在搭建前端組件化時(shí)，若發展時(shí)機較好，可(kě)以擴展為(wèi)組件交易市場(chǎng)。