“一顿操作猛如虎,一看大屏还是土”,大屏的配色和字体常常让职场人愁秃了头。
今天我就给大家介绍一下大屏设计的干货,教你无痛精通熟悉常见大屏配色和字体。
(资料图片仅供参考)
首先我们需要意识到,大屏的板块巨大就决定了它的配色非常重要。大屏本身的面积巨大,它必须在整体上拥有足够的视觉吸引力,才能吸引用户,所以各位大屏开发者一定要小心啦,不小心设计的大屏土土的,真的会被集体嘲笑。
但很多朋友也不是科班出身,学习专业的美术颜色搭配真的有难度。
没关系,我都帮你想好啦!只要遵循一定的规则,一样可以设计出超级酷的大屏设计方案!
首先,我们需要确定大屏的主配色和字体。
大屏的整体配色,决定了了大屏的场景基调,一般是画布的背景、组件的背景。实际呈现的素材不一定完全吻合主配色,但视觉上要保持一致。一般来说,大屏选择偏蓝色系的更多,比如说:
针对“制造业集团监控指挥中心”的大屏场景,我们选择大屏最常见的蓝色调做主配色规划:
一些需要特别突出的指标,或指标值达到预警值时的颜色,一般比较明亮,且与大屏主配色有较为显著的对比。
如果结合图标闪烁动画、警戒线等共同设置,效果更佳。
案例中的告警色凸显了“异常情况”:
告警和正常值之间的对比色让“处理状态”的对比更显著:
不同展示逻辑的图表可能需要不同的配色,所以一般至少准备两种图表系列色:
对比系列色常用于多系列的柱形图、条形图和饼图等,强调数据系列之间的差异。
案例中的两个对比色直观对照了总目标和实际目标的情况:
多个对比色则用以显示不同的“客户问题占比”,达到一定的多系列对比效果:
连续系列色常用于单系列的柱形图、条形图、面积图等,在大屏整体看来只有“一个颜色”,但渐变的效果不仅表达了数据之间的连续性,还有酷炫的视觉效果。
“连续”的效果可以通过渐进的一系列颜色或渐变色体现。
在本案中,用渐进色表示“客户评价”这一系列有关联的数据:
用渐变色营造科技感,普通的仪表盘也变得“不一般”:
*配色小技巧
担心自己不会配色的小伙伴可以参网络的的配色网站设计大屏:
如colorhunt,colordrop等网站
还可以结合公司品牌logo的颜色,直接使用公或设计一套与之相近的衍生配色,也是个便捷的办法。
大屏上的字体类型一般不超过2种,同等级的标题、正文的文本字体类型保持一致。
字体类型以无衬线字体为主,如黑体、微软雅黑等(也需注意字体可否商用的问题);少用有衬线字体,如宋体、楷体。
规划从各级标题到图表、表格中的文字的字号大小。
字号需要和大屏的画布像素对应,如960*540px的画布对应最小字号6px,3840*1080的画布对应最小字号要上调到10px-12px。
即字体是否需要加粗显示。
一般较高级别的标题可以加粗,表格的表头、重要突出的指标数据可以加粗。
大屏上的正文字体一般是白色,根据文字内容需要可以变化透明度和灰度;
需要重点突出的文字内容,结合配色方案中的主配色、告警色做规划。
看了这些,你是不是对设计配色和字体有点感觉了,下面我也分享一下各行各业大屏设计方案,看看有没有适合你行业的~
更多模版,私信获取。
关键词: