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

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

提交需求

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

0/20
0/200

设计大赛

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

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

疫情来临,其迅猛的攻势打乱了所有人的生活,各大APP也推出了相应的疫情地图,本次采集了11个互联网应用的疫情地图,从设计心理学等多个角度分析它们的设计。


整体思维导图如下


此次分析的案例主要来源于:


这里分为了私营新闻机构/官方媒体,以及境内/境外媒体同时主体性质与地理分布上的差异。在媒介上与形式上也做了一些区分

在分析之前的一些构思与思路



那么现在进入正题



分析案例 - 境内媒体



11份样本分别来自不同的互联网应用




主要功能界面设计思维导图




顶部导航栏



色彩设计 - 导航栏

顶部导航栏中的色彩不约而同的大量采用了蓝色系以及偏蓝的紫色系与绿色系,只有两个应用采用了白红搭配与黑色。大部分应用的明度和饱和度也同样处于适中阶段,这样的颜色让人感觉到冷静,有科学性,且让人信赖,不易担心。


界面承载介质/表现形式





疫情数据传达版面

整体疫情数据传达版面体系的设计也十分的相似,大多分为了死亡、确诊、疑似、治愈四大版面内容,在这四个版面下再继续进行细分在数据上方还分为了全国、湖北、全球三大分类。


版式设计方面,主要分为六宫格和与四个版面平行摆放的趋势,摆放的顺序主要以确诊到治愈,给人以足够的条理性。

在数据直接显示的过程中,数字本身这个载体可能不能很好的表示一个趋势性的现象

那么在功能层的情感设计当中,上方一行小字“较昨日+129”就可以清晰的传达

一个趋势性的信息,使用户能够清晰明了的了解到疫情发展的形式。

色彩设计的搭配与之中的情感传达


 首先我们提取出所有样本具有数据传达版面中的色彩

疫情地图版面



在疫情地图版面当中,本次采集样本中将近半数的app例如“支付宝疫情服务”专区,“知乎”等

由于其APP功能产品特性,只显示了疫情的数字信息,接下来跟随了产品的功能特性显示了各自产品的核心功能(疫情相关)

但在第一类疫情数字显示栏目中缺失的官方媒体“央视新闻”客户端

将这一缺失功能整合到了疫情地图旁

在这些样本中,可以分为三种功能传达类型,分别为“一般型”、“交互型”、“整合型

在“一般型”中

图表以传统地图的设计为标本

精确的沿袭了地图的设计方法,并将省市区区域颜色

与疫情数字颜色相结合,做了符合疫情人数扩散状态需要的

色彩传达,通过色彩的明度、色相、纯度关系

制作了地图上的比例尺对应人数数量的多少

让用户了解目前疫情的具体情况

这一类别的“疫情地图显示版面”同样也是最基本的

作为其他类型“疫情地图显示版面”的基础与出发点




在“交互型”中

图表在“一般型”的基础上制作了

一个以时间为轴线的动态效果,同时配以点击图表引导用户点击

以动态效果来表示疫情在这段时间的发展势态与变化,

但是动效的制作比较简陋,容易使得用户失去耐心



在“整合型”中

作为最早发布疫情新闻数据与图表、疫情的官方媒体

“央视新闻”的设计思路与其他的新闻机构或者互联网公司应用完全不同,

其以地图与疫情数据结合的方式

成功有效的同时展现了确定人数与地域性分布情况

而没有选择使用数据呈现并使用颜色区分传达信息的方式。

这样地形+数据的传达方式十分直观,并传达了官方媒体的严谨态度

色彩设计的搭配与之中的情感传达


在疫情地图的色彩设计中,主要是色彩的进行变化

来传达如“疫情扩散范围”、“确诊人数地区差异”等信息数据 根据对比可以看出

色彩纯度较低的疫情地图对视觉观感视觉刺激程度有着十分大的影响


在疫情地图所用的色彩表示中,主要以红色系与黄色系为主

