V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
PinLG
V2EX  ›  分享创造

从发现需求开始—>分析需求—>到开发一款扩展工具的全过程!欢迎讨论

  •  
  •   PinLG · 229 天前 · 2497 次点击
    这是一个创建于 229 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我们开发了一款名叫“界面翻译”的扩展插件。其核心理念是对静态页面内容进行翻译标记和保存。

    也许很多人会说,静态页面还需要翻译吗?不就那么几个词吗?看多了不就记住了嘛!

    为什么会觉得这是一个需求点!那是因为我们公司有一个小组,在使用海外的 Saas 软件,这是一款名叫 SeRanking 的 SEO 网站数据及关键词查询的软件。它是没有中文版本的。登录时候后界面并不像 X(Twitter)这样的信息流,而是一个几乎固定的查询和操作页面,但是功能及内容点又非常多。因此在使用中公司的小伙伴使用起来真的非常不方便。

    当然这个时候可以使用 Google 页面翻译或 Safari 页面翻译之类的工具,但是如果熟悉这类网页翻译工具朋友就知道,它的实现逻辑还是有点粗糙的或者说为了最大的兼容性,它只能做成这样。

    Google 网页翻译的使用体验待提高的点:
    1 、全网页笼统翻译,切换网页时需要重复点击“翻译”,偶尔也会在同网址下贯穿所有网页不需要点“翻译”会自动进行翻译。由于是笼统翻译,因此所有需要的不需要的点都翻译了一遍,这样体验效果就不是很好。
    2 、翻译准确性不是很好。对于文章类或段落嘞翻译,由于有上下文,因此翻译内容可读性还不错,但是对于单点翻译就会非常不准确,举一个小例子,大多数网站中的菜单中有一个“Home”,中文通常翻译为“主页”或“首页”,如果用谷歌网页翻译就会翻译成“家”。其它很多场景都会有类似的问题。
    3 、由于一些网页结构的问题,Google 网页翻译 翻译转换失败。

    Safari 网页翻译的使用体验待提高的点:
    1 、最大的一个问题是,当使用 Safari 网页翻译的时候,它是有一个刷新的动作的。对于动态内容,例如 Twitter 信息流这种,没有问题。但是如果是表单提交这种情况,那就是灾难,一刷新,填写在表单中的内容就全没了。
    2 、Safari 网页翻译对全文翻译的时候,会对图片中的内容也进行翻译。虽然这是该翻译的卖点,但是使用体验极感官真的不是很好。
    3 、翻译准确性和网页结构导致翻译失败和 Chrome 是类似的。

    根据我们自己的总结来说,谷歌和苹果浏览器自带的网页翻译适合动态内容翻译,例如信息流或新闻。并不适合静态固定内容,例如用户设置、操作设置等界面。

    那么我们在开始启动这个项目之前有一个疑虑点,设置及操作界面的本土化(汉化)真的有市场需求吗?还是一个鸡肋。

    这个时候我们想到了 Telegram(电报),使用这款软件的时候,大家是不是都会去安装一个语言包进行界面汉化。如果简中用户不进行汉化还能顺畅的时候 Telegram 吗?我们觉得是可以的,只是操作难度上上手稍微困难一点点,但是心里预期上相差很大。从这点看界面本土化(汉化)的用户需求是一定存在的。

    另外我们自己小圈子里也做了一个测试,让大家把手机界面的语言和微信界面语言切换成英语,日语,韩语。看看大家使用后是什么感觉。微信与朋友之间聊天用的依然是中文,这部分是动态内容。而真正的静态内容使用到的其实并不多就是“发送”、“照片”“拍照”等那么几个选项,而且选项中都是提示图标(icon)。

    使用一天后的大家的聚合的反馈是:

    如果使用英语界面,手机的设置中进行一些操作时,第一层设置界面在大家(2 位英语 4 级、2 位英语专 4 、1 位英语考级没过,都不是计算机专业)配合着提示图标(icon)及使用熟悉情况,大致可以猜到设置的具体应用,但是到了第二层及第三层界面几乎看不懂。

    还有两位分别使用的是手机设置界面切换成日语和韩语,他们是没有学习过这两种语言的。得到的反馈是:怎么办把它切换成中文啊。看不懂啊!切换不回来的。在哪儿设置啊?

    而在使用微信时得到的反馈是,正常操作可以完成,但是非常变扭,操作速度明显下降。然后大家同时去完成一个“关闭朋友圈”。正确的设置路径是:微信右下角“我”--“设置”--“通用”--“发现页管理”--“朋友圈”--“在发现页中显示该功能”此处关闭。得到的结果是 10 分钟所有同事都没有完成(当然他们在中文界面也没有进行过这个操作,所以必须要看懂界面才能操作)。

    之后我们还了解市面上有关于 Notion 、Figma 等网页版的汉化扩展插件,但是他们都是针对单个目标完整。而不是通用型的。而且安装量还很不错,Figma 的其中一款汉化扩展有 7-8 万安装量。

    基于以上的思考和测试。我们将网页内容划分为“动态内容”和“静态内容(或叫固定内容)”。例如用户设置、注册、操作设置(海外服务器设置界面等)、操作查询、操作(例如 Figma 操作界面汉化),Wordpress 及 Shopify 应用插件设置和使用界面等等进行本土化(汉化)。

    大家坐下来讨论这个事情,觉得可以试着做做看,凑了几个人在空闲时间把它做出来,如果别人不用,就我们自己公司内部使用。

    最后做出来的产品因为是针对界面本地化所以命名为“界面翻译”。
    主要特点:
    1 、用户可以自己进行翻译标记,翻译标记过程中接入了 Google 翻译的 API 辅助翻译标记的点,然后进行手动标记数据点。
    2 、如果对整个网站的操作界面进行了标记,还可以将这个标记的数据做为一个语言包进行发布,供其他使用该插件的人使用。当其他用户打开语言包对应的网站时,会自动调用该语言包加载并进行汉化。
    3 、为了提升语言包本地加载的速度,语言包首次从服务器中加载下来之后,在本地存在缓存中,这样几乎可以达到毫秒级调用语言包的速度。单个语言包其实并不大,很大的几百 K ,小的只有几十 K 或几 K 。
    4 、只要安装了“界面翻译”扩展插件,每次打开对应的网站,插件就会自动调用语言包覆盖界面中对应的点,将其本地化(汉化),刷新、重启浏览器等都不影响界面汉化。
    5 、如果是公司内容使用,标记制作语言包的用户可以作为主账号,将对应的语言包分享给子账号用户。这样在不发布语言包在私有情况下也可以进行语言包分享。
    6 、支持绝大多数网站界面标记,由于网站框架和实现方式不同,目前有部分文本元素无法标记。有待后期优化。
    7 、目前已发布用户注册免费账户后可以直接调用到的语言包的网站有:
    seranking.com ( SEO 领域)
    producthunt.com (互联网新品发布)
    producthunt.com (互联网新品发布)
    g2.com (互联网产品测评)
    reddit.comnew.reddit.com ( new 这个是 reddit 的新界面)
    github.com (程序员都懂)
    stackoverflow.com (程序员都懂)
    dzen.ru (类似 YouTube 的俄语最大的视频)
    fiverr.com (全球知名威客网)
    uspto.gov (美国商标局)
    后续会继续制作语言包

    8 、当用户加载服务器的语言包后,再此基础上还可以进行自标记。自标记内容将优先于在线加载的语言包,两个数据包将同步叠加使用。当然用户也可以在扩展中选择只使用自己标记的语言包(不叠加)。

    大致的几个特点就是上面说的几点。也是我们对这个产品大致从想法到开发的思路。大家可以一起讨论讨论,谢谢!

    之后我们先上架 Chrome 应用商店,其它商店还在筹备中。

    如果要看效果,我们录了几个视频,上传到 YouTube ,感兴趣的可以去瞅瞅:

    YouTube:
    https://www.youtube.com/@PinLG

    Chrome 扩展商店:
    https://chromewebstore.google.com/detail/omdfbegdgeempoeceailgmjiplndjlmc

    官网:
    https://pinlg.com/
    https://pinlg.cn/
    这个 PinLG ,完整的意思是:Pin Language
    意思是:将母语文本像图钉一样钉在你所使用的界面上,能够帮助你更好的理解和注释相应的意思。

    写的有点流水账,边想边写,没有打过草稿。如果有错别字什么的,请多包涵,欢迎一起讨论。谢谢
    5 条回复
    PinLG
        1
    PinLG  
    OP
       228 天前
    刚刚发布了 Bitly 短链接 用户操作界面的汉化语言包。只需要安装 界面翻译 扩展 注册一个免费账户登录后就可以自动调用该用语言包。
    YouTube 录屏演示视频
    gen900
        2
    gen900  
       228 天前 via iPhone
    我觉得满足了市场痛点。很好的思路
    PinLG
        3
    PinLG  
    OP
       227 天前
    @gen900 感谢!感谢!
    PinLG
        4
    PinLG  
    OP
       226 天前
    Rendernet AI 是一款可以创建一致性面部人物场景的 AI 生成工具。界面翻译已经发布了汉化版,感兴趣的可以去试试。汉化后效果如下录屏。
    比 Google 网页翻译好用的多,精准翻译,实时翻译,不会把输入框中的提示词也翻译了。只针对界面中的词翻译。
    PinLG
        5
    PinLG  
    OP
       226 天前
    什么决定语言包的加载速度?当您首次从服务器中加载语言包之后,它就会存在浏览器的本地缓存中。您打开网站的完整速度(加载完成)基本就是您肉眼可见加载语言包的速度。

    语言包存在本地缓存中,当网站加载完成后,调用语言包的速度,几乎是毫秒级的。每个语言包数据并不大,大小只有几 K 到几百 K 之间。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5565 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 02:13 · PVG 10:13 · LAX 18:13 · JFK 21:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.