首页

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

博博


前言


读者朋友们大家好呀!(声明:《字体篇》文章中所有的字体规范都只针对可视化大屏设计,后台可视化以及 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



可视化设计十要素-设备篇

鹤鹤

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


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


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


同时也会包含一些工作中的同学们问我的一些问题以及我搜集的一些问题,将会以问答的形式去给大家讲一讲,如有不对的地方,还请大家指出,我们一起探讨进步!


文章较长,请广大读者仔细阅读,基本涵盖:设备信息,分辨率尺寸,大屏适配,投屏事项,掌握本文可应对日常可视化设计设备方面的知识。



LED屏幕

政府大屏主要以点间距去区分屏幕的精细度,点间距越小,造价约昂贵;面积越大越整体,造价越高。离屏幕越近颗粒感越强,设计效果也就越不清晰,LED显示屏表面不平整是导致LED显示屏图像失真的主要原因。LED显示屏表面粗糙度的好坏主要取决于生产工艺。

屏幕介绍:按照不同点间距进行分类,P1.25、P2.5、P3、P4、P5、P6、P8、P10、P12、P20(间距越小,图像越清晰,价格也越高,一般政府led屏基本都在P1.25-P6之间)。

最佳视距=像素间距/(0.3~0.8),这是一个近似范围。如LED显示屏P16mm,最佳视距为20~54米。


液晶拼接屏

拼接屏相比于点间距比较小的LED屏,价格方面会更便宜一点,拼接屏设计时最主要就是拼缝的处理,注意拼缝,设计时非必要情况下,都要跳过拼缝,尤其是“圆”这个造型。

拼接屏:46寸,55寸  物理分辨率:1920*N 1080*N(n代表屏幕数量),1.7mm、3.5mm 、0.88mm、0.44mm、无缝隙;企业常用(1.7mm 和3.5mm)

大屏拼接缝隙:设计时应尽量不要跨屏去设计,会使画面交叉,不重叠,尤其是圆形。


大屏拼接处理器

大屏拼接处理器主要功能是将一个完整的图像信号划分成N块后分配给N个视频显示单元,完成用多个普通视频单元组成一个超大屏幕动态图像显示屏。大屏拼接处理器输入信号数量和类型取决于用户需要,输出信号数量等于显示单元数量。


视频矩阵处理器

矩阵是将多路输入信号切换输出到多个显示设备,一般来说输入信号数量要大于输出信号数量。(我们想在9块显示器上同时监控100个摄像头传来的信号,就用矩阵来实现即可)


视频矩阵是指通过阵列切换的方法将m路视频信号任意输出至n路监控设备上的电子装置,一般情况下矩阵的输入大于输出即m>n。有一些视频矩阵也带有音频切换功能,能将视频和音频信号进行同步切换,这种矩阵也叫做视音频矩阵。


模拟视频矩阵的输入设备:监控摄像机、高速球、画面处理器等很多个设备,显示终端一般监视器,电视墙,拼接屏等(通常视频矩阵输入很多,一般几十路到几千路视频,输出比较少一般2-128个显示器;例如64进8出,128进16出,512进32出,1024进48出等)。


总结:矩阵只能负责信号的切换,不能处理,不能做效果。大屏拼接处理器功能十分强大,具备矩阵功能的同时,还可以实现任意开窗、漫游、叠加、场景保存与轮换。


液晶拼接屏的优势 - 拼接处理器预设场景

4*2大屏展示端,我们通过控制端,借由拼接处理器可以对大屏进行随意开窗,漫游,叠加,画中画等效果。在控制端拖动布局,大屏会随之改变布局,非常方便。下面我就借由我以前做过的一个项目帮助大家理解一下拼接处理器的优势以及如何设定不同场景。


如果你们企业还在因为屏幕适配以及尺寸问题而纠结,或者想展示:开窗,漫游,叠加,画中画等效果,毫无疑问你们应该选择拼接处理器,这比传统投屏方式更合适,更没有比例不对的困扰。


预设场景一

把控制端的分屏进行编号,接下来移动控制端对应的编号区块,就可以对大屏进行重新布局,图中展示的正是我们的预设正常场景。场景为居中布局,左右两侧为图表展示。


预设场景二:任意窗口布局

对控制端进行随机布局,将主视觉模块移动到左侧四块屏幕,图表都集中在右侧,由此我们就由预设场景的居中布局变成了左右布局,左侧为主视觉。


预设场景三:任意窗口漫游

可以随意的关闭大屏某个模块的漫游,通过控制端进行屏幕的显示以及不显示。


预设场景四:任意窗口平移

画面的任何一个模块都是可以进行平移操作的,我们将模块一和模块五可以平移拖拽到任何一个位置。


预设场景五:任意窗口叠加

画面的任何一个模块都是可以进行叠加到屏幕任何一处,还可以控制模块置顶和置底,非常灵活。


WEB端大屏

基于web网页端的展示方式,通过在web开发,有需要时会投屏到大屏上去展示。设备比例一定不能差距过大,比如16:9的投屏到32:9的大屏就不是合适,解决方案可以是外接一块1920的显示器即可。


此处要注意web端演示时,记得全屏显示,浏览器边框滑动条等可以不考虑,前端会做相应的浏览器细节考虑,设计按正常分辨率走即可。


触摸屏

触摸屏(Touch Panel)又称为“触控屏”、“触控面板”、“触控台“,是一种可接收触头等输入讯号的感应式液晶显示装置。


当接触了屏幕上的图形按钮时,屏幕上的触觉反馈系统可根据预先编程的程式驱动各种连结装置可用作控制端操作大屏,原理等同于ipad控制,只是载体不同。


设计规范以及按键反馈等交互体验与ipad类似。



滑轨屏

滑轨互动屏系统——又称为滑轨电视、滑轨播放等,通过特殊设计的机械滑轨控制装置,结合高清液晶拼接幕墙,实现对屏幕内容的互动控制。滑动到不同位置屏幕展示相关信息,包括图片、文字、视频等,是一种全新的互动展示形式,可与触摸同时使用。


虚拟沙盘

虚拟沙盘/数字沙盘就是用计算机通过投影仪或者LED大屏显示屏动态/静态三维显示:智慧交通、智慧市政、智慧农业、智慧物流、智慧停车、智慧公交、智慧公安、智慧交运等模型,这是一种高科技的模型操作员通过程序,可以随意调整沙盘的尺寸、规划区域、区域布置,快速展示多种全新的创意。


具有三维显示效果,并可以从不同角度观察创意模型,筛选创意方案。注意虚拟沙盘和实体沙盘的联动效果,实体沙盘为底,虚拟沙盘做效果叠加。


分辨率:物理实际分辨率



Q:原本设计尺寸是1920*1080,使用场景是PC端,同时在大屏中展示,尺寸为3840*1080,该如何适配?

A:首先我们需要了解适配最主要的痛点就是:灵活,复用性高,可延展。

围绕这几个点我们可以通过模块化开发去做,将每个模块单独开发。我们设计师做这种需求之前,就需要提前去构思,在设计各模块时,尽量使用可扩展和可自适应的图形,这样面对适配的时候我们可以通过移动,缩放这些模块,来完成适配。尽量避免二次设计以及开发,提升时间成本。


图形放大适配


图形位移适配


Q:如果是16:9适配非32:9是否也是这么去适配的?如果是特殊的形状或比例该怎么适配?

A:我们适配一定要记住灵活,减少工作量这些原则,如果不遵循这些原则,那么我们做适配的初衷就错误了。这样我们还不如直接就重新开发一套了。就好比我们通过控制端去控制大屏,如何用开发一套的时间去适配两个甚至是多个终端,这是我们需要注意的。当然考虑到一些实际情况,会有一定程度上的修改,但是一定是要从节省工作量去出发的。



场景一:拼接屏分辨率计算,已知某项目设备分辨率为宽高4*2拼接屏,设计稿我们该如何去定义分辨率?分辨率又是多大?

从命题我们可以看到4*2的拼接屏,我们可以通过一块屏幕为1920*1080去计算,那么通过计算分辨率应该是1920*4 &1080*2,也就是7680*2160,这样就计算出我们的分辨率了。


场景二:LED屏分辨率计算,已知某项目LED屏幕物理尺寸为宽15米,高4米,设备分辨率未知(可以支持4K或者2K输出),那么如何去制定分辨率?

工作中相信不少同学都遇到过这种只知物理尺寸而不知道分辨率的项目,那么我们只能通过计算大概的设计分辨率来出初期的设计稿件。

可能一:屏幕支持4K输出,既然支持4K输出,保证画面输出的清晰我们可以将设备的高度设定为2160

此场景下公式为:15/4=X/2160     X=8100    那么可以大概得出宽度大概为8100像素(只是我们通过计算大概得出来的)

可能二:屏幕支持2K输出

此场景下公式为:15/4=X/1080     X=4050  


重点来了,不要以为这样就结束了,我一直强调的可视化设计师为什么一定要在现场,为的就是方便各种测试。刚才我们只是通过计算得出的大概数值,此时我们可以在纸上画一个正方形,并投到设备上,如图。


  • 结果一:如果正方形比例不变,设计尺寸无限接近于大屏实际比例;

  • 结果二:如果正方形比例被拉伸,设计尺寸小于大屏实际尺寸;

  • 结果三:如果正方形比例被压缩,设计尺寸大于大屏实际尺寸。


此处图片上主要是为了测试计算出来的分辨率究竟是拉伸还是被压缩了,通过这样的方式去测试设备大概的分辨率的大小比例,在我们产出效果图之后,也可以投射设计图的方式看看屏幕是否是完美适配,这种方法可以在未开发之前,尽可能确定屏幕对设计图的影响,从而避免对开发造成大规模修改。

注意:这样做也只是在不知道设备分辨率的情况下,去大概计算设备分辨率,仅供参考!



电脑直接投屏

使用场景:会议室,展厅等

等比例投屏,投屏电脑投到2*2大屏(4K)

投屏电脑支持输出4K分辨率,投屏电脑分辨率以3840*2160作为设计,投到4K拼接屏上,大屏会完美展示,并且画面非常清晰。


投屏电脑支持输出2K分辨率,投屏电脑分辨率以1920*1080作为设计,投到4K拼接屏上,只会以1920*1080进行输出,因为输出像素只能支持2K,也只是1920*1080的放大。


此处需要了解两个概念:输出像素和显示像素,输出像素指的的是投屏电脑的最大支持分辨率,显示像素就是我们大屏的支持的最大分辨率。

我们实际项目中最好以显示像素的尺寸进行设计(就是以大屏尺寸为主),但是也要看输出设备的像素大小。


硬件投屏本地运行

使用场景:科技展厅,以及一些带主机的设备。


此种情况,一般我们的大屏会自带主机,大屏本身就可以看成一个显示器非常大的电脑。我们如果需要进行可视化演示,那么我们直接就可以通过显示器的尺寸去做设计,这样就是大屏的设计尺寸。


一般这种靠硬件的投射,都是在拼接处理器的处理下,将多个屏幕拼合成一个大的显示器,再通过拼控系统(硬件投屏)进行输出。


一般我们可以将我们大屏的(UE4或者U3D开发)应用程序打包,打包成一个后缀为.exe的应用程序,在大屏电脑上直接点击,程序就可以在大屏上完美的跑起来,也不需要去进行电脑投射大屏。


控制端操控大屏

如果通过控制端去控制大屏,那么投射设备就可以通过多种方式去展示了,可以是手机,平板,触摸屏,手势控制,体感控制等等。


这种情况下投射设备的尺寸就按照本身设备的规范去设计就可以了(比如750*1334,2048*1536),设计尺寸就是我们大屏本身的分辨率就可以了。


多主机多信号投屏

此种情况主要使用场景:屏幕宽度非常高,并且内容可以分很多模块展示,模块彼此之间不受影响独立展示,这种情况下我们就可以通过此种方式去投屏。


通过多个主机分别去投射大屏的同等大小区域,比如图中的场景模块被我分成了四等份,我们就可以通过四台主机去分别投射四个模块,形成一个完整的大屏。


此种大屏设计尺寸我们以输出设备的尺寸为主要参考,四台主机那么整体宽度就是1920*4=7680,高度就是1080(如果设备支持4k输出,那么提升相应的设备尺寸*2就可以了)。


不同比例投屏及解决方案

Q:如果遇到一个设备是16:9,投屏到一个20:3比例的大屏幕, 那我设计尺寸以16:9,还是20:3?

A:我们要记住,如果面对的是正常比例投屏到非等比的大屏,我们需要遵守的规范一定是:一切以大屏展示为主。所以我们设计尺寸一定是按照20:3来设计的,大屏展示正常才是我们的唯一标准,投屏电脑可能会出现的问题,我们只能妥协(投屏电脑可能只能展示很小的一部分,但也是没有办法的)


那么我们遇到这种是否就没有办法了呢?在这阿勇给大家提供了三种解决办法,在实际工作中,我也遇到过这种问题,所以在这给大家分享一下。


方案一:外接显示器(外接多个显示器,一般主机可以另外外接四个显示器,这样就可以解决投屏电脑显示不全的问题了)


方案二:采用拼控系统,而不是用纯粹的设备投屏(拼控系统完美解决了尺寸不一致的难点)


方案三:设计两稿,16:9,20:3我们都去做设计(做两套系统,相当于做的适配)


Q:请教大家一个问题,电脑的分辨率是3840*2160单个大屏的分辨率是1920*1080,拼9*6的大屏,设计尺寸该设置多少啊?这样设计尺寸会不会太大了,如何优化这个设计稿尺寸?

A:前面的文章我们已经介绍过拼接屏的尺寸的问题,这个问题的解答:1920*9/1080*6 ,这个就是设计分辨率,通过计算得出,最终设计稿尺寸为17280*6480。可以看出设计分辨率确实太大了,设计的时候如何去优化设计尺寸呢?


通过命题我们可以看出电脑分辨率是支持4K的,就是说输出分辨率和显示分辨率我们都是可以上4K的,而4K的分辨率一般会做3840*2160,再结合设计稿尺寸17280*6480,可以将整个效果图尺寸缩小三倍,也就5760*2160。设计可以按照这个分辨率去出图,最终交付给开发的就是切三倍图,并提示开发是缩小三倍做的。


总结:不管在面对什么尺寸的设计,都要记住,万变不离其中,一切以大屏完美展示为准则,所有的一切都是要在大屏上观看,为了完美展示,投屏电脑,设备控制等页面可以适当的让步。


全篇知识点

通过以上的知识点总结,不知道大家对于数据可视化大屏设计是否有了新的认识,数据可视化对于设备的尺寸,设备的信息,以及投屏注意事项,都要有更多的了解才可以。下图就是总结本篇文章的知识点。


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

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

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

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


思考数据可视化应用设计规范

鹤鹤


一、图表的分类介绍以及应用范围


一提到图表,大家脑海里浮现的,通常是柱状图、饼图、趋势图等等。这是按照图形等维度对图表进行分类,经常会导致图表的误用。

图表的作用,是帮助我们更好地看懂数据。选择什么图表,需要回答的首要问题是『我有什么数据,需要用图表做什么』,而不是 『图表长成什么样』 。因此我们从数据出发,从功能角度对图表进行分类。






二、画面布局在实战中的应用


在画面中我们经常会遇到各式各样的屏幕分辨率,有大屏的LED屏,有平面显示屏,数字拼接屏等等。那么具体的项目中我们如何去定义这些不同尺寸的屏幕来进行画面布局呢?



如若有其他分辨率下的屏幕,按照这个规律的基本布局,尽量使组件呈现16:9比例排布是最好的;超长分辨率下的大屏设计或者拼接很多块显示器的大屏可以通过具体业务内容来展示,按模块去划分,功能点明确即可。

此处布局只是我个人觉得比较合适的展示方式,并不代表一定是需要这么排布,还可以有很多的形式去布局。也可能因为业务不同,版式也会有调整,不过万变不离其中,掌握基础要素,其他分辨率下照样可以有很多编排形式!





三、硬件常用尺寸以及设备


Led屏幕


1、点间距不同


p3点与点之间的距离是3毫米,p4点与点之间的距离是4毫米。


2、清晰度不同


P后面那个数字越小,代表两个灯珠之间的距离越小,清晰度越高,相对应,价格也会高,因为每平方的像素点P3比P4多很多,成像效果好。


3、最佳可视距离不同


点间距P3(3mm)的显示屏,它的最佳可视距离是3.5~10米,点间距P4(4mm)的显示屏,它的最佳可视距离是5~13.5米。可以根据自己的实际情况,选择最适合的型号。



拼接屏


拼接的每块小屏一般是16:9的高清屏,设计尺寸可以把上下高度设定为1080px,长度按照拼接屏的数量比例得出长度的设计尺寸。例如3乘5的一块大屏幕,高度3块屏设为1080,每块高就是360,360除9乘16等640,640就是一块屏幕的长度,640乘5块屏=3200最后得出设计稿尺寸就是:高1080px乘宽3200px(在这里感谢我的数学老师)


现在企业常用的有无缝隙、1.7mm缝隙、3.5mm缝隙、三种拼接大屏,缝隙越小越贵。


另外大屏设计还有一个比较重要的问题就是注意拼接屏之间的缝隙,设计时千万不能跨屏设计,不然很影响美观。





控制端


目前企业用的最多的控制端为ipad控制,需要在ipad上制作出控制端页面,一般尺寸为2048*1536,控制端大多数为按钮操作,页面尽量简单明了。





四、字体字号以及画面配色631


字体字号


在数据可视化设计中,一般选中的字体有如下几种:

  1. 中文字体:苹方,思源黑体

  2. 英文字体:DIN,DIN-PRO

  3. 数字字体:Exo

正常1080P情况下,由于甲方大多数为政府机构,文字要求会比一般的要求大一点,一般都是选择最小16px。字号不是固定的,人是活的,规范是由人制定的,切勿迷信规范。



配色法则以及颜色选用


运用配色631法则,将配色定义为主色60%,辅助色30%,对比色10%去贯穿整套界面文字的颜色通过重要、普通、次要去分配,是带有色彩倾向丰富页面视觉。

在数据可视化设计中,由于大屏是偏暗的,所以需要选择高饱和度的色彩,并且需要选择统一的颜色,保持画面协调。

有时候会遇到客户需要高饱和度的颜色并且多个颜色的时候,在选用时尽量选用饱和度不要太高的颜色,不然画面会很不协调,也就是所说的晃眼。



在设计过程中尽量选用深色背景作为画面主背景,这个可以解决大屏因为色差问题,对整体页面的影响,用户也比较容易忽略拼缝中的存在的跨屏感。同时深色背景时更容易突出主体,画面效果更好,更能体现流光、粒子、发光等酷炫效果。

同时,大屏由于有色差,尽量不要使用渐变色,如若需要使用需要到达现场,根据大屏反馈的色差,现场调整,但还是推荐尽量使用纯色。




五、画面饱满以及页面装饰点线面


画面如何饱满


方式一:字体的饱满

将字体处理后,空白面积减少,整体更饱满了些

方式二文字的饱满

正常情况下为使阅读更方便,标题间距给-10%~20%为佳。

通常数字会比汉字小,为使基线对齐,数字与汉字需分开设置字号。

主副标题字号比例过大过小会导致界面不平衡,建议主标题是副标题的1.5倍。



方式三关系的饱满

当A=B时,图标和文字的关系会混淆,这种情况下要满足B>A,用间距分层次


采用黄金分割0.618值。也就是横向21个小方块,竖向13个小方块。此时,最优雅的板式是A>B的间距,1>2>3的间距。



方式四:图标的饱满



页面如何装饰会更丰富(如何运用点线面三大构成)


我们在设计的过程中,经常会因为画面不够饱满页面太空,收到客户的吐槽,下面就讲讲如何通过点线面来丰富画面,使画面更丰富更有层次感。


1.原画面设计完成



2.添加装饰线(点线面构成)




3.调整位置,丰富画面



在画面添加装饰的情况下需要给画面留足位置,数据可视化大屏本身面积就比较大,合理运用画面以及拼接屏缝隙添加装饰线,可以更好的减轻拼缝所带来的影响。装饰线的添加还可以在后期丰富画面动效,科技感十足,在页面中添加装饰线在我看来,非常的有意义,既可以丰富画面,又可以完善动效,一举两得。


在装饰线添加这一块,推荐大家多去看看国外的可视化设计,哪些几乎将点线面构成发挥到了极致。




六、画面动效以及素材灵感收集


动效制作


C4D+AE

在很多设计项目中会用到很多酷炫的科技模型,比如汽车、人物、地球模型等等,我们可以运用C4D来进行主视觉建模,再通过AE进行动效输出。




有的人可能会问在导入数据之后可能由于数据量不大的原因,动态效果不是很明显,在这种情况下,咱们可以把不变的数据量,做成AE动效,可以把动效导成json文件直接发给前端,能很大程度上保障画面动态效果。



素材灵感收集


Behance

在behance上有很多国外的设计师,他们的数据可视化设计做的都非常漂亮,极具代表性风格,我们可以通过behance搜索HUD 即可搜出来一大堆精美的高清原尺寸设计图,同时可以把这些作品保存到自己情绪版中,非常的方便。


pinterest

从“书签”这个角度出发,我们可以发现其实Pinterest的本质就是一张张精美绝伦的图片书签。每一个在Pinterest上的图片其实都是一个个网页上所提取浓缩而成的书签。pinterest对图片的关注是最用心的,去除了其他的各种干扰,Pinterest只注重图片的呈现。

而且Pinterest有个非常独特的功能,就是他能够自动筛选同类型图片,并且精准度非常高。



Videohive

这是一个专注视频模板和素材的网站(收费),在此可以搜索出很多的HUD动效视频以及高清图片。


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

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

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

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



日历

链接

个人资料

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

存档