你的眼睛喜欢看什么?

标签: 产品设计 用户研究 | 发表时间:2013-08-30 08:45 | 作者:P迪
出处:http://www.alibuybuy.com

引言

每一天从我们睁眼开始,我们就开始不断地接收着这个世界传递给我们的各种信息,海量的信息不断地充斥着我们的眼球、大脑。如此庞大的信息库,我们平时都在看什么呢?不知道各位有没有这样的经历,走在大街上,你最容易被什么样的人群所吸引呢?毋庸置疑,必然是精心打扮的女生!

接下来我们来看个“栗子”,逛超市的时候,满是商品的货架上,如图

1

你会关注哪个商品呢?我相信,我们的大脑永远在选择最简单、最直接的、最特别的呈现形式的事物,因为这些信息不需要经过大脑的转换,够直观!不知道各位,小时候有没有看过寓言故事类型的连环画,那些可爱的卡通人物,场景,完全直观地活灵活现地展示了一个个场景在眼前,我们完全沉醉于其中,这都说明,人的大脑喜欢直接的信息传递。

今天的我们生存在一个大数据的时代,密密麻麻的数字,庞大的数据库,充斥了我们的大脑,请问各位还会有兴趣去挖掘这些数据里潜在的秘密吗?我猜应该没有吧!大家的时间太宝贵了,于是有了数据可视化,数据可视化的使命跟职责就是让我们能从可视化的图标里看到数据的关系,本质,趋势。

数据可视化就是通过可视化手段将枯燥的数据图形化,直观化展示给用户。

明白了数据可视化的使命,让我们来看看当前业界的可视化平台都是如何树立自己品牌形象且抓住用户去使用这个平台的呢?

1.“数据可视化”交互布局

  • 首页——上下结构布局

26

通过目前线上比较知名的国内外数据分析平台首页设计,不难发现,其首页的架构分为上下布局,更多的是通过Banner图来展示自己的特性,其次再通过一个个案例来进行事例说明,或者摆出各种合作伙伴Logo来提升自我品牌形象。首页的轮播Banner图通常起到的作用是介绍该平台的数据分析的特点,通常通过这几个方面来展示Banner图,数据的呈现的速度、数据容量、用户体验、服务品质、分析的维度、多种自定义设置配置——人性化设置,其次首页也不可缺少的就是“新手指引”。

3

4

5

 

  • 内页——结构布局

根据多个案例分析,视觉可视化的交互基本分为两类:

下图属于信息层级关系很明确,不是直观展示数据,缺点:数据隐藏很深,很难让用户产生兴趣继续查看;优点:可承载数据量大。
27

下图属于信息扁平化呈现,数据展示直观,缺点:承载数据量少;优点:数据展示直观,用户容易在查看的过程中挖掘自己的兴趣点。
25

2.“数据可视化”设计元素

认知心理学和图形设计

信息可视化的两大基础是认知心理学和图形设计,认知心理学是理论基础,图形设计是实践操作。可视化不仅仅是视觉上的,该领域的研究人员也尝试着将听觉、嗅觉和触觉融合进去(比如针对残障人士的设计)。在《信息可视化的基本过程和与主要研究领域》一文中,作者将视觉上的可视化变量分为 7 种:位置、形状、大小、方向、色彩、纹理、灰度,有时候也会将色彩分为色相、亮度和饱和度。基本上所有的信息可视化应用都是一个或多个变量的组合。不同的视觉变量在呈现数据各有优劣(从认知角度),如下表所示:

——文案内容摘自百度百科知道

24

  • 数据可视化——呈现形式

通常目前数据可视化的表现形式,我们最熟悉的有饼图、直方图、散点图、柱状图,而这些都是最原始的统计图表。

饼状图
用圆内各个扇形的大小表示各部分量占总量的百分之几
6

直方图
将一个变量的不同等级的相对频数用矩形块标绘的图表(每一矩形的面积对应于频数)
7

柱状图
是一种以长方形的长度为变量的表达图形的统计报告图,由一系列高度不等的纵向条纹表示数据分布的情况,用来比较两个或以上的价值(不同时间或者不同条件),只有一个变量,通常利用于较小的数据集分析
8

散点图
用两组数据构成多个坐标点,考察坐标点的分布,判断两变量之间是否存在某种关联或总结坐标点的分布模式
9

 

  • 数据可视化——呈现方法

a. 将指标值图形化
一个指标就是一个数据,将数据的大小以图形的方式呈现。比如用柱状图的长度或高度表现数据大小。
10

b. 将指标图形化
一般用与指标含义相近的ICON来表现
11

c. 将指标关系图形化
当存在多个指标时,挖掘指标之间的关系,并将其图形化表达,可提升图表的可视化深度。

借助已有的场景来表现
联想自然界或者社会现象里有无与指标关系类似的,然后借助此场景来表现数据。比如下图,是统计全球使用操作系统分布图,首先分为windows、mac还有其他操作系统,windows又包含XP、2003等多种子系统。
12

