偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

降本增效,攜程市場DIY商品卡片系統(tǒng)的設(shè)計與實現(xiàn)

開發(fā) 新聞
由于傳統(tǒng)商卡開發(fā)模式無法適應(yīng)當(dāng)前業(yè)務(wù)的快速發(fā)展,我們通過對開發(fā)中現(xiàn)有問題的分析,將UI和邏輯解耦設(shè)計了商卡系統(tǒng),通過對CSS模塊的抽象,設(shè)計了商卡各個字段組件。

一、背景

攜程各個BU各個時期都有不同營銷頁面,數(shù)量眾多,其中很重要的一塊是產(chǎn)品模塊,運營需求的產(chǎn)品卡片樣式眾多,各個BU展示字段差別巨大,無法利用通用樣式,因此如需新增卡片或字段,傳統(tǒng)做法是運營提需求給設(shè)計,再提需求給開發(fā),經(jīng)過需求評審,正式開發(fā),發(fā)布測試上線等等。

每次遇到大促活動或者接入新的業(yè)務(wù)方,都需要重新設(shè)計及開發(fā)商卡,而新的商卡大多只是新增一些換膚樣式,或個別字段,這卻需要開發(fā)人員多寫一套樣式代碼或新增字段樣式,同一個樣式應(yīng)用于不同的業(yè)務(wù)方也需要重新進(jìn)行開發(fā),極大地浪費了開發(fā)和設(shè)計資源。

在DIY商品卡片系統(tǒng)開發(fā)前,由于開發(fā)成本的限制,營銷頁面上常用的商品卡片樣式基本固定為十幾種,這在用戶看來缺乏新意,吸引力不足,從而在一定程度上影響了營銷頁面商卡的點擊量。

綜上所述,為解決傳統(tǒng)商卡存在的以下問題:

  • 即使樣式差別很小也需要重復(fù)開發(fā),耗時耗力。
  • 沒法多平臺統(tǒng)一卡片樣式,難于管理、復(fù)用性低。
  • 樣式固定、對用戶吸引力低導(dǎo)致點擊率及訂單轉(zhuǎn)化率低。

我們從UI和邏輯解耦,UI模板在平臺配置生成的角度考慮解決問題,設(shè)計了DIY商品卡片系統(tǒng)。

二、系統(tǒng)介紹

商卡系統(tǒng)將UI和邏輯進(jìn)行解耦,UI部分可在商卡配置后臺進(jìn)行配置,邏輯部分由開發(fā)人員處理后引入原子UI組件進(jìn)行最終渲染。

圖片

2.1 商卡配置后臺

UI在商卡配置后臺中由產(chǎn)品或者運營人員參照設(shè)計稿進(jìn)行自由拖拽式配置,并且給每個模塊綁定字段,同一套配置可以同時應(yīng)用于H5和React Native。

2.2 原子UI組件

原子UI組件是顆粒度更小的一種靜態(tài)組件(React, React Native),可以通過手動開發(fā)或配合“產(chǎn)品畫布”DIY這兩種方式為業(yè)務(wù)組件提供渲染模板,其他使用方也可以提供一些固定的數(shù)據(jù)(契約)直接渲染單卡片樣式。開發(fā)人員只需在組件內(nèi)引入原子組件的npm包,對業(yè)務(wù)邏輯進(jìn)行處理后把相應(yīng)字段的值傳給原子組件即可最終渲染真實產(chǎn)品信息。通過原子組件的模式,可以讓所有組件都“引用”線上的公共UI組件,直接應(yīng)用在各商卡的業(yè)務(wù)方,輕松實現(xiàn)商品卡片樣式的統(tǒng)一,避免了每個業(yè)務(wù)方重復(fù)開發(fā)同一套樣式。下圖為商卡搭建的部分樣式:

圖片

