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

 

视噪,又称视觉噪音。我们每天接受来自外界的大量信息,这些信息有将近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…

.netcore mysql_.netcore基于mysql的codefirst

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

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

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

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

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

Java多线程-工具篇-BlockingQueue

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

怎么连接 mysql_怎样连接连接数据库

这个博客是为了说明怎么连接数据库第一步:肯定是要下载数据库,本人用的SqlServer2008,是从别人的U盘中拷来的。第二步:数据库的登录方式设置为混合登录,步骤如下:1.打开数据库这是数据库界面,要…

webstorm环境安装配置(less+autoprefixer)

node安装: 参考地址:http://www.runoob.com/nodejs/nodejs-install-setup.html 1.下载node安装包并完成安装 2.在开始菜单打开node 3.查看是否安装完成(npm是node自带安装的) 命令:node -v npm -v less安装&#xff1a…

如何解决ajax跨域问题(转)

由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题。本篇将讲述一个小白从遇到跨域不知道是跨域问题,到知道…

判断输入的字符串是否为回文_刷题之路(九)--判断数字是否回文

Palindrome Number问题简介:判断输入数字是否是回文,不是返回0,负数返回0举例:1:输入: 121输出: true2:输入: -121输出: false解释: 回文为121-,所以负数都不符合3:输入: 10输出: false解释: 倒序为01,不符合要求解法一:这道题比较…

VirtualBox 虚拟机复制

本文简单讲两种情况下的复制方式 1 跨电脑复制 2 同一virtrul box下 虚拟机复制 ---------------------------------------------- 1 跨电脑复制 a虚拟机 是老的虚拟机 b虚拟机 是新的虚拟机 新虚拟机b 新建, 点击下一步会生成 相应的文件夹 找到老虚拟机a的 vdi 文…

mysql case快捷方法_MySQL case when使用方法实例解析

首先我们创建数据库表: CREATE TABLE t_demo (id int(32) NOT NULL,name varchar(255) DEFAULT NULL,age int(2) DEFAULT NULL,num int(3) DEFAULT NULL,PRIMARY KEY (id)) ENGINEInnoDB DEFAULT CHARSETutf8;插入数据:INSERT INTO t_demo VALUES (1, 张…

Java快速扫盲指南

文章转自:https://segmentfault.com/a/1190000004817465#articleHeader22 JDK,JRE和 JVM 的区别 JVM:java 虚拟机,负责将编译产生的字节码转换为特定机器代码,实现一次编译多处执行; JRE:java运…

mongo基本使用方法

mongo与关系型数据库的概念对比,区分大小写,_id为主键。 1.数据库操作 >show dbs #查看所有数据库 >use dbname #创建和切换数据库(如果dbname存在则切换到该数据库,不存在则创建并切换到该数据库;新创建的…

python爬虫消费者与生产者_Condition版生产者与消费者模式

概述:在人工智能来临的今天,数据显得格外重要。在互联网的浩瀚大海洋中,隐藏着无穷的数据和信息。因此学习网络爬虫是在今天立足的一项必备技能。本路线专门针对想要从事Python网络爬虫的同学而准备的,并且是严格按照企业的标准定…

【Python包】安装teradatasql提示找不到pycryptodome模块错误(pycrypto,pycryptodome和crypto加密库)...

1.问题描述 安装teradatasql时,出现错误Could not find a version that satisfies the requirement pycryptodome,具体如下: 2.解决方法 查看Python第三方库目录$PYTHON_HOME/lib/python3.6/site-packages目录下没有pycryptodome目录&#xf…

简述yolo1-yolo3_使用YOLO框架进行对象检测的综合指南-第二部分

简述yolo1-yolo3In the last part, we understood what YOLO is and how it works. In this section, let us understand how to apply it using pre-trained weights and obtaining the results. This article is greatly inspired by Andrew Ng’s Deep Learning Specializat…

java cxf 调用wcf接口_JAVA 调用 WCF 服务流程

1. 将 WCF 服务发布到 Windows 服务(或者 IIS)此步骤的目的是为 WCF 服务搭建服务器,从而使服务相关的 Web Services 可以被 JAVA 客户端程序调用,具体步骤参考如下:(1) 发布到 Windows 服务(2) 发布到 IIS注:如果是将 WCF 服务…

gcp devops_将GCP AI平台笔记本用作可重现的数据科学环境

gcp devopsBy: Edward Krueger and Douglas Franklin.作者: 爱德华克鲁格 ( Edward Krueger)和道格拉斯富兰克林 ( Douglas Franklin) 。 In this article, we will cover how to set up a cloud computing instance to run Python with or without Jupyter Notebo…

迅为工业级iMX6Q开发板全新升级兼容PLUS版本|四核商业级|工业级|双核商业级...

软硬件全面升级 1. 新增Yocto项目的支持 增加opencv等软件功能 2. 新近推出i.MX6增强版本核心板(PLUS) -性能更强 四种核心板全兼容 四核商业级2G/16G;双核商业级1G/8G ;四核工业级1G/8G ;四核增强版(PLUS) 3. 豪华配…

电力现货市场现货需求_现货与情绪:现货铜市场中的自然语言处理与情绪评分

电力现货市场现货需求Note from Towards Data Science’s editors: While we allow independent authors to publish articles in accordance with our rules and guidelines, we do not endorse each author’s contribution. You should not rely on an author’s works with…