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

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

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

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

新老用(yong)戶(hu)解釋：瀏覽維(wei)度：首次訪問(wen)(wen)網(wang)(wang)站的(de)用(yong)戶(hu)，非首次訪問(wen)(wen)網(wang)(wang)站的(de)用(yong)戶(hu)—網(wang)(wang)站/店鋪(pu)的(de)曝光度交易維(wei)度：首次下單采購的(de)用(yong)戶(hu)、復購用(yong)戶(hu)—網(wang)(wang)站/店鋪(pu)的(de)成交率

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

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

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

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

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

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

3.商詳頁可視化裝修

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

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

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

對于此類功能性操作按鈕，要(yao)注意是否(fou)需(xu)要(yao)進行用(yong)戶是否(fou)登(deng)錄、用(yong)戶身份及相(xiang)關業務(wu)的要(yao)求(qiu)。

舉例：觸發立即訂(ding)購，結合當(dang)前(qian)系統(tong)的業務(wu)，需(xu)要(yao)進行：是(shi)否登錄、是(shi)否風(feng)險(xian)名(ming)單用戶、是(shi)否黑名(ming)單用戶、起訂(ding)規則是(shi)否滿(man)足、配送(song)區域是(shi)否滿(man)足等等規則校驗。

3.規則提示交互規范

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

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