张紫琼 · 产品经理作品集 | Zhang Ziqiong's Portfolio

痛点分析 Problem Statement

经实地走访，所在的大型家具与建材市场中（涵盖纺织布艺、皮革、五金等多种业态），近 2/3 的商户受限于相似的复杂客情，仍在使用纯人工记账与手写开单。

①

老客户信息重复填写，历史单价无法复用，每次都要翻旧货本才能找到对应价格。

②

"千人千价"完全靠人脑记忆，高峰期多线并行时极易出现价格错误，造成额外赔偿损失。

③

欠账记录混入手写单，繁忙时段容易漏记忘记，管理层无法实时汇总查看应收款。

15–40 每日处理订单数
（峰值 40+ 单/天）

2–5min 原平均单张开单耗时
（含查价、手写、拍照）

1–2次/月客户信息或金额错误
频率（真金白银的代价）

2/3+ 家具材料零售中小型
商户的共性痛点

业务壁垒与竞品分析 Competitive Analysis

🚧 极度非标的 SKU 与复杂的客情定价

纺织布料等家具材料的颜色、花纹、薄厚高度依赖不同批次的工厂出货，型号繁多（经调研，当前门店拥有高达 13,500+ 种不同型号）。且由于包含大量长期与散客，加上随行就市的同行竞争，形成了绝对的“千人千价”。

⚔️ 竞品分析与破局差异化

❌ 通用网店 / 餐饮点单系统（如微商城、点单SaaS）：强制要求商家预先录入标准化的商品图文与固定单价，完全无法适应纺织批发 13,500+ 非标 SKU 的变动，以及灵活的改价场景。
❌ 传统进销存 ERP 系统：前台移动端录入极度繁琐，无法顺滑衔接“客户通过微信发送大段文字报单”的行业习惯。
✅ 本系统的破局点：抛弃沉重死板的商品库包袱，采用“轻量级输入解析 + 客户关系单价映射”的模式。核心只维护“客户-价格”的逻辑链，打造出最符合传统建材批发业态的“极简开单流”。

目标用户 User Persona

👩

周姐 · 资深店员

50+ 岁 · 主力接单、开单负责人

日常场景

全天通过手机微信接收客户报单，手写销货单，人工计算金额，拍照发客户，整理欠账。

核心痛点

高峰期多线并行，价格靠记忆，出错要赔偿。每次都需翻旧单子查老客价格，耗时费力。

目标

开单快、不出错、不用翻旧本子，历史价格自动带出。

👴

张老板 · 店主

50+ 岁 · 监督账单 + 偶尔开单

日常场景

不定期协助开单，重点关注欠款情况，需要核实客户账目，偶尔查阅历史单据处理纠纷。

核心痛点

欠账汇总只能人工盘点，看不到实时数据；多人共享数据靠口头传达，容易遗漏。

目标

随时查看欠账总览，多端成员共享同一份实时数据库。

用户旅程优化 User Journey

⚠ Before — 原手写开单流程 (7步)

微信报单

确认型号数量

易遗漏

查找历史价格

翻旧本耗时

手写销货单

重复抄写

手工计算金额

容易算错

拍照发客户

效率低下

手记欠账

繁忙易漏

✓ After — 数字化流程 (仅需 3 步人工操作)

1. 粘贴报单文本

简单输入客户姓名

⚡ 自动解析与价格匹配

2. 确认并一键生成

校验无误直接出单

☁️ 自动同步云端账单

3. 转发发送客户

导出图片或直接分享

用户故事 User Stories

用户角色 (As a...)	需求描述 (I want to...)	核心价值 (So that...)
店员	直接粘贴微信报单文本，系统自动解析客户信息、型号和数量。	彻底免去手抄信息的繁琐，从源头避免抄写错误。
店员	系统能自动检索老客专属价格，匹配不到时再兜底默认价格。	消除“千人千价”的记忆负担，告别翻旧账本，规避算错账赔偿风险。
店员	将数据一键渲染成发货单图片并支持微信分享。	可以直接转发给客户确认，省去举着手机找光线拍照的尴尬。
店主	拥有独立工作台，能实时查看全盘欠账总计与流水明细。	随时掌握资金流向与应收账款，告别期末人工对账的痛苦。
全员	多台设备同时登录系统，数据基于云端即时同步。	团队成员不再孤立作战，库存与账目信息差彻底拉平。

