北方華創(chuàng )設備控制平臺軟件界面設計

北方華創(chuàng )設備控制平臺軟件界面設計

交互設計 | 界面設計 | wpf開(kāi)發(fā)

交互設計 | 界面設計 | wpf開(kāi)發(fā)

北方華創(chuàng )致力于加快推進(jìn)北方華創(chuàng )向新型制造業(yè)的戰略轉型;致力于成為半導體基礎產(chǎn)品領(lǐng)域值得信賴(lài)的引領(lǐng)者;致力于提升人類(lèi)智能生活品質(zhì);致力于實(shí)現中國“智造強國”的夢(mèng)想藍圖。未來(lái)的北方華創(chuàng ),將以半導體基礎產(chǎn)品領(lǐng)域先進(jìn)企業(yè)的姿態(tài)登上世界舞臺,深耕發(fā)展,引領(lǐng)未來(lái),堅持以客戶(hù)為中心,以?xún)r(jià)值創(chuàng )造者為本,持續創(chuàng )新,推動(dòng)產(chǎn)業(yè)進(jìn)步,創(chuàng )造無(wú)限可能。

北方華創(chuàng )委托藍藍設計負責一款工業(yè)刻蝕軟件的界面視覺(jué)設計和wpf前端開(kāi)發(fā)。藍藍設計人員通過(guò)前期詳細溝通,參考大量相關(guān)競品。在設計過(guò)程中雙方保持高效溝通,整個(gè)軟件有50頁(yè)左右,采用分批設計的模式,在設計過(guò)程我們還對過(guò)程版本進(jìn)行保留,不斷推敲打磨最后確定一個(gè)最優(yōu)方案。開(kāi)發(fā)過(guò)程中我們也運用到了控件的WPF定制開(kāi)發(fā)。好的產(chǎn)品是需要雙方建立同理心的基礎上共同創(chuàng )作出來(lái)的。

北方華創(chuàng  )設備控制平臺軟件界面設計 產(chǎn)品定位

為提供高精度的刻蝕解決方案,適用于多個(gè)行業(yè)和領(lǐng)域,如半導體、光電子、生物醫學(xué)等??梢詽M(mǎn)足不同行業(yè)的刻蝕需求,并提供相應的定制化功能和參數設置。

北方華創(chuàng  )設備控制平臺軟件界面設計 目標用戶(hù)

刻蝕軟件的主要用戶(hù)是各類(lèi)制造業(yè)企業(yè)和研發(fā)機構,包括半導體、電子器件、光電子器件、集成電路、微納加工等領(lǐng)域。需要進(jìn)行精確的刻蝕工藝來(lái)制造各類(lèi)產(chǎn)品或開(kāi)展研究,并能夠根據不同材料和需求進(jìn)行刻蝕工藝參數的優(yōu)化和調整。

北方華創(chuàng  )設備控制平臺軟件界面設計 設計風(fēng)格

界面整體采用藍和白兩個(gè)色系,頁(yè)面整體給人以干凈整潔的感覺(jué),在設計過(guò)程中遵循“所見(jiàn)即所得”的設計原則,通過(guò)扁平的設計方式,將信息更扁平、直接地呈現在客戶(hù)面前。同時(shí)最大化地減少頁(yè)面層級,使用戶(hù)產(chǎn)生輕量化的使用感受。

項目背景

北方華創(chuàng )始終秉承“推動(dòng)產(chǎn)業(yè)進(jìn)步,創(chuàng )造無(wú)限可能”的企業(yè)使命,立足半導體基礎產(chǎn)品領(lǐng)域,深耕半導體裝備、真空及鋰電裝備和精密電子元器件等業(yè)務(wù)領(lǐng)域,產(chǎn)品廣泛應用于集成電路、先進(jìn)封裝、半導體照明、第三代半導體、新能源光伏、新型顯示、真空熱處理、新能源鋰電等領(lǐng)域,致力于成為半導體基礎產(chǎn)品領(lǐng)域值得信賴(lài)的引領(lǐng)者。

現有設備控制平臺客戶(hù)端框架,已經(jīng)發(fā)布 10 余年,界面框架分發(fā)給不同產(chǎn)品系獨立維護,導致公司界面框架沒(méi)有形成統一風(fēng)格標準,很多控件被重復開(kāi)發(fā)。隨著(zhù)時(shí)間推移,華創(chuàng )客戶(hù)端應用與現有其它公司產(chǎn)品相比,在 UI 渲染效果,用戶(hù)體驗,客戶(hù)端應用穩定性等諸多方面都出現了明顯的技術(shù)差距和用戶(hù)體驗差距,迫切需要在新一代控制平臺設計的初期,規范 UI 設計標準,向行業(yè)領(lǐng)先技術(shù)發(fā)展趨勢看齊。

原型圖

