使用困难数据进行设计

作者：Steven Garrity  2018年9月6日

翻译：三米工作室PNG团队

您被要求为移动或网络应用设计个人资料屏幕。它需要包括头像，名称，职位和位置。你启动Sketch或Figma。也许你拿出你的绘图铅笔或直接去标记和CSS①。

无论您选择何种工具，您最终都可能会得到一些占位符数据。你是那种使用自己名字的人，或者你是否想起你的老朋友Lorem Ipsum先生？也许你有一个假的名字，比如Sophia J. Placeholder。

对我来说，这是Nuno Bettencourt。或者Nuno Duarte Gil Mendes Bettencourt，更正式。Nuno在90年代早期的乐队Extreme中担任吉他手。对于你们中间的年轻人，他是蕾哈娜的旅行音乐家。这些对我们今天的目的来说都不重要，除了他那相当长的名字。

对于占位符名称，您可能觉得不重要。它不会在最终产品中结束- 它只是一个变量。嗯，这很重要。您开始使用的文本将巧妙地影响您对布局和样式的处理方式。它可能会限制您自己考虑的选项范围，或者更危险的是，会掩盖您稍后会遇到的实际限制。

可能会想到一些明显的解决方案：使用长占位符名称; 在您的设计中使用真实数据。虽然这些都是一个良好的开端，但值得深入探讨这些和其他实践如何改善您的设计过程并帮助生产更耐用的产品。

 

这不仅仅是假名

这不仅仅是假名。这也是假地址！假标题！假照片！当我们围绕有限的数据进行设计时，限制就会渗透到我们的设计中。

无法处理长字符串文本是组件在与实际数据接触时可能失败的最基本且最常见的方式。您认为标签会标记为“设置”吗？那么，现在它被称为“应用程序首选项”。

长度只是真实文本和数据可以使弱设计变形的众多方式之一。您可能还会遇到意外的换行符，甚至是太短的文本。请注意以下我们倾向于使用简单的占位符数据作弊的区域。

帐户资料照片

不要指望人们拥有具有纯白色背景的工作室品质的自画像（并且怀疑那些做过的人！）。许多人可能根本不想为他们的帐户上传照片。其他人可能会试图将他们太宽的公司徽标挤进那个小方形或圆形区域。您无法考虑所有可能的数据，但如果您在设计过程的早期就将其中一些不太直观的理想案例纳入其中，那么您的输出将更具弹性。

视频和照片的缩略图

并非所有缩略图都符合您预期的宽高比。有些可能包含与周围页面意外冲突的文本或图像。我看到的一个常见问题是设计精美的主页，顶部突出显示公司徽标。然后，视频到达，视频的默认海报图像也包括公司徽标。现在，您美丽的主页布局看起来像徽标沙拉。

量的狂野变化

包含列表的元素，其中这些列表中的项目数量可能会有很大差异。想象一下带有卡片的布局，其中每张卡片都包含一组标签。一张卡可能有三个标签，而另一张卡可能有二十五个。当一个特定元件的长度与其他元件的长度变化很大时，表格数据在美学和易读性方面也会受到影响。

缺少元素

您可以为站点标题创建一个漂亮的布局，从手机到27英寸显示屏可以很好地扩展。然后你发现它需要一个支持菜单项 - 但没有空间！我经常通过编译两个列表来启动线框。第一个包含此屏幕的访问者需要完成的目标。第二个有需要在这个屏幕上生活的元素。请务必包括所有元素 - 从主要内容到广告，再到页脚中的隐私链接。在没有考虑其包含的广告的情况下，发现设计的网站特别容易。

视口大小

除了占位符数据，我们倾向于以最迷人的视口大小呈现我们的设计。或者更确切地说，我们设计的布局最适合我们为模型选择的尺寸- 特别是当我们使用围绕固定框架尺寸构建的工具进行设计时。在被忽视的响应式设计低谷中，我们发现了两个常见的陷阱：拉伸的移动布局和压扁的桌面设计布局。

灵活的设计可以更容易设计

我们不能在每一个边缘案例上花费无数的时间（以及我们客户的钱）。我们可以更加关注我们创建的画布，我们使用的工具以及我们设计的数据的影响。

有必要将注意力和测试重点放在最常访问网站的方式上。在每个屏幕尺寸上，不一定是完美的，也永远不会是完美的。放开控制并抓住这种灵活性是网络设计的一部分。

灵活设计还可以使您的设计更易于访问。那些有视力障碍的人（我们大多数人在我们生活中的某些时候）可以使用自定义的最小字体大小进行浏览。其他人可能会在缩放级别浏览，即使在大型桌面浏览器上也会触发针对移动设备的响应式布局。

避免令人失望的揭示 

有足够的因素可以为客户和利益相关者带来不切实际的期望，并对最终的实施感到失望。不要通过展示看起来完美无瑕的设计来增加这种潜在的期望错配，只是让客户在严酷的实际数据中审视它们。

虽然你可能需要让人们相信你的设计的优点，但如果你选择展示一个不切实际的设计，你只会让自己失败。相反，最初通过显示具有理想数据的布局来沉迷然后通过显示难以处理的数据的变化来展示设计的持久性和灵活性。这不仅有助于人们了解您的设计，还有助于您了解流程和专业知识的价值。

当我还是个孩子的时候，我清楚地记得从一个门到另一个门的真空推销员跳上吸尘器来展示他的产品的耐用性。我们不需要一个新的真空（整个门到门模型的缺陷），但这画面一直困扰着我。跳上你的设计吧！把它们扔在墙上！用垃圾填充它们并显示它们如何保持良好状态。

