【功能重構(gòu)實(shí)操】以虎撲APP球隊(duì)頁(yè)重構(gòu)后臺(tái)搭建為例
編輯導(dǎo)讀:虎撲APP作為一個(gè)以體育賽事和日常生活為主的社區(qū)網(wǎng)站,一直頗受用戶喜歡。本文作者以虎撲APP球隊(duì)頁(yè)為例,對(duì)其功能重構(gòu)進(jìn)行分析,希望對(duì)你有幫助。
一、需求背景
公司足球業(yè)務(wù)終止與A的數(shù)據(jù)供應(yīng)合作關(guān)系,之后和B達(dá)成合作關(guān)系,因兩個(gè)供應(yīng)商提供的接口字段不同且面臨接口java化的背景,所以決定直接重構(gòu)底層數(shù)據(jù)和前端樣式:其中主要需求包括球員詳情頁(yè)、球隊(duì)詳情頁(yè)重構(gòu)以及修正后臺(tái)搭建。
二、前端頁(yè)面重構(gòu)思路
1)我們能給的不一定是用戶想要的
首先整理了球隊(duì)頁(yè)整體的DAU、PV、瀏覽時(shí)長(zhǎng)、前向來(lái)源等數(shù)據(jù)以及各個(gè)子tab下的點(diǎn)擊、訪問(wèn)、曝光情況。以PV為標(biāo)準(zhǔn):新聞tab>賽程tab>球員tab>數(shù)據(jù)tab>資料tab>轉(zhuǎn)會(huì)tab、以CTR為標(biāo)準(zhǔn):新聞tab>球員tab>轉(zhuǎn)會(huì)tab>數(shù)據(jù)tab>賽程tab>資料tab。球隊(duì)詳情頁(yè)產(chǎn)生之初,出發(fā)點(diǎn)是我們能提供什么樣的能力和服務(wù),所以逐漸把頁(yè)面做的繁冗復(fù)雜,同時(shí)維護(hù)資源跟不上導(dǎo)致用戶反饋激增,這次重構(gòu)就是需要獲取到各層級(jí)的用戶數(shù)據(jù),并根據(jù)數(shù)據(jù)去推測(cè)用戶需要的是什么以化繁為簡(jiǎn)。(球隊(duì)頁(yè)結(jié)構(gòu)見下圖)
2)求同存異定產(chǎn)品設(shè)計(jì)原則
這次主要是選擇了騰訊體育、懂球帝、PP體育、直播吧、球會(huì)體育、雷速體育做為競(jìng)品來(lái)拆解,會(huì)發(fā)現(xiàn)各家對(duì)球隊(duì)頁(yè)的子tab拆分都無(wú)外乎是從資料、數(shù)據(jù)、陣容、賽程、資訊和轉(zhuǎn)會(huì)維度出發(fā)(我理解這是用戶瀏覽球隊(duì)頁(yè)最基礎(chǔ)的需求,也是理解成本最小的一種分類方式),但不同的是各家對(duì)球隊(duì)頁(yè)的header以及子tab中放置的字段與排列樣式有著不同的想見解,組件間的交互也迥然不群(例如切換到賽程tab,錨點(diǎn)定位在哪個(gè)賽程卡片)。球隊(duì)頁(yè)作為一個(gè)信息聚合頁(yè)面,它既需要具備數(shù)據(jù)展示和查詢的工具屬性,也需要具備新聞和討論的社區(qū)屬性。
所以這次的重構(gòu)也是以此為切入點(diǎn),需要貫徹以下兩個(gè)原則:高效的數(shù)據(jù)信息展示效率,流暢清晰的交互。
3)用戶是重構(gòu)的重要方向?qū)Ш?/strong>
第三點(diǎn)還是一個(gè)老生常談的方法就是去收集用戶反饋,我一直認(rèn)為現(xiàn)在市面上沒有幾家公司可以做到產(chǎn)品給什么,用戶就用什么。大多數(shù)的我們還是需要去“認(rèn)真聆聽”用戶的吐槽并服務(wù)好他們。用戶罵得越兇,罵得越多,重構(gòu)的方向就越明確,也就越證明重構(gòu)本身是正確的。
例如用戶會(huì)“告訴”我:右上角的關(guān)注按鈕有什么用?我點(diǎn)了可以干嘛?也沒有toast提醒我?專區(qū)的入口這么小,我哪知道可以點(diǎn)?點(diǎn)擊排名會(huì)跳轉(zhuǎn)至二級(jí)頁(yè)面,為什么點(diǎn)身價(jià)就不會(huì)跳呢?怎么有的球隊(duì)頁(yè)新聞都沒有,我明明看到有很多新聞報(bào)道這個(gè)俱樂部?為什么中超球隊(duì)改名后詳情頁(yè)的新聞就沒有了?為什么有些新聞里的球隊(duì)標(biāo)簽點(diǎn)擊不會(huì)跳轉(zhuǎn)至球隊(duì)詳情頁(yè)?有這么多問(wèn)題是因?yàn)榍蜿?duì)頁(yè)單獨(dú)來(lái)看是很簡(jiǎn)單,但是把它放在整個(gè)App中的時(shí)候就會(huì)發(fā)現(xiàn)他的鏈路之長(zhǎng),牽一發(fā)而動(dòng)全身,有一些問(wèn)題是bug,有一些問(wèn)題是當(dāng)初的產(chǎn)品設(shè)計(jì)問(wèn)題,所以我們?cè)谥貥?gòu)的時(shí)候很重要的一個(gè)任務(wù)就是需要去處理掉它們。
以之前的資料頁(yè)為例,當(dāng)時(shí)它的定位是對(duì)球隊(duì)基本信息的整合,包括成立時(shí)間、所在地區(qū)等和榮譽(yù)記錄,用戶瀏覽的情景無(wú)非是忘了或者不了解這個(gè)球隊(duì)的基礎(chǔ)信息,然后來(lái)看一眼就走了,然后再對(duì)應(yīng)之前拉過(guò)的數(shù)據(jù)也發(fā)現(xiàn)這個(gè)tab的用戶瀏覽數(shù)也只有兩千多,從數(shù)據(jù)上來(lái)看其實(shí)是完全可以把這個(gè)tab下線或者合并至其他tab中。
但是在新版中(見下圖,左舊右新)我們賦予了這個(gè)tab新的定位-“主會(huì)場(chǎng)”。從錨點(diǎn)上來(lái)看,老版默認(rèn)定位在新聞tab,新版定位在主頁(yè)tab;從內(nèi)容上來(lái)看,新版的主頁(yè)主要包含了四個(gè)模塊:第一是賽程卡,因?yàn)槲覀兿M脩艨梢栽谶M(jìn)來(lái)的第一眼就可以實(shí)時(shí)且重要的信息,具體賽程卡顯示哪一場(chǎng)比賽以及樣式就不展開來(lái)說(shuō)了,其中的邏輯也是相對(duì)復(fù)雜; 第二個(gè)模塊是轉(zhuǎn)入轉(zhuǎn)出球員,老版本中轉(zhuǎn)會(huì)是有個(gè)單獨(dú)tab的,但是瀏覽的用戶數(shù)過(guò)低,所以我會(huì)判斷這個(gè)板塊并沒有持續(xù)瀏覽需求,只會(huì)在交易前后的那段時(shí)間激增,所以把這模塊按照轉(zhuǎn)入球員和轉(zhuǎn)出球員區(qū)分展示,用戶既可以在主頁(yè)中看到最近轉(zhuǎn)會(huì)的球隊(duì)信息,也可以點(diǎn)擊頭像進(jìn)入球員頁(yè)獲取更多的信息。第三四個(gè)板塊才是之前老版的基本資料和榮譽(yù),同時(shí)在展示上也做了一些更快獲取信息的樣式變動(dòng)。
包括數(shù)據(jù)tab的改動(dòng),都是圍繞著“高效的數(shù)據(jù)信息展示效率”原則來(lái)進(jìn)行的,將數(shù)據(jù)項(xiàng)劃分為不同的類型,關(guān)鍵球員的展示效率提升了超過(guò)50%同時(shí)兼具美感。這次重構(gòu)中,除了解決部分歷史問(wèn)題和反饋,同時(shí)也沒忘了做一些“秀肌肉”的功能,例如賽季和賽事的篩選,用戶可以看到球隊(duì)的歷史數(shù)據(jù)。
三、后臺(tái)搭建思路
1)后臺(tái)搭建的背景
首當(dāng)其沖就是我們?yōu)槭裁匆ゴ罱ㄟ@個(gè)后臺(tái),原因主要是新接入一套數(shù)據(jù)源的時(shí)候,我們無(wú)法去預(yù)估實(shí)際數(shù)據(jù)出問(wèn)題的頻率,直接去聯(lián)系數(shù)據(jù)源修改接口的時(shí)間鏈路太長(zhǎng),若是故障型的bug出現(xiàn)是來(lái)不及解決的,開發(fā)也不可能時(shí)刻聯(lián)系改庫(kù),特別是國(guó)際足球的比賽都集中在凌晨的情景下,所以我們需要一套運(yùn)營(yíng)和產(chǎn)品可以直接修改球隊(duì)詳情頁(yè)的后臺(tái),這也就要求了這個(gè)后臺(tái)需要在前端上線之前完成。
2)后臺(tái)架構(gòu)梳理
因?yàn)檫@個(gè)后臺(tái)的搭建是做在已有的大后臺(tái)中,所以省去了很多用戶、權(quán)限、節(jié)點(diǎn)的工作量。我這邊只需要梳理足球通用配置后臺(tái)如何實(shí)現(xiàn)球隊(duì)詳情頁(yè)的修改生效。(見下圖)
在梳理的時(shí)候,可以清楚的看到修改某個(gè)數(shù)據(jù),可以有三種方法:第一是供應(yīng)商直接修改接口中的字段、第二是服務(wù)端在吐給前端的接口中改庫(kù);第三就是這次要實(shí)現(xiàn)的通過(guò)后臺(tái)改庫(kù)從而修改前端頁(yè)面,在第一版的設(shè)計(jì)中,賦予了后臺(tái)數(shù)據(jù)添加、修改和屏蔽的功能。但是在此思考后會(huì)發(fā)現(xiàn)這個(gè)設(shè)計(jì)缺少了最重要的一步:數(shù)據(jù)覆蓋的控制。有一種情況是數(shù)據(jù)源給球隊(duì)的賽程接口中提供錯(cuò)了比分,但是這個(gè)接口是每秒輪詢一次,我們?cè)诤笈_(tái)改動(dòng)的是服務(wù)端自己的接口,即使在后臺(tái)把這個(gè)比分字段該為正確的之后也會(huì)被數(shù)據(jù)源給的錯(cuò)誤字段給覆蓋,于是這個(gè)后臺(tái)等于沒用。
3)后臺(tái)搭建規(guī)劃
雖然后臺(tái)設(shè)計(jì)的時(shí)候,定義的是一個(gè)后臺(tái)。但是拆解任務(wù)的時(shí)候會(huì)發(fā)現(xiàn)一期完成這個(gè)龐大的工作是不太可能的,除了工作量大這個(gè)原因外,還有一個(gè)更重要的原因就是數(shù)據(jù)也有不同的類型,對(duì)不同類型的數(shù)據(jù)處理方式是不唯一的,我們把整個(gè)后臺(tái)拆為了三期來(lái)完成。
第一期主要是完成靜態(tài)數(shù)據(jù)的后臺(tái)管理,這一部分的字段主要是球隊(duì)的基礎(chǔ)信息,例如球隊(duì)中文簡(jiǎn)稱、logo、成立時(shí)間、所在地區(qū)等,我們對(duì)其的要求是僅初始化同步一次,后續(xù)的管理需要人力來(lái)維護(hù),主要原因也是因?yàn)樽闱蚯蜿?duì)數(shù)量極多且是相對(duì)靜態(tài)的,這樣只需要人力維護(hù)一次,以及球隊(duì)改名需要少量的維護(hù)就可以完成,而不再受數(shù)據(jù)源影響。
第二期是完成對(duì)動(dòng)態(tài)數(shù)據(jù)的后臺(tái)管理,例如賽程、球員球隊(duì)榜和積分榜等數(shù)據(jù),這部分?jǐn)?shù)據(jù)更新頻率普遍在1min-10mins,這也代表著不能和靜態(tài)數(shù)據(jù)一樣靠人工維護(hù)。那這一塊我們做數(shù)據(jù)覆蓋控制問(wèn)題的時(shí)候,還需要確認(rèn)一個(gè)問(wèn)題是:新覆蓋的數(shù)據(jù)需要【先審后發(fā)】還是【先發(fā)后審】。先審后發(fā)的實(shí)現(xiàn)方式是對(duì)比前后兩個(gè)字段,若有不一樣的時(shí)候,在釘釘群和后臺(tái)發(fā)送提醒信息,運(yùn)營(yíng)需要點(diǎn)擊通過(guò)或不通過(guò)來(lái)確認(rèn)是否需要覆蓋,這樣保證的是準(zhǔn)確性;先發(fā)后審是供應(yīng)商的數(shù)據(jù)先覆蓋,運(yùn)營(yíng)再去處理同步錯(cuò)誤的字段,這樣保證的是實(shí)時(shí)性。
第三期是完成實(shí)時(shí)數(shù)據(jù)的后臺(tái)管理,實(shí)時(shí)數(shù)據(jù)主要包括的是直播間的數(shù)據(jù)。例如機(jī)器直播和比賽數(shù)據(jù)更新,這一塊的策略是先審后發(fā)是為了符合直播間最基礎(chǔ)的時(shí)效性,所以這塊需要在后臺(tái)設(shè)置一鍵切換為人工直播,為了以防直播間數(shù)據(jù)大面積出錯(cuò)的情況。
四、踩雷和反思
反思一:做需求切勿囫圇吞棗
- 以繁化簡(jiǎn)。因?yàn)楹笈_(tái)涉及到足球所有相關(guān)數(shù)據(jù)頁(yè)面,一個(gè)迭代(兩周)完不成,跟不上前端上線的速度,應(yīng)該挑重要字段/容易出錯(cuò)字段的管理先上線。
- 謹(jǐn)防需求遺漏。需求一大,就容易出現(xiàn)產(chǎn)品規(guī)劃遺漏東西,開發(fā)理解需求文檔的效率也很低,所以盡量拆分為數(shù)個(gè)小需求分期進(jìn)行開發(fā)。
- 針對(duì)性后臺(tái)設(shè)計(jì)。數(shù)據(jù)本身有特性,有靜態(tài)數(shù)據(jù),例如國(guó)籍、出生日期等;有動(dòng)態(tài)數(shù)據(jù),例如積分榜,助攻榜等;有實(shí)時(shí)數(shù)據(jù),例如直播間的數(shù)據(jù)統(tǒng)計(jì),不同特性的數(shù)據(jù)要求的同步機(jī)制不同,即可以此為劃分不同階段的界線。
反思二:前端設(shè)計(jì)的時(shí)候可以“理想主義”,但收攏的時(shí)候一定要仔細(xì)對(duì)好新數(shù)據(jù)源接口的字段
- 先發(fā)散。在重構(gòu)前端頁(yè)面的時(shí)候要盡量去滿足用戶瀏覽和產(chǎn)品秀肌肉需求,不要被接口提供的能力給限制了。在前期理前端頁(yè)面需求的時(shí)候,會(huì)對(duì)照著接口文檔提供的字段畫原型,這樣一是速度特別慢,二是頁(yè)面就局限了。因?yàn)楫?dāng)方案足夠合理(符合用戶需求),即使數(shù)據(jù)源沒有提供該字段也可以通過(guò)其他路徑滿足,例如爬蟲、向數(shù)據(jù)源提需求、合作其他數(shù)據(jù)源……
- 后收攏。發(fā)散后需要根據(jù)頁(yè)面數(shù)據(jù)和用戶反饋來(lái)做減法,清晰簡(jiǎn)潔才是王道。
反思三:后臺(tái)架構(gòu)很重要,想清楚會(huì)事半功倍
1. 后臺(tái)設(shè)計(jì)可能需要花很多時(shí)間,把這個(gè)鏈路梳理清楚也不是一個(gè)簡(jiǎn)單的事情,但是真的很有必要,當(dāng)把后臺(tái)的生效機(jī)制理清楚之后,會(huì)發(fā)現(xiàn)對(duì)后臺(tái)的理解會(huì)上一個(gè)新的臺(tái)階。
2.?運(yùn)營(yíng)也是我們的用戶,所以我們也要讓運(yùn)營(yíng)用的方便,后臺(tái)的交互也是十分重要的,而不只是停留在可以用的階段。
反思四:后臺(tái)需要不斷的積累
我接觸產(chǎn)品經(jīng)理的這個(gè)時(shí)候,一直接觸到的都是c端的產(chǎn)品,剛開始接觸后臺(tái)的時(shí)候,對(duì)后臺(tái)的設(shè)計(jì)總是會(huì)漏洞百出,這也是需要我們不斷的取試錯(cuò),快速的積累。(下面是整理的后臺(tái)用例表格)重構(gòu)的工作是不容易的(前人埋坑后人淚目)所以這要求我們?cè)诋a(chǎn)品設(shè)計(jì)之初的時(shí)候,一定要把視線放長(zhǎng)遠(yuǎn),預(yù)埋好足夠的擴(kuò)展空間避免重復(fù)造輪子。
本文由 @OTTIS 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash,基于 CC0 協(xié)議
挺子哥牛逼