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

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

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

一、頁面整體框架

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

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

二、列表

列表的功能設(shè)計要點如下：

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

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

三、新增

新增的功能設(shè)計要點如下：

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

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

四、編輯

界定編輯的功能時，需要注意以下幾點。

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

五、刪除

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

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

六、查詢

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

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

七、導(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ù)場景進(jìn)行設(shè)計，沒有特殊要求可以設(shè)置為10000條數(shù)據(jù)，拆分多個表導(dǎo)出。

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

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

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

九、后臺常用測試用例整理

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

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

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