Saas模式(shi)，為不(bu)同企業提(ti)供交(jiao)易平臺解決方(fang)案(an)，不(bu)同企業，甚至于(yu)(yu)不(bu)同類(lei)目，商詳(xiang)頁(ye)(ye)存(cun)(cun)在(zai)差異化。由于(yu)(yu)不(bu)同租戶(hu)對商詳(xiang)頁(ye)(ye)的(de)主體框架(jia)都存(cun)(cun)在(zai)不(bu)同的(de)訴求，因此(ci)，市場上通用的(de)商詳(xiang)頁(ye)(ye)裝修（在(zai)既定好主框架(jia)上開放裝修）很難(nan)滿(man)足(zu)多樣式(shi)需求。基于(yu)(yu)該種場景，可以通過前端組件化及用戶(hu)界面可視(shi)化裝修實現商詳(xiang)頁(ye)(ye)主體框架(jia)、可擴展(zhan)點的(de)多樣化裝修。

一、商詳頁(ye)(ye)應用(yong)場景分析(xi)1.用(yong)戶進入(ru)頁(ye)(ye)面路(lu)徑分析(xi)

從站外進(jin)入商(shang)詳(xiang)頁的新用戶，商(shang)詳(xiang)頁相(xiang)當于首(shou)頁，因(yin)此要具備商(shang)品導航(hang)、搜索欄、頻道欄

結(jie)合(he)上方列(lie)舉場景，商詳頁重點梳理：商品價格促銷(xiao)信息(xi)(xi)商品基(ji)礎信息(xi)(xi)：圖片(pian)、標題、運費、屬性、售(shou)后服(fu)務等立即訂(ding)購、加入(ru)進(jin)貨車按鈕，保(bao)證能在首(shou)屏(ping)顯示2.從新老用戶角度分析

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

小結(jie)：頁(ye)面視覺(jue)、交互，關注用(yong)(yong)(yong)戶體(ti)驗，簡(jian)化用(yong)(yong)(yong)戶采購(gou)(gou)操作(zuo)頁(ye)面結(jie)構(gou)、產(chan)品(pin)功能避免大范(fan)圍調(diao)整，考慮老用(yong)(yong)(yong)戶的(de)使用(yong)(yong)(yong)習慣(guan)此外，商(shang)詳頁(ye)還(huan)需關注的(de)點(dian)：商(shang)品(pin)導購(gou)(gou)信息：商(shang)品(pin)基礎信息+他人行為（評分(fen)、評價、銷量、收藏數(shu)、分(fen)享數(shu)等）價格需求延伸(shen)：促銷信息要凸顯現價和原價的(de)比較，讓用(yong)(yong)(yong)戶明(ming)確感知優惠了多少(shao)具(ju)備(bei)采購(gou)(gou)意向的(de)操作(zuo)：收藏、咨詢、進入進貨車、立即訂購(gou)(gou)二、頁(ye)面組(zu)(zu)件(jian)化配置1.商(shang)詳頁(ye)組(zu)(zu)件(jian)梳(shu)理(li)

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

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

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

組(zu)件(jian)與布(bu)局的結合應(ying)用，搭(da)建(jian)出不(bu)同(tong)主體(ti)框(kuang)架樣式的商(shang)詳頁，應(ying)用至不(bu)同(tong)的租戶。該(gai)平臺具體(ti)實施(shi)方法，不(bu)再(zai)在此描述(shu)。主要是分享商(shang)詳頁的組(zu)件(jian)配(pei)置思(si)路，而不(bu)再(zai)僅限于主體(ti)框(kuang)架每次都需研(yan)發(fa)人員重(zhong)新開發(fa)。

當(dang)然(ran)了，組件化配置商(shang)詳頁也可以(yi)關聯到類目(mu)，不同(tong)的類目(mu)，可以(yi)配置不同(tong)功能和樣式的商(shang)詳頁。

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

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

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

2.按鈕(niu)操作流程商(shang)詳(xiang)頁的一(yi)般(ban)常見性操作：立即(ji)訂購、加入進貨車、收(shou)藏商(shang)品(pin)、分(fen)享商(shang)品(pin)、收(shou)藏店鋪等等。

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

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

3.規(gui)則(ze)提示交互規(gui)范

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

由(you)于(yu)商詳頁(ye)(ye)(ye)，或(huo)者整個(ge)商城（如首頁(ye)(ye)(ye)、頻道頁(ye)(ye)(ye)、列(lie)表頁(ye)(ye)(ye)等(deng)）存(cun)在很多規則(ze)校驗，建議(yi)整理出交(jiao)互(hu)(hu)提示規范，相同或(huo)者同類場景，統一(yi)交(jiao)互(hu)(hu)提示規范。