電商系統訂單設計「在線訂單管理系統設計」

文章對系統管理和菜單管理的設計過程以及其中的業務邏輯展開了講解，主要適合從事互聯網產品設計、技術研發以及產品運營人員學習。

對于絕大數后臺管理系統功能管理應該是它的重點，系統中涉及大量的功能模塊，能夠有一個清晰的結構劃分，無疑會提升員工的使用效率。如下圖：

01 功能分析

設計一個功能前，最重要的還是需求，了解清楚想要的功能，設計起來就會容易很多。導航的常見功能如下：

頁面導航: 菜單最基本的功能就是導航作用，可以在系統內部或系統外部自由切換。功能劃分: 一個系統通常包含大量功能點，通過模塊劃分、層級結構可以更清晰的展示出系統架構權限管理: 對于常見的門戶網站來說，菜單最主要的功能就是起到快捷導航作用，而對于后來系統來說，除了導航功能，它還涉及到權限功能。因為后臺中涉及到大量的業務工作，所以在不同中頁面可能有多個操作按鈕，而操作按鈕無法單獨存在，需要依附在對應菜單上的。

02 字段功能

通過上面的對菜單功能的分析，可以整理出如下所需字段：

菜單名稱：功能作用的直接體現方式父級菜單：展示父子級菜單的層級關系跳轉方式：系統內部跳轉還是外部跳轉，參數值有：站內跳轉：系統內部的跳轉，將URL設置為不帶域名的相對路徑(如:/user/index)站外跳轉：系統外部的跳轉，將URL設置為帶有域名的絕對路徑(如：http://www.exp.com)跳轉路徑：設置具體的跳轉地址新頁面：跳轉后的頁面是在原始頁面還是打開新的頁面頁面操作：列舉出所跳轉頁面內所有的操作功能，為后面的權限設置提供選項ICON: 頁面美化效果(不同系統略有差異，有些使用的是圖片，根據自己需求而定)狀態：導航功能是否正常使用，參數值有：開啟：正常使用中的菜單關閉：已停用的菜單標識碼: 系統內部識別的唯一標識信息，主要用在頁面權限判斷上

03 原型設計

列表頁原型：

表單頁原型：

上面對[頁面操作]的設計做幾點說明：

上面我們分析了頁面操作也會參與權限的判斷,代碼里面不會寫漢字進行邏輯判斷，所以功能按鈕也需要設計對應的標識碼一個頁面中有多個操作按鈕，只有具體到功能頁面才會知道，如大部分頁面都會有查看、詳情、添加、編輯、刪除功能，商品管理頁可能還會有上架、下架功能，財務相關頁面還會有審核功能，所以這個功能需要動態管理。

04 小知識點

1. 跳轉：頁面跳轉是通過<a href=”/>標簽實現的，如果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協議。