西派特（北京）科技有限公司是一個光、機(jī)、電、算四為一體的高科技產(chǎn)品研發(fā)和生產(chǎn)公司。西派特（北京）科技有限公司秉承健康、安全、環(huán)保的理念，專業(yè)從事分析儀器、智能檢測設(shè)備、自動化設(shè)備研發(fā)和生產(chǎn)。致力為食品、藥品、?；?、農(nóng)業(yè)、環(huán)保、公安司法鑒定、電力、紡織品纖維、煙草、石油化工等行業(yè)的客戶提供專業(yè)的整體解決方案。產(chǎn)品覆蓋實驗室、便攜快檢和在線監(jiān)測等領(lǐng) 。
西派特這次的產(chǎn)品，是對化學(xué)含量的一種檢測，主要檢測水含量和各種醇類的化學(xué)含量。這款產(chǎn)品主要解決檢測工人在野外進(jìn)行檢測。藍(lán)藍(lán)設(shè)計通過客戶給的原型圖，重新進(jìn)行交互的梳理和界面的設(shè)計及動效設(shè)計。整個過程雙方溝通積極。合作比較愉快。
西派特化學(xué)檢測界面設(shè)計
主要用途
這套界面是在化學(xué)檢測儀器上使用，用來檢測被檢測物中含水量和各種醇類的化學(xué)含量的檢測系統(tǒng)。
用戶場景分析
西派特這套化學(xué)檢測系統(tǒng)是給檢測工人使用，化學(xué)檢測人員在室外進(jìn)行檢測，室外的光線比較比較強(qiáng)，這是設(shè)計界面的條件之一，界面要在強(qiáng)光的情況下使用不會受到影響。
設(shè)計原型展示
界面設(shè)計內(nèi)容：包括主要界面，加載頁面，界面的提示框。
界面設(shè)計要求：整體界面簡潔，有科技感，檢測結(jié)果清晰明了，戶外使用考慮背景基調(diào)。
主界面區(qū)域展示：1、顯示日期、時間；2、電池條；3、logo;4、幫助/最小化/關(guān)機(jī)按鈕；5、檢測指標(biāo)及結(jié)果顯示；6、分析次數(shù)顯示；7、自檢/分析按鈕。
視覺設(shè)計風(fēng)格探索
1、色彩規(guī)范定義—
背景色采用深藍(lán)色，品牌色采用logo的藍(lán)色。考慮到檢測在室外進(jìn)行，所以對比度增強(qiáng)，更容易識別。采用高的飽和度顏色，藍(lán)色具有科技感，穩(wěn)重理性。文字的顏色與界面背景顏色有強(qiáng)烈的對比，凸顯文字的清晰度，在室外強(qiáng)光下也不會影響使用。
2、設(shè)計風(fēng)格的設(shè)定—
在風(fēng)格設(shè)定上，采用卡片式設(shè)計和圓角設(shè)計，這樣的設(shè)計讓界面更具有親和力，信息更加聚焦。界面的背景采用工業(yè)紋理進(jìn)行設(shè)計，具有工業(yè)感。根據(jù)格式塔原理，利用留白區(qū)分版塊與版塊之間的信息，這樣設(shè)計讓界面更簡潔輕量化。
初步設(shè)計稿展示
左側(cè)是界面是根據(jù)客戶要求和原型圖設(shè)計的界面。背景顏色采用深藍(lán)色，主界面上是自檢和分析的圖標(biāo)按鈕。顏色為較亮一些的藍(lán)色。點(diǎn)擊自檢按鈕，自檢按鈕會變亮的藍(lán)色，同時分析按鈕會灰掉，表示自檢正在進(jìn)行。下方的環(huán)形進(jìn)度條和數(shù)字也會同時發(fā)生變化。
主頁面設(shè)計稿一和稿二對比
右側(cè)分別是設(shè)計稿一和設(shè)計稿二的主要界面。根據(jù)客戶要求，經(jīng)過優(yōu)化，以設(shè)計稿二為最終設(shè)計。
設(shè)計稿一之前的主要按鈕單獨(dú)在一張界面上，經(jīng)給客戶溝通后，決定把主要按鈕放在如有圖設(shè)計稿二的界面上，這樣不會顯得空曠。
設(shè)計稿二的圖標(biāo)在設(shè)計稿一的基礎(chǔ)上做了簡化，這樣更為整潔。
設(shè)計稿一和設(shè)計稿二在交互層級也做了優(yōu)化，設(shè)計稿二的路徑更為簡短，減少操作成本。
檢測的類別，在設(shè)計稿二也相應(yīng)做了改動，在未分析結(jié)束前，不顯示結(jié)果。
下方的進(jìn)度條由環(huán)形改為橫條的形狀，這樣更為簡潔。
設(shè)計顏色，設(shè)計稿二在設(shè)計稿一的基礎(chǔ)上的純度更高，拉大對比度，確保了在室外強(qiáng)光下正常使用。
自檢頁面和彈窗設(shè)計
點(diǎn)擊自檢按鈕圖標(biāo)，開始進(jìn)行自檢，自檢圖標(biāo)發(fā)生變化，變?yōu)檩^深一點(diǎn)的藍(lán)色，分析按鈕圖標(biāo)變成暗灰色，突出正在自檢的按鈕，表示正在自檢中。
含水檢測和醇類判別，分別用水滴和儀器瓶表示的小圖標(biāo)，簡單，富有含義，容易識別。
下方的進(jìn)度條也同時發(fā)生變化，處在加載中，可以清晰看到自檢的進(jìn)度情況。
當(dāng)自檢完成，界面會自動彈出，自檢完成的窗口提示，點(diǎn)擊確定按鈕，表示自檢已經(jīng)完成。
當(dāng)自檢過程中出現(xiàn)問題的時候，界面會彈出自檢異常的窗口。
分析頁面和分析結(jié)果
點(diǎn)擊分析按鈕圖標(biāo)，開始進(jìn)行分析，分析圖標(biāo)發(fā)生變化，分析按鈕圖標(biāo)變成暗灰色，由分析變成暫停圖標(biāo)，當(dāng)有緊急事物可以點(diǎn)擊暫停圖標(biāo)，再次點(diǎn)擊分析繼續(xù)進(jìn)行。
下方的進(jìn)度條隨著分析的情況也也同時發(fā)生變化，當(dāng)處在暫停狀態(tài)中，進(jìn)度條也會暫停，分析進(jìn)行，進(jìn)度條也同時發(fā)生變化，可以清晰看到分析的進(jìn)度情況。
當(dāng)分析完成，界面中含水檢測和醇類判別會得出相應(yīng)的結(jié)果和數(shù)據(jù)。
當(dāng)分析過程中出現(xiàn)問題的時候，界面會彈出操作異常的窗口。
其他界面展示
展示界面包括其余的界面，包括加載界面，界面的彈窗。
設(shè)計作品應(yīng)急大屏設(shè)計
設(shè)計作品應(yīng)急大屏設(shè)計
設(shè)計作品應(yīng)急大屏設(shè)計
設(shè)計作品大屏設(shè)計
