太酷啦!资深设计师验证出的大屏配色和字体规律,老板直呼牛!

文 | 商业智能BI相关文章 阅读次数:1,266 次浏览
2024-03-01 15:43:11

“一顿操作猛如虎,一看大屏还是土”,大屏配色和字体常常让职场人愁秃了头。

今天我就给大家介绍一下大屏设计方案的干货,教你无痛精通熟悉常见大屏配色和字体。

首先我们需要意识到,大屏的板块巨大就决定了大屏配色非常重要。大屏本身的面积巨大,它必须在整体上拥有足够的视觉吸引力,才能吸引用户,所以各位大屏开发者一定要小心啦,不小心设计的大屏土土的,真的会被集体嘲笑。

但很多朋友也不是科班出身,学习专业的美术颜色搭配真的有难度。

没关系,我都帮你想好啦!只要遵循一定的规则,一样可以设计出超级酷的大屏设计方案

首先,我们需要确定大屏的主配色和字体。

一、主配色

大屏的整体配色,决定了了大屏的场景基调,一般是画布的背景、组件的背景。实际呈现的素材不一定完全吻合主配色,但视觉上要保持一致。一般来说,大屏选择偏蓝色系的更多,比如说:

针对“制造业集团监控指挥中心”的大屏场景,我们选择大屏最常见的蓝色调做主配色规划:

大屏设计方案,大屏配色,图表系列色

1、告警色

一些需要特别突出的指标,或指标值达到预警值时的颜色,一般比较明亮,且与大屏主配色有较为显著的对比。

如果结合图标闪烁动画、警戒线等共同设置,效果更佳。

大屏设计方案,大屏配色,图表系列色

案例中的告警色凸显了“异常情况”:

大屏设计方案,大屏配色,图表系列色

告警和正常值之间的对比色让“处理状态”的对比更显著:

大屏设计方案,大屏配色,图表系列色

2、图表系列色

不同展示逻辑的图表可能需要不同的配色,所以一般至少准备两种图表系列色:

对比系列色

常用于多系列的柱形图、条形图和饼图等,强调数据系列之间的差异。

大屏设计方案,大屏配色,图表系列色

案例中的两个对比色直观对照了总目标和实际目标的情况:

大屏设计方案,大屏配色,图表系列色

多个对比色则用以显示不同的“客户问题占比”,达到一定的多系列对比效果:

大屏设计方案,大屏配色,图表系列色

连续系列色

常用于单系列的柱形图、条形图、面积图等,在大屏整体看来只有“一个颜色”,但渐变的效果不仅表达了数据之间的连续性,还有酷炫的视觉效果。

“连续”的效果可以通过渐进的一系列颜色或渐变色体现。

大屏设计方案,大屏配色,图表系列色

在本案中,用渐进色表示“客户评价”这一系列有关联的数据:

大屏设计方案,大屏配色,图表系列色

用渐变色营造科技感,普通的仪表盘也变得“不一般”:

大屏设计方案,大屏配色,图表系列色

*配色小技巧

担心自己不会配色的小伙伴可以参网络的的配色网站设计大屏:

如colorhunt,colordrop等网站

图表系列色还可以结合公司品牌logo的颜色,直接使用公或设计一套与之相近的衍生配色,也是个便捷的办法。

二、字体方案

大屏设计方案,大屏配色,图表系列色

1、字体类型

大屏上的字体类型一般不超过2种,同等级的标题、正文的文本字体类型保持一致。

字体类型以无衬线字体为主,如黑体、微软雅黑等(也需注意字体可否商用的问题);少用有衬线字体,如宋体、楷体。

2、字体字号

规划从各级标题到图表、表格中的文字的字号大小。

字号需要和大屏的画布像素对应,如960*540px的画布对应最小字号6px,3840*1080的画布对应最小字号要上调到10px-12px。

3、字体字重

即字体是否需要加粗显示。

一般较高级别的标题可以加粗,表格的表头、重要突出的指标数据可以加粗。

4、字体配色

大屏上的正文字体一般是白色,根据文字内容需要可以变化透明度和灰度;

需要重点突出的文字内容,结合配色方案中的主配色、告警色做规划。

总之

看了这些,你是不是对设计配色和字体有点感觉了,下面我也分享一下各行各业大屏设计方案,看看有没有适合你行业的~

售后质量异常分析大屏

大屏设计方案,大屏配色,图表系列色

智慧旅游分析

大屏设计方案,大屏配色,图表系列色

城市课堂

 

预算管理驾驶舱

大屏设计方案,大屏配色,图表系列色

SMT贴片产线监控

大屏设计方案,大屏配色,图表系列色

IT服务管理工单大屏

 

在当前的数字信息化时代,借助FineVis这样的数据可视化产品,可以让企业高效监控业务指标,助力经营分析决策。目前,市场主流的数据可视化软件FineVis,整合了数据源、超强模板编辑器、丰富的模板素材资源,最重要的是,它支持低门槛搭建3D场景,快速简单上手,提升了数据可视化应用效率。FineVis提供强大的数据可视化设计、开发和多终端展示能力,将工厂、园区、产线、产品等业务相关物体映射到数据世界中,助力企业全方位释放数据可视化的价值。大屏设计方案,大屏配色,图表系列色

FineVis可视化大屏产品更多介绍: https://www.fanruan.com/finemax

相关内容

立即体验 立即体验

在线客服

电话咨询

技术问题

投诉入口

返回顶部