電商后臺(tái)產(chǎn)品設(shè)計(jì):頁(yè)面動(dòng)態(tài)配置(CMS系統(tǒng))(一)

這兩天3.8婦女節(jié)脓恕,各大電商又開始不斷推出促銷活動(dòng),借勢(shì)營(yíng)銷史简。電商平臺(tái)仿佛不愿意放過任一個(gè)可以作為營(yíng)銷話題的日子乃秀,不斷推陳出新。經(jīng)過10多年的電商經(jīng)驗(yàn)積累,現(xiàn)在做起活動(dòng)來游刃有余跺讯,豐富多樣枢贿。
下圖是我從淘寶、京東上取的兩個(gè)活動(dòng)頁(yè)面刀脏,可以看出頁(yè)面自定義程度很高萨咕,美觀大方。另一種叫法叫做店鋪裝修或頁(yè)面配置火本,那么問題來了危队,這樣一個(gè)自定義頁(yè)面怎么配置?怎樣通過系統(tǒng)化的方式實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)配置钙畔。

淘寶茫陆、京東3.8節(jié)活動(dòng)頁(yè)

由于頁(yè)面動(dòng)態(tài)配置的內(nèi)容較多,所以打算分兩篇長(zhǎng)文介紹擎析,第一篇先講頁(yè)面動(dòng)態(tài)配置的整體產(chǎn)品邏輯簿盅,第二篇詳細(xì)描述各組件的功能,一直到組裝之后的解析揍魂。

1.頁(yè)面動(dòng)態(tài)配置的前生今世

頁(yè)面動(dòng)態(tài)配置是CMS系統(tǒng)(內(nèi)容管理系統(tǒng))的一部分桨醋,在電商行業(yè),CMS系統(tǒng)有時(shí)會(huì)局限用作頁(yè)面動(dòng)態(tài)配置的功能现斋。有時(shí)也叫作“裝修”喜最,店鋪裝修、頁(yè)面裝修庄蹋、自定義新頁(yè)面瞬内。平臺(tái)見到的首頁(yè)管理和新建活動(dòng)頁(yè)面都屬于此類范疇。
在PC電商時(shí)代限书,頁(yè)面的自定義比作蓋樓虫蝶,添加一個(gè)樓層,每層可以自定義內(nèi)容倦西,譬如商品能真、優(yōu)惠券、商品排名等扰柠》垲恚“淘寶旺鋪“就是店鋪裝修發(fā)展出來的一門生意,淘寶店家可以選擇基礎(chǔ)模塊的內(nèi)容耻矮,編輯首頁(yè)或新建頁(yè)面秦躯,動(dòng)態(tài)配置頁(yè)面忆谓。

淘寶的店鋪PC端自定義設(shè)置

在移動(dòng)互聯(lián)網(wǎng)時(shí)代裆装,頁(yè)面動(dòng)態(tài)配置功能升級(jí),可以自定義的要素越來越多,在頁(yè)面布局上也更為靈活哨免【セ睿可以選擇添加ICON、banner琢唾、商品等模塊载荔。

京東的手機(jī)裝修頁(yè)面

2.配置的產(chǎn)品邏輯

可以把頁(yè)面的動(dòng)態(tài)配置比作樂高玩具,每一個(gè)組件就像樂高積木采桃,可以用它搭建不同的樂高玩具懒熙,就類似組裝成不同的動(dòng)態(tài)頁(yè)面。我將頁(yè)面的動(dòng)態(tài)配置分為3步:組件→ 位置+內(nèi)容 → 動(dòng)態(tài)頁(yè)面普办,如下圖工扎。

頁(yè)面動(dòng)態(tài)配置

2.1 基礎(chǔ)組件
組件是動(dòng)態(tài)頁(yè)面的基礎(chǔ),提供給用戶編輯具體展示的信息衔蹲。有許多類型的組件:圖片輪播肢娘、ICON、優(yōu)惠券等舆驶,每種組件都可以有多個(gè)不同的樣式橱健,選擇內(nèi)部展示的內(nèi)容或者自定義。用的最常見的就是鏈接沙廉,組件顯示樣式雖然多樣拘荡,但是點(diǎn)擊之后通往的頁(yè)面選擇庫(kù)卻是共通的。例如:新的活動(dòng)頁(yè)面撬陵、商品詳情頁(yè)俱病、商品聚合頁(yè)、購(gòu)物車袱结、客服等等亮隙。
基礎(chǔ)組件的定義和解析是自定義頁(yè)面的核心,不同的組件有不同的功能垢夹,表示不同類型的內(nèi)容溢吻。每個(gè)組件都需要單獨(dú)設(shè)計(jì),定義其規(guī)則和樣式果元。 例如ICON促王、圖片輪播就是簡(jiǎn)單的圖片展示,商品排名對(duì)應(yīng)的算法較為復(fù)雜而晒,需要實(shí)時(shí)去取動(dòng)態(tài)排名蝇狼。

