發(fā)布時(shí)間:2024-08-04 09:38:47 瀏覽量:252次
本文提供了CMS系統(tǒng)的產(chǎn)品設(shè)計(jì)思路,落到實(shí)際項(xiàng)目中,還需要權(quán)衡實(shí)際需求和自定義配置程度之間的關(guān)系。
這幾天剛過(guò)去的3.8婦女節(jié),各大電商都推出了不同的促銷活動(dòng),借勢(shì)營(yíng)銷。電商平臺(tái)似乎無(wú)時(shí)無(wú)刻不在尋找各種營(yíng)銷話題,不斷創(chuàng)新。通過(guò)10多年的電商經(jīng)驗(yàn)積累,如今舉辦活動(dòng)已經(jīng)得心應(yīng)手,形式多樣化。
下面展示了我從淘寶、京東上找到的兩個(gè)活動(dòng)頁(yè)面,可以看到頁(yè)面的自定義程度很高,設(shè)計(jì)簡(jiǎn)潔大方。另一個(gè)稱呼是店鋪裝修或頁(yè)面配置,那么問(wèn)題來(lái)了,這樣一個(gè)自定義頁(yè)面如何配置?如何通過(guò)系統(tǒng)化的方式實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)配置。
淘寶、京東3.8節(jié)活動(dòng)頁(yè)
由于頁(yè)面動(dòng)態(tài)配置涉及內(nèi)容較多,因此決定分兩篇文章介紹,第一篇講述頁(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))的一部分,在電商領(lǐng)域,CMS系統(tǒng)有時(shí)會(huì)被限定為頁(yè)面動(dòng)態(tài)配置的功能。有時(shí)也被稱為“裝修”,店鋪裝修、頁(yè)面裝修或自定義新頁(yè)面。平臺(tái)看到的首頁(yè)管理和新建活動(dòng)頁(yè)面都屬于這個(gè)范疇。
在PC電商時(shí)代,頁(yè)面的自定義就像建樓一樣,增加一個(gè)樓層,每層可自定義內(nèi)容,例如商品、優(yōu)惠券、商品排名等。“淘寶旺鋪”就是店鋪裝修發(fā)展而來(lái)的一個(gè)行業(yè),淘寶店家可以選擇基礎(chǔ)模塊的內(nèi)容,編輯首頁(yè)或新建頁(yè)面,實(shí)現(xiàn)頁(yè)面的動(dòng)態(tài)配置。
淘寶的店鋪PC端自定義設(shè)置
在移動(dòng)互聯(lián)網(wǎng)時(shí)代,頁(yè)面動(dòng)態(tài)配置功能升級(jí),可以自定義的要素越來(lái)越多,頁(yè)面布局也更加靈活。用戶可以選擇添加ICON、banner、商品等模塊。
京東的手機(jī)裝修頁(yè)面
2.配置的產(chǎn)品邏輯
可以將頁(yè)面的動(dòng)態(tài)配置比作樂(lè)高積木,每個(gè)組件就像樂(lè)高積木,可以用它們搭建不同的樂(lè)高模型,類似地組裝成不同的動(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)惠券等,每種組件都可有多種樣式,選擇內(nèi)部展示的內(nèi)容或自定義。最常用的是鏈接,組件的展示樣式多樣,但點(diǎn)擊后跳轉(zhuǎn)頁(yè)面的選擇是統(tǒng)一的。例如:新的活動(dòng)頁(yè)面、商品詳情頁(yè)、商品聚合頁(yè)、購(gòu)物車、客服等。
基礎(chǔ)組件的定義和解析是自定義頁(yè)面的核心,不同的組件具有不同的功能,呈現(xiàn)不同類型的內(nèi)容。每個(gè)組件都需要單獨(dú)設(shè)計(jì),定義其規(guī)則和樣式。例如ICON、圖片輪播是簡(jiǎn)單的圖片展示,商品排名涉及的算法較為復(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í)預(yù)覽,實(shí)現(xiàn)自定義頁(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)容(樣式、圖片/商品、背景、鏈接等)。按照上圖的反向過(guò)程,即可解析出對(duì)應(yīng)自定義頁(yè)面的內(nèi)容。
首頁(yè)設(shè)置同樣如此,類似自定義頁(yè)面,可動(dòng)態(tài)設(shè)置首頁(yè)內(nèi)容,動(dòng)態(tài)添加自定義組件。目前大多數(shù)電商首頁(yè)都是動(dòng)態(tài)配置的,具備豐富的自定義內(nèi)容。
3.常用的配置組件
配置組件種類繁多,常見(jiàn)的有圖片輪播、商品推薦、商品分類、寶貝排行、圖標(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è)都是通過(guò)CMS配置實(shí)現(xiàn)的。
關(guān)于不同組件的設(shè)計(jì)和功能,下篇文章會(huì)做詳細(xì)介紹。
4.可自定義的一些要素
組件間有一些通用的自定義要素:
頁(yè)面動(dòng)態(tài)配置的整體產(chǎn)品邏輯基本介紹完畢,可以看出,雖然頁(yè)面動(dòng)態(tài)配置看起來(lái)復(fù)雜,但歸根結(jié)底是分為三個(gè)步驟,復(fù)雜度主要集中在基礎(chǔ)配置組件的豐富程度上。
雖然CMS系統(tǒng)的產(chǎn)品邏輯相對(duì)簡(jiǎn)單,但要實(shí)現(xiàn)高度自定義的頁(yè)面配置,需要高效的技術(shù)框架和強(qiáng)大的可擴(kuò)展性。當(dāng)瀏覽一個(gè)自定義頁(yè)面時(shí),系統(tǒng)需要逐步解析該頁(yè)面下的自定義組件內(nèi)容和要素,計(jì)算量巨大。
目前絕大部分電商公司的自定義頁(yè)面僅停留在初級(jí)階段,限于首頁(yè)和少數(shù)特殊頁(yè)面的自定義配置,自定義程度較低。本文提供了CMS系統(tǒng)的產(chǎn)品設(shè)計(jì)思路,實(shí)際應(yīng)用中,需權(quán)衡實(shí)際需求和自定義配置程度之間的關(guān)系。
熱門資訊
1. iPhone6的UI設(shè)計(jì)尺寸規(guī)范,原來(lái)如此重要!
想要了解iPhone6界面設(shè)計(jì)的尺寸規(guī)范嗎?這里為您詳細(xì)介紹iPhone6的UI設(shè)計(jì)尺寸規(guī)范,包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
2. 12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,助力你的創(chuàng)作之旅!
將為大家介紹12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個(gè)面向設(shè)計(jì)師的...
3. 移動(dòng)端UI設(shè)計(jì)中常見(jiàn)的5種APP界面類型,你get到了嗎?
通過(guò)介紹移動(dòng)端UI設(shè)計(jì)中的閃屏頁(yè)、引導(dǎo)頁(yè)、浮層引導(dǎo)頁(yè)、空白頁(yè)和首頁(yè)等5種APP界面類型,幫助大家更好地了解UI設(shè)計(jì)的基本知識(shí)
4. 10個(gè)免費(fèi)學(xué)習(xí)UI設(shè)計(jì)的網(wǎng)站 提升你的設(shè)計(jì)能力
怎樣可以提升你的UI設(shè)計(jì)能力!第一個(gè):站酷站酷想必是設(shè)計(jì)師都知道的一個(gè)網(wǎng)站,里面不止有UI設(shè)計(jì)的資源,還有其他設(shè)計(jì)的,不如:平面設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、字體...
5. 移動(dòng)端列表頁(yè)和表單頁(yè)設(shè)計(jì)秘訣:讓你的APP點(diǎn)擊率翻倍
在移動(dòng)端設(shè)計(jì)中,列表頁(yè)和表單頁(yè)是不可或缺的部分。一個(gè)好的列表頁(yè)和表單頁(yè)設(shè)計(jì)能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
6. 推薦10本適合UI設(shè)計(jì)師看的書籍,輕松掌握技能!
對(duì)于想要提高自己的設(shè)計(jì)能力和創(chuàng)造力的小白和UI設(shè)計(jì)師來(lái)說(shuō),這本書是一個(gè)很好的選擇。4.《設(shè)計(jì)的覺(jué)醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
7. 零基礎(chǔ)學(xué)UI設(shè)計(jì)要多久?培訓(xùn)完能拿多少工資?
探索零基礎(chǔ)UI設(shè)計(jì)培訓(xùn)的時(shí)長(zhǎng)與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程,以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會(huì)。
8. 物聯(lián)網(wǎng)APP UI設(shè)計(jì):創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗(yàn)
ui設(shè)計(jì)應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計(jì)過(guò)程中,應(yīng)盡量使用簡(jiǎn)潔的圖標(biāo)、文字和色彩,避免過(guò)多的視覺(jué)干擾。符合用戶習(xí)慣:ui設(shè)...
9. 武漢UI設(shè)計(jì)培訓(xùn)班費(fèi)用怎么樣?想學(xué)UI設(shè)計(jì)要多少錢?
想了解武漢UI設(shè)計(jì)培訓(xùn)班的費(fèi)用是多少嗎?不知道學(xué)UI設(shè)計(jì)要花多少錢?不妨看看這篇文章,了解UI設(shè)計(jì)培訓(xùn)班的學(xué)費(fèi)價(jià)格以及學(xué)習(xí)內(nèi)容。
10. 設(shè)計(jì)中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計(jì)應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計(jì)應(yīng)用。通過(guò)對(duì)色彩在早期文明社會(huì)中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計(jì)中的重要性以及新興技...
最新文章
同學(xué)您好!