首页

大数据可视化界面设计之七:想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

博博

在如今这个时代,越来越多的信息和内容呈现开始依赖数据驱动,也开始有更多的场合需要信息图来辅助呈现,对于可视化数据,从来没有像现在的要求这般高。但是另一方面,我们周围充斥着大量错误的图表呈现,希望这篇文章提供的 20 条建议能够帮你设计出更好的信息图


1、选择正确的图表类型


不同的图表类型所承担的功能是截然不同的,不合理的数据呈现会容易让用户误读。同样的数据可以使用不同的图表呈现出不同方面的特征,因此,在设计信息图之前,先理清需求,再来选择使用哪种图表能够更好地呈现。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


2、根据数据的正负值选择正确的绘图方向


当使用数据在0的左右波动,产生正负差异的时候,请使用基线来正确反应正负关系,不要在同一侧来呈现数据,这样很容易带来误读。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


3、始终从0处开始绘制条形图


和折线图不同,条形图如果从非 0 的位置开始,确实更容易反应趋势,但是给所体现的数据量级和特征是失真的。比如在下面的案例中,B看起来是D的3倍以上,但是实际的情况是,两者差异并不大。所以需要从座标 0 处开始呈现数据,这样会更准确。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


4、折线图应该清晰呈现Y轴上的趋势变化


对于折线图,需要考虑一下 Y轴上的尺度,因为如果单位太大,那么折线图所呈现出来的波动幅度不够大,趋势的表达也不够清晰。这个时候,建议调整Y轴上的单位大小,确保折线的波动幅度大概占整个Y轴的 2/3 即可。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


5、使用折线图的时候注意时间


折线图是使用线条连接特定时间节点的特定数据的一种数据呈现形式,它有助于说明随着时间推移,某些情况的变化,但是当间隔时间频率不对,参差,缺失,那么折线图的数据可能会无法对应,这个时候使用条形图其实是更容易呈现的。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


6、不要使用平滑的折线图


平滑的「折线」在视觉上看起来是愉悦,但是它歪曲了背后的实际数据,也很难读到关键的转折点数据。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


7、避免让双折线互相交叉


通常,为了为了节省可视化设计的空间,设计师会采用双折线来呈现数据,但是在数量级不对等的情况下,折线图会很难读,甚至容易会误导用户,这个时候,建议分开使用2个不同的座标系来呈现,更加易读,同样可以看的出趋势,也不会得出错误的结论。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


8、限制饼图中的扇形的数量


饼图是最常用但是也是最容易误用的图表之一,在绝大多数的情况下,条形图是更好的选择。如果你决定使用饼图,那么这里有2个基本的建议:

不要超过7个不同的扇区,让饼图尽量简单
你可以将额外的片段分组到「其他」的扇区中

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


9、在饼状图中直接标注对应的数据


没有合适的文本标签说明的情况下,无论信息图设计得多好都没有意义,直接在图表上进行明确的标识,才会对观看者产生价值,需要观看者自己去关联的设计是失败的。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


10、不要在扇面上做标注


不要将数值直接放置在饼状图的扇区上,在较小的扇区块上数据会非常难读,相反,使用引线来指引数据对应的区块会是更好的方法。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


11、控制饼图中扇面的排序让其方便阅读


对于饼状图的切分方式,有2种常见的顺序:

将最大的一块置于12点钟方向,然后顺时针按照大小来排布所有的块
将最大的一块置于12点钟方向,然后在右边放次大的块,右边放置再次的块,基本上就是越大的扇区约靠上。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


12、避免随机排列


同样的建议也适用于其他的图表,不要使用字母顺序来进行排列,不要使用笔画排序,而是按照数据大小来进行排列,水平条形图就将最大数据放在顶部,垂直排布则将最大数据的放在左侧,减少阅读的时候的信息分辨的障碍。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


13、不要牺牲信息图的可读性


饼状图通常是最不容易读的图表,因为它很难对相似的数据进行对比,所以在将它设计成环状的时候,我们可以使用辅助的数据来呈现,但是一定不要牺牲彩色扇区的可读性,这样看起来高级但是并不具备基本的可读性。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


14、视觉效果不要影响数据的呈现


不要让不必要的视觉效果来分散用户的注意力,这可能会导致用户对于数据产生误解,通常你应该避免使用:

3D元素和阴影
渐变和失真的色彩
斑马纹或者过多的网格线
装饰性过强的字体

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


15、选择和数据属性匹配的配色


配色是可视化设计当中绕不开的一个重要的部分,在设计的时候可以考虑以下三种不同的配色方案:

使用定性的配色方案,不同的色相对应不同的元素,确保在整体配色的可访问性
使用符合一定顺序(比如明暗)的近似色的配色,呈现出一种连续的色彩变化
横跨冷暖色调的配色方案,将中性色置于中间,用来呈现存在正负关系的数据变化

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


16、使用无障碍的配色


根据目前的统计数据,大概 12 人当中有一个人存在视觉障碍,有的是色盲,有的是色弱。你的图表设计需要确保兼顾到这一部分用户的需求。

在配色方案当中使用不同饱和度和明暗的色彩
使用去色效果来校验你的配色的对比度

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


17、关注内容的易读性


在信息图的排版易读性上同样是有要求的,要避免分散用户的注意力,不会制造视觉障碍:

选择清晰的非衬线字体,避免使用衬线体和过度装饰的字体
避免使用斜体、粗体和全大写字体
确保和背景之间的信息对比度
不要旋转文本

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


18、使用水平条形图来优化倾斜标签


这是一个非常简单的技巧,能够确保用户在阅读的时候足够轻松,不会因为倾斜的文本扭伤脖子或者加重落枕的症状。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


19、事先选好你的图表库


如果你的设计项目是面向 Web 或者移动端的交互式图表,那么你需要考虑的第一个问题就是,要用什么样的图标库。如今不同的图表库在功能模块和规则上各不相同,你需要在一开始就基于你的需求和设计想法,做出选择。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


20 、不只停留在在数据静态呈现上


信息图本质上是在对数据进行优化处理、呈现的基础上,帮助用户进行探索,最大化地从数据中获得信息洞察,让数据发挥价值。在下面的 iOS Health 应用就是在最大程度地反映数据应有的意义和功能。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


结语


对于所有想要在数据的可视化设计上有所建树的同学而言,强烈建议阅读一下 Dona M.Wong 所撰写的《华尔街日报信息图设计指南:呈现数据和事实的注意事项》,本文中很多内容都受到了这本书的启发。

作者:陈子木

转载请注明:优设网

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



更多精彩文章:

大数据可视化界面设计之一:可视化大屏设计快速入门指南

大数据可视化界面设计之九:超全面的数据可视化设计指南:设备篇

大数据可视化界面设计之十:数据可视化必修课:表格篇





大数据可视化界面设计之六:想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

博博

数据可视化的目的,是要对数据进行可视化处理,以能够明确地、有效地传递信息。” ——Vitaly Friedman

如何让人们在海量的数据中,发现数据的规律,或者清晰的发现特异的数据,那数据可视化是一个有效的表达方式。

数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。如图

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

马克·吐温有一句名言“世界上有三种谎言:谎言,该死的谎言和统计数字。”人们经常曲解数字,谎言并不是源于数字本身,而是错误或不负责任的使用数字的人,向他人展示数字的时候,你有责任展示出真相。——《数据之美》

数据真相的展示离不开数据图表的合理选用,那么如何正确的选用呢?就来聊一聊基础数据图表类型的选用及辨析。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

常用的基础图表类型


第一部分:选用合适的图表类型


在数据可视化设计工作中,折柱饼图表是最常用的,同时也是最容易混淆的。一组数据既可选用折线图,又可选用柱状图的时候,设计师的内心往往会产生“我该选用哪种图表能更好地将数据传达给用户呢”的疑惑中。

基于上述疑问,下面给大家一些设计指引供参考。

1. 柱状图 VS 折线图

折线图主要表示一段时间内数据变化趋势,柱状图用于描述分类数据之间的对比。如果不需要展示数据的变化趋势,建议不要使用折线图,而选择柱状图。

相较于折线图,柱状图更多的关注数据之间的对比而非趋势。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

2. 柱状图 VS 条形图

在大多数情况下,折线图和柱形图是可以互相替换的。

1)用户针对横向长短的敏感性高过竖向,涉及到排行时最好使用条形图。

2)标签较长时,使用条形图。例如:城市人口流入量的数据展示,由于城市名称文本比较长,建议使用条形图。

3)当图表画布高度大于宽度时使用条形图,利用高度空间的富余,展现更多的条形。

反之,建议使用柱状图。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

3. 柱状图 VS 饼环图

基于人的认知特征,人对面积、角度的敏感性没有对长短的敏感性强。当类别的值接近时,不建议使用饼环图,除非是强调单个数据在总体中的占比,突出数据在群体中的特点。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

4. 折线图 VS 面积图

通常情况下,面积图是折线图的一种衍生。在面积图里,数轴和线之间的区域通常用颜色或阴影来增加易读性。面积图数据集之间差异化部分在视觉上得到突显。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

5. 饼图 VS 环图

从本质上来看,饼图与环图属于同一类图表类型。但二者在数据可视化的表现上各有侧重。从图形映射角度来说,弧长比面积、角度更易被识别、更有效。因此,相对饼图,环图让数据更具可读性,同时,可以将强调数据放置在环图中部,引起用户关注。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

6. 堆叠柱状图 VS 饼图

如果在饼图或环图的基础上增加一个多数据的对比,就需要引入堆叠柱状图。相较于饼图,每一个单个堆叠柱状图就是一个饼图的变形,可满足用户的单一数据的部分之间的对比关系。将堆叠柱状图横向排布,就实现了整体数据之间的对比,而饼图是不能进行整体数据的对比。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

7. 堆叠面积图 VS 堆叠柱状图

堆叠面积图强调数量追随一个数据变化而变化的程度,同时强调部分和整体的变化趋势。

堆叠柱状图强调的是整体的对比,也可以直观的看出每个系列的值,尤其是当需要看某一单位的综合以及各系列值的比重时,最适合。

当日期数据点较多时,比如展示近50年某一组数据趋势的变化时,建议使用堆叠面积图,可动态交互,如X轴放大缩小可较为直观的展示数据。当日期跨度较小,如近7天、近3天某一组数据的的变化关系时,建议使用堆叠柱状图。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节


第二部分:应用中需要注意的细节


1. 折线图

1)为了可读性,折线图线的数量建议不要超过5条。当折线数量超过5条时,可在图表默认状态中高亮最重要的部分。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

2)为了数据的易读性,建议折线视觉效果使用实线

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

3)慎用曲线。单折线图中线条是唯一的主题,线条的每一个点都真实的反应数据的起伏,一般建议使用折线。

若线条趋势不需要非常精确呈现,且需要消除个别差一点和整体的趋势,可以用平滑曲线

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

4)折线图可以处理大量数据,非常适合给用户一些具有参考价值的数值,建议添加比较数据

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

2. 面积图

面积图作为折线图的一种衍生,可用来展示连续性数据,可很好地表示趋势、累积、减少以及变化。堆叠面积图更擅于展示部分和整体之间的关系或趋势,而不是传达特定的值。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

3. 柱状图

1)柱子之间的间距不要过大,增加数据易读性。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

2)使用合理的数据油墨比,降低用户获取数据的认知成本

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

4. 堆叠柱状图

堆叠柱状图的数值必须能相加,相加无意义的数据不建议使用堆叠柱状图。如图,同一区域的人员年龄相加,是没有数据意义的,如果将年龄改为人员数量,就可以横向对比不同区域的人员数量,是具有实际意义的。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

5. 条形图

分类数目是固定的,空数据也要展示。如果省略部分空数据节点,会造成不必要的误解,同时,数据的整体分布状况也不能完全表达出来。同理,柱状图也是一样。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

6. 饼环图

1)若计算百分比,每个切片的数值不能为负,饼图切片的大小与其相应的值成比例,所有切片相加必须为100%。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

2)通过扇形区块的面积,弧度和颜色等视觉标记,展现部分与部分之间以及部分与整体的占比关系。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

3)饼环图各切片有序排列

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节


写在最后


虽然,数据可视化通常会让人联想到商业的分析师,但它通常比想象的更具创意并且丰富多彩。从业务仪表板、公共健康可视化到流行文化趋势分析,数据可视化涵盖了广泛多样的应用情景。

随着数据可视化的发展,数据表现形式也越来越丰富、多样,如在Echarts中有近40个大类的图标样式介绍。如桑基图、雷达图、地图等等。一些之前比较少见的图表类型,也越来越常见,如玫瑰图(南丁格尔玫瑰图),通过人民网在疫情期间的应用,也为大众所熟知。

一般来说,相较于基础图表,目前发展的数据可视化图表,应用场景相对来说比较局限,同时制作方式也较为复杂,不同于基础图表,通过Excel就可以实现,复杂图表的制作需要比较专业的工具,或专业人员来实现,如需要专业的数据分析师通过Tableau、Qlikview、FineBI等数据分析工具来实现,有较高的学习与应用成本。

好的可视化设计一定集易读、突出数据价值、易于分析、美观为一体的,最终让数据变得更加简单,方便交流,反之,不仅让数据变得更复杂,而且还会带来错误诱导。因此,如何让数据分析变得轻松、流畅并且易读,从而提高用户的工作效率,降低用户的工作负担,则成为设计师的重要责任。

本文只是介绍了部分基础图表的应用经验,后续有机会将继续完善可视化图表应用经验的沉淀及分享。

作者:弘毅

转载请注明:优设网

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



更多精彩文章:

大数据可视化界面设计之一:可视化大屏设计快速入门指南

大数据可视化界面设计之九:超全面的数据可视化设计指南:设备篇

大数据可视化界面设计之十:数据可视化必修课:表格篇













大数据可视化界面设计之五:超全面的数据可视化设计指南:字体篇

