📱 UX Flow Analysis · 气囊支架 · 8 Screens

气囊支架定制
下单全流程用户体验分析

逐屏拆解从淘宝产品页到最终确认下单的每一个操作节点，识别用户流失卡点与体验断层

8
操作屏幕
2min+
平均完成时长（预估）
6
主要卡点
5.8
综合体验评分 /10
📍 完整下单流程总览
1
产品详情页
→
2
规格选择弹层
→
3
AI定制入口页
→
4
生成历史页
→
5
传图+处理方式
→
6
AI风格选择
→
7
原图确认页
→
8
产品预览&下单
3
🔴 高危卡点
3
🟠 中级问题
5
🟡 体验优化项
4
✅ 设计亮点
⚠️
核心诊断：流程过长 + 决策点过多 + 三处价格混乱

用户从淘宝页到最终下单需经历 8个独立屏幕、5次主动决策，在普通消费品里属于极高摩擦力。最致命的是：全程 价格出现了4种不同数字（¥3.11 / ¥9.9 / ¥15.81 / ¥19.9），容易造成"被骗感"，直接触发放弃。

1
淘宝产品详情页
用户首次接触产品，决定是否下单的第一关
体验评分 6/10
✅ 视频讲解引导 ✅ 价格优惠清晰 ❌ 退货政策焦虑 ❌ 价格前后矛盾
🔴 高危
"不支持7天无理由退货" 置顶展示 这是用户在弹层里看到的第一行文字。定制品不支持退货是合理的，但把它放在最显眼的位置，第一印象就是"买了不能退"，直接激活损失规避心理，大量用户在这里犹豫退出。
🔴 高危
4种价格同时出现，产生"被骗"感 ¥3.11（主图角标）→ ¥9.9（优惠前）→ 弹层里又变成¥15.81/¥19.9。用户看到的第一个价格是¥3.11，点进去发现¥15.81，落差过大，直觉反应是"标题党"。
🔴 高危
视频讲解里的注释"并非直接付钱"说明用户普遍困惑 需要在视频里特别标注"点领券购买不是付钱"，说明这个流程反直觉。正常认知是：点"购买"就是买，需要加特殊说明就是流程设计有问题。
🟡 优化
"颜色分类" 标签名词不准确 选项是"手机气囊支架自定义"，这不是颜色，是产品类型。标签名不符导致认知成本上升。
✅ 亮点
视频讲解思路正确 用视频示范操作流程，是降低用户困惑的好方法，方向对，但内容可以更简洁有力。
🔧 改进建议
  • 将"不支持7天无理由退货"改为正向表达："满意后再生产，效果图确认才下单"
  • 主图/标题统一用一个价格：最低价¥3.11，并明确注明"粘胶款起"，避免落差
  • 将"领券购买"按钮改为"开始定制"或"免费出效果图"，消除"付钱"误解
2
规格选择弹层（SKU选择）
选择尺寸/款式，点击进入定制流程
体验评分 6/10
✅ 选项简洁清晰 ❌ 退货提示再次出现 ❌ "高级定制 商家赠送"令人困惑
🔴 高危
"高级定制 商家赠送" 含义完全不清楚 用户看到这个选项会产生3个疑问：① 什么是高级定制？② 赠送是什么意思，不要钱？③ 不选会怎样？这种困惑会导致用户在这里卡住甚至放弃。
🟡 优化
价格跳变问题延续到此页（¥3.11 → ¥15.81） 用户从主图¥3.11进来，弹层默认选中的是¥15.81的磁吸款，价格相差5倍，没有任何过渡说明。
🟡 优化
粘胶款 vs 磁吸款的差异没有说明 只有价格差异（¥3.11 vs ¥15.81），没有图片或简短说明这两个有什么功能区别，用户凭什么选更贵的？
✅ 亮点
选项数量控制合理 颜色/尺寸/服务三层选择，每层选项少，认知负荷在可接受范围内。
🔧 改进建议
  • "高级定制 商家赠送"改为具体描述："AI智能出图服务（已包含）"
  • 粘胶款/磁吸款加小图标或一句话说明区别：粘胶款=普通粘贴，磁吸款=支持磁吸充电
  • 价格展示加说明文字："粘胶款¥3.11 · 磁吸款¥15.81，功能不同"