2.2 位置+內(nèi)容
有了組件之后,用戶在設(shè)置或者系統(tǒng)在解析的時(shí)候倡怎,首先要確定組件在自定義頁(yè)面中的位置迅耘。位置可以稱為“樓層”贱枣,每個(gè)頁(yè)面的各樓層可以定義名稱、設(shè)置背景颤专、配置內(nèi)容纽哥,目前最主流的交互是拖動(dòng)組件到相應(yīng)的位置,設(shè)置內(nèi)容之后實(shí)時(shí)預(yù)覽栖秕,自定義頁(yè)面動(dòng)態(tài)可視化春塌。

2.3 動(dòng)態(tài)頁(yè)面
對(duì)于整個(gè)動(dòng)態(tài)頁(yè)面,需要定義生效時(shí)間簇捍、結(jié)束時(shí)間只壳、活動(dòng)頁(yè)面名稱等基礎(chǔ)信息。設(shè)置之后可生成相應(yīng)的鏈接進(jìn)行預(yù)覽暑塑。
動(dòng)態(tài)頁(yè)面是由不同的組件內(nèi)容構(gòu)成吕世,首先按照各組件位置去解析,然后再去解析組件的內(nèi)容(樣式梯投、圖片/商品命辖、背景、鏈接等)分蓖。按照上圖的反向流程走尔艇,就能解析出對(duì)應(yīng)的自定義頁(yè)面內(nèi)容。
首頁(yè)設(shè)置也是相同么鹤,類似自定義頁(yè)面终娃,可動(dòng)態(tài)設(shè)置首頁(yè)內(nèi)容,動(dòng)態(tài)添加自定義組件蒸甜。目前絕大部分電商首頁(yè)都是動(dòng)態(tài)配置棠耕,有著豐富的自定義內(nèi)容。

3.常用的配置組件

配置組件有許多種柠新,常見的圖片輪播窍荧、 商品推薦、商品分類恨憎、 寶貝排行蕊退、圖標(biāo)(ICON)這幾種形式,其實(shí)是富文本憔恳、 客服瓤荔、優(yōu)惠券、滿減活動(dòng)钥组、滿贈(zèng)活動(dòng)输硝、自定義區(qū)域、商品搜索程梦、文字点把、公告橘荠、倒計(jì)時(shí)、Tab組件(頂部愉粤、底部)。
豐富的自定義組件可以實(shí)現(xiàn)各式各樣的活動(dòng)頁(yè)面拿撩,前面舉例的京東衣厘、淘寶活動(dòng)頁(yè)都是通過CMS配置實(shí)現(xiàn)。
至于不同的組件設(shè)計(jì)和功能压恒,下篇再詳細(xì)講解影暴。

4.可自定義的一些要素

組件之間有些通用的自定義要素:

  • 背景顏色/圖片;
  • 組件之間的空隙;
  • 對(duì)應(yīng)鏈接。點(diǎn)擊組件對(duì)應(yīng)的跳轉(zhuǎn)頁(yè)面探赫,這些都是通用的:其他活動(dòng)頁(yè)型宙、商品詳情、商品聚合頁(yè)伦吠、店鋪主頁(yè)妆兑、購(gòu)物車、在線客服毛仪、積分商城搁嗓、購(gòu)物券、外鏈等等箱靴。


    豐富的自定義頁(yè)面

頁(yè)面動(dòng)態(tài)配置的整體產(chǎn)品邏輯基本已經(jīng)介紹完畢腺逛,可以了解到,頁(yè)面動(dòng)態(tài)配置看似復(fù)雜衡怀,理順之后發(fā)現(xiàn)其實(shí)就分為三個(gè)步驟棍矛,絕大部分的復(fù)雜度增加只是基礎(chǔ)配置組件的豐富。

