移動(dòng)APP-藍(lán)牙體溫計(jì)UI設(shè)計(jì)使用說明

1、文檔類型：技術(shù)文檔文檔編號(hào)：RZ201304.2.2.總頁數(shù)版本文件控制部門寧波研究院電子科技大學(xué)寧波研究院UI設(shè)計(jì)說明書項(xiàng)目名稱：藍(lán)牙體溫計(jì)項(xiàng)目編號(hào)：擬制：（擬制人簽字）年月日審核：（審核人簽字）年月日批準(zhǔn):（批準(zhǔn)人簽字）年月日電子科技大學(xué)寧波研究院年 月 日目錄目錄21文檔介紹31.1文檔目的3.1.2文檔范圍4.1.3讀者對(duì)象4.1.4 UI 概述4.2需求階段42.1產(chǎn)品市場(chǎng)定位 4.2.2產(chǎn)品定義5.2.4運(yùn)營(yíng)方式5.2.5同類競(jìng)爭(zhēng)產(chǎn)品5.3分析設(shè)計(jì)階段53.1界面的關(guān)系圖和工作流程圖 .5.界面關(guān)系圖5.工作流程圖7.3.2啟動(dòng)界面113.3引導(dǎo)界面113.4主界面113.5設(shè)置界

2、面123.6美學(xué)設(shè)計(jì)143.7界面資源設(shè)計(jì) .144調(diào)研驗(yàn)證階段14.5方案改進(jìn)階段15.6用戶驗(yàn)證階段15.1文檔介紹1.1文檔目的規(guī)范公司UI設(shè)計(jì)流程，使UI設(shè)計(jì)師參與到產(chǎn)品設(shè)計(jì)整個(gè)環(huán)節(jié)中來， 對(duì)產(chǎn)品 的易用性進(jìn)行全流程負(fù)責(zé)，使UI設(shè)計(jì)的流程規(guī)范化，保證UI設(shè)計(jì)流程的可操作 性。1.2文檔范圍本文檔用于界面設(shè)計(jì)。1.3讀者對(duì)象本文檔的讀者對(duì)象是項(xiàng)目管理人員、售前服務(wù)人員、UI界面設(shè)計(jì)人員、界面評(píng)審人員和配置測(cè)試人員。1.4 UI概述UI,即User In terface （用戶界面）的簡(jiǎn)稱。UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、 操作邏輯、界面美觀的整體設(shè)計(jì)。友好界面的好處：達(dá)成軟件易用性，提高產(chǎn)

3、品競(jìng)爭(zhēng)力減少技術(shù)支持成本，增加投資回報(bào)率提高客戶滿意度，實(shí)現(xiàn)產(chǎn)品社會(huì)價(jià)值提升企業(yè)、品牌形象2需求階段2.1產(chǎn)品市場(chǎng)定位產(chǎn)品主要定位于家庭使用，可作為身體健康測(cè)試。2.2產(chǎn)品定義藍(lán)牙體溫計(jì)是一種輕便，易攜的體溫測(cè)量計(jì)， 將體溫計(jì)測(cè)量的數(shù)據(jù)，上傳到手機(jī)，可以查看歷史數(shù)據(jù)的趨勢(shì)，并在數(shù)據(jù)異常時(shí)，給出一些溫馨提示。2.3客戶群體一般家庭2.4運(yùn)營(yíng)方式2.5同類競(jìng)爭(zhēng)產(chǎn)品當(dāng)前在售產(chǎn)品，要么是只支持藍(lán)牙3.0，或者支持4.0的產(chǎn)品價(jià)格昂貴，因此本產(chǎn)品具有很強(qiáng)的競(jìng)爭(zhēng)力。3分析設(shè)計(jì)階段通過分析上面的需求，進(jìn)入設(shè)計(jì)階段。設(shè)計(jì)原則參見：軟件界面設(shè)計(jì)原則文檔，我們?cè)O(shè)計(jì)出幾套不同風(fēng)格的界面用于被選。3.1界面的關(guān)系圖和

