新闻动态
NEWS CENTER
NEWS CENTER
2020-12-04
同一信息架构和界面样式做不同语言的适配,即我们常说的多语言设计。
我们作为设计师的角色,在设计这一类产品时,会遇到哪些精(keng)彩(die)故事呢?
刚接触做不同语言适配的国际化产品时,我们可能会以为多语言适配是翻译团队的事,将设计稿上的内容翻译一下就可以了,这真是「too young,too native」。
如果还是保持着国内产品的设计思维和方式,你会发现这行不通。中文看起来完美合理的设计,换成其他语言后发现信息爆炸,造成认知负担。如果没有做好语言适配,甚至会使信息展示不全,给用户带来认知障碍。
因此,我们说多语言设计很“坑”,是因为我们需要在相同的设计下,保证信息可以清晰明确的传递给不同文化背景的用户,要求设计师设计的界面必须有足够的可伸缩性及适配性。
那我们应该如何做到上述的 2 点,以满足用一套界面语言去承载不同语言的需求呢?首先来了解一下这一类国际化产品的设计流程。
对于国内的产品来说,产品设计流程以及涉及的角色大致如下:
其中,产品文案的部分会由产品及设计共同把控。因此设计师在设计前期已经了解信息密度,可以发挥自己所长,将信息清晰简洁的呈现给用户。有时候设计过程中遇到文案过长的问题,我们可以利用中文的博大精深去精简文字或者使用视觉化语言去替代文字性信息。总而言之,单一语言的设计给予了设计师更大的发挥空间。
我们来看下国际化产品的设计流程呢?
看起来国际化产品的设计流程和上面的流程框架基本是一致的,只是多了一些支线流程以及角色。但这些支线流程则是影响多语言设计的关键。
从图可以看出,设计稿完成后,产品需要准备多语言翻译需求给到翻译团队。因此设计师在设计前期是不清楚不同语言的具体文案长度的,特别是一些小语种。如果前期没有考虑周全,实际文案导入后,发现无法适配,需要修改设计,重新开发,这样反复的工作流程,会使整个产品的项目进度受影响。
因此,多语言的国际化产品需要我们在设计前期就考虑到不同语言的适配规则,避免设计及开发资源的浪费,也保证不同语言下的设计质量,保证在不同语言下信息都能够清晰的传递给用户。
道理都懂,如何做好设计呢?我们经历过国际化产品的设计,积累了不少“爬坑”经验,分享给大家~
这里是指我们可以设置一些前端展示规则,让界面上的展示空间像弹簧一样,可以根据内容自适应。常见的扩展空间的方式有横向滚动、横向切换等,竖向同理。此外,我们在做设计的时候也需要注意预留足够的文案展示空间。
(1)弹窗按钮的排布方式及文字缩小规则
表意复杂的弹窗按钮,文案大概率会比较长,我们可以将弹窗按钮上下排布,确保按钮文案有较多的空间展示。
除此之外,我们还需要设计按钮文案的缩小规则,这样我们才可以确保按钮信息展示全。按钮文案的缩小规则需要注意不同端的区别:iOS和安卓可以根据文案长度把字号缩小至展示完整;Web/Mweb 端则需要设计指定文案超长时缩小至指定字号。
(2)标签式Tab比纯文字Tab更具可感知性和灵活性
在国内,对于多个平级内容组的切换控件,大家第一反应便是Tab选项卡。tab选项卡根据选项在容器中的排布方式,可以分为等分式及滚动式2种类型。
但这2种类型在多语言设计中都有一些局限性。如等分式的tab可能会出现某个选项文案过长而溢出的情况,本身不符合我们“弹簧设计”的原则;而滚动式tab,通过间距分割不同选项,当文案过长或选项过多时,右侧边缘无法露出文字导致用户无法感知这里其实可以右滑查看更多选项。
因此,多语言设计中更建议使用标签形式选项卡。首先这种形式对文案的长度没有什么限制,因此更灵活;同时标签形式是通过线框或者面分割每一个选项,选项之间排列更紧密,出现右滑滚动时选项更容易被用户感知。