项目3智慧农业大屏结构设计项目3智慧农业大屏结构设计主讲人：邵佳靓

项目描述

项目目标01知识目标了解本项目的研发目标和开发环境。了解可视化大屏布局设计的原则和技巧。完成Windows环境下的前端开发工具的安装和使用。掌握HTML5+CSS3的基础知识。02能力目标能够使用HTML5+CSS3完成基础的大屏结构设计。能够使用前端开发工具完成布局页面的搭建。能够使用开发工具完成代码的编写和简单的修改。03素质目标通过演示项目及相关文档，理解并梳理项目的业务功能结构。勇于探索新技术，为推动国家和社会的发展贡献智慧和力量。强化数据思维，助力国家治理现代化，增强国家意识和政治责任感。

项目3:智慧农业大屏结构设计3.1功能架构设计任务准备任务实施任务拓展

3.1.1功能分解数据可视化大屏分类1展示类展示类主要是整体、公开的数据。目的是对外呈现企业的宏观数据，它对交互性的要求一般不是很高，主要侧重于美观。2监控类监控类可根据不同场景需要监控的内容类型，对硬件数据进行采集跟踪，结合可视化技术实时跟踪，对异常数据及时告警，保证业务的正常运行。3分析类分析类用于展示和分析业务数据，通过交互性操作，挖掘其产生的原因，直观地展示数据的逻辑和价值，通过数据可视化为管理决策提供科学的数据支撑。

3.1.2确定数据维度同一个指标的数据从不同维度分析会有不同结果，因此要通过实际展示需求来确定指标分析维度，随后根据指标分析维度确定图表类型。如果没有找准分析维度或其定义的比较混乱，则会使可视化图表无法理解接收到的指令。联系：数据之间的相关性。分布：指标中的数据主要集中在什么范围内，表现出怎样的规律。比较：数据之间存在何种差异，主要体现在哪些方面。构成：指标中的数据由哪几部分组成，每部分的占比如何。

项目3:智慧农业大屏结构设计3.2大屏布局设计任务准备任务实施任务拓展

3.2.1大屏设计原则易读性和易理解性原则：大屏清晰、简明，让人能够快速理解?分类和组织原则：信息和数据应按照结构和分类进行组织比例和尺寸原则：合理运用比例尺寸，保持元素平衡，让人能更容易注意到重点颜色和字体原则：在大屏的设计中，颜色和字体的使用应当遵循统一、协调、醒目等原则交互和用户体验原则：数据可视化大屏应具备良好的交互性和用户体验故事叙述原则：大屏设计应考虑故事叙述，呈现一个完整的故事，充分展示事态的进展和过程。

3.2.2大屏布局设计布局要点：左中右。常规布局如图所示，中间为主要指标，占据页面的较大面积；左右两侧为次要指标，占据面积较小，较集中，指标数量较多。应用场景：大多数场景均适用该类布局，需要展示多项指标，并突出某些关键指标。优势：可以清晰地展现较多的指标，主次分明。主要数据居中，能够轻松聚焦观众的注意力。1.常规布局

3.2.2大屏布局设计布局要点：左右布局如图所示，重点区域扩大，左侧或右侧放置少量指标，不易展示大量指标。应用场景：常用于地图展示、三维模型展示，可将重点区域扩大。优势：能够展现更多的图像区域，三维模型的立体感更强，再加上数字孪生效果，可带来更真实、更直观的感觉。2.左右布局

3.2.3大屏修饰技巧特点1．色彩色彩的选择上，首先确定主色调，并保持简洁；其次，运用颜色来突出重点，同时注意色彩的情感表达；最后，调整色彩的饱和度和明度，以达到既美观又不失功能性的视觉效果。在大屏展现方面，细节会极大的影响整体效果。通过适当添加效果，提升整体的美观度。各个组件的细分标题可以运用不规则渐变色图片，组件可以通过搭配边框来提升层次感。2．细节动画会使观感大幅上升，突破面积局限性。动画可分为：①数据更新动画②图表交互动画③背景动画使用动画要遵循以下原则：适度使用；动画速度适中；风格与整体设计保持一致。3．动画

项目3:智慧农业大屏结构设计3.3前端开发基础HTML5+CSS3任务准备任务实施任务拓展

3.3.1前端开发工具介绍HBuilder是DCloud推出的一款支持HTML5的Web开发IDE。极速，使用C++架构，不管是启动速度、大文档打开速度、编码提示都能快速响应。01WebStorm是极智能的一款JavaScript开发IDE，是一个用于JavaScript和相关技术的集成开发环境。使日常工作更加自动化，可以帮助用户轻松处理复杂的任务。02VSCode是微软推出的开源代码编辑器，支持Windows、macOS和Linux。轻量级、高性能、跨平台（支持Windows、macOS和Linux）和高度可定制性，深受广大开发者喜爱。03

3.3.2HTML介绍HTML5是一种用于描述网页的语言，它于2014