用戶場(chǎng)景分析

西派特這套化學(xué)檢測(cè)系統(tǒng)是給檢測(cè)工人使用，化學(xué)檢測(cè)人員在室外進(jìn)行檢測(cè)，室外的光線比較比較強(qiáng)，這是設(shè)計(jì)界面的條件之一，界面要在強(qiáng)光的情況下使用不會(huì)受到影響。

設(shè)計(jì)原型展示

界面設(shè)計(jì)內(nèi)容：包括主要界面，加載頁(yè)面，界面的提示框。

界面設(shè)計(jì)要求：整體界面簡(jiǎn)潔，有科技感，檢測(cè)結(jié)果清晰明了，戶外使用考慮背景基調(diào)。

主界面區(qū)域展示：1、顯示日期、時(shí)間；2、電池條；3、logo;4、幫助/最小化/關(guān)機(jī)按鈕；5、檢測(cè)指標(biāo)及結(jié)果顯示；6、分析次數(shù)顯示；7、自檢/分析按鈕。

初步設(shè)計(jì)稿展示

左側(cè)是界面是根據(jù)客戶要求和原型圖設(shè)計(jì)的界面。背景顏色采用深藍(lán)色，主界面上是自檢和分析的圖標(biāo)按鈕。顏色為較亮一些的藍(lán)色。點(diǎn)擊自檢按鈕，自檢按鈕會(huì)變亮的藍(lán)色，同時(shí)分析按鈕會(huì)灰掉，表示自檢正在進(jìn)行。下方的環(huán)形進(jìn)度條和數(shù)字也會(huì)同時(shí)發(fā)生變化。

主頁(yè)面設(shè)計(jì)稿一和稿二對(duì)比

右側(cè)分別是設(shè)計(jì)稿一和設(shè)計(jì)稿二的主要界面。根據(jù)客戶要求，經(jīng)過(guò)優(yōu)化，以設(shè)計(jì)稿二為最終設(shè)計(jì)。

設(shè)計(jì)稿一之前的主要按鈕單獨(dú)在一張界面上，經(jīng)給客戶溝通后，決定把主要按鈕放在如有圖設(shè)計(jì)稿二的界面上，這樣不會(huì)顯得空曠。

設(shè)計(jì)稿二的圖標(biāo)在設(shè)計(jì)稿一的基礎(chǔ)上做了簡(jiǎn)化，這樣更為整潔。

設(shè)計(jì)稿一和設(shè)計(jì)稿二在交互層級(jí)也做了優(yōu)化，設(shè)計(jì)稿二的路徑更為簡(jiǎn)短，減少操作成本。

檢測(cè)的類別，在設(shè)計(jì)稿二也相應(yīng)做了改動(dòng)，在未分析結(jié)束前，不顯示結(jié)果。

下方的進(jìn)度條由環(huán)形改為橫條的形狀，這樣更為簡(jiǎn)潔。

設(shè)計(jì)顏色，設(shè)計(jì)稿二在設(shè)計(jì)稿一的基礎(chǔ)上的純度更高，拉大對(duì)比度，確保了在室外強(qiáng)光下正常使用。

自檢頁(yè)面和彈窗設(shè)計(jì)

點(diǎn)擊自檢按鈕圖標(biāo)，開(kāi)始進(jìn)行自檢，自檢圖標(biāo)發(fā)生變化，變?yōu)檩^深一點(diǎn)的藍(lán)色，分析按鈕圖標(biāo)變成暗灰色，突出正在自檢的按鈕，表示正在自檢中。

含水檢測(cè)和醇類判別，分別用水滴和儀器瓶表示的小圖標(biāo)，簡(jiǎn)單，富有含義，容易識(shí)別。

下方的進(jìn)度條也同時(shí)發(fā)生變化，處在加載中，可以清晰看到自檢的進(jìn)度情況。

當(dāng)自檢完成，界面會(huì)自動(dòng)彈出，自檢完成的窗口提示，點(diǎn)擊確定按鈕，表示自檢已經(jīng)完成。

當(dāng)自檢過(guò)程中出現(xiàn)問(wèn)題的時(shí)候，界面會(huì)彈出自檢異常的窗口。

分析頁(yè)面和分析結(jié)果

點(diǎn)擊分析按鈕圖標(biāo)，開(kāi)始進(jìn)行分析，分析圖標(biāo)發(fā)生變化，分析按鈕圖標(biāo)變成暗灰色，由分析變成暫停圖標(biāo)，當(dāng)有緊急事物可以點(diǎn)擊暫停圖標(biāo)，再次點(diǎn)擊分析繼續(xù)進(jìn)行。

下方的進(jìn)度條隨著分析的情況也也同時(shí)發(fā)生變化，當(dāng)處在暫停狀態(tài)中，進(jìn)度條也會(huì)暫停，分析進(jìn)行，進(jìn)度條也同時(shí)發(fā)生變化，可以清晰看到分析的進(jìn)度情況。

當(dāng)分析完成，界面中含水檢測(cè)和醇類判別會(huì)得出相應(yīng)的結(jié)果和數(shù)據(jù)。

當(dāng)分析過(guò)程中出現(xiàn)問(wèn)題的時(shí)候，界面會(huì)彈出操作異常的窗口。

其他界面展示

展示界面包括其余的界面，包括加載界面，界面的彈窗。