本期的大屏案例为“北京市电商消费大数据”，主要呈现某电商平台618购物节的信息数据。

如销售总金额、区域销售排行、男女比例、年龄分布、品牌销售排行、历史销售趋势等等。

设计任何产品首先要做的就是了解业务和需求分析，本次的案例需求非常简单明了，只需做各指标数据的展示。

无交互的图表设计要点

无交互的大屏展示，在图表设计上，需要按没有交互的形式设计。

例如不能因为数据过多，而隐藏一些通过交互才能看到的数据。

对于一组无法展示全的数据，可以只提炼最重要的指标数据进行展示，也可以通过动画形式，播放展示等等。

实时数据和事后数据的区别

本案例提供的是618购物节事后的数据，所以在大屏的设计上可以根据真实的数据来设计呈现。

事后数据呈现，在设计上可以根据真实的数据来定义图表，例如可以根据数据大小长度，精准的定义设计空间。

实时数据顾名思义指的就是数据在实时传输，产生了数据就要立即展示出来，从业务角度上可能要做其他的设计预案。

例如异常数据的处理，有突破性的数据是否设计动画营造一种仪式感，就像天猫双11的千亿彩蛋。

案例解析-风格与用色

定义视觉风格

定义大屏设计风格，首先要分析行业的属性特征，然后通过情绪板等方法定义视觉调性。

例如公安系统通常运用严谨冷静的蓝色调；能源、教育、医疗行业的主色调，一般使用能代表环保、未来、健康的绿色调。

电商、新零售行业需要烘托购物热闹的场景，所以靓丽的暖色调更为合适。

过于冰冷理性的色调，并不是电商产品所追求的调性，更不符合观者对购物场景的心理认知。

但是由于可视化大屏的面积过大，主色调不论什么颜色，背景色通常要用暗色系，以减少对观者视觉上的冲击。

深色背景能够有效烘托暖色调的可视化元素，起到对比、聚焦视觉的作用。

暖色调元素可以烘托购物特征的氛围，如红色、橙色、紫色、都是有效的色调，但如果都是暖色元素较容易视觉疲劳。

所以暖色中搭配一定比例的冷色，能够缓解视觉上的不适感。

冷暖色在大屏设计中的搭配有很多技法，下面我们来解析色彩搭配。

色彩解析

首先分析色环图，了解一下色彩知识，30度为同类色、60度为邻近色、120度对比色、180度互补色。

电商大屏冷色元素通常选用蓝色系色调，通过上图对色环的认识，来看下蓝色与色环图上的暖色都呈现什么关系。

• 同类色：在色环上成30度，特点是色相比较接近，如红色类的朱红、大红、玫瑰红都属同类色关系。
• 邻近色：在色环上成60度，邻近色的搭配会使画面和谐统一，呈现一种你中有我，我中有你的感觉。
• 对比色：在色环上成120度，是构成明显色彩效果的色组，视觉上会有一种蓝的更蓝，红的更红。
• 互补色：在色环上成180度，是对比最强的色组，两个颜色放在一起会引起强烈的对比，会给人强烈的排斥感。

从以上的色彩分析来看，电商大屏若呈现大面积的暖色调，再搭配大面积蓝色调会呈现对比色或互补色，形成强烈对比。

所以本期案例选择蓝色的邻近色，紫红色进行搭配，这样不仅能够烘托电商的属性特征。

还能在大面积使用紫红色的同时保持画面和谐统一，因为紫红色同时包含蓝色和红色两种色调。

蓝色搭配紫红色其实就是，实现了你中有我，我中有你的感觉。

不难发现强烈对比效果会有一种不适感，所以大面积的暖色，一定要使用跟其他元素能够融入的邻近色。

小面积使用对比色的技法

如果是小面积的使用，就会有很多的可能性，例如下图阿里DataV电商类数据可视化产品的模版。

都只是在标题处使用红色烘托电商大屏的调性， 内容区并没有过多的使用红色，所以各种元素间，并没有形成强烈的对比。

但从两张图的对比来看，第二张处理的比第一张要高级一些，仔细看会发现，第二张背景色偏紫色。

红紫为邻近色，这样标题的红色和背景就形成了较为和谐的过渡，而第一张暗蓝色的背景跟标题对比强烈，略显生硬。

反面案例解析

举个反面案例，看下图最大的问题就是过度烘托了主题主题氛围，导致整个画面太过艳丽，没有细节。

更不用说数据的清晰展示了，这已经违背了大屏可视化设计，以数据信息展示为核心的设计理念。

图片来源网络(反面案例)

大屏设计用色调烘托主题本身很好，但对于艳丽的暖色调，要适当搭配一定比例的邻近色和对比色。

这样能大大缓解观者的视觉疲劳，展示出细节，大屏看起来色彩也会更丰富有观赏性。

案例中标题和总数据为什么使用黄色？

因为黄色和蓝色、紫红色对比性更强烈，黄色跟蓝色在色环上成180度是互补色，有最强烈的对比性。

黄色与紫红色在色环上成120度是对比色，同样有强烈的对比性，同时黄色也跟暗色调的背景形成了鲜明的对比。

所以对于关键指标数据和标题，需要重点突出的元素，可以用对比强烈的色调做突出效果。

案例解析-设计要点 

打造仪式感

设计要点要从需求出发，例如需求中有一项关键的业务指标要突出，朝阳区消费占全市75%。

所有区中朝阳的消费是No1，所以从这点考虑可以使用全区地图来展示，并且打造朝阳区第一名的仪式感。

打造惊喜感

产品设计中给观者惊喜感，无疑是好的体验，本次案例通过增加了两道光线动画，打造微妙的惊喜感。

这样的设计给大屏增添了动感，看起来更富有生机，两道光线滑向总数据指标，会有一种数据传输的感觉。

同时也像满天繁星的夜空中，划过的流星一样，给人带来一种悸动的体验。

3D图表的设计要点

3D图表有很强的视觉表现力，是突出重要指标的重要手段之一，但3D图表在数据可视化设计中，一直是有争议的存在。

有人认为由于3D的透视关系，会导致数据呈现的不客观。

其实从设计角度可以解决不客观问题，比如我们案例中的3D柱状图，由于柱形的厚度。

导致出现两条顶端线，视觉上很难分清顶端在哪里，对指向Y轴刻度数值的体现的就不明确。

这种情况就需要在柱状图上标记出数据值，这样画面不仅有了3D图表的视觉表现，同时也不影响数据的展示。

增强观者认知

增强观者对元素的认知，可以大大提高阅读效率，比如图文形式通常比文字视觉上更突出。

案例中“最受欢迎品牌”就可以加上品牌logo增强对类别的认知。

条形图通常按序排列，从大到小，或从小到大，但如果有“其他”这项分类一般都要放到最后。

如果“其他”分类也按有序排列，就会有格格不入的感觉。

后语 

电商大屏通常要烘托一种热闹的场景，对配色的准确把握，大面积色调的使用需要和谐过渡，同时要善于运用对比色，突出元素。

多思考设计与业务的表现关系，善于从设计思维出发打造仪式感、惊喜感，增加产品价值。

作者：吴星辰

转载请注明：学UI网》电商大屏 – 数据可视化设计经验分享！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

本文利用C4D软件和three.js开发方式制作地理空间数据可视化项目。地理空间数据可视化是基于我们实际生存的空间，对信息的载体、对象映射到载体的方式进行可视化展示，从而将地理空间中的数据以一种直观、容易理解和曹总的方式呈现给用户。

使用软件：c4d
飞线制作原理：样条约束功能
地球上的起伏：置换材质
中国地图上的飞线：在ae中做好的视频材质
地图模型：高德那边拿到的，但只针对阿里内部
开发方式：three.js

