從需求到原型,「產(chǎn)品后臺」該如何思考與設(shè)計(jì)?

24 評論 66611 瀏覽 798 收藏 18 分鐘

想起幾年前自己搗鼓了一個(gè)手機(jī)資訊網(wǎng)站,那可能是我接觸所謂后臺的第一次。用的是國內(nèi)一款比較著名的CMS系統(tǒng),那會兒全靠看教程與瞎琢磨,不曾想有一天自己也會

什么是后臺?

顧名思義,就是與前臺相反的唄,前臺我們都知道是用戶查看信息,提交信息的地方,那么后臺相應(yīng)的就是創(chuàng)建元素信息,存儲信息,處理信息的地方,他也叫管理系統(tǒng)。

打個(gè)比方,前臺就好像我們?nèi)ゲ蛷d里,坐下來看菜單,然后告訴服務(wù)員我們今天要吃什么,服務(wù)員就蹦蹦跳跳的到了后廚,告訴廚師要做哪些菜,廚師記下桌號和菜品,就開始制作了。這里的后廚實(shí)際上就是我們所說的后臺系統(tǒng),而那個(gè)廚師就是后臺管理員。

那后臺都能做什么?給誰用?

就像上面所說的后臺通常的作用就是創(chuàng)建信息,存儲信息與處理信息,他管理著整個(gè)產(chǎn)品的正常運(yùn)轉(zhuǎn)。在論壇里后臺管理者可以刪帖,發(fā)帖,封號,創(chuàng)建賬號,在門戶網(wǎng)站可以添加新聞,增加欄目,增加評論,在電商系統(tǒng)里可以上下架產(chǎn)品,處理物流信息,做促銷等等,功能強(qiáng)大吧。

不過強(qiáng)大的背后就會遇到問題,那就是越是功能強(qiáng)大,越不能一個(gè)人來完成所有部分,所以就有了「分權(quán)限管理」管理者可以細(xì)分成很多塊,各司其職,提高效率。比如我正在編輯文章的微信后臺,就包括管理者與運(yùn)營者,運(yùn)營者只能登錄與群發(fā)信息,更高級的操作需要管理員授權(quán)或是不開放,電商網(wǎng)站更是多角色的典型。

1
在大致了解了后臺是什么之后,讓我們拿個(gè)案例從需求開始。

看看設(shè)計(jì)后臺時(shí)是怎么思考的?

首先最頭疼的問題就是——從哪里入手?記住一句話,跟隨你的業(yè)務(wù)流程。找到流程中需要與系統(tǒng)交互的地方,那就是你想要找的東西。

OK,讓我們用一個(gè)簡單的門戶網(wǎng)站舉例。

  • 背景:A公司目前門戶是靜態(tài)的,老板為了拉融資要求對門戶網(wǎng)站進(jìn)行改版。
  • 需求:在網(wǎng)站上要有新聞模塊,首頁需要有輪播圖可以更換公司的大事件,給公司一個(gè)發(fā)聲的地方,明年的重點(diǎn)需要擴(kuò)大招商范圍和規(guī)模,網(wǎng)站上最好有個(gè)招商板塊,再有就是對公司整體有個(gè)業(yè)務(wù)介紹,最后,公司最近招人比較困難,如果官網(wǎng)有個(gè)招聘模塊也許就能提高招聘的效率。
  • 上線:給你一個(gè)月時(shí)間,網(wǎng)站就要上線。滾吧!產(chǎn)品汪。

就是這么多了,如果是你你會怎么做?

畫原型嗎?NO。先停一下,去把這個(gè)「喜訊」告訴所有「干系人」吧,讓大家的信息對稱一下。面對這個(gè)需求,我們需要調(diào)動多少人?產(chǎn)品狗自己,UI一個(gè),前端一個(gè),后端1-2個(gè),市場文案狗一個(gè),人力資源輔助配合招聘模塊1人,最后是網(wǎng)站后期運(yùn)營者。想想功能,想想要完成的事情,大概就這么多了。