雖然CMS系統(tǒng)產(chǎn)品邏輯簡(jiǎn)單抛杨,但是頁(yè)面要做到較高的自定義配置程度够委,需要技術(shù)框架的高效率和較強(qiáng)的可擴(kuò)展性。在瀏覽一個(gè)自定義頁(yè)面時(shí)怖现,系統(tǒng)要逐步去解析該頁(yè)面下的自定義組件內(nèi)容和要素慨绳,運(yùn)算量很大。
目前絕大部門電商公司的自定義頁(yè)面僅僅停留在一個(gè)初級(jí)階段真竖,限于首頁(yè)和少數(shù)特殊頁(yè)面的自定義配置脐雪,而且自定義程度較低。本文提供了CMS系統(tǒng)的產(chǎn)品設(shè)計(jì)思路恢共,落到實(shí)際項(xiàng)目中战秋,還需要權(quán)衡實(shí)際需求和自定義配置程度之間的關(guān)系。

如果想了解詳細(xì)描述各組件的功能讨韭,一直到組裝之后的解析脂信,可關(guān)注我癣蟋,下篇將重點(diǎn)講解。


碎碎戀產(chǎn)品(公眾號(hào))
電商產(chǎn)品經(jīng)理狰闪,主導(dǎo)多業(yè)務(wù)產(chǎn)品更新迭代疯搅,負(fù)責(zé)過從0到1的產(chǎn)品設(shè)計(jì)、研發(fā)埋泵、上線幔欧。
專注于電商產(chǎn)品設(shè)計(jì)、商業(yè)分析以及后臺(tái)挖坑丽声。
每周持續(xù)更新產(chǎn)品相關(guān)的文章礁蔗,感興趣可關(guān)注我,歡迎勾搭交流雁社!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末浴井,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子霉撵,更是在濱河造成了極大的恐慌磺浙,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,284評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件徒坡,死亡現(xiàn)場(chǎng)離奇詭異屠缭,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)崭参,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門呵曹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人何暮,你說我怎么就攤上這事奄喂。” “怎么了海洼?”我有些...
    開封第一講書人閱讀 164,614評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵跨新,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我坏逢,道長(zhǎng)域帐,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,671評(píng)論 1 293
  • 正文 為了忘掉前任是整,我火速辦了婚禮肖揣,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘浮入。我一直安慰自己龙优,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,699評(píng)論 6 392
  • 文/花漫 我一把揭開白布事秀。 她就那樣靜靜地躺著彤断,像睡著了一般野舶。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上宰衙,一...
    開封第一講書人閱讀 51,562評(píng)論 1 305
  • 那天平道,我揣著相機(jī)與錄音,去河邊找鬼供炼。 笑死一屋,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的劲蜻。 我是一名探鬼主播陆淀,決...
    沈念sama閱讀 40,309評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼考余,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼先嬉!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起楚堤,我...
    開封第一講書人閱讀 39,223評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤疫蔓,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后身冬,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體衅胀,經(jīng)...
    沈念sama閱讀 45,668評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,859評(píng)論 3 336
  • 正文 我和宋清朗相戀三年酥筝,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了滚躯。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,981評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡嘿歌,死狀恐怖掸掏,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情宙帝,我是刑警寧澤丧凤,帶...
    沈念sama閱讀 35,705評(píng)論 5 347
  • 正文 年R本政府宣布,位于F島的核電站步脓,受9級(jí)特大地震影響愿待,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜靴患,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,310評(píng)論 3 330
  • 文/蒙蒙 一仍侥、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧鸳君,春花似錦访圃、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽况脆。三九已至,卻和暖如春批糟,著一層夾襖步出監(jiān)牢的瞬間格了,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評(píng)論 1 270
  • 我被黑心中介騙來泰國(guó)打工徽鼎, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留盛末,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,146評(píng)論 3 370
  • 正文 我出身青樓否淤,卻偏偏與公主長(zhǎng)得像悄但,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子石抡,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,933評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,139評(píng)論 25 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)檐嚣、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,103評(píng)論 4 62
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理啰扛,服務(wù)發(fā)現(xiàn)嚎京,斷路器,智...
    卡卡羅2017閱讀 134,657評(píng)論 18 139
  • 你問我自由是一種什么樣的心理感覺隐解,我說不上來鞍帝,但我能清楚的感覺到生活中的不自由對(duì)人心靈壓抑的傷害之大 就像有人說...
    vigorously閱讀 281評(píng)論 0 2
  • 我 下午提早回辦公室,現(xiàn)場(chǎng)沒那么多事煞茫,也莫名就想早點(diǎn)回去帕涌。一到辦公室,就被老板叫去续徽,他坐在沙發(fā)上蚓曼,讓我坐在他旁邊。...
    梅子Mey閱讀 278評(píng)論 0 5