地理空间数据可视化 (Geo Spatial Data Visualization) 是近年来兴起的一个热门领域，越来越多的政府、企业青睐于通过这种强视觉的形式来展示政绩与实力。市场需求的增长也吸引了越来越多的设计师投身于这个领域。而在这样一个细分领域，也对设计师的能力提出了全新的要求。在该领域，我们团队沉淀出一套固定且可复用的设计模式。在这篇文章中，我将会详细讲述一套完整的地理空间数据可视化设计流程。希望你能通过它形成一套属于自己的可视化设计方法。

文章分为两部分，上半部分展示视觉，下半部分聊聊视觉背后的理论与流程。

请点击——》》视频1

请点击——》》视频2

 

作者：三鱼先生

转载请注明：学UI网》数据之美：地理空间数据可视化

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

每年的双十一，天猫都会在剁手狂欢节中直播战绩。除了可怕的数字之外，不知道大家有没有留意到这些同样可怕的数据可视化大屏；

所谓大屏，顾名思义就是一个

很大的屏 !!!

可视化应用非常广如ToC、ToB、ToG等都会存在。一般应用在交易大厅，展览中心，管控中心，老板办公室等等场景，把一些关键数据集中展示在一块巨大的LED屏幕上，其实就是巨大化的Dashboard，是当今数一数二的装逼方式。

数据可视化的本质是视觉对话，数据可视化将数据分析技术与图形技术结合，清晰有效地将分析结果信息进行解读和传达。

设计前的准备

基础大屏制作准备：

1、确认需求：确认展示的主题，具体展示的内容，各部分内容数据用到的图表类型。

2、使用场景：确认大屏的使用场景，设计尺寸与大屏的拼接方式（拼接屏像素超大可等比例缩放）

3、开发实现：具体设计要根据项目确定实现的工具，现在应用比较多的：web、u3d、ue4等 不同工具实现出来的效果也是大有不同，根据项目实际需求以及开发成本，这块设计前需要跟开发充分沟通。

4、设计素材：设计整体的背景图、包括布局、配色等，以及大屏中用到的小图标元素。

大屏制作一般只需四步：

1、整体：设置背景色、插入背景图、页面设置等。

2、部分：主标题、各图形标题、动态KPI指标、图表制作等。

3、细节：对标题、图表细节的调整。

4、动态：添加动态效果，提升大屏展示效果。

（以上只是写的一个大概的思路，具体操作流程肯定是根据实际情况做调整，要复杂的多，最重要的是多沟通、多思考）

设计思路案例实操

需求分析

设计要求：

分辨率1920*1080，在世界地图上显示一个黑客组织攻击多个目标，页面要显示黑客组织的信息和被攻击目标的信息。

黑客组织信息举例：

名称；摩诃草  位置：巴基斯坦 活跃度：80

攻击目标：韩国 中国 朝鲜 德国

展示信息仅作为参考，可以自由发挥

风格要求：科技感 FUI

拿到需求，确定好展示场景、设计尺寸以及跟开发沟通好实现方法，大致的设计思路就有了，直接开撸。

布局

个人习惯，根据需求以及数据大概整理一个布局，可以在纸上大概画一下，然后在软件里具体细化布局。

根据梳理的需求：就是要在世界地图上展示黑客攻击各个国家的形态的大屏，要求很宽泛，可自我发挥的空间挺大。

直接附上最终效果图。这里布局上考虑到地图上有许多浮层的情况，把数据整体放左侧和地图下方进行展示，避免图表的面积过大，喧宾夺主，影响整体地图的视觉效果。

风格

根据需求定义几个设计关键词，方便自己找参考直接打开花瓣站酷一阵搜（在这里个人推荐去Pinterest、behance 里面有很多炫酷的fui效果可以参考）。

风格上，地图参考了下图的展示形式，采用多层叠加阴影加描边的形式使地图整体有立体感、厚重感，不会显得那么单薄。

图片来自网络，如侵权删

颜色

相比较网页版设计展示，大屏更倾向于选用深色调背景，不仅为了让视觉更好聚焦，而且长时间观看之后眼睛也不会出现视觉刺痛感。内容部分采用亮色系，保证内容与背景有一定的对比关系，便于业务信息传达。同时背景深色系内容亮色系远距离观看也会比较直观清晰。

字体

字体上采用浏览器默认微软雅黑，数字采用特殊字体DS-Digital

数据图表

图表是表达数据的常用方式，因为图表可以描述了不同的数据种类，同时让数据之间可以比较。主要就是要考虑最终用户，图表结果应该是一看就懂，不需要思考和过度理解，因而选定图表时要理性，避免为了视觉上的效果而选择一些对用户不太友好的图形及元素。

常用的图表有以下几大类别：

1、一个或者多个类别不同时间的的对比比较。

典型的图表有折线图、条形图、堆叠条形图、蜡烛图、区域图、时间线等。

2、不同类别数据的对比

典型的图表有柱状图、分组条形图、气泡图、平行坐标图、多折线图、子弹图等。

3、排名 主要展示项目数据的一个排名情况。

典型的图表有有序条形图、有序柱状图、平行坐标图等。

4、不同数据对于整体的占比情况

典型的图表有堆叠条形图、饼状图、环形图、堆叠区域图、树形图、玫瑰图等。

以上是一些比较常见的一些分类当然还有许多不常用的图表没做统计区分，比如散点图、气泡图、热力图、网络图等等这里就不一一列举了（推荐大家可以看下网上的开源组件库Echarts、Antv等等 好多）这块也有蚂蚁金服官方的分类非常详细

https://antv.vision/zh 附上地址，需要的自取。

图片来自网络，如侵权删

这里推荐一快速生成图表的ps插件-ps拉框助手如图所示，该插件整合了折线图、柱状图、横向柱状图、饼图、雷达图、地图（该功能太赞了）还有系统UI等等。非常方便，用选区工具拉取选区框点击参数一键生成。

实操下如何快速一键生成地图的效果，省去了做可视化来回地图的烦恼，下面开始实操：

1.新建画布，打开拉框助手选中地图如图：

选中之后会有好多参数标签写的很清楚，第一块是区块、边线宽度颜色和文字的颜色可以在这里设置，第二块内容就是地图这里插件里有全国各个省市的还有全球和美国的地图 基本够用了，根据需求大家可以自定义选择，选择完成之后点击去下载对应数据，会弹出网页出来一个新的页面，如下图：

这里是我选择一个全国的地图，大家可以根据截图上红框内的说明进行操作，非常简单。往下滑，直接点击复制json数据到剪切板。点击后网页会有一个复制成功的提示，证明你已经复制成功了，接下来我们就回到ps里面去粘贴就好了。

粘贴到这里，这里切记不要粘贴多次会很卡导致数据错误，插件里也有提示。粘贴完之后，记得用选区工具画一个选区之后再点击自动绘制如图：

点击自动绘制之后，可能会等待一会，插件需要花时间去运算生成地图，等待一会之后就到了见证奇迹的时刻，如图：

一份中国地图就生成啦，就问你它香不香，而且生成的文件都是分层的矢量形状层，可以继续编辑。是不是功能非常强大，其他模块的功能就不一一展示了，插件官方生怕童鞋们不会用，在插件的最后一个模块贴心的准备了学习手册，点击可以查看相关的视频教程，非常的详细，感兴趣的童鞋可以去试试哦。

插件源文件小六也给大家备好了，公众号回复“ps插件”有需要的童鞋自行领取哟。

总结

1、设计前：一定要对用户需求有着充分分析和理解，然后要知道大屏的展示场景及设计分辨率，大屏的拼接方法都要有一定的了解，最后是跟开发沟通下实现的工具与方法。

