恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
疫情地图的视觉传达分析2.0-国际版
0.0°
2020-10-06 原创文章 经验/观点 举报 9168 39 28 2

随着疫情在我国进入了新的阶段,我们的目前的工作重心已成为“外防输入、内防扩散”,而新冠病毒却在全世界范围内大规模爆发,目前确诊人数已超260万… 



作者叙


自1月23日武汉封城,到现在已过去了92天。虽然武汉在4月8日武汉解封,但身处在武汉的我,仍旧不打算出门,社区也依旧严防严控,进出小区需要测温与扫描健康绿码,闲杂人等不得进入小区。随着国内疫情的一步一步缓解,更大的压力来自于国外的病例输入,一场无形的风暴,席卷了整个蓝星,国外人民现在的处境,一定与几十天前的我们一样…


在这期间,艺术何为?设计何为?



前言


  • 上一篇,我分析了各大国内平台以h5为主要形式的疫情地图的视觉传达原理
  • 以及设计心理学的表达层次以及应用。
  • https://www.ui.cn/detail/518622.html
  • 如果对上一篇感兴趣的同学可以去看看
  • 这次,我们主要聚焦于疫情正肆虐的全国范围内的一些重要机构媒体
  • 看看他们是如何将疫情数据整体可视化的。



在这里,其实我们可以很清晰的了解到一个现状就在于这些组织都均为学术机构、政府机构、非政府组织、官方新闻媒体,这也就导致了一些差异化的视觉表现。


整体思维导图:



在这里我们要了解一个问题,什么是数据面板呢?


DashBoard-中文译为“数据仪表面板”

是商业智能仪表盘(Business Intelligence dashboard,BI dashboard)的简称

它是一般商业智能都拥有的实现数据可视化的模

是向企业展示度量信息和关键业务指标(KPI)现状的数据虚拟化工具 。

Dashboard在一个简单屏幕上联合并整理数字、公制和绩效记分卡。

它们调整适应特定角色并展示为单一视角或部门指定的度量。

Dashboard关键的特征是从多种数据源获取实时数据,并且是定制化的交互式界面。

Dashboard以丰富的,可交互的可视化界面为数据提供更好的使用体验.

(摘自百度百科)


而本次在国外各大平台的疫情地图所采用的视觉传达可视化形式中

基本都是以数据面板为主要形式进行展现的。

这也就带来了目标介质的差异性,大多数以面板为主要形态展现的可视化对小屏幕电子介质并没有很好的适配,其主要针对了大屏幕用户,如PC端。

这与国内平台所针对的广泛传播下目标介质为移动端有极大的不同,而这也最终导致了设计传达端可视化形势与受众感受的不同。




部分案例示例图(政治敏感已略去)


University of Washington


University of John Hopkins


Health Maps


World Health Organization


University of VirginiaU.S Center of Disease Control & Prevention


South China Monring Post




布局分析


在整体设计中,我们大致可以将数据面板构造类型整体分为两类


1.轻量型

2.传统型



那么这两类最主要的差异就在于信息密度与信息的复杂程度,

且包括了整体设计思维的差异,面对终端介质的区别。



在布局的功能体现、整体行为层的设计中

地图本身都占据了整个画面的绝大部分,

这样本身是符合其“疫情数据地图”的潜在心理传达意象的

且地图本身负担了数据可视化的主要功能。


同样,与国内平台相似,疫情的数字系统也主要被分为了4个大类

分别为:

1.Active Cases 现存确诊

2.Aggregated Confirmed Cases 总计确诊

3.Total Deaths 总计死亡

4.Total Recovered 总计康复


由于发布平台本身的学术性、权威性等自身特性,以及疫情爆发的整体范围,其在行为层设计中主要是以全球数据为整体表达信息,首先显示全球整体趋势,然后提供定位功能与本地(Local Trend)入口查看本地疫情形势,这一点同样与国内疫情地图出品平台有着鲜明的对比。


而对比之下,疫情地图在国内的平台则更加的以文字传达为主,地图没有交互性质,处于次要的视觉优先级之中。


同样在图表的显示中,柱状图与折线图的使用带来了巨大的视觉差异,丁香医生与世界卫生组织在同时处理趋势问题时采用了不同的方式,折线图下信息的过于冗杂以及线本身的视觉力量不足所导致了辨别的困难性,且主体信息对比之下没有真正做到分级。在手机这类视觉区域相对较为狭小的空间中,字体的辨别与磅数起到了直观的传达作用。




而在国外平台的地图显示中,同样出现了差异化的视觉表达。



地图的主要设计中,可以分为两种视觉表达方式


1.点状热力图

2.平面热力图


点状图以圆形为基础视觉图形,可以以重复堆叠,互相覆盖的形式美法则以密集的矩阵式视觉形象使人感到复杂、紧张、甚至一些不适,这样的视觉表达方式能够使人直接从感觉层面了解到事态的严重程度,这也是一个成功的本能层设计。

而平面热力图则以颜色为主要的视觉手段,通过颜色的各个属性来表达事态的严重程度,但没有形状这方面的视觉转换,对比点状图其放弃了一个视觉纬度的变化方式,表达效果更佳整体,理性,但是也同样可以表达事态的发展程度,通过颜色的直接感官刺激。

这两种都是优秀的本能层设计,通过不同的维度表达侧重表达了不同的视觉信息与视觉感受。



在功能方面,平面热力图与点状热力图都可以通过色彩色相、明度等转换方式传达着不同的信息,从而产生不同的视觉效果




— ——— ———— ———— ———— —————— —————— ———— 



那么我们也就不可避免的在整体设计系统中提到色彩这个关键的本能感官视觉的重要元素之一





首先我们在分析整体色调前,先从整体明暗关系开始分析


这里的高调指的就是在素描作品中,暗部的明度B(brightness)范围在70%左右的

整体明度较高的调子关系

同理,低调与高调相反,亮部的明度控制在70%为上限的,整体较为黑暗的调子关系

中调则在两者之间,具有完整的黑白灰分明的明度体系。


我们在这里仅仅是大致的分为三种,其实细分起来有很多种,这里不再赘述。


高调HSB示意图(Photoshop2020)


当你把画面切至黑白页面,去掉色彩属性后即可以很容易的看出整体的明暗关系。




在分析完整体明暗关系后,我们开始加入色彩属性进入考虑范围





在分析过高调后,我们再取一个“低调”类型进行分析





最后的是“中调”的设计



总结


国内外的对于同一事物的设计风格产生了较大的差异,


主要是由于其目标介质终端、目标用户、整体大环境、自身属性等,


致使所带来的设计风格、设计理念的改变。


这也提示我们,在设计时应该考虑品牌形象,品牌战略,内容属性,市场环境等因素


并分别从本能感官层面、功能行为层面、以及人文感官层面去设计。

设计语言多样化的同时,我们应该充分考虑各种设计语言,


选择符合自身情况的设计方式,并将两者有机结合


最终传达到最佳的视觉效果,进而达成目的。




Thanks for watching! Jackie Xin Here.


欢迎提出意见与指正!Let's be better together!

Powered by Froala Editor

更新:2020-10-06

收藏

39人已收藏

辛智晟

Contact: JackyXin6@gmail.com

  • 2

    作品

  • 36

    粉丝

  • 8

    关注

  • 疫情地图的视觉传达分析

    猜你喜欢

      2020-10-06 原创文章 经验/观点 举报 9168 39 28 2

      疫情地图的视觉传达分析2.0-国际版

      0.0°

      你确定要举报疫情地图的视觉传达分析2.0-国际版

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年04月24日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      28
      39
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录