分为饱和度较高与较低两种类型进行颜色变换,其观感符合疫情扩散的表达需要

根据视觉感官规律,在色温上,偏暖的黄色会使图表的认读性加强

而偏冷灰的图表认读性则强烈下降,使用户没有观看的欲望。


疫情-图表-具体数字展示

以百度app为例



在疫情地图的下方,各类app继续使用统计图与数据长表格的形式解析了“全国疫情趋势”、“湖北治愈、死亡趋势”、“中国疫情详细数据”等数据,并在下方附了“新型冠状肺炎预防须知”的栏目



统计表的形式作为一种图形语言,非常适合表示趋势性的数据,

其以线性、柱形结合数据高低形成走势,让人一目了然。


疫情接入服务功能入口


在这次收集的11份疫情地图中出品方可以大致分为三个类别,

“资讯类”、“社区类”、“工具类”


“资讯类”中

有代表“传统媒体”的“央视新闻”

也有一些咨询新闻类APP例如“凤凰”、“网易”、“澎湃”

这一类APP的主要交互方式是用户以接受为主

“社区类”中

有APP例如“新浪微博”、“知乎”

这一类的APP交互方式主要以互动为主,用户可以进行一些APP内操作

“工具类”中

有APP中例如“丁香医生”、“百度”、

“医疗健康微信小程序”、“支付宝疫情健康专区”

这一类APP的交互方式中用户的主要期待是相关类别的专业信息

那么这一类APP在整合疫情地图时与其APP本身产品特质结合的比较紧密



“资讯类”

在资讯为主要功能的应用中

其疫情地图的主要功能入口是以“数据展示”、“数据分析”、“知识普及”这样新闻性功能比较强的类型与类别而存在,资讯类的APP在整体信息的阐述与展示中也更加倾向于与具体的新闻事件和时间线相结合,给用户一个时间、空间、数据三方面结合的立体感受,如“凤凰新闻”下方的「进入专题」入口、以及“央视新闻”顶部导航栏中不同于其他APP的“共同战役”、“长镜头首播”这样具体的新闻播放视频接口。体现了新闻资讯类APP中传统新闻媒体做法的信息承载、呈现逻辑。

同时在经典新闻媒体逻辑的背后也同时结合了移动平面交互介质的“社会性”与互联网时代的“连通性”,设置了类“社区类”APP的“转载”、“分享”入口,再现了传统新闻如“口口相传”的传播方式,引导用户对界面进行交互。



“社区类” - 以知乎为例


“社区类”APP的疫情咨询专区

一般都存在于APP内的一个专门栏目中,有特定入口,作为一个服务分区的存在,其功能性更加脱离传统新闻逻辑,而更紧密的与其产品特性之中的互联网社交需要相结合,如知乎导航栏中布局与疫情数据显示至下的图标,其在功能的设计传达中与知乎社区“问题类”讨论的模式相结合。

最为明显的有“疫情影响”、“疫情故事”入口

这样的功能放置符合APP整体的设计逻辑,

让APP目标群体感受到了APP固有的逻辑诉求内的内容输出与显示。


“工具类”

“工具类”APP由于其工具类型的特质,

肺炎疫情的整体新闻特征并不是其需要表现的重点,而整体设计是以疫情表述为引,重点贯穿着APP本体设计逻辑中的功能特性,根据APP本身的功能特性来具体安排入口功能。


“三类app中的情感设计”

在这些产品的功能设计中,出现了漂浮的圆角矩形功能入口,其中主要为“分享”、“加油”、“报平安”等功能,这一功能的设计清晰的表达了在设计时对人文情感价值的反思层设计,这样的设计通过引导我们与操作界面进行交互产生,并去思考这样的行为可能带来的意义与作用,在当前案例可被视作为一个极好的对社交关系的一个呼应,其照顾了人们在舆论中的传播功能,是对人类深层情感的一个呼应与暗示,例如在支付宝服务专区中“报平安”的入口,而传播这样的科学、严谨的数据可激发思考、讨论等社交行为,并给别人带去新的信息发生传播效应,并有效传播了承载信息的APP本体。



