皇冠官网登录来看一些例子 糟糕的设计 还有一些反例 好的设计 不仅有趣，而且对设计师也有重要的借鉴意义. 他们强调了设计师要避免的陷阱，并让皇冠官网登录了解如何将设计理论转化为在现实世界中工作的解决方案. 贾里德·斯普尔，美国作家、研究员和 可用性 一位专家曾经说过:“好的设计，当它做得好的时候，就会变得无形. 只有当它做得不好时，皇冠官网登录才会注意到它.” So, 让皇冠官网登录来看看五个明显糟糕的设计例子, 让皇冠官网登录看看优秀的设计是如何发挥作用的, 从中提炼出一些经验教训，这样皇冠官网登录就可以为用户创造伟大而无形的体验.
1. 信息过载
坏处:洛杉矶的停车标志
停车标志在洛杉矶(LA)已经是一个缩影 信息过载 几十年来,. 它们一直是出了名的难以理解, 因为交通规则很复杂, 导致需要传达一个 很多 小范围内的大量信息.
这些标志有多让人困惑? 传统上, 非常看看这个2010年代的例子:
作者/版权所有人:Jorge Gonzalez. 版权条款和许可:CC BY-SA.0
作为洛杉矶的停车标志，这个例子已经很简单了.
假设你是周二早上9点沿着这条路开车的司机.m. 你能在这个地方停车吗? 一个听起来很简单的问题需要大量的心理处理才能回答.
作为设计师, 皇冠官网登录经常面临这样的情况，皇冠官网登录必须在一个小空间里展示大量的信息. 洛杉矶的停车标志可能是一个极端的例子, 但很多时候，设计手机应用也意味着面临同样的问题. 对于停车标志和设计师来说，有什么出路吗?
好处:尼基·西莲滕的停车标志
设计一个显示所有信息的标识, 同时也很容易理解, 听起来像是不可能完成的任务. 但这正是布鲁克林设计师尼基·西连腾所做的.
作者/版权所有人:Nikki syliteng. 版权条款和许可:CC BY-NC-SA.0
尼基提出的停车标志最终在洛杉矶作为试运行的一部分被使用.
这也是为什么妮基的设计1 尼基意识到，司机们只是想知道他们是否能在一个地方停车. 是或否——这就是所有司机所需要的，这就是所有停车标志所显示的.
她的设计还利用视觉效果而不是文字来传达信息. 结果非常直观:绿色代表“OK”，红色代表“禁止停车”. 它甚至是为色盲设计的，有条纹表示“禁止停车”.
现在，当你看这个标志时，你会知道周二上午9点.m.在市区，禁止停车. 条形图一目了然，简单明了.
经验教训:最佳实践
- 了解你的用户需要什么，然后在此基础上进行设计. 这有助于减少信息过载.
- 有很多信息要传达给用户? 试着用图像代替文字. 了解更多 数据可视化 在这里.
2. 神秘肉类导航
坏处:LazorOffice.com
1998年，文森特·弗兰德斯发明了“糟糕的网页”2神秘的肉 导航 (MMN)指的是在用户点击链接或将光标指向它之前，链接的目的地是不可见的情况. “神秘肉”一词指的是美国公立学校食堂供应的肉 so 经过处理 类型 不再可辨.
MMN不好，因为它降低了 可发现性 导航元素. 这增加了 认知负荷 对用户来说，因为他们现在不得不这么做 猜一猜 如何导航或者点击什么东西.
虽然大多数MMN存在于较老的网站中，但它们在现代网站中却惊人地普遍. 以Lazor Office为例 设计公司 例如，这就创造了预制房屋.
作者/版权所有人:Lazor Office, LLC. 版权条款和许可:合理使用
LazorOffice.Com有一个 网格 MMN图像的主页. 正如你所看到的，这个场景几乎没有给出要去哪里的线索. 而不是, 九张图片就这么放着, 让皇冠官网登录中的一些人思考一个谜，而不是与页面互动.
在他们的主页下方，有一组图片缩略图等着他们. 它们是否可点击? 是的，如果你把鼠标光标移到图像上，它就变成了一个指针. 但是当你点击一张图片时会发生什么呢?
点击查看!从来都不是好事 用户体验 (用户体验)解决方案. 机会是, 您的用户将放弃他们的导航，并在竞争对手的网站上寻找替代解决方案.
好处:交互设计基金会网站上的课程卡片
值得庆幸的是，MMN问题很容易解决. 关键是要意识到必须清楚地标记链接. 简单地添加“查看项目”，出现在鼠标悬停将提高易用性的Lazor办公室的页面上面.
作者/版权所有者: 交互设计 基金会ApS. 版权条款和许可:合理使用
皇冠官网登录的课程卡和链接一样不神秘.
为 交互设计基础课程卡, 皇冠官网登录不仅在每张卡片的底部有“查看路线”来指示将要发生的动作, 但皇冠官网登录也有一个悬停状态，文本为Go to course. 许多网站遵循类似的惯例, 你也应该这样做, 最大化网站的可用性.
经验教训:最佳实践
总是给你的链接贴上标签! 你不会喜欢吃神秘的肉——同理, 你的用户不喜欢点击神秘的链接.
3. 为用户操作添加摩擦
坏处:如果50.com
作为设计师，皇冠官网登录应该非常谨慎地在用户操作中添加摩擦，除非目的是这样 劝阻 用户不能执行该操作. 然而，有时皇冠官网登录甚至可能是无意的 添加 用户操作的摩擦(主要是出于审美或新奇的原因)会导致有害的用户体验.
如果50就是一个例子.Com，创建周年纪念 如果 荷航杂志. 如果 50是一个垂直滚动的网站，展示了50个旅游目的地, 在一些目的地(比如下面这个), 靠近底部的按钮要求用户点击并按住几秒钟以查看更多照片.
作者/版权所有者:Koninklijke Luchtvaart Maatschappij NV(荷兰皇家航空公司). 版权条款和许可:合理使用
如果 50希望用户每次想看更多照片时，都要点击并按住几秒钟.
在每个动作中添加几秒钟的摩擦可能会导致糟糕的用户体验. 想象一下,如果, 而不是点击立即加载页面, 你现在要按住两秒钟 每一个 链接，您在浏览器中单击. 几次点击之后，你就会完全放弃上网了.
很多时候，皇冠官网登录设计师往往会被最新的东西冲昏头脑 交互方式 或行动, 但当你的设计可能会给用户操作带来摩擦时，你必须保持谨慎. 大多数时候，经过试验和测试的约定(例如，简单的单击或滑动)工作得很好.
优点:iOS上的弹性滚动
有趣的是，有意识地在用户操作中添加摩擦会导致 伟大的 设计. 苹果手机操作系统中最受欢迎的发明之一, iOS, 是否创建了弹性滚动, 在某些情况下(比如在网页的末尾)，滚动变得越来越困难.
作者/版权所有人:交互设计基金会ApS. 版权条款和许可:合理使用
在iOS的弹性滚动中，在某些情况下故意增加了摩擦.
您可以在上面的操作中看到这一点, 当用户滚动到网页末尾时，哪里会增加摩擦. 添加摩擦来指示滚动的情况 不再 允许:效果是一种直观的体验.
经验教训:最佳实践
尽可能避免在用户操作中添加任何类型的摩擦，并在别无选择时谨慎执行.
4. 忽略可用性的“聪明”设计
坏处:博尔登.nl
有时候，聪明的设计对用户体验是有害的. 让这个错误更危险的是，皇冠官网登录设计师喜欢聪明的设计. 它们是让皇冠官网登录微笑的微小图形奇迹. 可悲的是，大多数人都是这样 不 设计师. 更可悲的是，并不是所有聪明的设计都是好的设计，尤其是当它们具有创造性的时候 可访问性，可发现性或可用性问题.
以荷兰战略设计和开发工作室Bolden的网站为例:
作者/版权所有人:Bolden. 版权条款和许可:合理使用
你能看出他们的主页想表达什么吗? No? 好吧, 这是因为您必须将鼠标移动到页面的角落，以便正确地看到消息.
作者/版权所有人:Bolden. 版权条款和许可:合理使用
这是一个聪明的设计吗? 是的,肯定. 但这是糟糕的设计吗? 绝对!
这是一个很好的设计例子 设计师, 而不是用户:该网站严重降低了标题的易读性，因为它的创造者决心提供一个新颖的设计. 不管是谁设计的，他都省略了文字，告诉用户他们应该将鼠标移动到角落, 这意味着头条新闻的发现依赖于什么 偶发事件. 此外, 即使新闻标题被曝光了, 文本和背景之间的对比度很差，因为你仍然可以看到重叠的文本. 所有这些加起来创建一个用户-un友好的网站.
优点:有教养的机智.com
有教养的机智的网站是一个很好的反例，巧妙的设计不需要对可用性施加压力.
作者/版权所有人:Wit. 版权条款和许可:合理使用
“教养机智”的主页上展示了一只猫头鹰的插图.
在“培养智慧”的主页上 插图 当你的鼠标移过猫头鹰时，它会眨眼:
作者/版权所有人:Wit. 版权条款和许可:合理使用
惊喜! 当你把光标指向猫头鹰时，它会向你眨眼. 还要注意空格的明智分配.
关键的区别在于，这不会形成 至关重要的 网站的一部分, 因此，即使用户没有发现这个巧妙的设计元素，它也不会降低可用性.
此外，它们有一个明确的向下箭头，表明有东西在折叠下面. 当你向下滚动，你会看到这个:
作者/版权所有人:Wit. 版权条款和许可:合理使用
网站可以在不牺牲用户体验的前提下变得聪明.
文案(清晰易读，有很好的对比)创造了一种机智的感觉——不像Bolden试图达到的效果——而不降低网站的用户体验. 唯一的小问题是文本“加入皇冠官网登录的电子邮件俱乐部”应该更明显, 但从整体来看, Cultivated Wit的网站就是一个很好的例子，它提供了巧妙的设计，却没有创造糟糕的用户体验.
经验教训:最佳实践
聪明的设计应该尽可能万无一失，并/或在实际用户上进行测试. 有时，聪明的设计可能适得其反，损害可用性.
5. 多余的动画
缺点:PayPal收据概念在Dribbble
动画 是交互设计的关键元素，但它们应该始终服务于某个目的. 他们应该 从来没有 看在动画的份上. 不幸的是, 设计师往往对动画情有独锺, 部分原因是动画制作太有趣了，皇冠官网登录可能不知道什么时候该停下来.
Vladyslav Tyzun的PayPal电子邮件收据动画概念, 发表在Dribbble上, 是一个动画做错的例子:
作者/版权所有人:Vladyslav Tyzun. 版权条款和许可:合理使用.
动画很漂亮，但有些多余. 总共需要3个.5秒内查看交易细节. 简单的收据淡入会更优雅, 而且因为它花的时间更少, 对用户也更好.
当设计师似乎无法获得足够的动画时，这个问题就变得危险了. 截至2016年，弗拉迪斯拉夫的动画获得了500多个赞和8000次观看. 这显示了设计师为了动画而对动画的一种错误的欣赏. 了解设计师倾向于使用史诗而不是更直接的表现形式，并在你屈服于动画之前抓住自己，这将为你节省大量时间并避免许多头痛问题. 还记得, 用户访问网站是有目的的——皇冠官网登录希望在短时间内向他们展示他们想要的东西, 而不是让他们去参观画廊.
优点:Stripe Checkout的动画
当皇冠官网登录做动画时 有目的地然而，结果可能很好. 当用户收到验证码时，看看Stripe Checkout的动画:
作者/版权所有人:Stripe, Inc. 版权条款和许可:合理使用.
Stripe使用动画让事情看起来比实际更快:它为用户提供更新(如“已发送”)，即使他们可能还没有收到短信. 这可以防止用户在等待时感到沮丧, 并保证短信已经在路上了.
瑞秋Nabors, W3C邀请的网络动画专家, 在设计动画时要牢记五条原则3:
- 有生命的故意:在你创建每一个动画之前都要仔细考虑.
- 这需要超过12条原则:迪士尼的12条动画原则适用于电影，但并不一定适用于网站和应用程序.
- 有用和必要的， 然后 美丽的: 美学 应该把用户体验置于次要地位.
- 快四倍:好的动画是不引人注目的，这意味着它们运行得很快.
- 安装终止开关:对于大型动画，如平行效果，创建一个 选择退出 button.
经验教训:最佳实践
总是让你的动画有目的:太多会杀死产品的用户体验. 美必须发挥自己的作用，并具有功能性.
拿走
看看糟糕设计的例子不是很有趣吗? 值得庆幸的是，它也具有教育意义. 以下是五个好的和坏的设计案例中的关键经验教训和最佳实践:
- 了解用户的需求，然后传递信息.
- 如果你有很多信息要传达， 试着用图像代替文字.
- 总是给你的链接贴上标签! 用户不喜欢神秘链接.
- 避免增加任何形式的摩擦 对于用户的操作，除非它们是为了阻止该操作.
- 测试 你聪明的设计 小心地把它们包括进来.
- 动画就像诅咒. 如果你过度使用它，它就失去了所有的影响力.4
下次当你对一个糟糕的设计实例皱眉时，停下来想一想:要理解 为什么 设计失败了, 找到正确的设计案例, 把你学到的教训记在心里. 然后分享爱:在皇冠官网登录的网站上与其他设计师分享你的经验 讨论论坛!
