跳至主要内容
💬 回報這一頁

後台系統的資訊架構

分工

這一頁管站台層:側邊欄怎麼分區、全域狀態列、深連結、單一出口。 進到某一頁之後的內部組成(區塊順序、元件、行為規範)是單頁層的事, 見頁面章。

v0.12.0 起這份規範有了對應載體:AppShell/Sidebar 與 NavGroup[] 導覽契約(ADR-0011,已採用);v0.14.0 起多了多應用版型的 功能選單列。規則仍以本頁為準—— 元件解決「怎麼組出來」,本頁回答「為什麼這樣分、什麼不能做」。

問題​

後台系統的側邊欄,預設會長成資料表的目錄:

單據
對象
類別
區域
任務
報表
設定

每一項都對應一張資料表。開發的人覺得完整又整齊,使用者卻找不到東西—— 因為使用者要做的不是「看一張表」,是完成一件事, 而一件事幾乎不會只碰一張表。

「這個月的結算」要碰單據、類別、報表;「新對象開通」要碰對象、設定、任務。 於是使用者的日常變成在側邊欄之間反覆跳,而每一次跳都要重新想「這一步在哪裡」。

更糟的是同一件事有好幾個入口:結算流程裡有一個「匯出報表」, 側邊欄也有一個「報表」,兩邊做的事差不多但不完全一樣。 使用者會問「哪一個才對」,而正確答案是「都對,但你要記得哪個場合用哪個」—— 這不是一個系統該要求使用者記住的事。

做法:依工作節奏分區​

側邊欄的分區不對應資料表,對應使用者的工作節奏:

每日作業 ← 天天做、有時間壓力
工作台
批次結算 〔例行〕
存量清查

規劃與分析 ← 想事情的時候才進來、不影響正式資料
用量分析 〔試算〕

報表 ← 對外交付
報表中心 〔例行〕

主檔與設定 ← 偶爾改、影響全公司
基本資料
系統設定

說明 ← 卡住的時候
使用說明
操作手冊(外連)

同樣是七、八個項目,但這個排法回答的是**「我現在要做的事在哪一區」**, 而不是「我要找的資料存在哪張表」。

分區的判準是頻率與後果,不是資料模型:

分區頻率改壞了會怎樣
每日作業每天當天的作業卡住
規劃與分析每週/每月不會怎樣(沙盒)
報表每期對外文件錯誤
主檔與設定每季全公司的計算結果改變
✅ 這樣做

把影響半徑最大的東西(主檔、設定)放在最下面、最不順手的位置。 順手程度應該與「按錯的代價」成反比。

🚫 不要這樣

不要把設定放在最上面只因為它字母排序在前, 也不要因為「這一區只有一項」就把它併進別區。分區的數量不是成本, 分錯區才是。

這個分法換一種系統一樣成立,因為它問的是同一組問題—— 所以判準要用系統的形狀去描述,不要用某個行業的名詞去描述:

系統形狀每日作業規劃與分析主檔與設定
有待處理隊列今日待處理、逾期項目負載預測(沙盒)對象主檔、階段定義
有資源分配今日指派、未完成項目產能模擬類型定義、費率設定
有數量增減收發登錄、存量清查補充模擬項目主檔、區域設定

多應用系統:側欄切應用、頂部選單切功能​

使用者一天要在好幾個應用之間切換時(作業、文件、排程、管理……), 導覽分成兩層,各放一個地方:

層放哪裡回答的問題
應用側欄(應用清單)我現在要在哪個應用裡工作
功能頂部功能選單(目前應用的)這個應用裡,我要做的事在哪一區

上面那套工作節奏分區原封不動搬到頂部:一個分區=一個頂層選單, 分區的判準、順序、「影響半徑最大的放最後」全部照舊。換應用時頂部選單整組換掉。

側欄收合時工作區要最大:可以收成圖示欄(還認得出應用),也可以收到 0、 滑鼠碰左緣再叫出來(浮在內容上,不推版面)。兩種都要有鍵盤與觸控的路—— 頂列左端的側欄開關、以及 ⌘K。

