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

 

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

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

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

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

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

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

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

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

1.色彩

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

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

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

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

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

2.布局

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

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

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

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

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

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

(元素的区域划分)

(元素的间隔划分)

(元素的色彩划分)

(元素的形/符号划分)

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

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

3.视觉特效

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

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

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

4.视觉权重

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

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

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

 

【本文首发于:百度用户体验部http://mux.baidu.com/?paged=12
关注百度技术沙龙
















本文转自百度技术51CTO博客,原文链接:http://blog.51cto.com/baidutech/746919,如需转载请自行联系原作者

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/392576.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

超详细windows安装mongo数据库、注册为服务并添加环境变量

1.官网下载zip安装包 官网地址https://www.mongodb.com/download-center/community?jmpnav,现在windows系统一般都是64位的,选好版本、系统和包类型之后点击download,mongodb-win32-x86_64-2008plus-ssl-4.0.10.zip。 2.解压zip包&#xff0…

开源 数据仓库_使用这些开源工具进行数据仓库

开源 数据仓库by Simon Spti西蒙斯派蒂(SimonSpti) 使用这些开源工具进行数据仓库 (Use these open-source tools for Data Warehousing) These days, everyone talks about open-source software. However, this is still not common in the Data Warehousing (DWH) field. W…

.netcore mysql_.netcore基于mysql的codefirst

.netcore基于mysql的codefirst此文仅是对于netcore基于mysql的简单的codefirst实现的简单记录。示例为客服系统消息模板的增删改查实现第一步、创建实体项目,并在其中建立对应的实体类,以及数据库访问类须引入Pomelo.EntityFrameworkCore.MySql和Microso…

leetcode 34. 在排序数组中查找元素的第一个和最后一个位置(二分查找)

给定一个按照升序排列的整数数组 nums,和一个目标值 target。找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target,返回 [-1, -1]。 进阶: 你可以设计并实现时间复杂度为 O(log n) 的算法解决此问题吗&#xff1…

CentOS6.7上使用FPM打包制作自己的rpm包

自定义rpm包,还是有逼格和实际生产环境的意义的。 (下面的文档有的代码由于博客排版的问题导致挤在了一起,需要自己判别) 安装FPM fpm是ruby写的,因此系统环境需要ruby,且ruby版本号大于1.8.5。 # 安装ruby模块 yum -y…

汉堡菜单_开发人员在编写汉堡菜单时犯的错误

汉堡菜单by Jared Tong汤杰(Jared Tong) 开发人员在编写汉堡菜单时犯的错误 (The mistake developers make when coding a hamburger menu) What do The New York Times’ developers get wrong about the hamburger menu, and what do Disney’s and Wikipedia’s get right?…

android 涨潮动画加载_Android附带涨潮动画效果的曲线报表绘制

写在前面本文属于部分原创,实现安卓平台正弦曲线类报表绘制功能介绍,基于网络已有的曲线报表绘制类(LineGraphicView)自己添加了涨潮的渐变动画算法最终效果图废话少说,直接上源码一、自定义View LineGraphicView,本类注释不算多&…

使用css3属性transition实现页面滚动

<!DOCTYPE html> <html><head><meta http-equiv"Content-type" content"text/html; charsetutf-8" /><title>慕课七夕主题</title><script src"http://libs.baidu.com/jquery/1.9.1/jquery.min.js">&…

leetcode 321. 拼接最大数(单调栈)

给定长度分别为 m 和 n 的两个数组&#xff0c;其元素由 0-9 构成&#xff0c;表示两个自然数各位上的数字。现在从这两个数组中选出 k (k < m n) 个数字拼接成一个新的数&#xff0c;要求从同一个数组中取出的数字保持其在原数组中的相对顺序。 求满足该条件的最大数。结…

Oracle Study之--Oracle等待事件(5)