2、设计中：构思布局，可以在纸上简单画一下。根据需求定义设计关键词进行设计的提炼与分析，方便自己找参考。颜色上背景深色为主，为了更好的聚焦，数据可以采用亮色，有一定的对比关系，便于业务信息传达。字体上可以采用系统默认字体 数字采用特殊字体包的形式（这块根据实际需求，切记不要照搬）。图表分析好数据，选择恰当的展示形式，同时保证视觉上的统一（分清页面的主次关系，图表的展示切莫设计过度，容易造成抢主体）

3、设计后：再次校验信息层级、文字大小、图表等各层级间的对比关系是否传达准确，与技术同步沟通下技术的实现性。最后开发完成后，要拿演示demo去现场测试，看下整体展示效果，测试输出是否有问题，有无拉伸问题，拼接缝与内容有无穿插，及时与开发进行页面的校验工作，最终才算是设计完成。

作者：小六

数据可视化是数据内在价值的最终呈现手段，它利用各类图表及图形化的设计手段将复杂不直观的数据有逻辑的展现出来，使用户找到内在规律，发现问题，从而指导经营决策，挖掘数据背后的商业价值。

首先介绍下使用场景：

可视化应用非常广如ToC、ToB、ToG等都会存在，之前所看到的各种图表仅以为是单纯的数据统计，其不然它也是一种可视化的展示方式。现阶段更多的理解数据可视化是大屏展示。多屏幕拼接，展示诸多数据和图表，效果一定是酷炫各种特效视觉于一身的才称之为数据可视化，其实这只是其中一种可视化的表现方式。下面基于应用场景的不同，对可视化区分介绍。

第一类使用场景：

此类以使用为主，主要在电脑上操作的pc端可视化，用户对它需长时间使用，例如企业数据报表分析，各类BI等。在此类场景下，简洁简单高效的传达数据内容是非常必要的，更多的是数据分析师及业务部门在使用，他们需要长时间停留在屏幕及数据上做分析统计比对等工作，精准的传达数据的同时也减少对眼睛的过度疲劳，利于用户长时间舒适阅读，所以这类场景下以简洁为主。

（图片来源于网络）

第二类使用场景：

这类是以观看为主，并以快速传达核心数据信息的应用场景。此类场景多应用于指挥大厅、科技展馆、数字展厅等，他的特点是多屏幕拼接，展示面积大、数据类型多，展现形式多元化，业内也称之为数据可视化大屏。总之其主要就是核心数据通过视觉及动画的表现手法直观的输出给用户，增加用户的记忆达到过目不忘的效果，同时这对于数据信息的视觉传达要求比较高。此应用场景也是问题疑问比较多的，会关系到效果定位、数据信息传达、表现方式、软硬件结合等诸多情况。针对此应用场景展开分析，其他可视化设计也是相通的。

（图片来源于网络）

1、精准把握业务需求

设计终归是助力业务的，准确的理解业务需求是至关重要的，它将贯穿整个设计的始终，也是可视化设计开始的必要前提。如何解决用户的问题，完成既定目标，都需要设计师对需求有一个比较准确的理解。直接有效的方法就是“不懂就问”。

2、数据图形化的选择方法

需求及数据确立后，接下来是数据图形化的选择，不同的目标不同的数据对于图表展示的选择也是有讲究的，如：部分占总体的比例（占比）更适合选用饼图、用来反映时间变化趋势的图形化更适合曲线图等等，总之不同的数据展示维度，选择的图表是有差异的。同样一组数据，存在多个图表同可展示，怎样选择最恰当的图表是至关重要的，合适有效的图表有助于信息有效的传达。遇到具体的数据要根据数据的维度，和要表达的业务目标，选择一种最佳的图表呈现。

（图片来源于网络）

这是可视化图表选择比较确切的一个方法，可以作为数据可视化图表的选择依据，有助于准确快速的把数据图形化。

首先根据业务目标结合数据维度确定大的关系（比较、分部、构成、联系），随后选择合适的图表，填充数据设计排版即可。到这一步图表基本成型，但是比较基础，为了视觉效果和数据的传达，也会在此基础上进行优化设计。

优化设计之前要注意几点：

1. 切忌设计时不要过度装饰图表，喧宾夺主造成数据不直观，对观者获取数据产生障碍。
2. 图形化要友好，不能一味的追求视觉效果，造成图形识别度降低、友好度下降。
3. 图形化后一定要利于理解。所有的设计一定是为业务服务的，数据图形化后更不利于业务信息传达，那就失去了图形化设计的意义
4. 开发可实现，设计师常遇到，酷炸炫的效果让开发落地非常困难，务必要多沟通，懂取舍。设计之初就要考虑全面。

可视化大屏一般都是多屏拼接或者LED\LCD等材质屏幕。不同的屏幕像素是不相同的，显示像素、物理像素都不同，包括硬件设备的不同导致输出像素也不相同，例如同样是3X2的拼接屏，输出像素可以是X1*Y1也可以是X2*Y2，这就造成了很多潜在问题，设计之初屏幕硬件及拼接方式需要提前确定。基本有两个方法，简单的说，方法一、拼接屏可以按照拼接后的横纵像素总和设计（拼接屏像素超大可等比例缩放）。LED/LCD屏幕设计也是同样的原理。方法二、按照硬件输出像素设计，硬件设备的输出像素一定是和整个拼接屏成比例或者是吻合的。所以按照输出像素设计是可以的。

（图片来源于网络）

屏幕的拼接方式及屏幕材质确定后，就可以进行页面的设计及数据的布局，页面的布局主要是依据业务及数据的重要程度来布局，可视化中会把核心的数据或业务的要点放中间，一方面中间是视觉的中心，二来也是数据和业务最容易传达给观众的核心位置。其他的数据放两侧排列，排列数据一定要考虑数据的关联性及联动性，应该有意识的把他们放一起或就近，让他们有关联系，当一组数据变化时联动效果更凸显，容易传达数据的价值。

最后插播一句，如果是拼接屏记得把数据避开拼接缝，页面布局时就要考虑屏幕拼接方式，尽量把数据有序的展示在屏幕内，合理避开拼接缝减少对用户观感的影响。

具体设计要根据项目确定使用的工具做调整，如web、u3d、ue4等等。项目用什么开发工具很大程度决定了设计方法方式，各种工具自有不同的优劣势，像web轻量化图表控件多，效果相比u3d会弱很多。u3d对三维支持好，粒子等效果有优势。了解这些大致可知道设计思路。

字体：

选择识别性高的，字体不要太细，同时要注意版权，不要选择太圆润的字体。

颜色：

颜色明度饱和度要高些，远距离观更利于信息清晰传达。颜色不要过于相近，大屏颜色相近更不易于数据间的区分，降低阅读舒适感。大屏背景选择深色系，内容选择亮色系。保持内容与背景有一定的对比关系，便于业务信息传达。（同时深色系也省电）

布局示例（以1920*1080尺寸，布局示例）

风格的确定也是至关重要的，首先要确定应用场景是怎样的（室内、室外、光照如何、灯光照射如何、硬件如何等等），要充分考虑，以及目标用户是谁，给谁用等等。都会对风格有不小的影响，设计是相通的，可用UI的方式来定义可视化设计风格，AB测试、情绪版等等。差异比较大的一点是应用场景的环境。

通过对数据图表的选择，屏幕布局及风格设计，一张初步作品已经完成。

此时最好结合业务目标及数据，设计内部先自检：

1、现在的设计布局是否合理

2、配色是否合理并能通过色彩传达数据的意义

3、整体设计是否符合之初的业务目标

4、是否存在其他问题等等

接下来就是各个相关人员及领导确认阶段。

