针对产品UI国际化提出的7条建议

近年来,越来越多的国内开发者将目光从国内转移到国外,纷纷投入到移动大航海时代的浪潮之中。在产品国际化的过程中,产品UI是否也跟上了国际化的步伐?Dropbox 设计师 John Saito 针对产品设计国际化中出现的问题进行了分析并提出了 7 条建议,值得一看。


近年来,越来越多的国内开发者将目光从国内转移到国外,纷纷投入到移动大航海时代的浪潮之中。在产品国际化的过程中,产品UI是否也跟上了国际化的步伐?Dropbox 设计师 John Saito 针对产品设计国际化中出现的问题进行了分析并提出了 7 条建议,值得一看。

针对产品UI国际化提出的7条建议

假设你正首次使用一款新 app,它在 Twitter 上好评如潮。人们都说这款 app 棒极了、改变了他们的生活并且令人愉悦。

你打开它并看到了如下一幕:

针对产品UI国际化提出的7条建议

呃…有点怪。顶部有个视频,但是你不知道这是什么语言的标题。措辞很奇怪,而且按钮文字甚至都不与按钮相匹配。人们是怎么认定这是一款优秀 app 的?

哦,原来这款 app 并不是用你的语言设计的。它是以精灵语(Elvish)进行设计,然后再翻译成你的语言。因为大多数的人们都在使用精灵语版本,所以他们并不知道以你的语言产品会看起来怎么样。

不管你信不信,这就是非英语用户一次又一次不得不面对的事情。因为许多 app 设计时只是考虑英语,如果你不注意的话,一些细节会在翻译中丢失。

为了避免碰到上面遇到的情况,这里有一些在国际化设计时需要记住的小技巧:

1. 为较长的翻译留出空间

最常见的国际化问题是没有为翻译留出足够的空间。

以标签「New!」为例,在英语中,只是带感叹号的 4 个字符,但是在法语中,则是 9 个字符:「Nouveau !」。这是英语尺寸的两倍多,并且在法语中,在感叹号之前应该有一个空格。

如果你的设计包含单词,确保你留出了足够的空间来适应较长的译文。如果不这样的话,你可能会以重叠或截断的文本而告终。

针对产品UI国际化提出的7条建议

哦噢,这里感觉有点拥挤。

我用于估计译文长度的一种方法是使用谷歌电子表格(Google Spreadsheets)。通过使用谷歌翻译
功能,我可以一次机器翻译多种语言。几秒钟内,我就可以粗略知道译文在每种语言中会有多长。

针对产品UI国际化提出的7条建议

我用谷歌电子表格制作了一个工具来估计译文长度。

IBM的全球化网站中有一个有用的图表,上面展示了从英语进行翻译时需要多少额外的空间。

针对产品UI国际化提出的7条建议

2. 避免以窄栏的形式放置文字

栏是一种用以组织内容的优秀方式。它们创造了平衡、结构和韵律。它们和你精心设计的网格系统配合良好。

但是当你的文本长度变得不可预测时会发生什么呢?这就是在翻译时会发生的事情。你 1 行的标题会变成 2 到 3 行,而且你美丽的平衡布局会被突然打破。

针对产品UI国际化提出的7条建议

折断的文字可以毁掉设计师一天的好心情。

当你以窄栏的形式放置文本时,很有可能一些译文会折断成多行。一个安全的选择是用宽行来替代窄栏,这会给你的文本提供更多的延展空间却不会破坏排版。

3. 不要在图片中嵌入文字

如果你的设计包含有带文字的图片,这在翻译成不同语言时可能会成为一个噩梦。

翻译者可以在 Photoshop 或 Sketch 文件中翻译每个文字图层,但这会变得凌乱,因为你或许要调整每种语言的布局来适应较长的译文。

下面是一些更好的选项:

(1)使用横线替代文字

有时你无需使用真正的词语来传达信息,令人惊讶的是几条模糊的横线就能做到这点。

针对产品UI国际化提出的7条建议

(2)用 CSS 生成覆盖文本

下图绿色圆圈中的文字实际上并不是图片的一部分,文字是用 CSS 加上去的。

针对产品UI国际化提出的7条建议

4. 不要用 UI 元素来造句

设计师通常会移动不同的 UI 元素来查看哪种布局是最适合的。「让我们把这个文本框放到这里靠右。让我们把这个下拉列表移到左边。」

但是当你处理语句的时候你要额外小心。如果你试图把文字和按钮、文本框或下拉列表相结合来组成句子的时候,你经常会遇到很多困难。

针对产品UI国际化提出的7条建议

这会让 UI 国际化变得混乱。

