中科科儀圖像分析軟件交互及UI界面設(shè)計(jì)
發(fā)表于：
01
項(xiàng)目背景
北京中科科儀股份有限公司（簡(jiǎn)稱中科科儀），前身為中國(guó)科學(xué)院北京科學(xué)儀器研制中心（原中國(guó)科學(xué)院科學(xué)儀器廠），成立于1958年，中科科儀秉承“創(chuàng)新科學(xué)儀器，發(fā)展一流企業(yè)”使命，以一流電子光學(xué)和真空技術(shù)，打造尖端科學(xué)儀器設(shè)備及高端裝備制造國(guó)家隊(duì)，為強(qiáng)化國(guó)家戰(zhàn)略科技力量、實(shí)現(xiàn)科技自立自強(qiáng)做出新的貢獻(xiàn)。分析儀器主要應(yīng)用場(chǎng)景：集成豐富的圖像處理功能，為新能源、半導(dǎo)體等用戶提供全新解決方案。
在本次合作中，中科科儀委托蘭亭妙微負(fù)責(zé)相關(guān)界面的交互設(shè)計(jì)與視覺設(shè)計(jì)工作。雙方以 “持續(xù)優(yōu)化交互體驗(yàn)、突出模塊化設(shè)計(jì)” 為核心方向，通過提升軟件易用性傳遞 “以用戶為中心” 的產(chǎn)品理念，進(jìn)一步增強(qiáng)用戶對(duì)品牌的信任感。同時(shí)，針對(duì)重點(diǎn)頁面制定統(tǒng)一設(shè)計(jì)規(guī)范，便于開發(fā)工程師以此為參照優(yōu)化軟件內(nèi)的同類頁面。合作過程中，雙方保持及時(shí)溝通，最終達(dá)成了高效、優(yōu)質(zhì)的工作成果。
02
項(xiàng)目概述
產(chǎn)品定位
分析儀器以真空技術(shù)為根基，以粒子物理分析為核心手段，定位為 “多學(xué)科微觀分析的基礎(chǔ)設(shè)施”，既服務(wù)于科研領(lǐng)域的前沿探索，又支撐工業(yè)界的精密質(zhì)控，其本質(zhì)是通過真空環(huán)境下的高精度檢測(cè)能力，為物質(zhì)解析提供從 “現(xiàn)象觀測(cè)” 到 “決策依據(jù)” 的全流程價(jià)值賦能。
目標(biāo)用戶
儀器的用戶本質(zhì)是 “高精度分析需求的剛性群體”，既包括以 “探索未知” 為目標(biāo)的科研工作者，也涵蓋以 “控制風(fēng)險(xiǎn)” 為核心的工業(yè)質(zhì)控人員。他們的共性是：需要借助真空環(huán)境下的分析技術(shù)，解決常壓手段無法攻克的微觀檢測(cè)難題，且愿意為 “技術(shù)精度”“可靠性” 支付溢價(jià)，是典型的 “技術(shù)驅(qū)動(dòng)型” 需求群體。
設(shè)計(jì)風(fēng)格
重構(gòu)信息模塊，設(shè)計(jì)風(fēng)格采用簡(jiǎn)約的設(shè)計(jì)語言，清晰、簡(jiǎn)潔和直觀的表達(dá)方式。配色采用藍(lán)色，這種色彩能夠傳達(dá)出品牌的專業(yè)性、穩(wěn)定性和信賴感，有助于塑造積極的品牌形象。有助于增強(qiáng)用戶與頁面內(nèi)容的情感聯(lián)系，提高用戶的參與度和滿意度。
03
設(shè)計(jì)亮點(diǎn)
布局清晰，以邏輯化信息架構(gòu)降低認(rèn)知負(fù)荷；交互友好，用人性化設(shè)計(jì)消解操作難題
右側(cè)是客戶給的原型，原型頁面中浮動(dòng)窗口比較多，操作時(shí)容易遮擋中間的圖像區(qū)，調(diào)整后將“操作”“導(dǎo)航”“自動(dòng)臺(tái)”“操作記錄”統(tǒng)一采用tab切換的形式在右側(cè)展示。中間是圖像操作區(qū)，左側(cè)是圖像操作的一些工具按鈕。最下邊是縮略圖，可以左右滑動(dòng)查看更多。
設(shè)計(jì)后主要分為是三個(gè)大的模塊，左側(cè)是菜單區(qū)，中間是圖像區(qū)，右側(cè)是操作區(qū)，并且圖像的操作直接在圖上區(qū)域上方采用線性圖標(biāo)直觀明了，可以幫助用戶快速找到相對(duì)應(yīng)操作。
設(shè)計(jì)前后對(duì)比
04
其它方案
設(shè)計(jì)思考：該方案圍繞科研觀測(cè)場(chǎng)景構(gòu)建布局，采用左中右三分結(jié)構(gòu)實(shí)現(xiàn)功能有序分配。左側(cè)為系統(tǒng)主操作菜單區(qū)，以簡(jiǎn)潔圖標(biāo)搭配文字，快速引導(dǎo)用戶調(diào)用文件、查看、掃描等基礎(chǔ)功能，建立清晰操作路徑。 中間作為核心圖像交互區(qū)，上層設(shè)置圖像操作工具，覆蓋采集、分析常用功能；中間為大尺寸查看及操作區(qū)，充分展示顯微圖像細(xì)節(jié)，滿足科研觀測(cè)對(duì)清晰視效的需求；下層排布圖像縮略圖，支持多組數(shù)據(jù)快速切換對(duì)比，適配樣本批量分析場(chǎng)景。 右側(cè)是操作設(shè)置區(qū)，將高壓、束流等專業(yè)參數(shù)以可視化控件呈現(xiàn)，滑塊調(diào)節(jié)結(jié)合數(shù)值顯示，讓參數(shù)調(diào)整直觀高效，同時(shí) “標(biāo)準(zhǔn) / 快捷成像” 雙模式，兼顧常規(guī)與快速觀測(cè)需求 。 視覺呈現(xiàn)上，運(yùn)用漸變光影營(yíng)造科技氛圍，契合電子顯微鏡的精密屬性；色彩搭配簡(jiǎn)潔克制，以深色為底突出圖像與功能區(qū)，保障信息清晰傳達(dá)。通過圖標(biāo)簡(jiǎn)化、數(shù)據(jù)可視化轉(zhuǎn)化，把復(fù)雜科研參數(shù)轉(zhuǎn)化為易懂交互形式，提升信息傳遞效率，助力科研人員專注觀測(cè)分析，在功能落地與體驗(yàn)營(yíng)造間，實(shí)現(xiàn)專業(yè)工具的易用性平衡。
設(shè)計(jì)思考：方案重構(gòu)界面布局，主菜單以圖標(biāo)化形式整合到標(biāo)題欄，簡(jiǎn)潔直觀。內(nèi)容區(qū)左側(cè)縱向排布縮略圖，依托滾動(dòng)條拓展瀏覽容量；中間作為核心圖像操作區(qū)，聚焦觀測(cè)與交互；右側(cè)為參數(shù)操作區(qū)，功能分區(qū)清晰。 主題色選用品牌藍(lán)色，既借色彩強(qiáng)化品牌識(shí)別、維系品牌一致性，又以藍(lán)色蘊(yùn)含的信任與專業(yè)屬性，搭配現(xiàn)代界面元素，營(yíng)造出穩(wěn)重且具科技感的視覺氛圍，契合科研軟件專業(yè)定位，助力高效操作與品牌印象傳遞 。
05
界面欣賞