4、工作流程圖界面關(guān)系圖界面關(guān)系如圖所示，主界面分3個(gè)區(qū)域，屏幕上方顯示藍(lán)牙連接，設(shè)備電池電量，模式切換，設(shè)置；中間區(qū)域顯示測(cè)量數(shù)據(jù)信息，橫軸為時(shí)間，縱軸為溫度值；屏幕下方區(qū)域顯示一些輔助信息，提示測(cè)量值是否屬于標(biāo)準(zhǔn)范圍或偏高，偏低等，以及顯示最近的一次測(cè)量時(shí)間。圖1界面關(guān)系圖工作流程圖圖2工作流程圖圖3藍(lán)牙連接流程圖固件更新:YN軟件更新:YN圖5軟件更新圖圖4固件更新圖3.2啟動(dòng)界面藍(lán)牙體溫計(jì)成電泰克版本號(hào)XXX圖6啟動(dòng)界面圖3.3引導(dǎo)界面引導(dǎo)界面在第一次啟動(dòng) APP時(shí)展示給用戶，通過幾幅可滑動(dòng)的圖片展示APP的主要功能和特色?？梢园ㄒ韵聨追鶊D片：1. 記錄體溫，關(guān)注變化2. 關(guān)愛健康，從這

5、開始3.4主界面啟動(dòng)app ,進(jìn)入splash界面，提示是否連接藍(lán)牙，不管連接與否，都直接跳到主界面， 屏幕上方顯示 4個(gè)圖標(biāo)，分別是搜索，電池，列表和設(shè)置，除了電池電量不可操作，其他 圖標(biāo)都有相應(yīng)的操作界面。圖標(biāo)下方是歡迎界面以及默認(rèn)曲線顯示最新接收設(shè)備端的測(cè)量數(shù) 據(jù)，并支持周、月、年的間距切換。藍(lán)牙圖表顯示藍(lán)牙是否開啟；電池圖標(biāo)則顯示設(shè)備端電 池的剩余量，提醒用戶充電；模式切換按鈕則實(shí)現(xiàn)按周，月，年來顯示數(shù)據(jù)走向趨勢(shì)；最后 一個(gè)設(shè)置按鈕實(shí)現(xiàn) 4個(gè)功能，提醒用戶輸入自身基本信息，為測(cè)量值提供評(píng)判標(biāo)準(zhǔn)，另外 還可以檢查設(shè)備端的軟件固件升級(jí)以及更新，支持版本信息的查看，以及是否清除歷史數(shù)據(jù)。圖7

6、主界面圖3.5設(shè)置界面界面有有4個(gè)選項(xiàng)，軟、固件的版本信息查看與更新，數(shù)據(jù)清空。選擇清空按鈕，則把歷史存儲(chǔ)I的數(shù)據(jù)刪除；選擇版本信息，即查看藍(lán)牙體溫計(jì)的軟件，固件的版本。設(shè)置固件更新軟件更新自動(dòng)檢查更新檢查更新是否下載更新？f取消確定i如果更新部分，分為軟件更新和藍(lán)牙體溫計(jì)固件更新。點(diǎn)擊軟件更新進(jìn)入右圖界面， 第一個(gè)選項(xiàng)用于設(shè)置是否開啟自動(dòng)更新，默認(rèn)開啟；第二個(gè)選項(xiàng)用于手動(dòng)檢查更新。手動(dòng)檢查更新且沒有發(fā)現(xiàn)更新，使用消息提示框提示當(dāng)前版本為最新版；如果發(fā)現(xiàn)更新，彈出對(duì)話框，提示用戶是否下載，用戶點(diǎn)擊確定后臺(tái)開始下載，下載完畢啟動(dòng)安裝。3.6美學(xué)設(shè)計(jì)提示：（1）闡述界面的布局及理由（2）闡述界面的色彩及理由3.7界面資源設(shè)計(jì)235.1圖標(biāo)資源235.2圖像資源界面組件4調(diào)研驗(yàn)證階段、-1 P » 萬案一萬案一方案二用戶第一印象用戶綜合印象用戶單獨(dú)評(píng)價(jià)最喜歡的方案次喜歡的方案色彩（總分10分）文字（總分10分）圖形（總分10分）5方案改進(jìn)階段經(jīng)過用戶調(diào)研，我們得到目標(biāo)用戶最喜歡的方案，且了解到用戶為什么喜歡