当风格页确定后先别急于后面的页面设计，如果有可能的话，此时最好拿设计图去现场实地测试（补充一句，设计开始前最好是能到现场测试硬件显示，颜色等，应最大程度的减少隐藏问题）。确定现场硬件是否存在偏色问题、文字大小在合适的观看距离是否清晰可见、现场灯光光照等是否对设计有影响、拼接缝和数据是否有穿插、硬件设备输出是否和设计匹配等等。确认无误后在开展后面的页面设计工作。

（图片来源于网络）

开发工具不同（如web、u3d、ue4等等），对接方式也会有差异。相同相似之处有如标注规范，颜色，字体字号等等。对于一些三维场景需要提供三维文件，如obj、FBX等。

主要提供：设计规范（标注）、切图、三维文件（示项目需求并不一定设计提供），特殊动效可提供范例。

补充一点，拼接屏到8K左右甚至更高，输出像素不必达到8K，稍微加点效果，会卡到怀疑人生。一般会降低到4k左右，对硬件要求下降的同时也能保证整体效果和流畅度。

开发结束后，要拿到演示文件去现场测试，测试输出是否有问题，有无拉伸问题，测试有无卡顿现象，拼接缝与内容有无穿插，如有控制端（控制屏）需联调测试。确定整体无误后，才是设计的最后交接棒。

作者：聂永真

转载请注明：学UI网》初学者如何快速上手数据可视化设计

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

数据可视化是一种用图形形式来描述密集和复杂信息的通讯方式。由此产生的视觉视觉效果使得数据比较和用数据讲来故事都变得更加容易——这两种方法都有助于用户做出决策。

数据可视化可以表示不同类型和大小的数据：从少量数据点到大型多元数据集都可以表示。

类型

数据可视化可以用不同的形式来传达。图表是一种常用的数据传达方法，因为它们不仅描述了不同的数据类型，还能进行数据比较。

图表类型的使用主要取决于两个方面：想要传达的数据，以及想要传达的数据有关的内容。以下指南提供并描述了各种不同类型的图表及其用例。

图表类型

随时间变化

随时间变化的图表显示一段时间内的数据，如多个类别的变化趋势及其对比。

使用情况包括：

1. 股票价格表现
2. 健康统计
3. 年度报表

随时间变化的图表包括

1. 折线图
2. 柱状图
3. 堆积柱状图
4. 烛台图
5. 面积图
6. 时间轴
7. 地平线图
8. 瀑布流图

类别比较

类别比较图比较多个不同类别之间的数据。

使用情况包括：

1. 不同国家间的收入对比
2. 热门场次对比
3. 团队分配

类别比较图包括：

1. 柱状图
2. 分组柱状图
3. 气泡图
4. 平行线图
5. 多条折线图
6. 子弹图

排序

排序图表示一个项目在有序列表中的位置。

使用情况包括：

1. 选举结果
2. 表现统计

排序图包括：

1. 排序条形图
2. 排序柱状图
3. 平行线图

部分-整体

部分-整体图表示部分元素是如何加总为整体的。

使用情况包括：

1. 产品类别综合收益
2. 预算

部分-整体图包括：

1. 堆积柱状图
2. 饼状图
3. 堆积面积图
4. 矩阵树图
5. 太阳辐射图

相关

相关图展示两个或多个变量之间的相关性。

使用情况包括：

1. 收入和预期寿命

相关图包括：

1. 散点图
2. 气泡图
3. 柱状和折线图
4. 热力图

分布

分布图展示每个值在数据集中出现的频率。

使用情况有：

1. 人口分布
2. 收入分布

分布图包括：

1. 直方图
2. 线箱图
3. 小提琴图
4. 密度图

流

流图显示数据在多种状态之间的流动。

使用情况包括：

1. 资金转移
2. 投票统计和选举结果

流图包括：

1. 桑基图
2. 甘特图
3. 和弦图
4. 网状图

关系

关系图显示多个项目之间是如何彼此关联的。

使用情况有：

1. 社交网络
2. 文字图

关系图包括：

1. 网状图
2. 维恩图（或译Venn图、文氏图、韦恩图、范氏图）
3. 和弦图
4. 太阳辐射图

选择图表

许多类型的图表都可以用于描述数据。下面的指导方针提供了如何选择图表的见解。

显示随时间产生的变化

随时间产生的变化可以用时间序列图来表示，这是一种按照时间顺序来表示数据点的图表。

可以表示随时间变化的图表包括：折线图、条形图和面积图。

*基线值是指y轴上的起始值。

条形图和饼状图

条形图和饼状图都可以用于显示比例，表示部分值与整体值之间的比较。

1. 条形图使用一条共同的基线，通过条柱的长度表达数量
2. 饼状图使用圆内的圆弧或圆角表示整体的一部分

条形图、折线图和堆积面积图比饼状图更能够表达随时间产生的变化。因为这三种类型的图表中，可能的值共享同一条基线，所以比基于条柱长度的条形图更容易比较值之间的差异。

面积图

面积图有多种类型，包括堆积面积图和重叠面积图：

1. 堆积面积图表示（在同一时间段内）多个时间序列堆积在一起
2. 重叠面积图表示（在同一时间段内）多个时间序列重叠在一起

重叠面积图中不建议包含两个以上的时间序列，以免模糊数据。相反，可以使用堆积面积图在一个时间间隔内比较多个值（横轴表示时间）。

样式

数据可视化使用自定义的样式和形状，以适应用户需求和上下文的方式使得数据一目了然。

下列有益于图表自定义：

1. 图形元素
2. 排版
3. 图标
4. 轴和标签
5. 说明和注释

设置不同类型数据的样式

视觉编码是将数据转换成视觉形式的过程。独特的图形属性可以应用于定量数据（如温度，价格或速度）和定性数据（如类别，风味和表达式）。

这些图形属性包括：

1. 形状
2. 颜色
3. 尺寸
4. 面积
5. 体积（容积/量）
6. 长度
7. 角度
8. 位置
9. 方向
10. 密度

表达不同属性

多种视觉处理方式可以应用于数据点的多个方面。例如，条柱的色彩可以表示一个类别，与此同时条柱的长度可以表示一个值（如人口大小）。

形状可以用来表示定性数据。在该图表中，每个类别由一种特定形状代替（圆形，方形和三角形），这使得比较特定范围内的数据或与其他类别数据进行比较都很容易。

形状

图表可以通过形状来以多种不同的方式表达数据。形状可以被设计为一条有趣的曲线，或一个精确的高保真图形，以及介于二者之间的其他方式。

形状的精确程度

图表可以以不同的精度来表示数据。用于深入研究的数据应该（根据触摸目标的尺寸和相关可视化要求）使用适合交互的形状来表示。而用于表达大致想法或趋势的数据可以使用细节较少的形状。

颜色

颜色有四种主要的区分数据的方式：

1. 区分不同的类别
2. 表示数量
3. 突出特定数据
4. 表达意义

颜色区分类别

在环形图中颜色被用于定义类别。

颜色表示数量

在地图中颜色被用于表示数据值。

颜色突出数据

在散点图中颜色被用于突出特殊数据。

焦点区域

当颜色被少量使用时，它可以突出焦点区域。不建议使用大量的高光颜色，因为它们会分散用户的注意力。

颜色表示意义

无障碍

为了适应无法区别色彩差异的用户，可以使用其他的方法来强调数据，例如高对比度着色、形状或纹理。

将文本标签应用于数据也有助于澄清其含义，同时消除了对说明的需要。

线条

图表中的线条可以传达数据的质量，例如层次结构、突出强调和对比。线条的样式可以采用不同方式，如使用虚线或不同的不透明度。

线条可以应用于特定的元素中，包括：

1. 注释
2. 预测元素
3. 比较工具
4. 置信区间
5. 异常

