首页 > 网页教程 > 设计分享 > 坏设计 VS 好设计:从5个对比案例中获得设计经验

坏设计 VS 好设计:从5个对比案例中获得设计经验

时间:2018-05-08    来源:人人都是产品经理

对比坏设计与对应的好设计非常有趣,而且设计师可以从中获得重要的经验。这种对比突出了设计中要避免的陷阱,同时让我们理解了如何将设计理论转换成现实生活中的解决方案。

Jared Spool,美国作家、研究员及可用性专家,曾经说过:

好的设计,当它工作良好时,是隐形的。只有当它工作不良时,才会被人注意到。

所以,通过展示 5 个明显的坏设计,来反衬好设计是怎么更好工作的,并提炼出一些经验来让我们为用户们创造良好的隐形的体验。

一、信息过载

坏设计:洛杉矶的停车指示牌

洛杉矶(LA)的停车指示牌,可以说是近十年来信息过载的典型代表。它们出了名的难以理解,因为交通规则很复杂,因此在一块小小的区域里要传达大量的信息。

这些指示牌有多令人费解呢?

通常来说,它们从 2010 年起典型的样式就像下面的图片一样:

作者/版权所有人:Jorge Gonzalez。版权条款和许可:CC BY-SA 2.0

从LA停车指示牌的历史来看,这个样式已经是相当简单的了。试想周二早上 9 点你开着车上了这条公路。那你可以停在这里吗?

这么简单的问题竟然要费尽大量的认知资源去回答!

作为设计师,我们经常会面对需要在一块小区域里传递大量信息的设计问题。LA的停车指示牌可能是其中最极端的一个例子,但很多时候在移动端应用设计中也会面临同样的问题。

那么是否有一个通用的办法可以解决停车标识及类似的设计问题呢?

好设计:Nikki Sylianteng的停车指示设计

设计一个可以展示所有信息,同时容易理解的的标示牌听起来是一个不可完成的任务,但这恰恰就是Brooklyn的设计师Nikki Sylianteng完成的。

作者/版权所有人:Nikki Sylianteng。版权条款和许可:CC BY-SA 4.0

Nikki的设计试验性应用于LA标识设计中。Nikki的设计有效的原因之一正是因为它是以用户为中心的:Nikki意识到驾驶人其实只想知道他们现在是否可以停在这里。

可以或者不可以,这才是所有驾驶者需要的,所以指示牌也只需要展示这些信息。

她在设计中利用了视觉来传达信息而不是文字,结果就是设计极为直观——绿色代表可以停车;红色代表不可以。同时这个设计里还考虑了色盲的问题,所以在不可停车的时间域内用了斜线。

现在当你看到这块标示时,你就知道周二早上 9 点是不可以停车的,这样的指示牌子瞄一眼就能懂。

所学到的最佳实践:

  • 了解你的用户需要什么,然后基于此设计,这可以帮助减少信息负载。

  • 有大量的信息要传达给你的用户,试着用视觉化元素来替代文字,点击以下链接了解更多数据可视化的知识。

二、神秘肉式导航

坏设计:LazorOffice.com

根据 1998 年Vincent Flanders创建的网页The Suck,神秘肉导航(MMN)用于指代那些必须要用户点击链接,或把鼠标悬停链接之上才知道指向目标的设计。

“神秘肉”这个短语,起源于美国公立学校的自助餐厅提供的肉类,因为被过度处理而根本无法辨别出来。

MMN不好,是因为它降低了导航元素的可见性。因为用户必须要去“猜”导航的目的地,或者必须要有点击操作,因此增加用户的认知负载。目前老式的网页设计中还可见到MMN,现代网页设计中已经很少见到了。

我们以Lazor Office为例——一个提供预制房屋的设计公司网站。

作者/版权所有人:Lazor Office公司。版权条款和许可:合理使用

LazorOffice的官网首页上摆放了这么一组MMN式图片,正如你所见到的那样,这种布局只有非常少的线索暗示我们将要去向的地方。相反,这 9 张图片就这样摆放着,令某些用户产生困惑而非发生与之交互的动作。

在他们主页的下方,一组图片缩略图静静的摆放在那里,它们是可点击的吗?

是的,它们可以点击,如果你把鼠标移动到这些图片上,它会变指针的样子,但是当你点击后会发生什么呢?

“点击后查看”并不是个好的用户体验解决方案。这种设计会会带来的改变是——你的用户会弃用这些导航,而从你的竞争对手那里获得替代的解决方案。

好设计:Interaction Design Foundation网页的课程卡片

幸好MMN问题是很容易解决的,关键是意识到你必须清晰地标注链接。仅仅是在鼠标悬停上增加“查看项目”的弹出提示,就可以提升Lazor Office主页的可用性。

作者/版权所有人:Interaction Design Foundation. 版权条款和许可:合理使用

我们的课程卡片清晰标签了链接的去向,我们Interaction Design Foundation上的课程卡片,不仅每张卡片的底部有“查看课程”入口用以提示行动结果,同时鼠标悬停在卡片上时还会弹出“进入课程”的提示语。许多网站都遵循这一相同的规则,所以你也必须要遵守,那就是最大化你网站的可用性。

所学到的最佳实践:

总是标注清楚链接的指向!你不会喜欢吃神秘肉的。同理,你的用户也不喜欢点击指向未知的链接。

相关推荐
简洁设计是对用户需求透彻理解的基础上去粗取精
深入谈交互设计之人人都懂交互设计
产品设计:万水千山总是情 不要图片行不行
产品设计教程:提升用户使用黏性的6个诱惑手段
中枪了没?设计师最常见的11个设计误区
从引导页设计说起 谈谈如何提高产品体验
学多不如错少!五个最常见的设计思维误区
回顾交互设计发展史:回归人性 重拾质朴
深度剖析文:设计追波风!
产品设计:FEEDLY创始人再聊改版实战经验
设计与咖啡:我在卖咖啡中学到的产品设计
让测试成为设计的一部分 做出高性能设计
如何改善产品UX设计,这5条原则也许能帮到你
当你思考2016产品与设计创新时 不可回避这10个趋势
前方高能!别让这10个设计误区毁了你的APP
“简”与“洁”,产品界面设计不得不知道的两点
Design Sprint:谷歌产品设计秘诀
电商产品设计感想:你真的认识购物车吗?
交互设计:利用控制感,为用户体验加分
这7个原则是产品用户体验设计的重点
产品设计过程中对异常流程设计的处理
微文案:UI设计师的必备技能
动效教程:产品的动效设计
产品设计中如何利用弹窗做信息展示、内容拓展等?
UI设计分享:食谱类APP要如何设计?
30个幽默有趣的404错误页面创意设计欣赏
分享:网页核心内容对视觉表现的影响
网页设计的背景创意风格与设计趋势分享
20+艺术视觉和网页完美统一的网页创意案例欣赏
21个带斜线排版设计的网站设计创意欣赏
55个极具创意的手绘网页设计案例欣赏
从优秀案例分析网页Banner视觉构成与创意设计
15个运用创意印刷字体的网站欣赏
15个最佳创意型404错误页面案例赏析
15个国内外优质设计分享平台推荐 设计师必收藏

精彩推荐

热门教程