Archived entries for 翻译

原文Data Visualization: Modern Approaches

作者 Cameron Chapman 译者:西乔 黄色/小粗体字体部分为译注

数据的表现形式可以是美丽、优雅和描述性的。有多种传统的数据表现形式 在每个项目及可能的场合被频繁地使用:如表格、饼图、柱状图等。但为了更有效地向你的读者传达信息,有时你需要绝不仅仅是一张饼图。有更好的、深刻的、富于创造性以及富有趣味的方法来可视化数据。它们中的许多将在未来数年内变得应用普遍。

我们期待的是什么?有哪些些革新性的想法已经在成熟使用?还有哪些创意地表现数据的方式是我们从未想过的?

让我们看看最有趣和最现代的数据可视化方法,以及一些相关文章、资源和工具。

1. Mindmaps 概念图

Trendmap 2007 (趋势地图 2007)

Informationarchitects.jp 依据分类、相似性、成功度、知名度和前景,为当年互联网上最成功的200个网站制作了一张趋势地图。这些网站以前显然从未以这种方式建立过联系。相当详尽。

译注:(这是一个著名的数据可视化创意,作者通过改造东京地铁地图,将站点设计成地铁站,每种网站应用类型是一条地铁线。比如粉红色代表分享类网站,紫红色代表工具类,大红色代表技术网站,柠檬黄色代表知识类网站……
当然如果你对东京的城市地理状况有所了解,看这张地图时会露出更多会心的微笑。设计师在图中安排了大量暗喻和巧合,
比如google从涩谷移到了新宿的位置,而Youtube已经控制了涩谷地区。涩谷在通常理解中,代表年轻人出没的喧嚷的地方。而新宿代表黑社 会控制,很酷的地方。微软移到了池袋,雅虎移到了上野,维基百科在新桥(一个遍布头脑清醒上班族的地方)。日本的网站主要集中在金融路线附近,北部的站点线(山口线)上的项目多数比较“无聊”。等等)

Web Trends 2007


2. Displaying News 新闻展示

Newsmap(新闻地图)是google新闻聚合器上实时的新闻反馈的可视化呈现。数据块的大小对应了新闻受欢迎的程度。

译注:(Newsmap反映的是google新闻聚合器实时更新的新闻。这种数据可视图基于treemap树状图的算法,适合表现大量信息的聚合。
用颜色、颜色深度、标题字号、区块面积来展现归并后的信息。打破空间限制,帮助用户快速识别、分类和认知新闻信息、平面而直观地展现不断变化的信息片段。)

Newsmap

Voyage是一个rss阅读器。它在屏幕中心呈现最新更新的新闻。新闻可以缩放和退出,有一条基于时间轴的导航。

译注:(Voyage根据当前时间点形成一条坐标轴,使用了三维效果来分层次展现当前的资讯和新闻点,将信息的时间要素呈现地非常生动。可通过rss地址控制订制信息来源。)

Voyage

Digg BigSpy 将最受欢迎的文章放在顶部,字号越大代表支持者越多。

译注:(digglab使用5种动态的数据可视化方式来表现信息的数据变化状态。
Digg BigSpy是试验项目其中之一,最新被digg的新闻会向下滚动更新屏幕,digg数越高,标题字体越大。在版面中使用字号变化是传统媒体的表现手段,在这里和实时滚动的效果结合,很有冲击力。)

Digg Big Spy

Digg Stack: 根据用户的digg数将文章排列成许多柱状条,digg数越高,柱型越高。

译注:(Digg Stack同 样也是digg lab的实验性项目之一,将最新/最热/全部的100条digg文章排列成一行柱状图,水平线上的柱形高度代表digg数,水平线下的柱形高度代表评论 数。
某篇文章digg数实时增加时,会从屏幕上方掉一个小方块下来,俄罗斯方块那样,溶进该新闻对应的柱形中。点击单个柱体可以分别查看每个时间区间内的 digg指数。这是一个非常有实时感和动感的视觉系统,极好地呈现了数据生成的实时性和聚合性。)

Stack

3. Displaying Data 数据展示

Amaztype 图书搜索:根据从亚马逊上采集的数据,将图书的搜索结果根据你所提供的关键字的字母形状进行排列。可以点击单本书查看详细信息。

Amaztype

Flickrtime 也应用了相似的创意。这个工具利用Flickr API 将上传的图片根据当前时间排列成时钟数字的形状。

Flickrtimec

Time Magazine(时代周刊)使用峰值形状的分布来强调地图上美国人口的稠密程度。

Where we live

CrazyEgg 使用热图来让您研究您的访客的新闻,通常被点击更多,更受欢迎的区域,使用的更“温暖”的红色来高亮显示。

译注:(CrazyEgg允许注册用户通过提交页面url,显示页面的热点图、获取每个元素的详情、查看原始数据的完整摘要信息。热图是用户行为分析的常见方法,这是一个著名的UE研究分析工具,给UE分析师提供观察用户行为,做出设计改进意见的数据基础。)

CrazyEgg

Hans Rosling TED Talk (汉斯。罗斯林的TED演讲)瑞典著名教授Hans Rosling发表了一次传统期的演讲,解释了他提出的表现统计数据的新方法。他的趋势分析软件(刚刚被google收购)将复杂的全球趋势、十几年的流行数据转化为生动的动画。用网格上的多彩的泡泡代表亚洲的各个国家,展现全民医疗和财富的状况。用动态的钟型曲线表现国民收入分配的涨伏。在 Rosling的手里,全球趋势——预期寿命、儿童死亡率、贫困率——都变得清晰、直观和有趣。

Hans Rosling

三视图展示了地球的3个视点: 每个国家使用一个圆形代表,用圆圈的大小来代表军费开支额度,颜色的深度来代表占财政收入的比例,数据的演示非常紧凑和美观。

Three Views

We Feel Fine(我们感觉很好)根据来自大量blog的统计结果,表现了人类的感情。

译注:(这是一个骇人的项目。。从2005年8月,该项目组从大量页面上记录人类的感情。每个几分钟,系统就会搜索世界上新近发布的blog里包含“我觉得”或“我的感觉”这类短语的文章,记录包含这些短语的句子,并计算出里面c所包含的情绪,是悲伤、快乐、沮丧。这些信息和作者的社会结构、年龄、性别、地理位置以及当时当地的天气一起被保留下来。
这个包含了数百万人感情的数据库,每天新增15000~2000条记录,并提供了一系列有趣的接口用于查询和做数据挖掘。
上图中的粒子系统是通过接口生成的可视化形式之一,抽取了1500条数据,每条数据是一个粒子,代表每个人的一种情绪。颜色对应情绪类型,比如幸福是亮黄色,悲伤是深蓝色,愤怒是红色,平静的感情是浅绿色。每个粒子的大小和表达情绪的语句的长度关联。)
We Feel Fine

Visualizing the Power Struggle in Wikipedia(维基百科上:可视化的争议)在热力地图上展示了最受欢迎的文章和被搜索最频繁的请求。

译注:(疑原文有误。heatmap:热力型地图,做用户体验分析的同学可能比较熟悉,是一种使用冷暖色来映射二维变量,以便于做出聚类分析的图像,擅长用于体现频率、密度等。
译注:但是下面这两张信息图形使用的是气泡型地图。反映的是wiki百科中争议性词条的修订次数。圆圈越大,修订次数越多。排名前几位的是:耶稣、阿道夫希特勒、2003年10月、任天堂革命、卡特里娜飓风……)

Wikipedia

Wikipedia

Websites as graphs 图表网站。一个HTML DOM的可视化应用程序,根据url、表格、div标签、图片、表单和其他标签,将网站可视化为信息图形。