根據(jù)需求可以看出,大概功能并不復(fù)雜;做個(gè)功能列表,簡單用語言包裝一下你要做的東西,然后去挨個(gè)聊或者召集大家開會,讓大家提供一個(gè)完成時(shí)間,這個(gè)完成時(shí)間不能超過Deadline,所以溝通過程中可能需要你去說服對方,提高效率,甚至可能加班,讓大家有心理準(zhǔn)備。搞定了人,回來看看產(chǎn)品。2

從老板那邊得到的需求大致是這樣,對于一個(gè)門戶網(wǎng)站來說邏輯總是比較簡單的。

我們先來做個(gè)簡單的梳理

首頁,會有一個(gè)輪播圖方便后期更新,如果更新不頻繁也可以做成靜態(tài),開發(fā)成本低。首頁還會是一些公司競爭力介紹等等。

新聞,新聞會有運(yùn)營人員不定期更新,就是需要創(chuàng)建信息,他就是需要在后臺有這個(gè)功能。

招商加盟,看看招商網(wǎng)站多半是一些公司介紹,在底部會放一個(gè)聯(lián)系方式提交的地方,詢問老板后,他認(rèn)為也需要這個(gè)模塊,OK,需要傳遞信息,他也需要在后臺有個(gè)功能。

招聘,看看招聘網(wǎng)站,功能還是挺多的?那么我們需要那么多嗎?用戶可以有個(gè)word簡歷通過網(wǎng)站上傳給我們,人力資源人員可以通過后臺下載或預(yù)覽?再來一個(gè)解決方案,在前臺有很多表單可以讓用戶填寫,直接提交給后臺。這些都是用戶要與后臺產(chǎn)生互動信息。

但是這些方案好像聽起來不錯,但是時(shí)間允許你這樣做嗎?成本你承受得起嗎?那么不如用最原始的方式,雖然不那么酷但是后簡單,前端只提供職位職責(zé)預(yù)覽,并提供一個(gè)人力的郵箱,大家可以向里面投遞簡歷,后臺只做職位的簡單發(fā)布。

業(yè)務(wù)介紹,屬于靜態(tài)頁面,設(shè)計(jì)上去就OK了,這個(gè)不涉及到后臺。

經(jīng)過分析和溝通,我們發(fā)現(xiàn)與后臺有交集的地方分別是,首頁輪播圖,新聞,招商和招聘。這時(shí)候你可以去看看其他產(chǎn)品,在這些模塊都會顯示哪些字段信息,找到你決定有用的,把他填寫到這些功能描述中,再去進(jìn)行前臺的產(chǎn)品設(shè)計(jì);不過有時(shí)你會發(fā)現(xiàn)做著做著發(fā)現(xiàn)缺了某個(gè)字段,為了避免這種事情的發(fā)生,就需要你在信息收集的過程中,多去看幾個(gè)產(chǎn)品,把他們的展示的內(nèi)容都先羅列下來,再做刪減。

前臺不是今天說的重點(diǎn),我們直接進(jìn)入后臺設(shè)計(jì)。

我常以為后臺就是一個(gè)個(gè)的「倉庫」

這個(gè)庫里堆放著你想要管理的內(nèi)容,后臺的搭建就是創(chuàng)建一個(gè)又一個(gè)的庫,并且將他們合理的連接起來。回看我們要做的東西,可以簡單的分為四個(gè)庫,并對他們分別管理。

  1. 新聞管理
  2. 輪播圖管理(廣告位管理)
  3. 加盟信息
  4. 招聘信息管理

知道有哪些庫了,我們需要將他們合理的組合起來,形成”導(dǎo)航“。業(yè)務(wù)流程越長,功能越多這個(gè)組合的工作越不好,這就是為什么需要信息架構(gòu)師這種職位,不過面對簡單的后臺,產(chǎn)品們還是可以直接應(yīng)付。

