产品出海？先掉坑！

💡

我们的产品还没有出海，设计师却疯了，设计师是怎么疯掉的呢？您随我一起看看吧～

出场人物：老板、产品、交互设计师小D、UI设计师小B、开发、测试

叮叮当当，叮叮当当（打铁声音）

产品设计告一段落，产品、交互、UI、开发、测试，都在有条不紊的进行着

老板：非常好，我们的产品要优先卖到国外，你们想想办法，把产品的语言弄好

设计师、产品听到之后，立刻扔下手里的活，异口同声的说道：明白，马上干！

产品经理对设计师说：小D啊，你现在，把交互文档里所有中文都列在一张表格里吧，这样后面我好拿去翻译，这个活不难吧，一星期之后要喔～

设计师小D：我丢，我们不是一个小App，是一整个系统诶，你这样搞岂不是让我现在什么都不干都投入到这个工作里吗？

产品：这个需要这么久吗？？好吧，那你先一个模块一个模块的列吧，我看看有多少词

设计师小D：行吧

一周后～

设计师小D：呼，弄完了，一共10个模块、每个模块平均50个词条

产品：数量有点多啊，别急让我翻译下，可是我们公司还没有专门的翻译部门诶，有些专有名词翻译错了可就麻烦了，看来得请教下市场部门

一周后～

产品：害这市场部，翻译下就需要这么久，快给设计师放在交互与UI里看看效果

交互、UI设计师：淦，这么多条怎么也要个3星期吧？

产品：行吧三星期就三星期好了

三周后～

交互设计师小D：UI小哥哥有其他事情，我把交互整完了，你看看有没有问题

产品：嗯嗯我看看，，，，应该没啥大问题，就是你这些超出的怎么这么多

交互设计师小D：之前做设计的时候就是按照中文的文本长度进行预留的呀，现在超出不是很正常吗？更何况现在还是英文，到德语、俄语会更长

产品：这可不行，改改设计吧，文案我也修改修改

又是一周后～

测试：你们确定一下，有些地方的标点符号不一致哦，中文的有感叹号，英文就没有了

产品、设计：好的我们自己核对核对

又又一周后～

产品：老板说，需要给出10国语言的交互文档，你想办法整整吧，这里是对应的翻译表格

设计：十种，行吧，什么时候要？

产品：你看看这周末下班前？

设计：少说两个星期

设计师开启了为期两周的吭哧替换文案的过程

终于10种语言的交互文档制作完成，产品经理很满意，交互设计师已经崩溃

哈哈前面是设计师的流水账，接下来是一些小干货：

首先，什么是国际化和本地化？

国际化：让产品做到足够兼容

本地化：让产品可以被定制

两者相辅相成，共同促进才能服务好不同区域不同文化背景的用户们

国际化设计中，最主要的一个差异就在于语言的差异，而语言的差异又分为几个主要的差异：1. 字符形态差异；2. 内容长度差异； 3. 阅读顺序差异；4. 词汇分界差异

其中在语言差异中，最让人头疼的就是语言的长度差异了，中文的两个字 100px 的宽度，英语可能就要 150 宽度，俄语、德语可能就要 300 px 的宽度了

国际化本地化如何做预留？

IBM方案：

5个汉字以内需要200%-300%
5-10个汉字需要180%-200%
11-15个汉字需要160%-180%
15-25个汉字需要140- 160%
25-35个汉字需要130%-140%
36个汉字以上则需要130%

华为方案：

英文字符少于 10 个预留多 100%
多于 10 个小于 20 个
多 50%多于 20 个多 30%

对于设计开始阶段需要明确的

在一开始做设计的时候，尤其是原型阶段，

记得用英语设计占位文案！！！！！

英文是国际化的第一步，即使你的产品永不出海，你也应该以英文版本为基本款进行设计

建议在原型阶段就开始做这样的操作，第一避免空间不够，第二避免自己依赖中文语境设计，第三可以提前预览外语状态下的设计效果；

提高翻译文本替换的效率

建议设计师和产品经理在原型（高保真更好）上把每个词都列为一个表格中的一栏，这里用谷歌文档、Excel 都可以，谷歌文档可以直接调用谷歌翻译的功能直接在表格里查看相对应的文本长度（推荐个小工具，谷歌文档自动翻译表格），最后再用数据填充插件（sketch我用的是Kitchen，Figma上面肯定也有，善用搜索引擎）将已翻译的文本填充（在填充前记得处理好你的设计稿，按照数据填充差距的要求来处理，具体这里不展开）到你的设计稿，这样就可以快速方便的完成语言替换了～

用了这个方法真的可以提高我70%以上的效率，再配合自己的录制的 Mac 自动操作导出 PDF，只要前期处理好设计稿就好

需要自查的内容：

语言部分：字母、数字、书写方向、大小写

文化部分：图片、颜色、名称、电话号码、地址、邮编、货币、度量衡（单位）日期时间格式、时区、数字格式

法律法规：隐私条款、未成年条款、营销条款、工业品条款

什么是伪本地化 Pseudolocalization？

在我看来伪本地化 Pseudolocalization 就是一种方便快捷的在没有小语种文案的情况下自己检测自己的设计稿在文本超过长度的情况下是否可以正常工作的一种手段

可以使用Sketch 伪本地化插件和伪本地化生成网站来体验下

感兴趣的小伙伴也可以看看奈飞的这篇文章，里面详细描述了伪本地化是如何帮助设计师优化界面设计的

谢谢你看到这里，如果有收获欢迎转发分享，如果有想法欢迎和我沟通～

附录：小工具汇总