文/譚衛(wèi) 黃日勝

1 設(shè)計(jì)項(xiàng)目背景

現(xiàn)行學(xué)校的教室使用監(jiān)控與安全節(jié)能管理存在很多缺陷，例如：教室使用實(shí)時(shí)情況、學(xué)生到課情況、教室環(huán)境情況、教室設(shè)備運(yùn)行情況、教室設(shè)備管理情況、教室的安全管理等基本都沒(méi)有實(shí)施遠(yuǎn)程或?qū)崟r(shí)管理功能?；谖锫?lián)網(wǎng)技術(shù)體系的智慧教室集環(huán)境監(jiān)控、學(xué)生到課、電子課表、設(shè)備運(yùn)行、通知管理、視頻監(jiān)控及遠(yuǎn)程控制等于一體的智能化智慧教室系統(tǒng)正悄然出現(xiàn)，將智能家居快速引入到學(xué)校的教室教學(xué)環(huán)境當(dāng)中來(lái)。

智慧教室控制系統(tǒng)基于此背景建設(shè)一個(gè)基于物聯(lián)網(wǎng)技術(shù)的集環(huán)境智慧調(diào)節(jié)、視頻監(jiān)控、遠(yuǎn)程控制、智能門(mén)禁、智慧考勤、資產(chǎn)智能管理及智慧教學(xué)于一體的現(xiàn)代化智慧教室管理平臺(tái)，采用433MHz 無(wú)線通信的方法進(jìn)行教室設(shè)備的管控和環(huán)境監(jiān)測(cè)。其中環(huán)境智慧調(diào)節(jié)系統(tǒng)是通過(guò)布控在課室的各類(lèi)傳感器采集課室的溫濕度、光照等數(shù)據(jù)進(jìn)行課室環(huán)境智能控制，達(dá)到節(jié)能減排的作用，同時(shí)，提供教室狀態(tài)實(shí)時(shí)顯示系統(tǒng)，方便查看教室當(dāng)前狀態(tài)。本設(shè)計(jì)的外觀就是用于對(duì)教室的各類(lèi)設(shè)備狀態(tài)進(jìn)行實(shí)時(shí)圖形與文字反饋，并通過(guò)界面圖標(biāo)進(jìn)行設(shè)備操控，為用戶提供設(shè)備接口。

2 設(shè)計(jì)原則與需求分析

圖1：界面原型圖

智慧教室控制系統(tǒng)設(shè)計(jì)要求為注重整體規(guī)劃、統(tǒng)一設(shè)計(jì)，按照實(shí)用性、可靠性、安全性、可擴(kuò)展性、經(jīng)濟(jì)性和標(biāo)準(zhǔn)化，教室控制器終端采用的是SMT32 為核心管理控制器，即上電即使用，無(wú)需長(zhǎng)時(shí)間等待系統(tǒng)啟動(dòng)，方便快捷，功耗低，實(shí)時(shí)性好。

UI 設(shè)計(jì)是User Interface (用戶界面) 的簡(jiǎn)稱，UI 設(shè)計(jì)是指針對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。一個(gè)杰出的UI 設(shè)計(jì)不僅可以讓?xiě)?yīng)用顯得獨(dú)特、有檔次，還能讓?xiě)?yīng)用的操作變得更加方便，能夠完美地展示應(yīng)用的定位和特色。用戶體驗(yàn)從狹義上代表的是用戶對(duì)產(chǎn)品功能和外觀上的感官體驗(yàn)。用戶體驗(yàn)其實(shí)也就是用戶在與產(chǎn)品互動(dòng)交流過(guò)程中的感受，是用以反饋在互動(dòng)過(guò)程中所帶來(lái)的愉悅感和舒適感。

為了匹配產(chǎn)品設(shè)計(jì)特點(diǎn)，智慧教室教室控制器UI 界面應(yīng)以標(biāo)準(zhǔn)化、實(shí)用性、實(shí)時(shí)性為設(shè)計(jì)原則。智慧教室實(shí)施后，教室內(nèi)所有設(shè)備（包括：計(jì)算機(jī)、投影機(jī)、窗簾、空調(diào)、照明燈等）均可實(shí)現(xiàn)本地一鍵式場(chǎng)景控制和遠(yuǎn)程控制功能。在本地控制時(shí)，所有的控制功能集中在控制器上，便于進(jìn)行各種調(diào)節(jié)和控制，并要求有一鍵式“上課”及“下課”按鈕，方便非專(zhuān)業(yè)教師使用。在設(shè)計(jì)初期，通過(guò)了解系統(tǒng)需求與用戶需求，掌握控制器終端的技術(shù)參數(shù)，熟悉教室設(shè)備環(huán)境，為設(shè)計(jì)界面內(nèi)容提供參考原型。

3 分類(lèi)設(shè)計(jì)分析

