欢迎光临
我们一直在努力

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)提供一致的用户体验:当产品的设计和功能在各个地方都保持一致的时候,用户能够更快地完成任务。

赞(1) 打赏
未经允许不得转载:前端学习分享网 » WEB端-数据可视化深色模式和自适应设计

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