如何規范輪播圖的后臺設計?

8 評論 17012 瀏覽 60 收藏 10 分鐘

對于多區域、多輪播圖的產品,怎樣的后臺設計能夠清晰明確地區分不同場景不同位置?避免給運營同學帶來使用阻礙呢?筆者將為大家詳細分析,請看正文。

一、問題

也許有的小伙伴,公司的產品只有一個位置需要展示輪播圖,那么后臺肯定就是一對一啦,設置之后就對應展示,這個是毫無疑問的。

但是假設,公司發展需要,做了小程序,那么展示輪播圖的位置是不是就多加了一個呢?也可能是加入了新的模塊,也有了新運營位的需求,去增加輪播圖的展示位置,這個時候,后臺做一個好像就不行了,因為有很多個位置,一個后臺對應的數據就應該是一個位置的。

于是,很多小伙伴,提出的輪播圖需求,除去前端的設計,后臺的設計就是一句話——我們之前不是有做了一個輪播圖的后臺嗎?照著那個再做一個就好了?;蛘哒f照著那個做再加點什么什么字段就好了。

然后問題就來了:

這次新增了一個,開發就去復制一個后臺。下次新增一個,開發就再復制一個后臺。先不說工作量的問題,久而久之,也累積起來很多個輪播圖的后臺了。

新人運營同學這時候可能就會很懵逼了,我要去XX運營位上一個新圖,可是這么多個后臺,哪個是我要上圖的運營位的呢?

這個時候可能需要新增后臺的使用文檔去維護,這是理想狀況下。

有些小伙伴的公司后端系統功能龐雜,設計輪播圖后臺也很隨意,后端就隨便起個名字,隨便找個地方一放,那找起來就很胃疼了。

這還是不是最讓人頭疼的,如果運營同學一個不小心,把圖上錯到不該上的地方,那么,就有可能帶來公司方面的損失。追究起來也許大家都要承擔責任,就非常的不好了。

二、方案

照著再做一個——這么簡單的決定很可能為你的同事埋下了無數的隱患。

那么,小伙伴可能會問,要怎么做才能避免這樣的情況出現呢?

我給出的建議是,不用新增后臺,在初始的那個輪播圖后臺上面去做新增的功能就好了,這樣就是一個聚合信息的管理。

當然了,這個方法說起來是很簡單的,真正執行的時候也許會遇到一些問題。

1. 篩選

全部的數據堆在一起,在一個列表頁面展示,不就亂套了嗎?

這個解決的方案是在列表頁的篩選項添加一個位置的篩選。加入這個篩選項之后,篩選出想要看的位置的數據,排除了其他位置的數據之后,就會很清晰,不會出現混亂了。

還有一個附加的好處就是不做篩選的時候可以一目了然的看到所有的輪播圖的數據。如果想要聚焦在某個位置的數據上,作出篩選即可。數據的展示變得非常靈活。

圖片示例-列表頁:

2. 差異化

都在同一個頁面去新增和編輯,兩個位置的數據不一樣怎么辦?比如說,2個位置的輪播圖圖片的大小要求不一樣。

這個也很好辦——在輪播圖內容的編輯加一個字段設置位置。通常會是下拉選項,位置的名稱也最后是容易理解的位置信息。根據位置字段的切換,就可以區別的展示需要輸入的字段,提示等。這個也是列表頁篩選的數據來源,所以必不可少。通過這樣的差異化處理,可以實現內容的聚合,而不會因為有差異就只能重新做一份,達到統一管理的目的。

圖片示例-編輯頁1:

3. 補充提示

也許有小伙伴會說輪播圖還會加什么功能嗎?不是都大同小異的展示圖片和跳轉頁面而已。其實還真的有,而且根據業務的需求可能有各種不同的功能。

我舉一個栗子,就是跳轉的前置操作。

所謂的跳轉的前置操作,也就是在頁面跳走之前做的一些操作。具體做法是編輯輪播圖內容的時候加上一個前置操作的標識單選項,讓開發加上對應的處理。