排版

文本可以用于标记不同的图表元素，包括：

1. 图表标题
2. 数据标签
3. 轴标签
4. 说明

层次结构中级别最高的文本通常是图表标题，最低的是轴标签和说明。

文本粗细

标题和不同的字体粗细在层次结构中可以传达哪些内容比另一些更重要（或更不重要）。然而这种处理方式应该有节制地使用，即采用数量有限的字体样式。

图标

图标可以表示图表中不同类型的数据，以提高图表的整体可用性。

图标可以被用于：

1. 分类数据，以区分组或类别
2. UI控件及操作，如筛选，缩放，保存和下载
3. 状态，例如错误状态，无数据状态，完成状态和危险状态

当在图表中使用图标时，建议使用普遍可识别的图标，尤其是在表示操作或状态时，例如：保存，下载，完成，错误和危险。

在传达意义时图标补充了颜色的意义。

有标记的轴

有标记的轴或多个轴能够指示数据所展示的规模或范围。例如，折线图展示的是沿水平和竖直方向标记的轴的范围内的值。

条形图基线

条形图应该从基线（y轴上的起始值）上的0开始。从不为0的基线开始可能会导致数据被错误地感知。

轴标签

标签的使用应该反映图表中最重要的数据细节。轴的标签应该根据需要，并在用户界面中以一致的方式使用。它们的存在不应该妨碍图表的阅读。

文本方向

在图表中文本标签应该按水平方向放置，以保证其易于阅读。

文本标签不应该：

1. 被旋转
2. 垂直堆叠

说明和注释

说明和注释描述图表的信息。注释应该突出显示数据点、数据异常值和任何值得注意的内容。

1. 注释
2. 说明

在桌面设备上，建议在图表下方放置说明。而在移动设备中，建议将说明放置在图表上方，以便在交互过程中保持说明可见。

标签和说明

在简单的图表中，图表元素可以被直接标记。但是，密集的图表（或较大图表组中的部分）可以在说明中显示标签。

小型显示器

在可穿戴设备（或其他小型显示屏）上显示的图表应该是桌面端或移动端图表的简化版。

行为

图表为用户提供了可以控制所展示数据的交互模式。这些模式让用户关注图表中的特定值或特定范围。

以下推荐的交互模式、样式和效果（如触觉反馈）可以提高用户对图表数据的理解：

1. 逐级展开 提供了一种清晰的途径来揭示细节，可按需展示。
2. 直接操作允许用户直接对UI元素进行操作，以减少屏幕上所需的操作步数，直接操作包括：缩放和平移，分页，数据控件。
3. 改变透视图可以使一项设计服务于不同的用户和数据类型，例如数据控件和移动。

逐级展开

使用逐级展开的方式显示图表细节，能够允许用户根据需要查看特定的数据点。

缩放和平移

缩放和平移是图表中流行的交互方式，它们影响用户研究数据和探索图表UI的密切程度。

缩放

缩放改变了UI显示的距离。而设备类型则决定缩放的执行方式。

1. 在桌面端，通过点击并拖动或滚动的方式实现缩放
2. 在移动端，使用双指捏放的手势来实现缩放

当缩放不是主要操作时，（在桌面端）可以通过单击并拖动或（在移动端）通过双击来实现相同效果。

平移

平移能够让用户探索超出屏幕之外的UI。应该以对显示数据有意义的方式对其进行约束。例如，如果一张图表的一个维度比另一个维度更重要，那么平移的方向可以仅限于更重要的维度方向上。

平移操作通常与缩放配合使用。

在移动端，通常通过手势进行平移，例如单指滑动。

分页

在移动端上，分页是一种常见的模式，允许用户通过左右滑动查看上一张或下一张图表。

在移动端，用户可以向右滑动查看前一天的内容。

数据控件

可以使用切换控件、选项卡和下拉列表筛选或更改数据。

当用户调整控件时，这些控件也可以显示度量。

切换控件、选项卡和下拉列表意味着可以筛选或更改数据。

动效

动效可以加强并巩固数据间的关系以及用户和数据的交互方式。动效应该有目的地（而不是装饰性地）被使用，以表达不同状态和空间之间的关系。

动效应该合乎逻辑，平稳且能够快速响应，不妨碍用户的体验旅程。

在这一案例中，数据的动效设置在切换按天显示和按周显示的时候。在切换的过程中不显示所选日期范围之外的数据，从而降低了图表复杂性。

此处的动效显示了两张不同图表之间的联系。

空状态

空白的图片和表格可以显示一些表明在数据可用时期望发生的内容。

在适用的情况下，角色动画能够带来愉悦感和激励。

角色动画丰富了空白图片。

仪表盘

数据可视化可以在一系列的多个图表中展现，这在UI中被称为仪表盘。多个单独的图表有时比一个复杂的图表能够更好地传达一个故事。

仪表盘设计

仪表盘的目的应反映在其布局、样式和交互模式中。仪表盘的设计应该适应它的使用方式，无论它是一个演示工具还是一个深入研究数据的工具。

一个仪表盘应该：

1. （通过布局）优先考虑最重要的信息
2. 显示根据层次结构（使用颜色、位置、大小和视觉权重）排序的信息焦点

应该根据数据提出的问题对信息进行优先级排序。在本案例所示的操作仪表盘中，考虑了以下的用户问题：

1. 需要被注意的问题
2. 问题发生的时间
3. 问题发生的位置
4. 受问题影响的其他变量

分析型仪表盘

分析型仪表盘能够让用户探索多个数据集并发现趋势。通常这些仪表盘包括复杂的图表，这些图表能够发现数据细节。

使用情况包括：

1. 强调随时间变化的趋势
2. 回答“为什么”和“如果……怎样”的问题
3. 预测
4. 创建深入的报告

分析型仪表盘的案例有：

1. 跟踪随时间变化的广告活动表现
2. 跟踪产品在整个生命周期中的销售和收益
3. 显示城市人口随时间改变的趋势
4. 跟踪随时间变化的气候数据

操作型仪表盘

操作型仪表板旨在回答一组预定义的问题。它们通常用于完成与监视相关的任务。

在大多数情况下，这种类型的仪表盘会把当前信息安排在一组简单的图表中。

使用情况包括：

1. 根据目标跟踪当前进度
2. 实时跟踪系统表现

操作型仪表盘的案例有：

1. 跟踪呼叫中心活动，如呼叫量、等待时间、呼叫长度或呼叫类型
2. 监视云端应用程序的运行情况
3. 显示股票市场表现
4. 监视赛车的遥测数据

演示型仪表盘

演示型仪表板提供了关于感兴趣主题的详细快照。

这些仪表板通常包括一些小图表或记分卡，通过动态标题来解释每个支持图表中提供的趋势和见解。

使用情况包括：

1. 提供关键绩效的指标概述
2. 创建高级执行摘要

展示型仪表盘的案例有：

1. 提供投资帐户表现的概述
2. 提供产品销售和市场份额数据摘要

译者：杜雅黎

转载请注明：学UI网》Material Design Data Visualization 数据可视化

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

作者：BYMD

转载请注明：学UI网》基于地理位置的美食数据可视化设计

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

常使用数据可视化的APP大致分为这几类：「天气类」「生理健康类」「财务记账类」「数据分析类」「运动健身类」等。下面为大家介绍一些代表性的APP。

「天气类」

「墨迹天气」和「天气通」根据城市实景和当下天气对实时景观图进行模糊处理，增强产品的关联性和代入感。

「生理健康类」

Clue会根据不同阶段的心情做可视化，比如易孕期会用一些生理图形提醒用户你的状态。这或许会给我们做自己的产品带来一些思考。