2.3 效果

  • 商品卡片樣式現(xiàn)已擺脫對開發(fā)人員的依賴,產(chǎn)品運營團隊可以直接通過拖拽配置的方式,輕松定制全新的樣式。
  • 當(dāng)同一商卡模板需要更新樣式時,僅需在商卡配置系統(tǒng)中進(jìn)行配置更新,便可實現(xiàn)一鍵跨端修改的效果,使所有使用該模板的業(yè)務(wù)方同步更新。
  • 針對需要定制展示內(nèi)容的業(yè)務(wù)方,我們提供了定制渲染能力,允許他們在整體樣式統(tǒng)一的基礎(chǔ)上,保留部分商卡內(nèi)容的獨特風(fēng)格。
  • 目前,我們已擁有400多張商卡和40多種常用模板,廣泛應(yīng)用于攜程營銷頁面、特賣、星球號以及攜程直播等多個場景。
  • 商卡樣式的更新?lián)Q代速度得到了極大提升,為用戶帶來更加新穎的體驗,從而增強了點擊欲望。經(jīng)過AB實驗測試,我們發(fā)現(xiàn)商卡系統(tǒng)搭建的樣式相較于過去固定的樣式,在點擊率上有了顯著提升。

三、系統(tǒng)設(shè)計

DIY商品卡片系統(tǒng)主要由2部分組成:商卡渲染和配置平臺。

圖片

3.1 DIY商品卡片渲染

DIY商品卡片可以通過以下三種渲染方式渲染,可以根據(jù)需求和配置難度選擇合適的方式:

1)字段的寬高和位置都固定渲染

渲染組件按照在配置平臺上的布局進(jìn)行商品卡片的渲染,字段之間沒有聯(lián)動設(shè)計,只能進(jìn)行簡單卡片的渲染。

渲染稍復(fù)雜的卡片時面臨的問題主要有以下兩個:

  • 同一行的兩個字段,不能根據(jù)前一個字段的寬度動態(tài)改變后一個字段的位置。如下圖,第一張圖中顯示正常,第二張圖中當(dāng)?shù)谝粋€字段評分變化為4分時,3797點評的位置還在原處,就會留有不合理的間距。

圖片

圖片

  • 卡片的高度也不能根據(jù)字段的長短和是否有缺失字段進(jìn)行動態(tài)調(diào)整,如下圖,缺失兩個標(biāo)簽后下方的字段并不會自動向上填補空白,卡片高度也不會相應(yīng)減小,在實際應(yīng)用場景中,很多商品卡片都不是固定高度,在展示商品時更傾向于緊湊的商品卡片布局,即卡片的高度要根據(jù)商品數(shù)據(jù)進(jìn)行動態(tài)調(diào)整。

圖片

圖片

2) 字段的寬高和位置通過數(shù)據(jù)進(jìn)行動態(tài)計算,依舊采用絕對布局的方式

  • 卡片橫向的動態(tài)布局

增加了行容器組件,將同一行的字段放進(jìn)同一個行容器中就可以讓字段位置不再依賴固定坐標(biāo)。

以React版渲染組件為例,行容器是一個flex布局的<div></div>,去掉放入行容器里的字段的絕對布局屬性,通過設(shè)置justify-content即可控制同一行字段的排列方式,自動補齊位置。

  • 卡片縱向的動態(tài)布局

獲取到商品數(shù)據(jù)和渲染數(shù)據(jù)后,先不對商品卡片進(jìn)行渲染。通過動態(tài)算法和canvas渲染對字段是否存在和字段長度進(jìn)行校驗,并根據(jù)校驗結(jié)果修改渲染數(shù)據(jù)。修改完成的渲染數(shù)據(jù)可以達(dá)到卡片高度和字段位置動態(tài)適應(yīng)的效果。

動態(tài)算法分為以下幾個步驟:

a. 當(dāng)字段所需高度增加或者減少時,檢查哪些字段的位置會受到當(dāng)前字段高度變化的影響,將受影響字段和需要進(jìn)行的調(diào)整收集起來。

b. 校驗所有字段后,對收集的字段對應(yīng)的渲染數(shù)據(jù)進(jìn)行調(diào)整。

c. 調(diào)整完成后開始根據(jù)渲染數(shù)據(jù)進(jìn)行商品卡片渲染。

d. 商品卡片渲染完成后檢測每個字段是否正確渲染,對于計算有偏差的字段調(diào)整,根據(jù)真實渲染情況再次進(jìn)行微調(diào)。

3)字段之間采用相對布局的方式進(jìn)行排列

