智慧教室控制系统教室控制器UI设计与实现

文/谭卫 黄日胜

1 设计项目背景

现行学校的教室使用监控与安全节能管理存在很多缺陷，例如：教室使用实时情况、学生到课情况、教室环境情况、教室设备运行情况、教室设备管理情况、教室的安全管理等基本都没有实施远程或实时管理功能。基于物联网技术体系的智慧教室集环境监控、学生到课、电子课表、设备运行、通知管理、视频监控及远程控制等于一体的智能化智慧教室系统正悄然出现，将智能家居快速引入到学校的教室教学环境当中来。

智慧教室控制系统基于此背景建设一个基于物联网技术的集环境智慧调节、视频监控、远程控制、智能门禁、智慧考勤、资产智能管理及智慧教学于一体的现代化智慧教室管理平台，采用433MHz 无线通信的方法进行教室设备的管控和环境监测。其中环境智慧调节系统是通过布控在课室的各类传感器采集课室的温湿度、光照等数据进行课室环境智能控制，达到节能减排的作用，同时，提供教室状态实时显示系统，方便查看教室当前状态。本设计的外观就是用于对教室的各类设备状态进行实时图形与文字反馈，并通过界面图标进行设备操控，为用户提供设备接口。

2 设计原则与需求分析

图1：界面原型图

智慧教室控制系统设计要求为注重整体规划、统一设计，按照实用性、可靠性、安全性、可扩展性、经济性和标准化，教室控制器终端采用的是SMT32 为核心管理控制器，即上电即使用，无需长时间等待系统启动，方便快捷，功耗低，实时性好。

UI 设计是User Interface (用户界面) 的简称，UI 设计是指针对软件的人机交互、操作逻辑、界面美观的整体设计。一个杰出的UI 设计不仅可以让应用显得独特、有档次，还能让应用的操作变得更加方便，能够完美地展示应用的定位和特色。用户体验从狭义上代表的是用户对产品功能和外观上的感官体验。用户体验其实也就是用户在与产品互动交流过程中的感受，是用以反馈在互动过程中所带来的愉悦感和舒适感。

为了匹配产品设计特点，智慧教室教室控制器UI 界面应以标准化、实用性、实时性为设计原则。智慧教室实施后，教室内所有设备（包括：计算机、投影机、窗帘、空调、照明灯等）均可实现本地一键式场景控制和远程控制功能。在本地控制时，所有的控制功能集中在控制器上，便于进行各种调节和控制，并要求有一键式“上课”及“下课”按钮，方便非专业教师使用。在设计初期，通过了解系统需求与用户需求，掌握控制器终端的技术参数，熟悉教室设备环境，为设计界面内容提供参考原型。

3 分类设计分析

3.1 原型设计

图2：国标图层组成

教室控制器终端尺寸根据教室控制器的功能需求，根据实际工作中的操作流程及良好用户体验要求，综合用户与系统需求开展原型设计，将界面分为四大区域，界面原型图如图1所示。

（1）主导航区：查看所有设备状态链接，系统设置链接，系统的介绍与展示，回到首页链接；

（2）设备展示控制区：显示各设备的状态、罗列设备控制按钮；

（3）情景模式切换区：一键式控制功能按钮，方便非专业教师使用；

（4）设备分类控制区：分类控制不同类型设备，点击分类切换至设备分类控制界面。

3.2 外观配色设计

图3：教室控制器主界面

图4：空调控制界面

人类在捕捉、认识色彩时，首先识别的是色相，其次是明度和纯度。设计作品中色彩的印象非常重要，可以毫不夸张地讲，设计作品的印象在很大程度上是由使用的色彩和配色效果决定的。由于智慧教室的科技性特点突出，界面主色彩采用蓝色，颜色值设定为# 104da3，明度较高，色彩鲜亮，所有按钮图标均采用白色线性图标，搭配浅蓝色（#30a4da）圆形，整体色彩给人以沉稳、科技、效率的感受。

3.3 元素应用设计