你今天真好看是一款人工智能测肤美妆的应用，会使用各图表阐明你的肤质水平。

「财务记账类」

记账类APP和理财类APP几乎囊括了所有图表样式，折线图、饼状图、条形图都不在话下。

「专业数据分析类」

移动端设备的高速发展，使专业的数据分析平台不再局限于PC端展示，于是移动端的数据分析软件也应运而生。以下为友盟和神策商店图。

「运动健身类」

移动设备在消费市场得到很大的变化——从手机到可穿戴设备。移动设备越来越实惠，实现了前所未有的大面积普及。

大家对步数、饮食、体重等数据也更加看重。市面上做的比较好的APP有：keep、薄荷健康、小米运动等。

同事给我推荐了一个应用—garmin connect(佳明)，它的界面缤纷、数据丰富、但是却不会让人感受到焦躁，这里面包含了一些设计原理。

介绍这么多数据可视化为主的APP，相信大家对数据可视化已经有了初步的感受。想要做好数据可视化应该怎么着手呢？以下结合实际案例进行说明。

2.可视化数据图的配色

在上篇文章我们了解到，颜色是有温度和进退性的，不同的配色带来不同的体验。因此，可视化设计也需要考虑到配色对数据的影响。

「深色底」

深色底图表通常为了营造一种氛围和感觉，展示出的数据信息一般不会特别繁杂，数据选用亮度较高的色彩，这样数据信息容易从深色中跳出来。

「浅色底」

如果需要清晰展示大量的数据，建议选用浅色底，浅色底上识别度相对较高。但需要注意的是：如果数据信息量太小，浅色底上会显得页面太空，这会让用户觉得你的平台没有内容或者热度。当然，有经验的设计师可以通过图形质感、颜色等优化。

下面就以小米运动为例：我们对2个页面的阅读效率进行比较。在以数据分析为主、有大量数据的页面中，浅色底的页面可读性更高，阅读效率也更高。

「彩色底」

有时为了让页面更加生动，我们将数据信息展示在大面积色块上。商务金融类APP可采用用蓝色、绿色系作为底色。运动类APP可选用的色彩自由度更高，偏活力的色彩，如橙色、黄色、橘色等都可以。

「图片底」

图片底：为了让数据更有可信度和关联度，在一些天气类APP中经常会使用这种方式，图片内容与数据信息产生关联，提升可读性。

3.各类图表的使用场景

每种图表都会对应它适合的数据类型。作为设计师一定要了解它们之间的对应关系，使得设计有理有据。

「折线图」

显示为一组由单个线条连接的点；用于表示在一段连续时间内发生的大量数据波动，有单折线图和多折线图之分。

「曲线图」

显示为光滑的曲线；如果数据是连贯的，且点与点之间的数据具有分析价值，用曲线图比用折线图合适。

「饼图&环形图」

环形图可以理解为空心的饼状图。常用于显示部分相对总体的百分比。还可用来显示进度加载等。

「条形图&柱状图」

条形图可以理解为横着的柱状图。常用于展示同属性的数据、可以对比其数值。

「热度图 / 热力图」

常用于地理位置分布统计，进而可以分析景区、站点、高速等的人流分布状况。另外APP界面的点击热力图可以清晰展示哪个功能被点击的次数最多，给我们带来体验优化的依据。

「雷达图」

在比较多个类别程度和查看整体情况很适合，既可以查看自身整体情况，也可以对比多个方面的数据。这是一种展示效果不错的数据表达方式，在展示整体综合信息上很直观。

「仪表盘」

仪表盘设计最初来源于工业设计的车辆控制台，由于其专业、科技感的内核，现在多被一些强调科技、专业的产品所借鉴、例如网络监控、金融信用等。

4.图表运用到界面中去

了解基本的图表类型后，接下来的重点是图表的界面设计。移动设备的屏幕较之PC端小，用户每次可接收的数据信息量小，所以如何有效运用图表的设计是我们需要掌握的一项很重要的部分。

「单个数据」

页面中就展示一个比较重要的数据，如何设计？圆形是一个不错的选择，因为它可以在页面中形成视觉中心。不管是饼状图，还是环形图，或是拥有视觉中心的雷达图，都会让页面上呈现一个视觉重点。

上图的案例，为了让页面更加丰富，采用重色将界面撑满，求得视觉上的饱满。

「多组数据」

手机屏幕空间有限，多组数据在展示的时候一定要尽量让主次数据的图表类型不一致。曲线图、饼图、环形图、柱状图等基础图表，交替使用，这样使得整个页面层次清晰，内容丰富。最常见的错误就是设计师没有对信息区分层级，所有的内容看起来都一样重要。

当设计师面对几大模块展示大量的数据信息时，建议每个模块单独采用一种图表类型，各个模块的图表类型均不同，这样会减轻用户对数据展示的疲劳度。

5.可视化数据的动效

动效可以提升产品趣味性，尤其在展示大量数据信息时，使用动效能缓解阅读压力。数据图表中常见的动效有以下几种：

「动态呈现数据」

「导航切换」

「功能动态切换（点击按钮切换形态）」

「屏幕横纵向切换数据」

写在最后：希望我们都能好好把握数据可视化，把握数据时代，真正让数据驱动业务，驱动发展。不过我们也不要为了使自己的设计看起来炫酷而加上各种发光渐变，过分的动效导致加载无能，因为完美的方案不是没什么可以加，而是没什么可以减。

作者：一个辛普森

 转载请注明：学UI网》用户体验大小事—数据可视化设计五点论

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

图表的定义：可直观展示统计信息的属性，对知识挖掘和信息直观生动感受起关键作用的图形结构，是一种很好的将对象属性数据直观、形象地可视化的手段。

英文叫法：Chart。

用户对图形的敏感程度远远大于文字，所以产品就需要把数据信息可视化，用简单的图形表示出更多的信息量，而图表是数据可视化中最常用的表现形式。

接下来我们来介绍图表的具体构成及元素解析。

二  图表的构成

图表是由：标题、图例、刻度轴、数据展示、网格线、提示信息、水位线、时间轴组成，每一个元素都有他存在的意义。在实际使用中不一定非得把元素全部展示出来，精简化显示想要展示的内容即可。

三  图表元素解析

3.1  标题

顾名思义，标题就是图表的名字，标题是必不可少的元素。标题的内容一定要言简意赅，不要太长，能两个字写清楚绝对不用三个字。

标题的常用位置有 3 个：左上角、顶部居中、底部居中。

一般情况下，标题字号 / 色值要突出一些，用户第一眼看到 chart 的时候，要清晰的看到这个图表是做什么的。

特殊情况下，如果需要对标题有额外解释的话，两种展现形式：

• 增加提示图标；
• 增加提示语。

3.2  图例

3.2.1  图例的组成

颜色、名称、数值、单位。

3.2.2  图例的展现形式

圆形、开关、矩形、鼓包线、实线、虚线。

3.2.3 图例的位置

从左至右、从上至下。

3.2.4  图例的作用

• 标识出每个颜色所代表的的类别；
• 开启 / 隐藏数据显示；
• 图例显示的数值一般为当前值。

3.2.5  图例的颜色选择

同一组图例中，不要出现相近的颜色，否则在图表显示中分不清彼此。

产品使用中，要规范图例颜色使用，一般分为两种：

• 常用的图例颜色（颜色本身代表着行业中的某种含义），此类颜色需要是固定色值，无论哪个 chart 中，都是这个颜色；
• 无特殊含义的图例，可以规范出一个图例颜色的使用顺序表。那些无特殊含义的 chart 可以按顺序使用图例颜色，图例整齐划一。

3.2.6  图例过多时如何展示