译注:(这是一个分析页面源码的项目,使用树状分支图。其中蓝色代表<a>,红色代表<table>类标签,绿色代表<div>,紫色代表<img>黄色代表数据集群(下拉菜单)…………。于是每个网站页面的特性就以这样一种奇特的图像方式呈现出来了,从不同的结果图像中可以看出每个网站的不同性格,比如门户网站会生成非常庞大的树状图;某些blog,主要是链接,会形成放射型图像。苹果网站生成的图形就很简洁和规整。google.com就更不用说了,自由非常少的几簇。猜猜上面的图代表的是哪个网站?
译注:yahoo.com。你可以发现它的图里面没什么绿色,但有许多红色。。因为他们没有使用div布局,这在07年也是很罕见的了。)

Websites as graphs

Interactive History Timeline (互动历史年表)将英国的历史划分为可交互的块状数据,同时呈现了历史时间的密度。

译注:(这个系统里每个颜色块代表一段历史时期,白点代表该时期中的历史大事件。每个色块可放大点击,背景图上有该历史时期的标志性图像,可点击每个白点查看事件信息。是一个不错的历史演示系统,设计雅致,操作感很强,形式和内容很匹配。)

Timeline

Winning Lotto Numbers (乐透大奖号码)该图展示了每年的中奖号码中每个数字的出现频率。当然这张图并不算是一个很清晰的案例。

译注:(这张图描绘了乐透奖号码在88~06年里出现的频率。每种颜色代表一个球,编号从1~49。作者认为所有的数字集群倾向于形成一个循环,会有12.24%的重复率。。。)

Lotto

Elastic Lists (滑动菜单)使用滑动菜单(也叫手风琴菜单)的原理来展现多维的数据结构。每组菜单代表一种数据维度,每个菜单项代表一种属性。你可以通过点选多个菜单项,浏览数据在不同维度不同属性上的组合。每个菜单项的高度和宽度和该属性内数据总量的相对比例有关联。作者的blog 会更新一些关于数据可视化领域的实验性研究的文章,值得观赏,很有收藏价值。

译注:(这个项目对于实现多维交叉的数据的平面化展现,是一个很好的范例。每个菜单实际上充当了一个过滤器,把他们想象成一组多选菜单就好了。但是形式比乏味的多选框要迷人多了。)

Elastic Lists

The JFK Assassination Timeline(肯尼迪遇刺事件的时间轴)使用ajax来可视化表现历史事件:约翰.肯尼迪的遇刺和时间轴上众多关联性条件。更新的案例相关文章

4. Displaying connections 显示关联

Munterbund 使用信息图形展现了书中文字的相似性。“我们尝试创造一个能够按照某些定义好的规则来自动生成图像的系统。难度在于图像形式和文章的排版样式 这两者都是极富吸引力和信息量的。”

译注:(这个项目根据词频等信息要素关联到扇形区域的直径和弧度,以及控制气泡的面积。有一套非常复杂的筛选算法。在可以看到项目组尝试过的多种可视化算法,以及一批十分魅力的成品)

Text similarities

Text similarities

Text similarities

Burst Labs(突发实验室)使用泡泡图来表现你提出的搜索请求之间的相似和关联性。虽然不那么前卫但还是令人振奋

Burst Labs

Universe DayLife 将某一话题关联的事件、人物和新闻事件像星座那样陈列在它的周围。

译注:(这也算一个令人惊异的项目,创作团队模拟了一个数字化星空,每个关键字都是一个星座。通过输入关键字将你请求查询的星座定位在屏幕中心,旁边围绕着相关的关键字星座。内容包括图片、新闻、人物。每时每刻地球上都会发生各种事件,事件之间有关联,会互相作用。从这点上,使用宇宙星系来表现新闻事件的特效是很适合的。这个项目除了极富想象力,界面上也极具特色。创作了一种星座字体,所有的ICON和边框都用星座的形象来表现。)

Universe

Musiclens 会根据你当前的心情和音乐喜好制作图表,给你推荐音乐。

Musiclens

你可以在Figd’t Visualizer(Figd’t展台)上和网络上的其它用户进行互动。你的用户界面是由Flickr和LastFM上的TAG构成的,使用任何Tag都可以创建一个磁极,在照片或音乐中和你共用这个tag的用户会被吸引到磁极的周围。兼容Mac OS X,Windows和Linux平台。测试版本。

译注:(通过照片和音乐喜好,创作者希望动态、可视化地表现人与人之间的关系:倾向性,趋势,聚合,吸引力。除了直线条的连接线,作者还在另一张图中使用了优美的曲线,整体造型非常迷人。)

Fidgt

What have I been listening to?:(究竟我在听什么?)拜伦.李通过创建直方图描述了他的音乐之旅。

译注:(每种颜色代表一个歌手,拜伦.李搜集了他在last.fm上18个月来的听歌记录。创作者选用这种可视化形式原因是它的失真最少,能生成高雅的非对称曲线。这种的图表形式被称为Stream Graph流图。)

Last.FM

Shape Of Song(音乐的形状)音乐看起来像什么?音乐的形状是一个看起来很怪诞的命题。这款定制软件使用半透明的拱形来描述了音乐的形状,让人们能看到存在于互联网上的任意音乐的真实形状。

译注:(该项目用这种图像可视化了许多音乐类型和乐曲,直观地将节奏、韵律和起伏展现出来。每种音乐风格的个性与差异在这里表现地很明显。这类数据可视化方式真正实现了“通感”。)

Shape Of Song

Musicmap(音乐地图):他们创建了一个页面,通过连接线表现音乐之间的关联。

Musicmap

Musicovery 展现了不同音乐喜好之间的关联性,让你在听一首音乐的时候发现相似风格的歌曲。

译注和潘多拉或last.fm一样推荐试听网站,会根据你的喜好选择,为你推荐音乐。同时可视化音乐之间的关系。)

Musicovery

Lanuage Poster (语言海报)使用传统的时间轴方式来表现程序语言的发展史,简单的线条也能用于表现复杂的状况。

译注O’REILLY出版社制作的海报,每根箭头线代表一种语言的发展历程,同时反映了语言之间的继承或分支关系。)

History of Programming Languages

5. Displaying web-sites 可看的网站

Spacetime (时空)公司承诺,那些通过网页的小缩略图像挖矿一样查找信息的时代一去不返了。它提供的服务易读和优雅的三维特效来呈现你的搜索请求结果,支持google 、yahoo、Flickr 、eBay 、google图片搜索。

Spacetime

UBrowser 是一个使用开源的概念模型。Mozilla的渲染引擎Gecko的植入实例:使用OpenGL在几何面上动态渲染页面,。

UBrowser

6. Articles & Resources 文章和资源

该项目介绍了数据可视化最美丽的方法和进一步的参考资料。拥有超过450辑的图片。在他的文章《Infosthetics: 数据可视化之美》中,Andrew Vande Moere通过他的知名blog《Infosthetics》探讨了数据可视化的审美及领域中的前沿应用。创意设计意图的组合形式、内涵以及迷人的案例。这是下一代的新艺术领域?

Infosthetics

Infosthetics

Infosthetics

这篇文章介绍了13种新的数据可视化技术的实例以及深入的参考。

  • 16 Awesome Data Visualization Tools16种令人敬畏的数据可视化工具 。Mashable.com概述了:“我们找到了下面16个观赏和实用性兼具的应用。数字可视化工具改变了我们观察事物的途径:观察twitter信息来源在全球的分布的全新方法。 ”

7. Tools and Services 工具和服务

  • 你可以使用 XtimelineCircavie创建你自己的时间线
  • IBM Many Eyes(IBM之眼)
  • 这是一个基于JAVA的可视化数据在线服务。帮助注册用户创建饼图、框图、树型图、柱状图和直方图。这有一些比较惊人的案例。

  • Screenshot

原文Data Visualization and Infographics

作者 Cameron Chapman 译者:西乔 黄色或小粗体字体部分为译注

数据可视化和信息可视化的主要目的是借助图形化手段,更高效和清晰地交流信息。但这并不意味着数据图表会因实用而枯燥,因华美而繁复。为了让思想能有效地传递,良好的外观和内在功能性都缺一不可。虽然设计师们还是不能很好地把握设计与功能之间的平衡,而创造出华而不实的数据可视化形式,无法实现其传播信息的主要目的。

