【开发者常犯的一个错】没有一个用户能发现我做的很好用的 Ctrl + V 粘贴截图上传功能

我一个月前使用 Image2 这个 AI 图片生成工具上传图片时,发现要把截图上传还挺麻烦的,我需要把截取的图先保存到本地,然后再上传已经保存到本地的图片,有点折腾。

我在想:如果能直接粘贴就上传图片,那不是方便省事很多了吗?

于是说干就干,当天就写好了代码,支持 Ctrl + V 直接粘贴截图上传,测试没问题就上线了。

我自己已经愉快的使用了一个多月,我以为会有很多用户也在跟我一起愉快的使用到了这个功能。

直到前几天给一个用户推荐这个功能时,她说:"啊?居然还有这么厉害的功能?我都不知道!"

于是我截了个图(见下图),想教她怎么使用,发现居然没有任何一处提示,难怪她不知道怎么使用了。

于是我开始自我反思,发现这是一个很典型的问题:在开发者眼里,"能用"就等于"做完了",但是从用户的角度里,看不见的功能等于不存在。一个隐藏的快捷键,再顺手再好用也只是开发团队内部的彩蛋。

于是问题从"实现方便的粘贴图片"变成了另一个更有意思的题目:怎么让一个隐藏快捷键被用户发现?

我最终修改了三处来解决这个问题:

一、常驻文字提示。

在上传占位框里,"Upload / 最大 10MB" 下面加一行灰字:"或按 Ctrl+V 粘贴",对用户永远可见,零学习成本。

二、加一个显式的粘贴图标按钮。

光有文字提示的话,不会使用快捷键的人还是不会用。所以我加了一个"从剪贴板粘贴图片"的按钮,把隐性快捷键变成一个看得见、可点击的图标按钮,能被用户直接看到并点击。

三、全局粘贴 + 成功反馈。

真实场景是:用户刚截完图 → 切回页面 → 直接 Ctrl+V。

粘贴成功会弹一个"已粘贴图片 ✓" 的提示,告诉用户这里也能粘贴。

三个都是必需的,可以互相兜底:懂快捷键的直接按按快捷键,不懂快捷键的看到按钮点按钮;都没注意到的可以在文字提示里被提醒。(以下是修改后的功能截图:)

作为开发者,如果你在做任何带"快捷操作"的产品功能,可以先问一下自己:这个新功能,如果给一个从没看过文档的新用户使用,他能自己发现吗? 如果答案是否定的,那它可能还没真正"上线",请再多补充一些提示。

相关推荐
Alice-YUE1 天前
前端 × AI:从 Cursor 到 Transformer,一份完整认知路径
前端·人工智能·transformer·ai编程·前端开发·cursor
Frag0ut8 天前
【深度思考】前端基石的觉醒:探讨 HTML 语言的再进化方向
html5·前端开发·前端架构·大前端·webcomponents·技术趋势·浏览器api
志尊宝8 天前
Vue3 零基础每日笔记(054):Pinia 三件套详解——state / getters / actions 全搞懂
前端·javascript·vue.js·vue·前端开发
志尊宝14 天前
Vue3 零基础每日笔记(055):组件里正确使用 store——storeToRefs 解构与 $patch 批量修改
笔记·vue·html·前端开发·软件开发
志尊宝17 天前
Vue3 零基础每日笔记(040):Vite 创建 Vue3 + TS 项目——企业标配从这一篇开始
笔记·vue·html·前端开发·软件开发
志尊宝19 天前
Vue3 零基础每日笔记(035):什么是 Composables——mixin 之死与逻辑复用新方案
笔记·vue·html·前端开发·软件开发
志尊宝19 天前
Vue3 零基础每日笔记(030):动态组件与 keep-alive——切换组件与页面缓存
笔记·vue·html·前端开发·软件开发
志尊宝19 天前
Vue3 零基础每日笔记(029):插槽 slot 三连——默认、具名、作用域一次讲透
前端·javascript·vue.js·vue·前端开发
2601_9622841724 天前
欧洲转码指南:后端、前端与全栈开发解析
前端开发·devops·后端开发·全栈开发·欧洲转码指南
醉颜凉24 天前
React触摸事件全解析:掌握移动端交互开发的核心秘籍
react·前端开发·触摸事件·移动端交互·react事件