可交互演示
返回精选作品 Case 03 · 桌面端 · 工具类产品 · 反馈设计与容错

VPR Audio

让几十首歌的转换过程,
看得见。

车机里放不了的歌、一次几十首的批量等待。这个工具要解决的不是「能不能转」, 而是等待的那几分钟里,用户看不看得清发生了什么——每首到了哪一步、失败的为什么失败、能不能中途停下。

在线体验这个桌面工作台

批量拖入、并发进度、明暗主题切换与任务记录,都能点一遍。

进入可交互演示 ↗
My Role UI/UX 设计 · 前端实现 · 交互动效
Constraints Windows 桌面窗口 1440×900 · 明暗双主题同密度 · 转换进行中界面不许卡死
Deliverables 四大视图 · 明暗双主题 · 桌面端窗口与交互规范
How I Verified 三态并存走查 · 明暗同密度比对 · 可点原型逐条复看
2
层进度:全局环 + 行级线
5
种行状态,每态有色有文案
1
次拖拽即可开始,无需配置
4
个视图,工作台一屏聚合
2
套主题,深浅同密度

01 / OVERVIEW

把一整套操作,收敛成一次拖拽

这类文件在车机与播放器里打不开,转码要自己翻解码、配参数。 这层复杂性可以被界面吃掉——全部收进界面后面,只留一次拖拽。

目标用户 A
车机里放不了歌的普通听众——不想懂什么是加密格式,只想这首歌能放。
目标用户 B
一次几十首的重度转档用户——批量等待时想知道每首到了哪步、失败的为什么失败。
设计立场
等待期不是空白:每首的进度、失败的原因、中途叫停的后果,都要在同一屏里可读。
实现背景
基于 Tauri 2 与 Rust 的本地原生架构,文件不联网上传。

02 / PROCESS

用户五步,四步为等待期服务

让等待期是透明的。

拖入文件 → 队列就绪 → 看清每首到哪一步 → 失败知道为什么 → 拿到文件
拖拽即转
空队列时整张卡就是拖拽区;文件落下的瞬间,参数卡、队列与「开始」各就各位,零配置。
让等待可读
总进度、已用时间、每一行各自的进度都在同一屏里——不用为了「还有多久」去翻日志。
失败不静默
单个失败只标红自己,其余继续跑完;原因写在行内并可一键复制,不用去猜。
可中断不回滚
转换中随时取消,已经完成的结果保留——「停下」不等于「白做」。

03 / DECISIONS

让等待可读的一屏

批量转换的难点不在转换本身,而在等待期间用户能否看清发生了什么—— 这一屏同时安排四件事:拖拽区、进度反馈、状态呈现与密钥来源。

转换工作台任务记录设置中心关于软件 空队列 · 拖拽态队列 · 进行中密钥来源切换明暗双主题

工作台聚合拖拽区、参数卡、队列、环形进度与日志;设置中心把输出格式、并发、密钥来源、托盘与动效开关收进一页。

VPR Audio 队列态:中央拖拽区收起,添加文件控件迁入队列底部状态行,四个文件处于等待中
队列态:空队列时的中央拖拽区整体收起,添加控件经补间动画迁入队列底部的状态行,队列清空后逆向归位
VPR Audio 转换进行中:64px 双环显示全局进度与计时,列表逐行显示转换中、已完成与失败三种状态
转换进行中:64px 双环给出全局进度与计时,列表逐行显示独立进度底线;同一屏内「转换中 / 已完成 / 失败」三种状态并存
无缝流转
文件落下槽位收缩,添加控件顺势滑入底部状态行,清空后逆向归位——一套布局,两种形态。
双层进度
顶部双环给全局进度与计时,每行自带进度底线与五态;异常只标红自己,不打断批量。
弹性高亮
选中块沿导航滑动带挤压回弹;快速连点从当前位置继续,不重放固定动画。
来源切换
两种密钥来源同处一个分段切换器,各自显示连接状态;一侧不通时给出兜底的填入入口。

04 / VISUAL SYSTEM

真中性炭灰,不是浅色反相

主色是靛蓝;暗色是另一套完整的炭灰阶——背景 #141414、卡片 #1E1E1E、描边 #2B2B2B 的 R=G=B 完全相等,没有色相偏移, 这是「不刺眼」的真正来源。主题在窗口出现瞬间即确定,不闪。

品牌靛蓝 · 浅色#4F5CE5
品牌靛蓝 · 深色#6270F0
深色底#141414 · R=G=B
深色卡片#1E1E1E · R=G=B
深色描边#2B2B2B · R=G=B
深色正文#E8E8E8
浅色正文#1F2430
语义色组成功 / 失败 / 警告 / 青 / 紫
VPR Audio 深色主题工作台空队列状态,背景、卡片与描边为纯中性灰阶
深色 · 空队列:背景 / 卡片 / 描边三阶 R=G=B 完全相等
VPR Audio 浅色主题工作台同一状态,白底配靛蓝主色
浅色 · 同一状态:白底 + 靛蓝,信息密度与深色完全一致
VPR Audio 深色主题转换完成:双环收束为对勾,统计面板显示总文件、已完成与失败三档
深色 · 完成:双环收束为对勾,统计分总文件 / 已完成 / 失败三档

05 / INTERFACE & QA

桌面端走查

真机窗口才暴露的问题,逐条落进规范。

VPR Audio 设置中心:默认输出格式、默认并发任务数、手动密钥候选池与通用开关
设置中心:输出格式、并发上限(1–6)、手动密钥候选池、托盘与动效开关集中在一页
首帧即终态
窗口亮起的瞬间就是最终配色;新用户直接跟随系统偏好,之后尊重手动锁定。
无边框窗口
窗控按钮画进画布、跟随缩放;侧栏与页头空白区都是拖拽区,标题栏不再白占一行。
主操作唯一
「开始」常驻队列卡右上角,随可用性明暗;清空 / 取消 / 打开目录同排,不用二次确认弹窗挡路。
动效可关
设置中心一个总开关:声纹律动、视图切换与进场动画一并停用——动效是加分项,不是负担。
VPR Audio 任务记录页:按文件粒度列出格式、体积、时间与成功失败结果
任务记录:按文件粒度留存格式、体积、时间与结果,可一键清空;记录只存在本地,不联网

06 / WEBSITE

工具之外,还要有人看得懂

配套设计并上线了宣传官网:首屏用深色流体背景承载核心主张, 正文按「核心能力 → 七步使用流程 → 子页入口」推进,下载入口贯穿全页—— 一个能力一张卡,写的是机制与边界。

官网已上线,可直接访问

amlytn.dpdns.org —— 与工具本体同一套设计语言,含架构 / 功能 / 问答三个子页与免费下载入口。

访问线上官网 ↗
VPR Audio 官网首屏:深色背景上的蓝色流体、大标题、免费下载按钮,以及四项真实数据
首屏:流体背景 + 大字号品牌标题,下载按钮与版本 / 体积 / 系统要求同排,底部直接亮出真实数据而非口号

WHAT'S NEXT

从桌面工具,走进全屋智能。

VPR Audio 之后是「Home Hub · 全屋中枢」——14 屏界面、28+ 统一 2D 矢量图标与完整设计规范,把复杂的物联网状态收敛成一块只读面板。