一个列表

菜单
用难理解的数据说明设计

插图的Dougal麦克弗森

有困难数据的设计

你被要求为手机或网络应用程序设计一个个人资料界面。它需要包括一个头像,一个名字,一个头衔,和一个位置。你点燃素描或无花果。也许你会拿出你的绘图笔或者你的头直接指向标记和CSS。

你最常用的假名是什么?

文章如下

不管你选择什么工具,你可能会得到一些占位符数据。你是那种用自己名字的人吗?或者你会想起你的老朋友,先生。Lorem Ipsum是吗?也许你有个假名字,就像索菲亚J.占位符

内容占位符卡,带空格的全名,职称,和位置

对我来说,这是努诺·贝当古。或努诺·杜阿尔特·吉尔·门德斯·贝当古,请更正式。努诺在90年代初的乐队Extreme中演奏吉他。你们中间的少年人哪,他是蕾哈娜的巡回音乐家。这些都不关我们今天的目的,只是他的名字相当长。

您为占位符名称输入什么似乎并不重要。它不会在最终产物中结束——它只是一个变量。好吧,它确实很重要。开始时的文本将微妙地影响布局和样式的方法。它可能会限制你允许自己考虑的选择范围,或更危险,模糊您稍后将遇到的实际限制。

同样的内容占位符卡,每个值都有很长的数据。这对设计来说太长了。

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

这不仅仅是假名字

这不仅仅是假名字的问题。这也是假地址!假新闻!假照片!当我们围绕有限的数据进行设计时,我们的设计存在局限性。

无法处理长字符串是组件在接触真实数据时最基本也是最常见的失败方式。你以为标签上写着“设置”?好吧,现在它被称为“应用程序首选项”。哦,明天产品就上市了。

长度只是实际文本和数据对弱设计造成压力的许多方式之一。您还可能遇到意料之外的换行,甚至文本太短。注意以下我们倾向于用简单的占位符数据进行欺骗的区域。

帐户资料照片

不要期望人们有一个画室质量的自画像与坚实的白色背景(和怀疑那些做!)许多人可能根本对上传自己账户上的照片不感兴趣。其他人可能会试图把他们太宽的公司标识挤进那个小正方形或圆形区域。你不能解释所有可能的数据,但是如果你在设计过程的早期加入一些不那么理想的情况,你的产出将更具弹性。

几个回合的头像图形,带有不适合圆形的图像

视频和照片的缩略图

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

几个视频缩略图的图形不适合缩略图的大小

量的野生变异

注意包含列表的元素,其中列表中的项的数量可能会发生显著变化。想象一个卡片布局,其中每张卡片包含一组标签。一张卡片可能有三个标签,而另一张可能有25个。当一个特定的细胞在长度上与其他细胞有很大差异时,表格数据在美观和易读性方面也会受到影响。

显示不同长度内容的几个线框

缺失的元素

你可以为你的网站标题创建一个漂亮的布局,漂亮地从你的手机缩放到你的27“显示。然后你发现它需要一个支持菜单项-但没有空间!我经常从编译两个列表开始一个线框。第一个包含访问者需要完成的目标。第二个元素需要存在于这个屏幕上。确保包含从主要内容到广告的所有元素,下到页脚的隐私链接。在不考虑广告的情况下,很容易发现一个设计好的网站。

显示导航栏和删除元素位置的线框

视区大小

占位符以外的数据,我们倾向于以最讨人喜欢的视角来展示我们的设计。或者更确切地说,我们设计布局的目的是为了最好地查看我们为模型选择的大小—特别是当我们使用围绕固定帧大小构建的工具进行设计时。在响应式设计被忽视的低谷中,我们发现了两个常见的缺陷:扩展的移动布局和压缩的桌面设计布局。

线框显示移动设计延伸到桌面大小

拉伸移动布局

显示桌面设计的线框压缩成移动大小

压缩的桌面布局

灵活的设计可以更方便的设计

我们不能把我们的时间(和客户的钱)花在所有能想到的边缘案例上。我们可以更加注意我们所创造的画布的影响,我们使用的工具,我们设计的数据。

有必要将注意力和测试集中在您的站点最常用的访问方式上。事情不一定是这样的,永远不会,完美的每一个屏幕大小。放开控制接受这种流动性是为网络设计的一部分。

具有灵活性的设计还可以使您的设计更容易访问。那些有视力障碍的人(我们大多数人在生活中的某些时候)可能会使用定制的最小字体来浏览网页。其他人可能会在缩放级别上浏览,甚至在大型桌面浏览器上也会触发用于移动设备的响应式布局。

避免令人失望的披露

已经有足够多的因素导致客户和利益相关者对最终的实现抱有不切实际的期望并感到失望。不要通过展示看起来完美无瑕的设计来增加这种潜在的预期不匹配,只是让客户在真实数据的严酷环境中审查它们。

虽然你可能需要让人们相信你的设计的优点,如果你选择展示一个不切实际的设计,你只会让自己失败。相反,通过使用理想的数据显示布局,开始沉溺于其中然后通过显示复杂数据的变化来显示设计的持久性和灵活性。这不仅可以帮助人们理解您的设计,还可以帮助他们理解流程和专业知识的价值。

当我还是个孩子的时候,我清楚地记得一个挨家挨户推销真空吸尘器的推销员为了展示他的产品的耐用性而跳到吸尘器上。我们不需要一个新的真空(直接的缺陷在整个门到门的模式),但这张照片让我印象深刻。开始你的设计吧!把它们往墙上扔!用垃圾填满它们,看看它们能撑多久。

