做好網(wǎng)頁輪播區(qū)設(shè)計(jì)要點(diǎn)

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

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

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

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

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

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

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

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

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

如果我想投放另外一種類型的素材比如活動(dòng)報(bào)名，就需要在活動(dòng)庫里去增加操作入口，極限情況下，如果活動(dòng)模塊沒人維護(hù)了如何解決?

如果我想投放的只是一個(gè)外部合作頁面，你不能跑到合作方那里，在他的系統(tǒng)里加一個(gè)投放吧

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

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

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

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

自下而上：先到文章庫管理界面，點(diǎn)擊“投放”，把文章投放到輪播區(qū)上去。

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

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

要說的是，這個(gè)投放交互必須：

輕量，比如一個(gè)彈層，而不是和內(nèi)容深深的糾結(jié)在一起(比如下圖)。

必須統(tǒng)一，在文章庫里，在活動(dòng)庫里，投放的彈層都是同一個(gè)。

根據(jù)上下文設(shè)置好默認(rèn)值，比如把文章的標(biāo)題或活動(dòng)的名稱自動(dòng)作為輪播圖上的標(biāo)題。這其實(shí)就是解耦基礎(chǔ)上的快捷設(shè)置。

3.統(tǒng)一路由

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

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

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

第三步使用統(tǒng)一路由靈活支持跳轉(zhuǎn)且老版本可優(yōu)雅降級。

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

新聞名稱：做好網(wǎng)頁輪播區(qū)設(shè)計(jì)要點(diǎn)
網(wǎng)站網(wǎng)址：http://muchs.cn/news13/169813.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站維護(hù)、網(wǎng)站排名、營銷型網(wǎng)站建設(shè)、用戶體驗(yàn)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)