• 如果图例可整合前提下，展示主要图例 / top n 图例，其他的图例做整合，增加个详情页来展示完整的；
• 如果图例不可整合/省略，则需要给出足够的展示空间。

3.2.7  共用图例

如果多个 chart 的图例一样，可进行合并，减少冗余图例。

3.2.8  图例省略

如果 chart 中只有一个图例的话，可省略。

3.2.9  图例名称限制

根据不同使用场景，为了更好的展示效果，要给图例名称设置一个最大值，超过最大值后省略展示。

3.3  坐标轴

坐标轴分为 X 轴和 Y 轴，常规情况下为 1 个 X 轴+1 个 Y 轴。不过特殊情况下也会用到2X+Y 或 X+2Y。

3.3.1  刻度值代表的意义

• 时间点：12:00；
• 时间段：周一、周二。

3.3.2  坐标轴使用规则

是否带单位：

• 如果刻度值的含义明确的情况下，可以不用带单位，比如：2018、2019、2020…；
• 如果刻度值含义有歧义的情况下，必须加上单位（具体是统一一个位置加单位，还是每个刻度值上加单位，则需要根据场景来判断）。

对齐方式（常用，但非必须）：

• X 轴：居中对齐；
• Y 轴：右对齐。

刻度值过多时如何显示：

• 可选择规律性省略刻度名称；
• 倾斜文字以显示更多的文案。

刻度值的选用一定要是同一个规律，禁止同距离的刻度值代表不同数据。

刻度点的样式使用规则：刻度的线朝外。

3.4  数据展示

数据的展示是 chart 中最为明显的地方，可以说如果只显示一个元素的话，就是他了。

数据展示的使用规则：

• 边界要清晰，不可虚化；
• 多个数据同时显示的时候，要保证每个数据都能清晰的看到，可以采用透明度来保证所有数据的显示。

3.5  网格线

3.5.1  网格线的作用

呼应坐标轴，美观度。

3.5.2  网格线的使用规则

• 线的颜色要弱化，不要喧宾夺主；

• 网格线使用实线居多，尽量不用虚线。

3.5.3  使用场景

横、纵、横纵结合、无网格线。

3.6  提示信息

通常情况下，提示信息用来标识出 chart 中重要点的数据信息，需要注意的是：重要信息尽量简化，信息量不要太大，言简意赅就好。

3.7  水位线

根据不同产品的使用场景，有的时候会用到阈值，当达到某个阈值后，就会触发某种联动。这个时候就需要有个水位线了，它起到警示的作用。

形式有两种，实线和虚线，颜色的选取则取决于产品的警告级别。

水位线可以是一个，也可以是多个，视情况而定。

3.8  时间轴

时间轴可以灵活地调节刻度值的上下限，从而更精确的看到自己想看的数据。

时间轴的功能及限制不是很复杂，所以就不过多解释了，需要用的话就用。

四  图表使用建议

4.1  折线图 line

4.1.1  定义

折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。

折线图是通过线条的波动来表示数据的波动，主要体现的是数据随着时间的推移而变动的图表。

4.1.2  使用场景

常用于观察一段时间内数据波动的浮动变化，比如：一天内内存的使用情况。

4.1.3  使用建议

• Y 轴刻度值选择要合理，当前显示的数据波动要最大化的显示；

• 重要节点可以单独做重点标注；

• 数据拐点要平滑，不要太锋利。

4.2  面积图 area

4.2.1  定义

面积图和折线图比较类似，区别在于面积图把数据区域做了个面积划分，让数据的显示更加清晰。

4.2.2  使用场景

面积图展示尽量不要超过 3 个图例，否则数据多的情况下，数据的展示会特别乱，影响观看。

4.2.3  使用建议

• 面积区域要和折线的颜色用统一色系，不要换色系；

• 面积区域一般要比折线颜色浅一些，这样视觉上更加让人舒适；

• 如果多条数据情况下也用面积图的话，面积区域尽量使用透明度，否则有的数据会被遮挡看不到。

4.3  柱状图 bar

4.3.1  定义

柱形图，又称长条图、柱状统计图。用来比较两个或以上的价值（不同时间或者不同条件），只有一个变量，通常用于较小的数据集分析。

4.3.2  使用场景

• 柱状图分为横向和纵向两种展现形式。
• 用于在同一维度下不同数据的对比，用柱状图更能清晰的对比出数据的差异化。

4.3.3  使用建议

• 柱状图的厚度不要是固定值，要做成自适应来应对不同尺寸的分辨率显示；

• 厚度与间距的对比要合理设计；

• 可使用小圆角，千万不要用大圆角，太丑了……

• 如果想要强调某个柱子的话，可以进行颜色区分，但是柱子颜色不要超过 2 个（同一维度下）；

• 如果想要在柱子上显示数值的话，使用建议（下面的顺序为推荐顺序）：
  • hover 的时候出现数值；
  • 数值默认在柱子上显示；
  • 数值在柱子顶部 / 右侧显示。

4.4  饼图 pie

4.4.1  定义

饼图仅排列在工作表的一列或一行中的数据，它是有一个总和数据，方面查看每个类别分别占总数据的百分比的一种图表。

4.4.2  使用场景

• 常用于做总结、年度汇报等；
• 所有数据相加必须是 100% 才可用。

4.4.3  使用建议

• 每个数据要使用单独的颜色来表示，不要有相同颜色；
• 饼图中不能有负值；
• 图例数量没有限制，但是如果遇到可以合并的图例，可以进行合并；
• 饼图的开始点为 0/12 点位置。

4.5  环形图

4.5.1  定义

环形图是由两个不同大小的圆叠在一起，切割中心部分得到的一种图形。

4.5.2  使用场景

• 环形图有一个独有的特点，就是可以在中心圆的位置突出某一项指标的数值。
• 它常用于做数据的监控，监控某一类指标是否正常。

4.5.3  使用建议

• 环形图的开始点为 0/12 点位置；
• 环的粗细要合理，不要太粗和太细；

• 环形图的两个圆要从中心对齐。

4.6  堆叠面积图

4.6.1  定义

堆叠面积图是把数据面积按顺序逐步堆叠起来的一种图形。

4.6.2  使用场景

常用于不同资源中流量 / 容量的使用。

4.6.3  使用建议

• 不要有重复的颜色；
• 尽可能的把数据量按大小的顺序，由下至上的堆叠。

4.7  堆叠柱状图

4.7.1  定义

堆叠柱状图是把数据柱状图按顺序逐步堆叠起来的一种图形。

4.7.2  使用场景

常用于不同维度下相同几个指标的展示。

4.7.3  使用建议

• 不要有重复的颜色；
• 按重要等级由下至上排序。

4.8  非常用图表

上面介绍了常用的图表的使用建议，但是图表类型远远不止于此，还有很多非常用的图表类型，这次我先给大家列出来，如果大家感兴趣的话，我后面再写一期冷门图表的使用建议：

雷达图，散点图，K线图，盒须图，热力图，旭日图，桑基图，树图，漏斗图，仪表盘。

五  常用的图表开源网站

5.1  echartsecharts

https://echarts.apache.org/zh/index.html

5.2  highcharts

https://www.highcharts.com.cn/

5.3  antv

https://antv-g2.gitee.io/zh/examples/gallery

总结

Chart 是数据可视化必修课中最重要的模块之一，不可忽略。只有了解每个 chart 的定义及使用场景，才能在产品中用到最合适的那一个。

作者：Luckgg

转载请注明：学UI网》数据可视化必修课 – 图表篇

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

表格是一种数据可视化的一种形式，可以查看和处理大量数据，它主要承载了数据的收集、整理、组织、展示、对比和归纳。

二  表格的设计原则

2.1  易读性

表格的层级一定要划分的非常清晰，层级分明。你要让用户更关注的是数据本身，而不是花里胡哨的样式。