整個(gè)后臺的界面通常會有以下模塊組成:后臺導(dǎo)航——管理庫(管理內(nèi)容列表\管理的內(nèi)容)從最大的框架到最小元素。

 

后臺導(dǎo)航

在我接觸的后臺導(dǎo)航中常見的有幾種。

1. 橫向?qū)Ш?/p>

2. 縱向樹結(jié)構(gòu)導(dǎo)航

3. 橫向?qū)Ш娇v向樹結(jié)構(gòu)

橫向?qū)Ш綍迷诤笈_功能較少,層級很少的情況下,他的優(yōu)勢就是學(xué)習(xí)成本低,劣勢就是可擴(kuò)展性比較差。

3

早期的支付寶導(dǎo)航

縱向樹結(jié)構(gòu)導(dǎo)航,這個(gè)我們看的其實(shí)是比較常見的,很多電商網(wǎng)站的個(gè)人中心或是訂單頁面就是用的這種結(jié)構(gòu),邏輯清晰,能夠很快的找到想要找的東西。

4

第三種比較復(fù)雜,適用于平臺功能較多,功能模塊相差很多的網(wǎng)站,會在最頂部的橫向?qū)Ш椒胖庙敿壒δ軐?dǎo)航,在某個(gè)功能下用樹結(jié)構(gòu)導(dǎo)航清晰的表現(xiàn)二級功能。

5

因?yàn)檫@一次我們做的功能并不復(fù)雜實(shí)際上可以用橫向?qū)Ш?,不過因?yàn)槲沂歉鶕?jù)現(xiàn)有后臺來制作,所以為了不增加開發(fā)成本,所以依然延續(xù)橫向?qū)Ш娇v向樹結(jié)構(gòu)。

管理庫

決定了哪種導(dǎo)航形式,來看看最重要的「管理庫」,面對「庫」大家記住,絕大部分情況都會有個(gè)「列表頁」,然后就是對信息的「增刪改查」,遇到商品或是輪播圖還會有上下架,顯示與隱藏的功能,基本上「庫」都會這樣的管理的。

那么這樣想,是不是新聞的管理設(shè)計(jì)起來就容易多了。添加新聞,刪除新聞,編輯新聞,搜索新聞,再加上一個(gè)新聞列表,列表中在顯示一些需要的字段。

OK,其實(shí)整個(gè)管理列表頁已經(jīng)躍然紙上了,之后就是正文編輯了,用戶可以從列表頁或?qū)Ш街械摹柑砑有侣劇惯M(jìn)入,把可以實(shí)現(xiàn)功能的字段做到頁面上,再加上文本編輯器,一個(gè)發(fā)布按鈕,一個(gè)簡單的新聞管理就搞定了。

6
原型略簡陋。。莫吐槽~

那加盟信息怎么做呢?其實(shí)也很簡單了,既然用戶需要在前臺提交信息,那么我們的后臺實(shí)際上就是一個(gè)接受信息的地方。我們讓用戶在前臺提交「姓名電話郵箱」等聯(lián)系方式,在后臺加盟管理中,利用列表頁將這些信息進(jìn)行展示,有新的加盟信息推送過來可以在導(dǎo)航上加一個(gè)數(shù)字角標(biāo),這個(gè)功能甚至都用不到詳情頁就能搞定。

7

留個(gè)思考問題,廣告位管理你是不是也會做了呢?思考10秒鐘,用上面的辦法思考——列表(增刪改查)+詳情(添加內(nèi)容)。是不是思路變得清晰一些了?

像門戶網(wǎng)站這種還算比較簡單的了,不過為了方便管理,你可以給不同的角色賦予不同的權(quán)限,比如人力資源的同學(xué)只可以使用招聘發(fā)布,網(wǎng)站運(yùn)營人員只能使用新聞發(fā)布等等,專人專項(xiàng),分工明確。

角色劃分與權(quán)限是怎么來決定呢?

