疫情地图界面设计剖析

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

整体思维导图如下

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

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

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

那么现在进入正题

分析案例 - 境内媒体

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

可以看出,在这11份样本数据中,除开央视新闻以外

其他10份都拥有基本相同的用户界面的版式设计

模式基本为:

顶部突出主体信息、放置Logo品牌标志、图形化海报设计

从上至下依据信息优先级、信息直观程度;APP功能特性入口来进行整体布局

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

顶部导航栏

界面设计 - 导航栏

顶部导航栏的设计均为一张关于新型冠状病毒的图像海报,辅以文字的设计,

顶部大块颜色的使用在白色背景的整体界面中处于视觉优先级较高的地位。

清晰醒目,将页面主旨第一时间告诉了用户。

海报由品牌logo主题文字、背景图像组成,清晰的传达了信息。

部分应用在导航栏下方放置了四大类数据分析入口,有条理的展现了图表的主要功能。

根据应用的不同类别,入口的设计与略有区分,为了契合每个APP本身的产品特性,

每个应用入口内容相应进行了特别的设计。

情感设计 - 导航栏

在顶部导航栏中使用了

大量的医护人员形象、肺部形象化特征、医疗卫生十字、以及显微镜下的病毒形象,

这些拟物化的设计作为本能层设计的一种体现,基于现实情况的联系之后形象化的表达了功能信息与内容信息,从视觉上加强了用户的体验,并立体了产品与用户的感情联系。

在海报下方显示的全国疫情、世界疫情等通过字体颜色与字体下方同样颜色的下划线清晰的表示了现在用户在整个页面中所处的位置,这里的设计并不具有多大美学价值,但给了用户一个清晰的逻辑顺序,具体框架。其同样代表了疫情地图的可延展性,除开疫情情况的具体分析与具体数据以外,还包含了疫情的发展过程与疫情相关的信息。

色彩设计 - 导航栏

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

界面承载介质/表现形式

此次共收集境内信息发布媒介11家,包括官方媒体与各类企业平台,其布局模式与使用平台均以h5形式出现。可轻易得出主要目标介质是移动平面端,且布局模式与显示信息基本机制也主要以适应移动平面端高长宽比为主。

呈现媒介的选择

根据目前信息传播的方式以及及时性碎片性,加之目前移动网络的大时代背景下,平面移动端成为了符合新闻资讯类最便捷、最及时、最广泛保有-三大需求的承载实体。根据研究表明人类每天花费5-8个小时在移动互联网平面设备上,这也同时是注意力的主要去向。故各类传统媒体与新兴互联网媒体转移重心从传统媒介(电视、广播)到移动传播媒介(互联网),着重开发移动设备的互动体验。疫情发生,人们的注意力与信息的交织速度与程度也在互联网中如惊涛骇浪一般席卷而来,这也是为什么h5形式成为疫情数据地图信息是最合适的承载形式与媒介,其很好的结合了时代背景下最好的传播媒介与信息交流的时代特质。

疫情数据传达版面

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

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

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

那么在功能层的情感设计当中,上方一行小字较昨日+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这个机构的专业领域-商业信息图表可视化

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

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

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

界面概述

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

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

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

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

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

色彩分析

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

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

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

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

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

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

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

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

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

小结

经过我们分析可以得知

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

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

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

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

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

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

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

第一:

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

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

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

第二:

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

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

第三:

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

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

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

第四:

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

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

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

为您推荐

返回顶部