后臺產(chǎn)品設(shè)計的五大標(biāo)準(zhǔn)套路

我們在做后臺產(chǎn)品的時候讨阻,經(jīng)常會被復(fù)雜的業(yè)務(wù)邏輯的搞得很亂,同時有些時候也不知道接下來該如何設(shè)計聚蝶。的確杰妓,后臺產(chǎn)品一般由于實際業(yè)務(wù)的變化而使得需求差異很大,同時由于其繁瑣的操作設(shè)計流程碘勉,許多時候會感覺到無從下手巷挥。

但其實,后臺產(chǎn)品也有著自己的一些套路验靡,這些套路可以讓你在設(shè)計后臺產(chǎn)品的時候可以有一個較為清晰的步驟目標(biāo)快速的搭建起一些頁面的骨骼倍宾,在設(shè)計的時候不至于無從下手。

套路一:默認(rèn)頁面一般為統(tǒng)計頁面

1胜嗓、為什么要設(shè)計默認(rèn)頁面

有時候我們在登錄一些后臺產(chǎn)品的時候高职,在沒有權(quán)重特別高的需求頁面時,默認(rèn)頁面一般不知道放什么辞州。有些產(chǎn)品可能會默認(rèn)放一些歡迎圖片怔锌,有些產(chǎn)品甚至就是空頁面,什么都沒有(我現(xiàn)在公司的產(chǎn)品就是這樣)。

可實際情況是产禾,默認(rèn)頁面絕對是系統(tǒng)中很重要的一個頁面,用戶進入系統(tǒng)的最初接觸的就是它牵啦,所以說如果對它不進行配置的話會很浪費亚情,同時會讓用戶感覺整個系統(tǒng)的體驗不佳。

2哈雏、默認(rèn)頁面的設(shè)計分析

筆者認(rèn)為楞件,默認(rèn)頁面要顯示什么,取決于兩個方面:

不需要用戶的操作并且沒有任何前置頁面即可展示的功能裳瘪。

用戶在打開系統(tǒng)的時候第一時間想看到什么土浸。

而統(tǒng)計頁面,剛好符合這兩個方面彭羹,首先統(tǒng)計的數(shù)據(jù)是不需要任何操作進行觸發(fā)的黄伊,它取決于你整體業(yè)務(wù)及當(dāng)前使用者截止到目前為止的一個情況,其次用戶在打開系統(tǒng)的時候派殷,其目的性就在于要完成工作任務(wù)——自己還有哪些工作沒有做还最,以及即將要做什么工作。所以這個時候毡惜,數(shù)據(jù)的統(tǒng)計頁面就十分應(yīng)景拓轻。

3、如何設(shè)計默認(rèn)頁面

那么統(tǒng)計頁面要統(tǒng)計什么數(shù)據(jù)呢经伙?我認(rèn)為從三個方面考慮比較得當(dāng):

當(dāng)前角色可以看到的系統(tǒng)級別的數(shù)據(jù)扶叉;

用戶自身要進行操作的數(shù)據(jù)。

通知類內(nèi)容帕膜。

第一個方面我們在設(shè)計系統(tǒng)的時候枣氧,要考慮到哪些數(shù)據(jù)是需要統(tǒng)計的,比如電商系統(tǒng)中的下單率泳叠,客單價作瞄,訂單總數(shù),訂單總金額危纫、單品銷售排行榜等宗挥,然后再將這些統(tǒng)計數(shù)據(jù)通過權(quán)限的劃分分配給不同的角色。

第二個方面是用戶自身的數(shù)據(jù)种蝶,主要有工作流的狀態(tài)即當(dāng)前用戶的工作流中已經(jīng)流轉(zhuǎn)到該用戶的一些操作契耿,諸如合同審批,發(fā)貨審批等等一系列的流程螃征。

第三個方面通知類的內(nèi)容主要有以下幾類:

某些關(guān)聯(lián)的工作到一段時間內(nèi)有了新的狀態(tài)需要提醒:比如物流發(fā)貨搪桂,或者財務(wù)審核通過。

系統(tǒng)內(nèi)部的一些警醒:比如倉庫容量已到臨界值。

當(dāng)前時間截點的警示:比如租戶踢械、車位酗电、合同等等即將到期。

套路二:不同功能之間多用標(biāo)簽切換内列,慎用跳轉(zhuǎn)和新增頁面撵术。

1、標(biāo)簽切換方式的背景

