Saas模(mo)式，為(wei)不(bu)同(tong)企業提供交易平臺解決方(fang)案，不(bu)同(tong)企業，甚至于(yu)(yu)不(bu)同(tong)類目，商詳頁存在(zai)差異化。由于(yu)(yu)不(bu)同(tong)租戶對商詳頁的(de)主(zhu)體框架(jia)都(dou)存在(zai)不(bu)同(tong)的(de)訴求，因(yin)此，市(shi)場(chang)上通(tong)用的(de)商詳頁裝(zhuang)修（在(zai)既定(ding)好(hao)主(zhu)框架(jia)上開放(fang)裝(zhuang)修）很難滿足多樣式需求。基(ji)于(yu)(yu)該(gai)種場(chang)景，可以通(tong)過前端(duan)組件(jian)化及用戶界面可視化裝(zhuang)修實現商詳頁主(zhu)體框架(jia)、可擴(kuo)展點的(de)多樣化裝(zhuang)修。

一、商詳頁應用場景(jing)分(fen)析(xi)1.用戶進(jin)入頁面路徑分(fen)析(xi)

從站外(wai)進(jin)入商詳頁的新用(yong)戶，商詳頁相當于首頁，因(yin)此要具備(bei)商品(pin)導航、搜(sou)索欄、頻(pin)道欄

結合(he)上方列舉場景，商詳(xiang)頁重(zhong)點梳理：商品價(jia)格促銷信息(xi)商品基礎信息(xi)：圖(tu)片、標題、運費(fei)、屬(shu)性(xing)、售后服務等(deng)立即訂購、加入進(jin)貨車按鈕(niu)，保證能在(zai)首(shou)屏(ping)顯示2.從新老用(yong)戶角度(du)分(fen)析

新老用(yong)戶解釋：瀏覽維度(du)：首次(ci)(ci)訪問網(wang)站的用(yong)戶，非(fei)首次(ci)(ci)訪問網(wang)站的用(yong)戶—網(wang)站/店(dian)鋪的曝光度(du)交(jiao)易維度(du)：首次(ci)(ci)下單(dan)采(cai)購的用(yong)戶、復(fu)購用(yong)戶—網(wang)站/店(dian)鋪的成交(jiao)率

小結：頁面(mian)視覺、交互，關注(zhu)用(yong)(yong)戶(hu)體驗，簡化用(yong)(yong)戶(hu)采(cai)購(gou)操作(zuo)頁面(mian)結構、產品功能避免(mian)大(da)范圍調整，考慮老(lao)用(yong)(yong)戶(hu)的(de)使用(yong)(yong)習慣此外(wai)，商(shang)詳(xiang)頁還需關注(zhu)的(de)點：商(shang)品導購(gou)信息：商(shang)品基(ji)礎信息+他人行為（評分(fen)、評價、銷(xiao)量、收(shou)藏數(shu)、分(fen)享數(shu)等）價格需求延伸：促銷(xiao)信息要凸顯現價和原(yuan)價的(de)比較，讓(rang)用(yong)(yong)戶(hu)明確感(gan)知優惠了(le)多(duo)少具備采(cai)購(gou)意向的(de)操作(zuo)：收(shou)藏、咨詢(xun)、進(jin)入進(jin)貨車、立即訂購(gou)二、頁面(mian)組件化配置1.商(shang)詳(xiang)頁組件梳理

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

2.前端組件化平臺(tai)

所謂的前端組(zu)件(jian)化平(ping)臺，大家(jia)可以理(li)解(jie)為管理(li)商詳頁(ye)所有抽離出的組(zu)件(jian)平(ping)臺，該平(ping)臺主(zhu)要面向研發人員或者實施顧問(wen)。

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

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

3.商詳頁可視(shi)化裝修

通過(guo)(guo)組(zu)件化(hua)方式(shi)配置(zhi)商(shang)詳(xiang)(xiang)頁(ye)主體框架時(shi)，可以在不(bu)同(tong)的(de)布局、不(bu)同(tong)的(de)區域(yu)保留不(bu)同(tong)的(de)擴(kuo)展點(dian)。所謂(wei)的(de)擴(kuo)展點(dian)，即開放給各(ge)店鋪可靈活裝修的(de)區域(yu)。店鋪可以通過(guo)(guo)產(chan)品詳(xiang)(xiang)情頁(ye)裝修，在商(shang)詳(xiang)(xiang)頁(ye)不(bu)同(tong)的(de)可裝修區域(yu)（擴(kuo)展點(dian)），選擇模塊進(jin)行可視化(hua)裝修。三、流(liu)程與規則(ze)流(liu)程類型(xing)：頁(ye)面(mian)加(jia)載(zai)流(liu)程按(an)鈕(niu)操作(zuo)流(liu)程。如(ru)：立即訂購、進(jin)入(ru)進(jin)貨車等1.頁(ye)面(mian)加(jia)載(zai)流(liu)程

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

2.按鈕操(cao)(cao)作(zuo)流程(cheng)商(shang)詳頁(ye)的一(yi)般常見性操(cao)(cao)作(zuo)：立即訂購、加入進貨(huo)車、收藏商(shang)品、分享商(shang)品、收藏店鋪(pu)等等。

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

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

3.規則提示交(jiao)互(hu)規范

校驗規(gui)(gui)則視(shi)具體業務而定，當用(yong)戶(hu)不(bu)滿足某些(xie)規(gui)(gui)則檢驗時，需(xu)給(gei)出相應提(ti)示及告(gao)知用(yong)戶(hu)下一步如何操作。

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