產(chǎn)品定位
公司研發(fā)的小動(dòng)物單濃度口鼻暴露系統(tǒng),由口鼻暴露控制系統(tǒng)、稀釋混勻系統(tǒng)、質(zhì)量濃度檢測(cè)系統(tǒng)、氣體控制系統(tǒng)、廢氣處理系統(tǒng)、清洗系統(tǒng)等功能模塊組成。可檢測(cè)染毒進(jìn)行時(shí)間、染毒剩余時(shí)間、溫度、濕度、壓差、氧氣濃度、二氧化碳濃度、柜間壓差、氣溶膠濃度、氣溶膠流量、稀釋流量等相關(guān)數(shù)值。
交互設(shè)計(jì) | 視覺(jué)設(shè)計(jì) | 圖標(biāo)設(shè)計(jì)
北京慧榮和科技有限公司專注于氣溶膠和吸入毒理科研儀器設(shè)備的研發(fā)和生產(chǎn),是國(guó)家高新技術(shù)企業(yè)。成功的開(kāi)發(fā)出動(dòng)物氣體染毒裝置、細(xì)胞氣體染毒裝置、吸煙機(jī)、放射污染洗消裝置、手術(shù)器械消毒儀、血液消毒儀、等。所開(kāi)發(fā)儀器廣泛應(yīng)用國(guó)防、醫(yī)療、衛(wèi)生、防疫、環(huán)保、教學(xué)、科研等領(lǐng)域。
該軟件由北京慧榮和科技有限公司委托藍(lán)藍(lán)設(shè)計(jì)負(fù)責(zé)界面視覺(jué)優(yōu)化設(shè)計(jì)、交互優(yōu)化。藍(lán)藍(lán)設(shè)計(jì)人員通過(guò)前期詳細(xì)溝通,參考大量的相關(guān)競(jìng)品,確定好客戶風(fēng)格和喜好,在交互方面進(jìn)行一起探討,使操作更加流暢;根據(jù)客戶提供的舊版圖及需求完成其他頁(yè)面設(shè)計(jì);后續(xù)積極配合慧榮和相關(guān)開(kāi)發(fā)人員完成落地工作。
公司研發(fā)的小動(dòng)物單濃度口鼻暴露系統(tǒng),由口鼻暴露控制系統(tǒng)、稀釋混勻系統(tǒng)、質(zhì)量濃度檢測(cè)系統(tǒng)、氣體控制系統(tǒng)、廢氣處理系統(tǒng)、清洗系統(tǒng)等功能模塊組成。可檢測(cè)染毒進(jìn)行時(shí)間、染毒剩余時(shí)間、溫度、濕度、壓差、氧氣濃度、二氧化碳濃度、柜間壓差、氣溶膠濃度、氣溶膠流量、稀釋流量等相關(guān)數(shù)值。
本儀器的目標(biāo)用戶主要為藥物安全評(píng)價(jià)領(lǐng)域,化學(xué)品和農(nóng)藥安全評(píng)價(jià)領(lǐng)域等相關(guān)的從業(yè)人員,對(duì)檢測(cè)小動(dòng)物口鼻暴露氣體、液體氣溶膠吸入染毒暴露實(shí)驗(yàn)有需求的中外市場(chǎng)用戶,自動(dòng)化的檢測(cè)方式,對(duì)系統(tǒng)的操作易用性有較高要求。
用企業(yè)標(biāo)志顏色作為主色,相關(guān)鄰色作以輔助,強(qiáng)化重要功能的視覺(jué)識(shí)別信號(hào),使其設(shè)計(jì)穩(wěn)重而不失沉悶,應(yīng)用圓角,漸變的設(shè)計(jì)使用戶心里感知更加親和友好,通過(guò)多留白的方式來(lái)增加頁(yè)面的簡(jiǎn)潔,提升易讀性,更符合現(xiàn)代感視覺(jué)。
藍(lán)藍(lán)設(shè)計(jì)聚焦核心訴求,提升首頁(yè)體驗(yàn),在框架上我們保留舊版的左側(cè)導(dǎo)航設(shè)計(jì),優(yōu)化上部是相關(guān)操作和顯示,便于保留用戶的操作習(xí)慣,降低學(xué)習(xí)成本。 在舊版設(shè)計(jì)中顏色過(guò)于雜亂,無(wú)視覺(jué)重點(diǎn),尤其在導(dǎo)航與操作上沒(méi)有明確的選中與默認(rèn)下的層級(jí)區(qū)分,信息展示混亂。 我們優(yōu)化左側(cè)導(dǎo)航層級(jí),增強(qiáng)選中的識(shí)別度;在染毒與清洗顯示中加入進(jìn)度條,實(shí)時(shí)觀測(cè)操作進(jìn)展;儀表盤的信息顯示與報(bào)警提示上做了整合,可直觀的觀測(cè)正常狀態(tài)與報(bào)警狀態(tài),在保留指針走表的基礎(chǔ)上,增加數(shù)字顯示讀表,最大程度增強(qiáng)用戶體驗(yàn)!
在舊版的界面中,模塊操作混亂,信息分類不明顯,進(jìn)行實(shí)驗(yàn)操作時(shí)比較混亂,相似的功能較多、定義模糊。 針對(duì)此問(wèn)題我們對(duì)模板進(jìn)行層級(jí)規(guī)整,將相關(guān)信息進(jìn)行聚合分類處理,分為實(shí)驗(yàn)記錄模塊,按鈕模塊,以及實(shí)驗(yàn)信息模塊三部分,來(lái)清晰的告知用戶對(duì)不同模塊功能的認(rèn)知。 規(guī)整原有位置排列,將報(bào)警設(shè)定放于右側(cè)豎向排列,更便于用戶輸入;輸入框用不同的顏色標(biāo)識(shí)來(lái)鏈接相關(guān)內(nèi)容與區(qū)分,拆分舊版設(shè)計(jì)中的輸入框與名稱合并的內(nèi)容,統(tǒng)一整體視覺(jué)規(guī)范,增強(qiáng)輸入易用性。
在舊版界面中沒(méi)有統(tǒng)一的左側(cè)導(dǎo)航,需通過(guò)返回再到其它頁(yè),降低了操作易用性與交互成本,不同類的按鈕沒(méi)有層級(jí)區(qū)分,不利于數(shù)據(jù)的篩選查看。 為優(yōu)化用戶體驗(yàn),我們把左側(cè)導(dǎo)航整合為一個(gè)模塊,以單獨(dú)選中的方式來(lái)進(jìn)行篩選,打開(kāi)文件與導(dǎo)出數(shù)據(jù)作為常用按鈕,通過(guò)放大居前來(lái)提高操作比重。 簡(jiǎn)化曲線與表格的設(shè)計(jì),注重?cái)?shù)據(jù)本身信息的展示,使頁(yè)面更加簡(jiǎn)潔大方。
采樣控制和液體輸送儀頁(yè)面,與其它頁(yè)面保持統(tǒng)一的設(shè)計(jì)風(fēng)格,以留白簡(jiǎn)潔為主,不同的是按鈕做了立體感的設(shè)計(jì),模擬真實(shí)按鍵。 在舊版設(shè)計(jì)中沒(méi)有明顯的按下按鈕,這里通過(guò)明顯的選中狀態(tài)區(qū)別于其它默認(rèn)狀態(tài)。 數(shù)據(jù)輸入框與其單位拆分放置,使用戶更注意于數(shù)字,避免擾亂視覺(jué),按鍵的排列根據(jù)使用頻率與操作習(xí)慣做了重新整理。
在舊版的設(shè)計(jì)操作上是創(chuàng)建/修改/刪除用戶需單獨(dú)點(diǎn)開(kāi)進(jìn)行操作,降低了用戶修改效率。 我們以同頁(yè)切換的方式提高用戶操作效率,刪除多余不必要操作,同時(shí)對(duì)輸入內(nèi)容進(jìn)行優(yōu)化,最大程度提升用戶體驗(yàn)。
中國(guó)中車監(jiān)控顯示屏界面設(shè)計(jì)及QT、Codesys、Fltk開(kāi)發(fā)