可以是這樣的場景——希望輪播圖跳轉的H5根據每個用戶做一些特殊展示。

可是有一些位置是不需要登錄就能進入的,就像首頁,這個時候就只能在輪播圖上做前置的處理。在點擊之后不是直接跳轉,而是先彈出登錄框讓未登錄的用戶登錄,從而獲取相關信息。

圖片示例-編輯頁2:

4. 理由

這樣的聚合管理為什么可以避免問題呢?

其實問題的核心就是“多”這一個點造成的:并存的多個導致混亂。因為多個所以不好查找,也不好維護。當不新增之后,管理輪播圖的后臺基本就是維持在一個地方。現在,對于運營的同學來說,要找到這個位置就不再困難了,不會眼花繚亂的對著一堆后臺頁面,但是又不知道那個才是自己真正需要去修改的。剩下的只要區分清楚位置就好了,節省了很多時間,有交接的新同學也很容易去說明了。

那么對于產品設計本身的影響大不大呢,會不會增加很多工作量?我覺得其實是不大的。排除掉這件事,在原先照搬的策略下面,產品設計上也是需要設計前端展示和后端功能,變成只是去新增之后,需要做的工作并沒有實質的改變。相反的,在編輯后臺說明的時候也會更方便,只需要在一個后臺說明去增改就行,也不用加很多個說明文檔去挨個解釋。如果說需要添不同位置的輪播圖,但是字段又差不多的話,后臺甚至也不用設計了,直接讓開發添加個位置字段的選擇就可以了。

三、多個場景

這種聚合復用的方法不僅可以用在輪播圖的后臺設計上門,還有很多可以應用的地方,只要是有類似邏輯,但是又有細微差異的功能點,都可以這么聚合起來,拓展形成一個后臺的設置系統。

拿舉報來說,如果需要舉報的內容不止是一個地方的數據,但是舉報的方式和內容又有些微差異,比如一個模塊的舉報需要填寫理由,另外一個不需要填寫,那么就可以使用這個方式,也可以用在浮標圖片內容設置啦,廣告位設置啦,等等等等。

不過萬物都不是完美的,這個方法也有不適合使用的時候。如果核心邏輯差異太大,或者功能點實在太多太復雜,那么與其攢做一堆不如拆開。

因為在同一個基礎上去升級,意味著相關的數據應該放在一個地方了,只是有區別的字段而已。

如果有很復雜的功能,一旦去調整,很可能會影響到原來其他的功能和數據,也是有很大的風險。也一樣會帶來維護和升級的麻煩,甚至會影響老版本,或者要做很大的改動。所以比較適合使用的還是功能和字段都相對簡單的地方。

四、最后

那么以上,是個人關于輪播圖的后臺設計的一些總結和思考,這當然只是其中的一種解決方式,大家也可以大開腦洞想想還有沒有別的方式去解決。

在工作中,一而再,再而三遇到相同的問題的時候,也許就需要思考是不是有更好的辦法去解決。這是我思考的初衷。希望大家多多給與意見和建議。

 

本文由@汪界小萌新 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 所屬位置是怎么設置的

    回復
  2. 能看下,新增時的頁面嗎

    回復
  3. 我想問一下,排序值是起到什么作用的?

    來自四川 回復
    1. 輪播圖的翻頁時根據排序值來排序的,第一張展示的一定是排隊值最高或者最低的。第二章就是相對高或相對低的。

      來自北京 回復
  4. Eelement數據列表可以拖動排序,比設置排序值方便很多。

    來自四川 回復
  5. 設置排序值的方法確實略小白,因為排序值不僅不太好用,還會做更多的前后端檢驗等問題,不過其他設計都很合理,加油

    來自山東 回復
  6. 你好,跳轉類型除了登錄校驗還有什么???謝謝

    來自北京 回復
  7. 做個輪播圖設置后預覽,不能解決嗎?

    來自四川 回復