与文字相比，图形符号更直观、易懂，可以实现跨越语言和文化障碍传递信息，因此，在交互界面的发展过程中，图形用户界面(GUI，Graphical User Interface)逐渐取代命令形用户界面而成为主流的交互界面形式，图形符号在图形用户界面中使用时被称为“图标”，图标是图形用户界面的重要组成部分，承担了图形用户界面绝大多数的信息流量。智慧教室控制系统教室控制器以图标设计为重点，用户对图标的认知和交互是图标操作中很重要的设计要点。

Iconfont 阿里巴巴矢量图标库是国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。为达到标准化的设计理念，图标均采用iconfont 标准化的图标库元素，在按钮顶部增加椭圆形的渐变叠加，形成光照效果，底部浅蓝色圆形或圆角矩形形状增加颜色叠加和投影样式，使按钮具有立体感。

主界面根据控制功能的不同进行功能分区，模块分区合理，在整体界面的视觉上保证直观清晰，简明有序；界面中的修饰图形采用原子结构为原型，运用六边形拼接元素为背景装饰，体现产品的严谨性及科技感，以渐变填充，使整体界面视线开阔，无压抑感。

4 设计实现

4.1 图标实现

图标层：导入iconfont 标准化图标原型，统一设置大小，并填充白色；

光照层：椭圆形形状，规格为43px*32px，并添加渐变叠加图层样式，白色透明渐变参数为100%至20%，形成光照效果，呈现水晶质感；

底部图层：圆形或圆角矩形形状，规格为50px*50px，添加颜色叠加（# 30a4da）图层样式，与背景主色调融合，在用户与界面的交互过程中，当手指触碰按钮时，颜色叠加的颜色值变化为橙色# ff8b00，达到切换提示作用，提升用户体验，无效图标则叠加灰色，颜色值为#a4a4a4；同时外加正片叠底投影图层样式，角度参数为90deg，不透明度为75%，使图标呈现立体感。图标图层组成如图2所示。在所有图标附近位置都配有说明性文字，通过与文本进行组合的方式表达更准确的标识信息，但仍然以图标为主要视觉点。

4.2 主界面实现

主界面依据设计原则及分类设计分析，参考原型设计图实现主界面背景及分区，各元素之间间隔匀称，辅以半透明圆角矩形，使主体更突出，功能分区更鲜明。开机后主界面如图3所示，顶部主导航区有设备、设置、主页、关于四个功能按钮。

（1）点击设备按钮查看所有设备的在线状态及数量；

（2）点击设置按钮可进行密码修改、搜索节点、自动模式切换、无线通道等；

（3）点击主页按钮可以回到主页界面；

（4）点击关于按钮可查看系统的简介。

在中部左侧区域显示日期时间及环境数据，右侧为情景切换区，可一键切换上下课模式，底部为各类设备分类控制按钮。其中当点击空调时，会在设备展示控制区显示出空调的当前状态，并能运用功能按钮调节空调的各种运行状态，如图4所示。

其余界面风格统一，不同的功能按钮对应不同的功能控制区，如当点击照明按钮时，会罗列出当前课室所有照明设备并且可对每一照明设备进行控制；当点击窗帘按钮时，会罗列出当前课室所有窗帘设备并且可对每一窗帘设备进行开关控制；当点击环境按钮时，会显示温湿度，空气质量，光照强度等。

5 结束语

在互联网技术与新媒体技术的影响下，人工智能，虚拟现实等技术得到快速发展，各类软硬件操作界面深入到人们工作生活中的各个部分。人们在追求软件的功能强大且可靠的情况下，也开始追求界面所带的舒适视觉感，因此，UI 设计开始从只重技术不重设计转变为二者兼顾。目前智慧教室控制系统已运用在实际的教学环境中，各系统功能运行正常，教室控制器界面设计也充分考虑行业应用特点，各项功能一目了然，满足用户的使用习惯，易于操作、易于使用。本文从设计背景入手，进行了设计需求分析，然后阐述了各分类设计，最后对设计界面进行了展示与说明，为同类产品的UI 设计与实现提供了借鉴。