一致性

一款产品中所出现的图表肯定不止一种,为了消除不同类型图表给用户带来的认知负担,我们可以通过给图表添加相同的设计元素来建立图表的一致性原则。这些相同的设计元素可以是背景色,排版,标题样式等。

娱乐 1

以咕咚为例,这里面出现的几种图表样式都是比较统一的。

娱乐 2

娱乐 3

可读性

图表设计的初衷就是为了让用户浩如烟海的数据中解脱出来,图表需要帮助用户更好的”读取”数据,所以在这里我将可读性放在图表设计的首要位置。

图表的可读性主要注意以下三点。配色,文字和群组

我们可以从以下四个维度来剖析图表设计:可读性,一致性,视觉层级和美观性

对比度是让设计项目在视觉上更具吸引力的重要工具,它让排版布局更加富有层次结构,高对比度的设计让内容的可读性有明显的提升,而这也是设计可用性达标的最基本条件。

用户在使用产品过程中,会接触到大量的数据。其实数据对用户来说就是文字和数字的组合,大脑处理纯文本的速度比较慢。例如我们来看一支球队的技术统计,场均116.7分,28.3助攻,45.0篮板…这些数据对于我们来说都是冷冰冰的,我们很难快速的了解其背后的含义。

娱乐 4

【娱乐】如何用对比度来提升网页内容的可读性,图表设计总结。文本样式的对比

群组

群组的设计理念跟卡片式设计相类似,都是对信息进行分割让用户更容易消化。以转账功能为例,对于收款人信息,我们可以使用左边的列表样式逐条展示,其实这样做问题也不大,而且还省事。但是这种展示方式属于毫无主次的陈铺出所有信息,用户无法明确优先级。在这个界面中,用户最关心的是收款人信息,而收款人信息中用户的关注重点依次是收款人姓名>收款账号>开户行。如果用左边的列表样式,优先级这个维度就无法体现。

娱乐 5

那么我们可以对信息进行分组整合,将收款人姓名,账号,开户行整合到一起,还通过使用icon来帮助用户快速定位重点信息,提升阅读速度。

【娱乐】如何用对比度来提升网页内容的可读性,图表设计总结。【娱乐】如何用对比度来提升网页内容的可读性,图表设计总结。用户在使用产品过程中,会接触到大量的数据。其实数据对用户来说就是文字和数字的组合,大脑处理纯文本的速度比较慢。例如我们来看一支球队的技术统计,场均116.7分,28.3助攻,45.0篮板…这些数据对于我们来说都是冷冰冰的,我们很难快速的了解其背后的含义。

娱乐 6

在这里我们使用的是雷达图,球队各项主要统计一目了然。

在这里我们使用的是雷达图,球队各项主要统计一目了然。

尽量使用相同的色彩,一样的样式,统一的字体,如果设计无法保证一致性,会让用户在界面中感到迷惑。确保用户到哪个地方都会觉得他们在你的网站或者APP当中。

美观性

其实如果一个图表可以满足以上的三个条件已经可以说是相当不错了,但是我们要更进一步,从美观性的角度再对图表进行提升。好的图表应该是具有美感的,最好具备有趣,独特等要素。这样才可以吸引用户的注意力,让他们想看个究竟。看到特别出彩的图表样式,用户甚至会去分享。虎扑做的“数读NBA”就是一个非常好的例子。

娱乐 7

【娱乐】如何用对比度来提升网页内容的可读性,图表设计总结。现在我们可以看到一些图表会引入一些动效,动效可以美化界面,有趣的动效还可以起到娱乐用户的作用,但是动效会降低加载速度。比如下方的一个电子收据动画,这个动画看起来很酷炫,但是它的存在使得用户需要4秒钟才能看到交易细节。这个等待时间显然超过了用户的心里预期。所以在动效的使用上,我们一定要找到一个平衡点。

娱乐 8

娱乐 9

保持一致

娱乐 10

视觉层级

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

娱乐 11

娱乐 12

相比于浅色,深色背景更能吸引用户的注意力。

另外一个方案,是将文字和图片、视频分开排布,这样就不会牺牲两者的信息表现力,唯一的问题是需要提供双倍的展示空间,并且需要选取合理的排版布局。

常见图表种类

那么如何才能设计出用户满意的图表呢?要回答这个问题,首先我们要知道目前常见的图表种类有哪些。

娱乐 13

娱乐 14

娱乐 15

折线图,曲线图,饼图,环状图,条状图,雷达图,地图等可以说是我们目前最常见的图表样式了。具体到每种图表适用于表现什么类型的数据我这里就不多说了,数学老师应该都说过,今天主要来说图表设计。

我们可以从以下四个维度来剖析图表设计:可读性,一致性,视觉层级和美观性

那么如何才能设计出用户满意的图表呢?要回答这个问题,首先我们要知道目前常见的图表种类有哪些。

对齐模式

配色

图表的配色这里主要来说背景色,一般来说,图表的背景色我们可以分为深色和浅色。浅色背景的图表更有利于用户阅读,可以有效的提高数据的可读性。

娱乐 16

可能有人会问了,既然浅色背景更有利于阅读,那么我们就可以直接下结论了“图表背景一律使用浅色”,为什么还要考虑深色呢?