3
AI 定制入口页
用户第一次进入你们的小程序/H5，选择定制方式
体验评分 8/10
✅ 视觉设计优秀 ✅ 两条路径清晰 ✅ 成品效果图有说服力 ❌ "两步搞定"名不副实
🟡 优化
"专属定制 两步搞定" 与实际流程不符 实际上后续还有5-6步操作。夸大简单程度会让用户在发现"还没完"时产生被骗感和疲劳感，负向效果强于正向。
🟡 优化
成品展示的图是动漫插画猫咪，与气囊支架产品不完全对应 展示的是手机壳成品，而不是气囊支架成品，用户可能对最终效果产生错误预期。
✅ 亮点
两条路径设计清晰 "上传图片定制" vs "AI描述生图定制"，选择清晰，视觉层级正确（主要路径更突出）。
✅ 亮点
整体视觉设计品质高 紫色品牌色统一，背景、字体、卡片风格一致，给用户"专业可信"的第一印象。
🔧 改进建议
  • 将标题改为"发一张图，5分钟出效果"——诚实且有吸引力
  • 成品展示图改为气囊支架实物（而非手机壳），对准产品本身
  • "生成历史"按钮对新用户无意义，可以改为"查看样品效果"
4
生成历史页（老用户才会看到）
展示用户历史生成记录，可修改或重新购买
体验评分 5/10
✅ 有历史记录功能 ❌ ID格式暴露技术细节 ❌ 每条三个按钮选择困难 ⚠️ 新用户会迷路
🔴 高危
新用户首次进来可能直接看到这个页面（如果系统跳转逻辑有问题） 如果新用户因为任何原因看到"生成历史"空白页，或者看到别人的历史，体验会非常差。需要确认这个页面只在有历史记录时才出现。
🔴 高危
"品类: 发夹 (ID: 560_0)" 暴露内部技术字段 ID是系统内部字段，对用户毫无意义，暴露出来显得粗糙，降低专业感。
🟠 中级
每条记录有三个操作按钮（修改设计/图生图修改/立刻购买），选择困难 "修改设计"和"图生图修改"的区别是什么？用户需要思考，增加认知负担。大多数用户只想"用这个图买" 或"重新做"，不需要三个选项。
🟡 优化
描述文字截断但内容太长 "软萌治愈卡通风格，小兔举手机自拍造型发夹..."这段描述对购买决策没有价值，占了大量空间。
🔧 改进建议
  • 隐藏"(ID: 560_0)"等技术字段，只显示"品类：发夹"
  • 三个按钮合并为两个："继续编辑" + "直接购买"
  • 描述文字替换为生成的效果图缩略图，图比文字更直观
  • 顶部加一个明显的"新建定制 +" 按钮，防止用户找不到入口
5
传图 + 选择处理方式（Step 2/3）
用户上传图片后，选择AI修改/原图/编辑三种路径
体验评分 5/10
✅ 步骤条设计清晰 ❌ 透明棋盘格让图像看起来"坏了" ❌ 三种处理方式区别不清楚 ⚠️ 没有图片质量提示
🔴 高危
图片上下的透明棋盘格（灰白方格）让用户以为图片加载失败 棋盘格是设计软件里"透明区域"的专业表示，普通用户看到会第一反应是"图片没上传成功"或"出错了"，直接触发焦虑和困惑。
🔴 高危
三种处理方式的差异没有视觉化示例 "AI修改后下单" vs "原图下单" vs "原图编辑后下单"，用户只有文字描述，不知道哪个效果好、哪个更简单。没有示例图，选择全靠猜。
🟠 中级
没有任何图片质量检测或建议 截图中的彩虹风景图，做成气囊支架的效果一定很差（没有主体人物/宠物），但系统没有任何提醒。用户做出来后发现效果不好，会产生差评。
🟡 优化
"当期图片"标签文案不自然 "当期"是什么意思？应该是"你上传的图片"或"当前图片"。
✅ 亮点
步骤条设计好：选择方式 ✓ → 设计图案 → 预览下单 清晰告知用户身处哪一步、还有几步，有效降低流程焦虑。
🔧 改进建议
  • 棋盘格区域改为纯白或浅灰背景，或完全隐藏，避免"加载出错"误判
  • 三种处理方式各加一张示例缩略图（原图效果 / AI转换效果 / 编辑效果）
  • 加图片质量检测：检测到无主体人物/宠物时提示"建议上传有主角的照片，效果更好"
  • "当期图片"改为"你上传的图片"
