用户界面如何设计，多语言用户界面设计的5个步骤？

当使用多种语言进行设计时，无论产品使用哪种或哪几种语言，都会对设计决策产生影响。文中分享的一些知识点都是来自于现实设计中遇到的问题。

基于现有产品进行设计，会带来一系列独特的挑战和约束(约束不一定是坏事)，这有助于你思考什么才是最重要的。

无论产品处于什么阶段，设计的目的都是为了解决问题。以网飞为例，其伪本地化[1]方案是我们学习多语言UI设计的绝佳案例。

([1]伪本地化并不是软件的真正本地化，而是在源语言软件的基础上，按照一定的规则，将待本地化的文本替换为已本地化的文本来模拟本地化软件的过程。)

影响设计选择的因素很多，没有绝对对错的方法，但是通过比较可以得出更好的设计策略。本文涵盖的要点看似常见，但在问题出现之前往往容易被忽略。

因此，我们应该从错误中吸取教训。

“飞机喷气发动机助理专业”的长度超过了切换语言后的屏幕宽度。

，故事的开始——破碎的UI——一个起点

设计过程中一切都很顺利，直到一种以长词著称的新语言——德语出现在围绕英语系统设计的界面上，破坏了UI界面，让我不得不开始用新的思维方式进行设计。

随着UI界面的破损，我们重新考虑如何处理其中的元素布局，，尽量做到与所有语言一致。

仅仅为了适应新的语言而改变字体大小并不是一个好主意；而且由于时间和资源的限制，不允许有重大的设计改动，因为布局的改动会造成多米诺骨牌效应:你改动一个，就会影响第一个和第二个...由于这个原因，我们开始了一个更大的计划来为未来的迭代改进信息架构。

目标是整个产品的适应性，而不是拘泥于几种语言的解决方案。这个迭代涉及信息架构、内容、语言和规范。

什么重要？最重要的是什么？为什么？

二。信息架构-清晰的优先级层次结构-确定优先级

在UI设计中使用设计系统可以帮助保持一致性，加快工作流程，但是这些系统并不适合所有情况。

在像多语言界面设计这样的特殊情况下，建立信息架构并确定每个元素的优先级是一个规则。理想情况下，需要保证这种层次的构造能够应用于整个产品的全局。

在构建信息架构时，你需要考虑:每个页面的目的是什么？你希望用户做什么？为什么？这并不是说删除或者隐藏一些元素来达到你想要的目标，而是在界面上创造一个视觉层次来引导用户达到他们想要的目标。

从内容的维度思考，主运营，次运营，三级运营可以帮助你缩小设计决策的范围。我们当时缺少的是对三级操作的思考——我们太注重保持一致的外观和风格——太注重审美的平衡，即使这两个元素不属于同一级别。

以表格页面上的“取消”和“提交”按钮为例。如果这两个按钮的风格和操作逻辑过于相似，用户会感到困惑:如果用户的目标是提交表单，为什么要有取消表单的选项？这样的设计无法引导用户。

如果加上“保存”按钮，那么“提交”是初级操作，“保存”是次级操作，“取消”作为第三级操作，可以很好地引导用户完成提交行为。设计的所有细节，都要以用户的目标和主要操作为中心。

语言更改后令人困惑的用户界面让我们意识到这个版本的设计实际上没有考虑优先级或信息架构。现在我们以建立层级结构为目标，重新考虑布局中的设计和位置元素。

我们把我们同级的两个按钮改成了主操作和第三操作(如下图所示)。UI界面没有被新设计破坏，反而比以前更加灵活清晰。在这个过程中，设计组件库不断完善，像这样的设计变更帮助构建了一个集成的系统。

语言和视觉风格一样重要。

不同的层次结构使得UI界面的操作更加清晰

三。排序——用户场景的重要性——去杂乱——语境的重要性

图标可以帮助传达界面的情绪，也可以引导用户。根据用户群体、界面的用途和屏幕以及产品的使用场景，选择纯图标、纯文本或图标+文本组合。

可以使用三种不同的“添加到购物车按钮”，但是“添加到购物车”真的需要图标吗？这个图标实际上是一个购物袋。很多购物车图标被简化成了购物袋，但是“加入购物车”的文字似乎从来没有被缩写或者省略过——可能是因为“加入购物车”这个命令对用户来说还是有点陌生？

在我们的界面设计中，有一个按钮是用图标+文字的方式向用户传达可用的操作。之所以选择两者的组合，是因为图标是和操作动作联系在一起的，它也会出现在产品的其他部分。我们要创建整个系统之间的关系。

在我们的设计案例中，使用多余的图标会导致德语系统中的排版混乱。于是我们进行了更深入的研究，发现添加图标实际上并没有让用户使用起来更方便(没有图标时文字简洁易懂)，文字足以向用户传达操作命令。这种变化进一步证明了重新梳理的重要性。仅在我们的情况下使用图标是不可行的。