博博


前言


读者朋友们大家好呀!(声明:《字体篇》文章中所有的字体规范都只针对可视化大屏设计,后台可视化以及 B 端可视化的字体规范与其不同)

最近产出了很多东西,但都是以零碎的知识为主,主要是在社群进行分享,因此有需要的小伙伴欢迎加我交流。


整体架构


今天就带大家好好聊一聊可视化大屏设计中的字体、字号、字重、字体优化等一系列注意事项。字体篇主要分为四大模块:字体选择与字重、字号规范与应用、字体优化与交接、常用字体与推荐。

超全面的数据可视化设计指南:字体篇


字体选择与字重


文字是界面中最核心的元素,是产品传达给用户的主要内容,它的承载体即是字体。从字体的最基本属性(字族、字类、字重、字号等)说起,熟悉字体的那些特征,了解字体在界面中的作用。

超全面的数据可视化设计指南:字体篇

1. 衬线体与无衬线体

衬线体

衬线又被称为“字脚”,衬线体就是有边角装饰的字体。我们常用的西文字体 Times New Roman 等;中文比较常见的比如宋体、明体等。

超全面的数据可视化设计指南:字体篇

无衬线体

无衬线体则与衬线体相反,通常是机械和统一粗细的线条,没有边角的装饰。最具代表性的 Arial、Helvetica 的西文字体,中文比较常见的比如黑体,微软雅黑等。

超全面的数据可视化设计指南:字体篇

总结

无衬线字体所具备的技术感和理性气质,更受科技型企业或品牌青睐,腾讯谷歌等互联网企业都是选用的无衬线体;衬线字体的优雅与复古,则常用于艺术性文字,时尚品牌等。

因此在具有浓厚技术的可视化氛围中,体现科技感和数字感,结合我们的观测体验,展示形式等,我们统一选用的字体是无衬线体。

超全面的数据可视化设计指南:字体篇

2. 中文字体

字体选择

在使用数字屏幕阅读时,字体的选择要选用无衬线体(比如黑体,微软雅黑)厚重一点,不可选用衬线体(比如宋体,书法体)比较单薄。

注意事项

标题可以用 Bold,更厚重,更加醒目,且不需要长时间观看;正文由于需要长时间观看,因此采用 Regular 字重,观感以及体验更佳;

超全面的数据可视化设计指南:字体篇

3. 英文字体

字体选择

英文字体类型的使用,英文选择更明显的粗体,因为要展示数据,使得数据展示更加直观,依旧是选用无衬线体,比较推荐:D-DIN 字体。

注意事项

字重用 Regular,更加纤细精致,英文字体分为大小写,一般推荐使用纯大写模式,因为大写可以保证字体本身整齐,并且宽高都是一致的,对于排版以及展示会更加友好。

超全面的数据可视化设计指南:字体篇

4. 数字字体

字体选择

数字字体类型的使用,考虑画面的字体的种类不超过三种,并考虑到字体的统一性,数字的字体与英文字体保持统一,比较推荐:D-DIN 字体。

注意事项

数字字体的字重尽量使用 Bold,因为展示更加明显,数字的展示一般都为数据展示,在界面的展示中,一般数字字体会比同字号下中文小 4-6px,因此展示是保证数据清晰显示,数字的字体大一点数据才能更清晰,更符合数据可视化展示。

超全面的数据可视化设计指南:字体篇

数字字体尽量选用等距字体,比如数字“1”和“0”,有些字体的间距会相应的缩小,我们要选用的就是等距字体,这样在做一些列表数据对齐的时候,数据展示更加友好。

超全面的数据可视化设计指南:字体篇


字号规范与应用


政府类客户对于文字大小粗细的追求可以说是非常的偏激,字体加大加粗几乎成了标配,这种需求下,我们能做的就是在原有规范的基础上尽量去提升字号和字重。

1. 常规 16:9 屏

常规 16:9 指的是 1920*1080 的分辨率

在字体大小的选择上,参考了页面上常规大小,定义了一套关于不同尺寸下的标准字号,正常 1080P 页面,最小字号不小于 16px。

此处字号并不是绝对,因为考虑到目标群体适老化的原因,我们主动提高了字体的大小,一切都是为了提高客户的观测体验,具体字号大小还需要参考设备清晰度,环境灯光,视距,人为原因等因素。

超全面的数据可视化设计指南:字体篇

2. 常规 32:9 屏

常规 32:9 指的是 3840*1080 的分辨率

在字体大小的选择上,其实是两块 1080P 的屏幕进行拼接,因此如果画面内容较多时,定义最小字号不小于 16px。

如果画面内容较少时,具体字号大小还需要参考设备清晰度,环境灯光,视距等因素,对字体进行相应的放大,比例合适即可。

此处字号并不是绝对,因为考虑到目标群体适老化的原因,我们主动提高了字体的大小,一切都是为了提高客户的观测体验。

超全面的数据可视化设计指南:字体篇

3. 特殊尺寸屏

特殊尺寸指的是非主流的分辨率,比如 2880*1920 的分辨率

这块的字号大小比较难定义,因为需要考虑的因素很多,总体来说字号大小如果高度在 1080px 左右,那么就按 16:9 的字号规范来算。

如果高度高于 1080 且很多,则需要等比计算或者放大,具体实践出的准确数值还得需要根据大屏的实际情况来综合考虑,这里只是提供一些基础计算方式。

超全面的数据可视化设计指南:字体篇

4. 字号影响因素

字号的大小受到屏幕大小的影响;字号的大小受到界面内容的影响;字号的大小受到观测距离的影响;字号的大小受到设备性能的影响;字号的大小受到主观人为的影响;

超全面的数据可视化设计指南:字体篇


字体优化与交接


给开发的字体太大怎么办?如何优化?开发采用默认字体去开发怎么办?开发用部署电脑没有这个字体去打发你又该怎么办?

1. 优化字体

给开发的字体太大,占用内存该怎么办?

其实我们可以用一些特殊的方法对原有的字体包进行优化,比如英文字体,我们可以删除非必要的中文字体和数字,符号,只保留一些必要的英文字母。具体方法如下,我们可以用 FontCreator 软件去进行字体的优化与删减,并修改字体细节,重新命名发布。

同时如果有意向的同学,也可以用自己设计的字体去应用到开发,这样的操作不是一举两得吗?

优化字体教程: https://www.bilibili.com/video/av82311138

超全面的数据可视化设计指南:字体篇

2. 开发交接问题解析

开发采用默认字体去开发怎么办?

默认字体开发可能有时候会出现文字换行,或者文字放不下的情况,因为不同字体的字间距以及大小可能是不同的,因此在初期就需要跟开发协调好,跟设计效果图的字体保持同步,这样才能保证设计效果的还原。

超全面的数据可视化设计指南:字体篇

本地部署电脑没有字体该怎么办?

字体的存放一般是有两种,一种是放到单独的服务器然后每次加载去服务器访问字体,另一种是跟代码放到一起。对于字体大小的要求。本地存储不需要考虑字体包的大小,云存储需要考虑字体包大小。

云存储一般字体包大小的话可以限制在 2、3M 左右,5、6M 的字体包就已经非常大了,太大会影响我们字体的读取,画面加载很慢。

超全面的数据可视化设计指南:字体篇

最优解就是在部署本地的电脑上安装你需要的字体,这样的话程序就自动读取,可以识别本地部署的字体;如果不支持本地化部署的,字体是存放在服务器或者是跟代码打包放一起的,可以要求开发在全局代码中多写几个备用的字体。

比如你是 Windows 系统,那么自带的就是微软雅黑,iOS 系统自带的就是苹方平台,会自动根据写出的代码按顺序筛选自带的系统字体。

超全面的数据可视化设计指南:字体篇


常用字体与推荐


一些特别好用的字体,会在设计过程中提升画面视觉,因此给大家推荐并分享了一些可以做可视化大屏的商用中英文字体。附件下载。

1. 可视化常用中文字体

中文字体包含了一些可以做标题的一些造型比较好看的字体,比如优设标题黑,站酷高端黑体,卢帅正锐黑体,胡晓波男神体等等。可做正文字体的比如,苹方简体,思源黑体等等。

超全面的数据可视化设计指南:字体篇

2. 可视化常用英文/数字字体

英文字体和数字字体主要是分享了一些数据展示比较奇特的造型字体,比如:DS-digital、Furore、以及正常数据展示的 D-DIN 字体家族等。

超全面的数据可视化设计指南:字体篇


全篇总结


字体的最基本属性:字族、字类、字重、字号,通过四种基本属性为切入点,精准的去讲述大屏可视化的字体规范和样式。

在可视化大屏设计中,字体更加偏向于无衬线体,无衬线字体所具备的技术感和理性气质,更受科技型企业或品牌青睐;

在可视化大屏中,展示数据的重要性不言而喻,因此要注意中文、英文、数字字体的选择以及注意事项,一切以数据展示更加明显为前提;

在不同屏幕中,可视化大屏的字号大小规范是有区别的,并且需要结合影响字号的五大因素:屏幕大小、界面内容、观测距离、设备性能、主观人为去制定字体规范;

通过 FontCreator 软件去对字体进行优化,掌握字体的删减发布以及交付开发的方法;

了解开发存储字体的两种形式,一种是本地化部署,一种是与代码打包服务器云存储,以及了解两种方式的优缺点;

了解可视化开发关于字体交接时的注意事项,可以通过自己的理解去解决工作中的关于字体的问题;

推荐了常用的可视化大屏的字体:中文字体、英文字体;

如果画面内容较少时,可以适当提高字号,反之亦然,比例合适即可;

可视化大屏设计字体规范不存在绝对字体规范。

作者:生活因你而火热

转载请注明:优设网

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



更多精彩文章:

大数据可视化界面设计之一:可视化大屏设计快速入门指南

大数据可视化界面设计之九:超全面的数据可视化设计指南:设备篇

大数据可视化界面设计之十:数据可视化必修课:表格篇














大数据可视化界面设计之一:超全面的数据可视化设计指南:风格篇

博博

各位数据可视化设计师们大家好,鉴于平时有很多同学对我们的可视化大屏的设计知识点有很多不理解的地方,阿勇决定花一些时间去详细剖析一下关于这方面的知识,全部都是多年工作经验所得,绝对有料。

整个合辑一共有 10 篇文章,分别涉及到设备篇、风格篇、字体篇、色彩篇、组件篇、布局篇、版式篇、视觉篇、团队篇、技能篇十篇文章,详细的讲一讲可视化大屏设计的知识点。


风格篇主要包含:常用风格 > 风格解析 > 风格选择 > 风格应用。

本篇文章将会从风格分类入手,进行风格解析,总结可视化设计的风格,选择风格并应用到场景,教大家如何选择合适的风格应用到商业可视化项目中。

画面中的动效 GIF 图会比较大,请大家耐心等候加载~

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

总结了商业项目中遇到的一些可视化案例以及科幻可视化风格,大体的将其分为三个大类:传统风格、HUD 风格、FUI 风格。


传统酷炫风格


传统狭义上的数据可视化, 更多是纯图形去代表数据,通过图形去展示数据,直观的展示所需要表现的指标。数据可视化也有很多分类, 不过也许你也懒得了解了。

比如,网站后台分析,可以说是可视化分析报表类的,例如百度统计,谷歌统计等等;比如,面对 B 端后台的数据可视化,国内做的最好的无非就是 antdesign,element;我们此处说的是基于 G 端的数据可视化大屏,G 端数据可视化从本质上来说是注重直接解决问题,通过直观的展示数据图表去了解各个指标的详细数值;

也有甚者比较注重视觉效果,要酷炫,心理学家说, 人脑 70%的神经信号来自视觉, 我们的视觉系统最完善, 而不同的感官之间, 多少是可以转化的, 而且是每个人的天性。国内传统可视化对于此处的接受程度确实不一样。B 端和 G 端的用户,对于可视化风格的接受程度确实是不太一样的,B 端对于前沿技术以及可视化表现会有一定的接受能力,但是 G 端更多注重于界面酷炫,功能反而不是很重要了,这多少有点本末倒置的感觉。

超全面的数据可视化设计指南:风格篇

在传统可视化面前,页面的杂糅程度较强,彷佛是由一块块图表堆砌而成,比较注重色彩的运用,多色搭配,色彩一般具有特质。一般大多数可视化可以看到共同的点就是:配色/布局/构图,机械而又重复,彷佛一个流水线生产出来的。当然,现如今新基建乃是主流,人群对可视化大屏的认知和审美也在逐渐提升,设计师在以后的工作中还需要取长补短,多吸收一些好的东西去丰富我们具有中国特色的数据可视化大屏设计。


HUD 风格


平视显示器(Head Up Display),以下简称 HUD,是运用在航空器的飞行辅助仪器。平视的意思是指飞行员不需要低头就能够看到他需要要的重要资讯。平视显示器最早出现在军用飞机上,降低飞行员需要低头查看仪表的频率,避免注意力中断以及丧失对状态意识(Situation Awareness)的掌握。

因为 HUD 的方便性以及能够提高飞行安全,民航机也纷纷跟进安装,汽车也开始安装,在一些游戏用户界面,很多地方都会采用 HUD 的风格,比如射击类,格斗类,动作类游戏等等(赛博朋克,堡垒之夜,绝地求生)。

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

在设计的细节当中使用大量的图形元素,并辅以一定的装饰元素,主要以点线为主装饰,排版版式参考价值较强。HUD 相比较于传统和 FUI 来说,更贴合我们的日常设计,对于图形的展示也更加的有意义,所以透析 HUD 风格,对于提升可视化设计水平有很大的帮助。


FUI 风格


相对于当前流行的扁平化设计,FUI 可谓是在 Ul 设计中独树一帜,设计风格十分鲜明,极具未来感和科技感。

