多语言（国际化）网页在设计时，往往因不理解该地区的文化或语言，而忽视了许多小细节，累积起来就会造成诸多问题，例如：降低转换率、无法完全地传递产品价值理念、降低使用者的信赖… 等。作者 John Saito 以他在 Dropbox 工作的经验，提供许多设计的小技巧给读者，希望能解决在设计多语言产品的相关问题，期待能让产品的体验更好。

　　试着想像你正在试用一款新 app，这 app 在 微博 上受众多人推荐、分享 … 说它很棒、生活因此改变了 … 等。这 app UI 如下图，仔细看看是不是有些地方令你感到怪怪的？介面上方有段影片，但影片上的标题文字你却看不懂；介面上的用字有些奇怪，按钮上的文字也跑版、破格。如此的 UI 呈现品质，你还会信任这产品吗？

　　当然，这可以被解释为此 app 不是针对你所在的地区语言所设计（也许是精灵语 XD～），所以这些开发者、设计师并不晓得翻译成各国家的语言后会变成怎样。无论你信不信，这确实是非英文系国家使用者常会遇到的问题！因为许多 app 仅针对英文语系来设计，而忽略了一些翻译后的设计细节。

　　

　　为了避免类似上述的问题，底下提供了一些在设计 多语言（或国际化）产品时该注意的设计技巧：

　　1. 预留切换 多语言 的文字空间

　　多语言 产品最常遇到的问题就是在介面上没有预留足够的空间，来解决不同语言在翻译时所造成的文字长度差异。例如 " New! " 这个字词包含了四个字元，但翻译成法语后，就会变成9个字元（Nouveau !），超过英文的两倍。

　　因此若设计的介面上包含了文字的排版，请确认是否保留了足够的空间。如果没有，在转换成它国语系时，就可能会发生文字重叠或切断的跑版问题。

　　

　　咦？是不是觉得空间有点窄？

　　我们不可能懂世界上所有的语言，但我们可以借助工具来预测各种语言的长度，如 Google 试算表 搭配 GOOGLETRANSLATE 的功能，可同时转译多种语言。虽然不一定是正确的用法，但可快速概略地了解不同语言文字的长度。

　　

　　这是我透过 google 试算表所做的 “预估” 文字长度之工具

　　IBM’s globalization 网站中有个非常有用的表格，上方告知若要将英文翻译成其他语言，需要的空间大概是多少。

　　

　　2. 避免将文字排列在狭小的直栏（columns）中

　　透过直栏 （Column）编排内容是个不错的方式，它让内容具平衡、结构性与协调的特性，并且能与你精心配置的网格系统良好搭配。但当文案长度无法被预期时会发生什么事？这是多语言产品在翻译时经常会遇到的！原先一行的标题可能会变成二或三行，因而破坏了你精心设计的排版平衡。

　　

　　当你把文字放于较窄的直栏（column）中，就有很高的机率让翻译后的文字超过预设栏宽范围而形成多行。所以较安全的作法是以较宽的横列（row）来取代较窄的直栏（column），这样就能有更多的弹性空间，而不会破坏了原先的排版。

　　3. 别在图片中放文字

　　如果图片中包含文字，又必须要有多语言的版本，这对设计师来说简直是个恶梦。虽然设计师可修改 Photoshop 或 Sketch 档案中的文字图层，但你必须每种语系都进行调整以适应各种长度的文字而造成排版上的混乱。

　　以下有两个较好的解决方式：

　　使用线条取代文字：当不一定要使用文字才能传递资讯时，可以使用不同粗细、颜色的线条来呈现。