編輯導(dǎo)讀：后臺(tái)管理系統(tǒng)，會(huì)根據(jù)不同公司、不同業(yè)務(wù)的要求做出改變。那么，有沒有通用的功能和和需求設(shè)計(jì)模版呢？有的。本文作者基于自身工作經(jīng)驗(yàn)，總結(jié)了一套通用的后臺(tái)管理系統(tǒng)需求及原型設(shè)計(jì)，與你分享。

網(wǎng)上很多系統(tǒng)的參考多數(shù)為業(yè)務(wù)中臺(tái)，過于帶有業(yè)務(wù)色彩。做過三四個(gè)后臺(tái)管理系統(tǒng)，從中總結(jié)了一個(gè)通用的功能和需求設(shè)計(jì)模版，供大家參考。本文適用于0-2歲的產(chǎn)品經(jīng)理做基礎(chǔ)功能設(shè)計(jì)，通俗易懂，放心食用。

一個(gè)后臺(tái)管理系統(tǒng)，大部分是對(duì)系統(tǒng)產(chǎn)生對(duì)數(shù)據(jù)進(jìn)行各種操作，或者是對(duì)移動(dòng)端的內(nèi)容進(jìn)行配置。所以對(duì)于數(shù)據(jù)的操作逃脫不了“增刪改查”，在這個(gè)基礎(chǔ)上，擴(kuò)展一下“排序?qū)С觥钡裙δ堋?/p>

一、頁面整體框架

大家可以根據(jù)前端的技術(shù)選型，選擇對(duì)應(yīng)的UI框架元件庫，目前常見的UI框架是element、iview、ant-design等。這些元件庫，在網(wǎng)上有很多付費(fèi)優(yōu)質(zhì)資源，可以直接載入axure中使用。我選取了一個(gè)常見的框架樣式，為大家講解。

此框架中，頭部為功能模塊，左側(cè)為一級(jí)菜單、二級(jí)菜單，右側(cè)為功能頁面。這種適用于業(yè)務(wù)較多較復(fù)雜的后臺(tái)。右上角為系統(tǒng)設(shè)置，個(gè)人賬號(hào)管理等基本功能。

二、列表

列表的功能設(shè)計(jì)要點(diǎn)如下：

• 列表數(shù)據(jù)的排序：正序、倒序。比如按數(shù)據(jù)的創(chuàng)建時(shí)間倒序，即數(shù)據(jù)越新的越靠前。如果做的高級(jí)一些，可以在時(shí)間的位置，設(shè)計(jì)排序功能，同時(shí)支持正序和倒序，可以互相切換。
• 數(shù)據(jù)的翻頁：一般為20個(gè)數(shù)據(jù)一頁，翻頁加載需要前端做好處理。可以增加頁面跳轉(zhuǎn)，跳轉(zhuǎn)至首頁/尾頁的功能。不過在前端組件里，這個(gè)是通用組件，可以直接套用。
• 數(shù)據(jù)的選擇：多選數(shù)據(jù)（復(fù)選框）、分為全選本頁、全選所有數(shù)據(jù)、反選本頁、反選全部數(shù)據(jù)。選擇后對(duì)此批數(shù)據(jù)進(jìn)行批量操作。
• 列表字段：標(biāo)明字段的來源和定義。例如，公司名稱取【新建】時(shí)的值，【創(chuàng)建時(shí)間】取此條數(shù)據(jù)創(chuàng)建時(shí)的系統(tǒng)時(shí)間。一般來源分為后臺(tái)創(chuàng)建、前臺(tái)（業(yè)務(wù)端）創(chuàng)建、系統(tǒng)生成、從其他模塊帶出、歷史緩存。

可以根據(jù)下表梳理說明，附在原型圖的右側(cè)。

三、新增

新增的功能設(shè)計(jì)要點(diǎn)如下：

