3個(gè)要點(diǎn),做好輪播區(qū)設(shè)計(jì)

7 評(píng)論 14683 瀏覽 70 收藏 9 分鐘

文章分享了關(guān)于輪播區(qū)設(shè)計(jì)的幾個(gè)要點(diǎn),希望對(duì)各位的產(chǎn)品工作帶來(lái)些啟發(fā)。

無(wú)論是內(nèi)容類(lèi)產(chǎn)品,還是電商類(lèi)產(chǎn)品,一般首頁(yè)上都會(huì)有一個(gè)滾動(dòng)的輪播區(qū)。運(yùn)營(yíng)妹子往往會(huì)在輪播區(qū)里放一些期望推給用戶(hù)看的內(nèi)容。以我現(xiàn)在負(fù)責(zé)的本地頭條為例,我們就會(huì)把熱門(mén)的資訊文章放上來(lái)。

于是我們的前產(chǎn)品經(jīng)理(為了鄙視他就叫他小中吧),直接根據(jù)需求做了這樣的后臺(tái)設(shè)計(jì):

運(yùn)營(yíng)妹子可以從隔壁的文章庫(kù)里選擇文章,投放到這個(gè)輪播區(qū)。

放在當(dāng)時(shí)的情景下,這樣的設(shè)計(jì)看起來(lái)自然,實(shí)際上卻成了后面所有坑的源頭。我們一一來(lái)細(xì)數(shù)。

1.保持獨(dú)立和開(kāi)放

上述設(shè)計(jì),其實(shí)是直接復(fù)用了文章的標(biāo)題作為輪播的標(biāo)題,文章的圖片作為輪播圖,這樣就產(chǎn)生了第一個(gè)問(wèn)題:如果文章沒(méi)有圖,標(biāo)題太長(zhǎng)輪播區(qū)放不下,文章圖片丑,怎么辦?

答案是:解耦。解耦是架構(gòu)師經(jīng)常用的一個(gè)詞,意思是系統(tǒng)的各個(gè)部分保持靈活獨(dú)立,極端場(chǎng)景下可替換或丟棄。仔細(xì)看上面后臺(tái)的截圖,名義上它叫輪播區(qū)管理,但表格里面的每一行本質(zhì)上是一篇文章,而我們期望它是一個(gè)“輪播素材”。輪播素材不可以沒(méi)有圖,有圖也不能丑,圖不丑標(biāo)題還不能長(zhǎng)。

輪播區(qū)要管理的實(shí)際上是一張圖一句話(huà)一個(gè)鏈接所構(gòu)成的“輪播素材”,文章只是這個(gè)鏈接背后的一種類(lèi)別而已。正因如此,一個(gè)輪播區(qū)首先要做到的是讓自己變得獨(dú)立,獨(dú)立之后是開(kāi)放。解耦就是獨(dú)立,那開(kāi)放是什么呢?

按照小中的設(shè)計(jì),要把一篇文章投放到輪播區(qū),需要先去文章庫(kù),從那里投放過(guò)來(lái)。而在輪播區(qū)管理里面本身卻沒(méi)有任何入口。這會(huì)發(fā)生什么事情?

  1. 如果我想投放另外一種類(lèi)型的素材比如活動(dòng)報(bào)名,就需要在活動(dòng)庫(kù)里去增加操作入口,極限情況下,如果活動(dòng)模塊沒(méi)人維護(hù)了如何解決?
  2. 如果我想投放的只是一個(gè)外部合作頁(yè)面,你不能跑到合作方那里,在他的系統(tǒng)里加一個(gè)投放吧

答案也明顯:輪播區(qū)自己應(yīng)該有一個(gè)“創(chuàng)建”按鈕,它所創(chuàng)建的就是它所管理的“輪播素材”,而且這種素材應(yīng)該是極具開(kāi)放性的,開(kāi)放到只要求背后的是一個(gè)鏈接。 順便說(shuō)一句,互聯(lián)網(wǎng)力量就在于開(kāi)放,這種開(kāi)放表現(xiàn)為一個(gè)個(gè)簡(jiǎn)單到極致的超鏈接。

2.優(yōu)雅快捷的投放彈窗

把一個(gè)素材(比如文章)投放到輪播區(qū),從設(shè)計(jì)模式上來(lái)講,其實(shí)有兩種方式:

  1. 自上而下:先到輪播區(qū)管理界面,然后點(diǎn)擊“選擇文章”從下面的文章庫(kù)里選擇文章上來(lái)。
  2. 自下而上:先到文章庫(kù)管理界面,點(diǎn)擊“投放”,把文章投放到輪播區(qū)上去。

哪種方式好?應(yīng)該說(shuō)兩種方式各有各的場(chǎng)景。如果你現(xiàn)在考慮的是給輪播區(qū)找一篇熱文,你可能會(huì)第一時(shí)間想到自上而下的方式1。如果你現(xiàn)在是在文章庫(kù)里審核文章,看著一篇覺(jué)得合適,那你就會(huì)選擇自下而上的方式2。

我們的業(yè)務(wù)中更多的是第2種方式。在這種方式下,按照產(chǎn)品經(jīng)理都熟悉的“最短路徑”原則,文章庫(kù)里每一篇文章的后面就會(huì)有一個(gè)“投放到輪播區(qū)”的按鈕。

