定義

其實(shí)內(nèi)容創(chuàng)作平臺(tái)嚴(yán)格意義上來講，算是B端產(chǎn)品的運(yùn)營管理類型的產(chǎn)品（如果不清楚運(yùn)營管理類型的產(chǎn)品建議查看我之前文章 ），它主要依附于大型的C端產(chǎn)品，幫助這些產(chǎn)品去連接更多有價(jià)值的內(nèi)容

B端設(shè)計(jì)指南 – 產(chǎn)品類型

在內(nèi)容管理型產(chǎn)品當(dāng)中，主要是作為平臺(tái)方，提供給在平臺(tái)當(dāng)中創(chuàng)作的人們進(jìn)行使用
舉一個(gè)例子，我在 Youtube 上傳了一個(gè)視頻，我想要了解我這個(gè)視頻用戶的真實(shí)反饋，以及對(duì)于自己的作品進(jìn)行標(biāo)簽、標(biāo)題上的優(yōu)化，這樣，我便可以打開 Youtube Studio 進(jìn)行查看

而目前這類內(nèi)容創(chuàng)作平臺(tái)，就是提供給這些內(nèi)容創(chuàng)作者進(jìn)行使用，因此這類型的產(chǎn)品主要分為兩類：

• 視頻：Youtube、Bilibili、抖音、快手、西瓜視頻…
• 文字：微信公眾號(hào)、頭條號(hào)、知乎、站酷、語雀…

內(nèi)容創(chuàng)作平臺(tái)與CMS較為類似，CMS是 Content Management System 的縮寫，意思為“網(wǎng)站內(nèi)容管理系統(tǒng)”， 用來管理網(wǎng)站后臺(tái)，編輯網(wǎng)站前臺(tái)

比如我們會(huì)經(jīng)常聽到的 WordPress 就是一個(gè)非常典型的 CMS  產(chǎn)品，CMS大多數(shù)需要你自行搭建，而上方提到的內(nèi)容創(chuàng)作平臺(tái)，則是別人已經(jīng)提供好了對(duì)應(yīng)的基礎(chǔ)功能，你只需要使用即可（這個(gè)概念與 SaaS 有一些些雷同）

而內(nèi)容創(chuàng)作平臺(tái)更加垂類一些，主要針對(duì)的就是 作者投遞的管理平臺(tái)

業(yè)務(wù)

嚴(yán)格意義上來說，內(nèi)容創(chuàng)作平臺(tái)只會(huì)有一個(gè)角色，也就是內(nèi)容創(chuàng)作者，只是隨著平臺(tái)的不斷擴(kuò)大，后續(xù)會(huì)有很多運(yùn)營等相關(guān)職位，比如 微信公眾號(hào)，它本身只支持創(chuàng)作者進(jìn)入，隨著平臺(tái)規(guī)模不斷擴(kuò)大，逐漸演變成 三類固定角色 提供給用戶進(jìn)行綁定

當(dāng)然內(nèi)容創(chuàng)作平臺(tái)的整體設(shè)計(jì)，一定要與之前平臺(tái)固有風(fēng)格保持一直，這樣才能夠有統(tǒng)一的風(fēng)格

頁面

在整個(gè)內(nèi)容創(chuàng)作平臺(tái)當(dāng)中，會(huì)有很多非常典型的頁面，作為設(shè)計(jì)師，我們就來看看典型頁面如何下手

1、內(nèi)容編輯頁

在內(nèi)容創(chuàng)作平臺(tái)當(dāng)中，必須要提供的功能便是內(nèi)容上傳，因?yàn)闊o論是文章、又或是視頻，都需要?jiǎng)?chuàng)作者進(jìn)行上傳、編輯
因此作為設(shè)計(jì)師，我們首先應(yīng)該關(guān)注的便是這個(gè)內(nèi)容編輯頁的使用體驗(yàn)

比如文章類的產(chǎn)品中，我們需要去編輯內(nèi)容排版，那就一定會(huì)用到富文本編輯器。富文本編輯器目前會(huì)分為兩個(gè)流派，一類就是傳統(tǒng)的 頂部編輯器 ，一類是 Block 編輯器

頂部編輯器：其實(shí)這個(gè)我不知道專業(yè)的術(shù)語，根據(jù)外形隨意起的名字

Block 編輯器：畢竟我是深度 Notion+飛書的用戶，如果對(duì)這個(gè)感興趣，可以去到文末留言，我們之后單獨(dú)出一篇文章來講

不過目前，內(nèi)容創(chuàng)作平臺(tái)的產(chǎn)品都是按照基本的 富文本頂部編輯器的方式來進(jìn)行，Block 更多只在筆記軟件當(dāng)中出現(xiàn)

這里分享一些開源的富文本編輯器，很多B端產(chǎn)品可以讓前端直接使用

https://www.wangeditor.com/

https://summernote.org/

https://dhtmlx.com/docs/products/dhtmlxRichText/

再比如視頻類的產(chǎn)品，就主要圍繞 上傳視頻、設(shè)置封面、標(biāo)題、等內(nèi)容進(jìn)行展開，其實(shí)功能上都大同小異

因此你會(huì)發(fā)現(xiàn)，內(nèi)容編輯部分，大家的功能都會(huì)比較趨同（因?yàn)闊o論是 視頻還是文字媒介，因?yàn)榍芭_(tái)系統(tǒng)對(duì)于內(nèi)容的要求都基本一致，因此如果想要了解前后臺(tái)系統(tǒng)的邏輯關(guān)系，其實(shí)可以從基礎(chǔ)的內(nèi)容創(chuàng)作平臺(tái)入手去做分析）

2、數(shù)據(jù)查看頁

數(shù)據(jù)查看頁在內(nèi)容創(chuàng)作平臺(tái)非常重要，因?yàn)榻^大多數(shù)內(nèi)容創(chuàng)作者都會(huì)非常關(guān)心自己的內(nèi)容數(shù)據(jù)情況，可以通過數(shù)據(jù)，來為自己的內(nèi)容方向進(jìn)行合理的規(guī)劃
可以把數(shù)據(jù)查看頁比作是一個(gè)小型的 數(shù)據(jù)分析 產(chǎn)品，區(qū)別的是 內(nèi)容創(chuàng)作平臺(tái) 的數(shù)據(jù)查看，是已經(jīng)提供了默認(rèn)的分析維度與指標(biāo)，你只能通過篩選去查看數(shù)據(jù)之間的關(guān)系，這里就不再贅述，給大家看看不同產(chǎn)品的數(shù)據(jù)查看頁，了解它們的設(shè)計(jì)方式

3、其他頁面

當(dāng)然這類產(chǎn)品還會(huì)涉及到比如 常見話題、熱門話題、素材庫 等等…  完整的圖片內(nèi)容我就打包放在圖庫平臺(tái)上，大家可以進(jìn)入查看

花瓣：www.huaban.com/user/youthce

語雀：www.yuque.com/youthce/pic/

原文鏈接：CE青年Youthce（公眾號(hào)）

作者：CE青年

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》內(nèi)容創(chuàng)作平臺(tái)的解析與分享

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司