頂列三段:左右留給系統​

[≡ 目前應用] │ 每日作業 規劃與分析 報表 主檔與設定 說明 │ [搜尋 ⌘K] [通知] [使用者]
└ 左:系統 ┘ └──────────── 中:目前應用的功能 ────────────┘ └──────── 右:系統 ────────┘

左右兩端是系統的,每個應用都一樣、位置不動:左端是側欄開關與目前應用, 右端是搜尋(指令面板)、通知、使用者選單。只有中段隨應用改變。 位置不動的東西才會變成肌肉記憶——右上角找使用者選單、左上角找應用, 在哪個應用裡都一樣。

✅ 這樣做

頂層選單最多六個,用使用者說得出口的詞。選單裡保持一層, 兩層群組用分區標題分開;標題結尾的 … 表示選了還要再填東西(開對話框)。

🚫 不要這樣

不要做往右彈的子選單,也不要把「檔案/編輯/檢視」這種桌面軟體的通用選單搬進來—— 後台的頂層是工作節奏,不是文件操作。

✅ 這樣做

側欄、頂部選單、⌘K 吃同一份資料:選單裡有的,⌘K 一定找得到; ⌘K 也找得到其他應用。

🚫 不要這樣

不要讓應用自己在中段以外放東西(例如把應用的設定鈕塞到右端)。 右端一旦被各應用各放各的,「右上角是系統的」就不再成立。

什麼時候不用多應用版型:只有一個應用、或使用者幾乎不在應用之間切換時, 側欄直接放分區導覽(單應用版型)更直接,少一層。不要為了「看起來像平台」而硬分應用。

「例行」與「試算」標籤​

在項目旁掛一個小標籤,說明這個畫面動不動到正式資料:

標籤意思
〔例行〕正式作業。這裡做的事會進入正式紀錄
〔試算〕沙盒。隨便改,不會影響任何正式資料

為什麼值得為此多做一個標籤:沙盒的價值來自使用者相信它是沙盒。 一個不確定會不會弄壞東西的模擬工具,使用者不會拿它來模擬—— 他會改到一半就退出去,然後用試算表算。

反過來也一樣:正式作業畫面要讓人知道自己在正式環境裡, 這是硬鎖定那條「刻意的決定」在導覽層的延伸。

✅ 這樣做

試算畫面內部再標一次資料狀態徽章 (「試算暫定」/「已確認實際」/「歷史實際」)。導覽層說的是這個畫面的性質, 徽章說的是眼前這組數字的性質。

🚫 不要這樣

不要讓試算畫面有任何一顆按鈕會靜靜寫入正式資料。 真的需要「把試算結果套用出去」,那顆按鈕要獨立、要說清楚後果、 而且要是整個畫面上唯一一個。

全域健康度狀態列​

頂列上隨時看得到兩件事:

  1. 待處理項目數(驗證器即時算出的錯誤數)
  2. 目前作業期間的狀態(已確認/未確認)

它的作用不是通知,是定位。後台使用者常常在五、六個畫面之間來回, 狀態列讓他在任何一頁都知道「這一期還能不能收」「還有沒有東西沒處理」, 不必回到工作台才看得到。

多應用版型裡,這兩件事落在頂列右段:待處理數是通知鈴鐺上的未讀徽章 (數字寫進鈕的可及名稱,不只靠徽章的顏色),點開就是待處理清單、 每一則都直接連到目的地;作業期間狀態若需要常駐,放在通知旁邊、同樣可點。

✅ 這樣做

數字要可點,點下去直接到待處理清單。 一個說「還有 3 項」卻不告訴你是哪 3 項的指示器,只會製造焦慮。

🚫 不要這樣

不要在狀態列放「一切正常」以外的常駐訊息。 常駐的東西一旦超過兩項,全部都會變成背景,包括真正重要的那一項。