核心功能模块 Key Features

📝 智能录单与订单编辑

系统支持将门店日常收到的报单文本快速整理为可编辑订单。

在录入后，页面会自动识别客户、商品、数量等信息，并结合客户资料、客户专属价和默认价进行补全，帮助店员从“收到报单”快速进入“可确认开单”的状态。

文本转结构化订单自动补全客户资料客户价 / 默认价优先匹配移动端友好的编辑体验

🧾 销货单生成与图片化导出

确认订单后，系统会生成标准化销货单预览，并支持图片导出、复制、下载和分享。

这样可以把原本零散的报单内容，快速转成适合发给客户、店内留档或继续流转的标准单据，提升门店日常开单效率。

标准化销货单模板图片导出与分享适合移动端使用从录单到交付一体化完成

⏳ 历史记录管理与重生成

系统支持保存历史销货单，并提供搜索、分页查看、详情展开和再次编辑重生成能力。

店员可以快速回看过去的开单记录，并基于原有数据继续修改，而不需要每次从头录入，提升重复开单和改单场景下的操作效率。

历史销货单留存搜索与分页查看详情展开继续编辑并重生成

🗂️ 客户资料与价格规则管理

系统内置业务数据库管理能力，支持维护客户信息、客户专属价格和默认价格表。

通过把价格规则和客户资料沉淀下来，后续开单时可以自动带出常用信息，减少重复输入，也让门店报价逻辑更统一、更易维护。

客户信息管理客户专属价维护默认价格表维护业务规则沉淀

💰 欠账跟踪与账单流水管理

除了开单流程，系统还支持客户欠账总览、手动记账、回款登记和账单流水维护。

订单生成后也可以累计到账单中，把“开单”与“后续收款/欠款跟进”连接起来，让门店经营数据不再分散在不同工具里。

欠账总览回款登记账单流水维护开单与记账联动

☁️ 登录与云端共享协作

系统支持店员登录，并将客户、价格、历史单据和账单数据接入云端共享。

这样多个店员可以基于同一套业务数据协作，而不是各自维护分散记录，也为后续系统稳定化和多人使用场景打下基础。

店员登录云端共享数据多人协作统一业务数据源

技术架构 Architecture Diagram

表现层 Presentation Layer

承载登录、录单、预览、历史、数据库管理和账单等页面

登录页 LoginPage 录单页 OrderEditorPage 预览页 PreviewPage 历史记录 HistoryPage 数据库管理 DatabaseManagerPage 账单中心 BillingPage

业务层 Application Layer

处理订单解析、价格匹配、校验、预览生成、历史重生成和账单联动等前端核心逻辑

本地规则解析 Local Parsing 客户资料自动补全 Profile Auto-fill 价格智能匹配 Price Matching 表单校验 Form Validation 销货单预览生成 Preview Generation 账单同步触发 Billing Sync 历史记录重生成流 History Regeneration

本地状态层 Local State Layer

负责本地数据库回退、编辑态保留、预览缓存和异常兜底保障业务连贯性

本地业务数据库 Local DB 本地历史单据 Local History 编辑态快照 Editor Snapshot 预览缓存 Preview Cache 挂起的历史状态 Pending State

服务层 Service Layer

连接云端认证、共享业务数据和自定义轻量登录接口

/api/login-accounts /api/staff-login Supabase Auth Supabase Database

数据层 Data Layer

统一存储客户、价格、销货单和账单等核心业务数据表

profiles customers customer_prices default_prices invoices invoice_items billing_entries

架构设计亮点 Architecture Highlights

