文章為作者工作總結(jié)的幾個后臺產(chǎn)品設(shè)計套路，干貨滿滿，希望其中的設(shè)計之道能夠給你帶來些啟發(fā)借鑒。

我們在做后臺產(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)中很重要的一個頁面，用戶進(jìn)入系統(tǒng)的最初接觸的就是它，所以說如果對它不進(jìn)行配置的話會很浪費，同時會讓用戶感覺整個系統(tǒng)的體驗不佳。

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

筆者認(rèn)為，默認(rèn)頁面要顯示什么，取決于兩個方面：

1. 不需要用戶的操作并且沒有任何前置頁面即可展示的功能。
2. 用戶在打開系統(tǒng)的時候第一時間想看到什么。

而統(tǒng)計頁面，剛好符合這兩個方面，首先統(tǒng)計的數(shù)據(jù)是不需要任何操作進(jìn)行觸發(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ù)；
• 用戶自身要進(jìn)行操作的數(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)容主要有以下幾類：

1. 某些關(guān)聯(lián)的工作到一段時間內(nèi)有了新的狀態(tài)需要提醒：比如物流發(fā)貨，或者財務(wù)審核通過。
2. 系統(tǒng)內(nèi)部的一些警醒：比如倉庫容量已到臨界值。
3. 當(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è)客服隨時跟進(jìn)，重則有專門的業(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)勢：

1. 基于一個頁面操作，更像是C/S時代的系統(tǒng)級別的操作，整體操作內(nèi)容更加規(guī)整。
2. 不同的瀏覽器之間可能有差異，諸如類似IE的瀏覽器并不是切換標(biāo)簽而是彈出新頁面，帶來了許多不便。
3. 在系統(tǒng)十分復(fù)雜，操作繁瑣或者打開頁面過多的情況下更容易也更方便定位。

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

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

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

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

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

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

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

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

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

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

• ID：每一條數(shù)據(jù)所具備的唯一標(biāo)識，一般都會加上。
• 時間：數(shù)據(jù)的產(chǎn)生時間，操作類型的業(yè)務(wù)字段一般會有，比如庫存管理，進(jìn)貨單管理等。配置類的一般可以沒有，比如角色配置等。
• 標(biāo)識名稱：確定該條記錄的標(biāo)識名稱字段，方便在其他部分用到時進(jìn)行識別。
• 狀態(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)工作流相對來說比較簡單，即某一項工作在進(jìn)行的過程中，所有的流程都是規(guī)劃好的。某一個角色和角色的操作都是固定的，要想完成這項工作，只需要一步步的按照流程來即可完成。

非標(biāo)準(zhǔn)工作流則有些復(fù)雜，它會涉及到與或非這樣的邏輯判斷，我相信對于一個產(chǎn)品經(jīng)理來說這樣的判斷并不是什么難事。比如某一項工作在進(jìn)行哪一步的時候?qū)徍送ㄟ^是一個流程，審核不通過是另一個流程，在某一步時兩種角色都可以進(jìn)行操作，或者兩種角色都必須進(jìn)行操作才能進(jìn)行下一步。這樣的流程是要比標(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)然也可以進(jìn)行配置。那么在配置的時候，把每一層的邏輯都考慮清楚，是必然需要考慮的。我的套路一般都是先配置流程，再配置角色，配置流程的時候，如果操作者有一定的技術(shù)能力，可能讓其用SQL語句進(jìn)行自定義配置，如果沒有的話可以用流程圖的形式表現(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ù)穆闊?。所以在一開始設(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)萬變。

專欄作家

執(zhí)迷，微信公眾號：執(zhí)迷有悟，人人都是產(chǎn)品經(jīng)理專欄作家。電商O2O領(lǐng)域，關(guān)注數(shù)碼硬件，人工智能，新聞資訊領(lǐng)域。

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

題圖來自 Pexels，基于 CC0 協(xié)議