恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
字体多语言差异给UI带来的适配影响
0.0°
2019-02-13 原创文章 经验/观点 举报 8219 10 10 3

前言

目前越来越多App开始走向国际,开启国际化,多语言适配问题首当其冲,

英文与中文排版有什么不同?在做国际化的过程中要注意哪些文字排版要点呢?



三种不同的字体类型
现代世界字体主要分为三种

类英文(English-like)——拉丁文、英文
高文字(Tall)——泰文、阿拉伯文
密集文字(Dense)——中文、日文、韩文
Image title


差异之处
不同语言字体上有长度、高度、对齐方式、排版方式等差异,这些差异会降低文本的可读性、美观度,给用户带来不好的体验。

长度(length)
同一文本翻译成其他语言后,文本长度会有变化,这与字体类型无关,
即使是同一类字体,长度差异也会很明显,以类英文(English-like)为例:
Hello(英语)
Olá(葡萄牙语)
Hallo(德语)
Ciao(意大利语)
Bonjour(法语)
Image title
对于长度变化,设计中要注意保留足够的横向空间。



高度(Height)
同一文本翻译成其他语言后,文本高度也会变化,这与字体类型有关,同类型字体高度差异不大,不同类型则会有较大差异,设计中要注意保留可延展的垂直空间。
Image title


长度差异通过换行的方式,可以自动解决,但是高度差异带来的问题则需要进一步调整,比如字体大小、行间距等。
有意思的是,高度差异会随着字号的增加更加显著:相同字号的中英文,中文会比英文高很多。
Image title


所以设置行间距时,需要额外注意调整大字号的行间距,
但在UI中很少会出现字号大于20pt的大段文字,所以我们只需针对App内出现的大段文字进行行间距特殊调整即可。
标准行间距是1.3倍,建议设成1.45倍,1.618倍。


对齐方式
有些文字习惯从右到左排列,比如阿拉伯语。
以Facebook举例,当语言切换成阿拉伯语之后,整个页面都会被镜像,左右颠倒。
对于这种语言的适配其实不用担心,因为系统会自动镜像排版,我们要做的是调整字体的大小和行间距。
Image titleImage title


排版
密集文字(Dense)——中文、日文、韩文等,每个字符趋于正方形,通常是等宽的,每个字符占用的空间都差不多,可以进行垂直排版
相对的,在类英文字体中,多个字符才能构成一个单词,趋于长方形,长度不等,空间不等,很难进行整齐的排版,且由于单个字符非正方形形状,也很少进行垂直排版

Image titleImage titlebanner采集自网易云音乐


总结
同类型文字,结构上相差不大,具有相近的排版方式,更多的是在长度上发生显著变化;不同类型的文字翻译之后,不只是在长度上有变化,在高度上也有变化,需要进一步调整行间距和字体大小。


参考文献:
《西文字体》
《Material System》-- Language support

https://material.io/design/typography/language-support.html#

翻译:Google 翻译



更新:2019-02-13

收藏

10人已收藏

chauncy

敬畏之心

  • 14

    作品

  • 27

    粉丝

  • 28

    关注

  • 网页练习
  • 2019总结回顾
  • 2019UI插画小结
  • 【设计细节】夜间模式&深色设计的区别和设计要点

    猜你喜欢

      2019-02-13 原创文章 经验/观点 举报 8219 10 10 3

      字体多语言差异给UI带来的适配影响

      0.0°

      你确定要举报字体多语言差异给UI带来的适配影响

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年02月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      10
      10
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录