前端优先设计：以前端优先的方式设计主流程，保证录单和开单操作足够轻量、直接。
云端一元化管理：使用共享云端数据库统一管理多门店终端的客户、价格、销货单和账单数据。
本地容灾与体验兜底：通过本地回退和状态保留机制，降低云端网络不稳定对业务流程造成的阻断风险。
定制化轻服务扩展：用轻量 Serverless API 补足店员登录场景，让通用系统认证更贴近真实门店的使用心智。

技术栈与核心决策 Tech Stack & Decisions

Tech Stack

React 18TypeScriptViteReact RouterSupabaseVercel Serverless APIhtml-to-image

核心决策 1：在引入高成本的 OCR / LLM 之前，优先采用轻量且稳定的基于规则本地解析 (Rule-based local parsing)，优先跑通最小可行性流程。
核心决策 2：主流程核心单据优先保存并进入预览，次要数据利用后台进行异步同步 (Core invoice save first, secondary sync later)，以此换取极致的交互响应速度。

产品演进路线 Product Roadmap

2026-03-14 · 项目启动

发现真实痛点，需求抽象

基于对家庭门店业务场景的长期观察，提炼“效率瓶颈”，决定通过 Vibe Coding 模式快速介入验证。

2026-03-15 · MVP 闭环

前端主链路跑通

实现“文本解析输入 → 动态渲染预览页”的最短闭环，确认业务逻辑的程序化可行性。

2026-03-16 – 03-18 · 体验与功能迭代

UX 护航与复用扩展

实装 PNG 导出能力；通过 SessionStorage 解决切页数据丢失问题；增加历史记录回填编辑机制。

2026-03-23 · Phase 3 架构升级

拥抱云端多用户协同

全面接入 Supabase，落地店员登录体系与 RLS 数据隔离；补齐账单管理闭环，系统进入生产可用态。

2026-03-26 – 03-27 · 性能调优与部署上线

异步解耦与持续交付安全

拆分主链路，采用“先保存核心单据并反馈预览，后台异步同步客户与账单”的策略；完成 Vercel 安全部署。

2026-03-28+ · 真实验证

门店实测上线

交由真实店员操作使用，持续收集来自一线的工作流反馈并开启后续迭代。

验证反馈与迭代 Validation & Iteration

面对真实操作环境，我根据反馈结果进行了以下核心逻辑的复盘与修缮：

已落地的体验修缮

顺应心智的账单逻辑：实测发现，若客户当前已有欠账记录，生成新单时“挂账”往往是必选项。系统现已优化为「自动嗅探历史并默认勾选累计账单」，降低了漏点概率。
原生分享突破限制：针对移动端浏览器长按“复制”图片失效的局限性，追加调用 Native `分享` API，可直跳微信选择好友，链路更无缝。
超长单据动态伸缩：起初只支持固定 8 行的单据模板。针对大宗采购，重构了底层逻辑：超 8 件商品时，自动开启纵向伸缩渲染为「长图」，打破规格边界。

权衡中与 Next Phase

解析引擎的成本权衡：现阶段高度依赖“正则结构识别”，若遇到输入全角符号或顺序倒置会导致解析失准。方案碰撞：是在现行正则基础上持续打补丁？还是接入真实 LLM API（如 DeepSeek/Kimi）进行泛化解析？目前正与店长测算 ROI。
UX 文案的误解修复：旧版本中的“返回编辑”导致用户以为能直接覆盖当前账单（实际是开启全新副本）。即将把文案拆分为动作导向更强、无歧义的“再开一单”与“修改当前单”。
国内云基建迁移：考虑将整体数据迁移至腾讯云 CloudBase，规避海外 BaaS 访问延迟。

阶段性业务成果 Key Metrics

<1 min

已入库客户平均开单耗时

原流程需 2–5 分钟

150+

真实门店有效订单

提效 500%+ 目标达成

2,000+

数字化管理的客户档案

含专属定价与全量欠账

跨文化沟通枢纽 Cross-cultural Bridge

依托 8 年的留日经验与中、日、英三语沟通能力，我与 6 人跨专业团队（融合理工、机械、美术设计等）与日本企业（ダッソー・システムズ Dassault Systèmes）进行深度对接，更顺利主导了部分深度采访与最终的公开日语发表。

