智慧教室控制系統教室控制器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 設計與實現提供了借鑒。