跳至主要內容
SHAO MEDIA

一格選單列先亮了起來:CPA-Bar 的多實例狀態,是一套被壓縮的介面

從開源工具 CPA-Bar 的選單列常駐設計與「顏色太多」的討論看起,觀察多實例狀態管理如何在圖示、額度呈現與色彩標記之間被設計。

科技 設計評論 約 4 分鐘

從 V2EX 一篇分享創作的帖子看起。開發者 licoycn 發布了 CPA-Bar,一款適用於 macOS、Windows 與 Linux 的原生桌面應用,用來管理多個 CLIProxyAPI 與 CPA-Manage-Plus 實例。它的核心姿態很清楚:常駐在選單列或系統託盤,讓使用者一眼看清各實例的狀態,需要時才打開完整的管理視窗。

這個姿態本身就是一種設計取捨。多數管理工具把複雜度放在主視窗裡,用頁面與側欄分層;CPA-Bar 反過來,先把自己壓縮成選單列上的一格,再把帳號、OAuth 登入、API 金鑰、配置路由、日誌與插件這些完整管理能力,收在那一格背後。狀態被推到最前面,操作被往後退。

選單列本身的客製化也值得看。作者讓 macOS 使用者選擇顯示圖示與在線實例數,或者用電池、進度條的形式呈現帳號額度。把「剩餘額度」翻譯成電池圖形,是借用了系統早已建立的視覺語言。使用者不需要學新的符號,因為每天都在讀筆電的電量。這種借用降低了認知成本,也讓一個技術性的數字變成一個可以被眼角餘光掃過的狀態。

隱私的處理同樣是介面層面的。金鑰只存系統鑰匙串,隱私模式可在截圖時隱藏地址與帳號名稱,並且沒有遙測。對一款管理 API 服務的工具來說,截圖場景的遮罩設計很少被優先考慮,這裡被明確列出,顯然是對使用情境有過想像:分享畫面除錯,是這類工具的日常。

帖子下方的一則回覆,恰好點出了這款工具最值得討論的地方。使用者 xiaoz 說:「顏色是不是用得太多了,各種顏色,看起來很花。」作者回應,不同的色彩是標記不同的狀態,容易視覺區分。

這段短短的往來,其實是狀態視覺化的經典難題。一方面,色彩是最快的區分手段,多實例各自配上一組專屬圖示與顏色,在清單裡掃一眼就能對上號;另一方面,當每個實例、每種狀態、每個圖表都有自己的顏色時,色彩就從索引變成了噪音。電池與進度條之所以好讀,正是因為它們克制,只剩一個量、一種圖形。狀態色的問題往往出在沒有統一的層級:哪些顏色代表語意(在線、離線、額度告急),哪些只是身分標記(這是 A 實例、那是 B 實例),兩套系統混在一起,畫面就花了。

比較的基準可以放在同類的常駐工具上。像是 Status Trio 把 iPhone 狀態圖標搬上選單列的做法,是把三個圖示疊成一格,用減法換取位置;CPA-Bar 的選單列面板則走加法,實例數、額度、圖示都想放進去。兩者面對的是同一個約束:選單列的寬度以像素計,使用者的注意力以秒計。減法做得好,一格就夠;加法做得好,色彩就得分層。

跨平臺也是一個設計變數。macOS 有選單列的成熟慣例,Windows 與 Linux 靠系統託盤,三種環境對「常駐小物件」的期待並不相同。CPA-Bar 選擇原生桌面應用的路線,支援淺色深色外觀與中英文介面,並從 GitHub Releases 發放簽名更新,這些都是讓一個開源工具被日常信賴的基礎工程。

至於顏色,作者的回應有其道理:狀態區分確實需要色彩。但 xiaoz 的直覺也未必錯,問題可能出在色彩之間沒有讓位關係。如果語意色只有少數幾種,身分色交給圖示與文字標籤去承擔,畫面的密度會立刻降下來。這是一款剛發布的開源工具,色板的收斂往往是在第一批回報之後才開始的工作,而它已經有了很好的起點:先把複雜度壓進一格選單列,剩下的,只是讓那一格再安靜一點。

主題 介面與互動設計、視覺敘事

標籤 #cpa-bar、#選單列介面設計、#狀態視覺化

相關報導