你是否合理使用设计中的视觉糖?

本文关于设计师从食品工厂最爱的小伎俩中吸取教训,以及为什么应该停止滥用它。

图片来自ATTN

如何使任何食物变得更美味?只要加糖就可以了,食品行业巨头用这个伎俩把一切都变得如此简单。如今,糖无处不在:汉堡,软饮料,脱脂牛奶,蛋黄酱,甚至婴儿食品!

1822年,美国人平均每五天消耗约45克糖,如今达到756g!

我们的大脑不断地渴望糖,所以我们沉迷于含有它的食物(脑部扫描显示糖像可卡因一样上瘾)。糖没有营养价值,这只会给食品生产商带来更高的利润,并造成消费者的健康问题。有一个辉煌的纪录片《Fed Up》讲述的就是这个。(译者注:Fed Up是由Stephanie Soechtig指导,撰写和制作的2014年美国纪录片。这部电影重点在于美国人肥胖的原因,大量的数据显示,加工食品中大量的糖是人们忽视的根源。)

如何使你的设计变得更好?只要加糖就可以了,视觉糖。

什么是视觉糖?

视觉糖是任何视觉装饰元素。最常见的视觉糖类型是图标、渐变、阴影、纹理、动效等。

有时候,设计师会以无意义或过度的方式使用它们,使他们的设计更好,这里的关键是“无意义”。这些本身没有任何问题,只是它们被用来甜化原本无味和无意义的设计。

为什么会这样呢?那么,我们假设在这样的情境下:你在设计时感觉有点平淡。你会怎么做?添加一些图标,或渐变和阴影?看起来使你的设计变得更好了,但实际上你只是将一个肤浅的设计伪装起来。

有些设计甚至彻头彻尾是个糖衣炮弹(以坏的方式)。大量的糖分却毫无营养价值。我们看看来自Dribbble的典型的仪表板:

  • 浓重的阴影
  • 过量的图标
  • 渐变

到底多少糖分算多?

根据美国心脏协会的数据,男性每天摄入的添加糖分最多为37.5克(9茶匙),而女性最多为25克(6茶匙)。

产品设计呢?在产品设计中可以使用多少视觉糖?Edward Tufte在他的书《Visual Display of Quantitative Information》中有完美的答案:

当视觉图表被杂乱的装饰形式取代、当数据量度和结构变成可见的设计元素、当视觉样式由整体设计决定而非定量数据,那你就可以称此“视觉设计”为“鸭形商店”。(译者注:大鸭子商店是位于美国长岛的一个建筑,外形是个写实派的鸭子造型,而其主要功能就是卖鸭子和鸭蛋。)

对于这个建筑,整个结构本身就是装饰,就像鸭子数据图形一样。在拉斯维加斯的学习中,Robert Venturi, Denise Scott Brown和StevenIzenour撰写了关于现代建筑的鸭子–他们的想法也与数据图形的设计有关:

当代建筑师自以为是地“摈弃”建筑外部的装饰,却无意中设计出了一个本身就是纯粹装饰品的建筑。在推动空间与艺术方面的象征意义和装饰,他们把整个建筑变成了鸭子。他们取代了传统的棚用装饰的天真和廉价的实践,这是一种非常愤世嫉俗和昂贵的程序和结构的扭曲来促进鸭子的发展…现在是时候重新评估John Ruskin曾经令人震惊的声明了,建筑风格是建筑物的装饰,但我们应该附上Pugin的警告:

装饰建筑是可以的,但不要建造装饰品。

如何减少视觉糖?

在设计工作时,牢记几件简单的事情,确保你的设计不会变成视觉的垃圾食品。

有五种方法:

一.始终记住产品需求的层级。在开始考虑形式前,先把产品的功能性定位清楚。一旦你理清了设计目的,并将信息结构牢记于心,每个设计元素就能变得恰到好处。如果一开始就建立在产品视觉外观和感觉的基础上,金字塔将会倒塌。

DEVIN HUNT的设计检查表

iA.net还有一个很好的建议:

不能因为你的设计感觉无意义、冷淡或者没有你预期的那样好,就成为你寻找使用图标的理由。图标不会修复结构有问题的设计。在设计过程的最后添加图标,在使用线框时不要使用图标。图片可以表达1000个不同的意思,强大的信息架构会帮助你找到正确的概念并将它们放在正确的语境中。在诉诸情感之前,先弄清楚你的理论基础。

二.你设计中的每个元素都应该有目的。例如,Google的Material Design设计语言中,动效用于增加额外的意义,而不仅仅是让设计看起来更好:

