台湾设计师谈资讯与视觉设计的绝妙平衡

  作者陈威帆是台湾科技博客 Desiring Clicks 的创始人,也是一名 UI/UE 设计师。本文是陈威帆向爱范儿投递的稿件,主要谈资讯获取方式与设计之间的关系。Desiring Clicks 专注于介绍用户界面、用户体验、视觉设计和资讯架构的科技媒体,感兴趣的朋友可以关注作者本人的 Facebook或他的网站。


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

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

  图表与信噪比


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

  界面与信噪比

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


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

  视觉搜寻系统

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

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


  容易被辨识的基本特征

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

  •颜色

  •线段方向

  •大小

  •运动

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

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

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

  让界面保持绝佳的平衡

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

时间: 2024-09-20 00:49:51

台湾设计师谈资讯与视觉设计的绝妙平衡的相关文章

台湾设计师我们的UI到底怎么了?

  不是小小的可用.小小的易用喔,是「小可」用.「小易」用.设计师自己设计爽的,要他讲为什么只会「我也是使用者因为我喜欢这样做啊!」你跟我说客户坚持要这样我能理解,人家付钱买自己想要的东西就算了.如果是开发自己的产品硬要乱搞也就算了,赚赔自理.客户什么都没讲你却交这种垃圾出来,还屁一堆 543- 你有多久没看到让人眼睛一亮的 App 了? 你有看到漂亮的App是台制.且非抄袭的吗?刚入行第一年,我保持一天下载 10 个 App 的习惯.只要 Screenshot 看起来还 ok ,就算付费软件照

台湾设计师推荐!全自动标示文件神器SPECKING

  之前推荐过的 马克鳗 绝对可以说是一个好用的标示工具,但它止步太久没有更新的功能,而且也开始收月费了,于是我重新寻找好用的工具,目前推荐 2 套:specKing 和 Assistor PS 都是付费的 PS 外挂. Assistor PS 官网:http://assistor.net/en/assistor/product Assistor PS 应该是目前功能最强大.包山包海的神器,但它是收月费:$9.9 a Month,我对月费这件事有点排斥,加上除了标示文件外的功能都找得到免费的外挂

PS台湾设计师教你快速制作圆形渐变图标

  @Akane_Lee :看到有人问这种圆型 icon 要怎么做,觉得很有趣稍微思考一下原理,做了个简易快速版本.比不上原版精致.只是记录思考方式. 中间的渐层色 画一个圆,设图层样式,角度. 凹进去的部份 其实是用迭的,再画一个半圆,设内阴影. 中心 画一个圆,用图层样式设定,一层就能解决厚度和高光问题. 外框 用形状工具.重迭两个圆画出圆环.同样用图层样式设定,一层就解决厚度和高光. 阴影 复制需要阴影的那个图层.高斯模糊,复制一层略缩小85%,调整透明度和重迭部份,阴影会比较立体.共有外

浅谈资讯站点的运营

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 最近在做了一个资讯站(橙果财富网),为此才稍微有那么点发言权来说说这个资讯类站点的出路问题. 首先我们来做对比的网站是电子商务类网站,电子商务网站做好后,可能只要等成交他就很好发展下去,不需要花很多的时间在维护上.而资讯类的站点可能要一直保持更新,因为人家是来看内容的,老是一个内容人家自然不会愿意在来,长期更新对于个人站长来说难度确实很大,文

游戏视觉设计与用户体验

  对于游戏页面设计,可能有很多设计师把重点放在视觉设计上,从而忽略了用户的感受.个人认为其实一个页面设计的怎么样,关键还是在于用户对页面各个方面的感受. 时间很快,通过近一年对自己强烈的要求(快有强迫症了),设计思维发生了很大的变化. 大家可能会问什么样的页面设计才算是优秀的页面设计,个人大概总结了一下. Q:对于游戏页面才讲,什么样的页面才算是优秀的页面设计? A:有很好的视觉导向,让用户在最短的时间内找到想到的内容,对内容一目了然,页面视觉创意整体感觉舒服而不感到扎眼. 目前,游戏页面的设

UI设计师必学的设计规范要点总结

  什么是设计规范?设计规范哪些要点值得关注?今天分享一篇台湾设计师@Akane_Lee 老师的好文,列出了她对设计规范的要点总结,能帮助设计师们变得更加专业,有志于UI设计的同学,现在就该行动咯. @Akane_Lee :要做设计规范前,先来了解什么是设计规范,不是把所有组件都摆在同一张图上排排站吃果果就好,设计规范(Design Code / Design Specifications) 一文中提到: 设计规范是指对设计的具体技术要求,是设计工作的规则.一般包括总体目标的技术描述.功能的技术

从HTC到宏碁 台湾科技企业为何集体低迷?

本周二,台湾PC大厂宏碁宣布更换CEO,并实施裁员及重组计划,致股价大跌.宏碁成为HTC之后,另外一家快速下滑的台湾科技企业.此外,PC大厂华硕现状也不乐观.台湾科技品牌缘何集体低迷?日前外媒分析指出主要有两个原因:和苹果一样出现了创新乏力:产品设计理念落后,设计师得不到足够重视,过去长期的代工历史,留下了过于看重"功能丰富和价格低廉"的后遗症.在过去十年中,台湾的科技行业意识到代工业的软肋,纷纷自立品牌,和过去的代工客户展开竞争,宏碁.华硕.HTC成为代表性的台湾消费电子品牌.这些品

酷讯网张海军:垂直旅游搜索后进者成功几率小

中介交易 SEO诊断 淘宝客 云主机 技术大厅 6月30日消息,酷讯网CEO张海军先生昨日做客赛迪网访谈,就旅游搜索领域的发展现状和趋势跟网友进行了在线交流.张海军表示,垂直旅游搜索处于起步阶段,未来前景可观;但垂直旅游搜索的差异化空间小,门槛高,后进者的成功几率不大. 张海军:酷讯有三大优势 主持人:大家好,今天我们非常荣幸请来了酷讯网CEO张海军先生,首先请张总跟我们网友打个招呼,再介绍一下酷讯网. 张海军:赛迪网网友大家下午好,非常高兴有机会在这里跟大家做交流,酷讯网是一家专业的旅游搜索引

超平面的触觉设计

作为紧随潮流嗅觉灵敏的Graphic设计师,你有没有留意到逐渐兴起的"超平面"设计艺术?那些已经习以为常地被绘制在平面上.被保存于数字文件中的图形.元素,因为设计师们的想象力而被赋予了动人的生命力,变身成为现实物质.跃然出现在可以互动的空间中.它有一个需要去感受的名字--Tactile Design(触觉设计). 什么是"超平面"?什么是"触觉设计"? 先呈上一些精彩的设计,让大家可以明白个大概: NODE's showcase+dsgn展示为g