智能能溫濕度計(jì)小程序開發(fā)方案

智能溫濕度計(jì)是一款廠家生產(chǎn)的室內(nèi)溫濕度環(huán)境監(jiān)測的智能家居產(chǎn)品。

智能能溫濕度計(jì)其具有支持NB-loT網(wǎng)絡(luò)的技術(shù)功能，并同時(shí)提供Web端與微信小程序兩種設(shè)備管理接口，以此方便用戶配置設(shè)備參數(shù)及監(jiān)測設(shè)備數(shù)據(jù)(同步間隔、告警門限、預(yù)報(bào)城市、歷史數(shù)據(jù)記錄等)。

警報(bào)：

警報(bào)列表展示產(chǎn)生警報(bào)的數(shù)據(jù)記錄，可查看警報(bào)詳情

設(shè)備：

設(shè)備設(shè)置、對設(shè)備進(jìn)行具體設(shè)置，包括重命名、設(shè)備開放及設(shè)備定位等

警報(bào)規(guī)則、提供設(shè)備警告規(guī)則設(shè)置入口，可對警告規(guī)則進(jìn)行具體設(shè)置

設(shè)備信息、提供查看設(shè)備詳細(xì)信息入口，包括硬件與模組版本、信號質(zhì)量等信息

成員：

成員列表、對設(shè)備成員進(jìn)行管理、通訊錄管理

數(shù)據(jù)曲線：

歷史記錄、查看設(shè)備溫濕度數(shù)據(jù)的變化的歷史記錄

設(shè)置

一、串碼/掃碼登錄添加設(shè)備

用戶需通過關(guān)聯(lián)具體設(shè)備方可進(jìn)入小程序查看設(shè)備詳情，因此登錄頁采用簡約的封面設(shè)計(jì)，僅此在加深品牌印象的同時(shí)，亦達(dá)到降低用戶繁瑣感的效果。

通過卡片式的展示，配以易于辨識(shí)的ICON來增強(qiáng)用戶添加設(shè)備時(shí)的確定感與擁有感。

二、我設(shè)備頁

設(shè)備頁的天氣信息模塊采用了輕量簡約的圖形插畫來表現(xiàn)實(shí)時(shí)天氣狀況，增加趣味性的同時(shí)亦避免分散用戶過多的注意力。

各設(shè)備使用輕投影卡片展示，在頁面中營造的空間實(shí)感突出了其層級上的優(yōu)先，便于用戶迅速、直觀地了解各設(shè)備的溫濕度狀況。

三、設(shè)備詳情頁

瓷片區(qū)域

瓷片區(qū)的ICON采用了低透明度疊色的風(fēng)格，圓潤的圖形設(shè)計(jì)在增添趣味性的同時(shí)，亦營造活力健康的觀感。統(tǒng)一藍(lán)色漸變的配色使視覺更趨統(tǒng)一

實(shí)時(shí)數(shù)據(jù)

實(shí)時(shí)數(shù)據(jù)使用清晰的模塊將溫度]濕度]解讀提示]進(jìn)行分區(qū)展示，增強(qiáng)了信息的易讀性。

四、歷史記錄頁

歷史記錄頁數(shù)據(jù)展示使用了大留白風(fēng)格，降低無關(guān)信息的干擾。

溫度與濕度數(shù)據(jù)作為信息重點(diǎn)采用了雙色展示，為用戶快速獲知關(guān)鍵信息提供視覺基礎(chǔ)。

五、警報(bào)列表頁

警告列表的展示采用卡片式分割布局，在視覺上更容易聚焦，突出信息層級。

列表內(nèi)容利用簡介的圖標(biāo)來對內(nèi)容類別進(jìn)行區(qū)分，并通過合理運(yùn)用顏色及字號大小等反差來處理內(nèi)容的信噪比，關(guān)系，強(qiáng)化關(guān)鍵信息，弱化次要信息。

六、警報(bào)詳情頁

警告提示

利用恰當(dāng)?shù)妮o助色引起用戶注意提供解決狀況的建議，快捷引導(dǎo)用戶解決安全隱患

可視化

警報(bào)詳情頁利用圖形來量化實(shí)際數(shù)據(jù)，實(shí)現(xiàn)數(shù)據(jù)可視化，提高用戶對設(shè)備所在環(huán)境狀況的掌控效率。

警報(bào)信息

清晰劃分信息層級，使用灰色區(qū)域處理[警報(bào)ID]警報(bào)時(shí)間，等次要信息，使用戶更容易對[溫度][濕度，等關(guān)鍵信息聚焦，降低用戶的理解成本

七、設(shè)備設(shè)置頁

設(shè)備信息

設(shè)備信息設(shè)有ICON標(biāo)識(shí)，幫助用戶快速辨認(rèn)設(shè)備環(huán)境類別，并提供跳轉(zhuǎn)[更多信息頁，入口，同時(shí)用戶還可即時(shí)編輯設(shè)備名稱

選項(xiàng)開關(guān)

選項(xiàng)開關(guān)采用輕投影卡片式分割布局展示，雙色線性ICON在提高用戶進(jìn)行精確操作效率的同時(shí)，亦增添了趣味性。

上報(bào)區(qū)間

上報(bào)區(qū)間模塊為用戶提供數(shù)個(gè)泛用的上報(bào)信息的時(shí)間段，幫助用戶快速定位區(qū)間，降低用戶的操作成本。

八、警告規(guī)則頁

調(diào)節(jié)組件

通過直觀的可視化控件來調(diào)節(jié)溫度數(shù)值，降低用戶學(xué)習(xí)成本，強(qiáng)化操作感。

規(guī)則生成

用戶通過操作[高于/低于] 溫/濕度值Jr溫濕度開關(guān)，三項(xiàng)控件后，實(shí)時(shí)生成文字化警告規(guī)則。

九、成員管理

成員列表頁采用卡片式布局把頁面分為操作區(qū)與信息區(qū)，清晰直觀的布局有助于提升用戶的操作效率。操作區(qū)可直接對成員進(jìn)行增加/刪除的管理操作，點(diǎn)擊刪除按鈕可直觀地對頭像操作進(jìn)行刪除，而增加和轉(zhuǎn)讓權(quán)限的操作則需通過跳轉(zhuǎn)通訊列表頁來完成。