本文導讀

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

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

定義功能并搜集制作相關UI素材（準備工作）

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

圖1 可視化對講界面

基于AWTK進行UI設計

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

UI固件升級

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

圖2 門禁UI界面顯示

至此，串口屏小區門禁UI設計的整個過程就結束了，后續小編將把本UI的設計代碼推送到：

https://gitee.com/zlgmcuopen/hmi_zmp110x_application ，歡迎大家關注。

審核編輯 ：李倩