文章分享了關于輪播區設計的幾個要點，希望對各位的產品工作帶來些啟發。

無論是內容類產品，還是電商類產品，一般首頁上都會有一個滾動的輪播區。運營妹子往往會在輪播區里放一些期望推給用戶看的內容。以我現在負責的當地頭條為例，我們就會把熱門的資訊文章放上來。

于是我們的前產品經理（為了藐視他就叫他小中吧），直接按照需求做了這樣的后臺設計：

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

放在當時的情景下，這樣的設計看起來自然，實際上卻成了后面所有坑的源頭。我們一一來細數。

1.連結獨立和開放

上述設計，其實是直接復用了文章的標題作為輪播的標題，文章的圖片作為輪播圖，這樣就產生了第一個問題：如果文章沒有圖，標題太長輪播區放不下，文章圖片丑，怎么辦？

答案是：解耦。解耦是架構師經常用的一個詞，意思是系統的各個部分連結靈活獨立，極端場景下可替換或丟棄。仔細看上面后臺的截圖，名義上它叫輪播區辦理，但表格里面的每一行素質上是一篇文章，而我們期望它是一個“輪播素材”。輪播素材不成以沒有圖，有圖也不能丑，圖不丑標題還不能長。

輪播區要辦理的實際上是一張圖一句話一個鏈接所構成的“輪播素材”，文章只是這個鏈接背后的一種類別罷了。正因如此，一個輪播區首先要做到的是讓本身變得獨立，獨立之后是開放。解耦就是獨立，那開放是什么呢？

根據小中的設計，要把一篇文章投放到輪播區，需要先去文章庫，從那里投放過來。而在輪播區辦理里面自己卻沒有任何入口。這會發生什么事情？

如果我想投放別的一種類型的素材好比活動報名，就需要在活動庫里去增加操作入口，極限情況下，如果活動模塊沒人維護了如何解決？如果我想投放的只是一個外部合作頁面，你不能跑到合作方那里，在他的系統里加一個投放吧

答案也明顯：輪播區本身應該有一個“創建”按鈕，它所創建的就是它所辦理的“輪播素材”，并且這種素材應該是極具開放性的，開放到只要求背后的是一個鏈接。 順便說一句，互聯網力量就在于開放，這種開放表示為一個個簡單到極致的超鏈接。

2.優雅快捷的投放彈窗

把一個素材（好比文章）投放到輪播區，從設計模式上來講，其實有兩種方式：

自上而下：先到輪播區辦理界面，然后點擊“選擇文章”從下面的文章庫里選擇文章上來。自下而上：先到文章庫辦理界面，點擊“投放”，把文章投放到輪播區上去。

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

我們的業務中更多的是第2種方式。在這種方式下，根據產品經理都熟悉的“最短路徑”原則，，文章庫里每一篇文章的后面就會有一個“投放到輪播區”的按鈕。

要說的是，這個投放交互必需：

輕量，好比一個彈層，而不是和內容深深的糾結在一起（好比下圖）。必需統一，在文章庫里，在活動庫里，投放的彈層都是同一個。按照上下文設置好默認值，好比把文章的標題或活動的名稱自動作為輪播圖上的標題。這其實就是解耦基礎上的快捷設置。

3.統一路由

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

這個問題怎么破？實踐中，我們的建議是提前建立一個統一的路由。

其實除了輪播區可能會到達各種頁面之外，push，消息等場景也會到達各種頁面。我們最好和團隊約定，每設計一種新類型的頁面，都應該把它加到這個統一的路由里（甚至首頁也應該這樣做，以我此前在阿里熟悉的電商業務而言，付款完成之后往往會引導用戶去首頁）。然后無論是輪播區還是push需要跳轉的時候，都使用這個統一的路由器，跳轉到對應的頁面去。一句話概括來說就是：哪里都能去。

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

標簽：鹽城 東營 九江 烏魯木齊 林芝