電商后臺(tái)設(shè)計(jì):系統(tǒng)管理、菜單管理

13 評(píng)論 34733 瀏覽 179 收藏 7 分鐘

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

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

01 功能分析

設(shè)計(jì)一個(gè)功能前,最重要的還是需求,了解清楚想要的功能,設(shè)計(jì)起來(lái)就會(huì)容易很多。導(dǎo)航的常見(jiàn)功能如下:

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

02 字段功能

通過(guò)上面的對(duì)菜單功能的分析,可以整理出如下所需字段:

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

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

列表頁(yè)原型:

表單頁(yè)原型:

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

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

04 小知識(shí)點(diǎn)

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

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

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

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

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

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

消息管理? [110000]

|- 訂單消息 [110100]

|-?….

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

 

作者:JackLiu;個(gè)人微信公眾號(hào): 揚(yáng)帆去遠(yuǎn)航(ID:Jackai_liu)

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

題圖來(lái)自Unsplash,基于CC0協(xié)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 請(qǐng)問(wèn)下標(biāo)記文本說(shuō)明的那個(gè)小圖標(biāo)是什么空間?

    來(lái)自陜西 回復(fù)
  2. 想問(wèn)一下,新增菜單里面的內(nèi)容怎么添加呢?

    來(lái)自上海 回復(fù)
  3. 請(qǐng)教一下,頁(yè)面權(quán)限判斷,為啥不能通過(guò)頁(yè)面的路徑查詢頁(yè)面權(quán)限?這樣的話,就不用在代碼中寫(xiě)死菜單標(biāo)識(shí)碼,后臺(tái)也就不用維護(hù)代碼標(biāo)識(shí)碼和系統(tǒng)標(biāo)識(shí)碼的關(guān)系

    回復(fù)
  4. 提一個(gè)疑問(wèn),如果是外部路徑,那么菜單功能的按鈕,配置了以后不就沒(méi)有意義了嗎?

    來(lái)自廣東 回復(fù)
    1. 外鏈就要做限制了,如果是外鏈就不能增加按鈕

      來(lái)自浙江 回復(fù)
  5. 哥們寫(xiě)的不錯(cuò),干凈又衛(wèi)生

    來(lái)自廣東 回復(fù)
  6. 操作按鈕的跳轉(zhuǎn)鏈接怎么配置?

    回復(fù)
  7. 操作按鈕的跳轉(zhuǎn)鏈接怎么配置?

    來(lái)自日本 回復(fù)
    1. 這里的操作按鈕設(shè)置是進(jìn)行權(quán)限判斷的,有權(quán)限就顯示,無(wú)權(quán)限就不顯示按鈕,跳轉(zhuǎn)和這里的設(shè)置沒(méi)有關(guān)系!
      按鈕

      來(lái)自北京 回復(fù)
    2. 就是說(shuō),操作按鈕的功能已經(jīng)內(nèi)置好,此處僅控制是否對(duì)外暴露功能入口?

      來(lái)自北京 回復(fù)
    3. 你這個(gè)按鈕怎么寫(xiě)入到評(píng)論區(qū)的

      來(lái)自廣東 回復(fù)
    4. 震驚,你這個(gè)按鈕怎么寫(xiě)入到評(píng)論區(qū)的

      來(lái)自廣東 回復(fù)
    5. 驚訝,你這個(gè)按鈕怎么寫(xiě)入到評(píng)論區(qū)的

      來(lái)自廣東 回復(fù)