杜绝设计的视噪 “乱花渐欲迷人眼”


  视噪,又称视觉噪音。我们每天接受来自外界的大量信息,这些信息有将近70%是通过视觉感知获得的。视噪会干扰我们对信息的判断,影响到产品的易用性和可用性,与用户体验的好坏息息相关。


  (克劳德香农图演示了噪音如何影响信息的传递)


  (这是模仿克劳德香农图画一张视噪影响用户界面传递信息的图)

  那么什么是视觉噪音呢?简单来说,视噪就是在视觉信息传递的过程中,对信息的传递、理解产生负面作用的视觉因素;如同我们无法忍受生活在嘈杂的环境中一样,视觉噪音也会干扰我们对信息的判断,影响到产品的易用性和可用性,与用户体验的好坏息息相关。


  类似下面这样的网页相信你一定感觉熟悉,有时候我们不得不面对这样热闹非凡的页面并从中找到我们需要的信息和内容,譬如说一个下载按钮或者一个重要的链接,但糟糕的是我们很容易迷失其中;


  (纷繁的软件下载页面;)


  (Baidu的首页是一个很好的简洁设计的例子;)

  如何在设计中避免和降低视噪呢?下面就主要从互联网产品界面设计的角度简单的谈谈视噪产生的原因以及我们应该如何避免视噪的产生。

  1.色彩

  提到视觉设计,不能不提色彩。色彩在界面设计中扮演着非常重要的角色:区分信息模块、暗示控件功能(如蓝色文字通常代表链接,灰色按钮表示不可点击等)、突出重点信息(越重要则越醒目)等⋯⋯和谐的配色与适当的比例搭配能够让整个界面看上去清晰舒适,反之,则会给用户带来过重的视觉负担,容易形成视觉疲劳,影响体验。


  (如图,链接文字、不可点击文字,通过色彩的划分而一目了然;)


  (某网站设计;不同区域使用不同色彩划分信息;)


  (个人网站设计;橙色文字在灰色底图上被很好的展现了出来;)


  (色彩在区分信息模块时的运用;)

  2.布局

  界面中的信息能否被有效的传达,离不开良好的组织和布局;这需要考虑以下这几个要素:

  a.层次(层级关系,段落关系)

  在信息的视觉展现中,信息之间层级关系的表达非常重要,如一个界面中导航区域与内容区域的关系、一篇帖子下的所有评论之间的关系、一篇文章中的段落关系等等……恰当的视觉设计,能够通过对视觉元素的展现来暗喻信息之间的层级关系;如果视觉层级关系展示不当,会使用户产生困惑,造成理解障碍;


  (左:信息的层次划分;右:信息的段落划分)

  b.对齐

  在内容排版的设计中,把内容对齐,会形成一种良好自然的边界;该边界沿着这一组对象延伸(利用了格式塔原则——连续性原则),这样带来的好处是加强了边界引导读者的眼光平滑延伸,有助于形成良好的视觉流。


  (在表单设计中,也是如此。操作区域对齐,将大大提升用户的完成任务的效率。表单元素居中对齐后,用户的视线沿着中线下移,能够快速阅读标签并找到相对应的输入框。)

  c.分组

  将原本零散无序的信息分组展示,是揭示信息之间的内在联系、帮助用户理解和记忆的有效手段;在视觉的表现上,分组就是让每组信息在视觉表现上具有相关联或相似的地方;

  (如;区域划分、间隔划分、色彩划分、形/符号的划分、层级划分tab)


  (元素的区域划分)


  (元素的间隔划分)


  (元素的色彩划分)


  (元素的形/符号划分)

  d.间距

  关于信息展现中的间距设计,视觉上较常使用栅格化的设计思想;关于栅格化设计,可以在网上找到很多相关的文章案例,这里不做重点介绍;


  (网页的栅格化设计实例)

  3.视觉特效

  这里提到的视觉特效包括静态的图形效果和动画效果;设计精美的图形界面和优雅适度的动画效果能够给人带来愉悦的享受;但是想想网页上那些闪动不停的广告条幅和屏幕中飞来飞去的弹出框吧⋯⋯它们是否一度将你惹恼?四处充斥的造型复杂的图标、一连串的水晶效果的按钮、各种为炫技而堆叠的软件特效是否让你心生反感?有如糖果般诱人的图形界面,或许并不一定适用于信息的传递和展示;图形元素如果滥用过度,反成冗余和累赘,也就成为了视噪;


  (华丽的色彩和背景图,底纹、水晶、眩光特效,但整个网站带给人的体验并不佳;过度的装点使网站的可读性变差,导航和视觉焦点都变得混乱;)


  (一个网页的页头部分,被各种闪烁的广告所破坏)

  4.视觉权重

  这里提到的视觉权重,指的是界面元素在视觉表现上的“轻”与“重”,也就是信息之间的主次关系;良好的界面设计能够通过对视觉信息的表现和把握,明确告知用户哪些信息是主要的,哪些是辅助的;让用户很快把握重点,提纲挈领;


  (比较上下两组按钮设计实例:上方按钮装点过于华丽,文字不够突出,喧宾夺主;而下方按钮的设计优雅且明确展示了相关信息)

  以上是关于如何在视觉设计中减少和避免视噪的一些粗浅归纳,在实际的设计工作当中,避免视噪产生的一个简单而有效的办法就是:理解你的用户和产品设计的初衷,为产品的功能、内容而设计,为用户的行为而设计;而不是为视觉、为特效展示而设计。

  文章来源:百度MUX 转载请注明出处链接。

