本文以近期改版上线的百度流量研究院为例。与大家共同探讨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)提供一致的用户体验:当产品的设计和功能在各个地方都保持一致的时候,用户能够更快地完成任务。
评论前必须登录!
注册