單一出口:同一件事只有一個入口​

「產出對外文件」這件事只有一個地方做得到,其餘位置一律連過去。

舊入口不刪,改成轉址:

/flow/export → redirect → /reports
/export → redirect → /reports

為什麼是轉址而不是刪除:使用者收藏過網址、文件寫過網址、同事之間傳過網址。 直接刪掉會得到 404,而 404 對使用者的意思是「這個功能被拿掉了」—— 他不會猜到功能還在、只是搬家了。

✅ 這樣做

合併多個入口時,把各入口原本能做的事全部確認過一遍。 「差不多的兩個入口」通常有一個做得到某件另一個做不到的事, 那件事就是使用者當初選擇走那條路的原因。

🚫 不要這樣

不要保留「兩個入口,功能 90% 重疊」。使用者遲早會發現兩邊算出來的數字不一樣, 然後就再也不相信任何一邊。多入口的真正代價不是混淆,是不一致。

深連結:讓待辦能直接跳到目標​

畫面內的分頁與選中的對象要寫進網址:

/master?tab=records&id=C-1043

沒有這個的話,工作台上的待辦事項只能寫「請到基本資料 → 異動紀錄 → 找到 C-1043」, 使用者要自己走三步;有了之後,待辦本身就是一個連結。

連帶得到三件事:可收藏、可貼給同事、瀏覽器上一頁行為正確 (分頁切換算不算一次導覽?寫進網址之後這個問題就有答案了)。

✅ 這樣做

網址參數用使用者看得懂的字(?tab=records), 不要用內部索引(?t=2)。網址是會被貼進聊天室的,第 2 個分頁是哪個沒有人記得。

🚫 不要這樣

不要把「哪一列被展開」「捲軸位置」這種暫時狀態也寫進網址。 判準是:別人打開這個連結時,需要看到一樣的東西嗎? 不需要就別寫。

行動版:側邊欄改抽屜​

窄螢幕下側邊欄收成左滑抽屜(點遮罩關閉),分區與順序完全不變。 (Sidebar 元件內建此行為——同一份 children 在桌面與抽屜間切換,順序不變是結構保證,不是紀律要求。)

多應用版型同理:抽屜裡是同一份應用清單;頂部功能選單收成一個「選單」鈕, 裡面依原順序列出每一區(功能選單列內建)。 頂列右段只剩圖示,位置不變。

不要為手機重新設計一套導覽。後台系統的手機使用者多半是同一個人在通勤時查東西, 他腦中的地圖是桌機版那一張;換一套結構等於要他學第二遍。

取捨​

代價一:分區沒有標準答案,而且改起來很痛。

側邊欄是使用者肌肉記憶的所在地。上線半年後把「報表」從第二區搬到第四區, 會收到「東西不見了」的回報——即使它明明還在。

所以分區要在還沒有人熟悉之前定案,並且盡量用「頻率與後果」這種 不隨功能增減而變動的判準,而不是用當下的功能清單去湊。

代價二:依工作節奏分區,代表同一張資料表可能出現在兩區。

主檔在「主檔與設定」可以完整維護,同一筆資料在「每日作業」也可能被就地編輯。 這是刻意的——使用者在作業流程中發現要改一個欄位時, 不該被要求離開流程、去另一區、改完再回來。

要付的代價是:這兩個地方的行為必須一致(同樣的鎖定規則、同樣的稽核紀錄)。 做不到一致的話,寧可只留主檔那一個入口。

反例​

✅ 這樣做

側邊欄的每一項都要是使用者會說出口的詞。

🚫 不要這樣

不要用系統內部的模組名當導覽標籤。 「基礎資料維護模組」不是任何人會用來描述自己在做什麼的講法。

✅ 這樣做

未知路徑 fallback 到最常用的作業畫面。

🚫 不要這樣

不要 fallback 到首頁然後什麼都不說,更不要顯示空白。 使用者手動改網址失敗時,最需要的資訊是「你在哪、可以去哪」。