最近做了一个叫 DrawGrid 的小工具：
它最开始的功能非常简单：
给一张参考图片加上网格。
如果你画过素描、肖像、临摹，应该对 grid method，也就是"网格临摹法"不陌生。
它的基本逻辑就是：
- 在参考图上加网格
- 在纸上画出同样数量的格子
- 一格一格去观察和临摹
- 最后把整张图拼起来
听起来很简单，但这个项目做了一段时间以后，我慢慢发现：
用户真正需要的，并不是"给图片加几条线"，而是一套更顺畅的参考图绘画流程。
这篇文章就聊聊 DrawGrid 从一个简单 Grid Maker，逐步扩展成绘画练习工具的过程。
一开始，我只想做一个更简单的 Grid Maker
当时的想法很直接。
如果一个人只是想给参考图加网格，常见做法一般是：
- 打开 Photoshop
- 用 Procreate
- 下载一个手机 App
- 手动画线
- 找一个功能很多但界面很重的网站
但这些方案对于"我就想快速给一张图加网格"来说，都有点重。
所以我想做一个非常简单的流程：
上传图片 → 调整网格 → 下载
不登录。
不安装。
不需要理解复杂图像软件。
用户打开页面以后，应该马上知道下一步该做什么。
这其实也是我做很多小工具时比较在意的一点：
一个工具如果能在 10 秒内让用户进入核心功能，往往比做一个很复杂的产品更重要。
网格本身不难，难的是"别让工具变复杂"
从功能上看，Grid Maker 其实很简单。
无非就是：
- 几行
- 几列
- 画横线
- 画竖线
但很快就会遇到一个问题：
不同用户需要的网格不一样。
有的人画肖像，希望网格细一点。
有的人只是简单临摹，4×4 就够了。
有的人参考图很暗，黑色网格几乎看不见。
有的人希望网格透明一些，不遮挡细节。
所以功能慢慢变成了：
- 调整 Rows
- 调整 Columns
- 修改 Grid Color
- 修改 Opacity
- 修改 Line Thickness
- 显示 Labels
这些功能本身都合理。
但一旦全部直接堆在页面里，工具就很容易变成：
一个功能很多，但第一次打开不知道该点哪里的编辑器。
于是后面设计时我一直在控制一个原则：
核心路径始终是：Upload → Adjust → Download。
其他功能都只是辅助，而不是主流程。
为什么"网格颜色"其实很重要
一开始我甚至觉得 grid color 是一个很次要的功能。
后来发现不是。
比如一张人物照片：
- 黑色头发
- 深色背景
- 大面积阴影
如果网格线也是黑色，很多地方几乎看不见。
反过来，如果图片整体很亮，白色线也会丢失。
所以用户其实需要的是：
让网格和参考图形成足够清晰的对比。
这时候颜色和透明度就非常重要。
但这也带来另一个问题：
控制项越来越多。
所以产品设计上不能只是"能加功能就加"。
还得判断：
- 这个功能是不是高频？
- 是不是应该默认隐藏？
- 是不是应该做成 advanced option？
- 用户第一次进入页面需不需要看到它？
小工具最容易犯的错误，就是不断往上叠设置。
最后工具看起来很强大，但变得不好用了。
用户真正想做的，不是"加网格"
做了一段时间后，我意识到一个更重要的问题：
用户来 DrawGrid，不是为了"生成网格"这件事本身。
他们真正想做的是：
更准确地画一张参考图。
这两个问题看起来很像，但产品方向完全不同。
如果只是"加网格"，那么功能做到：
- 上传
- 画线
- 导出
其实就结束了。
但如果目标变成"帮助用户从参考图绘画"，那就自然会出现新的需求：
- 我需要一张对应的空白网格
- 我想打印出来
- 我想做成 worksheet
- 我想用它来练习比例
- 我想拿给学生练习
- 我想知道网格临摹到底怎么用
所以后来我增加了：
- Matching Blank Grid
- Printable Worksheet
- Drawing Lessons
- 比例与构图练习
这也是我最近对独立工具站越来越强烈的一个感受：
不要只盯着"功能是什么"，要看用户在功能前后分别想做什么。
很多扩展方向，其实就在这里。
Matching Blank Grid 是一个很自然的延伸
举个例子。
用户上传一张肖像照片，并设置成：
8 列 × 10 行
那他接下来很可能还需要：
一张同样 8 × 10 的空白网格。
因为参考图和绘画纸上的结构需要一致。
所以 Blank Grid 其实不是一个"额外功能"。
它是整个 grid method 流程里很自然的一部分。
这类功能最大的好处是：
它不是为了增加功能数量，而是为了完成原本的用户任务。
这和很多 SaaS 产品为了 feature list 看起来更长而加功能，是两回事。
Printable Worksheet 让产品的场景变了
有了 Blank Grid 之后，另外一个场景也慢慢出现了：
打印练习。
比如：
- 学生临摹
- 美术课堂
- 肖像练习
- 比例训练
- 家庭绘画活动
这时候 DrawGrid 就不再只是一个"图片处理工具"。
它开始有一点像：
Art Learning Tool
这件事对产品定位影响挺大。
一开始我的关键词可能更偏：
- drawing grid maker
- photo grid drawing
- add grid to image
后面就可以慢慢扩展到：
- drawing worksheet
- printable drawing grid
- grid drawing practice
- proportion drawing exercises
- drawing lessons
从 SEO 的角度，这其实也比只盯着一个主关键词健康很多。
我坚持不要求登录
DrawGrid 目前核心功能不需要账号。
原因也很简单。
用户来到这个网站时，通常目标非常明确：
我有一张图，我要给它加网格。
如果这时候先让用户：
- 注册
- 验证邮箱
- 建 profile
- 创建 workspace
- 新建 project
其实都是在增加阻力。
当然，从商业化角度看，账号系统有很多好处：
- 保存项目
- 同步历史
- 用户留存
- 邮件营销
- 付费订阅
但我觉得不能为了"以后可能有用"，提前破坏一个简单工具最重要的体验。
如果未来确实出现：
- 跨设备同步
- 云端项目
- 多人协作
- 作品管理
这种需求，再考虑登录也不迟。
图片为什么尽量在浏览器本地处理
另一个我比较在意的点，是参考图尽量不上传服务器。
对于 DrawGrid 来说，用户上传的图片可能是：
- 家人照片
- 客户肖像
- 未公开作品
- 私人参考图
- 商业插画素材
如果只是为了加网格，其实完全没必要把图片传到后端。
所以现在很多图像处理逻辑都尽量直接在浏览器本地完成。
这个方案有几个好处：
1. 隐私更好
用户不需要担心图片被服务器保存。
2. 体验更快
省掉上传等待。
3. 后端更轻
不需要：
- 图片存储
- 文件过期删除
- CDN
- 上传队列
- 图片审核
4. 成本更低
对免费工具站来说，这一点其实很现实。
能在前端做掉的事情，就不一定非要放后端。
移动端比我一开始想的更麻烦
桌面端图片编辑工具其实比较好做。
问题通常出在移动端。
手机上会遇到：
- 屏幕太小
- 控件太多
- slider 不好拖
- 键盘遮挡输入
- 图片预览区域不足
- 大图内存占用高
- 横竖屏切换
- 手势和页面滚动冲突
如果只是简单地把桌面端 UI 缩小，体验通常不会好。
所以后面移动端更应该考虑：
到底哪些设置是当前最重要的？
而不是：
怎么把所有桌面按钮都塞进去？
我现在更倾向于在移动端把操作拆成几个很明确的步骤：
- Upload
- Grid Size
- Style
- Export
而不是一次展示全部参数。
小工具最难的地方，往往不是开发
DrawGrid 做下来以后，我越来越觉得：
这种小工具真正难的不是"功能怎么实现"。
而是：
怎么避免把它越做越重。
因为开发过程中总会想到：
- 再加一个颜色选择器
- 再加一个比例设置
- 再加个模板
- 再加个历史记录
- 再加个账号
- 再加个 AI
- 再加个社区
每个想法单独看都合理。
但最后可能把一个原本非常清晰的工具做成一个四不像的平台。
所以我现在会经常问自己：
这个功能是不是让"用参考图画得更准确"这件事变得更简单？
如果答案是否定的，那就先不做。
SEO 也影响了产品结构
DrawGrid 这种工具站还有一个很现实的问题：
如果只有一个页面，Google 能理解的内容其实比较有限。
所以后面我也开始增加一些真正和产品相关的独立页面，例如：
- Grid Method 教程
- Printable Grid Worksheet
- Drawing Lessons
- Proportion Practice
- 不同绘画练习资源
我现在不太喜欢单纯为了 SEO 写很多泛内容。
更理想的是：
每个页面本身都是一个可以解决问题的工具或资源。
比如用户搜索：
printable drawing grid
那页面最好真的能让他：
直接生成并打印 drawing grid。
而不是写 2000 字解释什么是 printable drawing grid，最后什么也做不了。
工具站比较大的优势，其实就是可以直接满足搜索意图。
从一个功能扩展，和从关键词扩展，是两回事
以前做网站，很容易出现一种思路：
这个关键词有流量，我加一个页面。
现在我更倾向于：
这个页面是不是属于用户原本的工作流？
如果属于，那就值得做。
比如：
Grid Maker → Blank Grid → Worksheet → Drawing Practice
这是一个连续的用户流程。
但如果突然加一个：
AI Logo Generator
虽然可能也有搜索量，但和用户完全不是一回事。
这种页面即使短期拿到流量，也会让整个站的主题越来越散。
目前 DrawGrid 能做什么
现在 DrawGrid 已经支持：
- 上传参考图片
- 自定义 Rows / Columns
- 调整网格颜色
- 调整透明度
- 调整线条粗细
- 添加 Grid Labels
- 导出带网格参考图
- 生成 Matching Blank Grid
- 创建 Printable Worksheets
- 绘画练习和教程
- 浏览器本地图片处理
项目地址：
整个核心流程目前仍然不需要登录，也不需要安装软件。
做这个项目最大的一个体会
这个项目让我重新理解了"小工具"。
很多时候，小工具并不是：
功能少的 SaaS。
它其实是一种完全不同的产品形态。
它强调的是：
- 快
- 直接
- 无学习成本
- 立即完成任务
- 用完即走也没关系
这类产品不一定需要复杂的账号系统，也不一定需要很多功能。
如果用户可以在 30 秒内解决原来要折腾 10 分钟的问题，它就已经有价值了。
最后
DrawGrid 最开始真的只是：
给图片加网格。
但随着 Blank Grid、Worksheet、Drawing Lessons 慢慢加进来以后，我发现它更适合往：
"参考图绘画练习工具"
这个方向发展。
这也让我觉得，做独立工具站时，比"还能加什么功能"更重要的问题是：
用户为什么来到这里？
以及：
他完成当前操作之后，下一步真正想做什么？
如果这两个问题想清楚，很多产品方向其实会自然出现。
DrawGrid：
还在持续优化中，也欢迎做前端、独立开发或者画画的朋友拍砖。