FUI 是一个非常有趣的 Ul 设计领域,是我们在日常现实生活之中天法探索的用户界面设计方式。在我们的日常工作中,通常日常设计很难有机会为宇宙飞船、时间旅行设备,或者感知型人工智能和外星人使用的用户界面做设计。FUI 使设计师有机会去突破现有的用户体验和用户界面的限制,探索一个新的领域。通过虚幻界面设计我们可以大胆的设想以及寻找新的解决方案。例如我们可以大胆的设想 AR 技术的应用,地图可以采用全息投影技术、人与智能硬件的环境交互等等。

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

虚幻界面设计甚至可以是新的发明,它们可以作为一种概念的验证它们可以启发我们,提出问题,探索什么可行,什么不可行。正如科幻小说可以激励人们登上月球或建造自动驾驶汽车一样,虚幻用户界面可以激励人们为未来创造技术。

FUI 的图形装饰元素可以说是极其丰富,形式感很强。在设计的细节当中使用大量的“异形”的图形元素,并辅以一定的装饰元素,但是一定程度上对于设计中繁琐的需求,需求层次上寻找设计灵感没有太多帮助。常用在科幻电影以及概念游戏等领域,落地较难。


升华:如何培养出自己的可视化设计风格


如何培养和完善自己的可视化设计风格呢?其实这个问题有点狭隘,不同客户不同使用场景我们可能风格都会不太一样,但是唯一我们不会变的是我们对于组件图表的理解,图表图形的展示形式。

  • 传统风格:多种色彩
  • FUI 风格:科技图形
  • HUD 风格:版式排版

超全面的数据可视化设计指南:风格篇

一个合格的可视化设计师,对于任何可以参考的页面,都可以迅速领略到可以应用的部分页面和展示形式,多吸收知识,提升自己,这就是取其精华,去其糟粕的正确解答吧!所以要将现有风格结合,完善设计理念,提升视觉技法,这才是当下比较重要的。

超全面的数据可视化设计指南:风格篇

最近由于工作中的一个项目,对自己充满了怀疑,究竟什么叫科技感?不同的应用场景,科技感是否还依旧有效?同展示条件下不同应用场景,又会有什么样的差异?究竟是什么样子的设计,才能被“甲方爸爸”认定为科技感十足,并且很酷炫呢?从酷炫科技感出发,总结了以下四个方面去解析科技感风格。

  • 科技感的界面有哪些特征?
  • 同展示条件下不同应用场景,又会有什么样的差异?
  • 三维的表现形式,是否真的跟科技感成正比?
  • 面对段落文本需求,列表需求等如何把页面做出科技感?

超全面的数据可视化设计指南:风格篇

1. 科技感的界面有哪些特征?

相信很多可视化设计师听到最多的一句话:要酷炫,要科技感!每每听到这句话我都会变得非常暴躁。究竟是酷炫科技感代表可视化?还是数据可视才是可视化的内核?每每遇到这种令人糟心的问题,我想的是如何通过自己的专业知识去解释,可是我发现根本解释不清楚,也无法令甲方客户信服,甚至和同为乙方的总包也无法达成统一战线。那么我们应该如何去做呢,又应该如何去解释科技感这个抽象的概念呢?

超全面的数据可视化设计指南:风格篇

配色

提到科技感色系一般我们想到的就是蓝色系(科技蓝),但是很多人可能走进了一个误区,科技感的专属色彩并不是只有蓝色,而且一些蓝色确实让我们有审美疲劳的感觉。如图,就是我们比较常见的传统可视化设计,一眼看去满屏都是蓝色,具有中国特色的蓝色科技感。正如所有人都公认的党建题材为红色加黄色,那么科技感真的只有蓝色专属吗?党建题材都是红色专属吗?

超全面的数据可视化设计指南:风格篇

由此可见,红色并不是党建题材的专属色彩,存在即合理,也并没有说党建可视化一定要做成红色的。制约的因素有很多:项目背景,项目需求,设计提案,专业认知等等,可视化大屏归根结底还是做的是服务设计,因此服务好客户,得到客户的认可,就能体现设计的价值。但是在设计稿中可以发现,界面运用到了一些党建色彩的元素,也是通过这种方式去展示,这也是设计师需要注意的一点。

  • 传统科技蓝风格可视化

超全面的数据可视化设计指南:风格篇

  • 其他科技蓝风格可视化

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

  • 橘色科技感风格可视化

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

由此我们可以推断,配色是塑造科技感界面的一个比较重要的因素。色彩的选择需要根据实际所运用到的场景,比如安全行业,蓝绿色会比较好一点;比如公安行业,传统蓝色就比较合适;比如卫星地图,用蓝色就不合适;根据不同的业务范畴以及不同的应用场景去确定配色,这才是我们要做的。

蓝色并不是科技感的专有属性,任何一种颜色都是可以塑造科技感的感觉的。比如适合用绿色的场景做的界面,没有做好看,那只能怪自己学艺不精,跟配色无关。不排斥蓝色,但是讨厌到处都是用蓝色,上来就是用蓝色。

背景

说到背景这是一个影响科技感非常重要的因素,一张超神比比皆是,一张超鬼也是随处可见,究竟什么样的背景才是一个优秀的可视化界面所具备的?不是画面发光,有闪光点,宇宙或者银河那种图;也不是科技点线,带渐变的线条(混合工具做出来的那种)看起来就特别复杂;也不是那种亮度超过画面任何一个元素的图。

超全面的数据可视化设计指南:风格篇

科技感的背景所起到的作用应该是衬托画面,而不是在画面中比较跳,抢视觉,一大坨发光或者复杂的图形,只会起到反作用。

一个好的背景一定是不影响视觉的同时,衬托画面和主视觉,如果整个页面分黑白灰三层,那么背景一定是黑的那一层,这样的画面效果才会好。

图形

图形应该是以上指标中,最令人可以接受对科技感风格诠释的一种,科技感的图形到底有哪些特征,我们又该如何去做呢?

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

通过以上案例我们可以发现,所谓图形表现科技感,最大的特征就是点线面应用的多元化,通过一种或者多种规律将点线面组合起来,线条粗细长短不一,点大小不等。在使用图形进行点缀搭配时,切不可过于花哨,从而抢了主要内容的风头。

不规则图形,点线装饰,色彩,外发光,都是图形诠释科技感的方式。

此处可能会出现一些三维样式的图形,特殊的视角以及不常见的设计都会增加科技感的元素,但是也不是所有的三维都可以比二维更有科技感的。我最近做的就是甲方客户一直觉得:三维元素太少了,科技感不够。我就纳闷了,到底什么才是科技感?难道科技感只能用三维的来表示了?只能说一定条件下,三维是优于二维展示的,但这也不是绝对的。如果你的场景主视觉本身就是二维范畴的,何必要要求组件三维展示。

下图的二维科技感表现上肯定是超过三维地球的,至少我是这么认为的。

超全面的数据可视化设计指南:风格篇

动效

动效应该是最能体现科技感的方式了,通过动态演示组件,通过动效展示界面,远远比静态页面要合理的多。动效主要是通过:位移、旋转、透明度(闪烁)、缩放等方式去制作,形成独特的动画节奏。

最常用的科技动画:粒子动画,线条动画,辉光,剪切路径,偏移字符等等。

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

可以发现科技感动效一般都伴随着极快的闪烁动画,动画的节奏也是比较偏快,再通过出现动画,字符偏移,剪切路径等演示组件的形成过程。

2. 同展示条件下不同应用场景,会有怎样的差异?

可能大家没有遇到过这种情况,比如在三维建筑可视化中,科技感本身就依赖于场景的表现,但是不知道大家有没有试过,将三维建筑可视化换成二维 GIS 之后,我们如何去使画面表现的更具科技感呢?

图一,图二,图三分别就是替换不同的场景,那么我们来看看这些场景为什么不适合原本的之前的科技感风格呢,我们一起思考一下~

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

以上三张图可以看出,图一的飞机可视化是画面的原稿,后两张是在同一种设计面板,替换了不用的主视觉场景,由此可以看出不同主视觉场景可能对应不同的风格 UI 组件,没有通用的组件,如果想完美表达一些面板组件,那么需要取设计不同风格的主视觉场景才可以。

大家可能会觉得科技感只针对于一些特殊的场景,或者说是深色场景,比如一些实景地图和卫星地图又该如何去表现科技感的元素呢?那么如果是浅色可视化我们又该如何去做科技感呢?

科技感风格应用于不同的场景,那么表现科技感的方式也是有很大的不同的。

超全面的数据可视化设计指南:风格篇

3. 三维的表现形式,是否真的跟科技感提升成正比?

其实这本身就是一个伪命题,三维表现对画面的冲击力是非常强的,对于画面视觉效果的提升有很大的帮助。不过是否所有的三维就是最合适的呢,这个也确实有待商榷。不过能肯定的是,一定程度上,三维一定会比二维更加具有冲击,更加具有科技感。

首先必须要确定的是,此处三维一定是科技感点线组成或者说是线描类型的三维主体,而不是实景以及仿真的主体,当然并不是绝对的,此处针对大多数场景下。

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

可以通过以上图片看出,科技感一定伴随的是大量的点线装饰,画面主体一定是最突出的地方。而不是有时候遇到的是:GIS 地图就是很普通的样式,可编辑性不是很强,样式也比较老旧,对设计就会造成大量的困扰。在主视觉没有完美表现的时候,就不要强求说把两边去做好看,主视觉不好看,那么图表做的特别华丽也只是让主视觉更掉分。

其实最正确的表现就是二维表现加上三维场景展示,两者相辅相成,对于画面的展示才是最好的。通过下面这组案例可以发现,二维表现加上三维场景才是最优解。

超全面的数据可视化设计指南:风格篇

4. 面对段落文本列表需求时如何把页面做出科技感?

很多同学对于文字需求如何制作科技感有很多的疑问,通过最近的作图,总结出四种关于文字排版科技感的展示,总结起来其实就那么几点:装饰,图形,字体,版式,表现形式…

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

其实对于数据可视化设计科技感的研究,不仅需要了解表现层,更需要上升到业务层。一些特定的图形或者装饰,对于画面的丰富程度一定是有帮助的。

讲了这么多,不知道对大家理解科技感是否有帮助,如何提升画面科技感,是我们做为数据可视化设计必定会面临的一大难题。希望大家在以后的工作或者项目中,多多酷炫,多多科技感!!!

超全面的数据可视化设计指南:风格篇

1. 根据场景-了解展示需求

场景是什么?是人物、时间、地点三要素所组成的特定关系。在某某时间(when),某某地点(where),特定类型的用户(who),干了某某事情(what)。

因此我们要确定的是,根据这四个“W”去确定整体业务框架的基础构成,这对于设计风格的初步意向确认有着很积极的意义。

超全面的数据可视化设计指南:风格篇

  • who:王局长
  • when:领导人会议时
  • where:公安局
  • what:新基建建设 数字化转型事项

在领导人会试上,公安局王局长提议通过了关于新基建,数字化转型的各种措施。面对这一场景,有以下几个问题。受众是谁?需要干什么事情?谁去干?数字化转型怎么做?怎么实现?需要用到的技术?展示风格?重功能?还是重展示?

在有了这些的前提下,对于我们设计风格的选择就有了很强的指导意义,比如王局长比较喜欢多色搭配,科技感强的风格,主要为了配合展示汇报,那么就可以通过这一些需求,初步制定风格为效果酷炫的展示类大屏,但是主视觉的展示形式还是要根据其他的具体情况去进一步确认。

2. 根据含义-确立设计方向

在面对一些特有的项目时,一般客户会给出一些参考术语:“3 个一带”,“2 个方针”,“八大成果”“三山,两水,百林,千田”……

面对这种问题,能做的就是理解其包含的真实意义,究竟需要展示哪方面的,了解清楚项目的背景需求,结合客户所说的一些关键字段,剖析以上的内容可以发现,客户通过一些方针和方法,对“山水林田”进行治理,取得了一些阶段性成果。

超全面的数据可视化设计指南:风格篇

因此展示的内容可以确定为智慧治理,或者智慧生态方向的,然后就可以根据项目背景的内容去选择可以应用的具体的一些方案了。

3. 根据需求-明确设计内容

因在到了需求分析的阶段,可以根据客户提供的大量的资料和业务需求,去明确的设计方向,究竟是需要展示哪些内容?可以提供的数据有哪些?展示条件(硬件设施)是否具备?想要的效果有哪些?

超全面的数据可视化设计指南:风格篇

比如客户需要查看到山水林田的各个改进措施的效果,以及改进前后的效果对比。说到这单纯的二维 GIS 和影像已经不太好满足了,那么可以将场景风格定位到三维展示,需要实际 1:1 建模,至于是通过 WEBGL,UE,UNITY 就看各自的团队擅长的方向了。

场景大体风格确定,那么展示面板需求根据场景去搭建就可以了,这样一个完整的风格选择过程就算初步走通了,具体的验证环节,可以在一次次会议中再去进行交流和修改即可。

超全面的数据可视化设计指南:风格篇

二维 GIS(深浅)、卫星影像

  • 优点

展示容易,风格切换皮肤多,可编辑性高,开发难度低,地图资源较多,适合快速搭建可视化大屏模版,开 源内容较多,前端开发直接调用样式即可。

  • 缺点

展示形式较普通,地图风格样式不出彩,设计效果也会打很多折扣,很难与同行拉开差距。

  • 难点

开发过程中可能需要基于高德 API 以及一些平台,对封装地图进行二次开发,没有 GIS 开发经验的前端,会比较困难。

  • 网址

https://lbs.amap.com/product/mapstyle#/ Mapbox,高德 API,百度 API,超图,天地图等等。

以高德 API 为例

超全面的数据可视化设计指南:风格篇

矢量地图、省市区块

  • 优点

展示灵活,可下载 svg 矢量区块,并可下载 json 文件直接交付开发,可下钻到县级,可编辑性高,一般会结合二维 GIS 来展示,有插件可以直接绘制全国地图。

  • 缺点

