没看过这篇文章,别说你会设计表格! - 优设网 - UISDC

没看过这篇文章,别说你会设计表格!

2019/08/09 13978评论 6

@研习设K先生 :我们都知道在设计中,图像语言比文字语言更容易传播。表格和图表也是设计语言之一,利用视觉化的方式,可以很直观的表现出数据、比例等一些文字资料,让人能一目了然,轻易的理解传达的内容,相对于图片照片来说,在这方面图表还是更胜一筹的。当然,图表的设计还是要注重美观与使用环境,不然只会阻碍信息的传播。怎样将数据资料、文字信息等难以视觉化的内容,变成能轻易理解的视觉结果。这节课就带大家来了解图表在设计中的应用。

前方学校,减速慢行,这在川流不息,飞快的街道上,是很难再零点几秒钟之内传递给司机的,所以我们就可以用国际通用的图形语言 ——图形代替。

包括导视的标识,都是以图形替代文字,也让我们更快速找到地点,它也属于象形图。

象形图的应用还有很多,都是常见的,比如手机app的天气预报。

汉字与图形相比,肯定是图形传播的更快,禁止左转弯的标识已经深入人心。

数据文字同样以图表的形式展现,更易于传播。

图表从何而来?可能在大家记忆中,最早接触的图表就是九九乘法表了吧,那个时候在文具盒的盒盖上都有一个乘法表格,一打开就能看到,让我们记忆深刻(暴露年龄了),那图表的发展到底是怎样的呢?我们一起来看下。

信息图形化早在史前时代,人类的洞穴壁画中出现,当时的人类把信息图形用作记录,比如说,记录牲畜的数量。有几头牛,就画几头牛 。

1786年,一个叫威廉的政治经济学家,出版的第一个经济学书籍,他为了表示18世纪英国的经济状况,就使用了统计图表,当中就包括棒形图、线形图、面积图和直方图。

1920年 德国设计师,格尔德·安茨,将资料信息,比如人口,耗油量等,综合整理为图形符号,然后给它们群组,并赋予数值意义,让复杂的资料视觉化,便于阅读。

1936年,奥地利科学家奥图出版过国际图像印刷教育系统,提倡以图形符号作为国际视觉语言,减少对不同语言的依赖。他曾试图用这种图画文字来取代沟通,虽然最后失败了,但是这种理念在后来的ICON、标示等设计领域有着很深远的影响。

统计学家,爱德华·图夫特,出版一系列有关信息图形的书籍,他认为好的数据可视化,就意味着,每一个数据准确地使观众,看到趋势和模式,他的书现在还是一些国外大学的教材。

信息图表定义

信息图表是将信息转化为易于理解的可视化的传播形式,庞大的数据看起来不仅费时费力,还会因为阅读疲劳而影响信息的传递,图表就是整合这些数据和信息,使他们一目了然 。

图表应用领域

1. 包装

配料表,成分表是最常见的了。

2. 海报

关于数据,时间,地图出现在海报中,都可以用图表形式设计。

3. 网页

网页中也很常见图表的应用。

4. APP

相信大家在网购的时候经常能看到图形化的文字。

5. DM/折页

数据图形化,流程图形化等。

6. 画册

画册里面应用图表还是很多的,比如说大多在甲方公司的设计师,就接触过企业画册,里面有很多信息是可以用图表来展现的。

7. 地图

名片或者订餐卡里的地图是很常见的,还有地铁站的地图,景区的地图,这些都属于图表的范畴。

8. PPT提案

提案中文字用图表来表现,不止能让枯燥的提案耳目一新,更能让你的提案具有说服力。

9. 展示设计

展示设计,比如:会对企业的发展历程,或者企业的产值,都会用图表形式展现。

10. 导视设计

图表的分类

通过上方对应用领域的介绍,大家也能看到图表的应用是非常广泛的,其实通俗来讲,图表就是方便我们理解大量数据,以及数据之间的关系,让我们能通过视觉化的符号更快速的读取信息,那图表都有哪些类型呢?首先我们从形式上来看:

△ 直方图

直方图:二维统计表,由一组块形,组成,每一个块形的面积表示,在相应的小组区间中事例的百分数。比较适合统计人数,时间等数据,也是最常用的图表之一。

△ 长条图

长条图:也称为条状图,棒形图,柱状图等,是一种以长方形的长度为变量的统计图表。长条图用来比较两个或以上的价值(不同时间或者不同条件),只有一个变量,通常利用于较小的数据集分析。直方图与长条图的区别在于,直方图是用面积而非高度来表示数量。

△ 圆饼图

圆饼图:又称为饼状图,是一个划分为几个扇形的圆形统计图表,用于描述量、频率或百分比之间的相对关系。圆饼图用面积取代了长度,加大了对各个数据进行比较的难度。

△ 折线图

折线图:又称为趋势图,链图、走势图,是一类在时间序列中表达数据变量的统计图表,比如时间前后的对比,前面这四个是最常用的图表,下面还有 :

△ 雷达图

雷达图:这个大家比较熟悉了吧,在我们的订阅号课程中经常使用的一图表形式,就像一个雷达一样,适用于多维数据的排序比较 。

△ 山形图

山型图:顾名思义像山一样的展示数据,以面积的多少和高度的对比展示数据变量 。

△ 瀑布图