娱乐 17

那是因为有的界面内容过少,为了使界面看起来不那么单调,我们会使用深色背景。因为界面内容本身就少,用户一眼就能看完,所以深色背景对可读性影响不大。但是我们要记住,当数据过多的时候,必须使用浅色背景。

娱乐 18

娱乐 19

5、色彩

总结

这就是我从可读性,一致性,视觉层级和美观性这四个方面对图表设计的总结,希望可以对大家有所帮助。大家有任何问题和想法,欢迎留言来交流。

可读性

图表设计的初衷就是为了让用户浩如烟海的数据中解脱出来,图表需要帮助用户更好的”读取”数据,所以在这里我将可读性放在图表设计的首要位置。

图表的可读性主要注意以下三点。配色,文字和群组

娱乐 20

娱乐 21

娱乐 22

娱乐 23

图表的出现可以帮助我们对数据进行可视化处理,提升了数据的可读性。因为相比于纯文本,用户处理图形信息的速度要快得多。

文字

对于信息的读取,图表可以快速但是无法做到准确,这就是图表要辅以文字说明的意义所在。

文字的可读性主要体现在字体(衬线字体和非衬线字体),字号,配色和排版。以排版为例,用户的阅读习惯是从左往右,从上往下,也是我们常说的Z型阅读模式。这种模式下,左对齐的文字排布就非常有利,用户可以无意识的回到段落左端,开始新一行的阅读。而居中和左对齐使得段落每一行左端的位置都不一样,用户每次都要有意识的寻找开始位置,阅读起来会很累。

娱乐 24

娱乐 25

上面说到了用户浏览习惯,接下来再给大家分享另一个容易被我们忽视用户浏览习惯。我们在设计饼状图的时候,份额最大的部分应该放置在12点钟方向,因为用户都习惯从12点钟的位置开始浏览。其余的部分按从大到小依次排,顺时针逆时针都可以。

娱乐 26

娱乐 27

Ntgrate
这个网站就很好的贯彻了一致性的设计。背景统一使用了菱形的栅格,而文本则统一使用白底黑字的卡片来承载,同时网站中的大图则是置于背景和文本而卡片之间。

文字

对于信息的读取,图表可以快速但是无法做到准确,这就是图表要辅以文字说明的意义所在。

文字的可读性主要体现在字体(衬线字体和非衬线字体),字号,配色和排版。以排版为例,用户的阅读习惯是从左往右,从上往下,也是我们常说的Z型阅读模式。这种模式下,左对齐的文字排布就非常有利,用户可以无意识的回到段落左端,开始新一行的阅读。而居中和左对齐使得段落每一行左端的位置都不一样,用户每次都要有意识的寻找开始位置,阅读起来会很累。

娱乐 28

上面说到了用户浏览习惯,接下来再给大家分享另一个容易被我们忽视用户浏览习惯。我们在设计饼状图的时候,份额最大的部分应该放置在12点钟方向,因为用户都习惯从12点钟的位置开始浏览。其余的部分按从大到小依次排,顺时针逆时针都可以。

娱乐 29

折线图,曲线图,饼图,环状图,条状图,雷达图,地图等可以说是我们目前最常见的图表样式了。具体到每种图表适用于表现什么类型的数据我这里就不多说了,数学老师应该都说过,今天主要来说图表设计。

为了降低背景多变的色彩对于文字的视觉影响,一个比较靠谱的方案是在图片和视频上覆盖上一个半透明的有色图层,来统一色调,让文本的可读性更好。设计师可以通过调整这个有色图层的透明度、明度和色调来控制和文字的对比度,这样一来,背景图片和视频中的内容对于文字的影响可以降到最低。

视觉层级

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

娱乐 30

相比于浅色,深色背景更能吸引用户的注意力。

群组

群组的设计理念跟卡片式设计相类似,都是对信息进行分割让用户更容易消化。以转账功能为例,对于收款人信息,我们可以使用左边的列表样式逐条展示,其实这样做问题也不大,而且还省事。但是这种展示方式属于毫无主次的陈铺出所有信息,用户无法明确优先级。在这个界面中,用户最关心的是收款人信息,而收款人信息中用户的关注重点依次是收款人姓名>收款账号>开户行。如果用左边的列表样式,优先级这个维度就无法体现。

娱乐 31

娱乐 32

那么我们可以对信息进行分组整合,将收款人姓名,账号,开户行整合到一起,还通过使用icon来帮助用户快速定位重点信息,提升阅读速度。

设计的可读性和排版设计息息相关,与此同时,对比度的控制也是其中的核心。想要提升内容的可读性,让内容以更加顺畅、更符合逻辑的形式呈现在用户面前,你需要借助对比度来表达,让用户真正顺畅的理解。

娱乐 33

不过,不同字体的搭配是非常讲究的,因为风格不搭的不恰当谁家常常会让用户感到震惊。可以选择一些具有相同特征的不同字体,用户不会为之感到突兀,这些字体最好拥有相同的x高度(小写字母x的高度),在弧度和倾斜角度上非常接近。这些和而不同的字体能让文本内容看起来一致而有差异,有趣而不枯燥。

**

单个字体本身的优秀设计是很不错,但是两种不同字体的对比带来的反差,更能吸引用户。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图