從前臺頁面反推后臺系統(tǒng)設(shè)計
在實際工作中,由于前后端由不同的產(chǎn)品同事負責(zé),在設(shè)計方案時如果對前后臺都有了解,能減少雙方的溝通障礙、提升需求方案設(shè)計的效率。
01 看前臺
查看前臺顯示效果,要多看幾個,盡量把場景覆蓋全(比如經(jīng)停和中轉(zhuǎn))
02 理字段
我們把字段理一理,理字段是為了確定方案里會涉及到哪些內(nèi)容,如圖:
03 推方案
根據(jù)前臺效果,確定后臺的呈現(xiàn)方式;看機票的呈現(xiàn)樣式,后臺可以采用平鋪頁面填寫字段的方案;
【前后臺本身就是一體,當(dāng)然也可以根據(jù)后臺反推前臺,角度不同而已】
理完字段和后臺方案確定之后,最笨拙的辦法就出現(xiàn)了:
針對我們整理的字段,前臺每一個字段都對應(yīng)后臺的一個輸入框,在后臺填寫每一個字段的值。
04 再優(yōu)化
業(yè)務(wù)同事每天都要上線多條資源,人工手動錄入既不方便又容易出錯;
如果每一個字段都需要業(yè)務(wù)同事手動填寫,那上線一個機票資源是多么麻煩的事;
此時,可以往【是否可以通過系統(tǒng)簡化操作】的方向進行嘗試。
實際情況是可以通過輸入航班號自動帶入信息;
于是,方案就優(yōu)化成了:
1. 先錄入航班信息
2. 通過選擇的航班號自動帶入航班信息,其他信息再由業(yè)務(wù)手動輸入
05 處理業(yè)務(wù)邏輯
方案并沒有結(jié)束,我們目前只是處理了可見層面的字段,還有一些隱藏的邏輯;
問:在前臺點擊26日這個機票資源能出現(xiàn),點擊27日又不出現(xiàn) ——> 背后的原因是什么?
答:通過資源的團期庫存判斷,看團期是否存在,剩余庫存是否為0。
問:返程日期怎么確定?
答:往返機票資源在基礎(chǔ)信息模塊中新增“往返天數(shù)”字段,基于出發(fā)日期計算返程日期。
【往返機票也有可能由2個單程機票進行組合而成,此處以真實的往返機票為例】
問:這個資源是哪個供應(yīng)商的,聯(lián)系方式是什么?
答:資源的基礎(chǔ)信息模塊新增供應(yīng)商信息
問:每個資源我們都知道有價格,而價格關(guān)聯(lián)庫存,這個資源的團期/價格/庫存怎么設(shè)置?
答:通過資源的團期報價模塊“新增/修改團期報價”功能實現(xiàn)
機票資源的系統(tǒng)方案設(shè)計到此結(jié)束。
在第3點“推方案”上再插入一個酒店資源的方案:
1. 看前臺
2. 理字段
略
3. 推方案
基礎(chǔ)知識:酒店的三層結(jié)構(gòu)
酒店 —> 房型 —> 政策
酒店:酒店名稱
房型:同一酒店下有多個房型
政策:同一房型下會有供應(yīng)商提供的不同政策
基于酒店資源的這種情況,有2種方案可以參考:
方案A:以頁面為載體,每一個層級對應(yīng)一個頁面
1)酒店列表頁
2)點擊“房型列表”,查看房型列表
3)點擊“政策”,查看政策列表
總結(jié):每一個層級對應(yīng)一個頁面,進入到政策列表頁就需要3個頁面,再加上去維護政策的基礎(chǔ)信息和團期報價,總共要進入4個頁面
方案B:通過折疊的形式減少頁面
1)酒店列表頁
2)點擊“查看政策”按鈕,進入到政策列表頁
總結(jié):
通過在酒店列表頁展開酒店可以查看到該酒店下的房型信息,這樣就把房型列表頁合并到了酒店列表頁中;
減少了一個頁面(減少頁面同時減少了層級,使得酒店結(jié)構(gòu)更清晰,業(yè)務(wù)同事更容易理解)
方案A和方案B都可以使用,我更推薦方案B。
實際場景下:
如果你是C端產(chǎn)品,你想做中轉(zhuǎn)機票的前臺呈現(xiàn),你該知道所謂的中轉(zhuǎn)機票也是在后臺方案的基礎(chǔ)上加一個中轉(zhuǎn)標記而已。
如果你是B端產(chǎn)品,你想推進中轉(zhuǎn)機票的接入,你該知道要在后臺通過什么方式給到前臺做區(qū)分,也能大致判斷出前臺中轉(zhuǎn)機票的顯示樣式。
前后臺都了解,才能更高效率地完成需求方案的設(shè)計。
本文由 @屁顛屁顛 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于 CC0 協(xié)議
感覺還是有點淺哦,一個信息的呈現(xiàn),背后可能有很多中臺系統(tǒng)的流轉(zhuǎn)。害,那一塊好復(fù)雜