不够立体,可选样式比较少,画面主视觉容易空洞导致画面效果不强。

  • 难点

开发对于设计图的一些效果还原比较困难,例如发光,渐变等等。只能做一些比较基础属性的修改,对于效果还原可能达不到 80%以上。

  • 网址

http://datav.aliyun.com/tools/atlas/

以 DATAV 地图下载器为例

超全面的数据可视化设计指南:风格篇

矢量地图模型、省市区块

  • 优点

展示效果好,三维场景,有立体效果,材质贴图不同效果会完全不一样,可编辑性较强,相比较二维更推荐这种表现形式。

  • 缺点

三维范畴,不会三维知识的小伙伴会比较难,此处会涉及到三维软件合并挤压,展 UV,漫射贴图,QGIS 制作高度贴图,PS 制作法线贴图等等知识点。

  • 难点

对于不懂三维的小伙伴比较困难,涉及知识点较多,容易一知半解。

  • 教程

https://mp.weixin.qq.com/s/zjR_pJyU1jpeLJMXZ-4FyA (原作者已授权)

3D 地图建模及贴图的制作获取方法

超全面的数据可视化设计指南:风格篇

三维模型、城市建模

  • 优点

展示形式新颖,展示效果非常好,三维表现往往让人耳目一新,对于可视化的展示可以说是所见即所得,深得客户喜爱。

  • 缺点

开发难度高,专业性人才比较少,懂三维的设计也是非常的少,对于三维知识以及引擎开发知识需要比较熟悉才行。

  • 难点

人才稀缺,入门难,做好更难,教程自学难度有点大,例如 cityengine 程序化建模,houdini 程序化建模等等。

  • 教程

https://space.bilibili.com/21247145?from=search&seid=10582171815506234319

cityengine 程序化建模

超全面的数据可视化设计指南:风格篇

知识图谱、数据中台等

  • 优点

主视觉效果强,特殊场景的处理能够很完美的讲清逻辑,对于图形化的理解有很强的意义。

  • 缺点

逻辑复杂,难懂,比较抽象,专业难度高,对业务理解能力需要很强。

  • 难点

逻辑处理比较难,设计效果比较难以想象,设计容易偏离主题,比如数据中台,是一个非常虚幻的东西,很难讲清楚处理逻辑和过程。

  • 网址

https://www.zcool.com.cn/work/ZMzg4OTQ5ODQ=.html

以知识图谱为例

超全面的数据可视化设计指南:风格篇


知识点总结


可视化风格三大分类以及对于图形的应用(传统、HUD、FUI);

如何培养自己的数据可视化设计风格(色彩+图形+板式);

影响科技感风格的四大影响因素(配色,图形,背景,动效);

设计风格的选择以及确定思路(根据场景、含义、需求);

可视化风格的应用以及拓展(各种主视觉的应用优缺难点)。

超全面的数据可视化设计指南:风格篇

讲了这么多,不知道对大家理解科技感是否有帮助,如何提升画面科技感,是我们做为数据可视化设计必定会面临的一大难题。希望大家在以后的工作或者项目中,多多酷炫,多多科技感!!!不知道大家有没有一种错觉,突然有一段时间,某个时候发现自己突然不会做设计了,啥也想不明白了,莫名的有点浮躁,做什么都不能专心。其实很简单,总的来说就是,你即将突破现有的设计水准,如果能想明白,解决掉问题,你的审美以及设计水平都会有很大的进步。这就是别人口中的,突然就会了,知道怎么做了,其实无非就是积累够了,需要升入下一个等级了~

作者:生活因你而火热

转载请注明:优设网

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设

ui设计,界

计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



更多精彩文章:

大数据可视化界面设计之一:可视化大屏设计快速入门指南

大数据可视化界面设计之九:超全面的数据可视化设计指南:设备篇

大数据可视化界面设计之十:数据可视化必修课:表格篇












大数据可视化界面设计之二:可能是最详细的大屏数据可视化设计指南!

博博

@UX-BOY :可能是大屏数据可视化设计介绍最详尽的一篇文章,帮你尽量躲开大屏数据可视化路上那些坑。

1.jpg

 

文章目录

 
  1. 基础概念
  2. 大屏数据可视化设计原则
  3. 大屏可视化设计流程
  4. 大屏设计的注意事项
  5. Q&A
  6. 总结

 

基础概念


1. 什么是数据可视化

把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化,数据可视化是为了更形象地表达数据内在的信息和规律,促进数据信息的传播和应用。

在当前新技术支持下,数据可视化除了「可视」,还有可交流、可互动的特点。数据可视化的本质是数据空间到图形空间的映射,是抽象数据的具象表达。

2.jpg

3.gif

△ 数据可视化作品《 launchit 》,作者:Shane Mielke

作者写了本书,地图上显示了世界各地读者的分布情况及对应人数。

4.jpg

△ 数据可视化作品《 world-drawn-by-travelers 》,作者:TripHappy

国家之间相互连通的旅游路线,颜色越相近的国家,表明两个国家的人们互动越频繁。

2. 什么是大屏数据可视化

大屏数据可视化是以大屏为主要展示载体的数据可视化设计。

「大面积、炫酷动效、丰富色彩」,大屏易在观感上给人留下震撼印象,便于营造某些独特氛围、打造仪式感。电商双11时大屏利用此特点打造了热烈、狂欢的节日氛围,原本看不见的数据可视化后,便能调动人的情绪、引发人的共鸣,传递企业文化和价值。

5.gif

利用面积大、可展示信息多的特点,通过关键信息大屏共享的方式可方便团队讨论和决策,故大屏也常用来做数据分析监测使用。大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。

数据分析类:

6.jpg

△ 图片来源:必应,图片作者:帆软软件有限公司

 

大屏数据可视化设计原则


大屏数据可视化设计原则:设计服务需求、先总览后细节。

1. 设计服务需求

大屏设计要避免为了展示而展示,排版布局、图表选用等应服务于业务,所以大屏设计是在充分了解业务需求的基础上进行的。那什么是业务需求呢?业务需求就是要解决的问题或达成的目标。设计师通过设计的手段帮助相关人员达成这个目标,是大屏数据可视化的价值所在。

2. 先总览后细节

大屏因为大,承载数据多,为了避免观者迷失,大屏信息呈现要有焦点、有主次。可以通过对比,先把核心数据抛给用户,待用户理解大屏主要内容与展示逻辑后,再逐级浏览二三级内容。部分细节数据可暂时隐藏,用户需要时可通过鼠标点击等交互方式唤起。

 

大屏可视化设计流程


规范的流程是好结果的保证。找到一个可参考的流程,然后步步为营,就能避免很多不必要的返工,保证设计质量和项目进度。

7.jpg

1. 根据业务场景抽取关键指标

关键指标是一些概括性词语,是对一组或者一系列数据的统称。一般情况下,一个指标在大屏上独占一块区域,所以通过关键指标定义,我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。以共享单车电子围栏监控系统为例,这里的关键指标有:企业停车时长、企业违停量、热点违停区域、车辆入栏率等。

确定关键指标后,根据业务需求拟定各个指标展示的优先级(主、次、辅)。

8.jpg

2. 确立指标分析维度

「横看成岭侧成峰」。同一个指标的数据,从不同维度分析就有不同结果。很多小伙伴做完可视化设计,发现可视化图形并没有准确表达自己的意图,也没能向观者传达出应有的信息,可视化图形让人困惑或看不懂。出现这种情况很大程度就是因为分析的维度没有找准或定义的比较混乱。

9.jpg

上图向大家展示了数据分析常用的4个维度,我们在选定指标后,就需要跟项目组其他小伙伴讨论:我们的各个指标主要想给大家展示什么,更进一步的讲,是我们想通过可视化表达什么样的规律和信息。而上图,可以引导我们从「联系、分布、比较、构成」四个维度更有逻辑的思考这个问题。

  • 联系:数据之间的相关性。
  • 分布:指标里的数据主要集中在什么范围、表现出怎样的规律。
  • 比较:数据之间存在何种差异、差异主要体现在哪些方面。
  • 构成:指标里的数据都由哪几部分组成、每部分占比如何。

当然,上图例举的示例图表都比较传统,在大屏数据可视化中常还有另一类地理信息(常以2/3D地图、地球呈现)出现。上图虽未包含这类图形,但它提供给我们的确定数据分析维度的思路和方法是相通的,可借鉴。

3. 选定可视化图表类型

当确定好分析维度后,事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。

选定图表注意事项:易理解、可实现。

易理解

可视化设计要考虑大屏最终用户,可视化结果应该是一看就懂,不需要思考和过度理解,因而选定图表时要理性,避免为了视觉上的效果而选择一些对用户不太友好的图形。

10.jpg

可实现

我们需要了解现有数据的信息、规模、特征、联系等,然后评估数据是否能够支撑相应的可视化表现。

我们设计的图形图表,要开发能够实现。实际工作中,一些可视化效果开发用代码写很容易实现,效果也不错,但这些效果设计师用 Ps / Ai / Ae 这些工具模拟时会发现比较困难;同样的,某些效果设计师用设计工具可以轻易实现,但开发要用代码落地却非常困难,所以大屏设计中跟开发常沟通非常重要,我们需要明确哪些地方设计师可以尽情发挥,哪些地方需要谨慎设计。一个项目总有周期与预算限制,不会无限期的修改迭代,所以设计师在这里需要抓住重点,有取舍,不钻牛角尖、不死磕不放。

11.jpg

4. 了解物理大屏,确定设计稿尺寸

多数情况下设计稿分辨率即被投大屏的信号源电脑屏幕的分辨率。有多个信号源时,就会有多个设计稿,此时每个设计稿的尺寸即对应信号源电脑屏幕的分辨率。

12.jpg

一般情况下设计稿的分辨率就是电脑的分辨率,当有多个信号源时,有时会通过显卡自定义电脑屏幕分辨率,从而使电脑显示分辨率不等于其物理分辨率,此时,对应设计稿的分辨率也就变成了设置后的分辨率。此外,当被投电脑分辨率长宽比与大屏物理长宽比不一致时(单信号源),也会对被投电脑屏幕分辨率做自定义调整,这种情况设计稿分辨率也会发生变化。所以设计开始前了解物理大屏长宽比很重要。

5. 页面布局、划分

尺寸确立后,接下来要对设计稿进行布局和页面的划分。这里的划分,主要根据我们之前定好的业务指标进行,核心业务指标安排在中间位置、占较大面积;其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近,把图表类型相近的指标放一起,这样能减少观者认知上的负担并提高信息传递的效率。

13.jpg

6. 定义设计风格

很多小伙伴也许没接触过大屏设计工作,但大多数人都应该有 APP 或者 Web 风格定义的经验。我们在定义一款 APP 或者 Web 页面设计风格时常用的方法是什么呢?情绪板。

大屏虽酷炫,但实际上也是运行在浏览器里的 Web 页面,所以大屏设计风格定义方法也同样可以用情绪板来做,这种方法也是目前比较科学高效的风格定义手段。

14.jpg

上图提供了情绪板应用的脑图,具体操作细节不做介绍,不太了解的小伙伴可以自己找找资料。

编者按:一篇好文帮你扫盲,运用情绪板搞定设计→《该怎么运用情绪板,才能让设计作品更有说服力?》

情绪板的一套流程下来,我们定义的风格基本是科学准确的,可以指导我们执行设计。如果是给甲方做大屏,这个流程也可以让我们提出的方案更有说服力。

7. 可视化设计

根据定义好的设计风格与选定的图表类型进行合理的可视化设计。目前来说大屏可视化主要有指标类信息点和地理类信息点两大可视化数据。指标类信息点可视化效果相对简单易实现,而地理类信息点一般可视化效果酷炫,但是开发相对困难,需要设计师跟开发多沟通。地理类信息一般具有很强的空间感、丰富的粒子、流光等动效、高精度的模型和材质以及可交互实时演算等特点,所以对于被投电脑、大屏拼接器等硬件设备的性能会有要求,硬件配置不够的情况下可能出现卡顿甚至崩溃的情况,所以这点也是需要提前沟通评估的。

15.gif

8. 样图沟通确认

这里的沟通分三个层面:设计师对内沟通、设计师对外沟通、设计师与大屏的「沟通」。

16.jpg

样图沟通环节,最初的样图不需要十分精致,我们可以把它理解为一个「低保真」原型,然后通过不断沟通修改,让它逐步完善精致起来,也就是小步快跑,避免那种一下子走到终点,然后又大修大改的情况。

因为我们在前几步已经分别确定了页面布局、图表类型、页面风格特点,所以这一步我们需要用尽可能简单的方法 ,把之前几步的成果在页面上快速体现出来,然后根据样图效果尝试确定五方面内容:

  • 之前确立的布局在放入设计内容后是否依然合适;
  • 确立的图表类型带入数据后是否仍然客观准确;
  • 根据关键元素、色彩、结构、质感打造出的页面风格是否基本传达出了预期的氛围和感受;
  • 已有的样式、数据内容、动效等在开发实现方面是否存在问题;
  • 大屏是否存在色差、文字内容是否清晰可见、页面是否存在变形拉伸等现象。

跟大屏「沟通」是比较重要也是个特殊的环节,这也是我觉得大屏设计跟其它设计不一样的地方,大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境,这里的很多问题只有设计稿投到大屏上才能够被发现,所以这一步在样图沟通确认环节非常重要,有时候需要开发出 demo,反复测试多次。

9. 页面定稿、开发

事实上页面开发阶段并不是到了这一步才进行,这里说的页面开发仅指前端样式的实现,实际上后台数据准备工作在定义好分析指标后就已经开始进行了,而我们当前的工作是把数据接入到前端,然后用设计的样式呈现出来。

17.jpg

切图与标注

由于大屏实际就是一个 web 页面,所以开发阶段的切图与标注是少不了的。

