云南企業(yè)網(wǎng)站建設(shè)500元全包（內(nèi)容管理系統(tǒng)的特點有哪些）內(nèi)容管理 開源，
Sue前面分享的兩篇文章，介紹了內(nèi)容管理系統(tǒng)（CMS）關(guān)于內(nèi)容生產(chǎn)和內(nèi)容過濾的部分。那么被生產(chǎn)出來并通過過濾的內(nèi)容，如何呈現(xiàn)給我們的內(nèi)容消費者呢？
我們都知道，在客戶端上的開發(fā)實現(xiàn)，版本一旦發(fā)布了出去，如果有東西需要調(diào)整，那就要再修改代碼，就算是再小的改動，都需要經(jīng)過測試后再更新，而每一次的更新本身又存在可能出現(xiàn)各種各樣問題的風(fēng)險如果我們能提供動態(tài)可配置的能力，通過模板化來實現(xiàn)內(nèi)容的呈現(xiàn)，那就可以減少開發(fā)的成本，同時也能夠更高效地進行不同產(chǎn)品/運營方案的對比試驗。
由此可知，頁面動態(tài)配置是內(nèi)容管理系統(tǒng)（CMS）關(guān)于如何更靈活地呈現(xiàn)內(nèi)容的解決方案。1. 頁面拆解&組成部分在這個“潮流眼鏡專場”頁面，Sue截了三張圖，我們來一一拆解，看看這個頁面都有什么：
一個帶著黑超的王俊凱（圖片）一堆優(yōu)惠券（優(yōu)惠券領(lǐng)取/限定店鋪優(yōu)惠券使用入口模塊）“超級大牌”（知名品牌的店鋪入口模塊）“必買清單”（熱銷/推薦商品的購買入口模塊）……像這樣一個動態(tài)化的頁面，我們可以按以下3層次來拆分：
頁面——卡片——組件。頁面，指的是整體可滑動頁面實體卡片，指的是頁面內(nèi)可按行劃分的一個一個獨立區(qū)塊（又稱為”樓層”）組件，指的是卡片內(nèi)部一個獨立的、業(yè)務(wù)級別的單元三者之間的層級關(guān)系見下圖：
2. 實現(xiàn)原理弄清楚了動態(tài)頁面的組成部分，那他們仨是如何聯(lián)合起來工作的，最終呈現(xiàn)出我們所看到的頁面內(nèi)容呢？當(dāng)用戶訪問某頁面，到最后呈現(xiàn)出完整的頁面內(nèi)容，主要是通過以下三步完成的：一系列的初始化（包括初始化卡片庫和組件庫、數(shù)據(jù)解析器、布局框架）
數(shù)據(jù)的解析（包括解析卡片和組件的類型，解析卡片和組件的基本樣式）對頁面進行渲染（根據(jù)卡片提供的布局信息進行布局、根據(jù)組件提供的組件信息獲取組件內(nèi)容）概括的說，就是：首先按照布局去解析出各組件位置，然后再去解析組件的內(nèi)容（樣式、圖片、背景、鏈接等），最終解析出對應(yīng)的自定義頁面內(nèi)容。
3. 要點說明在聊動態(tài)化頁面具體的配置流程之前，想和大家再多聊聊，Sue在學(xué)習(xí)和工作的過程中，總結(jié)和整理一些要點，然后通過這些來加深對整體的理解3.1 組件它不是指顯示的一行小字、一個明顯扎眼的按鈕，也不是一張帥哥美女的明星圖片。
它是需要提前定義好，并寫入到框架（代碼）中的而組件定義的標準就是業(yè)務(wù)化，要求是能承擔(dān)一定業(yè)務(wù)能力的最小復(fù)合單元這也基本可以說是作為PM定義需求的一大通用原則每個組件都需要單獨設(shè)計，定義其規(guī)則和樣式組件的基本樣式：組件背景、組件外邊距/內(nèi)邊距、組件的寬高比，除此之外還可能有額外的自定義樣式如：字體顏色、字體大小、組件間的空隙，對應(yīng)的跳轉(zhuǎn)鏈接等等。
不同的組件有不同的功能，表示不同類型的內(nèi)容組件的常見種類：搜索欄、公告、列表導(dǎo)航、富文本、標題欄、按鈕組圖文、按鈕組文字、單張圖片、圖片輪播、優(yōu)惠券等等3.2 卡片卡片負責(zé)對組件進行布局卡片不需要布局模板，只需要描述卡片的類型即可，卡片的類型也是注冊在框架里的。
對卡片的描述，可分成：標題、布局和樣式等其中最重要的部分是：布局，因為它包含了內(nèi)嵌的組件模型，卡片的布局就是對包含的組件來布局常見的布局方式：流式布局、瀑布流布局、吸頂布局、懸浮布局、輪播布局等卡片的布局描述也是聲明式的，但只聲明布局方式，不提供布局細節(jié)的描述。
卡片的基本樣式：卡片背景、卡片外邊距/內(nèi)邊距、卡片內(nèi)組件間距、列數(shù)3.3 頁面動態(tài)化頁面指的是布局動態(tài)化，是通過布局嵌套組件的形式搭建整個頁面一個頁面內(nèi)嵌套了多個卡片，一個卡片又嵌套了多個組件4. 步驟概要。
明確了頁面動態(tài)化的實現(xiàn)原理，那我們?nèi)绻枰渲眠@么一個頁面，需要提前準備什么，做什么？這里分前、中、后三個環(huán)節(jié)，來跟大家聊聊配置工作所涉及到的流程4.1 開始配置前1）明確目的和重點要配置的這個頁面，運營目的是什么？。
通過頁面，想呈現(xiàn)的內(nèi)容是哪些？內(nèi)容不同，要重點突出的信息是什么？2）確認已有設(shè)計和是否需要補充已有的布局樣式和組件，是否可以滿足配置需求，進而達到運營目的？卡片庫（布局樣式）和組件庫有無需要補充新增的？
4.2 進行配置時1）選擇/創(chuàng)建頁面總體來說，頁面需要支持動態(tài)化配置的情況有兩種：一是，對固有的頁面進行選擇性的配置（選擇的標準會在文章最后和大家具體探討）二是，依據(jù)具體運營目的，通常是活動或?qū)ｎ}類的運營需求，創(chuàng)建一個新的頁面，對頁面進行自定義（不需要單獨為了這個新頁面去開發(fā)）。
2）選擇卡片、然后選擇組件進行布局排版根據(jù)頁面想呈現(xiàn)的內(nèi)容和內(nèi)容想突出的信息，在已有的卡片庫（布局樣式）和組件庫，選擇合適的布局樣式和組件3）組件配置（定義樣式、配置信息）這一步會涉及到一系列的樣式和細節(jié)的配置，大到頁面呈現(xiàn)的氛圍，小到組件之間的間距等等。
具體的樣式和信息的配置項，要依據(jù)具體的需求來定義（有興趣的小伙伴可以深入地對具體的行業(yè)和產(chǎn)品、內(nèi)容類型去學(xué)習(xí)了解，推薦“電商行業(yè)的店鋪裝修”）切忌盲目地追求配置的靈活性，細分出過多的、非必要的配置項，這會導(dǎo)致研發(fā)的成本變高，同時導(dǎo)致配置工作變繁瑣，應(yīng)盡量控制配置項的數(shù)量，盡量做到自動獲取信息，提供系統(tǒng)的操作性。
4.3 完成配置后1）效果預(yù)覽——確認發(fā)布2）預(yù)覽提交——審核發(fā)布預(yù)覽，是必須要有的一個步驟Sue在這一步說的預(yù)覽，是指在頁面配置完成后最終效果的預(yù)覽，還可能會涉及到時間維度（比如對雙十一零點活動頁面提前設(shè)置定時發(fā)布的預(yù)覽）。
另外還有一種預(yù)覽，是指在配置過程中的邊配邊看，主要是針對樣式細調(diào)的效果預(yù)覽（比如組件換不同的背景顏色）讓操作人員在完成配置后，在進行發(fā)布前，對頁面的配置效果先進行預(yù)覽，以確保最終呈現(xiàn)的頁面滿足需求和符合要求。
預(yù)覽完效果后，進行提交，等待審核發(fā)布，則可以依據(jù)公司/團隊具體的情況，進行步驟細化通常，初創(chuàng)型公司由于運營團隊的組建較為精簡，常見的流程是：運營人員完成配置后，預(yù)覽一下效果，確認沒問題就操作發(fā)布了沒有中間審核的這一步，預(yù)覽到發(fā)布，通常是同一個人。
但在對內(nèi)容管理有明確的流程和規(guī)范，并且人員配備完善的公司，流程通常是第2）種這中間涉及到多個不同的角色，以及角色背后的權(quán)限細分有的人負責(zé)配置，預(yù)覽后提交審核，對呈現(xiàn)效果負責(zé)有的人負責(zé)審核，最終確認發(fā)布，對整體進行把控。
所以具體的流程是：效果預(yù)覽——提交審核——進行審核——確認發(fā)布。附：整體的配置步驟說明圖
5. 需求提取明確了頁面動態(tài)化的實現(xiàn)原理，以及配置頁面的工作流程，那接下來就是PM最熟悉的內(nèi)容了：提取需求，完成產(chǎn)品設(shè)計產(chǎn)品設(shè)計和后期不斷迭代優(yōu)化，都應(yīng)該始終圍繞以下幾個方向：如何使工作更高效如何使協(xié)作更順暢。
如何使管理更智能如何使權(quán)責(zé)更明確如何使風(fēng)險更可控支持快速試驗，用數(shù)據(jù)來指導(dǎo)決策基于實現(xiàn)原理、配置流程和產(chǎn)品設(shè)計方向，Sue提煉出了以下6大需求點：（1）管理組件庫管理：不支持直接創(chuàng)建一個新的組件，只能在系統(tǒng)已有的組件庫里面選擇。
卡片庫管理：（同組件庫）不支持直接創(chuàng)建但可直接調(diào)用除此之外，還有一個很重要的功能：需支持一鍵上下線卡片（在出現(xiàn)問題時立即可做線上的緊急處理）頁面管理：需支持一鍵上下線頁面（同樣是應(yīng)急處理的功能支持）、版本通配（可解決新版本發(fā)布時的配置效率）。
權(quán)限管理：對應(yīng)組織結(jié)構(gòu)或業(yè)務(wù)線，做頁面、操作和數(shù)據(jù)等的權(quán)限細分變更記錄：讓每次變更都有記錄可查，防止線上數(shù)據(jù)被隨意更改（2）編輯（配置）在配置不同類型的頁面時，提供對應(yīng)的配置功能：1）對固有頁面的配置選擇頁面
選擇卡片、定義卡片樣式、配置卡片內(nèi)容（選擇組件）選擇組件、定義組件樣式、配置組件內(nèi)容配置更多頁面信息：定義生效時間、失效時間、頁面名稱2）對創(chuàng)建頁面的配置創(chuàng)建頁面選擇卡片、定義卡片樣式、配置卡片內(nèi)容（選擇組件）
選擇組件、定義組件樣式、配置組件內(nèi)容配置更多頁面信息：定義生效時間、失效時間、頁面名稱3）除此之外，還應(yīng)該提供復(fù)制創(chuàng)建等滿足高效配置的功能可批量復(fù)制地創(chuàng)建頁面可批量復(fù)制地創(chuàng)建卡片（3）預(yù)覽配置預(yù)覽：對應(yīng)的是配置過程中的效果查看，主流的交互是拖動到相應(yīng)位置，設(shè)置內(nèi)容后實時預(yù)覽。
白名單預(yù)覽：對應(yīng)的是預(yù)發(fā)布狀態(tài)，在此狀態(tài)下，可通過白名單預(yù)覽，提前查看效果時間機器預(yù)覽：通過時間機器調(diào)整時間，可預(yù)覽對應(yīng)在將來某個時間的效果因為不同的時間點，生效的數(shù)據(jù)不一樣，確保配置符合要求和需求（4）審核
這個過程和一般的申請審核大致相同，需要支持和滿足的需求點應(yīng)包含但不僅限：待審核記錄的處理通知待審核記錄的呈現(xiàn)審核操作（效果、內(nèi)容的展現(xiàn)、功能的使用等——預(yù)覽功能）審核記錄審核記錄：通過、不通過（原因告知、修改指導(dǎo)）
（5）發(fā)布通常完成配置后，不建議直接發(fā)布，以免存在問題的配置，直接影響到線上用戶到了發(fā)布階段，有以下兩個發(fā)布功能是應(yīng)當(dāng)去滿足的：預(yù)發(fā)布：增加預(yù)發(fā)布狀態(tài)下，是為了進一步檢查和確認配置效果，降低出現(xiàn)問題的風(fēng)險。
定時發(fā)布：支持設(shè)置所配置的頁面僅在特定時間生效由此，可提前完成相關(guān)的配置、審核等工作臨時配置容易導(dǎo)致問題出現(xiàn)，這同樣也是為了使風(fēng)險更可控（6）ABtest俞軍老師在書中分享過：由于信息的不完備性，所以所有自以為經(jīng)過審慎考察做出的判斷和行為，客觀上說都是在試錯。
同樣我們所設(shè)計的內(nèi)容管理系統(tǒng)（CMS），也應(yīng)該具備這樣的試錯能力支持頁面、卡片級別的ABtest能力可將每一次的配置變更做成實驗變更，進行ABtest在小范圍內(nèi)先試驗變更的效果，最后根據(jù)數(shù)據(jù)來做決策（Sue前段時間剛好梳理和搭建了所在項目的ABtest系統(tǒng)，有專門深入去學(xué)習(xí)和做了一些總結(jié)。
后面也想和大家來聊聊，在這里就算先預(yù)告一下下）附需求點梳理腦圖（但還是那句話：需要結(jié)合具體情況去定義，設(shè)計出來的產(chǎn)品才符合需求）
6. 思路&理念最后來總結(jié)一下，內(nèi)容管理系統(tǒng)（CMS）通過動態(tài)化頁面對內(nèi)容進行呈現(xiàn)的基本思路和設(shè)計理念基本思路：內(nèi)容管理系統(tǒng)（CMS）通過動態(tài)化頁面對內(nèi)容進行呈現(xiàn)的基本思路：分離內(nèi)容的管理和頁面的設(shè)計頁面設(shè)計存儲在模板里，而內(nèi)容存儲在數(shù)據(jù)庫中。
當(dāng)用戶請求頁面時，各部分聯(lián)合動態(tài)生成一個標準的頁面設(shè)計理念：內(nèi)容管理系統(tǒng)（CMS）通過動態(tài)化頁面對內(nèi)容進行呈現(xiàn)的設(shè)計理念：具備足夠的靈活性只有足夠的靈活，才能滿足運營日常的各種需求而靈活性則體現(xiàn)在：布局能力動態(tài)變化，定義清楚最少要有多少種布局樣式內(nèi)置在框架里；
動態(tài)能力粗粒度化，定義清楚有多少組件要注冊到框架里；組件業(yè)務(wù)化，組件要求是能承擔(dān)一定業(yè)務(wù)能力的最小復(fù)用單元；組件可復(fù)用，需要對同類型的組件具備回收復(fù)用的能力7. 產(chǎn)品思考我們都明白頁面動態(tài)化配置對運營、營銷等方面重要意義，一方面確確實實是在減少重復(fù)性、不必要的開發(fā)工作，避免了開發(fā)資源的爭奪和漫長的排期等待。
但另一方面，也靈活的配置方案、便捷的配置工具，對技術(shù)的要求就相對較高了如何在這兩個方面更好地平衡，就是產(chǎn)品需要思考的問題了有必要所有的頁面都支持動態(tài)配置嗎？哪些頁面需要支持？哪些頁面無需支持？哪些頁面不宜支持？
判斷的標準和依據(jù)是什么呢？關(guān)于這幾個問題，Sue思考的答案是：并不是所有的頁面都需要支持動態(tài)配置，沒這個必要符合以下條件的頁面需要支持動態(tài)化配置：用戶流量集中的頁面（例如首頁）用戶停留時間越長的頁面（例如首頁）。
用戶頻繁使用的頁面（例如搜索頁）營銷空間和價值大的頁面（例如專題活動頁）符合以下條件的頁面無需支持動態(tài)化配置：不是交易流程必經(jīng)的頁面流（例如分類頁；需要說明一下：交易不特指下單付費，對內(nèi)容的消費本質(zhì)上也算一個交易）
不是用戶頻繁使用（例如幫助頁、設(shè)置頁）符合以下條件的頁面不宜支持動態(tài)化配置：一般有固定的格式展示信息（例如個人中心頁）關(guān)鍵信息對頁面轉(zhuǎn)化有直接影響，用戶只關(guān)注關(guān)鍵信息，故需突出且固定位置展示，培養(yǎng)用戶習(xí)慣，不能隨意變動（例如詳情頁）
以上，就是Sue對于內(nèi)容管理系統(tǒng)CMS在內(nèi)容呈現(xiàn)環(huán)節(jié)的總結(jié)與分享真正到開展對應(yīng)工作的時候，要思考的遠不止本文所分享的這一些，希望Sue所分享的內(nèi)容能起到一個拋磚引玉的作用堅持更文分享個人一些思考與想法，使自己保持輸入轉(zhuǎn)化、總結(jié)輸出的學(xué)習(xí)習(xí)慣。
如有不成熟、不正確的地方，希望有小伙伴指點賜教歡迎討論，共同進步本文由 @素小白 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載題圖來自 Unsplash，基于 CC0 協(xié)議