当他们在结构设计多词汇商品时，一定会碰到转换词汇后 UI 介面排印一片片纷乱的情况，责任编辑透过事例分析，从重要信息构架的重结构设计、使用者情景、词汇涵义、规范化五个层次撷取了多词汇结构设计中的难题软件系统，透过责任编辑的自学，没有多词汇结构设计历经的你能防患于未然，时常受其所苦的你的结构设计Toothukudi。

在展开多词汇结构设计时，不论商品采用一种或三种词汇，单厢对展开结构设计重大决策产生负面影响，责任编辑撷取的几个习题都是源自于或者说结构设计中碰到的难题。

如前所述现有商品展开结构设计会带来一连串独有的考验和束缚（束缚不一定是好事），这会协助你思索究竟甚么才是最重要的。

无论商品处于甚么期，结构设计的目地都是解决难题。以Netflix 为例，它的伪本土化 [1]计划是供他们自学多词汇 UI 结构设计的一个极佳事例。

（ [1] 伪本土化（Pseudo Localization）不是应用软件或者说本土化，而是在源词汇应用软件的基础上，按照一定的准则，将需要本土化的文档采用本土化文本展开替换，演示本土化应用软件的过程。）

有许多因素负面影响着结构设计的选择，因此没当然恰当或严重错误的方法，但透过比较能得到相对较佳的结构设计思路。责任编辑中囊括的关键点貌似很两极化，但在出现难题之前，它们常常很难被忽视。

因此，我们要专精委员会从严重错误中自学。

“直升机双引擎引擎副机专精” 在转换词汇之后宽度远远超过了萤幕宽度

故事的开始 —— 被破坏的 UI 介面 

Broken UI — a starting point

在结构设计过程中一切都展开得很顺利，直到一种以冗长单词而闻名的新词汇 —— 德语，出现在围绕英文系统展开结构设计的介面上，它破坏了 UI 介面，这让我不得不开始以新的思维方式着手展开结构设计。

由于 UI 介面被破坏，他们重新考虑如何处理其中的元素布局 ，尽量使其与所有词汇保持一致。仅仅为了适应新词汇而更改字体大小并不是一个好方法； 因此由于时间和资源的限制，也不允许展开较大的结构设计更改，因为布局的更改会造成多米诺骨牌效应：当你更改一个时，它会负面影响第一个，第二个…… 为此他们启动了一个更大的计划，改进重要信息构架以用于将来的迭代。

哪些是重要的？甚么是最重要的？为甚么？

02

重要信息构架 —— 明确优先级 

Hierarchy — determining priorities

在展开 UI 结构设计时采用结构设计系统能协助保持一致性并加快工作流程 ，但是这些系统并不适用所有情况。在类似多词汇介面结构设计这样的特殊情况下，建立重要信息构架并确定各元素的优先级是一条准则。理想情况下，要能确保这个层级的构建能适用于整个商品的全局。

在构建重要信息构架时你需要考虑：每个页面的目地是甚么？希望使用者做甚么？为甚么？这并不意味着要删除或隐藏某些元素以达到你期望的目标，而是要在介面上创建视觉层次以指引使用者实现其期望的目标。

从内容，主要操作，次要操作以及第三级操作的层次展开思考能协助你缩小结构设计重大决策范围。当时他们缺少的是对于第三级操作的思索 —— 他们过于注重保持一致的外观和格调 —— 太着重于美学上的平衡，哪怕两个元素不属于同一等级。

用表单页上的“取消”和“提交”按钮作为事例。如果这两个按钮的样式和操作逻辑太过相似，使用者会感到困惑：如果使用者的目标是提交表格，为甚么要有取消表单的选项？这样的结构设计不能起到引导使用者的作用。如果增加“保存”按钮，那么“提交”便是主要操作，“保存“是次要操作，而“取消”作为第三层级的操作，就能很好的引导使用者完成提交行为。所有细节的结构设计 ，都要以使用者目标和主要操作为中心。

更改词汇后纷乱的介面使他们意识到，该版本结构设计实际上并没考虑优先级或重要信息构架，现在他们以建立层次结构为目标，重新考虑布局中的结构设计和位置元素。他们将两个同一层次的按钮更改为主要操作和第三操作（如下图所示），UI 介面并未因新结构设计而被破坏，反而比以前更加灵活和清晰，在这个过程中结构设计组件库不断完善，这样的结构设计改变有助于构建一个综合系统。