切图:哪些元素需要切图,怎么切?

一般开发用代码写不出的样式或动效,都需要设计师切图作支持:比如数据容器的边框、小的动效、页面整体大背景、部分图标等。切图按正常网页设计标准切就可以了。

标注:Web页面用什么插件做标注这个大家都很熟悉,我就不多说了。需要注意的是,如果大屏页面需要在不同比例的终端展示,那么此时的标注与开发可以使用 rem 作为基本单位来实现,这样实现的大屏页面在后期会有更好的扩展性与适应性。

10. 整体细节调优与测试

这部分是指页面开发完成后,将真实页面投放到大屏进行的测试与优化。这里主要有两部分工作。

视觉方面的测试(有点像 APP 的 UI走查):关键视觉元素、字体字号、页面动效、图形图表等是否按预期显示、有无变形、错位等情况。

性能与数据方面的测试:图形图表动画是否流畅、数据加载、刷新有无异常;页面长时间展示是否存在崩溃、卡死等情况;后台控制系统能否正常切换前端页面显示。

 

大屏设计的注意事项


1. 字体使用

字体优先使用系统默认字体,需要嵌入字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商用。

18.jpg

如果页面是云端部署,需要嵌入字体包时,我们可以使用 FontCreator 这类的软件把那些用不到的字符从字体包中删掉,然后重新打包上传,减小字体包大小,可以优化页面加载体验,避免在替换默认字体的过程中出现页面文字跳动等现象。(一般来讲一套字体文件包含了阿拉伯文、符号、拉丁文、日文、西里尔文、希腊文、拼音、注音符号等多种字符,对于大屏这个明确的场景,我们可以删掉其它使用不到的字符,仅保留中文、拼音和数字)

19.jpg

2. 颜色搭配

色彩明度与饱和度差异显著、对比鲜明, 尽量避免使用邻近色配色。

20.jpg

使用深色暗色背景:深色暗色背景可减少拼缝带来的不适感。由于背景面积大,使用暗色背景还能够减少屏幕色差对整体表现的影响;同时暗色背景更能聚焦视觉,也方便突出内容,做出一些流光、粒子等酷炫的效果。

渐变色慎重使用:大屏普遍色域有偏差,显示偏色,因而使用渐变色需要根据大屏反馈确定是否调整,纯色最佳。

3. 页面布局

主次分明、条理清晰、注意留白,合理利用大屏上各个小的显示单元,并尽量避免关键数据被拼缝分割。

21.jpg

 

Q&A


1. 设计稿投到大屏上显示效果不佳怎么办?

大屏的分辨率、比例、使用环境、投射方式等均会对设计造成影响。理想情况下,我们应该在设计开始前,就能打开大屏系统做一些简单测试。我们可以从网上收集不同设计师不同风格的大屏设计作品,然后投上去查看实际效果。因为大多数时候大屏都会存在色彩偏差,这时通过测试我们就能发现渐变色、邻近色等不同类型的色彩搭配是否可以在目标大屏上良好呈现,如果不可以,那我们设计进行时就不要使用显示效果不佳的色彩搭配。另一方面,样图沟通环节及时测试也很重要。

2. 大屏设计定稿后,切图切几倍图?

由于是将我们电脑屏幕投射到了大屏,大屏上的内容是运行在我们电脑浏览器上的页面。所以切图根据我们电脑的分辨率,正常切1倍图就可以了。

3. 1920*1080的设计稿,投到9000*4320的屏幕上,文字图片会虚么?

看情况,视大屏系统硬件规格与观看距离来定。这块有四个概念需要跟大家交流一下。

大屏逻辑分辨率(设计稿尺寸)、显卡输出分辨率、视频矩阵切换器( DVI )支持分辨率、大屏实际物理分辨率。

一般后两个是没问题的,大屏跟矩阵切换器是由大屏厂商提供,一般刚好配套大屏。容易出问题的是显卡输出分辨率,我们电脑屏幕分辨率并不是最终显卡传递到 DVI 接口的分辨率,传递到 DVI 接口的分辨率是电脑显卡所能输出的最大分辨率(部分电脑可设置或自定义输出分辨率)。输出分辨率等于 DVI 支持分辨率时显示效果最佳。输出分辨率低于 DVI 支持分辨率,DVI 会将信号放大后传递到大屏,放大的过程中就有图像信息丢失,虽然此过程中有各种算法支持去保证图像尽可能清晰,但算法再好,跟真实图形还是有差距的。此外,多信号源投射效果优于单个信号源投射。对于现场直播数据大屏,一般至少有两个信号源,一个投屏,另一个也投屏但是处于备用状态。

离大屏的距离也影响观感,一般离得近,颗粒感明显,距离稍远,会显的较为清晰。

4. 设计稿完成开发后,发现在大屏上页面有被拉伸或者压缩的情况,怎么补救?

一般来讲,开发只需要对设计图做还原即可。但特殊情况下,比如显示器扩展不正确导致页面被拉伸或压缩,这时就需做处理:我们可以先得到被拉伸/压缩的比例,然后对整体视图做压缩/拉伸处理,再由其拉伸/压缩,这样被拉伸/压缩的瑕疵就可以得到一定程度上的矫正。另外,了解被投电脑硬件特点,有的电脑可以通过自定义分辨率解决这部分问题。

5. 除自行开发可视化大屏外,还可以通过哪些第三方服务来快速实现?

阿里云 DataV、腾讯云图、百度 Sugar 等。

6. 数据可视化的图表样式可以在哪些地方找到参考?

图表部分的二个库是我们设计师可以打开浏览查看的,这里面所有的图表样式都是基于代码实现的,可以作为我们设计图表的参考,也可以让开发拿代码去用,或者在这些图表的基础上修改。

工具类的需要有一定的代码基础,里面同样有丰富的图表,所以跟开发的沟通也很重要,因为他们可能会了解多一些更新的前沿的图表形式,是我们设计师不知道的,所以彼此多沟通交流实在太重要了。

22.jpg

 

总结


数据可视化是一门庞大系统的科学,本文所有讨论仅针对大屏数据可视化这一特定领域,管中窥豹,如有遗漏或不足之处欢迎大家讨论交流。

作者:UXBoy

转载请注明:优设网

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



更多精彩文章:

大数据可视化界面设计之一:可视化大屏设计快速入门指南

大数据可视化界面设计之九:超全面的数据可视化设计指南:设备篇

 

大数据可视化界面设计之十:数据可视化必修课:表格篇

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

 

大数据可视化界面设计之三:可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

博博

可视化大屏 UI


上文说到可视化设计是一个综合类交叉学科,同样在大屏 UI 设计中也是一个相对复杂的流程,我们需要对大屏的布局、风格、主视觉、信息图表、字体、规范、动效等方面综合考虑,推导设计方案。

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

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

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

下面针对可视化设计中布局、风格、主视觉、信息图表、字体、规范、动效等 7 个方向细节点的拆解。

1. 布局

通过硬件设备信息可以得到可视化的设计尺寸,基于尺寸新建设计画布后,第一件事就需考虑页面的整体布局。可视化大屏设计从信息布局到数据表达,都需要设计师对业务深入了解后才能用数据助力业务决策。

常见的大屏布局:居中结构、左右结构两种常见的布局形式以常规的 16:9 模板为例,下面列举的一些常见的布局形式,供大家参考。

居中结构

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

异形超宽拼接屏幕。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

左右结构

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

布局的原则一定要主次分明,根据业务需求抽取关键性的指标,提取主要信息。可以在纸上大概画一下,然后在软件里具体细化布局。避免次要信息的面积过大,喧宾夺主,影响整体的视觉效果。

2. 风格

提起可视化大屏,大家都会联想到:科技感、FUI、HUD 这些关键词,可以说可视化大屏跟科技、数据这两词是强关联的,风格上也基本是这一类方向。

定义设计风格:一般会基于业务需求场景去定义几个设计关键词,根据关键词去找一些参考图,推导出贴合业务的设计风格。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

我们可以通过调整颜色、装饰细节、主视觉、字体等一些细节点控制区分不同的设计风。下面拿图表举例,我们在做设计的时候,只需调整卡片和标题的装饰,就能够展现出不同的设计风格。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

3. 主视觉

主视觉部分大致分为:地球、地图、智慧城市、行业类业务展示等。目前比较容易出效果的都会采用三维模型的处理方式。

地球:粒子地球、地图贴图、地球模型。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

地图:第三方在线地图(百度、高德、腾讯、谷歌)基于地图开放平台进行个性化配置。或者通过地理位置数据建模:如全国和各个省份的轮廓模型。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

智慧城市:GIS 参数化生成简模和重点楼宇定制化建模。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

行业类:多数为定制化建模。如工业类、医疗类、能源类、园区、学校、港口、工厂、仓储库房、零售、工程、安防、国防军工等。

以下图片源于 DATAV

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

主视觉是可视化设计中的一大难点,不光是设计落地的时候也会有需要注意的点,这里建议大家在做之前一定要充分跟开发沟通,确认好技术选型,方便后期输出跟开发更加高效的对接。

4. 信息图表

图表的设计原则是易理解、可实现,能够准确表达数据意图,给用户传达明确信息。


以下图片源于网络,如侵删

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

上图通过使用场景可分为比较、联系、构成、分布四个维度解释图表的不同属性类别。在做可视化大屏设计的时候可以参照上图,选择对应的数据图表。

比较

两个及以上变量数据,一是基于分类不同的对比,二是基于时间维度的对比。常见的图表:条形图、柱状图、雷达图、玫瑰图、桑基图等

联系

两个及以上数据之间的相关性,随时间变化比较关联。常见的图表:散点图、气泡图、多级饼图、热力图、力导向图等。

构成

指标里的数据都由哪几部分组成、每部分占比如何。常见的图表:饼图、环形图、堆积面积图、堆积柱状图、瀑布图等。

分布

指标里的数据主要集中在什么范围、表现出怎样的规律,想表达两个数据点之间数量的演变过程。常见的图表:阶梯折线图、面积图、直方图等。

基于图表的类型可分为:饼图、线形图、柱状图、混合图、面积图、散点图、极坐标图、关系图、树图、桑基图、漏斗图、热力图、还有其他图表类型等。

饼图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

适合展示分类的占比情况,不适合展示分类过多(超过 9 条数据)或者差别不明显的场景。

线形图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化,它的特点是反映事物随时间或有序类别而变化的趋势。

当水平轴的数据类型为无序的分类或者垂直轴的数据类型为连续时间时,不适合使用折线图。同样,当折线的条数过多时不建议将多条线绘制在一张图上。

柱状图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

柱状图提供了分类数据的可视化展示,基于不同的数据类型有以上几种不同的形式。分类数据是将数据分组成离散的组,例如月份、年龄组、鞋码和动物。这些类别通常是定性的。图表上的条形图可以按任何顺序排列。

混合图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

折线图和堆叠柱状图的组合图表。同时显示两个坐标轴,用于展示两种不同类型的数据。

适用于带有细分分类的累计数据大小以及与之相关的趋势数据,例如在过去十年全国三大产业的具体产值,以及 GDP 增长率。

面积图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

面积图强调数量随时间而变化的程度,也可用于引起人们对总值趋势的注意。适合于比较多个变量随时间间隔变化趋势。

散点图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

散点图是一种使用直角坐标来显示一组数据的两个变量值的图表。数据显示为一个点的集合,每个点都有一个变量的值决定水平轴上的位置,另一个变量的值决定垂直轴上的位置。

通常用于显示和比较数值,不光可以显示趋势,还能显示数据集群的形状,以及在数据云团中各数据点的关系。

极坐标图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

基于直角坐标系的径向变形(相当于把直角坐标卷起来)。适用于显示三个或更多的维度的变量对比或者部分与整体的趋势。

关系图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可以展示数据的占比情况,还能厘清多级数据之间的关系。 通常用于可视化大量元素之间的复杂关系。

树图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

树图是一种流行的利用包含关系表达层次化数据的可视化方法,是研究多元目标问题的一般工具。 适合展示数据之间的层级关系,适合 6 条以上数据。

桑基图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

一种特定类型的流程图,用于描述一组值到另一组值的流向,图中延伸的分支的宽度对应数据流量的大小。用以展示数据的层级关系。常用于可视化能源或成本转移,也帮助我们确定各部分流量在总体中的大概占比情况。

漏斗图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

一种直观表现业务流程中转化情况的分析工具,总是开始于一个 100%的数量,结束于一个较小的数量。通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节,进而做出决策。 适用于业务流程比较规范、周期长、环节多的流程分析,比如流程流量分析、转化率分析。

热力图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

将数值大小通过色块有序且紧凑地在坐标系中呈现。 适合呈现多组数据连续的数值分布,适合做数据的预测统计,可以在图片上直接展示热度。例如展示城市在不同时间段打车热度情况。

其他图表

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

词云图适用于对比大量文本或绘制特定形状的词云。水球图适用于多个百分百数据呈现。子弹图用于表达多项同类数据的对比,可以表达一项数据与不同目标的校对结果。 维诺图适用于层级数据比较大小,同时能看到各层级之间的情况。金字塔图适合展示分类的占比情况,不适合展示分类过多或者差别不明显的场景。

5. 字体

文字是可视化展示中最重要的构成要素之一,可视化大屏设计中字体的运用其实原理跟网页 app 的逻辑基本一致。在字体选择上会基于业务需求选择对应的字体,与设计风格相结合。这里要注意的是字体有无衬线、字重、字距等。

大屏设计中,中文字体一般会采用浏览器默认字体(微软雅黑、思源黑体、苹方等)页面中标题会采用特殊字体处理,常用的字体有:优设标题黑、时尚中黑简体、方正正中黑体等。英文数字字体推荐:Din、Ds-Digtal、Bebas、Acens、DS-DIGIB、Roboto 等。


6. 规范