對于縱向的動態(tài)布局,依賴通過商品數(shù)據(jù)和渲染數(shù)據(jù)進(jìn)行計算也會帶來一些問題,比如在渲染數(shù)據(jù)的調(diào)整上,調(diào)整后的商品卡片可能會和配置略有差異,有一些準(zhǔn)確性的問題。

為了達(dá)到和手工開發(fā)一樣的效果,增加了垂直方向的容器,稱為垂直容器。放入垂直容器的字段,會被調(diào)整為相對布局的定位方式,字段依次向下排列,不依賴定位屬性。

考慮到商品卡片普遍情況下都是采用比較規(guī)則的布局方式,所以使用行容器加垂直容器層層嵌套的方式可以實現(xiàn)去絕對布局的效果,所有字段都自動根據(jù)前面的字段動態(tài)調(diào)整位置。

4)總體渲染流程

接入方將數(shù)據(jù)處理為契約中的格式,傳給原子UI組件進(jìn)行渲染。商卡渲染時,通過場景號和版本從接口中讀取兩部分配置數(shù)據(jù):

  • 商卡總體配置JSON:包含有效期時間、卡片寬高、背景色、圓角等。
  • 商卡內(nèi)字段組件列表:包含每個字段組件的css和react native樣式以及一些聯(lián)動邏輯的配置。

當(dāng)獲取到的字段組件列表長度大于0時,我們開始循環(huán)處理列表內(nèi)的組件,不同的字段類型渲染成不同的組件,若遇到容器則進(jìn)行遞歸,直到容器中的內(nèi)容全都處理完。

圖片

3.2 配置平臺

考慮到解放開發(fā)人力,大部分布局不復(fù)雜的商卡可以由產(chǎn)品或者運營人員根據(jù)設(shè)計稿進(jìn)行配置。為了易于非開發(fā)人員操作和理解、提高配置效率,我們在以下幾個模塊的設(shè)計上增加了許多考量。

1)字段組件設(shè)計

目前支持的字段組件有普通字段、圖片、普通容器、垂直容器、橫向布局容器以及內(nèi)聯(lián)容器,這基本可以滿足設(shè)計稿的布局。普通容器主要存放需要浮動的元素。垂直容器和橫向容器其實就是flex布局的兩種形式。內(nèi)聯(lián)容器是為了解決行內(nèi)元素?fù)Q行問題,正常用橫向布局容器是沒辦法實現(xiàn)這個效果的,內(nèi)聯(lián)容器內(nèi)的元素我們一律轉(zhuǎn)成inline元素。內(nèi)聯(lián)容器主要應(yīng)用在如下圖所示的情況:套餐名稱超出一行需要換行,星級以及金鉆標(biāo)簽緊跟其后。

圖片

2)畫布交互設(shè)計

為簡化操作,我們將商卡系統(tǒng)設(shè)計成拖拽配置的形式,配置人員可以從左側(cè)可選字段組件中直接將組件拖進(jìn)畫布。若畫布中已配置了容器,則可以直接拖進(jìn)相應(yīng)容器中,字段間的順序以及位置也是可以直接進(jìn)行拖動調(diào)整,至于細(xì)微的位置調(diào)整,可以通過字段的樣式配置進(jìn)行調(diào)整。

3)字段樣式配置

下圖所示的樣式配置基本上就是簡單的css屬性,在浮動類型這有個特殊處理:浮動類型為浮動即positinotallow="absolute"時,距離上、右、底,左邊實際上代表top、right、bottom,left;浮動類型為不浮動即positinotallow="relative"時,距離上、右、底,左邊實際上代表 margin-top、margin-right、margin-bottom,margin-left,這樣可以減少配置項。在行容器和垂直容器的配置中,額外還有對齊方式的配置,對應(yīng)的是flex布局中justify-content和align-items,容器的子元素配置中也有壓縮和彈性比例系數(shù)的配置,即flex-shrink以及flex。目前的配置項幾乎可以達(dá)到還原設(shè)計稿的目的。

4)特殊問題處理

  • 問題:接口重復(fù)調(diào)用
  • 解決方案:發(fā)布訂閱