6
AI 改图页（风格选择 + 描述输入）
选择AI风格模板，可选填描述词，生成图案
体验评分 7/10
✅ 步骤结构清晰 ✅ 热门标签快速输入好 ❌ 风格缩略图全是同一个人物 ⚠️ 生成按钮颜色偏灰不突出
🔴 高危
风格模板缩略图全都是同一个卡通女孩形象 用户无法判断"我上传的彩虹图/宠物照片/自己的脸"用这个风格会变成什么样。缩略图应该用用户自己的图做示例，或者用通用样本图（而不是永远是同一个动漫小女孩）。
🟠 中级
热门修改词与图片内容不匹配 显示的热门词是"弱化背景干扰/去除多余杂物/赛博朋克风格"，但当前是彩虹图，这些词和内容毫无关联，让人困惑。热门词应该根据图片内容动态推荐。
🟡 优化
"生成图案"按钮是浅紫色/灰紫色，视觉权重不够 这是整个流程最重要的按钮，但颜色看起来是禁用状态（半透明紫色）。应该是强烈对比色、完全不透明。
🟡 优化
风格名称部分被截断（"极简线条..."） 水平滚动时最后一个选项只显示一半，没有提示可以继续滑动查看更多选项。
✅ 亮点
"第一步/第二步"层级清晰，第二步标注"可选" 减轻用户负担，告知必填/选填，是很好的UX实践。
🔧 改进建议
  • 风格模板缩略图：让AI实时用用户上传的图生成各风格预览（技术难度高），或至少用3-4种不同类型的样本图展示风格差异
  • 热门标签改为根据图片类型动态推荐（人像图→"强化五官/柔化皮肤"；宠物图→"毛绒感/卡通化"）
  • "生成图案"按钮改为深紫色实底，加✨图标，字体加粗
  • 最后一个风格选项加"更多 >" 提示可以继续滑动
7
原图确认页（原图下单 / 抠图下单）
确认图片，填写备注，点击"确认选择"进入下一步
体验评分 5/10
✅ Tab切换原图/抠图 ❌ 大量空白浪费屏幕空间 ❌ 没有最终产品预览 ⚠️ 备注框无引导文案
🔴 高危
整个页面没有告诉用户"确认后的下一步是什么" 用户点"确认选择"会发生什么？进入下一步？直接下单？还是提交给工厂？完全没有说明。尤其对于"不可退货"的定制品，用户这时候极度需要安全感。
🔴 高危
图片上下各有大块空白，页面利用率极低 彩虹图片上方和下方各有大片灰色空白区域，既浪费空间，又让整个页面显得未完成。这块空间本可以放"产品效果预览"。
🟠 中级
备注框"输入您对产品的特殊要求..."太模糊 用户不知道可以写什么，大多数人会跳过。可以给几个示例："图片偏左/偏右""主体居中""图片颜色要更鲜艳"。
✅ 亮点
"原图下单 / 抠图下单" Tab 设计合理 给用户两种选择，且区分明确，操作路径清晰。
🔧 改进建议
  • 图片上方区域改为显示"产品效果预览图"（图片叠加在气囊支架上的大致效果）
  • 按钮改为"下一步：预览成品效果"，明确告知下一步做什么
  • 备注框下方加引导示例："例如：主体居中 / 去掉背景 / 颜色鲜艳一些"
  • 压缩上下空白区域，页面整体更紧凑
