首页 资讯 正文

世界滚动:资深设计师验证大屏规律,老板赞牛!

2023-06-17 14:04:31   来源:IT技术管理那些事儿    

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

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


(资料图片仅供参考)

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

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

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

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

一、主配色

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

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

1、告警色

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

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

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

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

2、图表系列色

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

对比系列色

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

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

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

连续系列色

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

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

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

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

*配色小技巧

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

如colorhunt,colordrop等网站

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

二、字体方案

1、字体类型

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

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

2、字体字号

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

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

3、字体字重

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

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

4、字体配色

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

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

总之

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

售后质量异常分析大屏

智慧旅游分析

城市课堂

预算管理驾驶舱

SMT贴片产线监控

IT服务管理工单大屏

更多模版,私信获取。

关键词:

为你推荐