商品卡片的渲染schema獲取是在每一個商品卡片里進(jìn)行的,渲染商品列表時就會有重復(fù)調(diào)用接口的問題。

通過一些方式將接口請求次數(shù)盡可能減少很重要,但因為各商品卡片之間相互獨立,并不能在某一個商品卡片中知道頁面中都有哪些商品卡片模版ID,我們減少請求次數(shù)的方案也就是對于同一個商品卡片模版,只請求一次。

商品卡片在獲取到卡片模版ID后,檢查當(dāng)前ID是否已經(jīng)有請求到的數(shù)據(jù),有數(shù)據(jù)則直接從window上取對應(yīng)的數(shù)據(jù)進(jìn)行渲染,如果沒有則檢查該ID是否已經(jīng)被標(biāo)記為已經(jīng)在請求數(shù)據(jù),對于已經(jīng)在請求數(shù)據(jù)的情況,監(jiān)聽當(dāng)前數(shù)據(jù)請求成功的消息,數(shù)據(jù)請求成功后觸發(fā)請求的商品卡片會通過消息推送當(dāng)前模版ID的渲染schema,并將此數(shù)據(jù)存在window上。過程如圖中所示。

圖片

一些商品數(shù)據(jù)字段在攜程的應(yīng)用場景中也是比較固定的,對于這樣的一些商品數(shù)據(jù)字段,我們通過提供默認(rèn)樣式的方式減少配置時的工作量,配置人員只需要關(guān)心這樣的字段的位置、大小以及一些顏色方面的配置,不需要再關(guān)心如前綴圖標(biāo)、復(fù)雜組合形式等問題。

  • 問題:RN樣式差異
  • 解決方案:手動進(jìn)行兼容性處理

與h5不同的是,rn的樣式需要進(jìn)行單獨處理,大部分樣式處理都在商卡配置后臺中用“css-to-react-native“包進(jìn)行了轉(zhuǎn)換,某些特殊樣式由rn版原子組件單獨處理。例如:h5中的內(nèi)聯(lián)容器在rn中要用<Text><Text/>當(dāng)最外層容器,里面所有子容器也由<Text><Text/>包裹,這樣才能實現(xiàn)元素內(nèi)換行。其他還有漸變背景色用LinearGradient組件處理、背景圖片轉(zhuǎn)換成<Image/>標(biāo)簽、border拆分成borderWidth和borderColor來處理、下發(fā)的rn樣式適配屏幕寬高等等。

  • 問題:業(yè)務(wù)關(guān)聯(lián)
  • 解決方案:字段聯(lián)動

在一些場景下,商品卡片的數(shù)據(jù)之間也是有關(guān)聯(lián)關(guān)系的,我們提供了字段之間關(guān)聯(lián)的一些配置,如兩個字段互斥,永遠(yuǎn)只出現(xiàn)其中一個字段;兩個字段也可以是必須同時出現(xiàn)的關(guān)系,當(dāng)一個字段有值時另一個才出現(xiàn),比如有酒店LOGO時才展示酒店名稱;還有的時候字段需要根據(jù)另一個字段進(jìn)行樣式和展示形式的調(diào)整,比如在價格為0時商品卡片的搶購按鈕變?yōu)椤懊赓M”文案的純文字。

圖片

  • 問題:商卡展示不夠靈活
  • 解決方案:Render props

DIY商品卡片提供了自定義插槽,渲染時可以直接傳入一個JSX函數(shù)在配置位置渲染,例如:接入方傳入一個直播流播放器。這樣配置上更加靈活,DIY商品卡片組件也無需引入過多第三方組件。這樣的做法還帶來一個好處,留有一定的空間供開發(fā)人員介入,對于一些難以配置的數(shù)據(jù)展示形式,可以指定該數(shù)據(jù)的展示使用開發(fā)人員定制開發(fā)的數(shù)據(jù)展示模塊,開發(fā)和配置混合的形式極大地補充了DIY商品卡片的展示能力。

圖片

  • 問題:多點擊事件
  • 解決方案:自定義點擊事件函數(shù)