在印刷品和web上,被可视化的信息、数据或知识——数据图表,经常用于依靠设计师的创造力,在刺激和感性的背景下支持和强化信息,

下列的网站列举了一些令人瞩目的的数据图表, 它们以极富视觉吸引力的方式有效地表现了信息。

Country Codes of the World(国家代码世界)

国家代码世界地图映射了245个国家顶级域名代码,包括所有国家、联合国、众多岛屿及地区。每个两位代码对应到所指国家的地理位置及区域,并使用了便于快速检索的分色图例。

Infographics Screenshot

Flags as Infographics(国旗图表)

这些招贴是为著名的政治杂志“Reportagem”所设计的,主要设计思想是通过添加图例把每个国家的国旗变成了一张图表。比如:美国。红色部分:支持伊拉克战争。白色部分:反对伊拉克战争。蓝色部分:不知道伊拉克在哪。

Infographics Screenshot

Infographics Screenshot

Independent: Infographic (独立:信息图形)

中东:谁支持立即停火? 下列这张图表在2007七月的中东危机问题时期发表于“独立”杂志头版。

Infographics Screenshot

Virtual countries(虚拟国度)

这个看台以国家和巨头公司的“国民”生产总值为依据,列出世界上这些“虚拟国度”的排名。

Infographics Screenshot

Infographics Screenshot

Net Neutrality(网络中立)

这张图表期望于强调网络中立的重要性。这并不是一张真正意义上的数据图表,但传递了这些信息:这些就是我们可能遭遇的未来。

译注:(这是07年的图,由此可见,对互联网发表预测是一件多哇哈哈哈哈的事。)

Infographics Screenshot

Corporate connections:(企业关系)

一个非常紧凑和实用的信息来源

译注:3个名人,35个企业,40多家子公司和300多个品牌的之间的千丝万缕。

Infographics Screenshot

DIZZIA, Gregory M.

这张图表里描述了Gregory Dizzia所泡过的所有MM及其关系。时间轴持续23年。

译注:(有兴趣的同学可以下载这张图看一下.pdf。作者真的很猛。垂直的是时间轴,每一列代表一个MM,长度代表交往时间。每个图表表示事件或特性。绿色图标代表认识的途径:聚会、网络等。蓝色图标MM吸引他的地方:身材、头脑等。黄色图表代表关系深入度:kiss或者XXOO。橙色代表重大事件:订婚、心碎、来路不明的孩子……。红色代表分手的导火线。每一列底部的蓝色从浅到深代表了关系亲密程度。)

Infographics Screenshot

Amadana Infographics

Amadana是一家日本公司,这可以解释为什么他们会分不清scapegoat替罪羊和acuarium水族缸(见第一行的第二个图示)。第一行的电器是土司机,第二和第三行是空气净化器,最后一行的是电磁炉。

Infographics Screenshot

The Japanese Wii Safety Manual(日本WII游戏机的安全指南)

这份日本WII游戏机的安全指南,基本上能解释日本人普遍的精神错乱。

译注:(作者貌似不太喜欢日本人。。。不过点击下图有更多变态的安全指南图片供君欣赏)

Infographics Screenshot

Virtual Water虚拟水

简洁、优雅、有效。这份双面印刷海报表现了产品和国家中水的使用足迹。

译注:(点击图片可以查看这项环保海报的更多信息,设计非常专业。海报有两面,一面是重要国家地区中虚拟水的进出口统计,另一面是一些商品和食品在生产链各个步骤中使用的淡水量总和的统计。)

Infographics Screenshot

Apple’s Tipping Point: Macs For The Masses(苹果的引爆点:大众的苹果)

设计很淡定,配色柔和,背景鲜明。设计者是 Paul Nixon

Infographics Screenshot

AT&T/Bell System Pre- & Post-Divestiture Chart (AT&T/贝尔系统前后分离图)

Peter Ross.1985年创作。

Infographics Screenshot

Flickr User Model(Flickr的用户模型)

一个数据有点复杂的信息图形,但仍然保持了清晰和良好的展示性。

Infographics Screenshot

Journey into the Universe (宇宙之旅)

信息设计, 创作于1985.

Infographics Screenshot

Megan Jaegerman(人名)

Megan Jaegerman和 Edward Tufte一起工作时的一些回顾。留意这些图表中所体现出的简洁之美和高度的可读性。