• 定義字段的輸入類型：輸入框、下拉框、單選、多選等。（就是原型中的表單元素）
• 定義輸入型元素的約束條件：字符、文本、英文、數(shù)字等。
• 定義選擇型元素的枚舉值：例如，字段名：姓名；類型：下拉選擇；枚舉值：男/女。
• 是否必填：必填項(xiàng)標(biāo)記出來。
• 提示語：顯示在輸入框里，提示用戶如何填寫。一般為灰色。
• 是否允許編輯：在編輯時(shí)，此字段是否允許編輯，編輯是否有其他限制。

可以根據(jù)下表梳理說明，附在原型圖的右側(cè)。

四、編輯

界定編輯的功能時(shí)，需要注意以下幾點(diǎn)。

• 權(quán)限設(shè)計(jì)：哪個(gè)角色有編輯此數(shù)據(jù)的權(quán)限。
• 操作記錄：需要記錄此條數(shù)據(jù)在什么時(shí)間被誰做了什么編輯操作。
• 時(shí)效性：如果業(yè)務(wù)允許多人編輯同一條數(shù)據(jù)，如果某個(gè)用戶在編輯時(shí)，內(nèi)容已被其他用戶修改，這里要做一個(gè)“鎖”，在保存或者其他操作時(shí)提示用戶，你的數(shù)據(jù)不是最新的，請(qǐng)刷新后再次進(jìn)行編輯。（此處根據(jù)具體業(yè)務(wù)場(chǎng)景做匹配用戶體驗(yàn)的功能設(shè)計(jì)）

五、刪除

刪除操作是個(gè)敏感操作，注意事項(xiàng)跟編輯類似。哪個(gè)角色有權(quán)限刪除數(shù)據(jù)，需要有操作記錄，并且需要根據(jù)具體業(yè)務(wù)設(shè)置刪除的限制條件。

例如：刪除一個(gè)銷售人員，前置條件為此銷售名下沒有關(guān)聯(lián)客戶，此處就要延伸出一個(gè)客戶轉(zhuǎn)移的功能。

六、查詢

后臺(tái)的查詢相對(duì)于前臺(tái)業(yè)務(wù)的搜索查詢簡(jiǎn)單的多，只需要列出，查詢的字段和類型即可，再明確好交互。

查詢字段名稱是否需要模糊檢索，下拉選擇的枚舉值列出來。交互方面是輸入后即可查詢還是需要點(diǎn)擊查詢按鈕。

七、導(dǎo)出

• 導(dǎo)出分為：導(dǎo)出列表所有數(shù)據(jù)、導(dǎo)出當(dāng)頁數(shù)據(jù)、導(dǎo)出選中數(shù)據(jù)、導(dǎo)出查詢后數(shù)據(jù)。
• 數(shù)據(jù)分為：導(dǎo)出部分字段、導(dǎo)出所有字段。規(guī)定導(dǎo)出的格式是.xls還是.csv。
• 明確導(dǎo)出數(shù)據(jù)限制：根據(jù)具體業(yè)務(wù)場(chǎng)景進(jìn)行設(shè)計(jì)，沒有特殊要求可以設(shè)置為10000條數(shù)據(jù)，拆分多個(gè)表導(dǎo)出。

八、原型設(shè)計(jì)（極其好用的元件）

有幾個(gè)通過中繼器實(shí)現(xiàn)的后臺(tái)元件，很好用，分享給大家。原創(chuàng)作者：蝸牛。

通過修改中繼器中的值，快速生成表單和導(dǎo)航菜單。無需畫圖，拖入畫布中，修改中繼器中的值即可。元件庫中還有各種利用中繼器快速配置界面的功能，歡迎大家下載。

九、后臺(tái)常用測(cè)試用例整理

作者平時(shí)留意并收集了一些測(cè)試用例，對(duì)設(shè)計(jì)后臺(tái)的功能非常有幫助，大家在設(shè)計(jì)時(shí)，也可以對(duì)照著測(cè)試用例看看，是否有描述不到或者不清晰的地方。

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

題圖來自Unsplash, 基于CC0協(xié)議