之所以这会成为 UI 国际化的痛处有几个原因:

  • 不同的次序:不同的语言有不同的词语排列方法。如果你将「买 3 件衬衫」翻译成日语时,单词「买」将会移到句子末尾。如果你的设计依赖于特定顺序的词句,那么就不适用于每一种语言。
  • 复数形式:在英语中每个名词只有一种单数形式和一种复数形式:「1 picture」和「__ pictures」。但是在俄语中,则有 3 种可能的形式。所以如果一个用户需要在句子中输入一个数字的时候,整个句子可能会根据输入的数字出现语法错误。
  • 词性:某些语言针对名词或形容词会有特定词性的形式。在法语中,根据其所描述的事物单词「large」可以被翻译成「grand」、「grande」、「grands」或者「grandes」。如果你把一个下拉列表放到句子中,这个句子可能回因其周围的词句出现语法错误。

所以你会如何替代?一个较好的选择是让 UI 元素置于句外:

针对产品UI国际化提出的7条建议

最好是把UI元素放到句子外边。

5. 注意隐喻

产品设计总与隐喻相关。每个图标,每个按钮以及每个交互都是物理世界中某种事物的隐喻。Dropbox 的图标是存储箱的隐喻。点击并拖动是你用手拿东西的隐喻。

但是某些隐喻在不同的文化中的意思会有所不同。在美国,猫头鹰代表智慧。在芬兰与印度,猫头鹰则代表愚蠢。

同一种物品在世界各地看起来也各不相同。对于大多数美国人来说,下面的物品就是一个邮箱,但是在全球,邮箱看起来可不是这个样子。大部分国家不会在他们的邮箱上树立旗子,所以这个隐喻并不会让所有人都理解。

针对产品UI国际化提出的7条建议

在世界的大部分地方,邮箱都不长成这个样子。

如果可能的话,在将隐喻加入你的设计之前进行一些研究是一个不错的想法。在 Dropbox,如果我们担心全球用户是如何感知图标或者插图的时候,我们通常会让我们的国际化团队来检查它们。

6. 使用描述性的特性名称

从市场营销的角度来看,起一个引发人们谈论的有趣特性名称是件诱人的事情。但是有趣的名称难于翻译,并且在不同的语言中它们可能毫无意义。

多年以前,Dropbox 引入了一个让用户查看文件无限版本历史的功能特性。我们一开始称呼这个特性为「口袋老鼠」(Packrat)。

针对产品UI国际化提出的7条建议

带有一个小老鼠图标的「口袋老鼠」选项。

虽然「口袋老鼠」对于美国用户来可能是一个巧妙的名字,但是在其他语言中则毫无意义。旁边的老鼠图标让事情更加难以理解。谢天谢地的是我们把这个名字改为「拓展版本历史」,这个翻译起来容易多了。

为了避免翻译错误,使用描述性的词汇来表达特性名称更加安全。描述性的词看起来可能会有点无聊,但是它们更加有助于正确翻译和提高可用性。

7. 为翻译提供替代方案

一般来说,当你在撰写需要翻译的词语的时候,最好以一种准确、平实并且中性的风格进行表述。然而,你可能会有希望更加有趣的品牌时刻。

在这样的情况下,我们有时会写两个版本:一个是英语版本,一个是用于翻译的替代版本。

你可以为任何难于的翻译的词语增加评论。我们正在 Dropbox 为使用的贴纸书写标签。我们决定用「天了噜猫」(OMG cat)作为下面贴纸的标签。

针对产品UI国际化提出的7条建议

哦,我的天哪!这是天了噜猫。

当翻译者在进行翻译的时候,他们会看到一条评论说这可以被翻译成「惊讶猫」。这样,翻译者可以自由地使用一个有趣的翻译,但是在需要的时候,他们也可以回退到一个更加平实的翻译。

以上就是设计师 John Saito 针对产品UI国际化提出的7条建议:

  1. 为较长的译文留出空间
  2. 避免以窄栏的形式放置文字
  3. 不要在图片中嵌入文字
  4. 不要用 UI 元素来造句
  5. 注意隐喻
  6. 使用描述性的特性名称
  7. 为翻译提供替代方案

设计师在进行国际化的产品 UI 设计时需要格外注意翻译适配设计隐喻文案撰写三个方面,针对拿不准的设计提前进行调研并不断拓宽自己的视野,只有这样才能为不同语言、国家、文化的用户提供一致的产品体验。如果你有什么好的想法欢迎留言回复,让我们为服务好全球用户一起努力。

原文地址

 

译者:孙启玉

译文地址:https://zhuanlan.zhihu.com/p/24938276

本文由 @孙启玉 授权发布于人人都是产品经理,未经作者许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24530/

(0)
CatherineCatherine
上一篇 2017-05-08 23:07
下一篇 2017-05-09 01:05

