文章對系統(tǒng)管理和菜單管理的設(shè)計(jì)過程以及其中的業(yè)務(wù)邏輯展開了講解，主要適合從事互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)、技術(shù)研發(fā)以及產(chǎn)品運(yùn)營人員學(xué)習(xí)。

對于絕大數(shù)后臺管理系統(tǒng)功能管理應(yīng)該是它的重點(diǎn)，系統(tǒng)中涉及大量的功能模塊，能夠有一個清晰的結(jié)構(gòu)劃分，無疑會提升員工的使用效率。如下圖：

01 功能分析

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

• 頁面導(dǎo)航: 菜單最基本的功能就是導(dǎo)航作用，可以在系統(tǒng)內(nèi)部或系統(tǒng)外部自由切換。
• 功能劃分: 一個系統(tǒng)通常包含大量功能點(diǎn)，通過模塊劃分、層級結(jié)構(gòu)可以更清晰的展示出系統(tǒng)架構(gòu)
• 權(quán)限管理: 對于常見的門戶網(wǎng)站來說，菜單最主要的功能就是起到快捷導(dǎo)航作用，而對于后來系統(tǒng)來說，除了導(dǎo)航功能，它還涉及到權(quán)限功能。因?yàn)楹笈_中涉及到大量的業(yè)務(wù)工作，所以在不同中頁面可能有多個操作按鈕，而操作按鈕無法單獨(dú)存在，需要依附在對應(yīng)菜單上的。

02 字段功能

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

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

03 原型設(shè)計(jì)

列表頁原型：

表單頁原型：

上面對[頁面操作]的設(shè)計(jì)做幾點(diǎn)說明：

1. 上面我們分析了頁面操作也會參與權(quán)限的判斷,代碼里面不會寫漢字進(jìn)行邏輯判斷，所以功能按鈕也需要設(shè)計(jì)對應(yīng)的標(biāo)識碼
2. 一個頁面中有多個操作按鈕，只有具體到功能頁面才會知道，如大部分頁面都會有查看、詳情、添加、編輯、刪除功能，商品管理頁可能還會有上架、下架功能，財(cái)務(wù)相關(guān)頁面還會有審核功能，所以這個功能需要動態(tài)管理。

04 小知識點(diǎn)

1. 跳轉(zhuǎn)：頁面跳轉(zhuǎn)是通過<a href=”/>標(biāo)簽實(shí)現(xiàn)的，如果a標(biāo)簽中路徑設(shè)置為相對路徑，點(diǎn)擊跳轉(zhuǎn)時系統(tǒng)會在相對路徑前自動添加當(dāng)前系統(tǒng)的域名,如果路徑設(shè)置為帶有域名的絕對路徑，點(diǎn)擊跳轉(zhuǎn)時則會直接跳轉(zhuǎn)到對應(yīng)地址，當(dāng)后臺有多個業(yè)務(wù)系統(tǒng)時或者跳轉(zhuǎn)到

2. 標(biāo)識碼：當(dāng)后臺程序?qū)?shù)據(jù)入庫后，數(shù)據(jù)庫會自動分配一個唯一的ID，后期一些特定的判斷我們會通過在代碼中寫死ID值來獲取指定的數(shù)據(jù)。但是這會產(chǎn)生一個問題，開發(fā)時的測試數(shù)據(jù)庫經(jīng)常會進(jìn)行人為數(shù)據(jù)刪減，而生成環(huán)境的數(shù)據(jù)庫是規(guī)整的，所以會產(chǎn)生看似相同的數(shù)據(jù)但是數(shù)據(jù)庫ID值不一樣的情況，而寫死在代碼里面的ID值是參考測試庫的ID，最終導(dǎo)致功能上線后不可用。所以通常的解決方案就是加一個可維護(hù)的標(biāo)識碼，代碼中通過寫死標(biāo)識碼來獲得具體的數(shù)據(jù)信息。這種方式在我們后期很多設(shè)計(jì)中都會使用。

3. 標(biāo)識碼編碼: 對于系統(tǒng)各個功能編碼，不同人有不用的習(xí)慣或者要求，我個人對菜單的編碼是給每個層級菜單一個兩位數(shù)字，如果層級不夠三級用零補(bǔ)齊；而頁面功能按鈕，根據(jù)字面意思翻譯成英語, 如：

系統(tǒng)管理? [100000]

| – 菜單管理 [100100]? ?查看[get] ? ?添加[add] ? 編輯[edit] ?詳情[detail] ?刪除[drop]

| – 組織架構(gòu)? [100200]

消息管理? [110000]

|- 訂單消息 [110100]

|-?….

4. 頁面權(quán)限判斷：當(dāng)用戶進(jìn)入到對應(yīng)頁面，會先通過菜單標(biāo)識碼(標(biāo)識碼被寫死在代碼里)請求后臺數(shù)據(jù)獲取到頁面功能權(quán)限列表，再在頁面中根據(jù)匹配的功能標(biāo)識碼顯示對應(yīng)的操作按鈕。如：用戶進(jìn)入【系統(tǒng)管理->菜單管理[100100]】, 接口則通過100100請求權(quán)限接口返回頁面功能權(quán)限列表,如：[get,detail], 頁面顯示 查看、詳情功能按鈕。

作者：JackLiu；個人微信公眾號: 揚(yáng)帆去遠(yuǎn)航（ID:Jackai_liu)

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

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