3個方面分析:大屏后臺系統(tǒng)的可視化設計

3 評論 11650 瀏覽 74 收藏 6 分鐘

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

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

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

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

話不多說,進入正題。

一、產(chǎn)品背景

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

另一方面則需要控制EPG的內(nèi)容展示,包括對不同的業(yè)務線實現(xiàn)不同的編排管理、專題推薦、海報尺寸等日常運營工作。可視化作為最顯而易見的改變而又能夠讓運營快速上手的工具,則正中下懷。

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

此次可視化主要針對EPG的編排進行方案規(guī)劃,主要從以下三方面:

1. 日常選型可視化

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

2. 編排過程可視化

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

3. 編排結果可預覽

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

三、具體方案

1. 業(yè)務流程圖

2. 頁面設計

1)樣板選擇可視化:樣板選擇當用戶鼠標移動到對應的選項上時,出現(xiàn)對應的預覽圖,且選擇完成后自動展示對應的預覽圖;此操作完成運營即可可知專題的頁面樣式,后續(xù)只需要填寫具體的內(nèi)容。

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

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

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

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

 

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

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

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 可以加我的微信嘛?later_wang,希望一起交流

    來自江蘇 回復
  2. 學習了,感謝分享!

    來自浙江 回復
  3. 咱倆做的是同一方面的產(chǎn)品呀,歡迎您能添加我的564465243qq號,希望能和你一起討論更多的產(chǎn)品問題

    回復