痛點(diǎn)分析

  • 復雜混亂的布局

    布局混亂,導致用戶(hù)難以理解和找到所需功能,過(guò)多的窗口、菜單和選項可能會(huì )給用戶(hù)造成困惑,降低使用效率

  • 缺乏一致性

    功能模塊之間缺乏一致性,導致用戶(hù)需要重新適應每個(gè)模塊的界面和操作方式。增加學(xué)習成本和誤操作的風(fēng)險。

  • 交互不合理

    操作流程繁瑣、重復性操作過(guò)多、輸入數據要求不清晰等,這些都會(huì )增加用戶(hù)的工作負擔和錯誤率。

  • 缺乏美觀(guān)性

    頁(yè)面風(fēng)格過(guò)于老舊,不符合現代用戶(hù)的審美和使用習慣,會(huì )給用戶(hù)造成不適和困惑。導致使用體驗差。

  • 重點(diǎn)功能不突出

    不能直接讓用戶(hù)了解操作信息,可預知性較弱。降低用戶(hù)的使用效率,增加用戶(hù)使用軟件的難度和煩惱。

場(chǎng)景挑戰

復雜性:刻蝕軟件通常需要處理非常復雜的圖像和模型,因此軟件界面的設計需要能夠清晰展示所有相關(guān)信息,并讓用戶(hù)能夠快速、準確地獲取需要的信息。這意味著(zhù)需要設計出簡(jiǎn)單直觀(guān)、易于理解的界面,同時(shí)盡可能避免讓用戶(hù)感到不適或疲勞。

動(dòng)態(tài)性:刻蝕軟件在操作過(guò)程中可能會(huì )出現許多動(dòng)態(tài)變化,例如,加工進(jìn)度的實(shí)時(shí)更新、圖形模擬效果等等。這就要求軟件界面需要能夠快速響應并展示這些動(dòng)態(tài)變化,同時(shí)保證界面的穩定性和流暢性。

多平臺適配:刻蝕軟件在不同的平臺和設備上運行時(shí),需要保證用戶(hù)體驗的一致性和穩定性。因此,軟件界面設計需要考慮多個(gè)平臺上的不同分辨率、不同屏幕尺寸和不同操作系統的差異,并確保軟件能夠適配不同的設備。



方案價(jià)值

提升軟件的美觀(guān)性:美觀(guān)的軟件界面可以提供更愉悅的用戶(hù)體驗。清晰、直觀(guān)的布局、合適的顏色搭配和美觀(guān)的圖標可以幫助用戶(hù)更容易地理解和使用軟件,減少學(xué)習成本和操作困難,從而提高用戶(hù)滿(mǎn)意度。

提高用戶(hù)體驗:通過(guò)提升用戶(hù)體驗,用戶(hù)更容易學(xué)習和使用軟件,減少操作困難和學(xué)習成本。他們能夠更快速地完成任務(wù),獲得預期的結果。這樣可以提高用戶(hù)的滿(mǎn)意度,使其更愿意長(cháng)期使用和推薦該軟件。

  • 首頁(yè)機械工藝信息過(guò)多無(wú)法全部展示
  • 菜單層級布局不太友好
  • 圖形分析和數據分析沒(méi)進(jìn)行對比展示
  • 機械工藝狀態(tài)不夠明顯
  • 工藝流程動(dòng)畫(huà)數量不確定
  • 表格種類(lèi)過(guò)多,使用場(chǎng)景不明確
  • wpf開(kāi)發(fā),多個(gè)控件需要自定義,實(shí)現困難
  • 將不??葱畔⑦M(jìn)行縮略展示,點(diǎn)擊查看詳情
  • 設計多個(gè)版本,進(jìn)行分析,選擇最優(yōu)方案
  • 增加表格和不同圖形切換展示
  • 通過(guò)圖像和顏色結合形成統一規范
  • 進(jìn)行定制化顯示,目前有的情景都進(jìn)行設計
  • 進(jìn)行場(chǎng)景分類(lèi),規范表格樣式
  • 實(shí)現定制化控件
原型圖

    設計原則和理念

  • icon 頁(yè)面布局

    進(jìn)行 UI 設計時(shí)需要充分考慮布局的合理化問(wèn)題,

  • icon 品牌一致

    整體風(fēng)格以北方華創(chuàng )的品牌色藍色為主, 突出品牌性。

  • icon 元素分布

    通過(guò)界面元素布局,顏色,字體呈現給 用戶(hù)綜合體驗。

  • icon 控件規范

    控件樣式,提示措辭、系統顏色、窗口 布局,要遵循統一的標準。

  • icon 直觀(guān)展示

    界面直觀(guān)、對用戶(hù)透明,無(wú)需過(guò) 多培訓, 可直接使用系統。

  • icon 便于操作

    界面的設計滿(mǎn)足功能需求的同時(shí),注重用 戶(hù)的使用習慣

過(guò)程稿

在設計初期我們從不同的風(fēng)格和布局考慮做了很多版本的設計,這是其中的三個(gè)方案。

