文章對系統管理和菜單管理的設計過程以及其中的業務邏輯展開了講解，主要适合從事網際網路産品設計、技術研發以及産品營運人員學習。
對于絕大數背景管理系統功能管理應該是它的重點，系統中涉及大量的功能子產品，能夠有一個清晰的結構劃分，無疑會提升員工的使用效率。如下圖：
01 功能分析
設計一個功能前，最重要的還是需求，了解清楚想要的功能，設計起來就會容易很多。導航的常見功能如下：
- 頁面導航: 菜單最基本的功能就是導航作用，可以在系統内部或系統外部自由切換。
- 功能劃分: 一個系統通常包含大量功能點，通過子產品劃分、層級結構可以更清晰的展示出系統架構
- 權限管理: 對于常見的門戶網站來說，菜單最主要的功能就是起到快捷導航作用，而對于後來系統來說，除了導航功能，它還涉及到權限功能。因為背景中涉及到大量的業務工作，是以在不同中頁面可能有多個操作按鈕，而操作按鈕無法單獨存在，需要依附在對應菜單上的。
02 字段功能
通過上面的對菜單功能的分析，可以整理出如下所需字段：
- 菜單名稱：功能作用的直接展現方式
- 父級菜單：展示父子級菜單的層級關系
- 跳轉方式：系統内部跳轉還是外部跳轉，參數值有：
- 站内跳轉：系統内部的跳轉，将URL設定為不帶域名的相對路徑(如:/user/index)
- 站外跳轉：系統外部的跳轉，将URL設定為帶有域名的絕對路徑(如：http://www.exp.com)
- 跳轉路徑：設定具體的跳轉位址
- 新頁面：跳轉後的頁面是在原始頁面還是打開新的頁面
- 頁面操作：列舉出所跳轉頁面内所有的操作功能，為後面的權限設定提供選項
- ICON: 頁面美化效果(不同系統略有差異，有些使用的是圖檔，根據自己需求而定)
- 狀态：導航功能是否正常使用，參數值有：
- 開啟：正常使用中的菜單
- 關閉：已停用的菜單
- 辨別碼: 系統内部識别的唯一辨別資訊，主要用在頁面權限判斷上
03 原型設計
清單頁原型：
表單頁原型：
上面對[頁面操作]的設計做幾點說明：
- 上面我們分析了頁面操作也會參與權限的判斷,代碼裡面不會寫漢字進行邏輯判斷，是以功能按鈕也需要設計對應的辨別碼
- 一個頁面中有多個操作按鈕，隻有具體到功能頁面才會知道，如大部分頁面都會有檢視、詳情、添加、編輯、删除功能，商品管理頁可能還會有上架、下架功能，财務相關頁面還會有稽核功能，是以這個功能需要動态管理。
04 小知識點
1. 跳轉：頁面跳轉是通過标簽實作的，如果a标簽中路徑設定為相對路徑，點選跳轉時系統會在相對路徑前自動添加目前系統的域名,如果路徑設定為帶有域名的絕對路徑，點選跳轉時則會直接跳轉到對應位址，當背景有多個業務系統時或者跳轉到
2. 辨別碼：當背景程式将資料入庫後，資料庫會自動配置設定一個唯一的ID，後期一些特定的判斷我們會通過在代碼中寫死ID值來擷取指定的資料。但是這會産生一個問題，開發時的測試資料庫經常會進行人為資料删減，而生成環境的資料庫是規整的，是以會産生看似相同的資料但是資料庫ID值不一樣的情況，而寫死在代碼裡面的ID值是參考測試庫的ID，最終導緻功能上線後不可用。是以通常的解決方案就是加一個可維護的辨別碼，代碼中通過寫死辨別碼來獲得具體的資料資訊。這種方式在我們後期很多設計中都會使用。
3. 辨別碼編碼:對于系統各個功能編碼，不同人有不用的習慣或者要求，我個人對菜單的編碼是給每個層級菜單一個兩位數字，如果層級不夠三級用零補齊；而頁面功能按鈕，根據字面意思翻譯成英語, 如：
系統管理 [100000]
| – 菜單管理 [100100] 檢視[get] 添加[add] 編輯[edit] 詳情[detail] 删除[drop]
| – 組織架構 [100200]
消息管理 [110000]
|- 訂單消息 [110100]
|- ….
4. 頁面權限判斷：當使用者進入到對應頁面，會先通過菜單辨別碼(辨別碼被寫死在代碼裡)請求背景資料擷取到頁面功能權限清單，再在頁面中根據比對的功能辨別碼顯示對應的操作按鈕。如：使用者進入【系統管理->菜單管理[100100]】, 接口則通過100100請求權限接口傳回頁面功能權限清單,如：[get,detail], 頁面顯示 檢視、詳情功能按鈕。
作者：JackLiu；個人微信公衆号: 揚帆去遠航(ID:Jackai_liu)
本文由 @Jack 原創釋出于人人都是産品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協定。