Skip to content

Latest commit

 

History

History
53 lines (27 loc) · 4.94 KB

DESIGN.md

File metadata and controls

53 lines (27 loc) · 4.94 KB

FlowScope 设计系统

产品场景

FlowScope 是 Windows 本机诊断工具。用户通常在排查卡顿、异常网络或资源占用时快速扫读数据,因此界面优先保证状态可信、信息密度稳定和交互熟悉。视觉表现应克制,不使用会与实时指标争夺注意力的装饰。

视觉令牌

主界面使用 Segoe UI / Microsoft YaHei UI / 系统无衬线字体,数字启用 tabular-nums。默认浅色基础色:背景 #F5F7FA、表面 #FFFFFF、边框 #E5E7EB、正文 #111827、主色 #2563EB。深色基础色:背景 #0E131B、表面 #151B25、边框 #283140、正文 #E7EDF5、主色 #6B9CFF。

下载使用蓝色,上传使用紫色;成功、警告、危险必须同时配合文字,不能只靠颜色。阴影保持轻量,不使用渐变文字、装饰性玻璃拟态、霓虹或大面积高饱和色。独立悬浮监控窗是唯一的磨砂背景例外,并在系统合成不可用时回退到实体背景。

布局

主窗口默认 1360×860,最小 1024×680。标题栏 44px,侧栏展开 216px、收起 68px,页面内边距 20px。数据表、设置行和空状态沿用 Windows 工具常见结构,不发明非标准控件。

独立悬浮监控窗由 Win32 原生窗口绘制,与主 Wails 窗口同时存在。仪表盘模式最多三列,纯文字模式保持单行;窗口置顶、可拖动、不会出现在任务栏,并始终完整限制在当前显示器工作区内。悬浮窗不显示名称栏和关闭按钮,可在设置中停用;双击或右键可唤回主界面。背景优先使用可调透明度的 Windows Acrylic 磨砂,失败时依次回退到系统瞬态材质和实体浅色或深色表面。

状态与文案

监控正常、采集暂停、受限、不可用、失败必须明确区分。指标缺失显示“不可用”和后端原因,绝不填充固定 0。CPU 温度标明设备厂商来源,GPU 温度标明显卡驱动或厂商来源,避免暗示所有硬件都具备同一种传感器。

交互与可访问性

焦点状态清晰,交互目标使用标准按钮、复选框、选择器和表格。动画只用于状态变化,持续 150–250ms,并尊重 prefers-reduced-motion。文本和背景保持可读对比度,正文说明行宽控制在约 65–75 个字符。


FlowScope Design System

Product Context

FlowScope is a local Windows diagnostic tool. Users typically scan data while investigating stalls, unexpected network activity, or resource usage, so the interface prioritizes trustworthy state, stable information density, and familiar interaction. Visual treatment stays restrained and does not compete with live metrics.

Design Tokens

The main interface uses Segoe UI, Microsoft YaHei UI, and system sans-serif fonts, with tabular numerals. The default light palette uses background #F5F7FA, surface #FFFFFF, border #E5E7EB, text #111827, and primary #2563EB. The dark palette uses background #0E131B, surface #151B25, border #283140, text #E7EDF5, and primary #6B9CFF.

Downloads use blue and uploads use purple. Success, warning, and danger colors must always be paired with text. Shadows remain subtle; gradient text, decorative glassmorphism, neon, and large saturated areas are not used. The independent floating monitor is the sole frosted-backdrop exception and falls back to a solid surface when composition is unavailable.

Layout

The main window defaults to 1360×860 with a 1024×680 minimum. The title bar is 44 px, the sidebar is 216 px expanded and 68 px collapsed, and page padding is 20 px. Tables, setting rows, and empty states follow familiar Windows utility patterns instead of introducing nonstandard controls.

The independent monitor is a native Win32 window displayed alongside the main Wails window. Dashboard mode uses at most three columns, while text-only mode remains one line. The window stays on top, can be dragged, does not appear in the taskbar, and remains fully inside the current display work area. It has no name strip or close button and is disabled from Settings; double-clicking or right-clicking restores the main interface. A Windows Acrylic backdrop with controlled transparency is preferred, followed by transient system material and a solid light or dark fallback.

States and Copy

Healthy, paused, limited, unavailable, and failed states must be distinct. Missing metrics show Unavailable and the backend reason rather than a fixed zero. CPU temperature identifies its device-vendor source, while GPU temperature identifies its display-driver or vendor source, avoiding any suggestion that all hardware exposes the same sensor.

Interaction and Accessibility

Focus states are visible, and interactive targets use standard buttons, checkboxes, selectors, and tables. Animation is limited to state changes, lasts 150–250 ms, and respects prefers-reduced-motion. Text and backgrounds maintain readable contrast, with explanatory copy kept to roughly 65–75 characters per line.