本文導讀

上期小編分享了拿到ZMP110x 創(chuàng)新串口屏評估套件的感受，本期說說小編如何在2天內(nèi)，從定義新功能開始，做出一個具備交互功能的UI。

上周小編拿到ZMP1106創(chuàng)新串口屏評估套件后，前后花了兩天時間，做了一個簡單的小區(qū)門禁UI的演示demo，完事后將UI設(shè)計過程整理成文，分享給大家。 小編將UI設(shè)計分為三步，第一步：定義功能并搜集制作UI素材（主要時間花在這部分，費時一天半）；第二步：基于AWTK進行UI設(shè)計（只花了2個小時）；第三步：進行UI升級驗證。下面將詳細介紹各個步驟。

定義功能并搜集制作相關(guān)UI素材（準備工作）

老大讓我自己做個UI演示demo練練手，但是沒說具體要做什么，需要自己去想。如圖所示，UI界面的設(shè)計靈感來自網(wǎng)上某小區(qū)的可視化對講界面，控件主要包含通話、監(jiān)控、物業(yè)公告、電梯控制，以及靜態(tài)顯示日期、時間和天氣等，并實現(xiàn)撥通和掛斷電話的功能。小編從網(wǎng)上收集并繪制了相關(guān)UI素材，做好了UI設(shè)計前的素材準備工作。

圖1 可視化對講界面

基于AWTK進行UI設(shè)計

素材設(shè)計完成后，小編參照應(yīng)用開發(fā)手冊，使用AWTK Designer上位機軟件來繪制UI界面。從新建UI工程開始到設(shè)計完成。

UI固件升級

在UI設(shè)計完成后，將整個UI項目拷貝到eclipse工程的”awtk_demo”文件夾中，并配置工程；編譯后生成的bin文件即為UI固件，更名為“awtk.bin”，并將其拷貝到SD卡或U盤；插入到串口屏主控板，并短接R與G，按下復位按鍵即可完成串口屏UI固件升級。

圖2 門禁UI界面顯示

至此，串口屏小區(qū)門禁UI設(shè)計的整個過程就結(jié)束了，后續(xù)小編將把本UI的設(shè)計代碼推送到：

https://gitee.com/zlgmcuopen/hmi_zmp110x_application ，歡迎大家關(guān)注。

審核編輯 ：李倩