3.1 原型設(shè)計(jì)

圖2：國(guó)標(biāo)圖層組成

教室控制器終端尺寸根據(jù)教室控制器的功能需求，根據(jù)實(shí)際工作中的操作流程及良好用戶體驗(yàn)要求，綜合用戶與系統(tǒng)需求開(kāi)展原型設(shè)計(jì)，將界面分為四大區(qū)域，界面原型圖如圖1所示。

（1）主導(dǎo)航區(qū)：查看所有設(shè)備狀態(tài)鏈接，系統(tǒng)設(shè)置鏈接，系統(tǒng)的介紹與展示，回到首頁(yè)鏈接；

（2）設(shè)備展示控制區(qū)：顯示各設(shè)備的狀態(tài)、羅列設(shè)備控制按鈕；

（3）情景模式切換區(qū)：一鍵式控制功能按鈕，方便非專(zhuān)業(yè)教師使用；

（4）設(shè)備分類(lèi)控制區(qū)：分類(lèi)控制不同類(lèi)型設(shè)備，點(diǎn)擊分類(lèi)切換至設(shè)備分類(lèi)控制界面。

3.2 外觀配色設(shè)計(jì)

圖3：教室控制器主界面

圖4：空調(diào)控制界面

人類(lèi)在捕捉、認(rèn)識(shí)色彩時(shí)，首先識(shí)別的是色相，其次是明度和純度。設(shè)計(jì)作品中色彩的印象非常重要，可以毫不夸張地講，設(shè)計(jì)作品的印象在很大程度上是由使用的色彩和配色效果決定的。由于智慧教室的科技性特點(diǎn)突出，界面主色彩采用藍(lán)色，顏色值設(shè)定為# 104da3，明度較高，色彩鮮亮，所有按鈕圖標(biāo)均采用白色線性圖標(biāo)，搭配淺藍(lán)色（#30a4da）圓形，整體色彩給人以沉穩(wěn)、科技、效率的感受。

3.3 元素應(yīng)用設(shè)計(jì)

與文字相比，圖形符號(hào)更直觀、易懂，可以實(shí)現(xiàn)跨越語(yǔ)言和文化障礙傳遞信息，因此，在交互界面的發(fā)展過(guò)程中，圖形用戶界面(GUI，Graphical User Interface)逐漸取代命令形用戶界面而成為主流的交互界面形式，圖形符號(hào)在圖形用戶界面中使用時(shí)被稱為“圖標(biāo)”，圖標(biāo)是圖形用戶界面的重要組成部分，承擔(dān)了圖形用戶界面絕大多數(shù)的信息流量。智慧教室控制系統(tǒng)教室控制器以圖標(biāo)設(shè)計(jì)為重點(diǎn)，用戶對(duì)圖標(biāo)的認(rèn)知和交互是圖標(biāo)操作中很重要的設(shè)計(jì)要點(diǎn)。

Iconfont 阿里巴巴矢量圖標(biāo)庫(kù)是國(guó)內(nèi)功能很強(qiáng)大且圖標(biāo)內(nèi)容很豐富的矢量圖標(biāo)庫(kù)，提供矢量圖標(biāo)下載、在線存儲(chǔ)、格式轉(zhuǎn)換等功能。為達(dá)到標(biāo)準(zhǔn)化的設(shè)計(jì)理念，圖標(biāo)均采用iconfont 標(biāo)準(zhǔn)化的圖標(biāo)庫(kù)元素，在按鈕頂部增加橢圓形的漸變疊加，形成光照效果，底部淺藍(lán)色圓形或圓角矩形形狀增加顏色疊加和投影樣式，使按鈕具有立體感。

主界面根據(jù)控制功能的不同進(jìn)行功能分區(qū)，模塊分區(qū)合理，在整體界面的視覺(jué)上保證直觀清晰，簡(jiǎn)明有序；界面中的修飾圖形采用原子結(jié)構(gòu)為原型，運(yùn)用六邊形拼接元素為背景裝飾，體現(xiàn)產(chǎn)品的嚴(yán)謹(jǐn)性及科技感，以漸變填充，使整體界面視線開(kāi)闊，無(wú)壓抑感。

4 設(shè)計(jì)實(shí)現(xiàn)

4.1 圖標(biāo)實(shí)現(xiàn)

圖標(biāo)層：導(dǎo)入iconfont 標(biāo)準(zhǔn)化圖標(biāo)原型，統(tǒng)一設(shè)置大小，并填充白色；

光照層：橢圓形形狀，規(guī)格為43px*32px，并添加漸變疊加圖層樣式，白色透明漸變參數(shù)為100%至20%，形成光照效果，呈現(xiàn)水晶質(zhì)感；