构建场景来表现
指标之间往往具有一些关联特征,如从简单到复杂,从低级到高级,从前到后等,如无法找到相对应的场景,也可以自己构建。支付宝新出的个人年度账单中,在描述付款最多的三项时,构建了一个领奖台的形式:
13

d. 将时间和空间可视化
时间:通过时间的维度来查看指标值的变化情况,一般通过增加时间轴的形式,地图作为主要背景呈现所有信息点
空间:当图表存在地域信息并且需要突出的表现的时候,可用地图将空间可视化,地图作为主背景呈现所有信息点
28

e. 将数据进行概念转换
所谓的数据概念转换,即我们生活中喝水的时候通常只会说喝一杯水,但不会说喝30ML的水,一个确实的数据展示,我们是难以感知的,但是用一个杯子来概念转换,我们很容易感知到其大小。

如果只看左半部分中国烟民的数量:32000000,知道数据量级很大,但具体有多大却很难感知;直到看到右半部分:中国烟民数量超过了美国人口总和,这样一对比,对数据的感知就加深了。
27-(2)

f. 让“图表”动起来
数据图形化完成后,可结合实际情况,将其变为动态化和可操控性的图表,用户在操控过程中能更好地感知数据的变化过程,提升体验。实现动态化通常以下两种方式: 交互和动画。

小结:

数据可视化的可以分为以下几个步骤:
16

  • 数据可视化——视觉元素分析

接下来我们来看看目前线上的数据可视化平台视觉设计:
17 18 19 20

通过这些案例,我们会发现设计上都有普遍的共性:

a. 在颜色的使用上都偏暖色系;
b. 颜色的数量上不超过5种;
c. 颜色使用上基本保持识别度高的色彩,如红、绿、蓝、黑、灰;
d. 背景色使用上以白,灰为主;
e. 字体的使用上只使用一种字体

推荐

“数据可视化”信息图制作工具

在茫茫的文字海洋里解读你的疑问,已经是过时的形式了,并且也是低效率的工作方式了。上篇大篇幅的介绍了数据可视化平台的设计展示形式,其目的与意义都是为了给用户带来方便,让大量的数据信息直观地展示给用户,为用户提供更易解读,更有乐趣,更加美观,快捷的获取信息的方式。但是可视化的图形制作却也大大地为难了设计师,这里为广大苦恼的感性的悲催的视觉设计师们提供一些小工具——轻松制作超赞的信息图形。

infogr.am
Infogr.am仍然是面向非设计师的信息图形设计工具。它允许用户将数据传到网站上并将其解读成图表模式,允许用户自定义图形,并提供更多智能化界面展示信息。
29

StatSilk
StatSilk有网页版和桌面客户端,为用户提供了具有更强交互性的,自定义极高的和栩栩如生的图形、图标、地图和其他可视化数据制作精美的信息图形。
30

看到这里是不是挑起了你的兴趣了呢?

当然,还有众多的在线制作信息图的网站等着你去尝试:
1. Stat Planet:能让你做出很炫的互动信息图,成品可以输出成互动型或者静态图片。缺点是只能用网站本身提供一些调研数据,制作成自己的图表。
2. Hohli:简单易用,设计很人性化。你可以简单的选择图表类型,添加数据,调整尺寸,颜色,预览成品。用它做出来的图表漂亮,精致。
3. Many Eyes:这里提供的图表/形很精美,看起来很专业。
4. Wordle:能把纯文本通过特别的排列做成图形,你可以导入整本书,一个小段落等等。
5. Tableau:用于Windows平台的免费制作图表软件。它做出来的图表色彩鲜艳,很独特。
6. GapMinder:Adobe公司出品的制作图表的软件,并且提供很多行业的数据,如美国农业,美国城市发展数据等。