瀑布图:采用绝对值与相对值结合的方式,适用于表达多个特定数值之间的数量变化关系,最终展示一个累计值。

△ 量化波形图

量化波形图:听起来好高级的样子,比较常用在表现时间概念的数据。

△ 落差图

落差图: 像电脑的数据线一样,它表示数据之间的联系与比较。

△ 组织图

组织图:也是一个具有关联性的图表。

△ 树状图

树状图:是一个有指向的图;这个图必然存在且只存在一条从大到小的路径。换句话说,树状图是一个有向的,有根的树,并且所有的边都指离根的方向。

△ 家谱图

家谱图:或称祖谱、族谱等,是家族里记载本族世系和相关重要事迹的书。现在很多人的家里还有族谱的,每逢过节都会祭拜。

△ 鱼骨图

鱼骨图:又称因果图,是用图解展示一定事件的各种原因的方法,它常用于产品设计,或是生产质量管理或失效预防,以识别造成问题的所有潜在因素。鱼骨图中会将问题(鱼头)放在图的右边,潜在因素分为几大类,再由各大类中去细分小分类,都在图的左边。

△ 文氏图

文氏图:是在不太严格的意义下用以表示集合的一种草图。它们用于展示在不同的事物群组(集合)之间的数学或逻辑联系,尤其适合用来表示集合(或)类之间的「大致关系」。

除了上面介绍的这些图表形式,还有哪些图表呢?这些年兴起了扁平化的图像形式,以图像的矢量图形来展示数据,不仅让信息一目了然,更增加了阅读的趣味性。我们来看下这类图表都有哪些吧

△ 扁平化图表

扁平化图表,将事物数据矢量化,扁平化的风格展现,还原事物的样貌,这类图表使用时候要注意色彩上的搭配。

△ 手绘图表

手绘图表,一种是草图的形式,然后在其基础上细化图像,这个是考验手绘的能力。

一种是卡通的形式,最常见的就是手绘地图了。

△ 3D图表

3D图表,需要用3D类型的软件来完成 。

△ 2.5D图表

2.5D图表和3D图表类似,只是透视没有消失点。

△ 合成图表

合成类的图表,这种就比较难了,需要花费较多的时间,并且这类图表都会成为画面中的主体。

从内容上分

刚才,我们从形式上分了那么多的类型,接下来,从内容上划分,这里我给大家介绍最常用的几个类型:

△ 表格

△ 流程图

△ 路线图

△ 成分表

△ 图解

△ 统计图

△ 时间表

使用图表的优势有哪些:

制作图表的流程与方法

1. 提取关键的文字信息(比如数字、日期、价格等)

先说流程,第一步其实就是帮助信息瘦身,提取关键性的文字信息。

如果甲方给出这样一段文案,我们第一步肯定是要简化它,做一个简单的提取,提取文案中的关键信息,比如说,这里的时间信息。

2. 整理信息(扔掉不需要的内容)

这一步也是关键的一部,为了让繁杂的语言变为图形,这一步就要精简文字。

3. 绘制草图(手绘/软件)

第三步根据文字绘制出草图,可以手绘在本上,也可以用色块的形式,在软件中,大致摆放出来。

4. 选择软件制作(可以做图表的软件/网站)

这里给大家推荐一些可以做图表的网站,有的网站可以直接输入数值,它就会帮你挑选合适的图表类型,一键生成,非常方便。

还有两个软件也是专门用来做图表的,当然,除此之外,还可以用AI,PS,这类我们常用的软件也可以。

可以用AI软件当中的图表来设计,当然,这些都是简单一些图表形式,也很好操作。

先来看底下这部分内容,我们可以用图表代替文字,然后搭配说明性文字就可以了

把这一部分图形化之后可以置入画面中。

按照草图,我们选择一款合适的字体,把文字信息和图表编排到版面中,就OK了。

案例演示

这是文案内容,看不出重点 ,我们接着往下做。

提取每一段重要的文字信息,先看红色这段文字。

根据这段文字,我们可以选择什么图表类型呢?它表现了一个时间的先后顺序,那我就用流程图,右边是我们找的参考画面。

然后根据文案内容我们也提取一个元素——野猪,用这个图形来作为辅助,设计流程图。

文案里有很多数据,我们之前讲过,这类百分比的数据,适合用长条图或者圆饼图来做。

最后我们选择长条图来设计,因为这样数据会更加直观。

像这个图表一样,我们可以把品类图形化。

然后画出草图,规划版面。

按照草图把标题置入进到画面里,还有刚才设计好的流程图。

画面元素如果用矢量图形表现,那主形象也尽可能选择矢量图形,这样不仅能统一视觉,还能避免图像之间的矛盾所带来的一系列调整难题。

刚才的流程图放进来,根据这个方式,我们可以将其他文字也图形化。

有的矢量图形可以从素材网站上下载。

最后这样就完成了,我们可以看到,整体画面文字的所占的比例很低,所有视觉的语言都用图形图表代替了,让画面更丰富,有趣。

这节课到这里就结束了,我们讲了图表的发展、图表应用领域,图表的分类,图表的表现形式,以及图表的制作方法,图表是可以让我们跨越语言的障碍,进行沟通的桥梁,甚至是跨越行业的语言符号,大家应用时要根据文案信息,选择适合的图表形式。

欢迎关注研习社的微信公众号:「Yanxishe2017」

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/table-design-2

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里