让人人都懂点儿设计
今天史论君为大家分享一篇来自
interaction design foundation的文章
原文作者：TEO SLANG | 翻译：于于于Jessica
编辑：Sujay Wu
转载后台回复 ：史论君
把不好的设计和好的设计的反面例子一起看，不仅有趣，而且为设计师们提供了重要的经验教训。它们突出了设计人员要避免的陷阱，并让我们理解如何将设计理论转化为在现实世界中有效的解决方案。美国作家、研究人员和可用性专家Jared Spool曾经说过:“好的设计，如果做得好，就会变成隐形。”只有当它做得不好的时候，我们才会注意到它。“
所以，让我们看看五个明显糟糕的设计的例子，让我们了解到设计是如何成功的，并从中提炼出一些经验，这样我们就可以为我们的用户创造出伟大而又无形的体验。”
一
Information overload
信息过载
几十年来，洛杉矶的停车标志一直是信息过载的缩影。因为交通规则很复杂，因此需要在一个小范围内传递大量信息，所以他们总是很难理解。
这些迹象有多令人困惑?从传统上看，从2010年代的这个例子来看:
这个例子已经很简单了。
假设你是一个周二早上9点在这条路上开车的司机。你能在这个地方停车吗?听起来像一个简单的问题需要大量的心理处理来回答。作为设计师，我们经常面临的情况是，我们必须设计大量的信息，以显示在一个小空间中。洛杉矶的停车标志可能是一个极端的例子，但很多时候为移动应用设计的车意味着面对同样的问题。停车标志和设计人员都有出路吗?
设计一个显示所有信息的标志，同时也很容易理解，这听起来像是一个不可能完成的任务。但这正是布鲁克林设计师Nikki sylig所做的。
Nikki提议的停车标志最终在洛杉矶使用，作为试运行的一部分。
Nikki的设计之所以好用，部分原因在于它是以用户为中心的:Nikki意识到，司机只是想知道他们是否可以在某个地方停车。是的或不，这是所有司机需要的，这是所有的停车标志显示。她的设计也利用了视觉，而不是文字，来传达信息。结果是令人难以置信的直观:绿色为OK，红色为禁止停车。它甚至是专为色盲设计的，没有停车的条纹。现在当你看这个标志时，你会知道在周二上午9点。禁止停车。这些条形图显示了什么是在gls - simple中。
了解用户需要什么,然后设计基于。这有助于减少信息过载。有大量的信息传达给用户吗?试着用视觉代替文字。
”
二
Mystery Meat Navigation
神秘的肉导航
“神秘肉导航”(MMN)是1998年由文森特·佛洛德斯(Vincent Flanders)发明的，它是一个神秘的“肉导航”(MMN)，它指的是在用户点击它或将光标指向它的时候，链接的目的地是不可见的。“神秘肉”一词指的是在美国公立学校的自助餐厅里食用的肉类，因为它们的确切类型已经无法辨认了。MMN是不好的，因为它降低了导航元素的可发现性。这增加了用户的认知负荷，因为他们现在不得不猜测如何导航或者点击什么。虽然大多数的MMN是在旧的网站上发现的，但是在现代的网站上却非常普遍。以Lazor公司为例，它是一家制造预制房屋的设计公司。
LazorOffice.com的主页上有一个MMN图像网格。正如你所看到的，这张表几乎没有显示出该去哪里。取而代之的是，9张图片只是坐着，让我们中的一些人在思考一个谜，而不是与页面互动。在他们主页的折叠下面，一个图像缩略图的网格正在等待。他们是可点击的吗?如果你把鼠标移动到图像上，它会变成一个指针。但是当你点击图像时会发生什么呢?“点击找到!“从来都不是一个好的用户体验解决方案。”很有可能，你的用户会放弃他们的导航，在竞争对手的网站上找到替代方案。
好:互动设计基金会网站上的课程卡。值得庆幸的是，MMN问题很容易解决。关键是要意识到你必须清楚地标注链接。简单地在鼠标悬停上添加“视图项目”将提高Lazor Office的可用性。
我们的课程卡和链接一样不神秘。对于交互设计基金会的课程卡，我们不仅在每张卡片的底部都有“View course”来表示将要发生的动作，而且我们还拥有一个“Go to course”的悬停状态。许多网站遵循类似的惯例，你也应该这样做，以最大化网站的可用性。教训:最佳实践总是标签你的链接!你不喜欢吃神秘的肉——同样，你的用户也不喜欢点击神秘链接。
三
Adding Friction to User Actions
增加用户操作的阻力。
作为设计人员，我们应该特别小心地增加用户操作的阻力，除非是为了阻止用户执行该操作。然而，有时候，我们甚至可能无意中增加了用户操作的阻力(主要是由于美观或新奇的原因)导致了有害的用户体验。其中一个例子是iFly50.com，它是由KLM为iFly杂志的周年纪念而创建的。iFly 50是一个垂直滚动的网站，展示50个旅游目的地，在一些目的地(比如下面的一个)，底部的一个按钮要求用户点击并保持几秒钟的时间查看更多的照片。
iFly 50希望它的用户每次想看更多的照片时，点击并保持几秒钟。在每一个动作中增加几秒钟的摩擦力会导致更糟糕的用户体验。想象一下，如果你没有立即点击加载一个页面，你现在只需点击并保持两秒钟，就可以在你的浏览器中点击每一个链接。在几次点击之后，你就会完全放弃对网络的探索。很多时候，我们的设计师都倾向于使用最新的交互样式或动作，但当你的设计可能会增加用户操作的摩擦时，你总是保持谨慎，这是非常重要的。大多数情况下，尝试和测试的约定(例如，简单的单击或滑动)都可以很好地工作。
有趣的是，谨慎地增加用户操作的摩擦力会导致设计的伟大。苹果在其移动操作系统iOS中最受欢迎的发明之一是创建弹性滚动，在某些情况下(比如在网页的末端)滚动变得越来越困难。
在iOS的弹性滚动中，在某些情况下故意增加摩擦。您可以在上面的操作中看到这一点，当用户滚动到页面的末尾时，会增加摩擦力。添加了摩擦力来指示不再允许滚动的情况:效果是一种直观的体验。
尽量避免在用户操作中添加任何类型的摩擦，并且在没有其他选择的情况下仔细地执行。
”
四
“Clever” Design that Ignores Usability
忽略可用性的“聪明”的设计
有时，巧妙的设计会对用户体验产生不利影响。让这个错误变得更危险的是，我们的设计师喜欢巧妙的设计。它们是微小的图形奇迹，给我们的脸上带来微笑。可悲的是，大多数人都不是设计师。更可悲的是，并不是所有聪明的设计都是好的设计，尤其是当它们创建可访问性、可发现性或可用性问题时。以荷兰战略设计和开发工作室Bolden的网站为例:
你能说出他们的主页想说什么吗?没有?那是因为你必须把鼠标移动到页面的角落，以便正确地看到消息。
这是一个聪明的设计吗?是的,当然有。但这是糟糕的设计吗?绝对的！这是为设计师设计的，而不是为用户设计的绝佳案例。
该网站严重降低了它的标题的可读性，因为它的设计者决定交付一个新颖的设计。不管是谁设计的，也会漏掉文字，告诉用户他们应该把鼠标移动到角落，这意味着新闻标题的发现依赖于偶然事件。此外，即使标题被揭示，文本和背景的对比也很差，因为你仍然可以看到重叠的文本。这些都加起来创建了一个用户不友好的网站。
CultivatedWit.com是一个伟大的反例，说明聪明的设计不需要对可用性施加压力。
Cultivated Wit的主页显示了一个插图猫头鹰。在人工智能的主页上，当你的鼠标移动时，猫头鹰眨眼的说明:
惊喜！当你把光标指向它时，猫头鹰向你眨眼。注意空格的明智分配。这里的关键区别在于，这并不是网站的重要组成部分，所以即使用户没有发现这个聪明的设计元素，它也不会降低可用性。此外，他们有一个清晰的向下箭头，暗示有什么东西在褶皱下面。向下滚动，你会看到
网站也可以很聪明，不需要牺牲用户体验。这一版本(可读性强，对比度好)创造了一种与Bolden想要达到的效果一样的感觉——而不是减少网站的用户体验。唯一的小问题是，“加入我们的电子邮件俱乐部”应该更清晰可见，但作为一个整体，经过精心设计的智慧网站是一个很好的例子，它提供了一个聪明的设计，而不会造成糟糕的用户体验。
聪明的设计应该总是尽可能的简单，并且/或在实际用户上进行测试。有时候，巧妙的设计会适得其反，损害可用性。
”
五
Superfluous animations
多余的动画
动画是交互设计的一个重要元素，但它们应该始终服务于一个目的。他们不应该为动画而做。不幸的是，设计师们倾向于对动画情有独钟，部分原因是动画制作太有趣了，以至于我们可能不知道什么时候该停下来。Vladyslav Tyzun关于贝宝电子邮件收据的动画概念，发布在Dribbble上，是一个错误的动画例子:
动画是漂亮的，但是是多余的。
总而言之，查看交易细节需要花费巨大的3.5秒。
一个简单的淡入的收据会更优雅，而且因为它占用的时间更少，对用户也更好。
当设计者似乎无法获得足够的动画时，这个问题就变得很危险。
到2016年，Vladyslav的动画将获得500多个赞和8000个点击量。
这显示了一个错误的欣赏，设计师们为了动画而转向动画。
深入了解设计师倾向于更直接的表现，并在你投入动画之前抓住自己，这将为你节省很多时间和避免很多麻烦。
记住，用户来到网站是为了目的——我们想让他们知道他们在短时间内是什么样子，而不是在画廊的大巡游中留住他们。
然而，当我们有目的地做动画时，结果会很好。
当用户收到验证码时，查看Stripe Checkout的动画:
Stripe使用动画来让事情看起来比实际更快:它为用户提供了更新(比如“发送”)，尽管他们可能还没有收到短信。
这可以防止用户在等待时感到沮丧，并保证短信马上就会出现。
来自W3C的邀请网络动画专家Rachel Nabors提出了在设计动画时要记住的五个原则:
有意动画（Animate deliberately）:在创建动画之前，先考虑每个动画。
它需要超过12条原则（It takes more than 12 principles）:迪士尼动画电影的12条原则，但不一定适用于网站和应用。
实用和必要，然后美观（Useful and necessary, then beautiful）:美学应该把后排座位让给UX。
快4倍（Go four times faster）:好的动画是不引人注目的，这意味着它们跑得很快。
安装一个关闭开关（Install a kill switch）:对于大型动画，例如并行效果，创建一个退出按钮。
一定要让你的动画具有目的性:太多的动画会扼杀一个产品的用户体验。外观漂亮必须发挥它的重要性和功能。
”
看看糟糕设计的例子是不是很有趣?
值得庆幸的是，它也具有教育意义。
以上是五个好的和坏的设计案例
了解您的用户需要什么，然后传递这些信息。
如果你有很多信息要传达，试着用视觉代替文字。
总是标签你的链接!
用户不喜欢神秘链接。
避免在用户操作中添加任何形式的摩擦，除非它们是为了阻止操作。
测试你的聪明设计，并谨慎地包括它们。
动画就像诅咒。
如果你过度使用它，它会失去所有的影响。
设计史论载入中...
设计史论资料册2.0仍在火热销售中
淘宝搜索：设计史论资料册2.0
不仅有书还有很多电子大礼包
并且用户可被邀请加入设计史论知识星球