在一開始的后臺產(chǎn)品中话瞧,大多都是基于C/S架構(gòu)開發(fā)的產(chǎn)品嫩与。這些產(chǎn)品不僅安裝復(fù)雜,有些甚至需要配數(shù)據(jù)庫交排,如果沒有專業(yè)人員去做這些操作划滋,只憑業(yè)務(wù)人員很難在一開始的時候?qū)⑾到y(tǒng)配置完善。所以埃篓,最初如果說購買了某一家的后臺產(chǎn)品处坪,只是在產(chǎn)品的初始階段,產(chǎn)品的提供方輕則有在線專業(yè)客服隨時跟進架专,重則有專門的業(yè)務(wù)人員上門安裝調(diào)試稻薇。

然而隨著HTML5、Ajax等技術(shù)的誕生與不斷地成熟胶征,如今的后臺產(chǎn)品大多都采用B/S的架構(gòu)塞椎,并且體驗方面并不比之前的C/S的體驗差。然而睛低,由于之前的做法已經(jīng)深入人心案狠,所以很多那個年代的設(shè)計習(xí)慣也就被保留了下來,標(biāo)簽切換就是那個時候的產(chǎn)物钱雷。

2骂铁、為什么不同功能之間要多用標(biāo)簽切換,慎用跳轉(zhuǎn)和新增頁面

雖說目前為止罩抗,大多的瀏覽器中內(nèi)置的標(biāo)簽切換也可以完成頁面之間的快速切換操作拉庵,但是系統(tǒng)內(nèi)部的標(biāo)簽切換還是十分有必要的。首先套蒂,在這樣大面積操作钞支,有著大量字段的頁面,點擊后肯定是不能覆蓋數(shù)據(jù)直接刷新頁面的操刀。同時烁挟,還必須兼?zhèn)渲S便切換查看之前的數(shù)據(jù)做對比分析以及多項工作需要對照同時來做的功能,這樣的操作可以快速的定位到當(dāng)前的操作模塊骨坑,并且方便的切換撼嗓。所以這個時候,頁面內(nèi)的標(biāo)簽切換就十分重要了。而對比瀏覽器的標(biāo)簽頁切換且警,其有以下幾點優(yōu)勢:

基于一個頁面操作粉捻,更像是C/S時代的系統(tǒng)級別的操作,整體操作內(nèi)容更加規(guī)整斑芜。

不同的瀏覽器之間可能有差異杀迹,諸如類似IE的瀏覽器并不是切換標(biāo)簽而是彈出新頁面,帶來了許多不便押搪。

在系統(tǒng)十分復(fù)雜,操作繁瑣或者打開頁面過多的情況下更容易也更方便定位浅碾。

套路三:記錄類列表的三大布局模塊:篩選大州、列表和新增

之前曾討論過“記錄類后臺產(chǎn)品”的一些特點,記錄類后臺產(chǎn)品的布局一般都比較固定垂谢,分為三大塊:篩選(或者叫搜索)部分厦画。列表部分,和新增滥朱。如果有一些特殊的業(yè)務(wù)需要根暑,會可能在這個上面新增一些其他的小的需求,但是大體上這樣的布局就可以滿足一般的業(yè)務(wù)徙邻。

1排嫌、篩選部分要仔細(xì)甄別篩選字段

一般來說,篩選部分主要是通過篩選時間段加上每一條記錄的字段內(nèi)容進行的篩選缰犁。記錄的字段就包括這項業(yè)務(wù)的特有字段淳地,比如商品列表頁面有“商品分類”“商品屬性”等;客戶列表有“客戶等級”“客戶手機號”等帅容。

在進行篩選部分的設(shè)計時颇象,篩選的字段可以分為選擇部分和填寫部分。選擇部分指的是某些字段的值在填寫的時候就已經(jīng)限定了并徘。只需要選擇篩選即可遣钳。填寫部分就是一些非固定的字段。

同時麦乞,在選擇填寫部分的字段作為篩選條件時蕴茴,最好不要超過兩個,因為填寫部分的篩選一般來說都比較精確姐直,過多并沒有實際意義荐开。所以在用哪個字段做填寫部分的篩選時,就應(yīng)當(dāng)慎重考慮简肴。

2晃听、新增部分要考慮交互方式

