多语系网页在设计上该考虑什么，才能有好的使用者体验？
标签：
网页设计
2017.04.25
多语言（国际化）网页在设计时，往往因不理解该地区的文化或语言，而忽视了许多小细节，累积起来就会造成诸多问题，例如：降低转换率、无法完全地传递产品价值理念、降低使用者的信赖… 等。作者 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 档案中的文字图层，但你必须每种语系都进行调整以适应各种长度的文字而造成排版上的混乱。
以下有两个较好的解决方式：
使用线条取代文字：当不一定要使用文字才能传递资讯时，可以使用不同粗细、颜色的线条来呈现。
直接使用前端语言：如下图，绿色圆形上的文字并不属于图片的一部分，而是用网页前端语言刻出来的（因此切换语系时即能自动翻译，而不需要为了多语言而制作很多张图）。
4. 不要在句子中摆放 UI 元件
对设计师来说，不断调整 UI 元件的排版来确认哪个是最好的方案，是件再正常不过的事情。但其中若包含了文字时，你就要特别的注意。例如：包含文字的按钮、checkbox 或下拉选单安排于句子中，就可能会造成许多问题。
为什么这样做对多语言设计会造成困扰？
排列文法不同：不同语言因文法不同，排列也会有所差异。譬如将 “Buy 3 shirts” 翻译成日文，“Buy” 会移到句子的最后。如果你所摆放的 UI 元件在句子中顺序是无法被改变，那则无法顺利地适应不同语系的句子。
复数：对英文来说，会有单数与复数的两种名词表达方式，如：1 picture” 与“__ pictures” 。但在俄语中，有三种表达方式。所以如果使用者在句子中输入数量，句子就需要跟着改变，否则文法就会有误。
词性：有些语言对名词与形容词有特别的用法。在法语中，“ large ” 会视所描述的东西尺寸，而使用 grand、 grande、grands 或 grandes 等不同字。如果你在句子中摆放一个下拉式按钮，可能在翻译后就会造成文法上的错误。
那该怎么做呢？比较好的作法是让这些元件独立存在，譬如放在后面（下图）。
5. 同一件事有不同的文化隐喻
在产品设计中，我们常使用真实世界的隐喻于 icon、按钮与互动方式上。例如，Dropbox icon 即使用了置物箱的隐喻； " 点击并拖拉 " 的互动方式取自手拿物体的隐喻。
但有些东西对不同文化的人会有相异的隐喻，例如在美国，猫头鹰代表智慧，但在芬兰或印度，它代表了愚蠢。此外，某些物体对不同文化的认知也不尽相同。美国人对邮箱的印象如下图，但其他国家的邮箱就不一定长成这样，像是大多数国家并不会把旗帜插于邮箱上。此时，隐喻便不管用了。
在开始设计前，最好针对你所想使用的隐喻做些研究。在Dropbox 里，当我们对于将推出的多语言设计（icon 、插画）有文化认知上的疑虑时，通常会询问“解决国际化问题" 的团队（Internationalization team）是否能有效的认知这些设计背后的资讯。
6. 使用能描述功能的词汇
就行销的观点，他们喜欢针对某些功能发明有趣的名称，来吸引目光。但有趣的名字往往难以翻译成不同语言，甚至在其他语言中不带有意义。几年前，Dropbox 推出了无限版本控管的功能，最初命名为 “Packrat” 。
也许 “Packrat” 对美国人来说挺有趣的，但对其他语言来说却没有任何意思，尤其左侧的老鼠 icon（上图），更让人困惑。发现问题后，我们改为 “Extended version history” ，很直接也更好翻译。
为了避免翻译造成的问题，使用描述性的文字作为功能名称的风险较小，虽然这样可能较无聊，但更易于翻译且使用性也较高。
7. 多准备一份翻译版
一般来说，当你所撰写的文案必须全部被翻译成多语言时，用字风格最好是精准、原始不夸张且自然的。然而总会有些情境?，你想特别突显品牌特性而使用一些有趣、好玩的用字。此时，我们就会同时出两种多语言版本：一个为在地化语系版；另一个则是翻译版。
如果遇到较特殊且不易翻译的字汇，你可增加注解，让翻译者参考。举个例子，最近我们为 Dropbox 的贴图建立文字标签，我们打算给下图的文字标签为 “OMG cat”，同时在下方注解：也可用 “Surprised cat” 来翻译。翻译者就更有弹性且也能兼顾用字的特性。
400-6446-365 / 010-64928252
我想要个更针对我需求的方案
让决策变的简单
好的开始是成功的一半
也许您需要专业的服务，欢迎来电咨询
您的需求，是我们前进最大的动力
关于我们
北京分形科技有限公司成立于2003年，是一家以AI为核心驱动力，提供网络品牌策划、AI互联网服务、WEB3服务、AI人工智能解决方案的综合服务商
我们一直秉承的经营理念：责任、热情、品质、包容
主要业务范围：AI互联网服务（网站建设,网站群,短视频社交平台,APP,小程序）AI人工智能行业解决方案（智慧博物馆,智慧公园,智慧景区,智慧社区,智慧医疗,智慧校园,）IoT智能物联产品（智能步道,AR太极,AI健身,AI导览,AI单车,智慧树）WEB3（分布式计算,数字空间,数字博物馆）