原文地址： 小六可视化设计（公众号）
作者 ：Mr小六
上期给大家普及了可视化大屏设计的概况，从硬件、GIS数据、三维建模、动效设计、图形技术、渲染引擎的技术架构等六个方向的总结。今天给大家分享可视化中UI设计相关知识的总结。
可视化大屏UI
上文说到可视化设计是一个综合类交叉学科，同样在大屏UI设计中也是一个相对复杂的流程，我们需要对大屏的布局、风格、主视觉、信息图表、字体、规范、动效等方面综合考虑，推导设计方案。
设计前： 一定要对用户需求充分分析和理解 ，要知道大屏的展示场景 及设计分辨率 ，大屏的拼接方法都要有一定的了解，最后是跟开发沟通下实现的工具与方法 。
设计中：构思布局 ，可以在纸上简单画一下。根据业务需求定义设计关键词进行设计的提炼与分析，方便自己找参考。颜色上背景深色为主，为了更好地聚焦，数据可以采用亮色，有一定的对比关系，便于业务信息传达。字体上可以采用系统默认字体 数字采用特殊字体包的形式（这块根据实际需求，切记不要照搬）。图表选择恰当的展示形式，同时保证视觉上的统一（分清页面的主次关系 ，图表的展示切莫设计过度，容易造成抢主体）
设计后： 再次校验 信息层级、文字大小、图表等各层级间的对比关系是否传达准确，与技术同步沟通下技术的实现性。最后开发完成后，要拿演示demo去现场测试 ，看下整体展示效果，测试输出是否有问题，有无拉伸问题，拼接缝与内容有无穿插，及时与开发进行页面的校验工作，最终才算是设计完成。
下面针对可视化设计中 布局、风格、主视觉、信息图表、字体、规范、动效等7个方向 细节点的拆解
一、布局
通过硬件设备信息可以得到可视化的设计尺寸，基于尺寸新建设计画布后，第一件事就需考虑页面的整体布局。可视化大屏设计从信息布局到数据表达，都需要设计师对业务深入了解后才能用数据助力业务决策。
常见的大屏布局：居中结构、左右结构两种种常见的布局形式以常规的16：9模板为例，下面列举的一些常见的布局形式，供大家参考。
居中结构
异形超宽拼接屏幕
左右结构
布局的原则一定要主次分明，根据业务需求抽取关键性的指标，提取主要信息。可以在纸上大概画一下，然后在软件里具体细化布局。避免次要信息的面积过大，喧宾夺主，影响整体的视觉效果。
二、风格
提起可视化大屏，大家都会联想到：科技感、FUI、HUD这些关键词，可以说可视化大屏跟科技、数据这两词是强关联的，风格上也基本是这一类方向。
定义设计风格： 一般会基于业务需求场景去定义几个设计关键词，根据关键词去找一些参考图，推导出贴合业务的设计风格。
我们可以通过调整颜色、装饰细节、主视觉、字体等一些细节点控制区分不同的设计风。下面拿图表举例，我们在做设的时候，只需调整卡片和标题的装饰，就能够展现出不同的设计风格。
三、主视觉
主视觉部分大致分为：地球、地图、智慧城市、行业类业务展示等。目前比较容易出效果的都会采用三维模型的处理方式。
地球： 粒子地球、地图贴图、地球模型。
地图： 第三方在线地图（百度、高德、腾讯、谷歌）基于 地图开放平台进行个性化配置。或者通过地理位置数据建模：如全国和各个省份的轮廓模型。
智慧城市： GIS参数化生成简模和重点楼宇定制化建模。
行业类： 多数为定制化建模。如工业类、医疗类、能源类、园区、学校、港口、工厂、仓储库房、零售、工程、安防、国防军工等。
以下图片源于DATAV
主视觉是可视化设计中的一大难点，不光是设计落地的时候也会有需要注意的点，这里建议大家在做之前一定要充分跟开发沟通，确认好技术选型，方便后期输出跟开发更加高效的对接。
四、信息图表
图表的设计原则是易理解、可实现，能够准确表达数据意图，给用户传达明确信息。
以下图片源于网络，如侵删
上图通过通过使用场景可分为比较、联系、构成、分布四个维度解释图表的不同属性类别。在做可视化大屏设计的时候可以参照上图，选择对应的数据图表。
比较
两个及以上变量数据，一是基于分类不同的对比，二是基于时间维度的对比。常见的图表：条形图、柱状图、雷达图、玫瑰图、桑基图等
联系
两个及以上数据之间的相关性，随时间变化比较关联。常见的图表：散点图、气泡图、多级饼图、热力图、力导向图等。
构成
指标里的数据都由哪几部分组成、每部分占比如何。常见的图表：饼图、环形图、堆积面积图、堆积柱状图、瀑布图等。
分布
指标里的数据主要集中在什么范围、表现出怎样的规律，想表达两个数据点之间数量的演变过程。常见的图表：阶梯折线图、面积图、直方图等。
基于图表的类型可分为：饼图、线形图、柱状图、混合图、面积图、散点图、极坐标图、关系图、树图、桑基图、漏斗图、热力图、还有其他图表类型等。
饼图
适合展示分类的占比情况，不适合展示分类过多（超过9条数据）或者差别不明显的场景。
线形图
折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。
当水平轴的数据类型为无序的分类或者垂直轴的数据类型为连续时间时，不适合使用折线图。同样，当折线的条数过多时不建议将多条线绘制在一张图上。
柱状图
柱状图提供了分类数据的可视化展示，基于不同的数据类型有以上几种不同的形式。分类数据是将数据分组成离散的组，例如月份、年龄组、鞋码和动物。这些类别通常是定性的。图表上的条形图可以按任何顺序排列。
混合图
折线图和堆叠柱状图的组合图表。同时显示两个坐标轴，用于展示两种不同类型的数据。
适用于带有细分分类的累计数据大小以及与之相关的趋势数据，例如在过去十年全国三大产业的具体产值，以及GDP增长率。
面积图
面积图强调数量随时间而变化的程度，也可用于引起人们对总值趋势的注意。适合于比较多个变量随时间间隔变化趋势。
散点图
散点图是一种使用直角坐标来显示一组数据的两个变量值的图表。数据显示为一个点的集合，每个点都有一个变量的值决定水平轴上的位置，另一个变量的值决定垂直轴上的位置。
通常用于显示和比较数值，不光可以显示趋势，还能显示数据集群的形状，以及在数据云团中各数据点的关系。
极坐标图
基于直角坐标系的径向变形（相当于把直角坐标卷起来）。适用于显示三个或更多的维度的变量对比或者部分与整体的趋势。
关系图
可以展示数据的占比情况，还能厘清多级数据之间的关系。 通常用于可视化大量元素之间的复杂关系。
树图
树图是一种流行的利用包含关系表达层次化数据的可视化方法，是研究多元目标问题的一般工具。 适合展示数据之间的层级关系，适合6条以上数据。
桑基图
一种特定类型的流程图，用于描述一组值到另一组值的流向，图中延伸的分支的宽度对应数据流量的大小。用以展示数据的层级关系。常用于可视化能源或成本转移，也帮助我们确定各部分流量在总体中的大概占比情况。
漏斗图
一种直观表现业务流程中转化情况的分析工具，总是开始于一个100%的数量，结束于一个较小的数量。通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节，进而做出决策。 适用于业务流程比较规范、周期长、环节多的流程分析，比如流程流量分析、转化率分析。
热力图
将数值大小通过色块有序且紧凑地在坐标系中呈现。 适合呈现多组数据连续的数值分布，适合做数据的预测统计，可以在图片上直接展示热度。例如展示城市在不同时间段打车热度情况。
其他图表
词云图适用于对比大量文本或绘制特定形状的词云。水球图适用于多个百分百数据呈现。子弹图用于表达多项同类数据的对比，可以表达一项数据与不同目标的校对结果。 维诺图适用于层级数据比较大小，同时能看到各层级之间的情况。金字塔图适合展示分类的占比情况，不适合展示分类过多或者差别不明显的场景。
五、字体
文字是可视化展示中最重要的构成要素之一，可视化大屏设计中字体的运用其实原理跟网页 app的 逻辑基本一致。在字体选择上会基于业务需求选择对应的字体，一会会与设计风格相结合。这里要注意的是字体有无衬线、字重、字距等。
大屏设计中，中文字体一般会采用浏览器默认字体（微软雅黑、思源黑体、苹方等）页面中标题会采用特殊字体处理，常用的字体有：优设标题黑、旁门正道标题体、时尚中黑简体、方正正中黑体 等。英文数字字体推荐：Din、Ds-Digtal、Bebas、Acens、DS-DIGIB、Roboto等。
六、规范
建立规范的主要目的是：保证设计的一致性、提高开发效率和还原度、方便迭代 ，辅助设计和开发更好地完成设计的协作。
可视化设计中规范一般会分为：色彩、文字、图表、标题控件等，跟网页端规范同理，这里就不一一赘述了。
七、动效
大数据可视化大屏设计少不了动效，动效是可视化重要的组成部分，动效能增加观感体验，凸显关键产品内容、强调功能信息关联，帮助用户理解产品、情感化互动。但过分的动效极其容易喧宾夺主，影响用户阅读，反而弱化了数据的展示。
动效的设计原则
动效应优先满足核心内容、故事线。常见的大屏动效 - 展示类，用于突出产品核心功能和特点。界面信息按照一定的规律呈现，引导用户的视觉流向。
好的大屏设计应该是数据展示模块最好动效不易过多，要有一定的主次关系变化，例如一个动画表现的视觉强，另一个就表现稍弱化，有强有弱、有主有次节奏才会舒服，同时动效要结合数据变化，考虑极端情况的展示效果，最终输出一套完整的动效方案。
结语
以上通过布局、风格、主视觉、信息图表、字体、规范、动效等7个方向总结的基本知识和事项，能帮助我们快速进入大屏设计及避免一些坑。由于篇幅原因字体、规范、动效没有详细拆解说明，后面会陆续更新相关文章，感谢大家支持。可视化体验远远不止这些。欢迎大家提出更多意见和建议，我们一起前行。
最新潮流中英文字体合集
字体大小：449MB
支持系统：WIN&MAC系统
支持软件：适用于所有软件
获取方式：请查看文章底部
今天给大家带来了
潮流中英文字体合集
非常具有设计感
超级实用，建议收藏
来看下应用效果展示吧
1
A-OTF 明朝体
2
方正超粗黑繁体
3
装甲明朝
4
汉仪瑞意宋
5
東風明朝
6
小塚明朝
7
A-OTF リュウミン
8
方正风雅宋
9
思源宋体
10
A-OTF 光朝
11
筑紫明朝
12
汉仪旗黑
13
思源黑体
14
方正正大黑简体
15
方正兰亭黑简体
16
鸿蒙字体
17
TrueLogoJr-Ultra
18
A-OTF カクミン Pro
是不是很棒的资源呢，各位设计大大抓紧来领取吧
赶紧收藏一波，必要时候真的很有用。
关注微信公众号【阿香素材】，在公众号对话框输入“1626”,按照公众号提示领取
相关问答
统一字体菜单栏-文字-查找字体1.文档中的字体点查找可看到选中的文字是什么字体。列表上有显示使用了几种字体。2.选择系统中的字体替换字体选择:系统3...
1、在浏览器的搜索框内输入【字体下载大全】,点击【搜索一下】。然后在搜索页面中会看到各种字体,选择体仿宋gb2312下载下来。2、将下载的打包文件解压,打开...
一些哥特字体,有的字体网会有分类hi,暗黑风格的中文字体大多选择硬朗,锋利的字体,最总要是自己设计加工。希望能帮到你。适合制作黑暗封面的字体...
方正简体黑字体-写内容方正超粗黑黑、方正小标宋字体-写标题我经常用的就这几个字体。诚心为你解答,给个好评吧亲,谢谢啦方正简体黑字体-写内容方...
个人喜好不同,难以明确哪个字体更好看。但就我个人而言,我比较喜欢小米手机默认的苹方字体,它的字形美观大方,阅读起来也比较舒适。当然,不同的字体有不同...
宋体,黑体,属系统自带的字体!带艺术效果常用的有:方正综艺体,时尚中黑体,汉真广标体,方正正黑体系列(共六个),华康俪金黑等。人名字幕用正楷、隶书、仿宋、魏...
微软雅黑和方正黑体简体有什么区别,我电脑里有微软雅黑,为什么安装不了方正黑体GBK?说是会替换哗法糕盒蕹谷革贪宫楷掉微软雅黑,为什么,做东西很急啊,,,方正...
如果是具体的字体文件名称的话,根本就不存“方正仿宋”,只有“方正仿宋简体”“方正仿宋繁体”“方正仿宋_GBK”,硬要说区别的话,前者是一类风格字体的统称,...
[最佳回答]毛笔字体都分为:1、正楷;2、隶书;3、魏碑;4、篆书;5、行书;6、草书.1、正楷也叫楷书,楷书也包括小楷.楷书字帖有:《晋唐小楷五种》(小楷)、《晋王献...
中国文字是中国书法的基石。丑书彻底毁坏了中国文字的结构,用模糊不清的线条或谁也不认识谁也不承认的符号来替代文字,已经完全失去了中国文字的本来面目。既然...