新增部分一般來說就是一個按鈕,點擊后有兩種方式可以進行記錄的新增:一是彈出新頁面,二是彈窗形式能扒。新頁面的方式在填寫字段較多及內(nèi)容比較重要的時候使用佣渴。彈窗形式一般在字段較少,以及內(nèi)容相對來說不需要十分慎重的填寫時使用初斑。

3辛润、重中之重的列表部分設(shè)計法則

列表部分是最重要的部分,也是頁面的核心部分见秤。頁面內(nèi)容的增刪改查砂竖,以及核心工作都在這里進行。當(dāng)然鹃答,其列表中的每一條數(shù)據(jù)都是有一個個的字段值堆疊而成的乎澄,字段上大致我分為以下幾個部分:

ID:每一條數(shù)據(jù)所具備的唯一標(biāo)識,一般都會加上测摔。

時間:數(shù)據(jù)的產(chǎn)生時間置济,操作類型的業(yè)務(wù)字段一般會有,比如庫存管理锋八,進貨單管理等浙于。配置類的一般可以沒有,比如角色配置等挟纱。

標(biāo)識名稱:確定該條記錄的標(biāo)識名稱字段羞酗,方便在其他部分用到時進行識別。

狀態(tài):增刪改查很重要的一個部分就是狀態(tài)的變更及查看紊服。比如“缺貨中整慎、貨源充足”“已簽訂、未簽訂围苫、簽訂結(jié)束”“入場店鋪裤园、未入場店鋪”等等和業(yè)務(wù)相關(guān)的內(nèi)容。

一系列的標(biāo)識字段:即新增內(nèi)容的時候填寫的字段需要考慮顯示在列表的剂府。

其他字段:不是填寫的拧揽,但是也必須生成的,比如某個用戶填寫后生成記錄會有“填寫人”字段腺占。

工作流:涉及到工作流時淤袜,工作流的狀態(tài)顯示。

操作:操作相當(dāng)于整個頁面的核心內(nèi)容和主要功能衰伯。一般有查看铡羡、修改、以及對應(yīng)業(yè)務(wù)的操作內(nèi)容意鲸。

套路四:復(fù)雜難搞的工作流也有套路

工作流可以說是大部分的后臺系統(tǒng)中必須涉及到的內(nèi)容烦周,只要某一項工作不是一個人單獨去完成的尽爆,那就必然會涉及到工作流。但是同時读慎,工作流也是系統(tǒng)中比較難搞的一部分漱贱,無論是技術(shù)方面、業(yè)務(wù)方便還是邏輯方面夭委,工作流都可謂是異常復(fù)雜幅狮,但系統(tǒng)做多了之后,就會發(fā)現(xiàn)即便很難搞的工作流株灸,也有自己的套路崇摄。

1、標(biāo)準(zhǔn)工作流和非標(biāo)準(zhǔn)工作流

工作流如果按照概念劃分可以分為標(biāo)準(zhǔn)工作流和非標(biāo)準(zhǔn)工作流慌烧。標(biāo)準(zhǔn)工作流相對來說比較簡單逐抑,即某一項工作在進行的過程中,所有的流程都是規(guī)劃好的杏死。某一個角色和角色的操作都是固定的,要想完成這項工作捆交,只需要一步步的按照流程來即可完成淑翼。

非標(biāo)準(zhǔn)工作流則有些復(fù)雜,它會涉及到與或非這樣的邏輯判斷品追,我相信對于一個產(chǎn)品經(jīng)理來說這樣的判斷并不是什么難事玄括。比如某一項工作在進行哪一步的時候?qū)徍送ㄟ^是一個流程,審核不通過是另一個流程肉瓦,在某一步時兩種角色都可以進行操作遭京,或者兩種角色都必須進行操作才能進行下一步。這樣的流程是要比標(biāo)準(zhǔn)工作流復(fù)雜一些泞莉,但是遇到一些復(fù)雜的業(yè)務(wù)是必然會涉及到的哪雕。產(chǎn)品經(jīng)理對于流程的梳理我相信問題不會很大,唯一要仔細(xì)的就是不要遺忘流程或者角色鲫趁,這時有些時候?qū)τ谝恍┕ぷ鱽碚f是致命的斯嚎。

2、如何設(shè)計工作流