词汇与视觉风格同样重要。

不同的层次结构让UI介面的操作更清晰

梳理 —— 使用者情景的重要性 

Decluttering — importance of context

在他们的介面结构设计中，有一个按钮采用了图标 + 文档来向使用者传达可展开的操作。选择两者组合的原因是该图标与操作动作相关联，因此它也出现在商品的其他地方，他们想借此创建系统整体间的关联性。

在他们的结构设计事例中，采用多余的图标会导致德语系统下的排印错乱 。于是他们展开了更深入的研究，发现添加图标实际上并没让使用者采用更加方便（当没图标时文档简洁易懂），文档足以向使用者传达操作命令，这个改动进一步证明了重新梳理的重要性。只用图标这种形式在他们的事例中并不可行。

Instagram 的两种不同布局： 一个以文档作为按钮，另一个以图标作为按钮

左侧的命令传达非常清晰，但能想象不断的显示和重复会让页面变得拥挤，这可能导致使用者视觉焦点从内容转移到命令行，在这种情况下，图标能很好地发挥作用，增加使用者的参与度。

许多人不熟悉汽车上的胎压图标（TPMS-胎压监测系统）。这些图标通常在各个品牌和国家 / 地区通用，因此具有特定的颜色。即使很多使用者（通常为司机）不能百分百确定图标的涵义，但工程师在看到图标时也能迅速知道难题所在。

轮胎低气压图标TPMS

除了显示上面的图标外，还能在汽车系统内通知司机（ 例如透过语音介面，或者在不负面影响驾驶的地方显示 “低胎压” ），但若仅出于想要彰显独创性或凸显个人的风格，为如此重要的对象创建自定义图标，是危险且不负责任的。它可能导致更多的难题——能想象一下一个绿色停止标志 —— 你是否在看到图标时感到困惑？（ 尽管它们似乎确实存在 ）。再重申一遍，采用情景对于结构设计非常重要。

04

词汇 —— 涵义上的差异 

Language — differences in meaning

翻译多词汇商品可能会令人兴奋，在这个过程中会得到自学和成长，但也会出现重重困难，其中大部分障碍可归因于翻译的方式。时间和选择的方式会负面影响翻译的质量，通常翻译的方式有两种，或两者兼有：人工翻译或计算机翻译。

如前所述计算机和 AI 的翻译已得到了很大的改进，能作为一种迅速且低成本的软件系统。虽然，每种词汇的 AI 翻译准确性会有所不同，但不论采用哪种方式，翻译都应由另一人（以该词汇为母语的人）

检查，以保证翻译准确。

寻找专精译者是另一种计划。很多时候，机翻会存在难题，例如在芬兰语中，一个单词可能具有多种涵义（如下图所示）：

 Which one?

猜猜 Kuusi palaa 的意思究竟是哪一个？

译者需要了解行业和背景才能提供理想的翻译 ，越早地让译者参与结构设计过程效果越好。一个词在一种词汇中可能是最佳选择，但在其他词汇中可能无法很好地引起共鸣，如果您以 Excel 文件中的单元格形式提供翻译并透过电子邮件发送出去，则上述情况很难发生。

若不确定某个翻译，能参考竞品如何采用这个词语。他们通常会在寻找最理想的文本上下比较大的功夫 ，但不能完全照搬复制 ，而是针对 UI 结构设计中的通用字段展开参考 。如 “添加到购物车”就是大众已形成一定认知的用法。

Google 将 “添加到购物车” 翻译为德语 “ in den Warenkorb legen”（这是已经过认证的文档）。我对一些德国零售商展开了快速研究，以了解他们的用法：

Zara 德国：“Hinzufügen”

Tommy Hilfiger 德国：“ ArtikelHinzufügen”

Amazon 德国：“ In den Einkaufswagen”

Ikea 德国：“ In den Warenkorb”

05

规范化 —— 布局的灵活性

Specifications — flexibility in layouts

作者：Simo Herold，版权归原作者所有

译者：陈熠璇

https://mp.weixin.qq.com/s/G1XKRXfU3J1jUgWbewyv9Q

版权声明：“IXDC”所推送的文章，除非确实无法确认，他们单厢注明作者和来

联系微信：Meia_99

▼

点这里，一键进入IXDC2021国际体验结构设计大会！