2.2  可寻性

列表以易于浏览的逻辑排序，提供合适的搜寻组件帮助用户快速查找信息。

2.3  高效性

表格要用最短的时间告诉用户想要得到的信息。

2.4  灵活性

可以让用户根据自己的习惯及兴趣自定义自己的表格展示，比如排序、筛选、调整表头顺序等功能。

三  表格的构成

外部区域：标题、操作区、筛选区；

内部区域：表头、表体、表尾。

介绍完表格的构成，我们再来把每一个元素拆解出来详细介绍。

四  表格元素解析

4.1  标题

标题是整个表格内容概述的名称，此名称尽量简洁明了，不要太长，能两个字写清楚绝对不用三个字。

如果标题名称难以理解的话，可以加二级提示，有两种常用样式：tooltips（常用）、二级提示语。

标题的位置一般在左上角。

4.2  操作区

对表格内容的增删改等操作的区域。

使用建议：

4.2.1  有且只有一个主操作

特殊情况下可以没有主操作，但不能有两个主操作。

4.2.2  样式统一

同一个产品中，操作区样式规范要保持一致。

4.2.3  操作的优先级

根据使用的优先级，把常用的操作放到一级展示，不常用的收到二级展示。

4.2.4  不同操作状态区分要明确

不是所有的操作都是可以直接用的，比如有的操作在没有选择内容的时候是 Disable 状态，那这时候就要和其他可操作的有明显的样式区别，否则容易让用户分不清可不可以操作。

4.2.5  刷新按钮

有很多同学对这个操作是不是有些疑惑？有人觉得浏览器都有刷新功能啊，干嘛还要多此一举再加个刷新。其实这个刷新功能还是很有必要的，这个刷新只针对于列表内的内容。

在有的后台管理界面中，因为数据量很大，如果每次刷新都用浏览器自带刷新的话，他会重新加载整个页面的内容，很不好用。很多情况下，用户只想重新加载一下列表的内容，那这个刷新就很好用啦。

同时刷新后要有即时反馈，告诉用你他点完操作后目前处于哪个阶段中。

4.2.6  导出功能

此功能可以把列表内容导出为你想要的格式（一般为 word / pdf）。

数据量较大的列表中，导出功能可以很方便的把自己过滤的内容下载到本地进行其他需求的查看。

导出内容的范围是哪些一定要事先想好，一般下载内容的范围以下几种：

• 当前页所有列表内容（常用，而且实现难度很低）；
• 经过二次过滤后，导出所有页上的列表内容；
• 所有页的列表内容（不常用，而且实现及数据处理难度会非常大，慎重选择）。

4.2.7  导入功能

既然可以导出，就有导入。导入报表对文档会有要求，一般都是固定格式的文档，而且文档与列表中的字段都可以一一对应上，才可以完美导入。导入功能中 word 和 excel 是最常用的格式。需要注意的是，导入文档后最好有二次确认提示，告诉用户上传了哪些内容，同时该内容是否与现有的列表字段有冲突。

4.2.8  自定义内容

自定义分两种：

• 可以设置某列内容是否展示（需要注意的是：列内容展示数量可以不设置上限，但必须设置下限）；
• 可以设置每一列内容的左右排序。

如果表格内容比较多的情况下，这两个功能是很有必要的，如果内容少，则可忽略这两个功能。

那怎么区分内容的多与少呢？

我的理解：常用分辨率下，一屏可显示完整内容的话为内容少；反之则内容多。

4.3  Tab（标签切换）

可以快速切换不同维度下的表格内容。

使用建议：

• 不同状态区分要明显；
• Tab 数量不宜过多，如果不可避免的数量过多的话，一般有两种方案：
  • 最多显示出 5 个 Tab，超过 5 个 Tab 放在“更多里面”；
  • 交互上支持左右滑动 / 切换 Tab。
• Tab 只放文本，最多可以放个 icon，尽量避免其他干扰信息；
• Tab 信息要精简。

4.4  筛选区

筛选区是对表格数据的主观再处理，用户根据筛选功能可以得到更精准的信息。

4.4.1  搜索功能：

4.4.1.1  模糊搜索 or 精准搜索

搜索首先要确定哪几个字段可以被搜索到，名称？编号？等等…

模糊搜索使用的频率居多，毕竟有时候用户不一定可以精准的记住想要搜索的准确信息。不过也不是绝对的，两者皆可选择，根据产品选择即可。

4.4.1.2  单字段搜索

输入单字段进行搜索，比较常用的方式之一。

4.4.1.3  多字段组合搜索

可以输入多个字段进行组合搜索（取并集），一般交互方式为回车完成书写。此方式比单字段搜索更加精准，数据量过大的时候优势就很明显了。

4.4.1.4  切换类别搜索

可以设置几个常用的类别来快速切换搜索的维度，方便用户使用。

4.4.1.5  多类别组合搜索

多类别组合搜索适合更加复杂的列表内容，并且类别名称会展示出来，可以比较清晰的看到用户用的哪种类别名进行搜索的。

4.4.2  筛选的样式

输入框、下拉选择、日期选择器、单选、多选。

4.5  表头

每一列列表的小标题，是对整列内容的描述。

表头区域比较常用的几个功能：排序、过滤、进一步解释/说明、拖拽排序、拖拽增加 / 缩小列宽。

4.6  表体

表体承载了表格的主要内容，它的内容形式有很多：文本、icon、进度条、标签等等。表体样式分为两种：斑马线和线条分割。

使用建议：

• 内容决定表格的高度，一般设置 2~3 种行高就可以满足大部分场景了；
• 把全局唯一且最重要的字段放在第一列，比如：名称。同时可以把名称固定在列表左侧，就算列表横向内容过多的时候，也可以第一时间看出区别；
• 要设置最大宽度和最大高度，避免特殊情况下的内容展示；
• 对齐方式：普通文本左对齐，数字类右对齐（记住就行，这是规范）；
• 最多支持二级列表，不可再多；
• 可以把一些常用的操作放出来，放在列表最后一列。

4.7  表尾

表尾主要是展示表格的统计信息、分页、跳转页面等。每页显示条数常规情况下默认为 10/页，最多 200/页，再多的话加载速度会变慢，影响使用体验。

五  列表详情交互展现

5.1  弹窗

• 模态对话框：用户在当前页面弹出一个弹窗，除此弹窗内容外不可操作其他区域内容，产品的主观意识较强。
• 非模态对话框：也是弹出个弹窗，但是与模态对话框不同的是它不打扰其他用户操作，此弹窗存在的时候，用户同时也可以操作其他区域，产品的主观意识较弱。

5.2  抽屉

抽屉现在使用的频率也是蛮高的，它的好处很明显：在当前页面弹出个抽屉，可展示的内容区域比弹窗多了很多，同时如果区域不够用的话，还可以增加 Tab 来展示更多信息。而且不同资源的抽屉切换也比较方便。

缺点就是：并不能完全让用户的聚焦于某个信息的详情，存在一定程度的信息干扰。

5.3  跳转页面

直接跳转个新页面作为详情，好处就是可以展示更多的内容信息以及可以让用户更聚焦于当前内容。

缺点就是：新开页面这种操作本身就比较重，如果在当前页面可解决的事情，切记不要让用户新开页面。

5.4  嵌套

嵌套就是上面提到的二级列表，它一般用于一级列表的内容补充，并且内容不宜过多。

在最后

在数据可视化中，表格是最常见的一种，它的知识点有很多，本篇文章只是到目前为止我的一些认知，如果有漏掉的知识点欢迎指教，我们都是学生，都要学习。

作者：Luckgg

转载请注明：学UI网》数据可视化必修课 – 表格篇

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司