动效的作用不仅仅是使设计过渡自然,应该首先是帮助引导用户,在正确的时间提供正确的信息。动效应该有助于解决复杂的问题,并清楚地向用户传达一个元素的阻力、动态和路径。

– 来自Sharon Correa和John Schlemmer“Making Motion Meaningful”

三.在没有必要的地方去除视觉糖。Dropbox在重新设计之前,左侧导航面板中的每个菜单项旁边都有图标。他们看起来不错,但几乎没有任何实际意义:如果你隐藏每个图标旁边的文字,用户不会记得它的意思。在新设计中,所有的图标都不见了,现在导航不仅视觉上更干净,而且更容易理解。

图片由DROPBOX DESIGN团队提供

四.不要跟随趋势。当Dieter Rams开始研究他的第一个设计时,黑胶碟播放机的时尚设计就像这样:

FAIRCHILD 411H

这是他设计的:

BRAUN PC-3

五.记住:好的设计不需要过甜。Frank Chimero用香草冰淇淋比喻好的设计:

我的设计就像香草冰淇淋:简单而甜美,朴素而不简陋。它应该是一个更加放纵的体验的基础,在他们需要的场合,添加巧克力片和曲奇饼。然而这些特殊场合是很少的。一份好的香草冰淇淋通常就够了。

来个总结

最近Peter Thiel’s在纽约时报中有一篇精彩的采访:

记者:你坚信人从来就不应该吃糖。

Peter Thiel:没错,我们说的都很容易,却从来做不到。

UXDESIGN

译文地址:点融设计中心DDC

作者:Yadira

(0)

相关推荐

  • 关于LOGO设计中的视觉矫正法!

    为什么谷歌的新LOGO  不符合辅助线反而更好看?这就涉及到LOGO 设计中的一个高阶技巧了 -- 视觉矫正,今天这篇好文用一些简单易懂的实例,帮你搞懂这个进阶技巧. 我最早从事的设计领域是印刷设计( ...

  • 案例解析,UI设计中的视觉引导技法!

    视觉引导有很多种方式,色彩引导.动效引导.操作引导.视觉心理等等,下面分享一个我工作中的案例,通过案例讲解设计过程中的一种思路! 案例分析 案例页面,用人机对话形式,做问答测评的H5页面! 上图为优化 ...

  • 软塌塌没骨感?学学网页设计中的视觉解剖

    小编:今天为大家奉上一篇来自作者@飞屋睿的关于网页设计的文章,此篇主要从设计的骨架入手来讲解如何构好图.让我们的设计更有骨感不再"软塌塌".作者通过几种设计形式加上图文结合为我们详 ...

  • 设计中“对比”的作用是?

    开工了~开工了~春节小长假眨眼间就过去了!春节过后还是为大家准备了一篇文章,这次来的有点晚了,希望大家见谅! 进入今天的主题:<设计中的对比>,关于"对比"这个词其实大 ...

  • 设计中的“视觉层次”该如何体现?

    在设计环节中,为了让信息传达更加准确,界面更加美观整洁清晰,也为了用户更方便提取关键信息,必定要有视觉次序的区分.那么,设计视觉次序要如何体现呢?以下文章为你总结了一部分要点,接下来就跟小编一起学习吧 ...

  • 交互设计中的5项视觉指导原则

    来自UXPin的Jerry Cao,通过本文向我们解释了如何保持视觉与交互的协调. 我不想贬低文字的重要性,但也不想忽视视觉.两者是同等重要的交互设计元素.文字就是交互,但那些视觉元素(比如图标.菜单 ...

  • 移动终端中的视觉引导设计

    移动终端中的视觉引导设计 步骤/方法 01 在传统网站设计和平面设计中,大量信息的整理规划需要设计者用合理的排版,将信息顺畅的传达给用户,连贯的不间断的视线移动阅读会给人舒适的感觉,反之,视线被引导的 ...

  • 【译】UI设计中使用插图的十大理由

    在过去的几年里,UI插图一直是最流行,最持久的设计趋势之一.一起来讨论下在网站和移动UI设计中运用插图的原因. 插画是什么? 基本上,插图是对特定概念.文字或过程的视觉解释,旨在支持.澄清甚至扩展人们 ...

  • UI设计中字体的应用

    我们在一直赶路,有时候要停下来,好好想想,沿途的风景我们好好欣赏过了吗?我们的基础知识牢固吗?我们有总结沉淀吗? 你说你是不是外貌协会的,反正我是的.想啥呢,我是说设计.在设计中,我们大多数人也都是不 ...