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

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

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

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

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

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

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

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

1.色彩

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

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

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

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

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

2.布局

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

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

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

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

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

c.分组
将原本零散无序的信息分组展示,是揭示信息之间的内在联系、帮助用户理解和记忆的有效手段;在视觉的表现上,分组就是让每组信息在视觉表现上具有相关联或相似的地方;
(如;区域划分、间隔划分、色彩划分、形/符号的划分、层级划分tab)

(元素的区域划分)

(元素的间隔划分)

(元素的色彩划分)

(元素的形/符号划分)

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

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

3.视觉特效

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

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

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

4.视觉权重

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

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

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

【本文首发于:百度用户体验部】http://mux.baidu.com/?paged=12
【关注百度技术沙龙】
本文转自百度技术51CTO博客,原文链接:http://blog.51cto.com/baidutech/746919,如需转载请自行联系原作者

乱花渐欲迷人眼-杜绝设计的视噪相关推荐

  1. 乱花渐欲迷人眼的C编译器中,谁才是“编译之王”?

    C语言作为"万物的始祖",所有刚接触的小伙伴都在使用C语言,然而不胜枚举的C语言编译器让人眼花缭乱,VScode.GCC.TCC--那么到底哪些C语言编译器是大佬们用的最多的?又有 ...

  2. Web3中文|乱花渐欲meme人眼,BRC-20总市值逼近10亿美元

    现在的Web3加密市场,用"乱花渐欲meme人眼"来形容再合适不过了. 何为meme? "meme"这个词大概很多人都不知道如何正确发音,并且一看到它就会和狗狗 ...

  3. 计算机科学选AP课,乱花渐欲迷人眼,AP课程如何选 之 理科

    美国高中AP课程有22个门类.37个学科,AP 考试的成绩为5分制,考生可以获得1,2,3,4或5分.一般3分或3分以上的成绩可以在大学换取学分,但有些名牌大学接受的标准在4分以上或者5分,还有的大学 ...

  4. 乱花渐欲迷人眼:浅谈关于分布式存储的五大 “谎言”

    申耀的科技观察 读懂科技,赢取未来! 要说近几年存储这条街最靓的仔,莫过于分布式存储了. 自诞生以来,分布式存储就被视为存储的未来,被万众期待.然而分布式存储起步于寒门,最早应用于互联网日志.企业备份 ...

  5. 近乎于“妖”!浅谈《山海镜花》的美术风格与设计

    引 以三国.武侠.仙侠和神话题材为背景(或称之为架构.框架)的游戏产品,国内绝大部分的老玩家(70.80后)对其均毫无"免疫力"可言.当然,这里面也包括我自身在内.从小的耳濡目染, ...

  6. JAVA算法:李白遇花喝酒游戏JAVA DFS 算法设计

    JAVA算法:李白遇花喝酒游戏JAVA DFS 算法设计 看到了这样的一道题目,还挺有意思,可以通过不同的算法设计来求解. 话说大诗人李白,一生好饮.一日,他提着酒壶,从家里出来,酒壶中有酒2斗.他边 ...

  7. 投影仪幕布增益_钱别瞎乱花 家用投影幕布应该怎么选?

    1白幕灰幕应该怎么选 对于投影机幕布很多人都没有深刻了解,家用投影环境该选择什么幕布呢?目前国内投影机幕布的市场情况又是怎么样的?今天我们就来分析这个问题.首先我们我们得分的清投影机幕布种类.目前从颜 ...

  8. 乱炖现在流行应用之产品设计

    写这么个题目,并非是为了哗众取宠,实在是受不了现在网络很多流行产品的设计,所以就想乱炖它们一通,也许会得罪一些人,但请这些产品的设计人员也认真想一下:有则改之,无则加勉嘛. 一.邮箱产品 自 Ajax ...

  9. 你花了多久弄明白架构设计?java多线程编程实战指南pdf

    一面 自我介绍 项目中的监控:那个监控指标常见的有哪些? 微服务涉及到的技术以及需要注意的问题有哪些? 注册中心你了解了哪些? consul 的可靠性你了解吗? consul 的机制你有没有具体深入过 ...

最新文章

  1. mpython掌控板作品_mPython掌控板Easy-IoT物联
  2. mysql 配置执行计划_MySQL深入学习(二)--配置、索引、执行计划
  3. 今天有了自己得博客,心情不错。
  4. Bzoj1511---OKR-Periods of Words(KMP)
  5. ubuntu18.04 mariadb start失败
  6. freemarker -基本概念
  7. C语言n个坐标点间的最大距离,SOS!求检查程序,到17个点距离之和最小的点的坐标...
  8. yuv420图文详解
  9. android之获取手机号码、获取手机操作系统版本号
  10. Struts1的实现原理
  11. python合并excel某一列内容_使用Python横向合并excel文件的实例
  12. 全自动驾驶论文_自动驾驶汽车:我们距离全自动驾驶有多近?
  13. 网吧会员管理系统c语言,常用的网吧会员管理系统哪个比较好|纳客软件
  14. jupyter notebook 上传压缩包解压方式
  15. 2022深圳杯AC题思路模型分析
  16. 理解红黑树及代码实现
  17. 钉钉企业内部开发工具配置
  18. 三伏天如何祛除“月子病”?
  19. 供给云SAAS平台企微助手再升级
  20. 机器学习笔记:卡尔曼滤波

热门文章

  1. 将两大小完全相同的照片进行加权混合对比
  2. C和汇编混合编程--------函数调用后ebp、esp值问题
  3. 有1、2、3、4个数字,能组成多少个互不相同且无重复数字的三位数
  4. snipaste截图软件滚动截图_截图工具的逆袭,Snipaste 还可以这么玩
  5. C++ 泛型编程模板 之 函数模板初步01
  6. C++ 多态之虚析构与纯虚拟购01
  7. 数据结构(五)层次遍历
  8. epoll反应堆模型代码
  9. ajax不支持post,AJAX不能正确发送POST变量
  10. matlab求解常微分方程组/传染病模型并绘制SIR曲线