如何打造一款全球化的 App？
2019 年底，我国移动用户数量突破了 16 亿，移动用户数量已经趋近于饱和，几乎达到了“人人都是移动用户”的地步。互联网产业亦经过几十年的发展，在搜索、电商、团购、社交、娱乐等领域也已经形成了红海市场。为了进一步获取用户、增加营收，“出海”已经成为绝大多数互联网产品的下一步自然选择。
笔者作为一名多年常驻美国硅谷的移动开发者，深知打造一款全球适配的互联网产品，绝不仅仅是翻译那么简单。本文将会针对移动开发，从界面处理和网络优化两个角度，分享一下笔者在硅谷一线公司学到的经验和方法。
界面处理
一款 App 要做到全球化，其第一步就是，就是要做到国际化——i18n (Internalization)，即不改变内部代码的情况下，能根据不同国家地区的语言展示相应界面。具体到文本翻译层面，在 iOS 和 Android 平台，都是用 Xcode 和 Android Studio 自带的工具，在对应的字符串文件里，通过键值的方式来添加对应的语言文本：其中键是对应文本的名称，值是不同语言下对应的文本内容。
从上图中我们可以注意到，法语内容的长度要比对应的英文内容长很多，而英文内容有时候又比中文内容长很多。这就有可能导致在原来中文适配的 UI 界面中，文本内容会因为太长而被压缩，亦或是与其他文本内容重叠而影响用户体验。下图就展示了因为翻译问题，支付宝英文版部分文字内容被压缩导致无法显示；以及微信英文版中的搜索标题从中文的一行布局变为两行：
为了解决长度问题，第一种方法是固定布局尺寸、缩小字体，这种方法方便简单、易于拓展到所有语言，缺点在于可能会导致字体过小而影响阅读障碍，亦或是界面中字体大小不一影响美观。第二种方法是固定字体，针对不同语言的文本长度，进行 UI 适配。这种做法带来的用户体验效果最好，然而工作量大且拓展性差（可能要针对不同语言设计并实现多种 UI 布局方案）。最后一种方法是默认的压缩文本，这样会造成部分内容缺失（比如上图中支付宝采取的方案）。
无论何种方案，我们在测试 UI 的时候，如果尝试每一个语言，那么它的步骤都是繁琐的：开发者必须先设置系统语言、等上个几秒钟系统刷新、再返回 App 界面观看 UI 界面结果。当适配的语言越来越多之时，重复以上步骤会变得越来越繁琐。
有没有一个方法可以不更新语言去直接观察 UI 结果呢？这里笔者建议使用“伪语言”去进行验证。所谓“伪语言”，即以英文为基本模板，在单词和句子中随机插入字符，这样文本就会变长。例如英语："Find Help Online"，通过”伪语言“算法，可以转化为“[ƒîกี้ð Ĥéļþ Öกี้ļîกี้é one two]”。之后我们只需要观察这个变长的“伪语言”能否在 UI 界面上完美展示即可验证其他语言的效果了。
除了文本长度不同，我们在翻译时还会遇到以下问题：
每个字符的高度和基准线略有不同，比如泰语
从右向左的阅读习惯，比如阿拉伯语
单复数单词完全不同，比如波兰语
针对字符高度、基准线等表现方式上的差异，我们可以对有关语言采用特定的字体和大小来绘制 UI 界面；对于从右向左的阅读习惯，iOS 和 Android 系统会自行处理，我们只需对部分显示不佳处来针对处理即可；而至于诸如波兰语中的单复数单词问题，我们可以依然可以自定义键值来动态插入对应单词。
除了针对具体的问题，一般开发过程中，我们会摒弃系统自带的翻译方法和库，而转用自定义的翻译方法和文本库——该文本库会根据客户端开发者输入的翻译数据自动提出翻译需求，在翻译完成后再自动导入对应命名空间的文本库。
网络延时
打造全球化 App 的另一个问题是：全球网络带宽和延时不一。在我国已经开始大踏步进入 5G 的时代，很多东南亚和南美地区，因为基础设施落后，他们的网络延时十分严重。在这种情况下，如果 App 响应很慢、图片资源动辄加载失败，这将造成用户体验的极大降低，从而带来用户的大量流失。
一般 App 请求网络资源，有这三种：文本、图片、视频。文本因为数据量小，所以一般不会受到网络带宽影响。我们以图片和视频为例，讲解一下在网络延时严重的情况下，如何改善用户体验。
首先，我们可以把图片资源（包括布局信息）和图片对应的布局信息（位置、大小）在服务器端分开。当用户加载图片时，我们向服务器端发送两个请求，一个请求是图片资源，另一个请求是布局信息。由于布局信息可以用 JSON 定义成文本，所以数据量很小。我们可以即刻拿到布局信息来渲染界面，整个过程是毫秒级，这样用户就不会感受到有无图片时的整个界面变化。
其次，我们可以将图片资源以 PJPEG（Progressive JPEG）的格式存储——它包含多个不同清晰度的图片扫描。我们在下载图片时优先下载清晰度最低的扫描，然后通过算法去优化细节；随着更高清晰度的扫描的下载完成，我们可以去更新原有的加载图片并不断优化细节，从而达到不断改善用户体验的效果。
最后，我们可以用个性化的加载和预览动画来改善用户体验。这里默认图片和文字已经是大家公认的必备选项了；Airbnb 的 Lottie 也提供了多种美轮美奂的加载显示器范例供大家参考；另外，在加载视频时，我们可以优先准备带毛玻璃效果的相关图片来循环播放，达到一种视频正在预热的效果。
除了加载资源以外。我们还可能会遇到下面一种情况，当用户在机场时，他打开手机，连接上 Wifi 之后相关网页跳出，需要购买相关流量套餐才能正常上网。这时候在 App 中，虽然网络请求返回的代码是 200，但是对应的 MINEType 格式是 text 或者 html，我们依然要对这种情况做特殊处理。
实际上在产品开发中，如果原 App 功能太多，已经很难优化，亦或是不适应其他地区使用。我们这个时候可以开发单独的国际版 App——国际版的滴滴和微博，国外的 Instagram Lite 和 Gallery Go，都是针对特殊国家和地区开发的 App。
最后，推荐几款常用的测试网络的工具。iOS 平台可以使用苹果自带的 Network Link Conditioner 来模拟诸如 3G 网络等各种情况；Android 平台可以用 Charles Proxy 的限流选项来达到同样的效果。
总结
互联网产品要出海，除了解决诸如翻译文本和网络延时等技术问题，还需要推出本地化的市场营销方案。实际上，中国互联网产品出海并不是新鲜的尝试：2011 年，UC 浏览器安卓版开始在印度和俄罗斯开始崭露头角；2014 年，猎豹凭借一系列安全产品在世界范围的成功而在美国 IPO；2015 年，滴滴开启了国际化之旅，开始在南美洲和 Uber 短兵相接；2019 年，Tiktok 在全球范围内走红，其发展势头令社交帝国 Facebook 都感到害怕。上述例子皆证明，只要策略妥当、用心用力，打造一款火遍全球的 App 绝对值得一试、可以成功。
参考
版权声明: 本文为 InfoQ 作者【故胤道长】的原创文章。
原文链接:【http://xie.infoq.cn/article/687f048f03f169c469dac5be6】。文章转载请联系作者。
硅谷背包客 2017.10.17 加入
卡内基梅隆大学硕士毕业、常年居住于美国的增长黑客。 工作经历横跨Netflix、Quora、Amazon、Uber。Github 全美前十的 Swift 开源作者。 电子工业出版社2018年度优秀作家。著有《iOS 面试之道》一书。
评论