时间: 2025-01-30 00:50:07

杜绝设计的视噪 “乱花渐欲迷人眼”的相关文章

Clear——乱花渐欲迷人眼的待办事项工具

一.深泽直人的"无意识设计"Clear这款产品,无处不萌发着一股无意识设计的味道,用户进来之后,看到一个没有任何按钮的list界面,之后任何下意识的手势操作,都对应着合理的引导,比如点击列表看详情.点击空白新建条目:比如下拉列表之后,会出现pull to creat list的提醒,松手就可以新建list:比如猛拉列表之后,会出现switch to menu的提醒,松手就可以回到menu列表:比如在列表上从左到右滑动完成待办事项,从右到左滑动删除待办事项:比如长按列表项就可以挪动位置-

网络电话“乱花渐欲迷人眼” 中华通缘何受青睐?

近年来,随着移动互联网技术的不断进步,网络电话APP逐渐成为一种新兴的通讯方式.在此过程中,关于网络电话"免费"."流量资费"等各种争论不断,大量的网络电话产品层出不穷,一度呈现"乱花渐欲迷人眼"的形态.现如今,市场"冷静"之后,加之国家层面的相关政策出台,网络电话产品要求正规化,"免费"标签日益减少,存活下来的产品也并不多.受到广大手机用户青睐的产品中,中华通网络电话独树一帜,这是受到哪些因素影响呢?小编

“乱花渐欲迷人眼”的进口电商模式

摘要: [导语]乱花渐欲迷人眼,这是眼下进口电商模式给人带来的最强烈感受.除了最为传统的海淘模式,我们根据不同的业务形态将进口零售类电商现有的主要运营模式分为如下五大类: [导语]"乱花渐欲迷人眼",这是眼下进口电商模式给人带来的最强烈感受.除了最为传统的海淘模式,我们根据不同的业务形态将进口零售类电商现有的主要运营模式分为如下五大类:海外代购模式:直发/直运平台模式:自营 B2C 模式:导购/返利平台模式:海外商品闪购模式. "乱花渐欲迷人眼",这是眼下进口电商模

网购奢侈品“乱花渐欲迷人眼”,谁来解开网购奢侈品维权“三重门”?