建立规范的主要目的是:保证设计的一致性、提高开发效率和还原度、方便迭代 ,辅助设计和开发更好地完成设计的协作。

可视化设计中规范一般会分为:色彩、文字、图表、标题控件等,跟网页端规范同理,这里就不一一赘述了。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

7. 动效

数据可视化大屏设计少不了动效,动效是可视化重要的组成部分,动效能增加观感体验,凸显关键产品内容、强调功能信息关联,帮助用户理解产品、情感化互动。但过分的动效极其容易喧宾夺主,影响用户阅读,反而弱化了数据的展示。

动效的设计原则

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

动效应优先满足核心内容、故事线。常见的大屏动效 – 展示类,用于突出产品核心功能和特点。界面信息按照一定的规律呈现,引导用户的视觉流向。

好的大屏设计应该是数据展示模块最好动效不宜过多,要有一定的主次关系变化,例如一个动画表现的视觉强,另一个就表现稍弱化,有强有弱、有主有次节奏才会舒服,同时动效要结合数据变化,考虑极端情况的展示效果,最终输出一套完整的动效方案。


结语


以上通过布局、风格、主视觉、信息图表、字体、规范、动效等 7 个方向总结的基本知识和事项,能帮助我们快速进入大屏设计及避免一些坑。由于篇幅原因字体、规范、动效没有详细拆解说明,后面会陆续更新相关文章,感谢大家支持。可视化体验远远不止这些。欢迎大家提出更多意见和建议,我们一起前行。

作者:Mr.小六

转载请注明:优设网

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



更多精彩文章:

大数据可视化界面设计之一:可视化大屏设计快速入门指南

大数据可视化界面设计之九:超全面的数据可视化设计指南:设备篇

大数据可视化界面设计之十:数据可视化必修课:表格篇













大数据可视化界面设计之四:可视化大屏设计快速入门指南,看这篇就够了!

博博


前言


随着大数据产业的蓬勃发展,很多企业都开始应用数据可视化。智慧城市、智慧交通、智慧医疗等等越来越多的行业都有了可视化的需求,可视化行业也迎来了迅速发展的成长期。

可视化大屏设计快速入门指南,看这篇就够了!


数据可视化释义


数据可视化就是把一些相对复杂、抽象的、我们看不懂的数据通过“可视化”的方式,运用图形化的手段清晰有效地将数据信息进行解读和传达,帮助我们发现其中的规律和特征,挖掘数据背后的价值。


可视化大屏


可视化大屏
是以大屏为主要展示载体的数据可视化设计。它的应用场景非广泛如 ToC、ToB、ToG 等都会存在。一般应用在会议展厅、园区管理、城市交通调度中心、公安指挥中心、企业生产监控等重要场所。

可视化用户群体相对比较明确,主要是单位领导及一些一线人员。通过交互式实时数据监测,洞悉运营增长,助力智能高效决策。

可视化大屏设计快速入门指南,看这篇就够了!

伴随行业的发展,行业内也对可视化进行了一些行业细分。常见的一些类别:行业可视化(如交通、医疗、金融、军警部队、农业、工厂、化工等)、智能终端系统类(定制化终端产品)、演示 demo(数据演示、展览展示、数据看板 )、可视化分析系统(通过对数据的分析监控辅助决策,如交通预警平台、天气监控平台等)。


市场现状


平台化

由于近几年可视化的需求越来越大,一般的公司都会有一些可视化的需求,各大厂商也逐渐整合可视化资源,实现平台化、低代码化。满足了大多数公司的可视化需求。国内比较知名的可视化厂商:光启元(Ray design)、Data V、优诺科技(森工厂)、袋鼠云(Easy V)、数字冰雹、图扑、等等。他们将一些可视化效果组件化集成在平台,拖拖拽拽就能实现一些不错的效果,满足了一些公司的展示需求。

可视化大屏设计快速入门指南,看这篇就够了!

实现方式

目前可视化框架是大多数都是基于 Web 端的(基于 web 开发或者 web 封装)而非 PC 端。常见的可视化实现方式是二维加三维相结合,比如大屏两侧的可视化图表可以用 Echarts 这种第三方的轻量化图表控件或者 Vue 去实现。

主视觉部分会基于 Unity3D、虚幻引擎(UE4)、Ventuz、threejs 等工具去实现。满足三维炫酷的效果需求。使整个可视化大屏效果有了质的提升。这些三维工具的优势是三维粒子效果能很好的支持,且效果非常炫酷。多平台支持,可通过 webgl 封装在浏览器里打开使用。缺点就是维护成本较高,需要相关的专业人员去开发维护,有一定的使用门槛。一般公司如果不是专门做可视化相关业务不会配备相关专业人员。

可视化大屏设计快速入门指南,看这篇就够了!

说下几种工具的优缺点:

Ventuz 国内用的相对较少,相关专业人员也较少。虚幻引擎效果上是比较好的,但是对 WebGL 参数支持的较少。Threejs 虽然支持三维但是没有 Unity 那么强大的编辑器,一些复杂的效果实现不了。相对于前者 Unity 来说成熟一些,也是目前市场上用的比较多的,不过 three 对于前端开发同学更友好一些,容易上手,学习成本相对低一些。


可视化设计师应了解的知识


可视化设计是相对新兴的行业,就目前市场来看也是当今比较火的行业。作为一名设计师,不仅仅是只做完效果图就能行的,他是一个结合硬件设备、UI 设计、三维建模、三维渲染、动态设计、数据可视化、图形技术、GIS 数据、渲染引擎、交互技术等等综合类的交叉学科。

可视化大屏设计快速入门指南,看这篇就够了!

1. 硬件设备

硬件设备信息是做大屏一切的开始,我们首先要了解它的尺寸、比例、屏幕种类(拼接屏、LED 屏)投影方式等等 一系列的信息,方便后续的设计工作。

可视化大屏设计快速入门指南,看这篇就够了!

上图为一些常见的屏幕拼接方式,确认好屏幕的拼接方式就可以计算出整个大屏的物理分辨率。举个例子:上图中最后一个的拼接方式为横向3块屏,竖向2块屏幕。他们每块的屏幕分辨率为宽1920px 高1080px,那么这块2×3的拼接屏幕的尺寸就应该是:宽度 1920乘以3(横向3块屏)高度1080乘以2(竖向2块屏)得出整个屏幕的物理分辨率为:5760×2160。

可视化大屏设计快速入门指南,看这篇就够了!

物理分辨率 VS 输出分辨率

可视化大屏设计快速入门指南,看这篇就够了!

大屏的投射方式大致分为三种:1、电脑屏幕 1 比 1 等比例投屏。2、通过主机直接输出给拼接屏(这种大多都是一些自定义比例屏幕和分辨率超大的情况会应用到)。3、投影仪投射。

一般大屏的物理屏幕分辨率大小都有不同,有的是极大的,几万像素,如果我们按照物理分辨率来去做设计的话会很卡,所以这里设计尺寸建议按照输出分辨率设计。输出分辨率会受到硬件的限制(超大情况下需等比缩放),我们一般会采用输出分辨率作为最终的设计尺寸。针对硬件设备设计时要关注以下几点:屏幕拼接方式、单屏幕像素及拼接后像素、输出像素等这些决定了设计尺寸、内容排布、拼接缝的规避等问题。

2. GIS 数据

通常应用于参数化建模,之前写的 0-1 带你制作智慧城市地图(二)就属于参数化建模的一种,主要是通过一些地理位置高程数据进行模型的生成。属于智慧城市可视化设计的基础设施。

常见的一些格式:Openstreetmap(多用于生成模型)、Shapefile(多用于生成模型)、Geojson(主要用于基于 Web 的映射)、TIFF(多用于贴图处理)。

一些常用的工具:Qgis、Arcgis、Google mapper

3. 三维建模

在可视化设计中,一般我们会结合生成参数化模型加定制化手工模型的方式处理整体效果。这么处理的目的:一是设计上能突出主体,增加画面的层次感。二是在性能上能很好地优化,提高整体性能。

下图为设计侧到开发侧对接流程:

可视化大屏设计快速入门指南,看这篇就够了!

4. 动效设计

常见的一些动效对接格式:GIF、MP4、APNG、Lottie、序列帧。


可视化大屏设计快速入门指南,看这篇就够了!

5. 图形技术

了解图形成像原理,是由一个个的粒子点生成的画面。

可视化大屏设计快速入门指南,看这篇就够了!

下图是由一个 50×100 的粒子组成的平面,每个粒子都会对应他的 xy 轴的坐标位置,我们通过控制的粒子透明度、大小、颜色、位置、旋转等参数呈现不同的视觉效果。

可视化大屏设计快速入门指南,看这篇就够了!

世界地图的是通过一个一个粒子成像形成的画面,其中黑色=0、白色=1。比如粒子大小是 1,它对应的位置是黑色,黑色是 0,1×0 就=0 显示为黑色。

可视化大屏设计快速入门指南,看这篇就够了!

我们常做的粒子世界地图就是通过控制粒子黑白 x 粒子大小叠加出来的。

可视化大屏设计快速入门指南,看这篇就够了!

比如我们做粒子地球的时候是通过一张贴图来去控制黑白度,海洋是黑色所以就不显示粒子,陆地为白色显示为白色粒子,最终呈现了一个粒子地球的效果。

可视化大屏设计快速入门指南,看这篇就够了!

6. 渲染引擎的技术架构

前面实现方式里讲到市面上可视化落地基本都是基于于 Unity3D、虚幻引擎(UE4)、Ventuz、threejs 等工具实现的。

它们的底层是由 BS(Browser-Server)架构和 CS(Client-Server)架构两大架构组成的。

BS 架构与 CS 架构特点

  • BS:(Browser-Server,)浏览器/服务器模式,web 应用可以实现跨平台,客户端零维护,但是个性化能力低,响应速度较慢。
  • WebGL 就属于 BS 架构的一种。优点就是使用便捷、数据实时更新、跨平台。缺点是渲染效果较差,大场景支持差。
  • CS:(Client Server,客户端/服务器模式),桌面级应用响应速度快,安全性强,个性化能力强,响应数据较快。
  • Unreal Engine、Unity3D、Ventuz 属于 CS 框架。优势就是整体渲染视觉效果棒,大场景支持好,缺点是必须安装客户端、电脑性能要求高、不同平台需要不同文件。


最后


本期给主要是给大家普及可视化设计的一些流程以及相关的专业知识,欢迎后台添加小六微信沟通交流。

作者:Mr.小六

转载请注明:优设网

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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








更多精彩文章:

大数据可视化界面设计之一:可视化大屏设计快速入门指南

大数据可视化界面设计之九:超全面的数据可视化设计指南:设备篇

大数据可视化界面设计之十:数据可视化必修课:表格篇




数据可视化大屏设计工具整理(下)

纯纯

上次整理了一些大厂的可视化服务平台,平台的优势显而易见,组件化的操作,快速搭建的方式节省了很多的开发和时间成本。有兴趣的戳这里:数据可视化大屏设计工具整理(上)


对于上期的一些更正:8月28日百度Suger更新了收费标准,也就是说现在百度Suger也收费了!目前是分版本收费,但是对新老用户还是提供了30天的全功能试用的。


本次整理的是下半部分的内容:

一、数据大屏与数据可视化

二、大厂的可视化服务

三、技术开源库

四、设计辅助工具



- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -



三、技术开源库


了解一些技术开源库,一方面可以参照其图表案例,了解各类不同图表的展示方式;另一方面是为了保证自己设计的可实现度,不然再炫酷的设计效果最终如果因为技术开发能力无法实现也是徒劳的。



Echarts -百度开源可视化库

https://echarts.baidu.com/

这是一个使用JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器。4.0版本还提供了对微信小程序的适配。DataV中的一些组件也是依赖Echarts生成的。


Echarts提供的图表很多样化,几乎包含常用的、不常用的各类图表样式。且提供有可交互组件,可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。


△来源Echarts实例



Mapv - 百度地理信息可视化开源库

https://mapv.baidu.com/

用以展示大量地理信息点、线、面的数据。创建需先上传地理信息数据,再设置地图样式后,即可下载保存。目前仅开放Beta版本。


△来源Mapv官网



蚂蚁AntV

https://antv.alipay.com/zh-cn/index.html

蚂蚁金服的Ant Design作为设计师应该都是较为熟悉的。AntV是蚂蚁Ant系列下的一个数据可视化解决方案。分为G2、G6、F2、L7不同产品,分别对应不同的特性需求。

△来源AntV官网



Amcharts - 矢量地图定制下载

http://pixelmap.amcharts.com/#

这个网站可以用来绘制地图。有些特殊情况下,开发可能需要自己绘制地图。如果开发自己使用canvas绘制,难度较大。这个网址提供了地图svg、HTML以及image的下载。

△来源Amchats官网


D3.js - 数据驱动的文档

https://d3js.org/

D3js 是一个基于数据来操作文档的JavaScript 库,适宜用来建造各类可视化图表。支持大型数据集和交互与动画的动态行为。

△来源D3js官网



billboard.js - 简易界面的可交互图表库

https://naver.github.io/billboard.js/

这是一个基于D3 V4+的JavaScript的图表库。可以对数据进行视图缩放、展示细节等交互操作。

△来源billboard官网



FusionCharts

https://www.fusioncharts.com/

FusionCharts提供了100多个交互式图表和2,000多个数据驱动的地图,对不同平台都可兼容。同时提供了前端和后端各类框架及代码语言的插件来方便开发快速入门。不过这款是收费的,根据不同的使用环境定价不同。

△来源FusionCharts官网






四、设计辅助工具

Kitchen - 蚂蚁金服官方插件

http://kitchen.alipay.com/

这是一个sketch的插件工具。主要功能如下图。

△来源Kitchen官网


