大屏就是以海信為代表的互聯(lián)網(wǎng)電視，一方面各大電視機(jī)廠商作為硬件載體，當(dāng)然也少不了以優(yōu)酷、愛奇節(jié)、騰訊為代表應(yīng)用終端。那大屏后臺(tái)系統(tǒng)的如何進(jìn)行可視化設(shè)計(jì)呢？

鑒于某些復(fù)雜、未知也許是緣分或者叫命中注定的機(jī)緣巧合之下，從一枚前端產(chǎn)品經(jīng)理炮灰式的轉(zhuǎn)變成了后臺(tái)產(chǎn)品經(jīng)理，所幸得之我幸，幸不辱命。

世界杯雖然冷門一個(gè)接一個(gè)，但是話題熱度還是蹭的盆滿缽滿。球賽我是沒看完整，但賽場(chǎng)的大型Hisense廣告還是在鏡頭下成功引起了我的注意，畢竟是世界杯官方指定電視。

而我說所說的大屏就是這種以海信為代表的互聯(lián)網(wǎng)電視，一方面各大電視機(jī)廠商作為硬件載體，當(dāng)然也少不了以優(yōu)酷、愛奇節(jié)、騰訊為代表應(yīng)用終端，此外還有各種廣告服務(wù)、數(shù)據(jù)服務(wù)、云服務(wù)也在一步步靠近。

話不多說，進(jìn)入正題。

一、產(chǎn)品背景

視頻媒資系統(tǒng)作為日常運(yùn)營的支撐管理系統(tǒng)，一方面要承擔(dān)大量的視頻媒資管理任務(wù)，包括視頻入庫、CDN分發(fā)、碼流控制、視頻上線下等基本管理任務(wù)。

另一方面則需要控制EPG的內(nèi)容展示，包括對(duì)不同的業(yè)務(wù)線實(shí)現(xiàn)不同的編排管理、專題推薦、海報(bào)尺寸等日常運(yùn)營工作?？梢暬鳛樽铒@而易見的改變而又能夠讓運(yùn)營快速上手的工具，則正中下懷。

二、產(chǎn)品方案規(guī)劃

此次可視化主要針對(duì)EPG的編排進(jìn)行方案規(guī)劃，主要從以下三方面：

1. 日常選型可視化

EPG的頁面基本上可以統(tǒng)一看作是以專題形式存在，而每個(gè)專題有多個(gè)區(qū)塊組成（每一行、每一種樣式都可以認(rèn)為是一個(gè)區(qū)塊），而每個(gè)區(qū)塊則一個(gè)或者多個(gè)坑口組成。如果每一個(gè)區(qū)塊會(huì)在多種場(chǎng)景下使用，則認(rèn)為其具備可復(fù)用屬性，即可把這個(gè)區(qū)塊視作一個(gè)樣板，而這個(gè)樣板就是我們說的需要可視化的選型。

2. 編排過程可視化

專題搭建過程中需要涉及到內(nèi)容選擇、圖片更換、看點(diǎn)描述、樣板選擇，而每一步都實(shí)時(shí)同步選擇的結(jié)果，并以真實(shí)的專題形式存在，即可認(rèn)為我們實(shí)現(xiàn)了所見即所得，即編排過程的可視化。

3. 編排結(jié)果可預(yù)覽

每一個(gè)專題搭建完成后，由于可能需要同時(shí)復(fù)用到多個(gè)站點(diǎn)，但是每個(gè)站點(diǎn)又存在略微差異 ，在不用記憶檢查的情況下，實(shí)現(xiàn)對(duì)每一個(gè)站點(diǎn)的不同效果的預(yù)覽則是我們所希望得到的有效的預(yù)覽。

三、具體方案

1. 業(yè)務(wù)流程圖

2. 頁面設(shè)計(jì)

1）樣板選擇可視化：樣板選擇當(dāng)用戶鼠標(biāo)移動(dòng)到對(duì)應(yīng)的選項(xiàng)上時(shí)，出現(xiàn)對(duì)應(yīng)的預(yù)覽圖，且選擇完成后自動(dòng)展示對(duì)應(yīng)的預(yù)覽圖；此操作完成運(yùn)營即可可知專題的頁面樣式，后續(xù)只需要填寫具體的內(nèi)容。

2）樣板選擇內(nèi)容可視化：直接在樣板的各個(gè)坑口進(jìn)行內(nèi)容選擇或者修改，如下圖。標(biāo)題用文字點(diǎn)擊可編排標(biāo)題加鉛筆符提示，而空白的坑口則用“+”加點(diǎn)擊添加內(nèi)容文本引導(dǎo)用戶需要選擇內(nèi)容。

當(dāng)內(nèi)容選擇完成后即可看到如下圖所示的頁面，已基本等同于上線的視覺。且為了方便用戶進(jìn)行其它操作，會(huì)在海報(bào)圖上用相關(guān)的圖形標(biāo)識(shí)來提示，如設(shè)置了禁用，在海報(bào)下方會(huì)有禁用符； 如設(shè)置了定時(shí)，會(huì)有鬧鐘提示符，如有其它通用操作則在海報(bào)右上角折疊起來引導(dǎo)用戶操作。

3）審核發(fā)布可視化：當(dāng)用戶上述編輯完成后點(diǎn)擊下一步，即可到達(dá)審核預(yù)覽發(fā)布的頁面。即可在當(dāng)前通過選擇站點(diǎn)來實(shí)現(xiàn)不同站點(diǎn)的預(yù)覽，也可以依據(jù)預(yù)覽結(jié)果標(biāo)注審核狀態(tài)，如果審核通過，則可以直接通過點(diǎn)擊發(fā)布在當(dāng)前頁面完成發(fā)布操作。

以上主要圍繞日常運(yùn)營的可視化來描述，截圖中的其它功能就不多講了，寫得比較簡單，有興趣的可以再交流哦！

本文由 @Yicye 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議