要說(shuō)的是,這個(gè)投放交互必須:

  1. 輕量,比如一個(gè)彈層,而不是和內(nèi)容深深的糾結(jié)在一起(比如下圖)。
  2. 必須統(tǒng)一,在文章庫(kù)里,在活動(dòng)庫(kù)里,投放的彈層都是同一個(gè)。
  3. 根據(jù)上下文設(shè)置好默認(rèn)值,比如把文章的標(biāo)題或活動(dòng)的名稱(chēng)自動(dòng)作為輪播圖上的標(biāo)題。這其實(shí)就是解耦基礎(chǔ)上的快捷設(shè)置。

3.統(tǒng)一路由

好,現(xiàn)在已經(jīng)把輪播區(qū)和文章解耦開(kāi),也可以投放文章、活動(dòng)等類(lèi)型的素材了。小中給每個(gè)類(lèi)型的定義了類(lèi)型值,然后讓客戶(hù)端程序猿支持這些類(lèi)型。接著某個(gè)節(jié)日來(lái)了,運(yùn)營(yíng)妹子想把第3種類(lèi)型“投票”放到輪播區(qū),但是這個(gè)時(shí)候程序猿說(shuō):我們還不支持,要支持新類(lèi)型得發(fā)版本。

這個(gè)問(wèn)題怎么破?實(shí)踐中,我們的建議是提前建立一個(gè)統(tǒng)一的路由。

其實(shí)除了輪播區(qū)可能會(huì)到達(dá)各種頁(yè)面之外,push,消息等場(chǎng)景也會(huì)到達(dá)各種頁(yè)面。我們最好和團(tuán)隊(duì)約定,每設(shè)計(jì)一種新類(lèi)型的頁(yè)面,都應(yīng)該把它加到這個(gè)統(tǒng)一的路由里(甚至首頁(yè)也應(yīng)該這樣做,以我此前在阿里熟悉的電商業(yè)務(wù)而言,付款完成之后往往會(huì)引導(dǎo)用戶(hù)去首頁(yè))。然后無(wú)論是輪播區(qū)還是push需要跳轉(zhuǎn)的時(shí)候,都使用這個(gè)統(tǒng)一的路由器,跳轉(zhuǎn)到對(duì)應(yīng)的頁(yè)面去。一句話(huà)概括來(lái)說(shuō)就是:哪里都能去。

如果從開(kāi)發(fā)伊始就使用這種方案,那么輪播區(qū)自然也就支持各種類(lèi)型頁(yè)面了。但是,老版本如何支持新的“投票”類(lèi)型呢?

老版本如果不升級(jí)就沒(méi)有辦法像新版本那樣支持新功能,但是我們應(yīng)該設(shè)計(jì)一種機(jī)制,可以做到優(yōu)雅降級(jí)。這是不是說(shuō)我們需要考慮為新老版本提供不同的輪播區(qū)數(shù)據(jù)呢?其實(shí)不用,訣竅都在統(tǒng)一路由里。一般app都支持webview,能打開(kāi)url。實(shí)踐中我們建議將瀏覽器可訪(fǎng)問(wèn)的url直接作為統(tǒng)一路由的路由參數(shù),只不過(guò)在新版本里面可以解析出url跳轉(zhuǎn)到體驗(yàn)更好的原生頁(yè)面,而老版本用的就是h5頁(yè)面。

總結(jié)一下

對(duì)于像輪播區(qū)這樣的資源位的設(shè)計(jì)

  • 第一步要做到獨(dú)立和開(kāi)放;
  • 第二步,提供各種便捷的投放控件優(yōu)雅地嵌入到各個(gè)業(yè)務(wù)中去;
  • 第三步使用統(tǒng)一路由靈活支持跳轉(zhuǎn)且老版本可優(yōu)雅降級(jí)。

這種設(shè)計(jì)方式其實(shí)是使用了著眼于中長(zhǎng)期的最低成本的策略,說(shuō)到策略大家可能想到了MVP(最小可行性產(chǎn)品)。比較而言,前者更適合相對(duì)穩(wěn)定的業(yè)務(wù)環(huán)境,后者更適合初創(chuàng)。說(shuō)起MVP,第一次了解是走在去支付寶大樓的萬(wàn)塘路上,后來(lái)有一首歌《叔叔西湖怎么走》,轉(zhuǎn)眼幾年我也成公司運(yùn)營(yíng)妹子眼里的大叔了。

 

作者:大中,內(nèi)容類(lèi)創(chuàng)業(yè)公司的產(chǎn)品總監(jiān),此前在阿里5年,負(fù)責(zé)過(guò)蝦米音樂(lè)等產(chǎn)品。

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 素材全部獨(dú)立就行了。輪播圖區(qū)后臺(tái)只填寫(xiě)排序,標(biāo)題,url,圖等。填啥顯示,點(diǎn)啥跳啥。

    來(lái)自北京 回復(fù)
  2. 輪播應(yīng)該還有排序!

    來(lái)自四川 回復(fù)
  3. 干貨,贊! :mrgreen:

    來(lái)自廣東 回復(fù)
  4. 這個(gè)寫(xiě)得很好!

    來(lái)自陜西 回復(fù)
  5. 很不錯(cuò),解釋的很清晰。

    回復(fù)
  6. 喜歡這類(lèi)的文章

    回復(fù)