理清设计思路,制作可视化大屏其实很简单!
当高校需要展示学校实力,进行校情决策;企业想要了解市场趋势、分析客户类型;医院需要分析医疗服务情况,优化卫生管理;公安系统需要进行警情监测和智慧管控……使用可视化大屏都是一个很好的选择!
上述的场景下通常有大量数据和信息需要被展示,因此,选取一个具有较高数据处理能力和显示性能的工具尤为重要~
可视化大屏能够将数据以图形化的形式展示出来,让人轻松地浏览、分析和理解大量信息,从而发现其中的趋势、模式和关联性。
炫酷的可视化大屏看似复杂且难以入手,然而一旦理清了设计思路,制作将会变得简单许多~
我们可以将设计看板流程简单分为三个阶段: 一、设计前期 二、设计中期 三、设计后期
一 设计前期(3步)
前期可以理解为数据准备阶段,即在正式设计前的准备工作,在这一阶段我们需要做的有:
STEP1 明确目标
明确可视化大屏的需求和目标,比如展示什么数据、应用于什么场景、需要什么样的风格呈现。
STEP2 收集数据
收集和整理相关数据,包括数据来源、数据类型和数据量等。
STEP3 选择工具
最后,选择适合的可视化工具,比如FineBI、 FineReport等等。
二 设计中期(4步)
当前期准备工作完成,我们就可以正式进入设计看板流程了:
STEP1 确定大屏尺寸
为了保证大屏的视觉效果和易读性,需要在设计看板时提前确定物理大屏的尺寸。如果大屏的分辨率过高,可以采用分辨率减半的设计方法,以确保看板能够在大屏上获得最佳的视觉效果。同时,在设计看板时也应该考虑到用户的使用可视化大屏的习惯和认知水平,设计出易于理解和交互的看板。
STEP2 确定关键指标
确定大屏尺寸后,需要确定大屏上展示的关键指标内容。它们对于业务的运营和决策具有重要影响,通常需要在大屏上独占一块区域展示。通过对关键指标的理解,我们可以知道大屏上有哪些区域,每个区域的内容是什么,更容易理解整个大屏的数据和信息。
STEP3 页面布局划分
确定关键指标后,接下来就需要对大屏进行布局和区域划分。在布局时,主要指标应占据视觉中心,且面积足够大,而次要指标通常使用各类图表来展示,位于边侧;
举个栗子,在下图“互联网大屏驾驶舱”中,主要指标就是中间的浏览量地图,次要指标就是两侧的访问平台不同年份分布、TOP10地区、用户概况、不同用户类型访问分布等。
STEP4 确定图表类型
在选择图表时,需要注意选择容易理解、易于实现的图表类型,这样可以提高大屏的设计速度,减少用户的理解难度。关于具体的图表类型及使用效果,可以在FineBI帮助文档【制作可视化组件】→【图表应用】→【图表类型 】中自行查看~同时,还要注意图表的数据展示效果,比如颜色、字体、比例等等,以提高大屏的可视化效果和用户的视觉体验。
至此,我们已经完成设计中期的所有步骤,大屏中的基本信息、预想的展现方式都已确定。接下来需要做的就是美化整个版面,使大屏更具美感~
三 设计后期(3步)
STEP1 重点信息突出设计
以一张集团监控指挥大屏设计为例,这一步可以对图表的样式和细节进行调整,特别是调整图表的内部和组成,使每个组件看起来像是一个整体。
图来源:帆软视频课程“【大屏设计】详解大屏模板的设计和美化”
STEP2 大屏配色优化
01 背景色:可视化大屏的背景通常采用深色,以增强视觉效果和数据的对比度。同时在选取大屏背景颜色时,应该考虑到用户的视觉体验。比如,蓝色背景下的大屏能使得数据更加清晰易读。
同时,大屏的背景色最好也具有可定制性,能够根据不同的数据和场景进行调整和优化,以获得最佳的大屏观看效果。
02 图表色:图表的颜色对比尽量增大。如果是单色系,尽量能够通过明度对比就可以很好地区分开各个色彩区间,这样观看者就能直观的感受到数据的变化。
除此之外,还可以合理地运用渐变颜色。使用渐变色可以增加大屏的层次感和动感,但不要拘泥于同一色系间的变化。
STEP3 添加图表动效
让静态图表动起来会使得整个版面看上去更加高级,当与深色背景相结合时 会让大屏显得酷炫又科技感满满!比如像这样:
至此,完整的设计看板流程就结束了!总的来说,一张效果优良的可视化大屏需要具备这几项特点:
清晰明了
可视化大屏应该能够清晰地展示数据和信息,让用户能够快速地理解和发现其中的关联。
可交互性
可视化大屏应该具有可交互性,用户可以通过鼠标、触摸等方式与大屏进行互动,从而更深入地了解数据和信息。
美观大方
可视化大屏应该具有美观大方的外观,让用户的视觉体验能够感受到数据和信息的价值和魅力。
多样性
可视化大屏应该具有多样性,能够根据不同的场景和需求,展示不同的数据和信息。
可定制化
可视化大屏应该具有可定制化的特性,能够根据不同的用户需求和使用可视化大屏场景,进行个性化的设计和开发。