你好遏乔，我叫大中，是一家內(nèi)容類創(chuàng)業(yè)公司的產(chǎn)品總監(jiān)发笔，此前在阿里5年盟萨，負責(zé)過蝦米音樂等產(chǎn)品。平常關(guān)注內(nèi)容了讨、社區(qū)和電商類產(chǎn)品

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

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

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

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

1.保持獨立和開放

上述設(shè)計侧巨，其實是直接復(fù)用了文章的標(biāo)題作為輪播的標(biāo)題，文章的圖片作為輪播圖鞭达，這樣就產(chǎn)生了第一個問題：如果文章沒有圖司忱，標(biāo)題太長輪播區(qū)放不下，文章圖片丑畴蹭，怎么辦坦仍？

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

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

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

1.如果我想投放另外一種類型的素材比如活動報名，就需要在活動庫里去增加操作入口贪嫂，極限情況下寺庄，如果活動模塊沒人維護了如何解決？

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

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

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

把一個素材（比如文章）投放到輪播區(qū)搓侄，從設(shè)計模式上來講瞄桨，其實有兩種方式：

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

2.自下而上：先到文章庫管理界面芯侥，點擊“投放”，把文章投放到輪播區(qū)上去乳讥。

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

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

要說的是赋焕，這個投放交互必須：

1.輕量参歹，比如一個彈層，而不是和內(nèi)容深深的糾結(jié)在一起（比如下圖）隆判。

2.必須統(tǒng)一犬庇，在文章庫里僧界，在活動庫里，投放的彈層都是同一個臭挽。

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

3.統(tǒng)一路由

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

這個問題怎么破？實踐中波俄，我們的建議是提前建立一個統(tǒng)一的路由晨逝。

其實除了輪播區(qū)可能會到達各種頁面之外，push懦铺，消息等場景也會到達各種頁面捉貌。我們最好和團隊約定，每設(shè)計一種新類型的頁面冬念，都應(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è)計一種機制罢浇，可以做到優(yōu)雅降級。這是不是說我們需要考慮為新老版本提供不同的輪播區(qū)數(shù)據(jù)呢？其實不用嚷闭，訣竅都在統(tǒng)一路由里攒岛。一般app都支持webview，能打開url凌受。實踐中我們建議將瀏覽器可訪問的url直接作為統(tǒng)一路由的路由參數(shù)阵子，只不過在新版本里面可以解析出url跳轉(zhuǎn)到體驗更好的原生頁面思杯，而老版本用的就是h5頁面胜蛉。

總結(jié)一下

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

第一步要做到獨立和開放；

第二步色乾，提供各種便捷的投放控件優(yōu)雅地嵌入到各個業(yè)務(wù)中去誊册；

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

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

下集預(yù)告：一個縣城社區(qū)冷啟動過程中的產(chǎn)品設(shè)計