专栏名称: APPSO
让智能手机更好用的秘密。
目录
相关文章推荐
51好读  ›  专栏  ›  APPSO

一款能征服你的国外 App,起码做到这 7 点 | 灵感早读

APPSO  · 公众号  · app  · 2017-01-23 08:08

正文


好产品,或许你已见得不少。但好产品背后的探索和思考,恐怕没有太多人知道。


在灵感早读,你会知道「产品人」如何创作,提供更好的用户体验,并影响成千上万人的生活。


我们精选优质内容,为你提供特别的产品视角。 如果你有好文推荐,或者希望投稿,欢迎联系 [email protected]


微信号 appsolution 后台回复「 早读 」可获取文章合辑。

这是灵感早读的第 20 篇文章

A 君导读 :你用外国开发者的产品时是不是会觉得有些地方怪怪的?自己做的产品如何给其它国家的用户带来更好的体验?

AppSo(微信号 appsolution)今天分享的这篇文章,曾在 Google、YouTube 工作,目前在 Dropbox 负责字体设计的 John Saito 告诉你一些小技巧。

译者 孙启玉

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

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

呃…有点怪。顶部有个视频,但是你不知道这是什么语言的标题。措辞很奇怪,而且按钮文字甚至都不与按钮相匹配。人们是怎么认定这是一款优秀 app 的?
哦,原来这款 app 并不是用你的语言设计的。 它是以精灵语(Elvish)进行设计,然后再翻译成你的语言。因为大多数的人们都在使用精灵语版本,所以他们并不知道以你的语言产品会看起来怎么样。
不管你信不信,这就是非英语用户一次又一次不得不面对的事情。 因为许多 app 设计时只是考虑英语,如果你不注意的话,一些细节会在翻译中丢失。
为了避免碰到上面遇到的情况,这里有一些在国际化设计时需要记住的小技巧:
1. 为较长的翻译留出空间
最常见的国际化问题是没有为翻译留出足够的空间。
以标签「New!」为例,在英语中,只是带感叹号的 4 个字符,但是在法语中,则是 9 个字符:「Nouveau !」。这是英语尺寸的两倍多,并且在法语中,在感叹号之前应该有一个空格。
如果你的设计包含单词,确保你留出了足够的空间来适应较长的译文。 如果不这样的话,你可能会以重叠或截断的文本而告终。

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

我用于估计译文长度的一种方法是使用 Google 电子表格(Google Spreadsheets)。

通过使用 Google 翻译功能( http://t.cn/RMFhjHO ),我可以一次机器翻译多种语言。几秒钟内,我就可以粗略知道译文在每种语言中会有多长。

我用 Google 电子表格制作了一个工具来估计译文长度。
IBM 的全球化网站( http://t.cn/RMFhrm5 )中有一个有用的图表,上面展示了从英语进行翻译时需要多少额外的空间。

2. 避免以窄栏的形式放置文字
栏是一种用以组织内容的优秀方式。它们创造了平衡、结构和韵律。它们和你精心设计的网格系统配合良好。
但是当你的文本长度变得不可预测时会发生什么呢?这就是在翻译时会发生的事情。你 1 行的标题会变成 2 到 3 行,而且你美丽的平衡布局会被突然打破。

折断的文字可以毁掉设计师的一天。
当你以窄栏的形式放置文本时,很有可能一些译文会折断成多行。 一个安全的选择是用宽行来替代窄栏,这会给你的文本提供更多的延展空间却不会破坏排版。
3. 不要在图片中嵌入文字
如果你的设计包含有带文字的图片,这在翻译成不同语言时可能会成为一个噩梦。
翻译者可以在 Photoshop 或 Sketch 文件中翻译每个文字图层,但这会变得凌乱,因为你或许要调整每种语言的布局来适应较长的译文。

下面是一些更好的选项:

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



  • 用 CSS 生成覆盖文本 :下图绿色圆圈中的文字实际上并不是图片的一部分,文字是用 CSS 加上去的。

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






请到「今天看啥」查看全文