Iconfont 图标库我比较常用,可以直接在sketch中搜索拖拽,不用再去打开网页查找了。其次数据填充也比较常用,自动填充时间地址城市等挺方便的。sketch也有自带的功能,但毕竟自带的填充都是英文,想要中文的需要自己编写填充文档,相对还是比较麻烦。其他是像智能排版、色板等功能,我用的不多,还是以sketch自带功能为主。


另外,与可视化设计相关的就是里面的图表生成器了。不过Kitchen当前只有一些常规的图表,不过胜在简洁明了,很适合在此基础上进行二次设计。该插件还是蚂蚁Ant系列的官方插件,可以自动配置符合Ant Design 规范的组件,配合公司采用的Ant系列的框架,会方便不少。

△来源Kitchen插件界面



FusionCool - 阿里Fusion Design开源中后台UI解决方案辅助工具

https://fusion.design/tool

这也是一个sketch的插件工具。分为图标、图表、组件、模块和模板五大功能区。


Fusion Design作为一个开源中后台解决方案,和Ant Design有一定类似,但也有所差别。Ant Design 是一套组件库, Fusion Design 更像是一个组件库生成工厂。


直接下载安装FusionCool的话,打开sketch看到的将是一个默认组件库,图表部分的种类样式比Kitchen多了不少。而更厉害的是,你可以在Fusion Design上基于官方库编辑改造成属于你自己的设计系统,发布主题后获得新的主题包,此时你在FusionCool中就可以看到专属于你的主题包了,在sketch中完成设计后,开发使用Iceworks安装你的主题库就可以直接编码实现你的设计。

△来源FusionCool插件界面



Map Generator - 快速地图生成填充

https://github.com/eddiesigner/sketch-map-generator

这是一款基于谷歌地图的自动填充的Sketch插件,输入地址后就可以自动生成不同风格样式的地图,个人比较喜欢第三款灰色的。

△图为Map Gnerator生成效果



Amcharts - 矢量地图定制下载

http://pixelmap.amcharts.com/#

这个网站上面提过,但其实设计师用来获取矢量地图也很好用,选择地图样式和地区之后,右下方即可以下载SVG、HTML、Image格式的图,十分方便。点击“Generate Ppxel Map”还可以转化为像素圆点形式的地图。


如果需要省份的地图,网站上无法直接下载,但可以要先下载中国svg地图,然后再打开svg选择自己需要的省份模块就可以了。


另外,在使用地图的时候,要注意正确用图,规范用图。要有国家版图意识,符合测绘法。

标准地图可以参考国家自然资源局提供的标准地图服务,服务网址:http://bzdt.ch.mnr.gov.cn/index.html



Chart - 图表插件

https://github.com/pavelkuligin/chart

这个插件是收费的,每年10美元,但是你可以去找那啥啥的(我知道你懂)。优势在于可以在Sketch中创建包含随机、表格或者JSON数据的图表。图表样式也是非常的丰富了。

△来源Chart官网



-END--

原文地址:站酷
作者:枫凝紫夜

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

截屏2021-05-13 上午11.41.03.png

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


数据可视化大屏设计工具整理(上)

纯纯

这是目录:

一、数据大屏与数据可视化

二、大厂的可视化服务

三、技术开源库

四、设计辅助工具





一、数据大屏与数据可视化



数据可视化是目前对数据展示最常用的方式。数据的可视化设计有助于将复杂的数据用最易理解的方式展示在用户的面前。


数据可视化在中后台的设计中很常见,通常主要用于分析和决策,对实时性要求不高,从一部分功能上讲,其实也有着报告数据的作用。设计以2D平面展示为主,几乎不会有3D设计出现,视觉设计重点更注重简单直接,一目了然。


△来源 dribbble  作者wuze,侵删



数据大屏在上面的基础上,对实时性要求较高,会更强调数据展示的效果,这也是会流行FUI未来主义科幻风格设计的原因,追求视觉上的酷炫效果。设计上2D、3D皆有,还可以伴随着动效搭配一些可交互的设计,来展示数据之间联动。 

△来源 dribbble  作者William Chen,侵删 



关于制作数据大屏的一点小建议


数据大屏的制作可能会包含一些动效交互及3D建模渲染,一般中小型公司通常技术能力有限。如果接到设计制作数据大屏的任务,不妨先和产品技术等一起就表现方式和技术实现等方面先做个探讨,不要直接进行设计工作,贸然追求超燃的特效,避免最后因为无法实现导致无谓的返工。 



二、大厂的可视化服务



百度 Suger


https://cloud.baidu.com/product/sugar.html
Sugar是百度云推出的数据可视化服务平台,目标是解决报表和大屏的数据可视化问题,解放数据可视化系统的开发人力。 


△来源Suger官网  



上图是官网提供的案例,界面风格是常规的FUI风格。 

Sugar提供了组件编辑平台,进入平台后设计师可以直接进行组件的拖拽编辑,打造自己所需要的大屏界面。在设计师完成后就可以直接交接给开发进行各类数据源的接入。这种形式无疑节约了很多的开发时间,设计师也不用再担心前端开发的效果与自己的差之千里。对于时间紧迫或者自身技术能力不足的项目很适合。 

在组件的提供上,Suger提供了很多的2D和3D组件,在一定程度上也可以自定义组件。还可以设置数据下钻和图表联动,增强动效交互效果。 





△来源Suger编辑平台



平台的编辑界面总体来说还是很方便设计师适应的,与一般的设计软件界面差不多。上方是一些工具,左侧是图层的排布,右侧则是一些组件的属性。设计师可以很快的适应并应用,没有了学习成本也不会有太高的操作难度。但是Suger在3D方面尚有不足,个人感觉没有阿里云DataV、腾讯RayData的3D效果突出。 

最后一点,Suger目前处于推广期,推广期间是 免费使用的。 




阿里云DataV


https://data.aliyun.com/visual/datav?spm=a2c4g.11174283.2.1.46b66b79vzB03d
DataV最著名的一个应用项目应该就是天猫双11的数据大屏了。每一年都惊艳了无数聚焦于双11活动的人们。2018年的双11数据大屏设计更是被称为数据经济时代的全球清明上河图。 

△2018天猫双11大屏 




同样的,DataV也提供了一个编辑平台,连该平台本身的界面设计也充满了未来科技感,可以根据模板新建,也可以新建空白页面。基本操作模式与Suger类似,设计师先建立画面,后开发进行数据源的接入。编辑界面的操作难度也不高,稍微了解一下,就可以快速入手。 

undefined

△DataV平台创建编辑界面



与Suger相比,个人更为喜欢DataV。DataV的设计风格与动效交互都会略好一点。一般企业进行数据大屏的设计项目,其目的更趋向于对外展示。DataV在效果的酷炫程度上会更符合领导的要求。只是DataV目前分为基础版、企业版和专业版 收费服务。个人申请有30天的基础版试用期。具体选择需要看公司自身内部需求而定。 




腾讯RayData


https://cloud.tencent.com/product/raydata
RayData是我跟随我们领导去参观腾讯在宁波的分公司进行了解。当时展示的项目是深圳的城市大脑。将城市管理集为一体,包含交通、医疗、警务等等。与其在官网展示的内容一致,只不过官网是截图,而当时参观时是有个小姐姐拿着pad一边交互一边跟我们讲解。交互与数据联动的效果很好,当时我们领导很喜欢这种效果。 

△智慧城市大数据可视化 




整体来说,RayData的数据展示效果也是相当不错的。但是RayData目前处于内侧阶段,也没有平台提供编辑功能,当前主要的模式是 付费定制。 

原文地址:站酷
作者:枫凝紫夜

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

截屏2021-05-13 上午11.41.03.png

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


可视化设计十要素-风格篇

鹤鹤

致数据可视化设计师-风格篇详解


本片文章共8000字,阅读大概需要25分钟。


各位数据可视化设计师们大家好,鉴于平时有很多同学对我们的可视化大屏的设计知识点有很多不理解的地方,阿勇决定花一些时间去详细剖析一下关于这方面的知识,全部都是多年工作经验所得,绝对有料。


整个合辑一共有10篇文章,分别涉及到设备篇、风格篇、字体篇、色彩篇、组件篇、布局篇、版式篇、视觉篇、团队篇、技能篇十篇文章,详细的讲一讲可视化大屏设计的知识点。


风格篇主要包含:常用风格 > 风格解析 > 风格选择 > 风格应用。


本篇文章将会从风格分类入手,进行风格解析,总结可视化设计的风格,选择风格并应用到场景,教大家如何选择合适的风格应用到商业可视化项目中。


画面中的动效GIF图会比较大,请大家耐心等候加载~



总结了商业项目中遇到的一些可视化案例以及科幻可视化风格,大体的将其分为三个大类:传统风格、HUD风格、FUI风格。



  • 传统酷炫风格


传统狭义上的数据可视化, 更多是纯图形去代表数据,通过图形去展示数据,直观的展示所需要表现的指标。数据可视化也有很多分类, 不过也许你也懒得了解了。


比如,网站后台分析,可以说是可视化分析报表类的,例如百度统计,谷歌统计等等;比如,面对B端后台的数据可视化,国内做的最好的无非就是antdesign,element;我们此处说的是基于G端的数据可视化大屏,G端数据可视化从本质上来说是注重直接解决问题,通过直观的展示数据图表去了解各个指标的详细数值;


也有甚者比较注重视觉效果,要酷炫,心理学家说, 人脑70%的神经信号来自视觉, 我们的视觉系统最完善, 而不同的感官之间, 多少是可以转化的, 而且是每个人的天性。国内传统可视化对于此处的接受程度确实不一样。B端和G端的用户,对于可视化风格的接受程度确实是不太一样的,B端对于前沿技术以及可视化表现会有一定的接受能力,但是G端更多注重于界面酷炫,功能反而不是很重要了,这多少有点本末倒置的感觉。

undefined


在传统可视化面前,页面的杂糅程度较强,彷佛是由一块块图表堆砌而成,比较注重色彩的运用,多色搭配,色彩一般具有特质。一般大多数可视化可以看到共同的点就是:配色/布局/构图,机械而又重复,彷佛一个流水线生产出来的。当然,现如今新基建乃是主流,人群对可视化大屏的认知和审美也在逐渐提升,设计师在以后的工作中还需要取长补短,多吸收一些好的东西去丰富我们具有中国特色的数据可视化大屏设计。



  • HUD风格


平视显示器(Head Up Display),以下简称HUD,是运用在航空器的飞行辅助仪器。平视的意思是指飞行员不需要低头就能够看到他需要要的重要资讯。平视显示器最早出现在军用飞机上,降低飞行员需要低头查看仪表的频率,避免注意力中断以及丧失对状态意识(Situation Awareness)的掌握。


因为HUD的方便性以及能够提高飞行安全,民航机也纷纷跟进安装,汽车也开始安装,在一些游戏用户界面,很多地方都会采用HUD的风格,比如射击类,格斗类,动作类游戏等等(赛博朋克,堡垒之夜,绝地求生)。


在设计的细节当中使用大量的图形元素,并辅以一定的装饰元素,主要以点线为主装饰,排版版式参考价值较强。HUD相比较于传统和FUI来说,更贴合我们的日常设计,对于图形的展示也更加的有意义,所以透析HUD风格,对于提升可视化设计水平有很大的帮助。



  • FUI风格


相对于当前流行的扁平化设计,FUI可谓是在Ul设计中独树一帜,设计风格十分鲜明,极具未来感和科技感。


FUI是一个非常有趣的Ul设计领域,是我们在日常现实生活之中天法探索的用户界面设计方式。在我们的日常工作中,通常日常设计很难有机会为宇宙飞船、时间旅行设备,或者感知型人工智能和外星人使用的用户界面做设计。FUI使设计师有机会去突破现有的用户体验和用户界面的限制,探索一个新的领域。通过虚幻界面设计我们可以大胆的设想以及寻找新的解决方案。例如我们可以大胆的设想AR技术的应用,地图可以采用全息投影技术、人与智能硬件的环境交互等等。


虚幻界面设计甚至可以是新的发明,它们可以作为一种概念的验证它们可以启发我们,提出问题,探索什么可行,什么不可行。正如科幻小说可以激励人们登上月球或建造自动驾驶汽车一样,虚幻用户界面可以激励人们为未来创造技术。


FUI的图形装饰元素可以说是极其丰富,形式感很强。在设计的细节当中使用大量的“异形”的图形元素,并辅以一定的装饰元素,但是一定程度上对于设计中繁琐的需求,需求层次上寻找设计灵感没有太多帮助。常用在科幻电影以及概念游戏等领域,落地较难。



  • 升华:如何培养出自己的可视化设计风格


如何培养和完善自己的可视化设计风格呢?其实这个问题有点狭隘,不同客户不同使用场景我们可能风格都会不太一样,但是唯一我们不会变的是我们对于组件图表的理解,图表图形的展示形式。


传统风格:多种色彩

FUI  风格:科技图形

HUD风格:版式排版


一个合格的可视化设计师,对于任何可以参考的页面,都可以迅速领略到可以应用的部分页面和展示形式,多吸收知识,提升自己,这就是取其精华,去其糟粕的正确解答吧!所以要将现有风格结合,完善设计理念,提升视觉技法,这才是当下比较重要的。 



最近由于工作中的一个项目,对自己充满了怀疑,究竟什么叫科技感?不同的应用场景,科技感是否还依旧有效?同展示条件下不同应用场景,又会有什么样的差异?究竟是什么样子的设计,才能被“甲方爸爸"认定为科技感十足,并且很酷炫呢?从酷炫科技感出发,总结了以下四个方面去解析科技感风格。


  • 科技感的界面有哪些特征?

  • 同展示条件下不同应用场景,又会有什么样的差异?

  • 三维的表现形式,是否真的跟科技感成正比?

  • 面对段落文本需求,列表需求等如何把页面做出科技感?



01 科技感的界面有哪些特征?