新华网北京3月18日电(记者周蕊.刘雪.潘旭)原价上万元的商品,在大型电子商务网站只卖2折,而且还标识是"正品行货",网上真能掉馅饼?记者调查发现,这些商品不仅没有品牌方的授权,其中不少可能是所谓的"A货",或者就是赤裸裸的假货. 网购奢侈品"乱花渐欲迷人眼" 从事金融行业的王娜打算给自己和先生买份结婚纪念日礼物."听朋友说奢侈品电子商务网站价格便宜一点,结果到走秀网一看,发现自己看中的同款巴宝莉经典情侣对表,专卖店售价近万元,网站售价

Linux环境下的Java开发(七):“乱花渐欲迷人眼”的开源框架

江南白衣在2005年9月的时候,就在他的博客上提出:每个团队都应该有一个 Appfuse式的项目,用来演示团队目前的体系框架和设计模式.这种项目的好处有 一打:比如为所有项目提供共同的Library Stack,提供最可靠的代码蓝本,保证 大家的模式和代码风格一致,加快知识在团队的传播,方便新人的融入,还有为 试验代码提供一个稳定简洁的环境.而且,构建或者使用这样的项目要遵守几条 铁的纪律:一是强制更新,所有团队approval的最新模式都要refactor到 MyAppfuse中:二是规范更新

千团大战风雷激乱花渐欲迷人眼

面对良莠不齐的团购网站,"团奴"们不知该如何去选择,大多数人只因为便宜.东西好.很多人抢,就盲目参与.然而,诚信度高.服务好.保障权益才是选择团购的关键. 面对良莠不齐的团购网站,"团奴"们不知该如何去选择,大多数人只因为便宜.东西好.很多人抢,就盲目参与.然而,诚信度高.服务好.保障权益才是选择团购的关键. 有人说,人一生当中,除了生老病死不可避免之外,还有一样东西同样不可避免,那就是广告,它发生在你生命的任何空间里.如今,在这些不可避免的广告中,有一样广告,也一

海外代购暗藏猫腻,乱象渐欲迷人眼

8月1日,海关总署发布<关于跨境贸易电子商务进出境货物.物品有关监管事宜的公告>,这是我国第一部专门针对从事跨境电商业务和行为的企业及个人的法规,预示着相关部门开始重视并着手规范饱受诟病的海外代购业.该行业存在哪些问题?监管为何频遇瓶颈?新规能否成为海外代购蛮荒期的"终结者"?对此,记者展开调查. 暗藏猫腻,乱象渐欲迷人眼 只要国内名牌店价格的六七折,就可以买到同样的产品,这种诱惑对于很多人来说难以抗拒.一时间,海外代购成为消费新宠.然而随之而来的市场乱象迅速将该行业推入了

移动广告:乱花渐入迷人眼

摘要: 有互联网女王的热捧,也难改四个原因决定的,移动广告暂难成为主流:用户对移动广告反感;移动广告技术发展相对滞后;移动广告的效果衡量方式缺乏或不明确.目前移动广告市场仍 有"互联网女王"的热捧,也难改四个原因决定的,移动广告暂难成为主流:用户对移动广告反感;移动广告技术发展相对滞后;移动广告的效果衡量方式缺乏或不明确.目前移动广告市场仍处于流动资金不足状态,规模不够大,好的广告产品开发延迟. 钛媒体注:最近业内关于移动广告市场虚火怎么变实火的讨论很盛."互联网女王&quo

别让运营商促销“乱花”迷了眼

别让运营商促销"乱花"迷了眼 ■本报记者 廖鸿翔 古诗云:"乱花渐欲迷人眼,浅草才能没马蹄."但现在迷眼的不仅仅是"乱花",年终运营商们密集的充值促销活动更是把消费者搞得云里雾里. "如果去年充值赠送的话费还没被用完,我就不能参加新一年的充值送话费活动." 网友"用兰蔻的熊猫"告诉记者. "之前听广告说,移动又开始手机预存话费送话费的活动,和去年一样,存1200能送600,而且从网上营业厅办理还能