底部圖層：圓形或圓角矩形形狀，規(guī)格為50px*50px，添加顏色疊加（# 30a4da）圖層樣式，與背景主色調(diào)融合，在用戶與界面的交互過(guò)程中，當(dāng)手指觸碰按鈕時(shí)，顏色疊加的顏色值變化為橙色# ff8b00，達(dá)到切換提示作用，提升用戶體驗(yàn)，無(wú)效圖標(biāo)則疊加灰色，顏色值為#a4a4a4；同時(shí)外加正片疊底投影圖層樣式，角度參數(shù)為90deg，不透明度為75%，使圖標(biāo)呈現(xiàn)立體感。圖標(biāo)圖層組成如圖2所示。在所有圖標(biāo)附近位置都配有說(shuō)明性文字，通過(guò)與文本進(jìn)行組合的方式表達(dá)更準(zhǔn)確的標(biāo)識(shí)信息，但仍然以圖標(biāo)為主要視覺(jué)點(diǎn)。

4.2 主界面實(shí)現(xiàn)

主界面依據(jù)設(shè)計(jì)原則及分類(lèi)設(shè)計(jì)分析，參考原型設(shè)計(jì)圖實(shí)現(xiàn)主界面背景及分區(qū)，各元素之間間隔勻稱，輔以半透明圓角矩形，使主體更突出，功能分區(qū)更鮮明。開(kāi)機(jī)后主界面如圖3所示，頂部主導(dǎo)航區(qū)有設(shè)備、設(shè)置、主頁(yè)、關(guān)于四個(gè)功能按鈕。

（1）點(diǎn)擊設(shè)備按鈕查看所有設(shè)備的在線狀態(tài)及數(shù)量；

（2）點(diǎn)擊設(shè)置按鈕可進(jìn)行密碼修改、搜索節(jié)點(diǎn)、自動(dòng)模式切換、無(wú)線通道等；

（3）點(diǎn)擊主頁(yè)按鈕可以回到主頁(yè)界面；

（4）點(diǎn)擊關(guān)于按鈕可查看系統(tǒng)的簡(jiǎn)介。

在中部左側(cè)區(qū)域顯示日期時(shí)間及環(huán)境數(shù)據(jù)，右側(cè)為情景切換區(qū)，可一鍵切換上下課模式，底部為各類(lèi)設(shè)備分類(lèi)控制按鈕。其中當(dāng)點(diǎn)擊空調(diào)時(shí)，會(huì)在設(shè)備展示控制區(qū)顯示出空調(diào)的當(dāng)前狀態(tài)，并能運(yùn)用功能按鈕調(diào)節(jié)空調(diào)的各種運(yùn)行狀態(tài)，如圖4所示。

其余界面風(fēng)格統(tǒng)一，不同的功能按鈕對(duì)應(yīng)不同的功能控制區(qū)，如當(dāng)點(diǎn)擊照明按鈕時(shí)，會(huì)羅列出當(dāng)前課室所有照明設(shè)備并且可對(duì)每一照明設(shè)備進(jìn)行控制；當(dāng)點(diǎn)擊窗簾按鈕時(shí)，會(huì)羅列出當(dāng)前課室所有窗簾設(shè)備并且可對(duì)每一窗簾設(shè)備進(jìn)行開(kāi)關(guān)控制；當(dāng)點(diǎn)擊環(huán)境按鈕時(shí)，會(huì)顯示溫濕度，空氣質(zhì)量，光照強(qiáng)度等。

5 結(jié)束語(yǔ)

在互聯(lián)網(wǎng)技術(shù)與新媒體技術(shù)的影響下，人工智能，虛擬現(xiàn)實(shí)等技術(shù)得到快速發(fā)展，各類(lèi)軟硬件操作界面深入到人們工作生活中的各個(gè)部分。人們?cè)谧非筌浖墓δ軓?qiáng)大且可靠的情況下，也開(kāi)始追求界面所帶的舒適視覺(jué)感，因此，UI 設(shè)計(jì)開(kāi)始從只重技術(shù)不重設(shè)計(jì)轉(zhuǎn)變?yōu)槎呒骖?。目前智慧教室控制系統(tǒng)已運(yùn)用在實(shí)際的教學(xué)環(huán)境中，各系統(tǒng)功能運(yùn)行正常，教室控制器界面設(shè)計(jì)也充分考慮行業(yè)應(yīng)用特點(diǎn)，各項(xiàng)功能一目了然，滿足用戶的使用習(xí)慣，易于操作、易于使用。本文從設(shè)計(jì)背景入手，進(jìn)行了設(shè)計(jì)需求分析，然后闡述了各分類(lèi)設(shè)計(jì)，最后對(duì)設(shè)計(jì)界面進(jìn)行了展示與說(shuō)明，為同類(lèi)產(chǎn)品的UI 設(shè)計(jì)與實(shí)現(xiàn)提供了借鑒。