设计中的“信噪比”平衡

推荐人:马化腾 腾讯公司董事会主席兼首席执行官

推荐语:

“信噪比”(Signal-to-Noise Ratio)原本是用在声音和图像领域的概念。比如,音响设备播放声音时,机器本身也会产生噪音,能不能原汁原味地播出声音,同时最大限度地掩盖噪音,是衡量设备好坏的重要指标。这篇文章巧妙地把“信噪比”的概念借用到了用户体验,把道理说得浅显易懂,难能可贵。

用户体验是互联网产品的命脉,琢磨和研发更好的用户体验应是产品经理和设计师的主要工作。我们之前的经验是,产品的交互设计要细致,视觉要简洁清爽。产品经理要设想自己是个挑剔的用户,是个笨用户,看不懂复杂的界面和内容。这篇文章提供了一个新的角度,来理解这个问题。

用户行为是不断变迁的,这就要求互联网产品自身不断快速进化,以满足用户体验的要求。特别这两年,从PC互联网到移动互联网,用户行为变化之快,超出了很多人的预计。但相信用户体验的喜好标准并未变化,用户始终喜欢清晰、简单、自然、好用的设计和产品。这是产品和设计高手们的竞技场。

文章内容

设计中的“信噪比”平衡

文/陈威帆

所谓的讯息就是为了沟通而产生的,而使用者界面就是承载着资讯的载体。使用者透过界面和各式各样的系统进行五花八门的资讯交换。资讯可能由使用者产生,例如某个人在 Twitter 上发了一则讯息,透过界面上传到网路系统,然后透过网路传递到所有人的荧幕前,然后再由其他阅读到这则讯息的使用者所接收。

因此在资讯的生命周期中,包括了产生、传递、接收这三个重要的阶段,而每个阶段都有可能造成资讯的损耗。而传递中的资讯,又可以分为“真正有用的资讯”和“造成干扰的杂讯”。举例来说:一张讨论各国人口数量的图表,如果采用了过多且花俏的装饰或特效,这些装饰和特效就会成为资讯的“杂讯”。

如果要将讯息完整地传递给使用者,设计师可以选择强化原有的讯息,或是降低多余的杂讯,来提高“信噪比”(Signal-to-Noise Ratio)以增加讯息成功被判读的机率,也让使用者能更轻松地阅读资讯。

图表与信噪比

左右两张图都是在呈现各国的人口数量,左边的图表我们可以清楚地看到不同的人口数量,一眼就可以看出不同国家之间的人口比例关系。而右边的图表由于加上了立体特效和纹路,我们不确定到底要用木块最上缘的部分还是数字的位置来进行比较,木头的材质也影响了数字的判读。因此虽然视觉上比较吸引人,但也因为增加了特殊效果而替资讯加上了杂讯。适当地加上装饰和特效能够吸引读者的注意,但是要注意这些杂讯绝对不能掩盖掉真正要表达的讯息。

界面与信噪比

最近Windows推出的Metro Style UI几乎排除了所有的阴影、圆角,只使用色块和文字来表达整个界面的氛围,几乎说可以是同时用上了“强化资讯”和“排除杂讯”两个方法,让文字(资讯)本身成为界面的一部分与使用者互动。不过这样一来,就缺少了界面所必须的指意暗示(有着阴影的按钮总是让人比较想按下去),也对互动造成些许的影响。

信噪比其实跟人类的搜寻系统有很大的关系,人类的视觉搜寻系统其实很有趣,当大量的资讯同时呈现在我们面前的时候,有时候我们会觉得很容易,一下子就可以找出不同的资讯,有时候我们又会觉得很困难,要花一些时间才能找出不同的地方。到底这两种不同的差异是由什么原因所引起的呢?

视觉搜寻系统

当一个影像刺激在被我们的视觉系统辨识时,有一些影像的属性很容易就可以被大脑处理,这些基本特征(Basic Feature)在视觉神经的前端就会被辨识,让我们的大脑分辨这些影像属性时更容易一些。因此如果我们在设计大量资讯的时候,能够善用这些基本特征,那么就可以提高读者的阅读效率了。

