Actual Budget 侧边导航设计竞赛解析：Sidenav 的现状架构、设计约束与社区驱动重构

Actual Budget 侧边导航设计竞赛解析Sidenav 的现状架构、设计约束与社区驱动重构【免费下载链接】actualA local-first personal finance app项目地址: https://gitcode.com/GitHub_Trending/ac/actual侧边导航Sidenav是 Actual Budget 打开应用后最先看到、也最常使用的界面部分用户通过它往返于预算、报表、日程、账户之间。本文以 Actual Budget 官方发布的设计竞赛公告design-competition-sidenav.md为核心骨架结合仓库中packages/desktop-client/src/components/sidebar/的真实源码实现解析 sidenav 的现有功能结构与设计约束并完整梳理竞赛的参赛流程、评选机制与后续落地路径。读完本文你将理解 Actual Budget 导航栏的模块划分、账户列表的复杂状态机以及社区如何通过一次设计竞赛直接参与核心 UI 的重构。一、竞赛背景为什么重设计侧边导航在 Actual Budget 中sidenav 承担着最主要的导航职责它是用户在预算、报表、日程、账户之间切换的唯一入口也是每次打开应用时第一眼看到的界面。官方将其定义为“应用中使用频率最高的部分之一”因此团队决定发起一场面向社区的设计竞赛让社区来主导导航栏的视觉与交互重构。竞赛的两项核心奖励明确了这次活动的性质——不是一次简单的征集而是真实的产品共建排名前 10 的设计可获得 Actual Budget 官方周边swag最终获胜设计将被直接实现进应用随版本发布给所有用户。这一点在后继公告中得到印证获胜公告sidenav-design-winner.md确认了冠军得主并说明工作将于近期开始即获胜设计真正进入了开发管线。二、Sidenav 的现状从源码看导航栏的真实结构要设计好一个导航栏首先要理解它当前承载了什么。从源码看侧边导航的实现集中在 components/sidebar 目录入口为 Sidebar.tsx其布局自上而下分为四个区域。2.1 预算名与浮动切换BudgetName ToggleButton侧边栏顶部展示当前预算文件名称BudgetName并提供一个浮动模式切换按钮ToggleButton。浮动模式由全局偏好floatingSidebar控制启用后侧边栏以悬浮层形态覆盖在内容之上移出时自动隐藏。2.2 主导航PrimaryButtons核心功能导航由 PrimaryButtons.tsx 渲染文档中提到需要覆盖的核心导航项与源码一一对应导航项路由图标Budget预算/budgetSvgWalletReports报表/reportsSvgReportsSchedules日程/schedulesSvgCalendar3More更多可展开—展开/收起箭头└ Payees收款方/payeesSvgStoreFront└ Rules规则/rulesSvgTuning└ Bank Sync银行同步/bank-syncSvgCreditCard└ Tags标签/tagsSvgTag└ Settings设置/settingsSvgCog注意两个值得设计的细节More 折叠面板Payees、Rules、Bank Sync、Tags、Settings 被收纳在可展开的 More 菜单中且当当前路由命中其中任一子页时会自动展开源码第 35-47 行的isActive判断。条件渲染的 Bank SyncBank Sync项仅当同步服务器可用时出现syncServerStatus ! no-server本地纯离线模式下不会显示——这体现了配置驱动导航的思路。2.3 账户列表Accounts账户列表是 sidenav 中最复杂、信息密度最高的区域由 Accounts.tsx 实现恰好对应文档中账户列表是开放式的这一约束。其结构为All accounts汇总全部账户显示总余额On budget 分组标题行 预算内账户列表每项显示实时余额Off budget 分组标题行 预算外账户列表Closed accounts可折叠的已关闭账户列表由本地偏好ui.showClosedAccounts控制显隐。每组数据分别来自独立的 hooksuseOnBudgetAccounts/useOffBudgetAccounts/useClosedAccounts余额通过 spreadsheet binding如bindings.allAccountBalance()、bindings.accountBalance(account.id)实时计算——这正是文档中账户余额常内联显示这一设计要点背后的数据机制。2.4 账户行的状态矩阵单个账户行由 Account.tsx 渲染其状态之丰富为设计者划定了明确的信息表达考题余额内联通过CellValue绑定实时财务数值悬停可查看余额历史图BalanceHistoryGraph同步状态行首的圆点指示器用颜色区分状态——pending同步中sidebarItemBackgroundPending、failed失败sidebarItemBackgroundFailed、正常sidebarItemBackgroundPositive未连接银行时圆点透明隐藏未读加粗updated状态会将账户名加粗并着色sidebarItemTextUpdated提示有未读新交易选中态左侧 4px 强调边框 主题色文字sidebarItemAccentSelected拖拽排序账户行支持拖拽调整顺序调用useMoveAccountMutation持久化右键菜单悬停可展开 Tooltip提供重命名、关闭/重新打开账户、切换余额历史图等操作。从源码看账户类型判定链为closed → offbudget → onbudget这意味着已关闭、预算外、预算内三种账户在视觉上必须可区分——与文档中的约束要求完全一致。三、设计约束解读文档要求背后的实现证据竞赛公告给出了一组约束而非检查清单的设计要求结合源码可以看到每条约束在现有实现中的落点设计约束现有实现依据覆盖核心导航预算/报表/日程/收款方/规则/设置/银行同步PrimaryButtons.tsx 的完整路由表账户列表开放式3 个到 30 个不等Accounts.tsx 通过分组渲染 滚动容器overflow: auto容纳任意数量账户预算内/外账户可区分源码按account.offbudget分组渲染并有独立标题行余额内联显示每个账户行的CellValuebinding 实时计算银行同步状态关键账户行首圆点的 pending/failed/正常三态指示器适配亮色/暗色及其他主题所有颜色均取自theme主题对象如theme.sidebarBackground、theme.sidebarItemText组件不硬编码色值可访问性键盘导航、焦点态、对比度导航容器声明rolenavigation与aria-label新增的SidebarRedesign同样保留语义化结构AI 辅助设计被允许公告明文允许使用 AI 工具参与设计其中主题适配尤为关键Actual Budget 内置多套主题见 component-library/themes 下的light.css、dark.css、midnight.css、palette.css因此任何新设计都必须以主题 token 驱动而非硬编码颜色否则无法在四套主题下同时成立。四、正在进行的新版导航SidebarRedesign 预览值得设计者注意的是仓库中已存在一版尚在功能开关之后的新侧边栏实现SidebarRedesign它与竞赛的推进互为呼应入口判断位于 components/sidebar/index.tsxnewSidebarUIEnabled ? SidebarRedesign / : Sidebar /由功能开关newSidebarUI控制新版目录见 components/sidebar/redesign包含SidebarRedesign.tsx、PrimaryNav.tsx、NavRow.tsx、SidebarHeader.tsx、SidebarFooter.tsx、SyncStatusLine.tsx等组件相比旧版新版导航项改为平铺展示Budget、Reports、Schedules、Payees、Rules、Bank Sync、Tags 全部一级可见见 PrimaryNav.tsx不再使用 More 折叠Bank Sync 仍按服务器可用性条件渲染新版默认宽度为 270pxDEFAULT_SIDEBAR_WIDTH并显式声明了rolenavigation与aria-labelSidebar可访问性语义更完整。这版新侧边栏可视为竞赛设计落地前的过渡基线设计者可以参考其信息架构同时用更激进的方案超越它。五、参赛流程与时间线原文档完整信息竞赛的参与方式、时间节点与评选机制如下全部信息以公告原文为准时间线投稿开放2026 年 6 月 27 日投稿截止2026 年 7 月 27 日社区投票约 2026 年 8 月 3 日开始公布胜者投票结束后不久参赛方式通过官方表单提交设计可以提交任意多个方案多个方向请作为独立条目分别提交精致的 Figma 文件不是硬性要求带清晰标注的线框图annotated mockup完全可接受。评选流程四步投稿截止日期前通过表单提交设计内部初筛截止后由维护者审阅所有投稿选出最多10 位决赛入围者社区投票入围方案以 GitHub Issue 形式公示任何人可通过 表情为心仪方案投票投票持续一周落地实现得票最高的设计将实现进 Actual Budget。奖励获胜设计将被实现并随应用发布给所有用户前 10 名入围者均可获得官方周边。从后续公告sidenav-design-winner.md可以确认整个流程的真实走向投票结束后的胜者为 matt-fidd公告同时说明我们很可能在构建过程中吸收所有投稿的想法并坦承部分想法会被否决、过程中会有反复这是设计过程的正常部分——这为设计者提供了非常务实的心理预期。六、对设计者的实战建议综合文档约束与源码现状参与此类导航栏设计时可以重点思考以下问题账户信息的层级表达面对 3 个与 30 个账户两种极端场景分组on/off budget与折叠closed机制如何在视觉上自然伸缩余额是否始终内联还是在窄屏下让位同步状态的轻量呈现圆点指示器是目前的状态载体能否在不增加视觉噪声的前提下让同步中/失败/未读更加直观主题无关性设计稿中的所有颜色都应映射到主题 token 体系确保四套主题下对比度与可读性一致键盘可达性主导航、账户列表均需完整支持键盘遍历与清晰焦点态rolenavigation的语义不能被破坏信息架构取舍旧版用 More 折叠收纳 5 个子导航新版平铺展示全部一级项——哪种方式更适合大量账户 频繁切换的场景值得用原型验证。七、总结Actual Budget 的 sidenav 设计竞赛是一次典型的社区驱动产品共建文档界定了核心导航全覆盖、账户列表开放伸缩、主题适配、可访问性四条硬约束而仓库源码则展示了这些约束在真实产品中的复杂实现——实时的余额绑定、三态同步指示、拖拽排序、条件渲染的导航项。对设计者而言理解这份现状是提交合格甚至出彩方案的前提对开发者而言components/sidebar 目录连同功能开关newSidebarUI下的SidebarRedesign共同构成了观察这次重构如何从设计稿走向代码的最佳窗口。【免费下载链接】actualA local-first personal finance app项目地址: https://gitcode.com/GitHub_Trending/ac/actual创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考