跳转至内容
storyboarder_website_design.hlp帮助

0→1 产品设计 · 品牌 · UX

sumugi

把"我有个故事"变成"我做出了一部漫画。"

Sumugi 是一个可视化叙事平台:任何人都能用 3D 搭建场景、导入 VRoid 角色、直接产出一集内容——无需手绘。从 0 到 1,一路做到尾。

导览

项目

sumugi

角色

产品设计 · 品牌 · UX

行业

3D创作工具 · 独立漫画

范围

从头到尾 0→1 · 品牌、产品与网站 · 12 个界面

工具

Figma · Linear · After Effects · Notion

年份

2026

Sumugi — 封面
成效

2.6×

回访率

画廊置顶的主页,回访率是功能主导版式的 2.6 倍。

9 天

首个场景中位等待

自助等待名单,把首个场景的中位等待从 87 天压到 9 天。

11 / 12

正确理解产品

6 秒成品分格自动播放——旧版有 9/12 在 8 秒内放弃。

设计挑战

一千两百名创作者每天在产出 3D 场景,对外 Sumugi 却几乎不存在。五个相扣的问题堵死了每一条增长路径。

五个问题
01一个指向错误行业的名字"Storyboarder" 是电影岗位名,真实用户却是漫画创作者。招聘者、学生、创作者各看到一个不同的产品。
02创作者还是读者——从未有人做出决定做漫画和看漫画是两条不同的漏斗。两头讨好,两头都没转化。
03软件产品,但护城河是社区3D 工作空间是工具,社区才是产品。当软件卖,就在 Clip Studio 和 Krita 面前被商品化。
04一个全新类别,没有任何参照物没有"像 X 但面向 Y"可套。卖任何东西之前,得先让这个概念被看懂。
05一套没有任何表达的平淡视觉识别旧网站和任何 SaaS 一样——过目即忘。对一个主打视觉叙事的工具,这是可信度问题。

SUMUGI — 案例研究

§ 01切入点 — 关键转折
目标

拿下一个可独占的名字、坚定创作者优先、把社区当成产品——把“做出第一格并发布”的中位时间从数月压到数天。

关键转折

出售社区产出——而非产生它的工具。

每一通 Beta 电话都指向分格,而非工具。于是主页与信息架构都围绕产出重建:画廊置顶、用户画像做导航、功能按工作流呈现。工具在,但从不自我介绍。

SUMUGI — 案例研究

§ 02命名 & 含义
这个名字 · 前 → 后

Storyboardersumugi

sumugi

/ˈsuː·muː·ɡi/ ·

意为编织 · 将线纺成布”.

为何是它

简短、可独占,在中英日欧发音稳定。不锁死在某个功能上——它暗示工艺与组合,正对应用户描述自己工作的方式:逐格搭建故事。

SUMUGI — 案例研究

§ 04色彩 — 色板
色板

电子紫

#7E31F2 · 主品牌色 · 行动按钮

深紫

#6F15F0 · 悬停 · 按压状态

墨紫

#4F0CBB · 背景 · 主视觉底色

超级品红

#F231F2 · 点缀色 · 吉祥物高光

信号黄

#F2E531 · 提示 · 新功能提示条

Sumugi 的五色系统——电子紫主导,品红点缀吉祥物,信号黄标记新功能。

SUMUGI — 案例研究

§ 05字体
字体家族

展示 · Megazoid

正文 / UI · Storyboarder Sans

搭配

展示Megazoid: 展示 + 标志。圆润、立体、漫画原生。 正文 / UIStoryboarder Sans: UI + 正文。定制可变无衬线——400 中性,800 有力。

SUMUGI — 案例研究

§ 06产品界面 (0→1)
范围

做 0→1 是选界面、不是堆功能——12 个,归为三件事:进入、创作、归属。真正拦住人的是"空白页",所以 Sumugi 从不空白开场:一切都像"改",而非"从零创造"。

信息架构 · 站点地图

信息架构 · 站点地图

把 12 个界面收敛成三条动线:进入 → 创作 → 归属。

引导体验

引导体验

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

邀请落地页

邀请落地页

注册前就定调:你已经在门内。

素材库

素材库

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

素材上传

素材上传

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

批量上传

批量上传

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

素材市场

素材市场

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

素材市场 · 商品页

素材市场 · 商品页

点进一个素材:预览、试用、加入自己的项目。

一键导出流程

一键导出流程

产品承诺的那一"下":3D 场景变成一格可发布的成品。

创作工具 · 核心流程
搭建3D 场景 · 镜头
选角角色 · VRoid 导入
构图2D 分格编辑器

概念用户流程 · 核心任务示意,非上线界面

SUMUGI — 案例研究

§ 07网站 — 终稿
主页
主页终稿

完整落地页终稿

主页 — 浅色模式
主页浅色模式

同一页面的浅色版本

活动页
活动落地页

为发布与邀请单独设计的落地页

SUMUGI — 案例研究

§ 08成果
经验教训
01社区是产品,不是功能。我们主打工作空间——但人们回来是为了看别人做了什么,不是渲染器。画廊置顶,胜过所有功能主导版式 2.6 倍。
02新类别需要演示,而非定义。说"面向 2D 漫画的 3D 工作空间",12 人里 9 人茫然。一个 6 秒、无文字的成品分格自动播放,让 11/12 正确描述了产品。
03平淡的设计是一种定位声明。旧网站干净、过目即忘。Megazoid、电子紫、胶片颗粒——都在说"我们在乎外观"。没有立场的设计谁也招募不到。
交付上线
  • 产品设计 · 12 个核心界面
  • 营销网站 · 5个页面
  • 品牌系统 · 标志 · 色彩 · 字体 · 声音
  • 上线推广活动 · #MadeWithSumugi
  • 设计系统 · 14个组件
  • 代币化Tailwind主题
  • 邮件模板 · 欢迎 · 邀请 · 更新日志
  • 动效原则 · 6个循环
  • 创始人交接文档 · 18页
  • 获选展示 · Designspiration · Sidebar · Hover.dev

访问 storyboarder.com

SUMUGI — 案例研究

Sumugi
就绪