在 2.0 启动时建立完整设计系统
1.0 时期页面依赖逐稿绘制，新功能重复造轮子。我选择先投入时间建立色彩、字体、组件、间距和图标规范，为后续迭代降低交接和维护成本。
03 / B2B SaaS Product Practice
Vendera SaaS 系统。
海外 B 端智能货柜系统。通过 App、Web VMS 和硬件视觉的协同迭代，帮助零售商家管理货柜运维和补货，也让消费者完成自助购买。
- Role
- UI 设计师，实际覆盖 App、Web VMS、硬件视觉与部分产品决策
- Scope
- App 2.0、Web VMS 原型、设计系统、货柜视觉延展
- Result
- 2.0 已上线，设计系统可被产品和后续设计师复用
Context
从功能跑通，到建立清晰的信息架构。
我加入项目时，硬件货柜已经投入使用，但 App 还处在“功能跑通但体验粗糙”的阶段。用户打开后直接进入货柜选择界面，没有完整首页和底部 Tab Bar，关键入口隐藏在汉堡菜单深处。
2.0 迭代的目标，是建立清晰的信息架构，提升运维人员效率，降低新手用户学习成本，并用设计系统支撑后续快速迭代。
Before / After
从“按库存状态找机器”，改成“围绕日常运营行动”。
改版前的页面更像机器列表，用户需要先理解筛选和状态分类，再进入具体任务。改版后我把首页重组为经营数据、待处理事项和高频操作，让用户一打开 App 就能判断今天要做什么。
改版前
改版后
Product Decisions
三个影响产品推进的判断。
用 Figma Make 跑 Web VMS 原型
在单人设计资源下，Web 端无法继续按传统逐稿流程推进。我用 Figma Make 快速搭建 dashboard、产品库、订单、库存、机器等模块，让团队可以直接基于高保真原型讨论。
主动提出 Tab Bar 与首页架构
基于用户习惯和 App 通用结构，我提出新增底部 Tab Bar 与 Home 页。方案最初因成本被搁置，数月后成为 2.0 迭代的核心方向之一。
Web VMS Prototype
用 Figma Make 跑出一套可讨论的 B 端系统骨架。
在 Web 端设计资源有限的情况下，我没有继续逐页画稿，而是用 Figma Make 先搭出覆盖 Dashboard、商品库、订单、库存、机器和帮助中心的高保真原型，让团队可以围绕真实页面讨论模块边界、业务流程和信息架构。
Product Library
平台商品库、搜索、分类筛选和批量添加商品。
Orders
订单筛选、支付状态、异常状态和表格操作。
Inventory
库存状态、补货优先级和生成补货清单入口。
Machines
机器状态、位置、税率和商品管理动作。
Abnormal Order
视频识别、商品校正和订单金额重算的处理流程。
Design System for Scale
先规范高频交互，再沉淀跨端产品语言。
Vendera 的 App 与 Web VMS 同时推进，如果继续逐页画稿，交接和维护成本会越来越高。我优先把按钮、导航、反馈这些高频组件系统化，再用字体、颜色、图标和间距规则托住后续扩展。
Component Detail 01
Button Display
定义主按钮、次级按钮、危险操作、禁用态和文字按钮，覆盖扫码、补货、确认等高频动作。
Component Detail 02
Tab Bar
把 App 2.0 的底部导航和产品模块切换固化成规则，减少新页面在信息架构上的反复判断。
Component Detail 03
Alert
统一异常、确认、成功反馈的呈现方式，保证运维场景中的关键状态被清楚理解。
Foundation
Typography / Color
统一字体层级、语义色和状态色，让 App 与 Web VMS 的信息表达保持一致。
Icon Library
Cross-platform Icons
整理 App、Web、库存状态和机器操作中的图标语言，降低跨端理解成本。
Spacing / Structure
Layout Rules
把间距、内容区、导航区和常用组件组织成可查阅规则，减少后续交接中的视觉偏差。
Reflection
产品体验不只发生在屏幕里。
Vendera 让我形成了软硬一体的产品视角。一个 SaaS 产品的用户体验不只在 App 或 Web 屏幕里，也在货柜灯光、LED 屏、官网展示图和用户接触到的每一个物理触点上。
这个项目也让我意识到，产品工作的核心价值正在从“做出什么”转移到“决定做什么”。设计师做的很多执行工作会被 AI 加速，但判断该做什么、为什么做、对用户有什么价值，仍然需要人负责。
真实迭代
推动方案进入已上线产品的 2.0 版本迭代，而不是停留在概念设计。
跨端协作
同时处理 App、Web VMS、硬件和营销视觉的体验一致性。
产品判断
能基于用户使用习惯提出结构性产品建议，并等待合适时机被验证。