能力增加，入口开始失焦
工具以技术名称分散出现，用户难以判断从哪里开始。
MAGICBGAI 图片编辑平台 · Web 产品设计
把复杂的 AI 能力，
整理成一条可完成的工作流。
当 MagicBG 从单一商品图工具扩展为多能力平台，旧官网已无法清楚承接工具发现、任务完成与付费转化。我负责从官网架构、工具体验到积分商业化的完整设计落地。
从一次性工具，走向可持续使用的 AI 图片产品。
这次改版解决的不是单页视觉更新，而是能力增长后，用户如何找到工具、完成任务、理解结果并自然进入付费。
按真实任务组织产品
以场景连接官网、编辑器、处理状态和统一结果页。
建立可复用的产品框架
统一八类工具的导航、上传、处理、结果与积分规则。
让付费发生在价值之后
先让用户获得可用结果，再承接下载、积分与持续使用。
核心需求按任务找到正确工具统一处理状态与积分反馈结果支持比较、下载与继续编辑新工具可复用同一框架
先看产品如何变化，
再理解设计为什么这样做。
MagicBG 从单一的商品图落地页，逐步扩展为覆盖发现、处理与结果管理的 AI 图片平台。改版不是增加更多模块，而是让用户更快理解能力，并沿着统一流程完成任务。
价值表达集中，但其他工具缺少清晰入口，产品能力难以持续扩展。
产品演进→
首页承担价值发现，工具入口保持一致，并为后续能力增长留下稳定框架。
PRODUCT EDITOR · CORE LOOP从官网进入后，
从官网进入后，
任务在产品编辑页完成。
这里展示的不是官网首页，而是 Product Photos 的实际编辑与生成流程。上传建立预期，处理中维持确定感，结果出现后支持比较、下载与再次生成。
页面职责：接收输入 · 反馈处理状态 · 管理生成结果 · 承接持续使用
方案不是从新界面开始，
而是从旧产品的重复与断点开始。
基于现有页面、功能结构和任务流程完成产品审计，明确需要统一的交互规则，并以用户场景重新组织内容与入口。
官网、工具页、账户与积分入口
入口分散、状态割裂、规则重复
用户目标对应八类图片能力
发现、选择、处理、结果、付费
统一编辑器与状态组件
INPUT分散页面与功能清单
KEY DECISION以任务而非模型组织入口
OUTPUT可扩展的页面与状态模板
用户想完成图片任务，
而不是理解 AI 模型。
产品经理负责汇总用户反馈与业务侧输入；我结合这些信息完成页面审计和任务流程梳理，将问题收敛为三个设计断点：入口难找、等待过程缺少确定感，以及结果价值与付费之间缺少清晰衔接。
用“清理路人、生成商品图”等任务语言替代模型名称。
持续说明正在处理什么、需要多久以及是否消耗积分。
通过前后比较和可用输出证明质量，再承接下载与付费。
把分散能力，变成一套可扩展的产品框架。
首页负责发现价值，工具页负责完成任务，账户与积分保持跨工具一致。新能力可以接入同一条主链路，不再增加一套新规则。
01DISCOVER首页与场景
→先看懂能解决什么
02SELECT任务化工具
→按目标选择正确入口
03CREATE上传与处理
→保持过程状态可见
04CONVERT结果与权益
下载、积分和持续使用
每个界面决定，都对应一个用户行为和商业目标。
设计不是为功能换一层视觉包装，而是减少从理解价值到完成任务之间的损耗。
OBSERVATION
用户带着任务进入，而不是带着工具知识进入。
DESIGN DECISION
按目标组织入口
用商品图、清理路人、证件照等场景语言替代模型名称。
VALUE CREATED
体验：更快找到起点
商业：提高工具页到达与首次尝试机会
OBSERVATION
AI 等待不可避免，但不确定会放大退出风险。
DESIGN DECISION
拆分处理状态
让上传、识别、生成、完成和失败恢复持续可见。
VALUE CREATED
体验：降低等待焦虑
商业：减少处理中断与积分争议
OBSERVATION
用户只有看到可用成果，才会理解积分为何值得购买。
DESIGN DECISION
让结果先于付费
优先展示比较、质量和应用方向，再承接下载与权益。
VALUE CREATED
体验：先验证结果质量
商业：让转化发生在价值时刻
01MOTION DEMO
Background Remover
主体识别与透明底导出
02CORE TOOL
Product Photos
商品场景生成与营销素材延展
03CORE TOOL
Magic Eraser
涂抹清理与 AI 背景补全
04MOTION DEMO
Image Upscaler
画质增强、细节恢复与放大
CAPABILITY ECOSYSTEM
一套规则，承接八类图片任务。
导航按用户目标分组，工具页复用同一套上传、处理、结果与积分结构；增加能力时，不再增加学习成本。
Background Remover主体分离与透明底
Image Upscaler画质修复与高清放大
Magic Eraser移除物体并智能补全
Remove Text识别并清理画面文字
Remove Watermark清除水印与干扰信息
Blur Background自然景深与主体强调
Product Photos生成可投放商品场景
ID Photo标准证件照快速生成
03USE CASE
SYSTEM
SYSTEM
同一个核心能力，
用场景解释不同价值。
背景移除不是孤立的技术卖点。官网把能力翻译成用户熟悉的任务，使个人用户和商家都能快速理解结果能用在哪里。
证件照个人头像商品图
01SUBJECT CUTOUT
多主体抠图
从商品、宠物到车辆，用统一入口识别主体并生成透明背景，为后续编辑建立干净素材。
主体识别 · 边缘处理 · 透明底输出
02CONTENT CLEANUP
智能清理
通过画笔、方框或套索标记干扰物，让 AI 补全原有背景，保持画面自然完整。
多种选区 · 智能补全 · 前后比较03COMMERCE
商品场景生成
先获得干净商品主体，再生成多套营销场景，把基础抠图连接到更高价值的内容生产。
商品抠图 · 场景生成 · 多渠道输出
从一张原图，到一组可以上架的商品素材。
这条流程不要求用户编写提示词，而是用可见的场景方向帮助决策，把“会不会生成”变成“要哪一种结果”。
01 上传原图02 AI 抠图03 生成背景04 检查与下载
结果先于参数
场景卡片直接展示可获得的画面，让用户通过视觉判断，减少专业术语与试错。
同一主体，多种用途
保持商品造型与品牌识别一致，同时生成适合商店、广告和社交内容的视觉方向。
消耗之前说清代价
生成前展示所需积分，生成后将重试、下载和剩余权益保持在同一决策区。
AI 需要等待，
体验不能失去确定感。
对智能清理等结果存在不确定性的任务，设计的重点是让原图、操作区域、处理状态和结果始终可以被比较。
操作前建立预期
格式、大小、图片示例和积分消耗在上传前可见。
过程中保持反馈
上传、主体识别和场景生成被拆分为连续状态，降低等待焦虑。
结果可比较、可继续
保留原图、透明主体和生成结果之间的关系，支持下一步编辑与下载。
能力不同，操作秩序保持一致。
固定导航、文件信息、参数工具区、画布和结果操作的位置，让用户从一种工具切换到另一种工具时，不需要重新学习。
EMPTY
上传前SELECT
手动 / AI 选区PROCESS
识别与生成SUCCESS
比较与下载RECOVERY
失败与二次确认
上传前SELECT
手动 / AI 选区PROCESS
识别与生成SUCCESS
比较与下载RECOVERY
失败与二次确认
付费墙不是终点，
价值被看见才是转化起点。
用免费积分让新用户完成第一次真实任务，在结果页再清楚解释剩余权益、下载和持续使用的成本，让商业化跟随价值感知发生。
官网场景解释
用真实结果说明产品能解决什么。
60 免费积分
降低首次尝试成本，让用户真正完成一次任务。
获得可用结果
在转化前先建立对质量和效率的信任。
积分与会员权益
当用户需要下载或继续处理时，给出清晰选择。
真实使用反馈，
帮助下一轮设计排序。
产品经理同步的上线反馈显示，不同工具的使用热度已经形成清晰差异。团队据此识别高频任务，并把优化资源投入更具提升空间的使用链路。
背景移除使用最集中
抠图目标直观、结果容易判断，也是用户进入图片处理流程时最常见的基础需求。
优化方向：继续缩短上传到获得透明底结果的路径去文字同样使用较多
“清除画面文字”的任务表达清楚，用户容易理解输入、操作和预期结果。
优化方向：强化自动识别与局部修复的反馈其他工具需要强化首次尝试
下一轮围绕场景表达、入口曝光与积分提示三个环节优化，让能力价值在使用前被更快理解。
关注入口到达、首次尝试与任务完成的连续表现黑白灰负责建立秩序，
彩色结果负责证明能力。
视觉系统保持工具属性的克制：大标题建立层级，统一间距与圆角保持整体，产品输出图作为页面中唯一的高饱和焦点。
MagicBGAI IMAGE EDITING
PRODUCT SYSTEM
02 / TYPE HIERARCHY
Make every image
ready to use.Display / 64 / Semibold
ready to use.Display / 64 / Semibold
让复杂能力变得清晰、直接。
Heading / 32 / Medium任务说明保持简短，优先告诉用户可以获得什么结果。 Body / 16 / Regular
03 / NEUTRAL SCALE
Paper#FFFFFF
Canvas#ECECEA
Secondary#777777
Ink#0A0A0A
04 / FINAL INTERFACE最终上线界面 · 静态展示
不同能力，共用一套
清晰的任务状态。
以下不是四个独立控件，而是同一生成任务从输入、处理、成功到异常恢复的连续反馈。
＋上传商品原图JPG、PNG、WEBP · 最大 5MB
明确输入。 上传前说明文件要求，并用真实图片示例建立预期。
正在生成商品场景第 2 / 3 步 · 正在生成背景本次消耗 20 积分
解释等待。 当前阶段、任务进度和积分消耗始终可见。
承接结果。 保留前后关系，并把下载设置为唯一主操作。
!
商品场景生成失败图片已保留，本次未扣除积分。
或返回更换图片
帮助恢复。 先解释影响，再给出明确的下一步操作。
从价值发现到结果下载，
所有能力属于同一个产品。
官网负责让用户理解价值，编辑器负责完成任务，统一状态与积分体系负责让用户放心继续使用。
交付的不只是一套官网页面，
而是可以继续生长的 Web 产品骨架。
项目在 2 个月内完成核心体验上线，并以统一框架承接后续工具扩展与持续优化。
我的职责信息架构、核心流程、视觉系统、组件规范与上线验收
协作方式产品经理提供用户与业务输入，我负责设计转译，并与前后端共同确认规则和落地范围
后续方向围绕高频任务持续优化效率，并提升其他工具的场景认知与首次尝试
统一 8 类工具入口
官网以用户任务组织能力，核心工具共享导航、上传、处理、结果与积分结构。
建立完整状态规范
覆盖上传、选择、处理、成功、失败恢复、结果比较与下载，减少跨工具重复设计。
形成真实上线反馈
背景移除与去文字形成明确的高频需求，其他工具进入场景认知、入口曝光与积分决策的持续优化。