译注:(她的网站里有不少非常优秀的插图,值得点击一看
Edward Tufte :信息设计的先驱者。耶鲁大学统计学和政治学的退休教授。奠定了视觉化定量信息的基础。出版了包括“视觉解释”,“构想信息”,“定量信息的视觉展示”,和“数据分析的政治和政策”,“美丽的证据”在内的一系列书籍,最新的“美丽的证据”获商业周刊2006年最革新的设计书籍赞誉。wiki上的链接

Infographics Screenshot

Infographics Screenshot

Good Magazine Infographics(好杂志中的信息图形)

在Good magazine的每一个议题里,都会提供杰出的,关系到我们生活方方面面的信息图形。下面有一些优秀的范例。

译注:告诉我更多:那里即将发生什么?(关于达富尔的社会政治现状)

译注:女性的力量。女性在世界人口中的50%,政治领袖中女性却只占5%。

Infographics Screenshot

译注:冷酷的时间:自从美国在1976年恢复死刑,有118名死囚被证明无罪。 这118人共被监禁1125年。图像的力量啊

Infographics Screenshot

译注:零售业房地产:世界上最大的零售商的占地总面积比曼哈顿还大。

Infographics Screenshot

译注:美国膨胀的学生债务。达到4920亿。

Infographics Screenshot

Who Participates and what people are doing online(人们在互联网上做什么)

一个比较别出心裁的表现形式会赋予图表独特性和吸引力。。

译注:各个年龄段和性别的人在不同类型的在线应用上花费的时间

Infographics Screenshot

The Cost of Living on the Bleeding Edge of Gadgetry(电子产品深度患者的开销)

价格和便携式电子产品在过去50年的价格和市场占有率。由Arno Ghelfi设计。从一个完全不同的视角表现。

译注:每种颜色代表一种电子产品类型。柱状图的高度代表价格。宽度代表市场占有率。

Infographics Screenshot

A year in Iraq(在伊拉克的一年)

一份不同寻常的数据图表,展现了2592起记录在案的致死原因的类型和分布地点。

Infographics Screenshot

Cubism and Abstract Art(立体主义和抽象艺术)

简洁、丰富和优雅。Alfred Barr的设计,在Edward Tufte的书里可以找到。

译注:连接线和因果箭头 巴尔艺术图 费曼图 进化树状图 隆巴迪

Infographics Screenshot

MyMap(我的地图)

一个数据可视化的应用程序:基于60000封电子邮件存档数据,用不同颜色深度的线条呈现了地址簿中用户和个体之间的关系,比如回复、发送、抄送。“My Map”允许在不同的关系组和时间段里挖掘信息,体现不同关系中短暂衰退和流向。“My Map”从而成为名副其实的自画像、个人关系及社交的可视化反映。

译注:外围的每个圈代表一个人,他们之间的线条代表联系,越高亮的颜色代表交流的频率越高。

Screenshot

When Bots Attack(机器人来袭)

借助僵尸网络,你可以针对某个目标启动几十万甚至上百位次轰炸。在这种假设的情况下,由中国发起的针对美国的单个攻击可能只持续几个小时,但持续数天或数周的全面攻击会导致整个现代信息经济的瘫痪。下图用于说明这件事。

译注:绿色点:攻击。蓝色点:黑客。白色点:肉鸡。红色点:目标。
美国拟提高中国进口商品关税的条款引发了危机。北京下令对美国国会的计算机系统和支持该法案的公司进行限制性攻击。中国的安全部门官员雇用非法的 黑客联盟发动ddos攻击。通过像PayPal这样的匿名服务(通常使用在拉美地区的帐户)支付报酬。目标IP地址和邮件帐户(在更早就完成了搜集工作) 通过非法黑客的私人聊天室进行分发。一旦攻击进行,中国的媒体和外交部门将此次攻击描述为是黑客们的自发行为。

Infographics Screenshot

Mapping the Blogosphere (博客世界的映射)

这就是博客世界看起来的样子。。。

Infographics Screenshot

Globalization(全球化)

怎样的全球化?

译注:(每种颜色的扇形区域代表一个洲的国家。中间的连线描述了这些国家之间的贸易经济往来)

Infographics Screenshot

George W. Bush Speech Infographics (乔治.布什的演讲)

一种交互式的信息图形,比较了不同演讲中某些词汇出现的频率。这种设计方式能提供读者用更多方式去评估和理解特定的词汇或数据元。很简单,但直观明了。

译注:黑体字是特定词汇。蓝色圆圈的体积和里面的数字代表该词的出现频率。

Infographics Screenshot

BookScapeQuery Bursts是Yahoo!创新团队yHaus的实验性项目。 Query Bursts 描绘了来自独立IP的一次很常见的搜索请求的爆发状况。每个微粒代表一次从世界不同角落里发出的请求。BookSscape 表现的开发图书馆工程中的少儿图书里采集到出的25万张插图。实验性的精美实用动态图片数据采样技术在可缩放的空间里放置所有图片。

Infographics Screenshot

原文Data Visualization and Infographics Resources

作者 Cameron Chapman 译者:西乔

数据可视化及信息可视化可以让复杂的数据集变得明了易懂。通过将数据和统计结果图形化,复杂的概念和信息可以在更短时间内呈现更多含义。

大部分数据可视化处理的对象是具体的数据或统计结果。另一些则致力于表现无形的话题,为抽象概念提供可视化的展现。一般来说,前者的表现形式多为图示或图表,而后者则往往更富创造与想象力。

许多可视化与信息可视化应用得很拙劣:有些不恰当地放置了过多繁冗信息(或不足的信息)、有些使用了不规范的格式、还有一些其他的常见错误。

下文中提供了信息可视化及数据可视化的25种实用资源。其中大部分展示了令人印象深刻的图表,还包括一些关于该怎样去设计的话题。

提供作者以前的文章作为参考

1. Data Visualization Sites 数据可视化网站

以下是一些能给信息设计师带来巨大帮助的blog及网站,提供了 创建方法、案例、类型以及其他资源。有些还甚至提供了工具来帮助您创建自己的可视化数据。

Strange Maps

Strange Maps 上有许多基于图表的地图,涵盖古今。地图里所带的标注,其中最有趣的是那些历史地图。

Screenshot

Screenshot

Screenshot

Wall Stats

Wall Stats 用海报招贴的形式制作了“美国个人可自由支配收入的统计”图表。它们还提供了其他关于政治及经济议题的图表。

Screenshot

Screenshot

Visual Complexity

Visual Complexity 陈列了来源广泛,涉及近700个工程项目的图表。他们都进行了分类并提供缩略图,以便于对海量信息进行检索。

Screenshot

Screenshot

Screenshot

Cool Infographics

Cool Infographics 是一个令人敬畏的blog——信息可视化的编年史及大量搜集来的可视化数据。只要你所能想得到的话题,这儿都有。基于tag的架构便于你查找特定类别的图表。

Screenshot

Screenshot

Screenshot

Data Mining

Data Mining 涉及的领域为数据可视化、社会化媒体和数据挖掘。这个Blog从包括《美国国家地理》及《经济学人》在内的其它媒体上聚合了大量的信息可视化图形,。

Screenshot

Screenshot

Edward Tufte

该网站 介绍了来源广泛的信息可视化图表。每张图表都有独立评注,其中有一些令人难以置信的有趣图片。

Screenshot

Screenshot

Infographics News

Infographics News主要提供新闻类信息可视化图像,也发布了一些和新闻相关的不同寻常的图表

Screenshot

Screenshot

Information Aesthetics

Information Aesthetics 上转载了许多细节精致的图表和可视化数据,涉及政治、经济、金融及其他类型。最早可追溯倒2004年12月。

Screenshot

Screenshot

Chart Porn

Chart Porn t提供来至全国各地的图示和图表,设计精美,涉及广泛。按话题分类,易于检索。

Screenshot

Screenshot

Screenshot

Behance Network

网站 Behance Network 基于Tag机制,内容涉及信息架构及其他一些特定类型。可以按作者进行检索。

Screenshot

Screenshot

Good Magazine

Good Magazine 推荐了一些极有趣的原创图表,从“水危机”到“食品券的增长”到“奥巴马对投票率的影响”。

Screenshot

Screenshot

Screenshot

Matthew Ericson

这个BLOG 展示了图表设计师Matthew Ericson及其他人的创作作品。新近比较有特色的图表是纽约市的谋杀案地图和工业产值的可视化数据。

Screenshot

Screenshot

NiXLOG Infographics

NiXLOG 上从互联网上聚合了大量信息可视化的内容,还包括一份原创图表:关于苹果电脑及其消费观如何普及的演变历程。

Screenshot

Screenshot

Virtual Water

Virtual Water是一个专业blog,主题是用水量的统计。他们用招贴的形式展现信息并(全部或部分地)出版发行。

Screenshot

Screenshot

History Shots

History Shots是一个商业网站,出售各种主题的数据图表及可视化产品(招贴、明信片等)。他们的主要提供历史事件、时代及包括政治、军事、体育或其它有趣科目在内的数据图表。这是一个相当有趣的网站,你可以在屏幕赏缩放图片进行浏览。

Screenshot

Screenshot

Screenshot

Flowing Data

Flowing Data提供了一些令人震惊图表,除了他们所专注的分类,还包括了一些比如美国最好的啤酒,葡萄酒的个性化形象,肯尼迪的族谱,美国宗教地理学以及不少其他类型的猛料图片。

Screenshot

Screenshot

Screenshot

Many Eyes

Many Eyes提供了工具让你创建自己的可视化数据,同时还可浏览别人的作品。他们也拥有一个很大的图库。

Screenshot

Screenshot

Screenshot

The New York Times 纽约时报

The New York Times的网站上花一点力气找到最好的图表绝对是值得的。它们拥有商业领域最好的信息图形,保证平均水平的读者能轻易理解那些实际上非常复杂的数据。

Screenshot

Screenshot

Screenshot

Nicolasrapp.com

nicolasrapp.com 是一个信息设计blog,其作者为美联社进行创作。

Screenshot

Screenshot

Screenshot

DataViz

DataViz 搜集了许多漂亮的数据化设计。尽管没有标注,但是那些图片已经完全足够说明自己了。

Screenshot

Screenshot

Screenshot

iGraphics Explained

iGraphics Explained –对于图表和数据可视化的有效性和制作方式,这个blog希望能阐明一些启示。他们展示了一些来至互联网的精美图表,这是一个启发创意的好去处,你还可以在这里认识到哪些图表形式是有效,而哪些不是的。

Screenshot

Screenshot

Screenshot

Simple Complexity

Simple Complexity 这个网站展示了一些简化复杂信息的可视化数据,用一种易于理解的方式来体现他们的真实意图。也包括一些关于如何图表优化的教程。

Screenshot

Screenshot

Screenshot

Well-formed Data

Well-formed Data 这个blog的题材:交互界面设计、信息图形、数据及统计可视化等。所附评注非常有趣,就某些话题进入了深入的探讨。

Screenshot

Screenshot

Information is Beautiful

Information Is Beautiful 这个blog颂扬了精美的数据设计。话题多元,有原创和来至他人的设计。

Screenshot

Screenshot

Screenshot

2. Flickr Pools for Infographics 信息图形的Flickr群组

Flickr 群组可以成为信息和灵感的源泉。下面案例中的图表,大部分来至世界各地的不同时期。这是一个获取想法和感知全球图表设计趋势的好地方。

Infografia | Infographics拥有700多张图表的群组,由120多位成员上传。

Screenshot

Screenshot

Screenshot

Infografistas.com / Infographics News 拥有350个类目的发布,来源的种类繁多。

Screenshot

Screenshot

Screenshot

Visual Information 包含650类目的群组。从餐馆到图书馆地图都有。

Screenshot

Screenshot

Screenshot

The Info Graphics Pool这个可能是Flickr里这一类群组中规模最大的了,拥有超过700名成员和1800个类目。

Screenshot

Screenshot

Screenshot

About the author 关于作者

Cameron Chapman 是一名专业的WEB和图像设计师。拥有超过6年的从业经验。她为很多blog写作,包括她个人的 Cameron Chapman On Writing。同时也是Internet Famous》一书的作者。

译者:西乔 来源:www.webdesignerdepot.com 原作者:Kayla Knight

深底色风格的页面设计很受欢迎,它可以创造出别致优雅,极富创造力的效果。

深底色设计适用于许多网站类型,但并非所有。这种风格应该在恰当的条件下使用。

虽然深底色风格可以带来视觉冲击力,但是很多设计师并不知道如何有效地表现他们,取得的效果往往适得其反。失败的设计会导致可读性差,难以吸引用户,无法使用传统的设计元素等问题。

所以在这里,我们将讨论一些深底色页面设计的要素,以便让你的下一次设计更受欢迎,更具创造性

最新的调查表示,47%的受访者首选浅底色的设计, 主要原因是基于可读性。大多数人不喜欢阅读深色背景上的亮色文字,那样眼睛容易疲劳从而导致不适的阅读体验。

相比之下,10%的受访者倾向于深底色的网站,另外36%的认为将取决于网站类型而定。

那什么是正确的答案呢?虽然每个人都有自己的观点,但既然有如此高比例的用户可以忍受深底色的页面设计,有时甚至是他们的首选。我们作为网页设计师必须了解如何为我们自己和客户创建更有效的深底色设计。同时我们必须相信深底色风格可以增加其可读性和友好性。

使用更多的空白

在这里或许我们应该称之为“空黑”。

有效地利用空白,在任何设计中都是重要的,对于深底色风格而言更必不可少。

深色的设计令人感到“沉重”,拥挤的布局会加重这种感受。 看看一些流行的深底色设计,可以注意到他们运用了大量的空白。

网站 Black Estate 陈列了互联网上优秀的深底色页面设计,它本身也是一个值得关注的卓越设计。 其设计中运用了大量的空白,还有独到之处:有效地在某些重要元素旁边使用空白。

首先,用户会第一眼看见的元素——logo,旁边有大量的空白。 然后用户会注意到主内容区和右侧的酒瓶。 如你所见,空白完美地反衬出了内容区的主标题和酒瓶上的文字。

BlackEstate

Tictoc的设计中,精选内容及相关图片配合大片的空白共同构成。随着页面下移,我们可以发现空白越来越少,这样我们的注意力就会转移到缩展示的内容。

其关键是:空白可以逐步引导用户到页面底部

黑色背景增加了设计的纵深感。 网站非常依赖设计中的空白,配合黑色背景制造出来的创意效果,页面才如此吸引人。

TicToc

网站 Mark Dearman的布局中应用了大量对称分布的空白。

每个内容区块间的空白提供了足够的呼吸空间,在用户视线浏览到下一区块前,提供很好的休息点。大量的空白是深底色设计中必不可少的,它能够令布局简洁,突出重要的元素,令整体外观更优雅。

MarkDearman

文字间距

由于可读性是深底色设计的头号问题,所以设计师应该更多地关注文本的设计。在整体设计中,改善可读性的一个途径是增加文本的段落间距,字距及行高

下图中比较了在深底色和浅底色中不同文本间距造成的效果。

Text White Space

另一种方式来改善网站的可读性的方式是增加字号。 如同本文中提到的大部分规则,更大的字体意味这更多的空白。 字母越大,字母的中间和四周就会出现更多空白。如下图中的”a“字,字号越大,除了四周的空白越大,字母“a ”字臂和字谷中的空白也更大。

要注意,浅色背景上的小号文本比暗色背景上的更容易阅读。 所以在设计新网站时,要使用一些虚拟文本来做测试,以确保文本的易读性, 如果不行,尝试增加字号看是否有帮助

文本的对比度

很多人都同意,深底色设计容易造成眼睛疲劳,过高或过低的对比度通常是罪魁祸首。 那如何找到完美的平衡点呢?

假设你在一个漆黑的房间里,突然有明亮的光线进入,你肯定会感到非常不适。 但如果是在一个不太黑的屋子里,射入不那么亮的光线,则会好受得多。 这同样适用于web设计。

寻找完美的对比度,意味着要找到背景暗度和文本亮度之间的平衡点

下图中简略地说明了背景和文本之间的对比状况。 你可以注意到背景和文本的亮度都在梯次降低。

在深底色背景上,为文字寻找合适的亮度要困难得多。要找到完美的平衡点,必须要试验不同的配色。 通常不使用纯黑或纯白能带来更好的效果。

Text Contrast

如何选用字体

字体在设计中扮演着重要的角色,在深底色设计中我们应该更谨慎地考虑字体的选用。 下图中示范了在深色背景中14号无衬线字体和衬线字体的显示效果。

(译注:衬线:例如右边Serif的“S”字母曲线两端的小笔画,那就是衬线。中文中的衬线字体是宋体,无衬线字体是黑体。衬线字体除了有笔画顶端的装饰笔画,线条有明显的粗细变化。而无衬线字体往往笔画是粗细是一致的,或变化非常不明显。)

无衬线字体可读性更强, 但许多设计师仍然选用衬线字体来表现设计中优雅的部分。其中的诀窍是仅在大字号文本上选用衬线字体,大字号的衬线字体会带来更多额外的空白,从而令每个字母都显得非常清晰。

Font Choice

下图的案例中, 衬线字体和无衬线字体的使用形成了优美的搭配。

在大字号的文本(如标题,导航和页面头部)上使用衬线字体,可令设计倍增优雅。 在正文部分使用了简洁的无衬线字体,又提高可读性和对比度。

Serif and Sans-serif

使用精简的配色方案

为了让深底色设计具有简洁明快的外观,设计者应该选用精简的配色方案

从下面的几个案例中,我们可以看出,炫目的配色方案在深底色设计中并不适用,因为对比太强烈了。

坚持只使用一种或两种颜色

如果要尝试更多的颜色,试试与背景色同色系的搭配。

Color

当然,许多深底色的页面设计中拥有激动人心的配色方案。 你可以在使用正确技巧的情况下打破规则约束。

不过,一般状况下,过多的颜色容易让页面看起来脏乱, 由于背景色已经让页面颜色很深,所以请谨慎使用颜色。

提供切换模式。

虽然我们已经掌握了很多技巧令深底色设计更具吸引力,但是我们还可以再做一点努力已满足更多的用户。

务必增加一个样式表,以便用户可以选择切换到效果为“浅色背景+深色文字”的另一版本。

同时创建2个样式表可以保证这一点,一个用于默认的深底色风格,一个用于替换为浅底色。

网站SitePoint上有不错的教程讲到了这一点 : Build a Simple Style Switcher in CSS.《如何使用css创建风格简洁的界面切换功能。》。 在这里仅需创建深色和浅色两份样式表,而无需其它颜色(如橙色、蓝色、白色)的界面皮肤。

最适合使用深底色风格的设计类型

如前所述,很大一部分用户认为,深底色的页面设计可以适用于某些网站类型,但那份调查中并没有说清楚究竟是哪些类型。

一般而言,深底色风格适合用于创意型或优雅型的设计,比如:对于摩登时尚网站,深背景色可以显得别致优雅。对于手绘风格的网站,深色背景可用于更好地体现个性与创意。

别致的深底色设计

深色但带给人的感觉是纵深,权威的,有力的。在使用得当的时候会看起来非常别致优雅。这里有一些使用深底色风格设计的案例和技法。

网站Larissa Meek 在背景里使用了古典风格的纹理,创建了优雅的基调。其它另类的特性令人对此设计印象深刻。

这种技法可应用与多种类型的网站。复古和景点的纹理可以创造兼具优雅和个性化的风格。

大部分人会把古典的纹理和高档关联起来,所以使用这种方法可以很容易地创建让网站看起来有档次。

Larissa Meek

Depth Core 的设计非常简洁,深色背景提升了风格和档次,也很明确的体现了网站所有者的风格。别致的设计可以提升你所展示的作品的价值。

请注意,这款设计中没有纹理,也没有任何logo和作品展示之外的图片。否则这个设计将会显得很臃肿,而照现在这样,内容区的呈现非常精美和紧凑。

设计中一个比较好的流程是先加入所有必不可少的元素,然后再一个一个加入所需的元素,设计师在此过程中可以不断停下来思考下每个新元素的添加是否必要,布局有没有因此而过于饱和。

Depth Core

被优雅背景衬托的艺术品会看起来更有价值,所以对于产品展示网站,例如网站 Tapbots ,一个拥有深色背景和良好光泽感的设计,可以有助于产品的售出。

美妙的渐变和光线,以及模拟该高科技设备本身质感的纹理,好的设计应该和产品本身相辅相成。

Tapbots

创意型的深底色设计

除了可以呈现出优雅的气质,深底色设计可以比浅色设计带有更多感情色彩,从而使他们成为一个创意型的项目。让我们来尽可能展现一些创意型设计的案例。

这个网站内容很少,但是布局非常另类,深色背景是内容很少网站的完美选择。

另外由于这种类型需要更多的空白,所以设计师也有更多发挥余地。

Inca

Grunge (摇滚)风格的网站的呈现形式多样,由于grunge 风格带有黑暗和潦草的意味,所以深底色风格一个匹配的选择。

(译注:grunge——另类摇滚的同义词。起源于西雅图的类金属(metal-like)另类摇滚。grunge渐渐形成一种时尚风格,比如宽松、多层的衣服和撕破的牛仔裤等)

深底色Grunge风格的Trozo 看起来打破了所有的设计规则,杂乱的纹理,拥挤的布局,数量众多的颜色。但是这个网站依然看起来还不错,这是怎么回事呢?

有如此众多和混乱的元素掺杂其中,对于设计初学者而言这可能非常棘手。维持这个设计平衡的关键是对元素进行合理的组织。

首先,背景明确地界定出了区块,可以引导用户视线,也能将内容放置到有组织的区块里。

其次,设计中有大量的空白。虽然背景是纹理,但重复的图案实际上也是一种空白,可以帮助平衡布局中的轻重疏密。

出现在logo左边、导航下方和页面右侧的空白最为明显。另外在“Exhibit 01″ 和 “Exhibit 02″之间的空白也是很常用的手法。

空白可以平衡布局,哪怕它看起来不像空白而是纹理。此为,较少的文本和区块(此设计中只有3个)有助于让页面看起来简洁。.

Trozo

网站Drew Wilson 的设计看起来打破了使用精简配色方案的规则,但实际上鲜艳和丰富的颜色仅仅集中在头部的一小块区域,没有全局滥用。

暗色的背景可以让光感和鲜艳的颜色看起来更明亮更突出。

一些设计在规则之外创造了完美的效果。但是依然应该谨慎对待规则,避免让太多渐变、纹理和颜色遍布整个页面。

Drew Wilson

总结

深底色设计可以赋予设计 优雅的气质和创造力,令产品的展示更加完美。但是并不适合所有类型的网站。

对于一些大型网站,尤其是用户中可能有视力缺陷或行动不便者,千万不要使用深底色设计,哪怕你提供了界面切换模式。

希望在您需要设计一个深底色背景风格的网站时,上述提示和策略可以对您有所帮助。

Kayla Knight 为WDD特别撰稿。

译者:西乔 来源:Smashing Magazine 作者:Jacob Gube

Module Tabs(也称选项卡,后文中简称Tab,以便更符合中国设计师的日常叫法) 是一个常见的交互元素——将不同的内容重叠放置在某一布局区块内,重叠的内容区里的每次只有其中一层是可见的。用户通过鼠标点击或移到内容区所对应的标签上,来请求显示该层内容区。

(译注:本文中指的是狭义的Tab,指在界面的某一版块区域内所应用的Tab设计。实际上,绝大多数网站导航也是Tab的一种应用。)

web界面的设计趋势是缩短页面屏长,降低信息的显示密度,但同时又不能牺牲可视的信息量。在这种趋势下,Tab 这种交互元素成为了一个越来越普遍的应用。例如在Blog界面的设计中,人们在侧边栏使用Tab模式来显示 ”最新更新|最热更新“ 的文章列表以引导用户快速跳转到文章内容页,这种模式令页面结构紧凑同时在视觉上不那么喧宾夺主。

本文将讨论基于web页面或其它web应用中如何设计Tab,同时分享一些产品设计原则、真实的应用案例、教程以及一些能帮助你直接实现Tab应用的免费脚本。

分析Tab元素的构成

为了统一叫法以便于进行讨论,我们先花时间来认识一下Tab元素的每个构成部分。

An illustration of the anatomy of module tabs - see the following description to learn about the anatomy.

  • 标签:用户控制切换内容区的操作区域。
  • 标签和内容区在视觉上看起来应该是一个整体。
  • 标签上的文字应该简洁、无歧义并能准确描述出它所对应的内容区的信息特征。
  • 标签有选中和未选中两种状态,每次只能有一个标签是选中状态,在页面刚载入时,默认第一个标签是选中状态。
  • 内容区:Tab元素中重叠的区块。用于显示信息内容。
  • 内容区和标签一一对应,
  • 当前显示的内容区对应选中状态的标签,当前隐藏的内容区对应未选中状态的标签。
  • 用户应当能很轻易地通过控制标签来切换对应的内容区。
  • 默认被选中的内容区应该在页面载入后立即显示。

一 。什么情况下应用Tab设计

当交互设计师希望节省页面空间;紧凑布局;且需要组合的几种信息之间具有关联性时,可以选择Tab应用。

信息之间具有某种关联特征

构成一个整体的每个元素之间都应该具有逻辑上的关联性。所以出现在同一个tab元素中的几种信息自己应该具有关联特征,这样用户才能将整个Tab区域视为一个整体。例如在Blog中很常见的信息组合:“ 最新更新 | 最热文章 | 评论最多 ” 。

下图是网站Webdesigner Depot的侧边栏上的Tab元素:“全部文章 | 最受欢迎 | 最新更新”

Webdesigner depot module tabs.

信息之间不应该存在对比或并行的关系

Tab元素中,同一时刻,只能显示一层内容区。当用户需要对位于不同内容区上的信息进行对比,或者这几种信息同时显示会更便于用户阅读时,就不应该使用Tab。否则会导致用户为了比对所需的信息,而不停在标签之间进行切换。

下面这个案例中,BGPatterns (一个在线制作背景图案的网站)tab就用得不是地方。当用户想设计或修改他所制作的背景图案时,必须反复在几个标签之间进行切换。Tab在这里妨碍了用户的操作。如果在页面上同时显示这4个内容区上的信息,可用性和友好度会更高。

BGPatterns misuse of module tabs.

另一个反面案例:网站 Best Web Gallery 在它侧边栏上所放置的Tab,标签分别是 ”特别推荐“(包含了一些网站所有者认为值得注意的链接)和 “最新评论”。 这两组信息之间并没有逻辑联系,用户会很疑惑为什么这两者要放在一起呢。所以这个Tab中的两组信息最好分开放置。

Best Web Gallery not using related content for module tabs.

每个内容区应该有一个简短明确的标题。

Tab元素的标签区宽度是有限的,所以标签区的文字应该简洁扼要,具有代表性,长度控制在1~3个英文单词。用精炼的方式展示信息,除了保持设计样式不变形外,还可以让用户更快速地处理文字信息,用以预测隐藏区域上所包含的内容。

Tab应该用于展现精炼的内容。

Tab本意用于展现标准化和易于理解的信息。基于此,Tab应该只用于显示信息摘要和内容要点,例如列表,数据图表,或1~2段简短的文字这种形式。

二 。Tab的可用性原则及优化方法

这一章节 我们将讨论一些关于Tab的可用性设计原则,以及如何使这种交互元素变得更友好和有效。

选中的标签应该高亮显示。

选中状态的标签应该设计得显眼,让用户容易区分当前显示的内容区是对应哪个标签。通用做法是 为未选中状态使用统一的背景色,为出于选中状态的标签上使用高亮的背景色。

保持标签只在一行内显示

Tab的标签通常是水平方向排列的(当然如果你愿意,也可以设计成垂直方向排列的),标签如果分布在多行上会导致用户在使用中产生疑惑。

这是由于在水平方向上多行分布标签,隐含一种等级关系,可能让用户误以为第二行是第一行的子级。

标签需要分布在多行上时,也就意味着标签的数量过多或者标签上文字太长。而这些都是需要被精简的。

Single row counter example - having two rows implies that tab controls have a hierarcial relationship.

内容区之间的切换 应该没有延迟。

使用Tab来控制内容切换的特性之一是快速和互动。为此,应该在html代码里提前内嵌所有内容区的代码,并通过CSS/Javascript来隐藏未被选中内容区,而不是等用户切换到某个标签后再去远程请载入信息。

避免在标签切换的时候去载入页面,使用AJAX从远程读数据来生成动态菜单也是一个办法,但这对使用语音阅读器的用户(译注:Screen-Reader:为视力障碍的用户准备,可以语音读出页面上的信息。)是不友好的,因为语音阅读器不支持DOM模型。

(译注:有4种方法载入隐藏区的内容代码:

  • html 一次性载入:这种方法原始且安全,但是存在数据太多或太复杂导致页面解析缓慢,从而导致整个页面打开速度变慢,这是不可忍受的。
  • frame: 将隐藏区的代码作为一个frame载入,frame的好处是可以新建进程,和页面中的图片同时下载。不同的浏览器可以运行一定数量的进程并行,比如IE可以同时允许4个。这样对整体页面的打开速度影响小。另外,frame可以进入浏览器缓存,在多个页面共用同一个Tab元素时,frame是一个好选择。
  • iframe:iframe和frame类似,继承了frame的优点,此外它还可以作为一个容器随意嵌入页面。google adsense使用了iframe来实现了局部代码的载入。。
  • Ajax:响应用户操作或响应某个触发条件,由JS在后台向服务器发出请求,载入隐藏区的代码。我认为除了交互和需要响应动态生成的内容外,没必要ajax技术。)

在标签上使用简短和有逻辑的文字。

标签应该设计得尽可能窄,以便在一行内容纳尽可能多的标签。

在标签区使用简单的描述或内容关键字,可以帮助用户在扫描页面时快速找到他们想要的内容。所以使用概括准确符合逻辑的文字来描述内容区是非常重要的,选用这些文字应该经过深思熟虑。

下面这个在网站CBS.com上的案例,是一个难用的Tab。标签上没有任何说明性文字,用户无法预测未显示的内容区里到底有什么。

C B S dot com do not use descriptive tab control text making it hard to anticipate what content is.

而在 Navigant Consulting 的网站上,使用数字来暗示数据是有序的。但仍然没有表达出内容区里包含什么。这种设计容易产生歧义导致用户产生不必要的困惑。

Navigant Consulting uses numbers for tab control text.

不要在内容区内使用滚动条

在Tab的内容区里使用滚动条会增加用户负担:用户在要查找信息在哪个内容区里时,不仅需要切换标签,还需要加上移动滚动条的操作。

内容区里容纳的信息太多或设计Tab时设定的高度不够,会导致滚动条出现。所以需要考虑精简内容、增加高度值,或把选中状态的内容区处理为的高度自适应。

三。考虑Tab的易用性

更复杂的交互行为的出现,在不刷新页面的状态下异步更新内容,以及如何满足用户使用不同访问方式,包括那些很难确定的非典型状况下的访问需求,这些状况令易用性成为当前最热门的话题。本章节中,我们将讨论一些在设计Tab元素时你应该知道的易用性原则。

“选择”和“未选中”状态的标签 应该使用对比鲜明的颜色

为了让视力上有障碍的用户能分清哪些标签是已选中的,哪些是未选中的,应该使用高对比的背景色来做出区分。

Yahoo! News 网站中的反面案例:选中和未选中状态的标签 只有非常小的视觉上的差异,他们对视力好的用户没问题,但是会给视力不佳的用户带来麻烦。

Yahoo! News colors make it hard for low-vision users.

此外,请务必保证标签的文字颜色(前景色)和标签背景色 有充分的对比。即使是未选中的标签,用户也应该能轻松阅读上面的文字。为了让未选择的标签看起来不显眼,而把它们都直接变灰 是不妥当的。

确保 隐藏内容区里的信息 在语音阅读器中是可读的

基于可访问性,Tab应该使用技术将未选中状态的内容区隐藏起来,但是不能在DOM Tree中删除他们。比如不能使用 display:none; 或者 visibility:none这样的css参数去定义容器。这类参数导致语音阅读器无法读取被隐藏的内容区中的信息。

(译注:中国设计师可能不太重视语音阅读器的可访问性,但是在国外,有专门的法令条款规定,机构网站不得歧视有障碍的用户,包括视力缺陷,行动障碍、癫痫患者等,所以外国的产品或前端工程师会很重视这一点,不然会遭到投诉甚至起诉。这种差异去看看中国人是如何设计盲道的就明白了。)

详情请见Roger Johansson’s 的文章 《利用css隐藏内容:问题和对策》”Hiding with CSS: Problems and solutions“.

(译注:Roger Johansson’s的文章中指出:许多CSS和JS教程建议使用display:none; visibility:none 来隐藏元素,但大多数状况下这是一个会降低可访问性的选择,。

display:none的真正含义是表示这一元素并不存在,不需要显示打印或被阅读。大多数语音阅读器会忽略任何使用display:none来隐藏链接,文字,导航和标题等。作者建议使用的技术是使用绝对定位坐标,例如 .structural { position:absolute; left:-9999px; } 。

另一个需要注意的问题是,当你决定使用JS去显示一个元素时,也应该用JS技术去隐藏它。因为考虑到客户端是否支持js以及安全等级,如果客户端的js没起作用,可能交互或动态菜单没效果,但起码内容是可访问的。但如果你使用css去隐藏一个元素,但使用js技术去显示它,在某些状况下,这个元素会变得一直无法访问。)

使用语义化的HTML结构来构造 Tab的标签。

使用无序或有序列表(译注:<ul> <li>这类标签)来构造标签的html代码,可以改善可访问性。因为使用语音阅读器的用户可以基于此来识别出这是一组Tab标签。如果标签上使用了图片来代替文字,别忘了添加ALT 或 title属性来 描述图片的含义。

允许键盘操作。

键盘导航是为一些有行动障碍或不能使用常规输入设备(如鼠标)的用户准备的。这种用户会使用替换形式(比如键盘或语音)来控制导航菜单,确保他们能将控制焦点在标签间切换,并激活他们想要的部分。

一个简单测试键盘导航的简单方法是:使用键盘上的Tab键,看你是否能将控制焦点 集中在每个标签上?使用回车键,当前的控制区域是否能被激活,使未选中状态有效地切换为选中状态。

提高对用户客户端的兼容性。

当客户端无法支持某些技术,比如当浏览器关闭了JavaScript功能时,或者 当用户没有安装Flash插件时,Tab内容区上的信息必须保证最基本的可访问性,交互元素确保能被替换为最基本的html文本。

四。 提升之道。

在提供了一些基本的可用性建议和原则后,我们还可以讨论一些方法来进一步提高Tab元素的可用性。

在标签上使用icon来形象化地描述内容区说包含的信息。

在标签上配合使用形象的icon,可以增强对内容区信息的描述。

例如在网站 DrawIt 中,图标用于形象地补充说明所对应的内容区的功能。

DrawIt uses icons in tab control text.

在标签上使用icon,必须保证它们是形象的,切题的。使用不相关的icon会适得其反。

避免在标签上直接用icon来代替文字。

不同的人对一个图像有不同的解读,最安全的方法是使用加上文本来描述内容区信息。

在内容区切换的时候使用过渡动画。

在内容区切换的时候使用过渡转场动画是一个不错的选择,可以为用户提供积极的视觉反馈——内容区正在变化!

大家可以去网站 Coda ,从左到右点击Tab标签,欣赏切换时的效果。

Coda uses animation to switch panes.

当用户在Tab的标签区进行操作时,有明确的悬停响应。

默认情况下,当用户将鼠标移到超链接或标签区域上时,鼠标指针的样式会发生改变,让用户知道标签区域是可点击的。

除此之外,还可以利用背景色变化来响应用户的鼠标操作。对于那些不熟悉Tab标签操作的网站新用户而言,这是很有用的。

下图中Vyniknite.sk 网站的案例里:当用户鼠标划过未选中状态的标签,背景色会变成鲜明的红色。

Vyniknite dot s k uses red highlights for hovers.

五。Tab的真实应用

现在为止,我们从细节上探讨了Tab这种交互元素,是时候来看看真实案例了,在这一章节,我们分析一些Tab元素的应用,希望可以带给大家灵感。

Haveamint.com

这个网站在首屏位置使用大量Tab元素 以展现数量庞大的信息。

Mint module tabs screen shot.

Yahoo!

雅虎在头版位置使用Tab设计,对信息内容的显示进行了压缩和模块化。

Yahoo! module tabs screen shot.

iGoogle

Igoogle在模块中大量使用了Tab,不占用大量的屏幕空间,又令信息饱满。

iGoogle module tabs screen shot.

Blue Acorn

蓝橡果网站 利用Tab来显示网站的热门文章: 电子商务和Magento(一个电商软件平台),内容区上还放置着引导用户浏览更多文章列表的按钮。

Blue Acorn module tabs screen shot.

MailChimp

在这个案例中,你可以看到利用图标强化标签文字描述的应用。

MailChimp module tabs screen shot.

WebNotes

WebNotes 网站的Tab元素,标签位于内容区下方,令人耳目一新。内容区切换时有淡入淡出的动画。

WebNotes module tabs screen shot.

WorldCat.org

WordCat.org 在搜索框中使用了Tab标签,让用户可以针对特定搜索需求缩小搜索范围。(比如书籍、DVD、或者文章)

WorldCat dot org module tabs screen shot.

Martha Stewart

Martha Stewart 在网站的“推荐内容”上应用用了Tab设计,可以自动播放和带有过渡动画。

Martha Stewart module tabs screen shot.

Krista’s Creations

Krista’s Creations 利用字母表作为标签来控制图片的分类显示。

Krista's creation module tabs screen shot.

Clearspring

Clearspring 拥有响应速度极快的Tab,这是一个非常好的古典样式的Tab设计案例。

Clearspring module tabs screen shot.

Homewood

在网站Homewood中,它们也利用icon来辅助了标签上文字的表述。

Homewood module tabs screen shot.

Apple – iWork

苹果网站里,垂直方向排列的Tab标签设计,非常漂亮。

Apply iwork module tabs screen shot.

ExpressionEngine

网站 ExpressionEngine 把标签控制区放在Tab窗体的底部,在快速载入内容区和快速响应内容区切换方面,它也是一个典型案例。

ExpressionEngine  module tabs screen shot.

Viget Inspire

Viget Inspire 在“热门文章”版块使用了Tab,有淡入淡出的切换动画,内容区高度可根据内容长度自适应。

Viget Inspire module tabs screen shot.

Komodo Media

Komodo Media 的标签里,icon放在文字上方。

Komodo Media module tabs screen shot.

atebits

atebits presents 用Tab来展示产品介绍,它有效地在这么小的空间里展现了如此丰富的内容。

atebits module tabs screen shot.

Tumblon

Tumblon 把标签放置在内容区下方,能快速响应切换,但不好的是,标签的选中状态和未选中状态不是那么容易区分。

Tumblon module tabs screen shot.

kevadamson.com

在 Kev Adamson的网站中,右边栏里有好几个Tab,网站使用了不同的ICON配图,帮助用户理解不同Tab的功能。

kev adamson dot com module tabs screen shot.

六。 Tab的创建教程(前端方面的)

有很多教程能告诉你在页面上如何建立和实现一个Tab,下面,你可以通过一些顶尖教程来了解更多关于创建Tab的技巧。

Building Tabbed Content 《如何创建Tab》

通过阅读这篇初级教程,你可以了解如何通过使用 JS 框架Prototype创建一个简单的Tab元素,

Building Tabbed Content Demo screen shot.

Create A Tabbed Interface Using jQuery 《使用jQuery来创建Tab》

Dan Harper 提供给读者关于如何使用jQuery库(译注:著名的js库)来构建Tab。

Create A Tabbed Interface Using jQuery demo screen shot.

Accessible Image-Tab Rollovers 《图片标签导航的快速切换》

学习如何实现用图片来制作标签导航区,并实现快速切换

Accessible Image-Tab Rollovers demos screen shot.

Create a Slick Tabbed Content Area using CSS & jQuery 《使用CSS和jQuery来实现一个可平滑切换的Tab》

Create a Slick Tabbed Content Area using CSS & jQuery screen shot.

七 。脚本资源

如果你真正查找能直接在你网站上应用的Tab脚本代码,这有一些免费的解决方案。

DOMTab

DomTab 是一个很受欢迎的脚本,能很容易创建一个Tab元素,把普通的链接列表改造为Tab元素。

DOMTab screen shot.

JavaScript Tabifier

这段由BarelyFitz 设计的即插即用 的 JavaScript代码,能够帮助你在个人网站上更快速实现Tab元素。

JavaScript Tabifier screen shot.

TabView

TabView 是yahoo用户界面库(YUI)里的一个元件,你可以利用这个元件来减化代码量和图片的使用。

TabView screen shot.

Coda-Slider

Coda-Slider 是Coda 设计的Tab实现脚本,可以实现内容区切换的转场动画效果,还可以设置将Tab标签处理为靠左对齐或靠右对齐。

Coda-Slider screen shot.

idTabs

idTabs 是 jQuery 的一个简化插件,其强大的设置功能可以简化原来控件中复杂的参数组合。

idTabs screen shot.

Tabtastic

idTabs是一个JavaScript库,也包含创建Tab工具,这有深入浅出的使用教程Step by Step pane

Tabtastic screen shot.

Ajax Tabs Content

动态和远程数据,你可以使用AJAX这种动态驱动的方法,来异步更新内容区里的信息。

Ajax Tabs Content

Carousel – Module Tabs

这段Tab脚本简单但有高度自定义的空间,支持动画与自动播放。

Carousel - Module Tabs

关于原作者

Jacob Gube 是一个JS和PHP工程师、WEB设计师、作家,Six Revision的创始人及总编。Six Revision是一个在线共享专业的开发与设计资源及教程的平台。这是他的Twitter:follow him on Twitter



Copyright © 2007–2013. All rights reserved.

RSS Feed. powered by Wordpress a theme by Xiqiao.