制造行业监控指挥大屏实施千万步,需求调研**步
发表时间:2023-09-13 10:03:01
文章来源:炫佑科技
浏览次数:183
菏泽炫佑科技
制造行业监控指挥大屏实施千万步,需求调研**步
我们也在开发大屏幕。 为什么他的产品那么高端炫酷,而我的却那么难以形容?
是因为我天生没有审美天赋吗?
其实,只要掌握大屏模板开发的设计技巧,普通开发者也能打造出设计师级别的可视化效果。 师兄专门整合了这种大屏视觉设计方法,采用真实案例,并附赠大量官方免费资料和教程。 绝对值得收藏!
要求研究
大屏的实施有千万个步骤制造行业监控指挥大屏实施千万步,需求调研**步,需求调研是**步。 我们以制造业的监控大屏和指挥大屏为例,详细讲解一下需求研究如何运用在大屏设计中:
1、根据业务场景提取关键数据
比较正式的大屏实施项目一般都有需求文档。 获取需求文档后,需要与需求方沟通大屏业务场景,明确需要关注的内容或者大屏要呈现的“故事”,从而提炼关键数据。 指数。
某制造业监控指挥中心大屏位于大型指挥控制中心。 需要监控的数据一般包括五个模块:销售运营、生产运营、物流管理、客户质量、园区安全能耗。 这些“业务关键数据”。
2. 开发主要、辅助和辅助数据
从需求文档中获取关键数据或者与业务沟通后,确定提取的数据指标的优先级:
上图中,主要信息用红旗标记,次要信息用黄旗标记,辅助信息用绿旗标记。 大屏视觉设计也遵循这一优先原则。
3.确定视觉元素
大屏视觉元素可分为三类:指标卡、表格、图表。 在选择数据展示所使用的视觉元素时,可以列出1-3种适用的类型,以便在视觉设计时根据需要进行调整。
如下图所示,对于“目标达成情况”等数据,可能适合使用指标卡、仪表板和明细表格。 在大屏的设计和制作过程中可以尝试多种选择。
如果你对图表类型的选择不是很有心思,那就参考这些经过师兄们尝试过的类型吧!
4、确定大屏的分辨率
大屏幕的设计应根据*终显示的分辨率要求而定。 分辨率受大屏模板分辨率、显卡输出分辨率以及大屏硬件支持的分辨率影响。
后两者需要高性能显卡和大屏硬件厂商来保证,大屏开发者必须在了解这两种分辨率的基础上保证自己创建的模板的分辨率是正确的。
“正确的”模板分辨率包括两个要素:长宽比和高分辨率。 一般来说,大屏幕有两种长宽比:16:9和32:9。 使用错误的比例会导致*终的屏幕投影效果失真或扭曲。 不填满屏幕。
根据显示设备的分辨率不同,32:9一般可以制作3840*1080的模板,而16:9模板可以制作960*540的普通屏、1280*960的高清屏、1920*1080的超清屏- 清晰的屏幕。
视觉设计
视觉设计需要关注四个方面:布局、配色、字体和组件样式。 下面我们将根据上述“制造集团监控指挥中心”的场景需求,对大屏设计进行详细讲解。
1. 平面布置图
1)主要模块布局
根据数据需求阶段规划时细化的数据指标,一个大屏一般分为3-5个大模块。 本例中,模板的主要模块布局根据业务关键数据分为5个部分:
2)拆分子模块
将每个大模块拆分为更多的小模块。 每个小模块都有一个或多个组件来容纳需求调查中确定的主要、次要和辅助信息:
3)填写数据可视化元素
根据需求规划中确定的视觉元素依次填充子模块,使大屏的整体布局更加具体:
2. 配色方案
1)主色
大屏幕的整体色彩搭配决定了大屏幕场景的基调,通常是画布的背景和组件的背景。 所呈现的具体材料可能与主要配色方案不完全匹配,但它们应该在视觉上保持一致。
针对“制造集团监控指挥中心”的大屏场景,我们选择大屏*常见的蓝色调作为主色调规划:
2)报警颜色
一些需要特别突出的指标,或者指标值达到警戒值时的颜色,一般都比较亮,与大屏的主色有明显的反差。 如果结合图表flash动画、警示线等,效果会更好。
例如案例中的报警颜色突出显示“异常情况”:
3)图表系列颜色
不同显示逻辑的图表可能需要不同的颜色,所以一般至少准备两种图表系列颜色:
常用于多系列柱形图、条形图、饼图等,强调数据系列之间的差异。
案例中的两种对比色直观地对比了总目录和实际目标的情况:
常用于单系列柱形图、条形图、面积图等。在大屏幕上,整体只有“一种颜色”,但渐变效果不仅表达了数据之间的连续性,而且有一种炫酷的感觉。视觉效果。 。 “连续”效果可以通过一系列逐渐的颜色或渐变来实现。
本例中,用渐变色来表示“顾客评论”等一系列相关数据,或者用渐变色来营造科技感,让普通的仪表板变得“不凡”:
还可以结合公司品牌标志的颜色,直接使用该公司或设计一套与其相似的衍生颜色,这也是一种方便的方法。
3. 字体方案
字体方案包括字体类型、字体大小、字体粗细和配色四个方面:
4. 组件解决方案
组件方案是指大屏使用什么类型的组件素材软件制作,主要考虑标题、组件标题、大屏背景图、组件背景框和指示卡样式。 这些视觉素材对大屏幕的整体效果影响很大,需要合理规划。
快速创建大屏模板
视觉设计完成后,如何在设计器中顺利实现?
如果你有一定的FR开发经验,那就赶紧试试我们的“模板复用+组件复用”技巧吧!