相关推荐

  • QQ国际版视觉探索:准备了两套视觉设计方案

    QQ国际版主要是针对国外用户打造的一款轻量社交产品。由于当前产品迭代周期相对较长,我们对当前视觉提出一个疑问:现有产品的视觉形态,是否符合国际版的产品调性?基于这个问题,我们开启这次探索之旅。

    2017-05-08
  • 科技每日早报20180507

    60秒读懂世界!1、深圳地铁“扫码过闸”将于5月8日正式上线:终于不用买实体票了; 2、特朗普重申支持拥枪 美国控枪人士:为换取选票; 3、中国要求美航企不得将港澳台标为"国家" 白宫横加指责:反对中国威胁与胁迫美…

    交互设计 2018-05-07
  • 贼干的货 | 交互设计中的格式塔原理

    小编说格式塔心理学认为知觉不能被分解为更小的组成部分,知觉的基本单位就是知觉本身,格式塔心理学的信条就是:整体不同于部分之和。格式塔心理学强调结构的整体作用和产生知觉的组成成分之间的联系。当我由测试转行到交互设计师时,我确认自己擅长辨别产品的优劣,和识别产品的待改善点,尽管很多时候这些待改善点还缺少数据和用户的论证。之前我还是典型的用户思维,对产品实际效果的判断非常依赖数据和用户反馈,直到我了解了格式塔原理,它改变了我对设计的思考方式,...

    2018-03-03
  • 【交互设计】入门交互设计需要注意什么

    作者:Mufly 最近一直在想,交互设计的核心是什么?因为身边不少设计师对交互设计有也兴趣,常常被问到怎么学呢?交互设计要注意什么?对于入行不久的我,如何回答这类问题成了难点,因为我怕回答得不好,误人子弟…

    交互设计 2015-07-20
  • 新手福利!超全面的UI设计切图规范指南

    移动UI设计切图是UI设计师最重要的设计输出物,切图资源输出是否规范直接影响到工程师对设计效果的还原度。设计师的切图输出物是是体现一个设计师专业水准的重要标准,同时也是设计师表达自己对设计态度的最有力的语言。合适、精准的切图可以最大限度的还原设计图,起到事半功倍的效果。如何输出具有全局把控和细节专注的高段位切图,应该是所有设计师一直需要追求的能力。

    2017-05-11
  • 一套交互设计工具推荐

    刚开始接触交互设计往往会面临自己的想法找不到合适的方法输出。所以完成基本工作同时也在积极寻找、学习适合自己又和工作环境相匹配的工具。与团队成员配合的时候没有人会在意你是用什么工具,成员们只想看到设计师产出的输出物。这个时候针对不同任务类型和团队大小找到合适的工具可以让设计师迅速输出团队想要的结果输出物,事半功倍。

    2017-05-28
  • 2017年设计师该如何转型?来看阿里UED掌门人的演讲!

    温馨提示,扫文章底部二维码可看相关视频。UXD(User experience designer)概念为何在当下越来越热?这个新Title对设计师意味着什么?UXD对设计师提出了怎样的新要求,设计师们又如何去转型UXD呢?在设计师转型UXD的背景下,还需要讲求专业精深吗?纯视觉设计师VD(Visual designer)又有怎样的发展路径?三位阿里巴巴UED掌门人分别从自身视角对设计师转型UXD进行了解析。汪方进:阿里巴巴BBC UED...

    2018-03-20
  • 从中国形式走向中国叙事:RSAA / 庄子玉工作室的2017

    *本文转载自RSAA鼓楼7号院刚刚过去的2017,对我们这个钟鼓楼旁的四合院是很特别的一年。虽然在RSAA北京公司成立后的八年间,我们一直埋头苦干,作品也算颇丰,但好像对大多数人而言,我们一直是一个相对默默无闻的团队,甚至很少有人知道RSAA是个正儿八经的德国独资公司;而在2017,RSAA和庄子玉工作室却因为几个极具当代中国调性的项目而广为人知;但只有我们自己知道,这也许不是偶然 - 以“在当下中国的社会和空间语境中寻找新的叙事性与类...

    2018-02-24
  • Axure教程:实现类网易云音乐APP播放效果

    整体效果截图首页:视频播放:我的音乐:朋友:音乐识别:音乐播放:实现本原型实际效果可以在预览地址查看,本文将重点讲述播放器界面的实现过程。1.原型共有11个独立页面:依次为:首页,排行榜,FM,视频,我的,朋友,账号,音乐识别,音乐播放,每日推荐,歌单页面。2.音乐识别界面效果实现分析:1.音乐识别效果由首页左上角麦克风图标点击后触发,进入识别页面时开始识别同时效果自动开始。由于音乐识别和首页分别在两个不同页面,所以可以考虑通过全局变量...

    2018-03-24
  • 交互体验大升级 云视听极光3.0最新版本体验评测

    作为腾讯视频官方的电视端应用版本——云视听极光迎来了第三个大版本的更新:云视听极光3.0。在我之前的国内4大电视端视频应用软件的对比评测中我对云视听极光的老版本在交互体验上的感受只能用一般般来形容。这次的大更新官方声称对交互界面体验上针对用户需求和建议做了较大的改进,我也立马升级了软件进行了一番体验。让我们来看看云视听极光3.0在体验上到底如何吧。UI交互体验:界面设计进入软件就可以看到3.0版本的大变化,相比老版本,3.0的频道分类栏...

    2018-01-30