例如，在向客户端显示设计时，向他们展示它如何适应各种视口宽度和默认字体大小。向客户展示他们的网站如何响应浏览器大小也可以帮助他们放弃仅针对特定设备和他们碰巧使用的尺寸进行设计的需求。如果你有一个很好的方式来处理个人资料页面上的长名称，请展示它！这可以帮助您的客户了解除静态屏幕截图中可见的工作（以及时间和金钱）之外还有其他方面的工作。

垃圾进去，黄金出来？

旧的计算机科学格言写道：“垃圾进入，垃圾出来。”相反，目标是“垃圾进入，人力资源......还不错。”更好的谚语可能是Postel定律，也称为鲁棒性原则：“保守你的所作所为，也要接受别人的自由。“如果你想象有一个坏人试图选择你的设计，他们将如何打破它？也许将浏览器压缩到一个狭窄的大小，并输入一些异常长的标题（垃圾进入）。您的设计应该对窄宽度做出很好的响应，并优雅地减少特别长的标题（金色）的字体大小。

通过练习，您可以内化部分此过程。你会直觉地知道给定视觉设计会带来哪些陷阱。与可访问性或国际化方面的专家学习快速发现限制设计普遍性的常见缺陷的方式大致相同。虽然我们的直觉可以帮助我们，但它也可以欺骗我们- 确保测试，并了解真实的人如何使用您的产品。

即使你磨练自己预测和避免常见错误的能力，你的思想也会不断地走向阻力最小的道路。像在高海拔地区训练的耐力运动员，用脚踝重量训练，或者职业棒球运动员用加重蝙蝠练习挥杆，我们必须继续人为地增加我们的工作压力。

真实数据不够好

关于使用真实数据进行设计的好处已经写了很多。我的同事Daniel Burka写道：

“尽量不掩饰复杂性。在现实世界中进行设计工作非常困难。如果你设计一个虚假的图表，请输入真实的数据。如果你假装重新设计一个网站，...不要只是神奇地删除一个广告单元。如果您创建一个性感的虚假登录屏幕，请不要忘记包括恢复丢失的密码或用户名的方法。...写真实副本。Lorem ipsum适合业余爱好者。”

Daniel是对的 - 特别是在界面元素方面，文本的含义与函数不可分割。当涉及到可能显示广泛可变内容的设计元素（例如，配置文件照片或名称）时，您可以比使用真实数据做得更好。超越现实数据。获取困难的数据。

如果您能够提取实际数据，请在最坏的情况下进行挖掘。如果你可以处理最坏的情况，常见的情况将是轻而易举的。

重新设计现有屏幕时，请利用可用的当前和历史数据。挖掘数据的极端，找到最长和最短的标题。如果您使用照片或视频的缩略图进行设计，请抓取一组随机的真实缩略图，然后扔掉那些您知道易于设计的缩略图。

如果您没有现有数据，甚至在没有现有数据时，请创建困难的示例。写出标题，推动超出屏幕可容纳的范围。创建具有自己的内置边框或阴影的缩略图图像，并查看它们与您所拥有的内容的冲突。

有时可以（并且应该）修复困难的数据

虽然您的设计应尽可能健壮，但有时可能会出现不必如此的边缘情况。在设计带有客户端的列表页面时，我们查看了他们的完整数据存档，以了解项目标题的长度是如何变化的。最短的标题是8个字符，最长的是超过320个，但只有少数超过80个。

我们与客户合作创建了一个迎合最多80个字符标题的设计。然后对那些少数异常值进行了一些编辑手术以使它们处于极限之下。结果他们最终成为了更好的头衔。

在处理由您的公司，团队或客户管理的内容时，还需要将这些实践编入风格指南。您无需花费大量精力设计来自大厅的困难数据。

国际化

我有幸与Mozilla的团队合作，在那里页面被翻译成多达八十种语言。通过这种广泛的本地化工作，我们学会了构建支持非拉丁字符集和具有从右到左文本方向的语言的页面布局和设计。

支持从左到右和从右到左的语言不仅需要允许文本字符串反转。布局和设计的整个视觉结构需要能够水平翻转。而不是令人沮丧的限制，你会发现这个和其他类似的限制将帮助你开发设计超级大国。

由于预期德语等语言中的文本字符串较长，一些设计人员开发了一个过程，其中拉丁文本的生成长度是源文本的两倍。W3C有一篇关于跨语言共同长度比的方便文章。

资本化在某些语言环境中也可能存在问题- 尤其是在强制使用CSS时。如果您的设计确实依赖于text-transform: uppercase或者text-transform: lowercase，要么重新审视设计更灵活，要么在源文本中处理大写（而不是通过CSS），以便本地化团队可以保持对大写的控制。

MDN是更多关于本地化设计的重要资源。在设计过程中涉及占位符数据时要注意自己的文化盲目性。设计作弊经常影响那些最不喜欢自己的人。

尽可能设计困难的数据

关于我们的工具如何帮助我们设计真实数据已经写了很多（并且应该被阅读）。借助现代设计和原型设计工具，HTML / CSS / JS原型，甚至静态模型，如果我们不将设计推向突破点，结果将是自欺欺人。

在快速制造和过度建设之间总是存在平衡。与设计和网络上的所有内容一样，这取决于数据，受众，项目和目标。

设计不出更优秀的作品的常见借口往往是时间表和预算。特别是在大型项目中，学习如何将更多难度数据纳入早期设计过程可以节省很多时间。

就像长跑运动员通过在高海拔的空气中训练而提高，通过从一开始就建立困难的数据，你将成为一个更优秀的设计师。您将更加了解设计可能处在什么位置并防患于未然，从而更好地传达您的流程和决策。

注：

①：CSS：层叠样式表(英文全称：CascadingStyle Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

                                                                                   ———三米工作室PNG团队翻译