感谢你的阅读,本文由  腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作。
注明出处格式:腾讯ISUX ( http://isux.tencent.com/date-visualisation.html)

 


© 推荐 for 互联网的那点事. | 猛击下载: iPhone客户端 猛击下载: Android客户端

相关 [眼睛] 推荐:

眼睛护士

- 文曲星下凡 - CnGtdⅠ时间管理、个人提升、沟通
主页:http://EyeFoo.Com. 论坛:http://bbs.EyeFoo.com. 联系:About@EyeFoo.com. 眼睛护士EyeFoo是一款具有健康理念的绿色软件,随着网络的普及,人们每天面对电脑屏幕的时间越来越久,长时间的电脑辐射与刺激难免会对眼睛产生不良后果,经常使用计算机的您是不是有眼睛干燥,疲劳不适的情况呢?眼睛护士是一个可以定时提醒你休息,保护眼睛和健康的软件.

3D内容伤害眼睛

- 瑾 - Solidot
淘宝:诚品数码 写道 "加州大学伯克利分校一研究小组,通过对24名志愿者的试验后得出结论,观看立体三维显示的内容会伤害你的眼睛和你的大脑. 这种现象称为 “vergence-accomodation,”3D技术内容可以引起视觉不适,疲劳,头痛等一系列反应;这意味着,眼睛必须不断地调整距离的物理屏幕和"3D内容.

3D 电影损伤大脑和眼睛

- Sam Shizun GE - 煎蛋
通过24个自愿者的亲身体验,美国加州大学柏克莱分校发现,3D 电影不仅对眼睛甚至对大脑也有损伤. 这种现象在专业术语叫做“vergence-accomodation”,这会让眼睛不断的调整屏幕与人体的距离,造成视觉疲劳、身体不适、和头疼. Banks 总结起来一句话:3D 电影造成了我们眼睛紊乱,分不清人体与电影荧幕的真实距离.

闭上眼睛看到的是什么?

- 风行水上 - 果壳网 guokr.com - 果壳网
闭上眼睛后“看”到的东西,可能属于以下几种情况的一种或几种:. 1,当我们处于明亮环境下的时候,即使闭上眼睛,也可能会有一些光线透过眼皮射入眼中. 这是因为人的皮肤具有一定的透光性. 一些同学小时候可能会有这样的经历:把手蒙在手电筒前面,电筒的光会透过手掌射出来,整只手掌被映成红色. 和厚厚的手掌相比,薄薄的眼皮更不可能阻挡全部的光线.

看到眼睛,变得道德

- willstyle - 煎蛋
我们都知道,人们在公共场合,或者是意识到有人旁观时,会变得更加自觉、约束自己的行为,这种效应发挥到极致,就是一个“被监控的社会”,墙壁上到处贴着“老大哥在看着你”的标语. 不过,最近的一项研究指出,甚至根本不需要让人察觉到“有人”,只需要一张人眼的配图,就能在潜意识中影响他们的道德判断能力. 这项研究由悉尼大学的Pierrick Bourrat、宾夕法尼亚大学的Nicolas Baumard和伦敦大学的Ryan McKay主导进行,他们在巴黎第六大学的Jussieu校区向学生发放问卷,问卷上描述了“捡到钱包自己把钱拿走”和“简历作假”两种不道德行为并要求答卷者做出评价.

漫画中眼睛的100种画法

- Hermes - 无聊哦
漫画中眼睛的100种画法,喜欢画画的同学一定不能错过哦,非常不错的画法,跟着视频学几招吧 ^_^ ~. 查看原文  |  发表评论(7). © 疾风 for 无聊哦 | 原文链接 | 搞笑哦 | 淘宝网上卖疯了的东东. 订阅 无聊哦 http://feed.wuliaoo.com. 订阅 搞笑哦 http://feed.gaoxiaoo.com.

保护眼睛的十种方法

- - 译言-医疗与健康
在美国,每个9月份都是“家庭·运动与眼睛安全”的宣传月,因为眼部损伤的案例多与运动相关. 宣传月综合眼睛保护、培养家庭安全意识,即把家庭建造成一个令成长中的孩子感到安全的地方,要保证给他们一个更良好的居家环境,而不是一个事故多发地. 以后,也还会有天生视力缺陷的婴儿或者天生盲童等无法控制的案例出现.

保护眼睛有两个“黄金期”

- - 24小时健康加油站
   许多学生年龄不大,“镜龄”却不小. 解放军第254医院眼科专家认为,孩子眼睛发育有两个“黄金期”,如果在此时期不能科学地保护眼睛,使眼睛受累,会导致视力过早变异.   专家说,眼睛有两个重要的快速发展阶段. 第一阶段是3-4岁左右,第二阶段是青春期,大约在12-15岁. 成人视力的好坏,与这两个“黄金期”有密切关系.

你的眼睛喜欢看什么?

- - 互联网的那点事
每一天从我们睁眼开始,我们就开始不断地接收着这个世界传递给我们的各种信息,海量的信息不断地充斥着我们的眼球、大脑. 如此庞大的信息库,我们平时都在看什么呢. 不知道各位有没有这样的经历,走在大街上,你最容易被什么样的人群所吸引呢. 毋庸置疑,必然是精心打扮的女生. 接下来我们来看个“栗子”,逛超市的时候,满是商品的货架上,如图.

MUJI新良品,Ojokeesu行李大眼睛贴纸面市

- Annie - 理想生活实验室
说起 MUJI 无印良品,大家心里的味道不是恬淡就是安静,不过其实,这家以“无品牌好品质”为奋斗理想的日本品牌最近推出的 Ojokeesu 行李箱贴纸,可能就会让你有很多不同的感觉. 这款用于贴在行李上方便主人辨识的贴纸,采用了拟人化的设计,贴上后不由地感觉:原来我家的箱子也想和我交流一下嘛. Ojokeesu 系列行李箱贴纸一共有四个角色:Minako、Takeshi、Kokoro 和 Aiko,一共 2000 套限量.