商卡有默認(rèn)的點擊事件,一般用于商品的跳轉(zhuǎn),若一張大卡內(nèi)有多個點擊區(qū)域,可以用透明蒙層配置在點擊區(qū)域的上方,并綁定相應(yīng)的字段。數(shù)據(jù)傳入時只需要傳入點擊事件對象數(shù)組,商卡會根據(jù)對象的name和綁定的字段名進(jìn)行匹配,將對象的函數(shù)綁定在對應(yīng)的字段上。通過name進(jìn)行匹配就無需在新增點擊事件時在代碼內(nèi)手動將點擊事件與字段進(jìn)行綁定,這帶來的好處是可以減少商卡本身的開發(fā)改動,更加靈活,只需要配置字段和傳入字段一一對應(yīng)即可。

圖片

  • 問題:卡片重復(fù)配置
  • 解決方案:父子商卡

對于一些重復(fù)度較高的商品卡片,將相同的部分保留作為公共部分,不同的部分抽取出來單獨配置是一種更合理的方式。

我們將這種模式的卡片配置稱為父子模塊,在配置時父模塊和子模塊沒有區(qū)別,兩種模塊都可以作為一個單獨的商品卡片進(jìn)行渲染。

在卡片上配置一個空間,定義該空間的key,在渲染商品卡片時將key對應(yīng)的子模塊ID和商品數(shù)據(jù)一起傳入父模塊,父模塊在配置在渲染時將子模塊渲染在預(yù)留空間里,即可實現(xiàn)兩個商品卡片的拼接。

圖片

四、商品卡片配置系統(tǒng)功能點

圖片

4.1 導(dǎo)入導(dǎo)出

導(dǎo)出數(shù)據(jù):導(dǎo)出該頁面上的商卡樣式,導(dǎo)出格式為txt文件,方便進(jìn)行備份和復(fù)用。

導(dǎo)入數(shù)據(jù):為了使配置操作更為簡單,可導(dǎo)入已有的商卡模板或部分字段組件素材,導(dǎo)入后在此模板上進(jìn)行增刪改操作,避免從0開始搭建。

4.2 版本切換

畫布可分為三個版本:線上版本、可編輯版本、歷史版本。線上版本為真實版本,歷史版本為上一次保存的線上版本。只有在可編輯版本內(nèi)才可以編輯,編輯后可以保存或者上線,只有選擇上線才能替換線上版本。

可編輯版本的設(shè)計可以將線上與編輯隔離,以免未編輯完成的畫布影響線上,同時歷史版本在一定程度上也是一種備份。

4.3 預(yù)覽

畫布提供h5版本或app版預(yù)覽,預(yù)覽的版本為當(dāng)前選中版本。預(yù)覽的商卡數(shù)據(jù)源分為兩種,一種是通用數(shù)據(jù)源,即樂高平臺內(nèi)針對不同業(yè)務(wù)方預(yù)先配置好的數(shù)據(jù)字段;另一種為自定義數(shù)據(jù),配置人員可以根據(jù)具體的需求以JSON的形式在樂高平臺內(nèi)新增數(shù)據(jù)字段。通過預(yù)覽,配置人員可以在商卡上線前看到實時效果,同時通過自定義數(shù)據(jù)也可模擬一些極端情況,如某些字段缺失后,卡片布局是否會變形等

4.4 卡片配置

圖片

為簡化配置流程,重復(fù)利用素材,商卡配置后臺支持其他商卡導(dǎo)出的素材txt文件以及設(shè)計稿導(dǎo)出的元素素材txt文件導(dǎo)入進(jìn)畫布。設(shè)計稿導(dǎo)出的為較小顆粒度的元素,如一個名稱字段、商品圖片,不包含容器類大顆粒度元素的導(dǎo)出。設(shè)計稿直出可以省略部分基礎(chǔ)配置,如:字號,字體顏色,圖片寬高,邊框及圓角等,配置人員只需專注于布局的配置即可,減少了基礎(chǔ)樣式的配置時間。其他商卡導(dǎo)出的素材可直接完美復(fù)制原效果,包括字段綁定的名稱等,這種方式導(dǎo)出的素材不止是小顆粒度的元素,也可以是整個容器甚至整張卡片。