Db file single write这个等待事件通常只发生在一种情况下&#xff0c;就是Oracle 更新数据文件头信息时&#xff08;比如发生Checkpoint&#xff09;。当这个等待事件很明显时&#xff0c;需要考虑是不是数据库中的数据文件数量太大&#xff0c;导致Oracle 需要花较长的时间来…

两台centos之间免密传输 scp

两台linux服务器之间免密scp&#xff0c;在A机器上向B远程拷贝文件 操作步骤&#xff1a;1、在A机器上&#xff0c;执行ssh-keygen -t rsa&#xff0c;一路按Enter&#xff0c;不需要输入任何内容。&#xff08;如有提示是否覆盖&#xff0c;可输入y后按回车&#xff09;2、到/…

jsp导出数据时离开页面_您应该在要离开的公司开始使用数据

jsp导出数据时离开页面If you’re new in data science, “doing data science” likely sounds like a big deal to you. You might think that you need meticulously collected data, all the tools for data science and a flawless knowledge before you can claim that y…

分步表单如何实现 html_HTML表格入门的分步指南

分步表单如何实现 htmlby Abhishek Jakhar通过阿比舍克贾卡(Abhishek Jakhar) HTML表格入门的分步指南 (A step-by-step guide to getting started with HTML tables) 总览 (Overview) The web is filled with information like football scores, cricket scores, lists of em…

laravel mysql pdo,更改Laravel中的基本PDO配置

My shared web host have some problems with query prepares and I want to enable PDOs emulated prepares, theres no option for this in the config\database.php.Is there any way I can do that in Laravel?解决方案You can add an "options" array to add o…

Java多线程-工具篇-BlockingQueue

Java多线程-工具篇-BlockingQueue 转载 http://www.cnblogs.com/jackyuj/archive/2010/11/24/1886553.html 这也是我们在多线程环境下&#xff0c;为什么需要BlockingQueue的原因。作为BlockingQueue的使用者&#xff0c;我们再也不需要关心什么时候需要阻塞线程&#xff0c;什…

leetcode 204. 计数质数

统计所有小于非负整数 n 的质数的数量。 示例 1&#xff1a; 输入&#xff1a;n 10 输出&#xff1a;4 解释&#xff1a;小于 10 的质数一共有 4 个, 它们是 2, 3, 5, 7 。 解题思路 大于等于5的质数一定和6的倍数相邻。例如5和7&#xff0c;11和13,17和19等等&#xff1b…

JAVA 网络编程小记

在进行JAVA网络编程时&#xff0c;发现写入的数据对方等200ms左右才会收到。起初认为是JAVA自已进行了 Cache。进行flush也没有效果。查看JDK代码&#xff0c;Write操作直接调用的native方法&#xff0c;说明JAVA层面并没有缓存。再看flush&#xff0c;只是一个空方法. FileOut…

vue生成静态js文件_如何立即使用Vue.js生成静态网站

vue生成静态js文件by Ondřej Polesn通过OndřejPolesn 如何立即使用Vue.js生成静态网站 (How to generate a static website with Vue.js in no time) You have decided to build a static site, but where do you start? How do you select the right tool for the job wit…

查看文件夹大小的4种方法,总有一种是你喜欢的

有必要检查文件夹的大小,以确定它们是否占用了太多的存储空间。此外,如果你通过互联网或其他存储设备传输文件夹,还需要查看文件夹大小。 幸运的是,在Windows设备上查看文件夹大小非常容易。窗口中提供了图形化和基于命令行的应用程序,为你提供了多种方法。 如何在Windo…

Python 获取服务器的CPU个数

在使用gunicorn时&#xff0c;需要设置workers&#xff0c; 例如&#xff1a; gunicorn --workers3 app:app -b 0.0.0.0:9000 其中&#xff0c;worker的数量并不是越多越好&#xff0c;推荐值是CPU的个数x21&#xff0c; CPU个数使用如下的方式获取&#xff1a; python -c impo…