例如,当向客户展示设计时,向他们展示它如何适应不同的视口宽度和默认字体大小。向客户展示他们的网站如何响应浏览器的大小,也可以帮助他们放弃仅仅为他们碰巧使用的特定设备和大小而对设计进行润色的需求。如果你有一种强大的方法来处理个人资料页面上的长名字,炫耀它!这可以帮助您的客户了解到工作的另一个方面(以及时间,和金钱)超越在静态截图中可见的。

垃圾,黄金?

古老的计算机科学格言是:“垃圾,garbage out." Instead,目标是“垃圾进来,嗯……不错。”一句更好的格言可能是波斯特尔定律,请也被称为稳健性原理“在你做的事情上要保守,be liberal in what you accept from others." If you imagine your evil twin trying to pick apart your design,他们怎么打破它?也许把浏览器压缩到一个很小的尺寸,然后输入一些异常长的标题(垃圾输入)。你的设计应该很好地响应窄宽度,并优雅地减少特别长的标题字体大小(黄金出)。

通过练习,您可以将其中一些过程内在化。你会本能地知道给定的视觉设计会带来什么样的缺陷。与可访问性或国际化方面的专家学习快速发现限制设计通用性的常见缺陷的方式非常相似。虽然我们的直觉可以帮助我们,它也能欺骗我们一定要测试,看看真正的人是如何使用你的产品的。

即使你已经磨练了预测和避免常见错误的能力,你的思想会不断地朝着阻力最小的方向前进。就像耐力运动员在高海拔训练一样,用脚踝负重运动,或者职业棒球运动员用加重的球棒练习挥杆,我们必须继续人为地增加我们工作的压力。

真实数据不够好

关于使用真实数据进行设计的好处已经写了很多。我的同事丹尼尔·伯克写道以下内容:

尽量不要掩盖复杂性。在现实世界中,设计工作是相当困难的。如果你设计一个假图,输入真实数据。如果你假装重新设计一个网站,不要只是神奇地删除一个广告单元。如果你创建了一个性感的假登录屏幕,不要忘记包含一种恢复丢失的密码或用户名的方法。写真正的副本。Lorem ipsum适合业余爱好者。

丹尼尔是对的,尤其是当涉及到界面元素时,文本的意义是无法从函数中分离出来的。当涉及到设计可能显示广泛可变内容的元素(配置文件照片或名称,例如),您可以比使用真实数据做得更好。超越现实数据。得到困难的数据。

如果你能得到真实的数据,找出最坏的情况。如果你能应付最坏的情况,常见的情况将是轻而易举的事。

重新设计现有屏幕时,利用现有和历史数据。深入研究数据的极端,找出最长和最短的题目。如果你是用照片或视频的缩略图设计的,随机抽取一组真实的缩略图,然后扔掉那些你知道很容易设计的东西。

如果没有现有数据,即使你这样做,创造困难的例子。写标题,使其向上推到屏幕所能容纳的范围之外。创建具有自己内置边框或阴影的缩略图图像,看看它们是如何与你现有的东西相冲突的。

有时困难的数据可以(也应该)被修复

虽然你的设计应该尽可能坚固,有时你可能会遇到一些不必要的情况。在与客户端设计列表页时,我们查看了他们完整的数据档案,以了解项目标题的长度是如何变化的。最短的标题是8个字符,最长的超过320个,但只有少数人超过了80岁。

我们和客户一起设计了一个最多能容纳80个字符的标题。然后对这几个异常值进行了一些编辑性手术,以使其低于限制值。他们最终成为了更好的冠军。

处理公司管理的内容时,团队,或客户端,将实践编入样式指南中也是值得的。你不需要把所有的精力都花在设计来自楼下大厅的复杂数据上。

国际化

我有幸和Mozilla的团队一起工作,网页被翻译成多达80种语言。通过如此广泛的本地化工作,我们学习了构建支持非拉丁字符集和具有从右向左文本方向的语言的页面布局和设计。

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

由于预期德语等语言的文本字符串会更长,一些设计师开发了一个过程,在这个过程中,拉丁文本的长度是源文本的两倍。W3C有一个关于跨语言的公共长度比的便利文章

在某些地方,大小写也可能是有问题的——特别是在使用CSS时。如果你的设计真的依赖文本转换:大写首字母:小写,请要么重新审视设计,使其更加灵活,或者在源文本中处理大写(而不是通过CSS),以便本地化团队能够维护对大写的控制。

MDN是有关本地化设计

在设计过程中涉及占位符数据时,要注意自己的文化盲点。设计欺骗经常影响那些最不喜欢你的人。

只要有可能,设计与困难的数据

关于我们的工具可以帮助我们用真实的数据进行设计。使用现代设计和原型工具,HTML / CSS / javascript原型,甚至静态模型,只有当我们没有把自己的设计推向崩溃的边缘时,我们才会欺骗自己。

在快速生产和过度生产之间总有一个平衡点。就像所有设计和网络上的东西一样,这取决于。这取决于数据,听众,这个项目,和目标。

进度和预算是不交付更健壮的设计组件的常见借口。尤其是在大型项目上,不过,从长远来看,学习将更困难的数据合并到早期设计过程中可以节省时间。

就像那位长跑运动员在高海拔的稀薄空气中进行训练,通过从一开始就使用困难的数据进行构建,你会成为一个更强大的设计师。你会更加清楚你的设计可能会在哪里以及如何被破坏,更好地沟通你的过程和决定。

关于作者

4读者评论

加载评论