官方承諾：K60至尊版將會首批升級MIUI 15
全新的MIUI 15今天也有了消息，在官宣了K60至尊版將會搭載天璣9200+處理器和獨(dú)顯芯片X7的同時，Redmi給出了官方承諾，K60至尊重大更新首批升級，會首批推送MIUI 15。也就是說雖然
嗨, 大家好, 我是徐小夕, 之前分享了很多可視化低代碼相關(guān)的技術(shù)實(shí)踐和開源項(xiàng)目, 今天繼續(xù)和大家分享一下如何通過可視化搭建技術(shù)設(shè)計(jì)高效的企業(yè)營銷配置系統(tǒng).
隨著技術(shù)的飛速發(fā)展和行業(yè)高內(nèi)聚的競爭內(nèi)卷, 企業(yè)數(shù)字化轉(zhuǎn)型更加迫在眉睫. 很多傳統(tǒng)企業(yè)為了提高盈利能力, 在流量,轉(zhuǎn)化和口碑上投入了巨大的成本, 比如:
為了讓不同能力團(tuán)隊(duì)共享信息, 我們需要利用信息化技術(shù)來設(shè)計(jì)一套“粘合劑”, 讓“企業(yè)發(fā)動機(jī)”高效運(yùn)轉(zhuǎn). 這個“粘合劑” 就是我們說的數(shù)字(智)化營銷系統(tǒng). 它不會侵入到企業(yè)的具體業(yè)務(wù)中, 而是通過連接企業(yè)數(shù)字資產(chǎn), 實(shí)現(xiàn)對外品宣,獲客和需求反饋. 更多充當(dāng)?shù)氖情T戶和反饋系統(tǒng)的作用.
為了實(shí)現(xiàn)營銷數(shù)字化系統(tǒng), 我們一般會采用三種方案:
早期我們更多的企業(yè)營銷宣傳頁面大多采用這種模式, 面向營銷活動或者業(yè)務(wù)活動設(shè)計(jì)針對性的頁面. 但是隨著企業(yè)規(guī)模的壯大和活動需求規(guī)模化之后, 普通頁面開發(fā)意味著人力成本的線性增加, 我們需要通過“堆人”來實(shí)現(xiàn)業(yè)務(wù)需求.
從前端技術(shù)側(cè), 為了進(jìn)一步提高研發(fā)效率, 前端程序員不得不去思考如何復(fù)用的問題. 但是實(shí)際情況卻不容樂觀. 從我個人研發(fā)經(jīng)驗(yàn)的角度, 對定制型營銷場景開發(fā)我們可以采用如下措施提高研發(fā)效率:
我們可以在開發(fā)之初就定好一個可擴(kuò)展的技術(shù)方案, 針對活動/營銷頁面 以組件化的方式開發(fā), 然后將業(yè)務(wù)功能沉淀為可復(fù)用的技術(shù)資產(chǎn). 我們可以用vue / react等技術(shù)框架來搭建組件庫工程, 這塊我之前寫過一篇 從零搭建前端組件庫系統(tǒng) 的工程, 大家感興趣可以參考一下.
更近一步的, 任何頁面都離不開通用能力和埋點(diǎn)監(jiān)控, 如下:
這些 工具函數(shù) 和 業(yè)務(wù)sdk 未來會在不用需求頁面中反復(fù)使用, 所以我們也可以更進(jìn)一步的封裝和抽象。
通用腳手架可以讓前端團(tuán)隊(duì)更高效的復(fù)用技術(shù)資產(chǎn), 比如不同技術(shù)同事開發(fā)不同的需求時, 我們能使用前人積累的技術(shù)實(shí)踐, 省去了前期的調(diào)研和試錯成本. 一個成熟的前端腳手架包括:
當(dāng)然我們還可以參考市面上比較成熟的前端工程解決方案, 比如 umi, vite等。
雖然我們用定制代碼的方案無法很輕易的實(shí)現(xiàn)類似配置平臺或者搭建平臺的高可配性, 但是我們?nèi)匀豢梢栽O(shè)計(jì)一種偽配置化方案. 類似下面的配置：
{ "title": "第3期企業(yè)數(shù)字化宣講", "layout": { "header": [], "main": [], "footer": [] }, "share_icon": "微信分享icon", "share_desc": "Dooring, 讓頁面制作更簡單", "track": true // 是否啟用埋點(diǎn) "api_path": "https://xxxx.com"}然后在頁面中設(shè)計(jì)一套模版引擎, 來動態(tài)讀取json配置, 需要自定義的部分即可自定義開發(fā). 我們通過這種方式, 就可以用一套基礎(chǔ)模式, 快速生成自定義的頁面模版, 從而提高頁面搭建效率。
在接下來分享的方案中我會介紹具體的實(shí)現(xiàn)思路。
相信大部分互聯(lián)網(wǎng)企業(yè)都做過類似配置化平臺的項(xiàng)目, 營銷板塊也不例外. 當(dāng)然要做配置化平臺, 需要產(chǎn)品, 運(yùn)營和技術(shù)的通力協(xié)作, 也就意味著要脫離技術(shù)多方?jīng)Q策. 這要求產(chǎn)品和運(yùn)營需要對整體業(yè)務(wù)做一個通用性的抽象, 并通過技術(shù)人員轉(zhuǎn)化為可實(shí)現(xiàn)并被需求方低成本理解的配置平臺.
對于配置系統(tǒng)方案, 我之前寫過一篇文章《基于react/vue搭建一個通用的表單管理配置平臺》, 大家感興趣可以參考一下, 本質(zhì)上也是將抽象業(yè)務(wù)做統(tǒng)一封裝, 從而在技術(shù)層面實(shí)現(xiàn)按需渲染(配置式渲染):
具體展現(xiàn)形式如下:
關(guān)于動態(tài)配置表單的渲染模式, 我之前也提供了一種實(shí)現(xiàn)方案, 這也是目前大部分動態(tài)表單實(shí)現(xiàn)的一種模式(標(biāo)準(zhǔn)化SDL輸出)：
// 基礎(chǔ)模版數(shù)據(jù)const tpl = [ { label: '文本框', placeholder: '請輸入內(nèi)容', type: 'text', value: '', index: uuid(5) }, { label: '單選框', type: 'radio', option: [{label: '男', value: 0}, {label: '女', value: 1}], index: uuid(5) }, { label: '復(fù)選框', type: 'checkbox', option: [{label: '男', value: 0}, {label: '女', value: 1}], index: uuid(5) }, { label: '多行文本', placeholder: '請輸入內(nèi)容', type: 'textarea', index: uuid(5) }, { label: '選擇框', placeholder: '請選擇', type: 'select', option: [{label: '中國', value: 0}, {label: '俄羅斯', value: 1}], index: uuid(5) }, { label: '文件上傳', type: 'upload', index: uuid(5) }]// 模版渲染組件const tplMap = { text: { component: (props) => { const { placeholder, label } = props return <div className={styles.fieldOption}><span className={styles.fieldLabel}>{label}:</span><Input placeholder={placeholder} /></div> } }, textarea: { component: (props) => { const { placeholder, label } = props return <div className={styles.fieldOption}><span className={styles.fieldLabel}>{label}:</span><TextArea placeholder={placeholder} /></div> } }, radio: { component: (props) => { const { option, label } = props return <div className={styles.fieldOption}> <span className={styles.fieldLabel}>{label}:</span> <Radio.Group> { option && option.map((item, i) => { return <Radio style={radioStyle} value={item.value} key={item.label}> { item.label } </Radio> }) } </Radio.Group> </div> } }, checkbox: { component: (props) => { const { option, label } = props return <div className={styles.fieldOption}> <span className={styles.fieldLabel}>{label}:</span> <Checkbox.Group> <Row> { option && option.map(item => { return <Col span={16} key={item.label}> <Checkbox value={item.value} style={{ lineHeight: '32px' }}> { item.label } </Checkbox> </Col> }) } </Row> </Checkbox.Group> </div> } }, select: { component: (props) => { const { placeholder, option, label } = props return <div className={styles.fieldOption}> <span className={styles.fieldLabel}>{label}:</span> <Select placeholder={placeholder} style={{width: '100%'}}> { option && option.map(item => { return <Option value={item.value} key={item.label}>{item.label}</Option> }) } </Select> </div> } }, upload: { component: (props) => { return <div className={styles.fieldOption}> <span className={styles.fieldLabel}>{props.label}:</span> <Upload listType="picture-card" className="avatar-uploader" showUploadList={false} action="https://www.mocky.io/v2/5cc8019d300000980a055e76" > <div>+</div> </Upload> </div> } }}export { tpl, tplMap}當(dāng)然市場上也有比較成熟的開源方案, 比如 family, XRender等。
以上我們可以看到, 從定制化代碼到配置化方案, 技術(shù)架構(gòu)有了漸進(jìn)式升級, 接下來繼續(xù)分享一種更低成本的方案: 可視化搭建平臺.
可視化搭建平臺是一種建立在底層通用規(guī)則之上的通過拖拽+配置化來實(shí)現(xiàn)頁面生產(chǎn)能力的一種高效率解決方案. 它主要解決的問題如下:
所以我們迫切需要諸如低代碼/零代碼這樣的方案, 來解決上述問題. 目前國內(nèi)有上千家企業(yè)在接觸或者落地低代碼/零代碼方案, 我之前也開源了一個解決方案H5-Dooring, 用來解決頁面生產(chǎn)效能的問題：
當(dāng)然設(shè)計(jì)可視化搭建系統(tǒng)需要考慮更多系統(tǒng)化問題, 比如:
當(dāng)然并不是每家企業(yè)都有極高的要求, 所以我們需要針對企業(yè)實(shí)際需求和未來需求, 制定更合理的可視化解決方案. 關(guān)于可視化平臺的實(shí)現(xiàn)方案我之前也寫了很多文章和開源方案, 這里就不一一介紹了, 感興趣的朋友可以參考一下.
上面介紹了3種技術(shù)設(shè)計(jì)方案, 接下來我就以一個具體的案例, 來分享一下高效營銷落地方案。
轉(zhuǎn)盤抽獎營銷頁面是我們比較熟悉的一種運(yùn)營手段, 傳統(tǒng)開發(fā)中我們需要針對每一場活動開發(fā)獨(dú)立的業(yè)務(wù)代碼, 如果我們將營銷活動的規(guī)則抽象出來, 并封裝業(yè)務(wù)常用的抽獎組件, 并提供一定的配置靈活性, 這樣我們就能滿足大部分的營銷活動場景, 如下, 我們可以配置抽獎信息, 中獎比例, 中獎后的一系列交互配置：
對于企業(yè)的品宣場景, 我們也可以從可視化搭建平臺中找到解決方案, 我們只需要對接企業(yè)資源庫, 業(yè)務(wù)統(tǒng)配數(shù)據(jù)接口, 安全規(guī)范和數(shù)據(jù)上報模式, 我們就可以用可視化平臺從技術(shù)側(cè)轉(zhuǎn)化為業(yè)務(wù)側(cè)直接搭建, 近一步縮短溝通周期。
有關(guān)拖拽搭建方案, 這里筆者也分享幾個成熟方案：
本文鏈接：http://www.www897cc.com/showinfo-26-26556-0.html高效設(shè)計(jì)企業(yè)營銷系統(tǒng)的三種方案復(fù)盤
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
下一篇： Java11 的 G1 垃圾收集器
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號