相信很多可视化设计师听到最多的一句话:要酷炫,要科技感!每每听到这句话我都会变得非常暴躁。究竟是酷炫科技感代表可视化?还是数据可视才是可视化的内核?每每遇到这种令人糟心的问题,我想的是如何通过自己的专业知识去解释,可是我发现根本解释不清楚,也无法令甲方客户信服,甚至和同为乙方的总包也无法达成统一战线。那么我们应该如何去做呢,又应该如何去解释科技感这个抽象的概念呢?



  • 1.1 配色 


提到科技感色系一般我们想到的就是蓝色系(科技蓝),但是很多人可能走进了一个误区,科技感的专属色彩并不是只有蓝色,而且一些蓝色确实让我们有审美疲劳的感觉。如图,就是我们比较常见的传统可视化设计,一眼看去满屏都是蓝色,具有中国特色的蓝色科技感。正如所有人都公认的党建题材为红色加黄色,那么科技感真的只有蓝色专属吗?党建题材都是红色专属吗?


由此可见,红色并不是党建题材的专属色彩,存在即合理,也并没有说党建可视化一定要做成红色的。制约的因素有很多:项目背景,项目需求,设计提案,专业认知等等,可视化大屏归根结底还是做的是服务设计,因此服务好客户,得到客户的认可,就能体现设计的价值。但是在设计稿中可以发现,界面运用到了一些党建色彩的元素,也是通过这种方式去展示,这也是设计师需要注意的一点。


  • 传统科技蓝风格可视化


  • 其他科技蓝风格可视化


  • 橘色科技感风格可视化

undefined


由此我们可以推断,配色是塑造科技感界面的一个比较重要的因素。色彩的选择需要根据实际所运用到的场景,比如安全行业,蓝绿色会比较好一点;比如公安行业,传统蓝色就比较合适;比如卫星地图,用蓝色就不合适;根据不同的业务范畴以及不同的应用场景去确定配色,这才是我们要做的。


蓝色并不是科技感的专有属性,任何一种颜色都是可以塑造科技感的感觉的。比如适合用绿色的场景做的界面,没有做好看,那只能怪自己学艺不精,跟配色无关。不排斥蓝色,但是讨厌到处都是用蓝色,上来就是用蓝色。



1.2 背景 


说到背景这是一个影响科技感非常重要的因素,一张超神比比皆是,一张超鬼也是随处可见,究竟什么样的背景才是一个优秀的可视化界面所具备的?不是画面发光,有闪光点,宇宙或者银河那种图;也不是科技点线,带渐变的线条(混合工具做出来的那种)看起来就特别复杂;也不是那种亮度超过画面任何一个元素的图。


科技感的背景所起到的作用应该是衬托画面,而不是在画面中比较跳,抢视觉,一大坨发光或者复杂的图形,只会起到反作用。


一个好的背景一定是不影响视觉的同时,衬托画面和主视觉,如果整个页面分黑白灰三层,那么背景一定是黑的那一层,这样的画面效果才会好。



1.3 图形 


图形应该是以上指标中,最令人可以接受对科技感风格诠释的一种,科技感的图形到底有哪些特征,我们又该如何去做呢?


通过以上案例我们可以发现,所谓图形表现科技感,最大的特征就是点线面应用的多元化,通过一种或者多种规律将点线面组合起来,线条粗细长短不一,点大小不等。在使用图形进行点缀搭配时,切不可过于花哨,从而抢了主要内容的风头。


不规则图形,点线装饰,色彩,外发光,都是图形诠释科技感的方式。


此处可能会出现一些三维样式的图形,特殊的视角以及不常见的设计都会增加科技感的元素,但是也不是所有的三维都可以比二维更有科技感的。我最近做的就是甲方客户一直觉得:三维元素太少了,科技感不够。我就纳闷了,到底什么才是科技感?难道科技感只能用三维的来表示了?只能说一定条件下,三维是优于二维展示的,但这也不是绝对的。如果你的场景主视觉本身就是二维范畴的,何必要要求组件三维展示。


下图的二维科技感表现上肯定是超过三维地球的,至少我是这么认为的。



1.4 动效 


动效应该是最能体现科技感的方式了,通过动态演示组件,通过动效展示界面,远远比静态页面要合理的多。动效主要是通过:位移、旋转、透明度(闪烁)、缩放等方式去制作,形成独特的动画节奏。


最常用的科技动画:粒子动画,线条动画,辉光,剪切路径,偏移字符等等。


可以发现科技感动效一般都伴随着极快的闪烁动画,动画的节奏也是比较偏快,再通过出现动画,字符偏移,剪切路径等演示组件的形成过程。



02 同展示条件下不同应用场景,会有怎样的差异?


可能大家没有遇到过这种情况,比如在三维建筑可视化中,科技感本身就依赖于场景的表现,但是不知道大家有没有试过,将三维建筑可视化换成二维GIS之后,我们如何去使画面表现的更具科技感呢?


图一,图二,图三分别就是替换不同的场景,那么我们来看看这些场景为什么不适合原本的之前的科技感风格呢,我们一起思考一下~


以上三张图可以看出,图一的飞机可视化是画面的原稿,后两张是在同一种设计面板,替换了不用的主视觉场景,由此可以看出不同主视觉场景可能对应不同的风格UI组件,没有通用的组件,如果想完美表达一些面板组件,那么需要取设计不同风格的主视觉场景才可以。


大家可能会觉得科技感只针对于一些特殊的场景,或者说是深色场景,比如一些实景地图和卫星地图又该如何去表现科技感的元素呢?那么如果是浅色可视化我们又该如何去做科技感呢?


科技感风格应用于不同的场景,那么表现科技感的方式也是有很大的不同的。



03 三维的表现形式,是否真的跟科技感提升成正比?


其实这本身就是一个伪命题,三维表现对画面的冲击力是非常强的,对于画面视觉效果的提升有很大的帮助。不过是否所有的三维就是最合适的呢,这个也确实有待商榷。不过能肯定的是,一定程度上,三维一定会比二维更加具有冲击,更加具有科技感。


首先必须要确定的是,此处三维一定是科技感点线组成或者说是线描类型的三维主体,而不是实景以及仿真的主体,当然并不是绝对的,此处针对大多数场景下。


可以通过以上图片看出,科技感一定伴随的是大量的点线装饰,画面主体一定是最突出的地方。而不是有时候遇到的是:GIS地图就是很普通的样式,可编辑性不是很强,样式也比较老旧,对设计就会造成大量的困扰。在主视觉没有完美表现的时候,就不要强求说把两边去做好看,主视觉不好看,那么图表做的特别华丽也只是让主视觉更掉分。


其实最正确的表现就是二维表现加上三维场景展示,两者相辅相成,对于画面的展示才是最好的。通过下面这组案例可以发现,二维表现加上三维场景才是最优解。



04 面对段落文本列表需求时如何把页面做出科技感?


很多同学对于文字需求如何制作科技感有很多的疑问,通过最近的作图,总结出四种关于文字排版科技感的展示,总结起来其实就那么几点:装饰,图形,字体,版式,表现形式...


其实对于数据可视化设计科技感的研究,不仅需要了解表现层,更需要上升到业务层。一些特定的图形或者装饰,对于画面的丰富程度一定是有帮助的。


讲了这么多,不知道对大家理解科技感是否有帮助,如何提升画面科技感,是我们做为数据可视化设计必定会面临的一大难题。希望大家在以后的工作或者项目中,多多酷炫,多多科技感!!!



1、根据场景-了解展示需求


场景是什么?是人物、时间、地点三要素所组成的特定关系。在某某时间(when),某某地点(where),特定类型的用户(who),干了某某事情(what)。


因此我们要确定的是,根据这四个“W”去确定整体业务框架的基础构成,这对于设计风格的初步意向确认有着很积极的意义。


who:王局长

when:领导人会议时

where:公安局

what:新基建建设 数字化转型事项


在领导人会试上,公安局王局长提议通过了关于新基建,数字化转型的各种措施。面对这一场景,有以下几个问题。受众是谁?需要干什么事情?谁去干?数字化转型怎么做?怎么实现?需要用到的技术?展示风格?重功能?还是重展示?


在有了这些的前提下,对于我们设计风格的选择就有了很强的指导意义,比如王局长比较喜欢多色搭配,科技感强的风格,主要为了配合展示汇报,那么就可以通过这一些需求,初步制定风格为效果酷炫的展示类大屏,但是主视觉的展示形式还是要根据其他的具体情况去进一步确认。



2、根据含义-确立设计方向


在面对一些特有的项目时,一般客户会给出一些参考术语:“3个一带”,“2个方针”,“八大成果”“三山,两水,百林,千田”......


面对这种问题,能做的就是理解其包含的真实意义,究竟需要展示哪方面的,了解清楚项目的背景需求,结合客户所说的一些关键字段,剖析以上的内容可以发现,客户通过一些方针和方法,对“山水林田”进行治理,取得了一些阶段性成果。


因此展示的内容可以确定为智慧治理,或者智慧生态方向的,然后就可以根据项目背景的内容去选择可以应用的具体的一些方案了。



3、根据需求-明确设计内容


因在到了需求分析的阶段,可以根据客户提供的大量的资料和业务需求,去明确的设计方向,究竟是需要展示哪些内容?可以提供的数据有哪些?展示条件(硬件设施)是否具备?想要的效果有哪些?


比如客户需要查看到山水林田的各个改进措施的效果,以及改进前后的效果对比。说到这单纯的二维GIS和影像已经不太好满足了,那么可以将场景风格定位到三维展示,需要实际1:1建模,至于是通过WEBGL,UE,UNITY就看各自的团队擅长的方向了。


场景大体风格确定,那么展示面板需求根据场景去搭建就可以了,这样一个完整的风格选择过程就算初步走通了,具体的验证环节,可以在一次次会议中再去进行交流和修改即可。




  • 二维GIS(深浅)、卫星影像


优点

展示容易,风格切换皮肤多,可编辑性高,开发难度低,地图资源较多,适合快速搭建可视化大屏模版,开 源内容较多,前端开发直接调用样式即可。


缺点

展示形式较普通,地图风格样式不出彩,设计效果也会打很多折扣,很难与同行拉开差距。


难点

开发过程中可能需要基于高德API以及一些平台,对封装地图进行二次开发,没有GIS开发经验的前端,会比较困难。


网址

https://lbs.amap.com/product/mapstyle#/  Mapbox,高德API,百度API,超图,天地图等等。


以高德API为例



  • 矢量地图、省市区块


优点

展示灵活,可下载svg矢量区块,并可下载json文件直接交付开发,可下钻到县级,可编辑性高,一般会结合二维GIS来展示,有插件可以直接绘制全国地图。


缺点

不够立体,可选样式比较少,画面主视觉容易空洞导致画面效果不强。


难点

开发对于设计图的一些效果还原比较困难,例如发光,渐变等等。只能做一些比较基础属性的修改,对于效果还原可能达不到80%以上。


网址

http://datav.aliyun.com/tools/atlas/index.html#&lat=33.50475906922609&lng=104.2822265625&zoom=4


以DATAV地图下载器为例



  • 矢量地图模型、省市区块


优点

展示效果好,三维场景,有立体效果,材质贴图不同效果会完全不一样,可编辑性较强,相比较二维更推荐这种表现形式。


缺点

三维范畴,不会三维知识的小伙伴会比较难,此处会涉及到三维软件合并挤压,展UV,漫射贴图,QGIS制作高度贴图,PS制作法线贴图等等知识点。


难点

对于不懂三维的小伙伴比较困难,涉及知识点较多,容易一知半解。


教程

https://mp.weixin.qq.com/s/zjR_pJyU1jpeLJMXZ-4FyA(原作者已授权)


3D地图建模及贴图的制作获取方法



  • 三维模型、城市建模


优点

展示形式新颖,展示效果非常好,三维表现往往让人耳目一新,对于可视化的展示可以说是所见即所得,深得客户喜爱。


缺点

开发难度高,专业性人才比较少,懂三维的设计也是非常的少,对于三维知识以及引擎开发知识需要比较熟悉才行。


难点

人才稀缺,入门难,做好更难,教程自学难度有点大,例如cityengine程序化建模,houdini程序化建模等等。


教程

https://space.bilibili.com/21247145?from=search&seid=10582171815506234319


cityengine程序化建模



  • 知识图谱、数据中台等


优点

主视觉效果强,特殊场景的处理能够很完美的讲清逻辑,对于图形化的理解有很强的意义。


缺点

逻辑复杂,难懂,比较抽象,专业难度高,对业务理解能力需要很强。


难点

逻辑处理比较难,设计效果比较难以想象,设计容易偏离主题,比如数据中台,是一个非常虚幻的东西,很难讲清楚处理逻辑和过程。


网址

https://www.zcool.com.cn/work/ZMzg4OTQ5ODQ=.html


以知识图谱为例



知识点总结


可视化风格三大分类以及对于图形的应用(传统、HUD、FUI);

如何培养自己的数据可视化设计风格(色彩+图形+板式);

影响科技感风格的四大影响因素(配色,图形,背景,动效);

设计风格的选择以及确定思路(根据场景、含义、需求);

可视化风格的应用以及拓展(各种主视觉的应用优缺难点)。


讲了这么多,不知道对大家理解科技感是否有帮助,如何提升画面科技感,是我们做为数据可视化设计必定会面临的一大难题。希望大家在以后的工作或者项目中,多多酷炫,多多科技感!!!不知道大家有没有一种错觉,突然有一段时间,某个时候发现自己突然不会做设计了,啥也想不明白了,莫名的有点浮躁,做什么都不能专心。其实很简单,总的来说就是,你即将突破现有的设计水准,如果能想明白,解决掉问题,你的审美以及设计水平都会有很大的进步。这就是别人口中的,突然就会了,知道怎么做了,其实无非就是积累够了,需要升入下一个等级了~


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

文章来源:站酷 作者:AYANG_BDR
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档