在关于视觉搜寻的实验中,让受试者从许多个「Ⅹ」里面挑出一个「○」,然后再让他们从「┸」里面挑出一个「┼」。我们把所有的视觉元素称作刺激总量,大部分的元素(「Ⅹ」和「┸」)称为干扰物,唯一不一样的那个元素(上面例子的「○」和「┼」)称为目标物,而实验的目的,就是要检测在干扰物增加的情况下,受试者会不会需要花费更多时间才能找到目标物。

容易被辨识的基本特征

在视觉搜寻实验的结果中,找到了一些特征是很容易被我们的搜寻系统所辨识出来的,包括了下列四点:

  • 颜色
  • 线段方向
  • 大小
  • 运动

采用适当基本特征的“平行搜寻”(Parallel Search)几乎不会造成读者任何的认知负担。

举例来说,在一群红色的球体中寻找一颗蓝色的球,无论你增加多少颗红色的球,受试者都可以用几乎相同的速度找到目标物(蓝球)。或是当所有东西都静止不动的时候,我们可以快速地找到那个唯一在移动的目标!出乎意料的,我们的大脑对于歪斜线段的敏感度也很高,可以快速地找到倾斜的线条。

因此,如果你在设计呈现大量资料的界面,那么同时用上四种元素中的一两种也许是不错的选择。不要采用太多,太多的效果会变成画面上的杂讯。把要强调出来的资料放大再填上不同的颜色,可以帮助读者几乎不耗费精神地判断,也同时强化了资讯的重点,增加判读界面与图表的效率。

让界面保持绝佳的平衡

界面设计应该尽量维持简单,才能增加讯息的传递。但界面也不能过于单纯(你可以想象一个纯文字界面,虽然充满了讯息但是有多难使用),适当地采用装饰以及暗示可以提升使用者的熟悉度和使用性。但这之间微妙的平衡就是设计师高手们最能发挥实力的时候了!

节选自《台湾设计师谈资讯与视觉设计的绝妙平衡》

爱范儿网

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据文摘

天龙八部:一张图告诉你如何8步炼成数据科学家

1421
来自专栏ATYUN订阅号

【科技】整形外科医生的帮手!人工智能正在改变医疗美容

人工智能正在改变医学。尽管该领域尚未发挥其全部潜力,但研究人员正在探索机器学习的方法,即人工智能的一个子集,可以显著改善患者的治疗成效。机器学习的最终目的是了解...

2585
来自专栏一个会写诗的程序员的博客

学习之道 文/江湖一剑客

我发现身边优秀的人,他们通常都有两个高于常人的本领。 一是洞察问题的本领, 二是解决问题的本领。

761
来自专栏IT派

Stitch Fix玩转时尚算法,年销7.3亿

Stitch Fix(简称SF)由Katrina Lake 创办于2011年,总部旧金山。其模式最大的特点是:私人造型师为顾客搭配衣服。

1362
来自专栏华章科技

天龙八部:一张图告诉你如何8步炼成数据科学家

OK,这条道路确实不是无迹可寻的。虽然并不简单,但是,通过科学的规划和足够的时间投入,数据科学家可以通过很少的花费炼成。

982
来自专栏BestSDK

Dolphin.ai免费开放SDK,简单三步拥有一套完整语义识别系统

语言作为一种信息交换的媒介,当人们在理所当然地在日常生活中使用它时,并不会觉得这有什么神奇,但当人们尝试与机器沟通时便能轻而易举地感受到这项技能的“高级”之处。...

4185
来自专栏北京马哥教育

Python可以被用来做哪些神奇好玩的事情

如果你在周末、有WIFI的房间里不知道做什么,不如学下Python吧。有了它,你可以什么都不需要! 基础需求篇:温饱与空虚 躺着赚钱 一位匿名知乎网友爆料...

7446
来自专栏量子位

通过图灵测试!Google掌舵人说“打电话AI”是一次非凡突破

今天凌晨,Google I/O 2018大会最后一日,前不久刚刚获得年度图灵奖的Alphabet新任董事长John Hennessy登上舞台。

1253
来自专栏数据的力量

【分析工具介绍】工欲善其事必先利其器

1946
来自专栏人工智能快报

神经形态计算成为大脑仿真最佳平台之一

科研人员利用一个名为SpiNNaker的神经形态计算机开展大脑仿真实验,取得的效果与利用传统超级计算机进行仿真获取的最佳效果不相上下。

722

扫码关注云+社区

领取腾讯云代金券