Instagram的两种不同布局:一种以文本为按钮，另一种以图标为按钮。

左边的命令非常清晰，但可想而知，不断的显示和重复会让页面变得拥挤，可能会导致用户的视觉焦点从内容转移到命令行。在这种情况下，图标可以起到很好的作用，增加用户的参与度。

许多人对汽车上的胎压图标(TPMS-胎压监测系统)并不熟悉。这些图标通常用于各种品牌和国家，并具有特定的颜色。即使很多用户(通常是司机)并不能100%确定图标的含义，工程师看到图标也能很快知道问题所在。

轮胎气压低图标TPMS

除了显示上述图标，还可以在车载系统中通知驾驶员(比如通过语音用户界面，或者在不影响驾驶的地方显示“轮胎气压低”)。然而，仅仅为了显示创意或个人风格而为如此重要的对象创建自定义图标是危险和不负责任的。它可能会导致更多的问题——想象一个绿色的停车标志——当你看到图标时，你会感到困惑吗(尽管它们似乎确实存在)？

同样，使用场景对设计非常重要。

四。语言-意义的差异

翻译多语种产品可能会很刺激，你会在这个过程中学习和成长，但也会有很多困难，大部分可以归结为翻译的方式。时间和你选择的方式会影响翻译的质量。通常有两种翻译方式，或者两种都有:人工翻译或计算机翻译。

基于计算机和AI的翻译已经有了很大的提升，可以作为一种快速低成本的解决方案。虽然每种语言的AI翻译的准确性会有所不同，但无论采用哪种方法，都要由另一个人(该语言的母语者)来检查翻译，以确保翻译的准确性。

找专业翻译是另一个解决办法。很多时候，机器翻译会出现问题。例如，在芬兰语中，一个单词可能有多个意思(如下图所示):

• Kuusi palaa =
• 数字6又回来了。
• 那棵云杉着火了。
• 云杉回来了。
• 你的月亮回来了。

等一下。

哪一个？

猜猜Kuusi palaa是哪个意思？

译者需要了解行业和背景，才能提供理想的翻译。译者越早参与设计过程越好。

一个词在一种语言中可能是最好的选择，但在其他语言中可能不会产生很好的共鸣。如果你以Excel文件中单元格的形式提供翻译，并通过电子邮件发送，上述情况很容易发生。

如果你不确定一个翻译，可以参考一下竞品是怎么用这个词的。他们通常会花很大力气去寻找理想的词、但不能完全照搬、而是参考UI设计中的常用字段。比如“加入购物车”就意味着大众已经形成了一定的认知用法。

将谷歌“添加到购物车”翻译成德语“in den Warenkorb legen”(此为认证文本)。我对一些德国零售商进行了快速调查，以了解他们的用法:

• Zara德国公司:“Hinzufügen”
• 德国汤米·席尔菲格:“artikelinzufgen”
• 亚马逊:“In den Einkaufswagen”
• 宜家德国:“在仓库里”

我们可以看到宜家的语言选择和谷歌的结果最接近。在你的设计环境中，你会使用哪一个？你所在的行业可能会对此产生影响。

语言可以传达一个产品的个性。比如其他语言中的敬语在英语体系中可能不对应；此外，德语和英语的大写规则是不同的——英语中错误的用法在德语中可能是正确的，在多语言设计中对所有字母使用大写可能更安全。

在某些情况下，需要考虑仅使用图标是否足以传达操作信息。别忘了，除了语言，各国的计量单位也有差异。

语言是所有用户界面的重要组成部分。

不同国家的计量单位也有差异:18石约为114公斤或252磅。

规范-布局的灵活性规范资格-布局的灵活性

目前，网格和布局是一个热门话题。

网上可以找到很多关于如何正确使用网格的信息。虽然除了网格之外，很少有关于相关设计细节的文章，比如行高、固定元素、最大最小宽度等。但是如果在设计的时候把它作为规范的一部分加入，对伪设计会有帮助。

设计中经常出现信息过载，字段太长无法完整显示，但这些细节不必在每个页面上逐一设计调整——通常可以建立一个组件库，保证所有页面上相似组件的一致性。您可以使用Zeplin等工具来检查UI设计，但并不是所有东西都可以在Zeplin checker模式下使用。

我们遇到的问题是没有考虑如何处理产品项目标题中过长的字符串。

这是一个字体大小和间距的问题。我们必须重新考虑屏幕上元素的最大宽度，并决定字符的上限和换行规则。由于空之间没有换行，所以在一定数量的字符后必须进行点省略。如果事先设定好理想的字符长度规格，会减少很多不必要的麻烦。

基于信息架构、用户场景、集成梳理、语言和规范调整有助于解决语言切换带来的界面混乱，但并不意味着所有的工作都做了-产品在不断迭代。

来说说你在多语言设计方面的问题吧~