8
产品预览 + 最终下单页
在手机模型上预览效果，选择形状，点击确认下单
体验评分 7/10
✅ 真实产品预览非常好 ✅ 形状选择直观 ❌ 操作工具区被截断 ⚠️ 确认下单后流程不透明
✅ 亮点
手机实物模型上显示最终效果，是整个流程最好的设计 用户第一次真正看到"我的图做成气囊支架贴在手机背面是什么样子"，这个视觉反馈极具说服力，大幅提升下单信心。这个设计值得放到更早的环节预览。
🟠 中级
"操作工具"区域被截断，用户不知道还有更多工具 "智能抠图"和"重置选区"两个工具图标只显示了图标和部分文字就截断了，用户不会主动往下滑查看，可能错过这些功能。
🟠 中级
左右箭头切换手机颜色，但目的不明确 切换的是手机颜色还是气囊支架款式？用户不清楚点箭头会改变什么。
🟡 优化
"确认下单"后会发生什么？没有说明 点下去之后是回到淘宝付款？还是直接进生产？用户不知道，不敢点。应该在按钮旁边加一行小字说明。
🟡 优化
选择形状后支架图案位置偏移（云朵型图案偏下） 截图中云朵支架的图案叠放位置不在手机中心，视觉上看起来像放偏了，影响用户对成品的判断。
🔧 改进建议
  • 操作工具区域确保完全展示在屏幕内，或加"展开更多工具"按钮
  • "确认下单"按钮旁加小字："确认后返回淘宝完成付款"
  • 左右箭头加文字说明："切换手机颜色预览"
  • 这个产品预览的设计思路移植到更早的环节（Step 5），让用户在选择图片时就能看到大致效果
📊

各屏幕综合评分

基于信息层级 · 操作引导 · 认知负荷 · 情感体验四维度

屏幕 核心功能 评分 最大问题 最大亮点
Screen 1 产品详情页 建立信任、促进点击 6/10
退货政策置顶激活焦虑 视频讲解引导方向正确
Screen 2 规格选择 选尺寸/款式进入定制 6/10
"高级定制赠送"含义不清 选项数量控制合理
Screen 3 AI入口页 选择定制路径 8/10
"两步搞定"与实际不符 视觉设计优秀，路径清晰
Screen 4 生成历史 管理历史设计记录 5/10
技术ID字段暴露，三按钮选择困难 历史记录本身是好功能
Screen 5 传图选择 上传图片+选处理方式 5/10
棋盘格让用户以为出错 步骤条设计清晰
Screen 6 AI风格选择 选AI风格+填描述 7/10
风格缩略图全是同一人物 热门标签快速输入好
Screen 7 原图确认 确认图片+备注 5/10
大量空白+无产品预览 原图/抠图Tab切换
Screen 8 最终预览 实物预览+形状选择+下单 7/10
工具区截断+下单后不透明 手机实物预览极具说服力
🎯

3个最高优先级改进

修复这3个问题，预计可减少 50%+ 的流程中途放弃率

🔴 优先级1：统一全流程价格锚点
💰
问题：用户在8个屏幕里看到了 ¥3.11 / ¥9.9 / ¥15.81 / ¥19.9 四种价格

每次价格变化都会引发"我被骗了"的不安全感，是最大的流失原因之一。

❌ 当前

主图显示¥3.11 → 弹层默认选中¥15.81 → 优惠前¥19.9 → 加补后¥15.81
用户每一步都在做价格重新判断

✅ 改造后

统一展示："粘胶款¥3.11 / 磁吸款¥15.81"，在所有触点保持一致
进入弹层时默认选粘胶款，让用户从最低价开始体验

🔴 优先级2：将 Screen 8 的"实物预览"提前到 Screen 5
🖼
问题：最有说服力的内容放在了最后，大量用户在到达前已经放弃

Screen 8的手机实物预览是整个流程最精彩的环节，但它在第8屏——大多数流失发生在第5、6屏。如果能在上传完图片后立刻给用户一个大致的产品预览，转化率会大幅提升。

🔧 具体方案
  • Screen 5 上传图片后，立刻在右侧/下方显示一个"大致预览"（图片叠加在气囊支架轮廓上）
  • 即使不是精确效果，"大致预览"也能帮助用户产生"做出来会好看"的信念，减少中途放弃
  • 参考：小红书贴纸DIY、美团设计印刷的做法
🔴 优先级3：消除"不支持退货"的焦虑表达
❌ 当前（制造焦虑）

弹层顶部最显眼位置：
"不支持7天无理由退货"
用户第一反应：买了后悔了怎么办？

✅ 改造后（建立安全感）

换一种表达方式：
"效果图确认后才生产，满意了再付款"
用户第一反应：原来可以先看效果，安全！

你的 AI 定制系统本身已经非常好

Screen 3 的视觉设计、Screen 8 的实物预览、Screen 6 的风格选择体系——这些都是竞争对手没有的。现在需要做的是把这些亮点更好地展示给用户，并消除路上的障碍。

3处
高危卡点待修复
Screen 8
最佳设计需前移
50%+
改后预期流失降低