图表设计总结

电子厂 1

用户以行使产品过程中,会硌到大气底多少。其实数据对用户来说即使是文与数字之结缘,大脑处理纯文本的进度较缓慢。例如我们来拘禁同样出球队的技能统计,场均116.7区划,28.3助攻,45.0篮板…这些数量对于我们的话还是漠不关心的,我们特别麻烦快速的了解其背后的含义。

图形的起可协助我们针对数码进行可视化处理,提升了数的可读性。因为相对而言叫纯文本,用户处理图片信息之快而赶快得差不多。

电子厂 2

每当此我们利用的凡雷达图,球队各项重要统计一目了然。

广阔图表种类

那怎样才能够设计出用户满意的图形呢?要应对这题目,首先我们要知目前周边的图种类有哪。

电子厂 3

电子厂 4

电子厂 5

折线图,曲线图,饼图,环状图,条状图,雷达图,地图齐足以说凡是咱们脚下最为广泛的图样式了。具体到各种图表适用于表现什么项目的数我此就是无多说了,数学老师应该都说了,今天第一来说图表设计。

咱得以打以下四只维度来分析图表设计:可读性,一致性,视觉层级和美观性

可读性

图片设计的初衷就是是为给用户多样的数码中解脱出来,图表需要帮助用户还好之”读取”数据,所以在这里自己拿可读性放在图表设计之要位置。

图的可读性主要注意以下三接触。配色,文字与群组

配色

图的配色这里主要来说背景色,一般的话,图表的背景色我们好分成深色和浅色。浅色背景的图纸更有益于用户阅读,可以有效的增长多少的可读性。

电子厂 6

想必有人会咨询了,既然浅色背景再方便阅读,那么我们就可以一直生定论了“图表背景一律用浅色”,为什么还要考虑深色呢?

电子厂 7

这就是说是为有些界面内容了少,为了要界面看起不那么干燥,我们会动用深色背景。因为界面内容本身便丢掉,用户一眼便可知看罢,所以深色背景对可读性影响不殊。但是咱而铭记,当数了多之时段,必须采取浅色背景。

电子厂 8

文字

对信之读取,图表可以很快而无法到位规范,这便是图要辅以文字说明的义所在。

言的可读性主要反映于书(衬线字体和非衬线字体),字号,配色和排版。以排版为例,用户之读习惯是打左往右,从达成为生,也是咱常常说的Z型阅读模式。这种模式下,左对同的字排布就充分好,用户可无意识的返段落左端,开始新一行的开卷。而身处中与谬误对联合使得段落每一样推行左端的职还不同等,用户每次都设出察觉的物色起来位置,阅读起来会杀烦。

电子厂 9

上面说及了用户浏览习惯,接下还给大家大饱眼福另一个爱被我们忽略用户浏览习惯。我们在设计饼状图的当儿,份额最酷之有应该放置于12点钟趋向,因为用户还习惯于12点钟底职上马浏览。其余的片仍自生到稍微依次排,顺时针逆时针都得以。

电子厂 10

群组

群组的规划意见以及卡片式设计互动类似,都是对信息进行分割为用户还易消化。以转账功能为条例,对于收款人信息,我们可采取左边的列表样式逐条展示,其实这样做问题呢非甚,而且还省事。但是这种展示方式属于毫无主次的陈铺出富有信息,用户无法肯定预级。在是界面被,用户太关心的是收款人信息,而收款人信息遭用户之关心主要依次是收款人姓名>收款账号>开户实施。如果因此左手的列表样式,优先级是维度就无法体现。

电子厂 11

那么我们好对信息进行分组整合,将收款人姓名,账号,开户行整合交共同,还通过应用icon来协助用户快速稳定要信息,提升阅读速度。

一致性

平慢产品遭所起的图形肯定不止一种,为了打消不同品类图表给用户带来的咀嚼负担,我们可由此被图表添加相同之宏图元素来树立图表的一致性原则。这些同的计划元素得以是背景色,排版,标题样式等。

电子厂 12

盖咕咚为例,这个中出现的几乎种植图表样式且是于统一之。

视觉层级

差的数目有不同之要紧程度,我们得以经过配色,群组,字体,间距等手法来若图表的视觉层次分开,有助于用户对于数据的轻重缓急有一个直观的判断。

电子厂 13

相比之下叫浅色,深色背景再会抓住用户的注意力。

美观性

骨子里若一个图纸可以满足上述之老三个标准已经可以说凡是一定不错了,但是咱若重进一步,从美观性的角度再次指向图纸进行提升。好之图形应该是享有美感的,最好有有趣,独特等元素。这样才可挑动用户的注意力,让她们顾念看个究竟。看到特别好的图形样式,用户甚至会失掉分享。虎扑做的“数读NBA”就是一个充分好之例证。

电子厂 14

如今我们可见到局部图会引入一些动效,动效可以美化界面,有趣的动效还足以从至游戏用户之图,但是动效会下滑加载速度。比如下方的一个电子收据动画,这个动画看起颇酷炫,但是其的存让用户用4秒钟才会见到交易细节。这个等待时明显超过了用户之胸臆预期。所以当动效的下上,我们终将要找到一个平衡点。

电子厂 15

总结

就虽是自个儿由可读性,一致性,视觉层级与美观性这四个点对图片设计的总,希望可以针对大家有所助。大家发出另问题及想法,欢迎留言来交流。

相关文章