一句話,跟隨你的產(chǎn)品業(yè)務(wù)。比如拿電商而言一個(gè)商品從用戶確認(rèn)下單,支付之后,在后臺會走過多少流程,我想每個(gè)公司的業(yè)務(wù)流程都會不同,但是在這個(gè)流程中一定會涉及到很多「角色」來處理訂單,而這「角色」就是你來劃分后臺權(quán)限的依據(jù),而功能亦是從業(yè)務(wù)需求中轉(zhuǎn)化而成的。

讓我們短暫回顧一下

回顧一下后臺的設(shè)計(jì),我們會發(fā)現(xiàn)他實(shí)際上是一種面向信息的設(shè)計(jì),對于信息進(jìn)行審核,記錄,閱讀,操控等等。在做后臺設(shè)計(jì)時(shí)你需要對業(yè)務(wù)流程有一定了解,知道哪個(gè)環(huán)節(jié)會與系統(tǒng)產(chǎn)生交互,那么這個(gè)交互的點(diǎn)就是后臺設(shè)計(jì)的「庫」,我們需要對這些庫進(jìn)行管理,有時(shí)候我們還需要將這些庫與另外一些庫進(jìn)行連接,庫與庫之間互相調(diào)取數(shù)據(jù)。

比如電商網(wǎng)站做的促銷管理,都會去調(diào)用「商品庫」里面的數(shù)據(jù)。想要掌握后臺產(chǎn)品的設(shè)計(jì)的核心就是處理好每個(gè)庫的劃分與整個(gè)產(chǎn)品的運(yùn)作邏輯。

先做前臺還是后臺

這是我曾經(jīng)很糾結(jié)的問題,不知道你是不是也是一樣,當(dāng)你慢慢了解之后,這個(gè)問題其實(shí)就不復(fù)存在了,找你熟悉的東西開始做,這樣會讓你有我已經(jīng)完成了多少多少了的感覺,而不是面對一個(gè)不熟悉的東西,痛苦的死磕,磕到對自己失去信心。

前臺與后臺共同構(gòu)成了你的產(chǎn)品,缺少一方,產(chǎn)品便無法運(yùn)轉(zhuǎn),先把業(yè)務(wù)邏輯思考清楚,你會發(fā)現(xiàn)「哦,這里是給用戶看的」「啊,這里是后臺要處理的」當(dāng)業(yè)務(wù)邏輯走向完整之后,我想你的前后臺就都已經(jīng)設(shè)計(jì)完成了。還有一個(gè)問題可能會比較困擾人。

后臺設(shè)計(jì)要不要注重體驗(yàn)和UI?

我的答案是,視情況而定。這個(gè)情況有可能是時(shí)間,有可能是產(chǎn)品階段,有可能是公司目標(biāo)與規(guī)模。

有些后臺只要能實(shí)現(xiàn)功能就可以,有些后臺需要開放給第三方來用,對于產(chǎn)品的“好用”程度不同,不過如果條件允許還是反復(fù)推敲下,其中的邏輯與體驗(yàn)比較好。

前一陣幫助公司對商城的賣家后臺做了體驗(yàn)上的改版,因?yàn)橹岸紩粩嗟脑黾庸δ?,沒有對產(chǎn)品很好的梳理和設(shè)計(jì),導(dǎo)致很多地方體驗(yàn)不好或是信息架構(gòu)混亂。這些細(xì)小的地方只要多多體驗(yàn),多思考就能夠找到更好的辦法。

比如后臺有個(gè)手機(jī)認(rèn)證的功能,之前只這樣的操作。

8

未認(rèn)證的用戶進(jìn)來的狀態(tài),會顯示用戶未認(rèn)證,點(diǎn)擊立即認(rèn)證會有個(gè)模態(tài)窗口,讓你填寫手機(jī)號,驗(yàn)證碼。

9

OK,好像很正常,也能夠綁定,那么問題出現(xiàn)在哪里呢?

10