分析案例 - 境外案例


境外媒体数据主要来源于 STATISTA、WHO(World health organization)、私人组织

主要分为疫情地图与信息图表两种形式

在表现载体方面分为两类,一类被称为Dashboard也就是数字面板式

另一类是STATISTA这个机构的专业领域-商业信息图表可视化

信息图表可视化的设计与国内媒体使用的颜色,色系基本相似与一致

都传达出一种科学客观严谨的态度与直接的疫情数据与趋势

而以世界卫生组织为主的数字面板化设计则显得尤为不同



“界面概述”

这两个数据面板的设计处于同一模式,其主要视觉空间分布基本一致。

主要视觉区域是可交互的地图主体,左右边均为数字展现与各国伤亡确诊报告。

这样的视觉分布方案能让观者的注意力直接注意到空间最大的地图上,

并通过地图上点状图的大小确认疫情的爆发地点,爆发规模,

加粗黑体大数字的使用能使人第一眼就看到关键数字与内容。


“色彩分析”

两个数据面板以黑两种不同风格展现

其中黑色调为主的数据面板,因黑色为底,相似于现在流行的黑色模式风格

红色等明度饱和度偏中高的颜色在面板上十分明显,

绿色黄色在图表与数字的表述中起到了醒目的作用


将颜色分布做的足够明显让人产生明确、清晰的视感


相反白色为主的数据面板则显得对比度较低,信息在数据面板中

呈现的不够明显,颜色区分度不高。

但是整体轻松的色调能让人联想到世界卫生组织与医生相关的

干净、卫生的主要品牌形象,并通过轻松的颜色放松用户的心情。



小结



经过我们分析可以得知


画面整体的布局空间以及版式设计可以给用户带来不同的阅读体验

我们应考虑人的潜意识阅读习惯来做符合整体逻辑的界面、图表设计

同时画面上的颜色也应合理的通过色相、色温、明度、纯度来安排与

区分,考虑色彩带给用户的体验与情感感受,同时结合品牌形象与信

息本质所代表的事件去思考如何表达。

明确以人为本的设计,从手中出发考虑图形、交互界面等设计思路。


而在今后的疫情图表类信息交互界面设计的过程当中


第一:

从产品本身的功能特性出发,保持整个产品设计的主要逻辑

从用户对产品潜意识诉求印象的角度出发,考虑如何将两者很好的链接

既将产品的主要功能与疫情本身相结合,并让用户处在产品的主要功能逻辑内


第二:

从数据本身出发,使用符合产品品牌形象与调性的色彩搭配

使数据生动形象的以数字、图表等方式出现在界面上并有效传达到用户端


第三:

从新闻传播角度出发,使数据背后具有具体的经典传媒方式与特征,

并将这类特征很好的与产品本身的特性相结合,立体构建整体框架

既满足了人类本身的舆论需求又体现了产品本身的价值。


第四:

从社会整体环境出发,搭载具有普世性的价值体系,体现人文关怀

以线下实体传播行为方式为模型打造线上社交活动的交互操作,有效舒缓社会之中

的紧张情绪,起到一个正向而积极的作用。



点个赞再走吧?



Powered by Froala Editor

更新:2020-10-06

收藏

184人已收藏

辛智晟

Contact: JackyXin6@gmail.com

  • 2

    作品

  • 36

    粉丝

  • 8

    关注

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

    猜你喜欢

      2020-10-06 原创文章 经验/观点 举报 17562 184 315 13

      疫情地图的视觉传达分析

      0.0°

      你确定要举报疫情地图的视觉传达分析

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2020年03月07日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      315
      184
      13

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

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

      登录

      手机号

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

      登录
      第三方账号登录