WEB端-数据可视化深色模式和自适应设计

本文以近期改版上线的百度流量研究院为例。与大家共同探讨WEB端-数据可视化深色模式和自适应设计的应用。

设计亮点：

深色模式的设计，结合多样化的可视化图表，营造沉浸式的数据浏览体验。

采用响应式设计，为不同终端的用户提供更加舒适的界面和更好的用户体验。

深色模式

Google 在 2019 年度 I/O开发者大会上宣布，安卓支持深色模式。苹果发布 iOS 13.0 可将系统设置为深色视觉风格。PC端，2018年macOS Mojave（V10.14）中就推出了深色模式。为什么纷纷推深色风格？

深色模式优势：

（1） 聚焦于内容：深色模式可以将焦点集中于界面当中的内容区域，使内容本身得以突显，而周围的界面元素则会隐退于背景之中。

（2） 减少眼部刺激：更有利于用户在长时间使用电子设备中，减少对眼镜刺激。统计用户主要为产品经理和运营同学，在工作中查看，帮助减少对齐眼部刺激。

（3） 信息保护：暗黑模式下的屏幕信息在非正视角预览时，信息的辨别可视性反倒会降低，从而起到一定的信息保护作用。

颜色定义

结合流量研究院官网设计语言，卡片式设计思路，那么在黑暗主题下，要明确区分卡片的层级，使用最暗的颜色作为主要背景，利用灰度的变化区分叠加关系，如下图举例。

将用户眼镜比作光源，距离光源越近卡片高度越高，颜色越浅。

灰色选择：

彩色选择：

文字颜色：

深色模式多层文字表达时，可以采用降透明度的方式，越重要的文字透明度越低，反之则越高。

颜色选取注意事项：

（1）慎用饱和度亮度过高的颜色，在深色模式下会对比过强，形成刺眼的效果，反倒会降低识别度。

（2）符合WCAG 2.0 标准，文字与背景颜色对比在 4.5:1 之上符合规范。可用工具 www.contrast-ratio.com 检测。（注意：项目中也并非所有的内容的对比度都在 4.5:1 之上）

可视化设计

创新可视化图表设计，将复杂、枯燥的数据，以更加可读、易读的形式设计，提升产品易用性。

图表之间，统一交互态设计：

对比GIF图一、图二，图一上网时间分布左右内容关联性较弱，所以采用hover查看，方便用户快速浏览信息。图二左右内容关联性较强，所以才用点击联动的交互状态。

在视觉设计中，相同交互态图表进行右侧图表样式统一，便于用户操作。如GIF-图三、四、五。

GIF-图一

GIF-图二

GIF-图三

GIF-图四

GIF-图五

图六

自适应设计

为适应当今多端访问的趋势，采用响应式设计，从而营造良好的多端用户浏览体验。通过统计数据观察到市场中分辨率占比情况，如下图：

响应式设计策略：

1）确定核心的用户体验：流量研究院核心设计，让用户便捷快速的查看市场数据信息。

2）明确所覆盖的设备类型：手机、平板、电脑。

3）断点尺寸：规定断点范围为750px和360px（这里需要与开发同学沟通）。

4）栅格系统：使用4列，8列和12列网格的布局。在确定各尺寸边距、槽位宽度（如下图）。

5）优先为最小的屏幕做设计：移动端优先的设计往往能够更好的专注于核心功能，更适合作为产品设计的起点，会强制你从最关键最重要的地方开始设计。

6）提供一致的用户体验：当产品的设计和功能在各个地方都保持一致的时候，用户能够更快地完成任务。