用戶場景分析

西派特這套化學檢測系統是給檢測工人使用，化學檢測人員在室外進行檢測，室外的光線比較比較強，這是設計界面的條件之一，界面要在強光的情況下使用不會受到影響。

設計原型展示

界面設計內容：包括主要界面，加載頁面，界面的提示框。

界面設計要求：整體界面簡潔，有科技感，檢測結果清晰明了，戶外使用考慮背景基調。

主界面區域展示：1、顯示日期、時間；2、電池條；3、logo;4、幫助/最小化/關機按鈕；5、檢測指標及結果顯示；6、分析次數顯示；7、自檢/分析按鈕。

初步設計稿展示

左側是界面是根據客戶要求和原型圖設計的界面。背景顏色采用深藍色，主界面上是自檢和分析的圖標按鈕。顏色為較亮一些的藍色。點擊自檢按鈕，自檢按鈕會變亮的藍色，同時分析按鈕會灰掉，表示自檢正在進行。下方的環形進度條和數字也會同時發生變化。

主頁面設計稿一和稿二對比

右側分別是設計稿一和設計稿二的主要界面。根據客戶要求，經過優化，以設計稿二為最終設計。

設計稿一之前的主要按鈕單獨在一張界面上，經給客戶溝通后，決定把主要按鈕放在如有圖設計稿二的界面上，這樣不會顯得空曠。

設計稿二的圖標在設計稿一的基礎上做了簡化，這樣更為整潔。

設計稿一和設計稿二在交互層級也做了優化，設計稿二的路徑更為簡短，減少操作成本。

檢測的類別，在設計稿二也相應做了改動，在未分析結束前，不顯示結果。

下方的進度條由環形改為橫條的形狀，這樣更為簡潔。

設計顏色，設計稿二在設計稿一的基礎上的純度更高，拉大對比度，確保了在室外強光下正常使用。

自檢頁面和彈窗設計

點擊自檢按鈕圖標，開始進行自檢，自檢圖標發生變化，變為較深一點的藍色，分析按鈕圖標變成暗灰色，突出正在自檢的按鈕，表示正在自檢中。

含水檢測和醇類判別，分別用水滴和儀器瓶表示的小圖標，簡單，富有含義，容易識別。

下方的進度條也同時發生變化，處在加載中，可以清晰看到自檢的進度情況。

當自檢完成，界面會自動彈出，自檢完成的窗口提示，點擊確定按鈕，表示自檢已經完成。

當自檢過程中出現問題的時候，界面會彈出自檢異常的窗口。

分析頁面和分析結果

點擊分析按鈕圖標，開始進行分析，分析圖標發生變化，分析按鈕圖標變成暗灰色，由分析變成暫停圖標，當有緊急事物可以點擊暫停圖標，再次點擊分析繼續進行。

下方的進度條隨著分析的情況也也同時發生變化，當處在暫停狀態中，進度條也會暫停，分析進行，進度條也同時發生變化，可以清晰看到分析的進度情況。

當分析完成，界面中含水檢測和醇類判別會得出相應的結果和數據。

當分析過程中出現問題的時候，界面會彈出操作異常的窗口。

其他界面展示

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