命题方向 Problem Statement

企业命题

设计一款能进一步推动餐饮业省力化、省人化的产品

— Dassault Systemes 命题 (課題テーマ: 飲食業におけるさらなる省力化・省人化を進めるプロダクトをデザインせよ)

深度用户调研 User Research

场次用户深度访谈

家门店实地工作流调研

种不同餐饮业态覆盖

名跨专业背景成员协同

访谈矩阵立体：涵盖了一线店员、店长、消费者，乃至餐饮器械技术人员与工业产品设计师。

调研范围广泛：从英国风 Pub、家庭餐厅 (ファミレス)、居酒屋，最终战略聚焦至高频流水作业的连锁咖啡店。

现场课题与痛点分析 On-site Pain Points

🚨 高频且繁重的补货作业

通过实地调研，我们发现大型连锁咖啡店（如星巴克）的员工面临着巨大的后厨工作负荷：最短每 15 分钟，就需要将一整箱（约 12kg）的牛奶搬运并补充进冷柜中。

这种纯依赖托盘搬运和人手操作的高频重复动作，极其消耗员工体力与接客时间。

高频作业 (15分钟/次) 体力负担重 (12kg/箱)

🧊 结构受限导致的 FIFO 积压困境

相较于便利店双向开门的饮料柜（后进前出），咖啡店冷柜通常仅有一个开门（单向进出）。这导致新补充的牛奶很容易直接堵在最前面，旧牛奶则被不断推积在深处。

为了严格遵守 FIFO（先进先出）原则，员工每次补货都必须手动将旧牛奶移出、确认保质期，再把新牛奶塞入后方。如果为了省事忽略顺序，又会造成极大的过期报废损耗。

单向进出的物理结构限制极易形成隐性过期积压死角高昂的商品报废损耗成本

目标用户画像 User Persona

☕

连锁咖啡店员（如星巴克等）

20 代 · 兼职或正式员工 · 需兼顾前台接客与后台库存管理

日常任务

接客、饮品制作、库存整理、牛奶补货、FIFO 排序，全在繁忙时段的间隙极限压缩完成。

核心痛点

牛奶补货需逐个翻看保质期并进行空间挪腾，步骤繁杂，稍微分心就容易排错顺序。

目标

希望补货动作达到“无脑化”，干掉人为思考顺序的环节，把时间还给前台服务。

流程重塑：从人工到产品干预 User Journey

⚠ Before — 极其消耗心智的人工 FIFO 排序

新牛奶
入库

逐个查看
保质期

需逐瓶
翻看确认日期

手动腾挪
排列位置

取出旧货
让出后排空间

复原旧货
前置

严重依赖
瞬时记忆执行

跑回前台
接客

大量浪费
黄金接客时间

✓ After — 使用本物理装置辅助后的顺滑流程

新牛奶
入库

直接放入
专用装置

无脑丢入即可

装置物理
自动导向

临期商品必前置

立即返回
前台接客

专注客户微笑

产品运作原理 How to Use: Stock Ride

⚙️ 极简的两步操作体验

我们将繁杂的日期对比和空间挪腾工作，全部交给了精巧的物理结构。

使用本装置（命名为 Stock Ride），店员仅需闭眼执行两个动作：

补充 (IN)：将新拿到的牛奶包直接从装置上方放入。
抽取 (OUT)：需要使用时，直接从装置最下方抽取。

通过力学轨道的巧妙引导，只要重复这简单的 ①+② 步，物理装置就会自动完成完美的先入先出（FIFO）闭环，彻底释放一线员工的心智负担！

用户故事 User Stories

用户角色 (As a...)	需求描述 (I want to...)	核心价值 (So that...)
一线店员	在往冰柜补货时，不需要人工判断日期，塞进去就能自动完成先进先出排列。	彻底消灭排错顺序的可能，不再需要背诵复杂的操作规范。
前台服务生	能够把“取奶”和“补奶”的时间压缩到极致。	能随时响应前台顾客的需求，提升门店翻台率和好评度。
门店店长	即便新入职的打工兼职（临时工）也能不打折扣地执行 FIFO 标准。	避免高昂的商品报废损耗成本，提升门店整体利润率。