除了直接導(dǎo)入,商卡系統(tǒng)有自帶的組件庫,可將其中的組件直接拖拽添加進(jìn)畫布。目前支持的組件有字段、圖片、背景方塊、橫向布局容器、垂直布局容器、內(nèi)聯(lián)容器和普通容器。通過選中畫布中的某個字段或容器可以配置其css屬性、調(diào)整容器內(nèi)子元素的順序和對齊方式等。除了樣式配置,還有字段屬性配置,字段要與對應(yīng)的字段名進(jìn)行綁定才能正常顯示,若畫布中配置了某個字段組件,但數(shù)據(jù)中沒有此字段名,最終上線后也是不展示此字段組件的,唯有一一對應(yīng)才能正常展示。

配置完成后可以先通過預(yù)覽查看實時效果,避免上線后出現(xiàn)問題。上線后接入方通過唯一的商卡場景號調(diào)用該商卡,按照契約內(nèi)容傳入字段即可成功渲染。

五、接入樣例

DIY商品卡片組件主要通過npm包的形式引入,按照契約傳遞數(shù)據(jù)即可渲染。

傳遞給組件的數(shù)據(jù)分為三類:

a. 商品信息

渲染商品卡片所必需的數(shù)據(jù),如酒店名、酒店星級、價格、主圖鏈接等商品信息。

b. 自定義處理邏輯

在我們的商品卡片中,可自定義的處理邏輯主要是在點擊事件中。組件支持對整個商品卡片的點擊方法進(jìn)行覆蓋,也支持對單個字段如酒店標(biāo)簽進(jìn)行添加點擊事件處理邏輯。

c. 定義渲染信息

對于商品卡片的渲染,提供了0%~100%程度的自定義渲染方式。0%,就是接入方開發(fā)人員只需要傳遞商品數(shù)據(jù),無需關(guān)心數(shù)據(jù)的渲染。100%,即是接入方開發(fā)人員可以將對應(yīng)商品數(shù)據(jù)的整個渲染完全覆蓋掉,DIY商品卡片組件使用render props的方式渲染接入方傳遞進(jìn)來的渲染方法。不到100%又高于0%程度的渲染,則是提供給接入方傳入指定商品數(shù)據(jù)的CSS以追加的形式修改原有CSS的能力。

圖片

六、總結(jié)

由于傳統(tǒng)商卡開發(fā)模式無法適應(yīng)當(dāng)前業(yè)務(wù)的快速發(fā)展,我們通過對開發(fā)中現(xiàn)有問題的分析,將UI和邏輯解耦設(shè)計了商卡系統(tǒng),通過對CSS模塊的抽象,設(shè)計了商卡各個字段組件。商卡系統(tǒng)這使得我們能夠以低代碼平臺的方式實現(xiàn)通用的樣式跨端解決方案,從而達(dá)到降低成本和提高效率的目的。這個系統(tǒng)同時表明,前端工程師不僅需要關(guān)注樣式和解決渲染問題,還可以通過對CSS、渲染機制、數(shù)據(jù)結(jié)構(gòu)和框架的深入理解來解決更廣泛的問題。

責(zé)任編輯:張燕妮 來源: 攜程技術(shù)
相關(guān)推薦

2024-09-30 08:47:07

數(shù)據(jù)分析降本增效覆蓋用戶

2024-03-27 12:31:54

數(shù)據(jù)分析降本增效促銷活動

2022-07-13 14:54:52

邊緣計算人工智能機器學(xué)習(xí)

2023-07-28 09:48:37

2022-06-02 14:39:11

混沌工程實驗微服務(wù)

2024-08-07 11:06:49

2024-09-20 08:20:20

2024-02-20 13:29:04

網(wǎng)絡(luò)安全研發(fā)

2015-09-30 14:48:37

中石化北明軟件華為

2023-12-25 15:38:55

2024-02-19 14:14:02

云計算人工智能大語言模型

2024-07-05 15:05:00

2023-10-12 19:05:13

研發(fā)管理降本增效AI

2023-09-25 15:13:57

數(shù)字化轉(zhuǎn)型

2022-03-28 14:31:01

Python編程語言工具包

2018-04-25 19:58:00

華為
點贊
收藏

51CTO技術(shù)棧公眾號