不夠直接,需要兩步操作。于是做了如下修改,點(diǎn)擊導(dǎo)航中的認(rèn)證中心,直接去判斷是否綁定,如果沒有綁定,直接顯示之前彈窗中的內(nèi)容,兩步變一步,簡單了許多吧。

尾巴

前兩天去聽了一個(gè)產(chǎn)品培訓(xùn)課,課上深刻的記得老師說過的一句話,體驗(yàn)就是對流程的梳理與調(diào)整。細(xì)思下,很有道理吧。

不知道你現(xiàn)在,是不是已經(jīng)知道后臺是什么,給誰用,如何設(shè)計(jì)了。最近在研究拼車產(chǎn)品,不知道你有沒有用過嘀嘀順風(fēng)車,如果沒用過你可以馬上體驗(yàn)一下,然后思考一下,他的哪些東西會在后臺出現(xiàn)呢?

#專欄作家#

辛超,微信公眾號:pmnote,人人都是產(chǎn)品經(jīng)理專欄作家。九櫻天下產(chǎn)品經(jīng)理,關(guān)注社區(qū)共享經(jīng)濟(jì)領(lǐng)域,曾任藍(lán)標(biāo)集團(tuán)策劃經(jīng)理,負(fù)責(zé)運(yùn)營百萬級粉絲微博賬號,現(xiàn)轉(zhuǎn)崗產(chǎn)品,擅長產(chǎn)品設(shè)計(jì)與運(yùn)營。希望未來自己打造的產(chǎn)品,能讓世界變得更好一點(diǎn)點(diǎn)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,不得轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 提綱挈領(lǐng),梳理脈絡(luò),又接地氣。稀罕你~

    來自北京 回復(fù)
  2. 求大神指教,上架、下架功能和發(fā)布、撤回功能有什么不同嗎?總是搞不清楚這幾個(gè)功能的具體定義。

    來自廣東 回復(fù)
  3. 通俗易通又留有思考余地的風(fēng)格,很喜歡。稀罕你!

    來自四川 回復(fù)
  4. 想知道資訊類插入廣告怎么理清楚,比如資訊分列表、正文等,我對這個(gè)已經(jīng)糊涂很久了

    來自安徽 回復(fù)
  5. 贊\(≧▽≦)/

    回復(fù)
  6. 樓主講的太好了,對我這種小白簡直是醍醐灌頂

    來自黑龍江 回復(fù)
  7. 其實(shí)一個(gè)產(chǎn)品經(jīng)理能把前后臺的交互原型搞清楚,那么需求基本就很清晰了。

    回復(fù)
  8. 給力

    來自浙江 回復(fù)
  9. 確實(shí)說的簡單明白,給力

    來自北京 回復(fù)
  10. 收藏按鈕的交互設(shè)計(jì)得不好,總是習(xí)慣性點(diǎn)星號沒反饋,再點(diǎn)字樣才能收藏 ?

    來自廣東 回復(fù)
  11. 簡潔明了

    來自湖南 回復(fù)
  12. ??

    來自廣東 回復(fù)
  13. 最近剛好在做視頻類平臺的后臺設(shè)計(jì),感覺要梳理的邏輯很多啊

    來自上海 回復(fù)
    1. 是直播還是錄播的視頻后臺,可以 交流一下嗎

      來自北京 回復(fù)
    2. 可以加個(gè)好友,交流下,同做前后端全包。。qq740601412

      來自北京 回復(fù)
  14. 不錯!不錯!不錯!不錯!不錯!不錯!

    來自貴州 回復(fù)
  15. 感謝分享,很好呢。

    來自江蘇 回復(fù)
  16. 學(xué)習(xí)了 ??

    來自上海 回復(fù)
    1. 是的?。?!

      來自貴州 回復(fù)
    2. 是否手動閥

      來自貴州 回復(fù)
    3. 是的!??!11111

      來自貴州 回復(fù)
    4. 是的?。。?!

      來自貴州 回復(fù)
  17. 感謝分享,非常好~

    來自中國 回復(fù)