视觉对交互的帮助——提升可用性
作者：飞飞 来源：Taobao.com UI Team 发布时间：2008-10-16 13:16:00
在整个产品设计的过程中，视觉设计与交互设计的“工序”非常紧密，两者关系也是相辅相成，互相影响。而视觉界面作为最直接与用户交流的层面，如何把交互设计以良好表现形态展现给用户，这里主要集中探讨视觉在提升交互的可用性方面的作用：
提升可浏览性
精确与高效地传递信息与任务
贴合用户的心智模型
让交互富有情感
1.提升可浏览性：
1）信息结构的良好表现
视觉设计在对交互的帮助中，首要满足对产品与交互信息结构的展现，展现信息的清晰可读性，然后才是品牌，情感的传达。视觉语言可以通过分层，分类，对比等语言手段对产品概念及信息进行处理。
例：
pic.01
pic.02
对上面两图进行对比，同样都是文章详情页面，相信没有多少用户在浏览pic01时能快速准确地知道网站想给他什么信息，或者让用户做什么。信息主次的分布，层级，色彩，均无做好有效分布，用户一边迷惑，一边迷路。而pic02对内容按主次程度来划分，最重要的文章详情信息一目了然，结构有序，条理清晰。
我们能感受到视觉语言的有效干预，能对信息结构的展现起到很大的帮助作用。
）增强信噪比
信噪比（Signal to Noise Ratio）又称为讯噪比，原义是电声学里输出信号的电压与同时输出的噪声电压的比。
一般来说，信噪比越大，说明混在信号里的噪声越小，否则相反。类比到界面设计中，有效的视觉元素就是信号，而其他干扰元素，就是噪音。
界面的噪音是由多余的干扰信息造成的，会分散用户注意力，使用户不能把注意力集中到直接表达产品功能和行为的元素上，导致给用户带来认知压力和妨碍导航的速度和精确度。不合适的字体，表义不明确的ICON，不必要的装饰等等，都是界面噪音。在视觉设计中如果保持最高的信噪比来展现信息，能增强界面的可浏览性。换句话说，如果去掉这些次要的或者干扰的设计元素，并没有使功能有所影响，那强烈建议缩小这些元素的应用比例，或者直接去掉！
例：
pic.03
图pic.03中原本需要表述的几个柱状数据信息，结果被埋藏在一堆花哨，文字信息堆杂的背景中，典型的信噪比过低。
0
投稿猜你喜欢
- 1.建表代码如下:-- Create table create table test ( dm1 char(3), dm2 char(3),
- 便携文档格式 (PDF) 是由 Adobe 开发的格式，主要用于呈现可打印的文档，其中包含有 pixel-perfect 格式，嵌入字体以及
- 前言：在fastapi中，我们定义的查询参数是可以设置成：必选参数 or 可选参数。可选查询参数只要给查询参数的默认值设置为None，表示该
- 本文实例讲述了Go语言接口用法。分享给大家供大家参考。具体分析如下：接口类型是由一组方法定义的集合。接口类型的值可以存放实现这些方法的任何值
- 最近，我喜欢上了ＸＭＬ编程，但又苦于它的美观程度又不够，找了许多书才搞定。 &n
- 本文实例讲述了Python自定义装饰器原理与用法。分享给大家供大家参考，具体如下：什么是装饰器？装饰器本质是一个函数，它可以在不改变原来的函
- 查看Django版本检查是否安装成功，可以在dos下查看Django版本。1.输入python 2.输入import django3.输入d
- 本文以修改用户名密码单元为案例，编写测试脚本。完成修改用户名密码模块单元测试。(ps.这个demo中登陆密码为“admin”)1. 打开浏览
- 在使用爬虫爬取网络数据时，如果长时间对一个网站进行抓取时可能会遇到IP被封的情况，这种情况可以使用代理更换ip来突破服务器封IP的限制。随手
- 前言大家好，我们今天来爬取c站的热搜榜，把其文章名称，链接和作者获取下来，我们保存到本地，我们通过测试，发现其实很简单，我们只要简单获取数据
代码使用说明1970-2270文件夹是保存图像和json文件（也就是需要进行转换的文件）det文件夹是保存单个json对应的txt（因为np- 本文实例介绍了asp对access数据库常见操作方法，查找记录，添加记录更新记录，删除记录等。一、查找记录find.htm<HTML&
- 这篇文章主要介绍了python3.8 微信发送服务器监控报警消息代码实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考
- python将JPG、BMP图片转化为bgrimport cv2imgpath = "./0.png"#图片路径save
- WingIDE的使用好的工具可以让你做事时，事半功倍！这一点在写代码的过程中尤为明显，使用Pyhton写程序有一年多了！各类编辑器IDE也使
- socket服务端和客户端数据传输(TCP)服务器端：import socket#创建一个socket对象socket_server = s
- <script src="jquery.min.js" type="text/javascript&qu
- 技术背景lambda表达式本身是一个非常基础的python函数语法，其基本功能跟使用def所定义的python函数是一样的，只是lambda
- Python变量与注释高级用法1.概述好的变量和注释并非为计算机而写，而是为每个阅读代码的人而写。变量与注释是表达作者思想的基础，他们对代码
- 所谓天赋（左脑和右脑）也就是你是否有艺术天赋，天赋也许是存在的，这主要在于人类左右脑的分工。左脑主要负责逻辑理解、语言、判断、分类、分析、推
