亚洲无人区一区二区三区_农村玉米地少妇野战亚洲_国产欧美日韩VA另类在线播放_免费人成视频网站在线_国产在线精品一区二区高清不卡

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

作者:紫色年華 瀏覽:176 發(fā)布時間:2017-06-14
分享 評論 0

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


    要說的是,這個投放交互必須:


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


    3.統(tǒng)一路由


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


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


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


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


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


    總結(jié)一下


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


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