0→1 产品设计 · 品牌 · UX
sumugi
把"我有个故事"变成"我做出了一部漫画。"
Sumugi 是一个可视化叙事平台:任何人都能用 3D 搭建场景、导入 VRoid 角色、直接产出一集内容——无需手绘。从 0 到 1,一路做到尾。
项目
sumugi
角色
产品设计 · 品牌 · UX
行业
3D创作工具 · 独立漫画
范围
从头到尾 0→1 · 品牌、产品与网站 · 12 个界面
工具
Figma · Linear · After Effects · Notion
年份
2026

2.6×
回访率
画廊置顶的主页,回访率是功能主导版式的 2.6 倍。
9 天
首个场景中位等待
自助等待名单,把首个场景的中位等待从 87 天压到 9 天。
11 / 12
正确理解产品
6 秒成品分格自动播放——旧版有 9/12 在 8 秒内放弃。
一千两百名创作者每天在产出 3D 场景,对外 Sumugi 却几乎不存在。五个相扣的问题堵死了每一条增长路径。
SUMUGI — 案例研究
拿下一个可独占的名字、坚定创作者优先、把社区当成产品——把“做出第一格并发布”的中位时间从数月压到数天。
“出售社区产出——而非产生它的工具。”
每一通 Beta 电话都指向分格,而非工具。于是主页与信息架构都围绕产出重建:画廊置顶、用户画像做导航、功能按工作流呈现。工具在,但从不自我介绍。
SUMUGI — 案例研究
Storyboarder → sumugi
sumugi
/ˈsuː·muː·ɡi/ · 紬
意为 “编织 · 将线纺成布”.
简短、可独占,在中英日欧发音稳定。不锁死在某个功能上——它暗示工艺与组合,正对应用户描述自己工作的方式:逐格搭建故事。
SUMUGI — 案例研究

最终字标以Megazoid排版。全小写——一个安静的品牌,让漫画来大声说话。
格式
SVG · PNG · PDF · EPS
- 点状眼睛——俏皮但过于字面
- 粗衬线——在紫色背景下太过沉重
- 最终版——调整字重,保留气泡感
SUMUGI — 案例研究
电子紫
#7E31F2 · 主品牌色 · 行动按钮
深紫
#6F15F0 · 悬停 · 按压状态
墨紫
#4F0CBB · 背景 · 主视觉底色
超级品红
#F231F2 · 点缀色 · 吉祥物高光
信号黄
#F2E531 · 提示 · 新功能提示条
Sumugi 的五色系统——电子紫主导,品红点缀吉祥物,信号黄标记新功能。
SUMUGI — 案例研究
展示 · Megazoid
正文 / UI · Storyboarder Sans
展示 — Megazoid: 展示 + 标志。圆润、立体、漫画原生。 正文 / UI — Storyboarder Sans: UI + 正文。定制可变无衬线——400 中性,800 有力。
SUMUGI — 案例研究
做 0→1 是选界面、不是堆功能——12 个,归为三件事:进入、创作、归属。真正拦住人的是"空白页",所以 Sumugi 从不空白开场:一切都像"改",而非"从零创造"。

信息架构 · 站点地图
把 12 个界面收敛成三条动线:进入 → 创作 → 归属。

引导体验
首次进入从不给空白页——选个模板,你已经在"改"了。

邀请落地页
注册前就定调:你已经在门内。

素材库
用素材、而非画技——第一格从别人的素材开始。

素材上传
把自己的 VRoid 角色、道具、场景导入素材库。

批量上传
一次把整套角色和道具导入,不用一个个来。

素材市场
创作者发布、再创作素材——社区自己补货。

素材市场 · 商品页
点进一个素材:预览、试用、加入自己的项目。

一键导出流程
产品承诺的那一"下":3D 场景变成一格可发布的成品。
概念用户流程 · 核心任务示意,非上线界面
SUMUGI — 案例研究

完整落地页终稿

同一页面的浅色版本

为发布与邀请单独设计的落地页
SUMUGI — 案例研究
- 产品设计 · 12 个核心界面
- 营销网站 · 5个页面
- 品牌系统 · 标志 · 色彩 · 字体 · 声音
- 上线推广活动 · #MadeWithSumugi
- 设计系统 · 14个组件
- 代币化Tailwind主题
- 邮件模板 · 欢迎 · 邀请 · 更新日志
- 动效原则 · 6个循环
- 创始人交接文档 · 18页
- 获选展示 · Designspiration · Sidebar · Hover.dev
SUMUGI — 案例研究