對于一些系統(tǒng)而言挨厚,許多的權(quán)限都是可以自定義配置的堡僻,所以對應(yīng)的工作流當(dāng)然也可以進行配置。那么在配置的時候疫剃,把每一層的邏輯都考慮清楚钉疫,是必然需要考慮的。我的套路一般都是先配置流程巢价,再配置角色牲阁,配置流程的時候固阁,如果操作者有一定的技術(shù)能力,可能讓其用SQL語句進行自定義配置咨油,如果沒有的話可以用流程圖的形式表現(xiàn)出來再往里面填加角色您炉。如果要再小白一些,可以將每一個非標(biāo)準(zhǔn)化流程拆成一個個的標(biāo)準(zhǔn)化流程役电,單獨去配置赚爵,雖說麻煩一些,但是對于用戶來說法瑟,整體的操作邏輯則會簡單很多冀膝。

套路五:生殺大權(quán)——“權(quán)限配置”

權(quán)限配置對于一個后臺系統(tǒng)來說也十分重要,可以說權(quán)限配置就相當(dāng)于用戶的生殺大權(quán)霎挟,掌握著你可以做什么窝剖,不能做什么。所以設(shè)計好權(quán)限配置的模塊酥夭,就顯得十分重要了赐纱。

1、用戶角色配置和角色權(quán)限配置

權(quán)限配置一般分為兩個部分熬北,用戶角色配置和角色權(quán)限配置疙描。有些系統(tǒng)可能比較簡單,所以在設(shè)計的時候讶隐,初始就直接給用戶附上了某些權(quán)限起胰。在初始的時候,可能會覺得比較便捷巫延,但是一旦用戶變多效五,處理起來就相當(dāng)?shù)穆闊K栽谝婚_始設(shè)計系統(tǒng)的時候炉峰,就要將角色和用戶分清楚畏妖。

2、如何設(shè)計權(quán)限配置

在配置權(quán)限的時候疼阔,應(yīng)當(dāng)配置的是角色的權(quán)限瓜客,將權(quán)限賦予角色之上,比如“采購員”“庫管”等竿开。另外有些權(quán)限的功能可能用語言表述不清楚谱仪,這時就可以將鏈接加上,點擊可以明確的查看這個功能是做什么的否彩。如果再嚴(yán)謹(jǐn)一些疯攒,可以將資源的路徑寫上,確保其唯一性列荔。在配置用戶角色的時候敬尺,用戶可以賦予多個角色枚尼。這樣分開來配置,會更加的合理砂吞。

以上就是我總結(jié)的一些套路署恍。后臺產(chǎn)品可以說博大精深,每一個系統(tǒng)所做出來的東西也有著千姿百態(tài)的差異蜻直。但是我們要在不同中尋求相同盯质,找出其中的套路,以不變來應(yīng)萬變概而。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末呼巷,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子赎瑰,更是在濱河造成了極大的恐慌王悍,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件餐曼,死亡現(xiàn)場離奇詭異压储,居然都是意外死亡,警方通過查閱死者的電腦和手機源譬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進店門集惋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人瓶佳,你說我怎么就攤上這事芋膘×矍啵” “怎么了霸饲?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長臂拓。 經(jīng)常有香客問我厚脉,道長,這世上最難降的妖魔是什么胶惰? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任傻工,我火速辦了婚禮,結(jié)果婚禮上孵滞,老公的妹妹穿的比我還像新娘中捆。我一直安慰自己,他們只是感情好坊饶,可當(dāng)我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布泄伪。 她就那樣靜靜地躺著,像睡著了一般匿级。 火紅的嫁衣襯著肌膚如雪蟋滴。 梳的紋絲不亂的頭發(fā)上染厅,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天,我揣著相機與錄音津函,去河邊找鬼肖粮。 笑死,一個胖子當(dāng)著我的面吹牛尔苦,可吹牛的內(nèi)容都是我干的涩馆。 我是一名探鬼主播,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼蕉堰,長吁一口氣:“原來是場噩夢啊……” “哼凌净!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起屋讶,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤冰寻,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后皿渗,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體斩芭,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡钧嘶,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年赘阀,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片昼捍。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡挤土,死狀恐怖琴庵,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情仰美,我是刑警寧澤迷殿,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站咖杂,受9級特大地震影響庆寺,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜诉字,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一懦尝、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧壤圃,春花似錦陵霉、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至墨叛,卻和暖如春止毕,著一層夾襖步出監(jiān)牢的瞬間模蜡,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工扁凛, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留忍疾,地道東北人。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓谨朝,卻偏偏與公主長得像卤妒,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子字币,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,786評論 2 345

推薦閱讀更多精彩內(nèi)容