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