北方華創(chuàng  )設備控制平臺軟件界面設計-藍藍設計

方案一
       界面在設計過(guò)程中遵循“少即是多”的設計原則,盡量刪除用戶(hù)操作時(shí)不必要的內容,以實(shí)現接口界面的單純化。不使用其他紋理,模塊僅以色塊/大間距/分割線(xiàn)進(jìn)行區分,保證界面的干凈整潔。

北方華創(chuàng  )設備控制平臺軟件界面設計-藍藍設計

方案二
       頁(yè)面整體采用藍綠色,用戶(hù)使用軟件的場(chǎng)景一般是出故障時(shí),而藍綠色可以緩解用戶(hù)焦躁煩悶的情緒。頁(yè)面加入透視感背景圖,內容區以半透明狀透出背景使頁(yè)面顯得更有空間感。

北方華創(chuàng  )設備控制平臺軟件界面設計-藍藍設計

方案三
       頁(yè)面整體加入光線(xiàn),線(xiàn)條,炫酷背景等科技風(fēng)的元素,使頁(yè)面看起來(lái)復雜精密,具有科技感。深色的配色可以讓用戶(hù)獲得更沉浸的體驗,集中用戶(hù)的注意力不容易被其他元素干擾,提高用戶(hù)的辦公效率。

方案亮點(diǎn)

盒子思維

充分利用盒子思維,通過(guò)建立區域在盒子中的準確元素定位,將頁(yè)面進(jìn)行組件化設計,既減少了設計過(guò)程中的標注誤差,也方便后期開(kāi)發(fā)有效還原設計稿。

北方華創(chuàng  )設備控制平臺軟件界面設計-藍藍設計
北方華創(chuàng  )設備控制平臺軟件界面設計-藍藍設計
北方華創(chuàng  )設備控制平臺軟件界面設計-藍藍設計

機械手不同狀態(tài)繪制

右邊是工作流程中的機械臂,機械臂設計了不同的臂狀態(tài),以便用戶(hù)后期進(jìn)行替換和復用,整個(gè)設計風(fēng)格也迭代了好幾版,風(fēng)格需要和界面保持統一,同時(shí)還需要體現工業(yè)風(fēng)的特點(diǎn)和機械臂金屬材質(zhì)的堅硬特點(diǎn)。

北方華創(chuàng  )設備控制平臺軟件界面設計-藍藍設計

版本迭代

下圖機械臂操作過(guò)程圖的迭代版本的一個(gè)過(guò)程,整個(gè)軟件在設計過(guò)程中,很多細節都是通過(guò)不斷推敲,版本對比,最終得出最優(yōu)方案。在主要界面的設計工作中,雙方在三個(gè)月期間基本上每晚8-10點(diǎn)討論2個(gè)小時(shí),白天工作,晚上溝通。

北方華創(chuàng  )設備控制平臺軟件界面設計-藍藍設計
北方華創(chuàng  )設備控制平臺軟件界面設計-藍藍設計
北方華創(chuàng  )設備控制平臺軟件界面設計-藍藍設計
北方華創(chuàng  )設備控制平臺軟件界面設計-藍藍設計

機械手不同狀態(tài)繪制

右邊是工作流程中的機械臂,機械臂設計了不同的臂狀態(tài),以便用戶(hù)后期 進(jìn)行替換和復用,整個(gè)設計風(fēng)格也迭代了好幾版,風(fēng)格需要和界面保持統 一,同時(shí)還需要體現工業(yè)風(fēng)的特點(diǎn)和機械臂金屬材質(zhì)的堅硬特點(diǎn)。

原型圖
原型圖

設計體系UI規范的建立

設計完成后我們還制定了統一的設計體系規范,UI規范不僅可以幫助開(kāi)發(fā)人員更好的的還原設計圖樣式,還便于用戶(hù)在同一系列的其它產(chǎn)品線(xiàn)上應用。

結合實(shí)際業(yè)務(wù)場(chǎng)景和原子設計理論,將組件劃分為不同顆粒度:基礎組件、業(yè)務(wù)組件、典型頁(yè)面組件,以適用于不同研發(fā)場(chǎng)景使用。梳理具有業(yè)務(wù)特點(diǎn)的典型頁(yè)面,相比基礎組件和業(yè)務(wù)組件,典型頁(yè)面更加具體,為用戶(hù)提供具有代表性的內容和框架,并準確描述用戶(hù)最終看到的內容。如列表和左樹(shù)右表典型頁(yè)面組件,作為最為常見(jiàn)的頁(yè)面結構,各業(yè)務(wù)場(chǎng)景可復用頁(yè)面組件,保證了頁(yè)面組件內各基礎組件的一致性,最大程度的實(shí)現不同的產(chǎn)品線(xiàn)產(chǎn)品中頁(yè)面體驗的一致性。

原型圖

  返回