发现需求—>分析需求—>到开发一款扩展工具的全过程!

170 阅读8分钟

欢迎讨论 我们开发了一款名叫“界面翻译”的扩展插件。其核心理念是对静态页面内容进行翻译标记和保存。

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

为什么会觉得这是一个需求点!那是因为我们公司有一个小组,在使用海外的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.com和new.reddit.com(new这个是reddit的新界面)

github.com(程序员都懂)

stackoverflow.com(程序员都懂)

dzen.ru(类似YouTube的俄语最大的视频)

fiverr.com(全球知名威客网)

uspto.gov(美国商标局) 后续会继续制作语言包

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

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

之后我们先上架Chrome应用商店,其它商店还在筹备中。 如果要看效果,我们录了几个视频,上传到YouTube,感兴趣的可以去瞅瞅:

YouTube: www.youtube.com/@PinLG

Chrome扩展商店: chromewebstore.google.com/detail/omdf…

官网: pinlg.com/

这个pinlg,完整的意思是:Pin Language 意思是:将母语文本像图钉一样钉在你所使用的界面上,能够帮助你更好的理解和注释相应的意思。 对这篇文章进行一个润色