产品宣传与概念展示 Promo Video

除了硬件本体，另为产品策划并制作了一支全方位的产品商业推介视频。该宣传视频的内容策划、分镜脚本设计、实地素材拍摄以及最终的剪辑制作均由我个人主导完成。

阅读 Blog (Medium) ↗

影响力验证 Impact & Validation

背景高度融合的专业团队

涵盖：信息通信、融合理工、机械、环境设计与美术

300+

线下发表现场听众规模

同步开启无限制免费全网线上推介直播

30+

企业评委与高阶行业专家

汇聚 5 家联合命题企业及 10 余家投资关注方

项目背景与展览概念 Exhibition Concept

活动背景： 本项目为 2025 年东京科学大学学园祭（工大祭）中的线下互动体验展位。

核心概念： 打造一个“人人皆可成为创作者”的 AI 漫画交互站。参观者只需向工作人员简单口述或分享一段自己的日常趣事、奇思妙想，系统便能实时将其转化为一张独一无二的专属日系漫画，并同步展示在会场的 Miro 数字墙上。

项目定位： 这是一次面向大众的 AIGC（生成式 AI）零距离科普体验，同时调研一般民众（尤其是老人和小孩）在面对 AI 创作时关注的修改点、心理接受度及倾向偏好等，为后续的学术科研打下了坚实的数据与洞察基础。

痛点与解法 Problem & Solution

现场瓶颈

在展览中，面对观众滔滔不绝的口述故事，工作人员需要一边听一边手动打字提取要素，且每次都要重复输入极其冗长的绘画参数（Prompt），不仅耗时巨长，还非常容易漏掉核心情绪，导致大排长龙。

AI 破局

我主动提议并主导开发了一个基于本地部署的 LLM 辅助流转工具：实现观众故事的结构化转录、自动化特征关键词提取，并瞬间拼装为专业的漫画提示词。把人从“打字员”解放为“体验向导”。

系统架构与管线 System Pipeline

故事捕捉源头

工作人员引导参观者分享经历，口语化的叙事被捕获。

Ollama 本地 LLM 引擎降噪过滤

部署在本地的离线大模型对输入信息进行结构化清洗，规避展会糟糕的公网断连风险。

绘画特征元数据提取

精准抓取：视觉场景、主角特征、核心动作与情感基调。

Prompt 组装车间

将特征数据映射拼装为 Gemini 可识别的标准指令。

Gemini 终端生图与反馈调整

（依据用户喜好微调风格指令，完成漫画渲染）

Miro 画板公开展示所有漫画

共 88 张专属漫画，现场展览 + 问卷收集反馈

系统操作界面 UI & Interaction

工程亮点 Technical Highlights

🤖

离线大模型驱动力

通过 Ollama 在展位笔电上硬核拉起本地大模型引擎，彻底斩断对现场恶劣公网及昂贵 API 的依赖。

🖥️

闭环可交互原型

使用 Python/Node.js 构建了约 20 个文件的中小型独立应用，包含表单、动作响应与数据承载的完整骨架。

⚡

高阶 Prompt 流水线

设计了一套稳定的多层级推理链（思维链）：让模型依次扮演聆听者、提炼者和专业绘画指导三个身份。

活动势能与回响 Event Impact

250+

两日间驻足展区人数

100+

重度交互与体验用户

高质量故事插画展示

30+

有效定性体验洞察问卷

张紫琼的作品集

我的项目 My Projects

门店智能开单与账单管理系统

📝 智能录单与订单编辑

🧾 销货单生成与图片化导出

⏳ 历史记录管理与重生成

🗂️ 客户资料与价格规则管理

💰 欠账跟踪与账单流水管理

☁️ 登录与云端共享协作

餐饮业省人化实体产品设计

🚨 高频且繁重的补货作业

🧊 结构受限导致的 FIFO 积压困境

⚙️ 极简的两步操作体验

AI 故事转漫画互动生成系统

学术研究 Academic Research

教育背景 Education & Background